:root{
  /* brand colors */
  --gold:#F2A900;
  --cream:#F9E6A8;
  --amber:#CC6F00;
  --brown:#4D2A00;
  /* tints made from the four */
  --amber-deep:#A85A00;
  --brown-mid:#7A4A12;
  --sand:#EFD58A;
  --white:#fff;
  /* surfaces + text */
  --bg:var(--cream);
  --surface:var(--white);
  --text:var(--brown);
  --text-soft:#6B4A1F;
  /* type */
  --font:'Montserrat','Avenir Next','Century Gothic',system-ui,sans-serif;
  --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.25rem; --fs-xl:1.6rem; --fs-hero:clamp(2.1rem,6vw,3.6rem);
  /* shape + space */
  --radius-sm:12px; --radius:24px; --radius-pill:999px;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem;
  --tabbar-h:64px;
  --max:1080px;
  --shadow:0 6px 20px rgba(77,42,0,.12);

  /* spacing (used by the top bar) */
  --spacing-sm:12px; --spacing-md:16px;
}


*{box-sizing:border-box;margin:0}

html{scroll-behavior:smooth}

body{font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  overflow-x: hidden;
}
  

a{color:inherit}

:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

svg{width:24px;height:24px;fill:currentColor}

/* splash */
.splash{position:fixed;
  inset:0;
  z-index:100;
  background:var(--brown);
  display:grid;
  place-items:center;
  transition:opacity .5s ease,visibility .5s;
  z-index: 9999;
}

.splash img{width:min(80vw,420px);
  height:auto;
  animation:rise .9s ease both}

.splash.hide{opacity:0;visibility:hidden}

body.has-splash:not(.splash-done){overflow:hidden}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Navbar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: var(--spacing-sm) 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1000;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.topbar.scrolled {
  background-color: rgba(109, 93, 62, 0.849);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5.5%;
}

.brand{display:flex;
  align-items:center;
  gap:.35rem;
  text-decoration:none;
  color:var(--cream);
}

.brand:hover { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}

.brand img{display:block;height:60px;width:auto}

.topnav {display: none;}


/* bottom tab bar (mobile) */
.bottom-bar{position:fixed;
  inset:auto 0 0 0;
  z-index:1000;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--surface);
  border-top:2px solid var(--amber)
}

.bottom-bar a,.bottom-bar button{
  display:flex;
  flex-direction:
  column;align-items:center;
  justify-content:center;
  gap:2px;font:inherit;
  font-size:.7rem;
  font-weight:600;
  color:var(--text-soft);
  background:none;
  border:0;
  text-decoration:none;
  cursor:pointer
}

.bottom-bar [aria-current],.bottom-bar button[aria-expanded="true"]{
  color:var(--brown)
}

.bottom-bar a[aria-current] {
  color: var(--amber-deep);
}
.bottom-bar [aria-current] svg {
  fill:var(--amber)
}

/* more drawer */
.scrim{position:fixed;
  inset:0;
  z-index:1001;
  background:rgba(77,42,0,.45)
}

.drawer{position:fixed;
  inset:auto 0 0 0;
  z-index:1002;
  background:var(--surface);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:var(--space-1) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  transform:translateY(0);
  animation:up .25s ease both}
  
.drawer[hidden],.scrim[hidden]{display:none}
.drawer-handle{width:44px;height:5px;border-radius:var(--radius-pill);background:var(--sand);margin:.4rem auto var(--space-1)}
.drawer a{padding:1rem 0;font-weight:700;text-decoration:none;border-bottom:1px solid var(--sand)}
.drawer a:last-child{border-bottom:0}
.drawer [aria-current] svg {
  fill:var(--amber)
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}

  .more-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font);
    font-size: 1rem;
    border-bottom: 1px solid var(--sand);
  }

  .more-sheet-item:last-child {
    border-bottom: none;
  }

  .more-sheet-item svg {
    width: 22px;
    height: 22px;
    color: var(--brown);
  }

  .more-sheet-item.active-link {
    color: var(--amber);
}

.hero {
  background: 
   /* linear-gradient(to bottom, rgba(239, 238, 235, 0.82) 0%, rgba(77, 42, 0, 0.55) 60%, rgba(77, 42, 0, 0.3) 100%),  */
    url('images/icc-hero-background-light.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: 60% center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

.hero-meta {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream);
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 14ch;
  margin-bottom: var(--space-2);
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-sub {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-4, 1.5rem);
}

.cta-row{display:flex;
  gap:var(--space-2);
  flex-wrap:wrap}

.btn{display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.5rem;
  border-radius:var(--radius-pill);
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--cream);
  transition:transform .15s ease,background .15s ease
}

.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px}
.btn-primary{background:var(--cream);color:var(--brown)}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--brown)}
.btn-ghost{background:transparent;color: var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--brown)}

/* sections */
.section-menu{
  margin:30px 2%;
  padding:var(--space-4) 0;
}

.section-menu>h2{
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 5.5% var(--space-3)}

/* category carousel */
.cat-wrap{position:relative}
.cat-track{
  display:flex;gap:var(--space-2);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:5.5%;
  padding:0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.cat-track::-webkit-scrollbar{display:none}

.cat-card{
  flex:0 0 85%;
  scroll-snap-align:start;
  background:var(--surface);
  border:2px solid var(--amber);
  border-radius:var(--radius);
  padding:var(--space-2);
  display:flex;flex-direction:column;gap:var(--space-2);
  text-align:center;
}

.cat-img{aspect-ratio:4/4;border-radius:var(--radius-sm);background:var(--sand) center/cover no-repeat}
.cat-card h3{font-size:var(--fs-base);font-weight:700;line-height:1.25}
.cat-btn{
  margin-top:auto;align-self:center;
  padding:.55rem 1.4rem;border-radius:var(--radius-pill);
  border:2px solid var(--brown);
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;color:var(--brown);
  transition:background .15s ease,color .15s ease;
}
.cat-btn:hover{background:var(--brown);color:var(--white)}

.cat-arrow{display:none}

/* dots */
.cat-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--space-3)}
.cat-dot{
  position:relative;
  width:8px;height:8px;padding:0;border:0;
  border-radius:var(--radius-pill);
  background:var(--sand);
  cursor:pointer;
  transition:width .25s ease,background .25s ease;
}
.cat-dot::after{content:"";position:absolute;inset:-10px -4px}   /* bigger tap area */
.cat-dot.active{width:24px;background:var(--amber)}

/* why coffee launch */
.section-why{
  margin:30px 0;
  padding:var(--space-4) 5.5%;
  background: var(--gold);
}
.section-why>h2{
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 var(--space-3);
}
.why-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2)}

.why-card{
  background:var(--surface);
  border:2px solid var(--amber);
  border-radius:var(--radius);
  padding:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.why-num{
  font-size:2.4rem;font-weight:800;line-height:1;
  color:var(--amber-deep);letter-spacing:-.03em;
}
/* accent line that draws in when the card appears */
.why-num::after{
  content:"";display:block;height:4px;width:0;margin-top:var(--space-1);
  border-radius:var(--radius-pill);background:var(--amber);
  transition:width .7s ease calc(var(--i,0) * 120ms + 250ms);
}
.why-card.is-visible .why-num::after{width:48px}
.why-card h3{font-size:var(--fs-lg);font-weight:800;line-height:1.2}
.why-card p{font-size:var(--fs-sm);color:var(--text-soft)}

/* scroll reveal (only active when JS is running) */
.js .reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 120ms);
}
.js .reveal.is-visible{opacity:1;transform:none}


@media (min-width:1100px){
  .why-grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .why-num::after{width:48px;transition:none}
}

/* reviews */
.section-reviews{margin:30px 5.5%;padding:var(--space-4) 0}
.section-reviews>h2{
  font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;
  margin:0 0 var(--space-2);
}
.rev-rating{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin-bottom:var(--space-3);color:var(--text-soft);font-size:var(--fs-sm);
}
.rev-rating strong{font-size:var(--fs-lg);color:var(--amber-deep)}
.g-logo{width:22px;height:22px}
/* 4.3 out of 5 stars: 86% filled */
.stars{letter-spacing:2px;font-size:1.05rem;color:var(--amber)}

.rev-track{
  display:flex;gap:var(--space-2);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.rev-track::-webkit-scrollbar{display:none}

.rev-card{
  flex:0 0 85%;
  scroll-snap-align:start;
  background:var(--surface);
  border:2px solid var(--amber);
  border-radius:var(--radius);
  padding:var(--space-3);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-3);
}
.rev-card blockquote{font-size:var(--fs-base);line-height:1.6}
.rev-card blockquote::before{
  content:"\201C";display:block;
  font-size:3rem;line-height:.6;font-weight:800;color:var(--amber);
  margin-bottom:var(--space-1);
}
.rev-card footer{font-weight:700;color:var(--amber-deep)}

.section-reviews .cat-dots{margin-top:var(--space-3)}

.link-more {
  text-decoration: none;
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.link-more:hover {
  color: var(--amber);
}

/* final CTA */
.section-cta{margin:30px 5.5%;padding:var(--space-4) 0}
.cta-panel{
  background:var(--brown);
  color:var(--cream);
  border-radius:var(--radius);
  padding:var(--space-4) var(--space-3);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.cta-panel h2{
  font-size:clamp(1.7rem,5vw,2.8rem);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
  max-width:18ch;
  margin-bottom:var(--space-2);
  color:var(--white);
}
.cta-lead{font-size:var(--fs-lg);font-weight:600;max-width:40ch;margin-bottom:var(--space-1);color:var(--gold)}
.cta-text{max-width:56ch;margin-bottom:var(--space-3);opacity:.9}
.cta-panel .cta-row{justify-content:center}
.cta-address{margin-top:var(--space-3);font-size:var(--fs-sm);opacity:.75;max-width:40ch}

/* button hovers tuned for the dark panel */
.cta-panel .btn-primary:hover{background:var(--white);color:var(--brown)}
.cta-panel .btn-ghost:hover{background:var(--cream);color:var(--brown)}

/* footer */
.footer{
  margin-top:var(--space-4);
  padding:var(--space-3) 5.5%;
  background-color: rgba(109, 93, 62, 0.849);
  color:var(--cream);
  text-align:center;
  font-size:var(--fs-sm);
  line-height:1.6;
}
.footer a{color:inherit;text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--white); color: var(--white);}
.footer-credit{font-weight:700}

/* mobile: Privacy and Terms live in the More drawer, so hide them here */
.footer-legal{display:none}

@media (min-width:768px){
  .topnav{display:flex;gap:var(--space-3); color: var(--white);}
  .topnav a{text-decoration:none;font-weight:600;padding:.4rem 0;border-bottom:3px solid transparent}
  .topnav a:hover,.topnav a[aria-current]{border-color:var(--gold); color: var(--gold);}

  .bottom-bar,.drawer,.scrim{display:none!important}

  .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 20px;
}

/* Section-Menu */
.cat-card{flex-basis:calc((100% - 3 * var(--space-2)) / 3.4)}
  .cat-wrap{padding-inline:64px} 
  .cat-arrow{
    display:grid;place-items:center;
    position:absolute;top:50%;transform:translateY(-60%);z-index:2;
    width:44px;height:44px;border-radius:50%;
    border:2px solid var(--amber);background:var(--surface);color:var(--brown);cursor:pointer;
  }
  .cat-prev{left:4px}
  .cat-next{right:4px}
  .cat-arrow:hover:not(:disabled){background:var(--amber);color:var(--white)}
  .cat-arrow:disabled{opacity:.3;cursor:default}

  /* Seection-Why */
    .why-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
    .section-why{margin:30px 0;}

  /* Section-Reviews  */
  .rev-card{flex-basis:calc((100% - 2 * var(--space-2)) / 2.4)}

  /* Final-CTA */
  .cta-panel{padding:var(--space-5) var(--space-4)}

  /* Footer */
  .footer{padding:var(--space-3) 5.5%;}
  .footer-legal{display:inline}

  body{padding-bottom:0}
}


/* ==========================
    MENU PAGE
============================*/

/* ===== menu page ===== */
.menu-hero {
  background: 
   linear-gradient(to bottom, rgba(62, 41, 31, 0.82) 0%, rgba(77, 42, 0, 0.55) 60%, rgba(77, 42, 0, 0.3) 100%), 
    url('/images/menu-hero.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}
.menu-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.menu-hero p{margin-top:var(--space-1);max-width:40ch}

.menu-filter{position:sticky;top:80px;z-index:900;background:var(--bg);padding:var(--space-2) 5.5% var(--space-1);border-bottom:2px solid var(--sand)}
.menu-search{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:2px solid var(--amber);border-radius:var(--radius-pill);padding:0 1rem}
.menu-search svg{flex:none;fill:var(--text-soft)}
.menu-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--text);padding:.75rem 0;outline:none}
.menu-search:focus-within{outline:3px solid var(--amber);outline-offset:2px}

.chips{display:flex;gap:.5rem;overflow-x:auto;padding:var(--space-1) 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;white-space:nowrap;font:inherit;font-size:var(--fs-sm);font-weight:700;padding:.5rem 1.1rem;border-radius:var(--radius-pill);border:2px solid var(--sand);background:var(--surface);color:var(--brown);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.chips button:hover{border-color:var(--amber)}
.chips button.active{background:var(--brown);border-color:var(--brown);color:var(--white)}

.menu-body{margin:0 5.5%;padding:var(--space-3) 0 0;scroll-margin-top:170px}
.menu-cat{margin-bottom:var(--space-4);scroll-margin-top:170px}
.menu-cat[hidden],.menu-card[hidden],.add-panel[hidden],.menu-empty[hidden]{display:none}
.menu-cat h2{display:inline-block;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;margin-bottom:var(--space-2);padding-bottom:.35rem;border-bottom:4px solid var(--amber)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:var(--space-2)}

.menu-card{background:var(--surface);border:2px solid var(--amber);border-radius:var(--radius);padding:var(--space-2);display:flex;flex-direction:column;gap:.5rem}
.menu-card h3{font-size:var(--fs-base);font-weight:700;line-height:1.25}
.menu-desc{font-size:var(--fs-sm);color:var(--text-soft)}
.menu-var{font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--brown);padding:.5rem .75rem;border:2px solid var(--sand);border-radius:var(--radius-sm);background:var(--surface)}
.menu-foot{margin-top:auto;padding-top:.5rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);flex-wrap:wrap}
.menu-price{font-size:var(--fs-lg);font-weight:800;color:var(--amber-deep)}
.add-panel{display:flex;align-items:center;gap:.5rem}
.qty{display:inline-flex;align-items:center;border:2px solid var(--brown);border-radius:var(--radius-pill);overflow:hidden}
.qty button{width:34px;height:34px;border:0;background:transparent;font:inherit;font-size:1.1rem;font-weight:700;color:var(--brown);cursor:pointer}
.qty button:hover{background:var(--sand)}
.q-val{min-width:1.6rem;text-align:center;font-weight:700}
.add-open,.add-confirm{font:inherit;font-size:var(--fs-sm);font-weight:700;padding:.55rem 1.2rem;border-radius:var(--radius-pill);border:2px solid var(--brown);background:var(--brown);color:var(--white);cursor:pointer;transition:background .15s ease}
.add-open:hover,.add-confirm:hover{background:var(--brown-mid)}
.add-confirm:disabled{background:var(--amber);border-color:var(--amber);cursor:default}
.menu-empty{text-align:center;padding:var(--space-4) 0;color:var(--text-soft)}
.menu-note{margin:0 5.5%;padding-bottom:6rem;font-size:var(--fs-sm);color:var(--text-soft);text-align:center}

.menu-img{
  aspect-ratio:4/3;
  border-radius:var(--radius-sm);
  background:var(--sand);        /* shows while loading or when a photo is missing */
  overflow:hidden;
  margin-bottom:.25rem;
}
.menu-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Order button */
.order-fab{position:fixed;left:5.5%;right:5.5%;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 12px);z-index:950;display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:.95rem 1.4rem;border-radius:var(--radius-pill);background:var(--brown);color:var(--white);font-weight:800;text-decoration:none;box-shadow:var(--shadow)}
.order-fab[hidden]{display:none}
.order-fab:hover{background:var(--brown-mid)}
.fab-total{color:var(--gold)}

/* chip arrows: desktop only */
.chips-wrap{position:relative}
.chip-arrow{display:none}

@media (min-width:768px){

  .menu-filter{padding-inline:5.5%}
  .menu-note{padding-bottom:var(--space-4)}
  .order-fab{left:auto;right:24px;bottom:24px;min-width:260px}

  .chips-wrap{padding-inline:48px;}
  .chip-arrow{
    display:grid;place-items:center;
    position:absolute;top:50%;transform:translateY(-50%);
    width:36px;height:36px;border-radius:50%;
    border:2px solid var(--amber);background:var(--surface);color:var(--brown);
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
    margin: 0 20px;
  }
  .chip-arrow svg{width:20px;height:20px}
  .chip-prev{left:0}
  .chip-next{right:0}
  .chip-arrow:hover:not(:disabled){background:var(--amber);color:var(--white)}
  .chip-arrow:disabled{opacity:.3;cursor:default}
}


/* ====================
    ORDER-PAGE
===================== */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.order-hero {
  background: 
   linear-gradient(to bottom, rgba(62, 41, 31, 0.82) 0%, rgba(77, 42, 0, 0.55) 60%, rgba(77, 42, 0, 0.3) 100%), 
    url('/images/order-hero.jpg') center 50% /cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

.order-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.order-hero p{margin-top:var(--space-1);max-width:40ch}
.order-body{max-width:760px;margin:0 auto;padding:var(--space-3) 5.5% var(--space-4)}

/* empty state */
.order-empty{text-align:center;padding:var(--space-4) 0;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.empty-icon{width:112px;height:112px;border-radius:50%;background:var(--sand);display:grid;place-items:center;margin-bottom:var(--space-1)}
.empty-icon svg{width:52px;height:52px;fill:var(--brown)}
.order-empty h2{font-size:var(--fs-xl);font-weight:800}
.order-empty p{color:var(--text-soft)}
.empty-btn{margin-top:var(--space-2)}
.empty-btn:hover{background:var(--brown-mid);color:var(--white)}
.order-empty .btn-primary{background:var(--brown);color:var(--white);border-color:var(--brown)}

/* items */
.o-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}
.o-item{display:grid;grid-template-columns:72px 1fr auto;gap:var(--space-2);align-items:center;background:var(--surface);border:2px solid var(--amber);border-radius:var(--radius);padding:var(--space-2)}
.o-img{width:72px;height:72px;border-radius:var(--radius-sm);background:var(--sand);overflow:hidden}
.o-img img{width:100%;height:100%;object-fit:cover;display:block}
.o-info h3{font-size:var(--fs-base);font-weight:700;line-height:1.25}
.o-var{font-size:var(--fs-sm);font-weight:600;color:var(--brown-mid)}
.o-each{font-size:.8rem;color:var(--text-soft);margin-bottom:.4rem}
.o-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;align-self:stretch;gap:.5rem}
.o-price{font-weight:800;color:var(--amber-deep);white-space:nowrap}
.o-remove{width:32px;height:32px;border:0;border-radius:50%;background:transparent;font-size:1.4rem;line-height:1;color:var(--text-soft);cursor:pointer}
.o-remove:hover{background:var(--sand);color:var(--brown)}

/* cards */
.o-card{background:var(--surface);border:2px solid var(--sand);border-radius:var(--radius);padding:var(--space-3);margin-bottom:var(--space-2)}
.o-card h2{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--space-2)}
.otype{border:0;padding:0;margin:0 0 var(--space-2);display:grid;gap:.5rem}
.radio{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border:2px solid var(--sand);border-radius:var(--radius-sm);font-weight:700;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.radio input{accent-color:var(--brown);width:18px;height:18px;margin:0}
.radio:has(input:checked){border-color:var(--amber);background:var(--cream)}
.field{margin-bottom:var(--space-2)}
.field label{display:block;margin-bottom:.35rem;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-deep)}
.field input{width:100%;font:inherit;color:var(--text);padding:.85rem 1rem;border:2px solid var(--sand);border-radius:var(--radius-sm);background:var(--surface)}
.field input:focus{outline:none;border-color:var(--amber)}
.o-saved{font-size:.8rem;color:var(--text-soft)}

/* summary */
.o-summary{background:var(--cream)}
.o-row{display:flex;justify-content:space-between;gap:var(--space-2);font-weight:600}
.o-note{margin:.5rem 0 var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--sand);font-size:.8rem;font-style:italic;color:var(--text-soft)}
.o-total{font-size:var(--fs-xl);font-weight:800;color:var(--amber-deep)}

/* send buttons */
.o-error{margin:var(--space-2) 0;padding:.8rem 1rem;border-radius:var(--radius-sm);background:#fdecea;color:#a12a1a;font-weight:600;font-size:var(--fs-sm)}
.o-send{display:grid;gap:.75rem;margin-top:var(--space-2)}
.send-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-weight:800;padding:1rem 1.4rem;border:0;border-radius:var(--radius-pill);color:var(--white);cursor:pointer;transition:transform .15s ease,filter .15s ease}
.send-btn svg{width:22px;height:22px;fill:currentColor}
.send-btn:hover{filter:brightness(1.08)}
.send-btn:active{transform:scale(.98)}
.send-fb{background:#0a7cff}
.send-sms{background:var(--brown)}
.o-copied{margin-top:var(--space-2);padding:.8rem 1rem;border-radius:var(--radius-sm);background:var(--sand);color:var(--brown);font-weight:600;font-size:var(--fs-sm);text-align:center}
.o-clear{display:block;margin:var(--space-3) auto 0;background:none;border:0;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--text-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.o-clear:hover{color:var(--amber)}

@media (min-width:600px){
  .o-send{grid-template-columns:1fr 1fr}
  .o-item{grid-template-columns:96px 1fr auto}
  .o-img{width:96px;height:96px}
}


/* ===========================
  CONTACT-PAGE
 ============================ */
[hidden]{display:none!important}

.contact-hero {
  background: 
   linear-gradient(to bottom, rgba(62, 41, 31, 0.82) 0%, rgba(77, 42, 0, 0.55) 60%, rgba(77, 42, 0, 0.3) 100%), 
    url('/images/contact-us-hero.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}
.contact-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.contact-hero p{margin-top:var(--space-1);max-width:40ch}

.c-section{max-width:var(--max);margin:0 auto;padding:var(--space-4) 5.5% 0}
.c-section>h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.01em;margin-bottom:var(--space-3)}
.c-lead{max-width:56ch;margin:calc(var(--space-2) * -1) 0 var(--space-3);color:var(--text-soft)}
#visit{scroll-margin-top:96px}

/* buttons on light backgrounds */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-weight:700;padding:.8rem 1.5rem;border-radius:var(--radius-pill);border:2px solid var(--brown);background:var(--brown);color:var(--white);text-decoration:none;cursor:pointer;transition:background .15s ease,transform .15s ease}
.c-btn svg{width:20px;height:20px}
.c-btn:hover{background:var(--brown-mid)}
.c-btn:active{transform:scale(.97)}
.c-btn:disabled{opacity:.6;cursor:default}

/* info cards */
.c-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.c-card{background:var(--surface);border:2px solid var(--amber);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.c-card:hover {background:var(--surface);border:2px solid var(--brown);border-radius:var(--radius);padding:var(--space-3);display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.c-icon{width:48px;height:48px;border-radius:50%;background:var(--sand);display:grid;place-items:center}
.c-icon svg{fill:var(--brown)}
.c-card h3{font-size:var(--fs-lg);font-weight:800;line-height:1.2}
.c-card p{font-size:var(--fs-sm);color:var(--text-soft);flex:1}
.c-card .c-btn{margin-top:.4rem}

/* form */
.cf{background:var(--surface);border:2px solid var(--sand);border-radius:var(--radius);padding:var(--space-3);display:grid;gap:var(--space-2)}
.cf-row{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
.cf-field label{display:block;margin-bottom:.35rem;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-deep)}
.cf-field input,.cf-field textarea{width:100%;font:inherit;color:var(--text);padding:.85rem 1rem;border:2px solid var(--sand);border-radius:var(--radius-sm);background:var(--surface);resize:vertical}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--amber)}
.cf-field [aria-invalid]{border-color:#c0392b}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-status{padding:.8rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:var(--fs-sm)}
.cf-status.success{background:var(--sand);color:var(--brown)}
.cf-status.error{background:#fdecea;color:#a12a1a}
.cf-send{justify-self:start}

/* map */
.c-map{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius);background:var(--sand);margin-bottom:var(--space-3)}

@media (min-width:640px){
  .c-grid{grid-template-columns:repeat(2,1fr)}
  .cf-row{grid-template-columns:1fr 1fr}
  .c-map{aspect-ratio:16/9}
}
@media (min-width:1100px){
  .c-grid{grid-template-columns:repeat(4,1fr)}
  .c-map{aspect-ratio:21/9}
}


/* =========================
  PRIVACY + TERMS - PAGES
  ======================== */

  .privacy-hero {
  background: 
   linear-gradient(to bottom, rgba(62, 41, 31, 0.82) 0%, rgba(77, 42, 0, 0.55) 60%, rgba(77, 42, 0, 0.3) 100%), 
    url('/images/hero-privacy.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

 .terms-hero {
  background: 
   linear-gradient(to bottom, rgba(62, 41, 31, 0.82) 0%, rgba(77, 42, 0, 0.55) 60%, rgba(77, 42, 0, 0.3) 100%), 
    url('/images/hero-terms.jpg') center/cover no-repeat;
  color: var(--white);
  padding: 120px 5.5%;
  background-position: center; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: self-start;
}

.privacy-hero h1, .terms-hero h1{font-size:var(--fs-hero);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.2)}
.privacy-hero p, .terms-hero p{margin-top:var(--space-1);max-width:40ch}

.legal{max-width:760px;margin:0 auto;padding:var(--space-4) 5.5% 0}
.legal p,.legal li{line-height:1.7}
.legal p{margin-bottom:var(--space-2)}
.legal h2{font-size:var(--fs-lg);font-weight:800;line-height:1.25;margin:var(--space-4) 0 var(--space-1);padding-top:var(--space-2);border-top:2px solid var(--sand)}
.legal h2:first-of-type{margin-top:var(--space-3)}
.legal ul{padding-left:1.25rem;margin:0 0 var(--space-2);display:grid;gap:.5rem}
.legal a{font-weight:700;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:4px}
.legal a:hover{color:var(--brown-mid)}
.legal-cross{margin-top:var(--space-4)}

/* ===== brand fallback: hero photo missing -> solid brown ===== */
.hero,.menu-hero,.order-hero,.contact-hero,.privacy-hero,.terms-hero{background-color:var(--brown)}

/* modal (clear order + sample notice) */
body.modal-open{overflow:hidden}
.modal-backdrop{position:fixed;inset:0;z-index:3000;background:rgba(77,42,0,.55);display:grid;place-items:center;padding:var(--space-3);animation:fade .2s ease both}
.modal{width:min(100%,430px);background:var(--surface);border:2px solid var(--amber);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow);animation:pop .25s ease both}
.modal h2{font-size:var(--fs-lg);font-weight:800;line-height:1.2;margin-bottom:.6rem}
.modal-text{color:var(--text-soft);margin-bottom:var(--space-3)}
.modal-text p+p{margin-top:.6rem}
.modal-text a{color:var(--amber-deep);font-weight:700;text-underline-offset:3px}
.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap}
.m-btn{font:inherit;font-weight:700;padding:.7rem 1.5rem;border-radius:var(--radius-pill);border:2px solid var(--brown);cursor:pointer;transition:background .15s ease,color .15s ease}
.m-primary{background:var(--brown);color:var(--cream)}
.m-primary:hover{background:var(--brown-mid)}
.m-ghost{background:transparent;color:var(--brown)}
.m-ghost:hover{background:var(--sand)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}