/* Lilipan: flour, toasted crust and warm terracotta. */
:root {
  --espresso: #3d2b20;
  --cocoa: #665044;
  --oat: #f8f3e9;
  --flour: #fffcf6;
  --wheat: #e8d5b5;
  --crust: #9d4e30;
  --line: #3d2b2026;
  --blue: var(--espresso);
  --sky: #d9bd95;
  --cream: var(--oat);
  --pink: var(--crust);
  --darkpink: #69381f;
  --mint: #e9e4d8;
  --yellow: #ebd6b0;
}
body {background:var(--oat);color:var(--espresso);font-size:17px}
::selection {background:#d9bd95;color:var(--espresso)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid var(--crust);outline-offset:4px}
h1,h2,h3 {letter-spacing:-.035em}
h1 em,h2 em {color:var(--crust)}
.eyebrow {color:var(--cocoa);letter-spacing:1.9px;font-size:13px}
.announcement {background:var(--espresso);color:var(--oat);height:30px;font-size:11px;letter-spacing:1.8px}
header {height:84px;background:#fffcf6f5;border-bottom:1px solid var(--line);box-shadow:none}
header .logo {color:var(--espresso);font-size:36px}
header nav {gap:28px}
.nav-link {font-family:Gilroy,Arial,sans-serif;font-size:15px;letter-spacing:0}
.nav-link:hover,.hero-story:hover {color:var(--crust)}
.block,.block:hover {box-shadow:none}
.icon-button:hover {background:#ede2d2}
.icon-button #bagCount {background:var(--crust);color:var(--flour)}
.menu-panel {background:var(--flour);border-bottom:1px solid var(--line);box-shadow:0 20px 35px #3d2b2012}
.menu-panel a {background:#f0e6d7;color:var(--espresso);box-shadow:none;border:1px solid var(--line);border-radius:5px;font-size:23px}
.menu-panel a:hover {background:#e7d5ba}
.hero {background:var(--oat);height:700px;max-height:850px}
.hero:after {background:linear-gradient(90deg,#f8f3e9 0%,#f8f3e9 28%,#f8f3e9e3 40%,#f8f3e933 61%,transparent 76%)}
.hero-content {padding-top:92px}
.hero h1 {font-size:clamp(65px,6.5vw,103px);text-shadow:none;line-height:1.02}
.hero p {color:var(--cocoa);font-size:18px;line-height:1.65}
.hero-story {color:var(--cocoa)}
.hero-note {color:var(--cocoa);font-family:Gilroy,Arial,sans-serif;font-size:11px;letter-spacing:.65px;gap:20px}
.hero-bottom {color:var(--flour);text-shadow:0 1px 6px #3d2b2055}
.sticker {background:var(--wheat);color:var(--espresso);border:1px solid #3d2b2040;box-shadow:none;right:4%;transform:rotate(9deg);font-size:20px}
.cta,.blue-cta {background:var(--espresso);color:var(--flour);box-shadow:none;border:1px solid var(--espresso);border-radius:5px;padding:17px 25px;font-family:Toroka,Arial,sans-serif;font-size:17px;letter-spacing:.8px;transition:background .2s,transform .2s,box-shadow .2s}
.cta:hover,.blue-cta:hover {background:#604334;border-color:#604334;transform:translateY(-2px);box-shadow:0 6px 16px #3d2b2018}
.marquee {background:#eaddc7;border-color:var(--line);padding:16px 0;color:var(--cocoa)}
.marquee div,.marquee span {font-family:Toroka,Arial,sans-serif;font-size:20px;letter-spacing:2px}
.marquee span {color:var(--crust);font-size:23px}
.bread-section {padding-top:88px;padding-bottom:88px}
.slider-arrows button {background:var(--flour);border:1px solid #3d2b2045;color:var(--espresso);width:48px;height:48px;font-size:25px}
.slider-arrows button:hover {background:var(--wheat)}
.filters button {border:1px solid #3d2b2050;border-radius:30px;padding:10px 24px;font-size:15px;letter-spacing:.7px}
.filters button.active {background:var(--espresso);color:var(--flour);box-shadow:none}
.card-photo {--card-bg:#eee2cf!important;--card-shadow:transparent!important;background:var(--card-bg);box-shadow:none!important;border-radius:12px;border:1px solid #3d2b2010;padding:12px}
.bread-card:nth-child(4n+2) .card-photo {--card-bg:#e9d5c5!important}
.bread-card:nth-child(4n+3) .card-photo {--card-bg:#e4ddce!important}
.bread-card:nth-child(4n+4) .card-photo {--card-bg:#eadfc8!important}
.card-photo img {border-radius:7px;transition:transform .45s ease}
.card-photo:hover img {transform:scale(1.04)}
.card-badge {background:var(--flour);color:var(--espresso);border:1px solid #3d2b2018;border-radius:3px;box-shadow:none;font-size:11px;letter-spacing:1px}
.card-name {font-size:25px;margin-top:20px}
.card-bottom span,.shop-rating {color:var(--cocoa)}
.add-button {background:var(--espresso);color:var(--flour);box-shadow:none;border:1px solid var(--espresso);width:37px;height:37px}
.add-button:hover {background:var(--crust);border-color:var(--crust)}
.shop-section {background:#efe7d9;border-top:1px solid var(--line);padding-top:88px;padding-bottom:88px}
.shop-heading h2 {line-height:1.08}
.shop-heading p {color:var(--cocoa);max-width:520px}
.shop-seal {background:#e2c89f;color:var(--espresso);box-shadow:none;border:1px solid #3d2b2033;width:112px;height:112px;font-size:24px}
.shop-trust {border-color:var(--line);font-family:Gilroy,Arial,sans-serif;color:var(--cocoa);font-size:14px;gap:35px;padding:22px 0;margin:34px 0}
.shop-toolbar input,.shop-toolbar select,.review-form input,.review-form select,.review-form textarea,.search-input {background:var(--flour);color:var(--espresso);border:1px solid #3d2b2040;border-radius:5px;padding:14px}
.shop-toolbar label,.review-form label {color:var(--cocoa);font-size:13px;letter-spacing:.15px}
.shop-grid {gap:42px 26px}
.shop-grid .card-name {font-size:24px}
.shop-grid .card-photo {border:1px solid #3d2b2017}
#shopCount {color:var(--cocoa);font-size:13px;margin:25px 0}
.shop-help {border-color:var(--line);margin-top:45px}
.shop-help>span {font-size:15px;color:var(--cocoa)}
.reviews-section {background:var(--oat);padding-top:88px;padding-bottom:88px}
.reviews-section>div>p {color:var(--cocoa)}
.review-form {border:1px solid var(--line);border-radius:12px;box-shadow:none;background:var(--flour);padding:34px}
.review-form input,.review-form select,.review-form textarea {background:var(--oat)}
.review-card {background:#efe6d8;border:1px solid var(--line);border-radius:9px}
.review-empty {border:1px dashed #8d71585e;background:transparent;border-radius:8px}
.review-note,.review-card small {color:var(--cocoa)}
.review-stars {color:var(--crust)}
.local-section {background:#d7b897;padding-top:75px;padding-bottom:75px}
.local-section p {color:#513a29}
.local-section .eyebrow {color:#5c402d}
.local-flower {color:#f6eadb;opacity:.65}
.flower-two {color:#b08762;opacity:.45}
.phone {font-family:Gilroy,Arial,sans-serif;font-size:20px}
.bread-motion,.bread-stage {background:var(--oat)}
.motion-heading {color:var(--espresso)}
.motion-heading .eyebrow,.motion-heading p {color:var(--cocoa)}
.bread-stamp {color:var(--espresso)}
.bread-stamp span {border:1px solid #3d2b2024;border-radius:4px;box-shadow:3px 3px var(--stamp-shadow)}
.stamp-one {--stamp-color:#e5d5bd;--stamp-shadow:#b79c78;color:#4f3826}
.stamp-two {--stamp-color:#d8b59c;--stamp-shadow:#a77351;color:#583323}
.stamp-three {--stamp-color:#ecd7ad;--stamp-shadow:#b89b67;color:#604b29}
.stamp-four {--stamp-color:#d6d3bd;--stamp-shadow:#a19d7f;color:#4d4d34}
.motion-floor {background:#dfc5a1;border-color:#c8aa80;color:#806243}
.portrait {background:#e6d6bc}
.portrait-label {background:var(--oat);color:var(--espresso);box-shadow:none;border:1px solid #3d2b2033;font-size:20px}
.story-copy {background:#e8dfcf;padding-top:85px;padding-bottom:85px}
.story-copy p {color:var(--cocoa);line-height:1.7}
.story-copy .cta {background:var(--espresso);color:var(--flour)}
.story-copy .cta:hover {background:#604334}
.process {background:var(--flour);padding-top:85px;padding-bottom:85px}
.process-grid article {border-top:1px solid #3d2b2040;padding:28px 10px}
.step-number {color:var(--crust);font-family:Gilroy,Arial,sans-serif;font-size:18px}
.process-grid p {color:var(--cocoa);font-size:16px}
.videos {background:#eee3d2;padding-top:85px;padding-bottom:85px}
.social-link {color:var(--crust);font-size:15px;letter-spacing:1px;text-underline-offset:5px}
.reel-cover {box-shadow:none;background:#dfcaaa;border:1px solid var(--line);border-radius:14px}
.play {background:var(--flour);color:var(--espresso);box-shadow:none;border:1px solid var(--line)}
.reel-tag {background:var(--espresso);color:var(--flour);box-shadow:none}
.faq {background:var(--oat);padding-top:85px;padding-bottom:85px}
.faq details {border-bottom:1px solid #3d2b2040}
.faq p {color:var(--cocoa)}
.faq summary {font-size:22px}
.footer-marquee {background:#915f3e;color:var(--flour)}
.footer-marquee span {color:#efd9ba}
footer {background:#32261e;color:var(--oat);padding-top:80px}
.footer-top .cta {background:var(--wheat);color:var(--espresso);border-color:var(--wheat)}
.footer-top .cta:hover {background:var(--flour)}
.footer-links {font-size:20px;letter-spacing:.5px;gap:20px}
.footer-top p,.footer-bottom {color:#d5c7b9}
.footer-word {color:#eee0cd;margin-top:65px}
.footer-bottom {border-color:#e0cdb933;padding-top:22px;line-height:1.6}
dialog {background:var(--flour);color:var(--espresso);border:1px solid var(--line);box-shadow:0 18px 70px #3d2b202c}
dialog::backdrop {background:#291b13a6;backdrop-filter:blur(5px)}
.modal-close {background:var(--espresso);color:var(--flour)}
.bag-item,.search-results button,.product-perks {border-color:var(--line)}
.toast {background:var(--espresso);color:var(--flour);box-shadow:0 8px 30px #3d2b2026}
.floating-bag {background:var(--espresso);color:var(--flour);box-shadow:0 8px 25px #3d2b202a;border:1px solid #f8f3e93a;border-radius:7px}
@media(min-width:1600px) {
  .bread-section,.shop-section,.reviews-section,.process,.videos,.faq {padding-left:max(4%,calc((100vw - 1440px)/2));padding-right:max(4%,calc((100vw - 1440px)/2))}
}
@media(max-width:1100px) {
  .hero h1 {font-size:76px}
  .hero-content {padding-top:90px}
  header nav {gap:20px}
  .shop-grid {gap:35px 22px}
}
@media(max-width:700px) {
  .announcement {height:27px;font-size:9px;letter-spacing:1px}
  header {height:66px;padding:0 18px}
  header .logo {font-size:28px}
  header nav {gap:8px}
  header nav>.nav-link {font-size:13px;font-family:Gilroy,Arial,sans-serif}
  .menu-panel {top:66px}
  .menu-panel a {font-size:20px}
  .hero {height:720px;min-height:0;max-height:none}
  .hero:after {background:linear-gradient(0deg,#f8f3e9 0%,#f8f3e9fa 27%,#f8f3e9d9 43%,#f8f3e950 64%,#f8f3e900 80%)}
  .hero-content {padding:25px 22px 34px}
  .hero h1 {font-size:clamp(51px,14vw,62px);line-height:1.04;margin:14px 0 18px}
  .hero h1 em {letter-spacing:-2.5px}
  .hero p {font-size:16px;line-height:1.6}
  .hero-note {font-size:9px;gap:12px;letter-spacing:.4px;margin-top:23px}
  .sticker {font-size:16px;width:85px;height:85px;top:22px;right:22px;padding-top:14px}
  .marquee {padding:13px 0}
  .marquee div,.marquee span {font-size:17px;letter-spacing:1.5px}
  .bread-section,.shop-section,.reviews-section,.process,.videos,.faq {padding:58px 22px}
  .eyebrow {font-size:11px;letter-spacing:1.5px}
  .section-heading h2 {font-size:34px;line-height:1.08}
  .slider-arrows button {width:36px;height:36px;font-size:22px}
  .filters {gap:8px}
  .filters button {font-size:13px;padding:10px 20px}
  .shop-heading {gap:12px}
  .shop-heading h2 {font-size:37px;line-height:1.05}
  .shop-heading p {font-size:15px}
  .shop-seal {width:76px;height:76px;font-size:16px}
  .shop-trust {gap:13px;font-size:13px;margin:24px 0;padding:20px 0}
  .shop-grid {gap:30px 17px}
  .shop-grid .card-photo {border-radius:9px;padding:7px}
  .shop-grid .card-name {font-size:20px;line-height:1.12}
  .shop-grid .card-badge {font-size:9px;letter-spacing:.6px}
  .shop-grid .card-bottom span {font-size:11px;line-height:1.5}
  .shop-grid .add-button {width:30px;height:30px}
  .shop-rating {line-height:1.5}
  .review-form {padding:25px 20px}
  .local-section {padding:60px 22px}
  .local-section h2 {font-size:38px;line-height:1.08}
  .story-copy {padding:58px 25px}
  .bread-stamp span {box-shadow:2px 2px var(--stamp-shadow)}
  .process-grid article {padding:25px 0}
  .faq summary {font-size:21px}
  footer {padding-top:55px}
  .footer-word {margin-top:45px}
  .cta {font-size:16px}
}
