/* ==========================================================================
   base.css
   Structural styles shared by every client site. Colors/fonts live in
   css/themes/*.css - this file should look identical across all clients.
   ========================================================================== */

:root{
  /* Fallback theme values (used only if a theme file fails to load) */
  --color-primary:#333333;
  --color-primary-dark:#222222;
  --color-accent:#999999;
  --color-accent-light:#cccccc;
  --color-pop:#3366cc;
  --color-pop-light:#e6edfb;
  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-text:#222222;
  --color-text-muted:#666666;
  --font-heading:Georgia,serif;
  --font-body:Arial,sans-serif;
  --divider-style:solid;
  --radius:8px;
  --header-height:64px;
}

html,body{
  background-color:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
}

h1,h2,h3,h4,.brand-name{
  font-family:var(--font-heading);
  font-weight:600;
  color:var(--color-text);
}

a{ color:var(--color-primary); }
a:hover{ color:var(--color-primary-dark); }

.btn-brand{ background-color:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.btn-brand:hover{ background-color:var(--color-primary-dark); border-color:var(--color-primary-dark); color:#fff; }
.btn-outline-brand{ border-color:var(--color-primary); color:var(--color-primary); }
.btn-outline-brand:hover{ background-color:var(--color-primary); color:#fff; }
.btn-pop{ background-color:var(--color-pop); border-color:var(--color-pop); color:#fff; }
.btn-pop:hover{ background-color:var(--color-pop); border-color:var(--color-pop); color:#fff; filter:brightness(0.92); }

/* ---------- Top bar (not sticky, scrolls with page) ---------- */
.top-bar{ background-color:var(--color-primary-dark); color:var(--color-accent-light); font-size:.82rem; }
.top-bar a{ color:var(--color-accent-light); text-decoration:none; }
.topbar-social{ display:inline-flex; align-items:center; margin-left:.75rem; opacity:.9; }
.topbar-social:hover{ opacity:1; }
.topbar-contact span{ display:inline-flex; align-items:center; gap:.35rem; }

/* ---------- Sticky header ----------
   Default (no hero on the page): solid from the first pixel, just gains a
   shadow on scroll. Only pages with a hero directly underneath (body.has-hero)
   get the transparent-over-hero -> solid-on-scroll treatment. */
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background-color:var(--color-surface);
  box-shadow:none;
  transition:background-color .25s ease, box-shadow .25s ease;
}
.site-header .navbar-brand,
.site-header .nav-link,
.site-header .cart-btn{
  color:var(--color-text);
  transition:color .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 2px 14px rgba(0,0,0,.08); }

body.has-hero .site-header{
  background-color:transparent;
  margin-bottom:calc(-1 * var(--header-height));
}
body.has-hero .site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,0));
  opacity:1;
  transition:opacity .25s ease;
  pointer-events:none;
}
body.has-hero .site-header .navbar-brand,
body.has-hero .site-header .nav-link,
body.has-hero .site-header .cart-btn{ color:#fff; }
body.has-hero .site-header.is-scrolled{ background-color:var(--color-surface); margin-bottom:0; }
body.has-hero .site-header.is-scrolled::before{ opacity:0; }
body.has-hero .site-header.is-scrolled .navbar-brand,
body.has-hero .site-header.is-scrolled .nav-link,
body.has-hero .site-header.is-scrolled .cart-btn{ color:var(--color-text); }

.site-header .nav-link.active{ color:var(--color-pop) !important; font-weight:600; }
body.has-hero .site-header:not(.is-scrolled) .nav-link.active{ color:var(--color-accent-light) !important; }
.site-header .navbar-toggler{ border-color:var(--color-text-muted); }
body.has-hero .site-header:not(.is-scrolled) .navbar-toggler{ border-color:rgba(255,255,255,.7); }

.brand-logo{ height:38px; width:38px; border-radius:50%; object-fit:cover; }
.brand-logo-fallback{
  height:38px; width:38px; border-radius:50%;
  background:var(--color-accent); color:var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700;
}
.cart-btn{ position:relative; background:none; border:none; padding:.25rem .5rem; cursor:pointer; }
.header-icon-group{ display:flex; align-items:center; gap:.4rem; }
.header-chat-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--color-pop-light); color:var(--color-pop);
  transition:background-color .15s ease;
}
.header-chat-btn:hover{ background:var(--color-accent-light); color:var(--color-pop); }

/* Header layout: brand always first; icon-group + toggler always visible in
   the top row regardless of collapse state; the collapsible nav-links panel
   is visually LAST so its flex-basis:100% wraps it below the settled row
   instead of disrupting the icon-group/toggler that come after it in the
   DOM (order controls visual position independently of DOM position). */
.site-header .container{ justify-content:flex-start; }
.header-icon-group{ order:1; margin-left:auto; }
.navbar-toggler{
  order:2; margin-left:.5rem;
  border:none; padding:0; box-shadow:none;
  width:38px; height:38px; border-radius:50%;
  background:var(--color-pop-light); color:var(--color-pop);
  display:flex; align-items:center; justify-content:center;
}
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem var(--color-pop-light); }
.navbar-collapse{ order:3; flex-basis:100%; width:100%; justify-content:center; }

@media (min-width:992px){
  .navbar-collapse{ order:1; margin-left:auto; flex-basis:auto; width:auto; }
  .header-icon-group{ order:2; margin-left:.75rem; }
  .navbar-toggler{ display:none; }
  .gap-lg-1 {gap: 1rem !important;}
}
.cart-badge{
  position:absolute; top:-4px; right:-2px;
	  background:var(--color-pop); color:#fff;
	  font-size:.65rem; font-weight:700; border-radius:50%;
	  min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}

@keyframes bump{ 0%{transform:scale(1);} 45%{transform:scale(1.22);} 100%{transform:scale(1);} }
.bump{ animation:bump .32s ease; }

/* ---------- Section divider ---------- */
.section-divider{
  border-top-width:3px; border-top-style:var(--divider-style); border-color:var(--color-accent);
  width:72px; margin:.5rem auto 1.5rem;
}
.section-divider.align-start{ margin-left:0; margin-right:auto; }

/* ---------- Image placeholder ---------- */
.img-placeholder{
  width:100%; height:100%; min-height:180px;
  background:repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 10px, var(--color-accent-light) 10px, var(--color-accent-light) 11px);
  border:1px dashed var(--color-accent); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-muted); font-size:.8rem; text-align:center; padding:1rem;
}
.hero-gradient-fallback{
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

/* ---------- Hero block (full-height carousel on Home, compact band elsewhere) ---------- */
.hero-block{ position:relative; color:#fff; overflow:hidden; }
.hero-block.hero-full{ height:100dvh; }
.hero-block.hero-compact{ height:38vh; display:flex; align-items:center; }
.hero-block .hero-media{ position:absolute; inset:0; }
.hero-block .hero-media img,
.hero-block .hero-media .img-placeholder,
.hero-block .hero-media .hero-gradient-fallback{ width:100%; height:100%; object-fit:cover; border:none; border-radius:0; }
.hero-block .hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.55)); }
.hero-block .hero-caption{ position:relative; z-index:2; padding-top:var(--header-height); }
.hero-block h1{ color:#fff; font-size:clamp(2.1rem, 6vw, 3.6rem); font-weight:700; }
.hero-block.hero-compact h1{ font-size:clamp(1.8rem, 5vw, 2.6rem); }
.hero-block p{ font-size:1.15rem; max-width:520px; }

.hero-block .carousel,
.hero-block .carousel-inner,
.hero-block .carousel-item{ height:100%; }
.hero-block .carousel-item{ display:flex; align-items:center; position:relative; }
.hero-block .carousel-indicators{ z-index:3; margin-bottom:2.5rem; }
.hero-block .carousel-indicators [data-bs-target]{ background-color:var(--color-pop); }
.hero-block .carousel-control-prev,
.hero-block .carousel-control-next{ z-index:3; width:8%; }

/* ---------- Story block ---------- */
.story-block .story-media{ aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; }

/* ---------- Highlight chips ---------- */
.highlight-chip{
  display:flex; align-items:center; gap:.6rem;
  background:var(--color-pop-light); color:var(--color-text);
  border-radius:16px; padding:.65rem 1.1rem; font-size:.88rem; font-weight:600;
}
.highlight-chip .chip-icon{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:var(--color-pop); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Swipeable rails (favourites, testimonials) ---------- */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:1rem; overflow-x:auto; padding:.25rem .25rem 1rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail-item{ scroll-snap-align:start; flex:0 0 auto; }
.rail-nav{
  position:absolute; top:40%; transform:translateY(-50%);
  background:var(--color-surface); border:1px solid var(--color-accent-light);
  border-radius:50%; width:38px; height:38px;
  align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.15); z-index:2; display:none; color:var(--color-text);
}
@media (min-width:768px){ .rail-nav{ display:flex; } }
.rail-nav.prev{ left:-6px; } .rail-nav.next{ right:-6px; }

/* ---------- Testimonial card ---------- */
.testimonial-card{
  background:var(--color-surface); border:1px solid var(--color-accent-light);
  border-radius:var(--radius); padding:1.5rem; height:100%; width:260px;
}
.testimonial-card .quote-mark{ font-family:var(--font-heading); font-size:2.5rem; color:var(--color-pop); line-height:1; }

/* ---------- Contact page ---------- */
.contact-pill-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--color-pop); color:#fff; border-radius:999px;
  padding:.7rem 1.4rem; font-weight:600; text-decoration:none;
}
.contact-pill-btn:hover{ color:#fff; filter:brightness(0.93); }
.contact-pill-btn.outline{ background:transparent; border:1.5px solid var(--color-primary); color:var(--color-primary); }
.contact-pill-btn.outline:hover{ background:var(--color-primary); color:#fff; }
.open-status-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .85rem; border-radius:999px; font-size:.8rem; font-weight:700;
}
.open-status-badge.is-open{ background:#DCF5E4; color:#1C6E4C; }
.open-status-badge.is-closed{ background:var(--color-accent-light); color:var(--color-text); }
.rounded-shadow-media{ border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.12); }
.icon-line{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.icon-line .icon-dot{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  background:var(--color-pop-light); color:var(--color-pop);
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Menu page ---------- */
.menu-category-pills{
  position:sticky; top:var(--header-height); z-index:20;
  background:var(--color-bg); padding:.85rem 0;
  display:flex; overflow-x:auto; scrollbar-width:none;
}
.menu-category-pills::-webkit-scrollbar{ display:none; }
.menu-category-pills .nav-link{
  border-radius:999px; margin-right:.55rem; flex:0 0 auto;
  background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--color-accent-light); padding:.45rem 1.1rem; font-size:.9rem;
  transition:background-color .15s ease, color .15s ease;
}
.menu-category-pills .nav-link.active{ background-color:var(--color-pop); color:#fff; border-color:var(--color-pop); }

.menu-item-card{
  position:relative; border:none; border-radius:18px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  height:100%; display:flex; flex-direction:column; background:var(--color-surface);
  transition:box-shadow .2s ease, transform .2s ease;
}
.menu-item-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.14); transform:translateY(-2px); }
.menu-item-card .menu-item-media{ position:relative; aspect-ratio:1/1; }
.menu-item-card .menu-item-body{ padding:1.4rem 1rem 1rem; display:flex; flex-direction:column; flex:1; }
.menu-item-card .menu-item-price{ font-weight:700; color:var(--color-primary); }
.menu-item-card.is-sold-out .menu-item-media{ filter:grayscale(.5) brightness(.85); }
.menu-item-card.is-sold-out .menu-item-body{ opacity:.65; }

.ribbon-tags{
  position:absolute; top:10px; left:10px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
}
.ribbon-tag{
  background:var(--color-pop); color:#fff; font-size:.65rem; font-weight:700;
  padding:.25rem .6rem; border-radius:999px; letter-spacing:.02em;
}
.sold-out-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.sold-out-overlay span{
  background:var(--color-text); color:#fff; padding:.35rem .9rem;
  border-radius:6px; font-size:.75rem; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sizes-note{ display:none; } /* superseded by .size-selector below */

.size-selector{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.size-selector.needs-size{ animation:shake .4s ease; }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(3px); }
  30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); }
}
.size-chip{
  border:1.5px solid var(--color-accent-light); background:var(--color-surface); color:var(--color-text);
  border-radius:8px; padding:.3rem .65rem; font-size:.78rem; font-weight:700; min-width:36px;
}
.size-chip.active{ background:var(--color-pop); border-color:var(--color-pop); color:#fff; }

.pack-select{
  border-color:var(--color-accent-light); font-size:.82rem;
  background-color:var(--color-bg); color:var(--color-text);
}
.pack-select:focus{ border-color:var(--color-pop); box-shadow:0 0 0 .2rem var(--color-pop-light); }
.pack-note{
  font-size:.8rem; font-weight:600; color:var(--color-text);
  background:var(--color-pop-light); border-radius:8px; padding:.4rem .7rem; display:inline-block;
}

.add-fab{
  position:absolute; right:12px; bottom:-18px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background:var(--color-pop); color:#fff; border:3px solid var(--color-surface);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.25); cursor:pointer;
}
.stepper-fab{
  position:absolute; right:12px; bottom:-18px; z-index:3;
  display:flex; align-items:center; gap:.4rem;
  background:var(--color-surface); border:1.5px solid var(--color-pop); border-radius:999px;
  padding:.15rem .3rem; box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.stepper-fab button{ background:none; border:none; color:var(--color-pop); width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.stepper-fab span{ min-width:16px; text-align:center; font-size:.85rem; font-weight:700; }

/* Sticky "view cart" pill, floats above the page rather than a flat full-width bar */
.cart-bottom-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1040;
  background:var(--color-pop); color:#fff;
  border-radius:999px; padding:.9rem 1.4rem;
  display:none; align-items:center; justify-content:space-between;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  max-width:520px; margin:0 auto;
}
.cart-bottom-bar.is-visible{ display:flex; }

/* ---------- Quick view (opt-in, KutchRoots-style catalogs) ---------- */
body.quickview-locked{ overflow:hidden; }
.menu-item-media.has-quickview{ cursor:pointer; }

.quickview-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.quickview-overlay.is-open{ opacity:1; pointer-events:auto; }

.quickview-panel{
  position:fixed; inset:0; z-index:2001;
  background:var(--color-surface);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
.quickview-overlay.is-open .quickview-panel{ transform:translateY(0); }

@media (min-width:768px){
  .quickview-panel{
    inset:auto; top:50%; left:50%;
    width:70vw; max-width:900px; height:85vh; max-height:800px;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    transform:translate(-50%, -46%) scale(.96);
    opacity:0;
    transition:transform .28s ease, opacity .28s ease;
  }
  .quickview-overlay.is-open .quickview-panel{ transform:translate(-50%, -50%) scale(1); opacity:1; }
}

.quickview-header{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.1rem; border-bottom:1px solid var(--color-accent-light);
}
.quickview-header h3{ margin:0; font-size:1.05rem; }
.quickview-close{
  flex:0 0 auto; background:var(--color-bg); border:none; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--color-text);
}

.quickview-body{ flex:1 1 auto; overflow-y:auto; } /* the only scrolling region */
.quickview-gallery{ position:relative; background:var(--color-bg); }
.quickview-gallery .carousel,
.quickview-gallery .carousel-inner,
.quickview-gallery .carousel-item{ height:100%; }
.quickview-media{ width:100%; height:45vh; }
@media (min-width:768px){ .quickview-media{ height:340px; } }
.quickview-gallery .carousel-indicators [data-bs-target]{ background-color:var(--color-pop); }

.quickview-details{ padding:1.1rem 1.1rem 1.5rem; }
.quickview-details p{ color:var(--color-text-muted); }

.quickview-footer{
  flex:0 0 auto; border-top:1px solid var(--color-accent-light);
  padding:.9rem 1.1rem 1.1rem; background:var(--color-surface);
}
.sold-out-badge-inline{
  background:var(--color-text-muted); color:#fff; font-size:.75rem; font-weight:700;
  padding:.3rem .7rem; border-radius:6px;
}

/* ---------- Cart / checkout offcanvas ---------- */
.cart-drawer-panel .offcanvas-body{ padding-bottom:0; }
.cart-drawer-body{
  display:flex; flex-direction:column; overflow:hidden; /* the panel itself no longer scrolls as one block */
}
.cart-lines-scroll{
  flex:1 1 auto; min-height:80px; overflow-y:auto; /* only this region scrolls, however many items are in it */
}
.cart-drawer-fixed{
  flex:0 0 auto; border-top:1px solid var(--color-accent-light);
  padding-top:.85rem; padding-bottom:1rem; background:var(--color-surface);
}
.cart-line{ display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--color-accent-light); }
.cart-summary-row{ display:flex; justify-content:space-between; padding:.25rem 0; font-size:.9rem; }
.cart-summary-row.total{ font-weight:700; font-size:1.05rem; border-top:1px solid var(--color-accent-light); padding-top:.5rem; margin-top:.5rem; }
.closed-banner{ background:var(--color-accent-light); color:var(--color-text); border-radius:var(--radius); padding:.75rem 1rem; font-size:.9rem; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--color-accent-light); border-radius:6px; overflow:hidden; }
.qty-stepper button{ background:var(--color-bg); border:none; width:32px; height:32px; font-weight:700; color:var(--color-primary); }
.qty-stepper input{ border:none; width:48px; text-align:center; font-size:.85rem; }

/* ---------- Order confirmation modal ---------- */
.order-confirm-content{ border-radius:20px; border:none; }
.order-confirm-tick{
  width:72px; height:72px; border-radius:50%;
  background:#1C6E4C; color:#fff; /* fixed success green, not the theme pop color -
     a green circle checkmark is such a strong universal "confirmed" signal
     that keeping it consistent matters more than matching KutchRoots' indigo */
  display:flex; align-items:center; justify-content:center;
  margin:0 auto;
}
.order-confirm-tick svg{ width:36px; height:36px; }
.order-confirm-note{
  background:var(--color-pop-light); color:var(--color-text);
  border-radius:12px; padding:.75rem 1rem; font-size:.85rem; margin-top:.5rem;
}


/* ---------- Toast ---------- */
.toast-pop{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--color-text); color:#fff; padding:.55rem 1.1rem; border-radius:999px;
  font-size:.85rem; opacity:0; pointer-events:none; z-index:1060;
  transition:opacity .2s ease, transform .2s ease;
}
.toast-pop.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Skeleton loading state ---------- */
.skeleton-shimmer{
  background:linear-gradient(90deg, var(--color-bg) 25%, var(--color-accent-light) 45%, var(--color-bg) 65%);
  background-size:400% 100%; animation:shimmer 1.5s ease infinite;
}
@keyframes shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
.skeleton-line{ border-radius:4px; }

/* ---------- Footer ---------- */
.site-footer{ background-color:var(--color-primary-dark); color:var(--color-accent-light); padding:3rem 0 1.5rem; }
.site-footer a{ color:#fff; }
.site-footer h5{ color:#fff; font-family:var(--font-heading); }
.site-footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.15); margin-top:2rem; padding-top:1rem; font-size:.8rem; color:rgba(255,255,255,.65); }

/* ---------- Floating WhatsApp button ---------- */
.floating-whatsapp{
  position:fixed; bottom:24px; right:24px; z-index:1045;
  background:#25D366; color:#fff; border-radius:50%; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.25);
}

@media (max-width:576px){
  .rail-nav{ display:none; }
  .floating-whatsapp{ bottom:84px; }
}