/* ==========================================================================
   Shree Babuji Jodhpur Misthan Bhandar, Udaipur — sbjmbudaipur.com
   style.css  ·  Core design system (tokens, base, components, header, footer)
   --------------------------------------------------------------------------
   Front-end prototype  ·  Stage 1  ·  Built for later Core PHP + MySQL port.
   Sections:
     01  Design tokens
     02  Reset & base
     03  Typography
     04  Layout helpers
     05  Buttons
     06  Forms
     07  Badges, pills, chips
     08  Cards (product / category / branch / offer / feature)
     09  Header & navigation
     10  Mobile bottom navigation
     11  Footer
     12  Modal, drawer, toast, skeleton
     13  Sections & decorative elements
     14  Breadcrumbs, pagination, accordion, tabs
     15  Motion & accessibility
   ========================================================================== */

/* ==========================================================================
   01 · DESIGN TOKENS
   Change the brand here and the whole site follows.
   ========================================================================== */
:root{
  /* Brand — taken from the Babuji / Shree Jodhpur Misthan Bhandar logo */
  --red-900:#5E0A0E;
  --red-800:#7A0F14;
  --red-700:#9C1319;
  --red-600:#B8171E;
  --red-500:#C8161D;   /* primary brand red */
  --red-400:#DE3A41;
  --red-100:#FBE3E4;
  --red-50:#FDF3F3;

  --gold-700:#8A6416;
  --gold-600:#A97C1E;
  --gold-500:#C9962C;  /* primary brand gold */
  --gold-400:#E0B44B;
  --gold-300:#EFD08A;
  --gold-100:#F8EBCB;
  --gold-50:#FDF7EA;

  --green-600:#2E7D32;
  --green-100:#E3F1E4;

  /* Neutrals — warm, food-friendly */
  --ink-900:#1A1210;
  --ink-800:#2A1D19;
  --ink-700:#3E2D26;
  --ink-600:#5A453C;
  --ink-500:#7A6459;
  --ink-400:#9B877C;
  --ink-300:#C2B2A7;

  --cream:#FFFBF4;
  --cream-2:#FDF6EA;
  --surface:#FFFFFF;
  --surface-2:#FBF5EC;
  --surface-3:#F5EADB;
  --line:#EFE2D1;
  --line-strong:#E2D0B9;

  /* Semantic */
  --success:#1E8E3E; --success-bg:#E7F5EA;
  --warning:#C77700;  --warning-bg:#FFF4E0;
  --danger:#C62828;   --danger-bg:#FDECEC;
  --info:#1565C0;     --info-bg:#E8F1FC;

  /* Typography */
  --font-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --fs-4xl:2.875rem; --fs-5xl:3.75rem;

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --sp-20:5rem; --sp-24:6rem;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* Elevation */
  --sh-xs:0 1px 2px rgba(41,24,16,.06);
  --sh-sm:0 2px 8px rgba(41,24,16,.07);
  --sh-md:0 6px 20px rgba(41,24,16,.09);
  --sh-lg:0 14px 40px rgba(41,24,16,.13);
  --sh-xl:0 24px 64px rgba(41,24,16,.17);
  --sh-red:0 10px 26px rgba(200,22,29,.24);

  /* Chrome */
  --header-h:76px;
  --header-h-sm:60px;
  --bottomnav-h:64px;
  --container:1240px;
  --container-wide:1440px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s; --t:.24s; --t-slow:.4s;

  --gradient-gold:linear-gradient(135deg,#8A6416 0%,#C9962C 22%,#F0D79A 48%,#C9962C 72%,#8A6416 100%);
  --gradient-red:linear-gradient(135deg,var(--red-600),var(--red-800));
  --gradient-warm:linear-gradient(180deg,#FFFBF4 0%,#FDF6EA 100%);
}

/* ==========================================================================
   02 · RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  overflow-x:clip;            /* clip, not hidden — keeps position:sticky working */
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--ink-700);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}
img,picture,video,svg{max-width:100%;display:block}
img{height:auto}
/* Inline icons default to text size; component rules below override where needed */
svg{width:1.15em;height:1.15em;flex:none}
.ico{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.ico svg{width:100%;height:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}
::selection{background:var(--gold-300);color:var(--ink-900)}

/* Focus states — keyboard only */
:focus{outline:none}
:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px;border-radius:6px}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ink-900);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-md) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* Scrollbars */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}

/* ==========================================================================
   03 · TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5{margin:0 0 var(--sp-3);font-family:var(--font-display);color:var(--ink-900);line-height:1.15;font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,1.15rem + 2vw,2.5rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem)}
h4{font-size:1.125rem}
h5{font-size:1rem;font-family:var(--font-body);font-weight:700;letter-spacing:0}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--ink-800)}
small{font-size:var(--fs-sm)}

.display{font-family:var(--font-display)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:var(--sp-3);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gradient-gold);border-radius:2px}
.eyebrow.is-center{justify-content:center}
.eyebrow.on-dark{color:var(--gold-300)}

.lead{font-size:var(--fs-lg);color:var(--ink-600);line-height:1.7}
.muted{color:var(--ink-500)}
.tiny{font-size:var(--fs-xs);color:var(--ink-400)}
.text-red{color:var(--red-600)}
.text-gold{color:var(--gold-600)}
.text-center{text-align:center}
.nowrap{white-space:nowrap}

/* Gold script accent used for the tagline */
.tagline{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Small tag used for branch entries that are not live yet */
.placeholder-tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-700);background:var(--gold-100);border:1px solid var(--gold-300);
  border-radius:var(--r-full);padding:2px 9px;vertical-align:middle;margin-left:6px;
}

/* ==========================================================================
   04 · LAYOUT
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.container-wide{max-width:var(--container-wide)}
.container-narrow{max-width:820px}

.section{padding-block:clamp(3rem,2rem + 4vw,6rem)}
.section-sm{padding-block:clamp(2rem,1.5rem + 2vw,3.5rem)}
.section-tint{background:var(--surface-2)}
.section-cream{background:var(--gradient-warm)}
.section-dark{background:var(--ink-900);color:#E8DCD3}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}

.section-head{max-width:660px;margin:0 auto clamp(2rem,1.5rem + 2vw,3.25rem);text-align:center}
.section-head.is-left{margin-inline:0;text-align:left}
.section-head p{color:var(--ink-500);font-size:var(--fs-md)}

.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* Grid/flex children default to min-width:auto, which lets a wide child (a
   stepper, a long table, a big input row) blow out the page on small screens.
   Resetting it here keeps every layout inside the viewport. */
.grid > *,.split > *{min-width:0}
.grid-auto-sm{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
/* category tiles: 4-up desktop, 3-up tablet, 2-up phone */
.grid-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.grid-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .grid-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid-cats .cat-card .media{--ratio:104%}
  .grid-cats .cat-card .cat-name{font-size:var(--fs-base)}
  .grid-cats .cat-card .cat-info{padding:var(--sp-3)}
}

.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}
.wrap{flex-wrap:wrap}
.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}
.mt-8{margin-top:var(--sp-8)}.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)}.mb-8{margin-bottom:var(--sp-8)}
.hide{display:none !important}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* two-up product cards are narrow — let the price stack instead of breaking */
  .product-card .p-foot{gap:8px}
  .product-card .price{flex-wrap:wrap;row-gap:0;column-gap:6px}
  .product-card .price .unit{flex-basis:100%;margin-top:-2px}
  .product-card .btn-add{padding:10px 16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-auto{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .hide-sm{display:none !important}
}
@media (min-width:641px){ .only-sm{display:none !important} }

/* ==========================================================================
   05 · BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--ink-900); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-full);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-size:var(--fs-base);font-weight:700;letter-spacing:.01em;line-height:1;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t),color var(--t),border-color var(--t);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg,.btn .ico{width:18px;height:18px;flex:none}

.btn-primary{--btn-bg:var(--red-500);--btn-fg:#fff;box-shadow:var(--sh-red)}
.btn-primary:hover{--btn-bg:var(--red-600);box-shadow:0 14px 32px rgba(200,22,29,.32)}

.btn-gold{background:var(--gradient-gold);--btn-fg:#3A2A08;color:#3A2A08;box-shadow:0 10px 24px rgba(201,150,44,.3);background-size:180% 100%}
.btn-gold:hover{background-position:100% 0}

.btn-dark{--btn-bg:var(--ink-900);--btn-fg:#fff}
.btn-dark:hover{--btn-bg:var(--ink-800)}

.btn-outline{--btn-bg:transparent;--btn-fg:var(--ink-900);--btn-bd:var(--line-strong)}
.btn-outline:hover{--btn-bd:var(--ink-900);--btn-bg:var(--ink-900);--btn-fg:#fff}

.btn-outline-red{--btn-bg:transparent;--btn-fg:var(--red-600);--btn-bd:var(--red-500)}
.btn-outline-red:hover{--btn-bg:var(--red-500);--btn-fg:#fff}

.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink-700)}
.btn-ghost:hover{--btn-bg:var(--surface-3);transform:none}

.btn-light{--btn-bg:#fff;--btn-fg:var(--ink-900);box-shadow:var(--sh-sm)}
.btn-light:hover{--btn-bg:#fff;box-shadow:var(--sh-md)}

.btn-sm{padding:9px 16px;font-size:var(--fs-sm)}
.btn-lg{padding:17px 34px;font-size:var(--fs-md)}
.btn-block{display:flex;width:100%}
.btn:disabled,.btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none}

.btn-icon{
  width:44px;height:44px;padding:0;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--ink-700);border:1px solid var(--line);
}
.btn-icon:hover{background:#fff;box-shadow:var(--sh-sm);transform:translateY(-1px)}

/* Loading state */
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;
}
.btn-outline.is-loading::after,.btn-ghost.is-loading::after{border-color:rgba(0,0,0,.2);border-top-color:var(--ink-900)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Link with arrow */
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--red-600);font-size:var(--fs-base)}
.link-arrow::after{content:"→";transition:transform var(--t) var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ==========================================================================
   06 · FORMS
   ========================================================================== */
.field{margin-bottom:var(--sp-4)}
.field label,.label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink-700);margin-bottom:6px}
.label .req{color:var(--red-500)}
.input,.select,.textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);
  background:#fff;color:var(--ink-800);font-size:var(--fs-base);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-300)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--red-400);box-shadow:0 0 0 4px var(--red-50);outline:none}
.textarea{min-height:120px;resize:vertical}
.select{
  appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6459' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
}
.input.is-invalid,.select.is-invalid,.textarea.is-invalid{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-bg)}
.field-error{display:none;color:var(--danger);font-size:var(--fs-xs);font-weight:600;margin-top:5px}
.field.has-error .field-error{display:block}
.field-hint{font-size:var(--fs-xs);color:var(--ink-400);margin-top:5px}

.input-group{position:relative}
.input-group .input{padding-left:44px}
.input-group .input-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-400);pointer-events:none;width:18px;height:18px}

.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

/* Radio / checkbox cards */
.choice{
  display:flex;align-items:flex-start;gap:12px;padding:15px 16px;cursor:pointer;
  border:1.5px solid var(--line-strong);border-radius:var(--r-lg);background:#fff;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.choice:hover{border-color:var(--gold-400)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .dot{
  flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);
  margin-top:2px;position:relative;transition:border-color var(--t)
}
.choice .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--red-500);transform:scale(0);transition:transform var(--t) var(--ease-out)}
.choice input:checked ~ .dot{border-color:var(--red-500)}
.choice input:checked ~ .dot::after{transform:scale(1)}
.choice:has(input:checked){border-color:var(--red-500);background:var(--red-50);box-shadow:0 0 0 3px var(--red-50)}
.choice .choice-body{flex:1;min-width:0}
.choice .choice-title{font-weight:700;color:var(--ink-900);font-size:var(--fs-base)}
.choice .choice-sub{font-size:var(--fs-sm);color:var(--ink-500)}
.choice.is-square .dot{border-radius:6px}
.choice.is-square .dot::after{border-radius:3px}

.check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--fs-sm);color:var(--ink-600)}
.check input{width:18px;height:18px;accent-color:var(--red-500);margin-top:2px;flex:none}

/* ==========================================================================
   07 · BADGES, PILLS, CHIPS
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;line-height:1.5;
  background:var(--surface-3);color:var(--ink-600);
}
.badge-red{background:var(--red-500);color:#fff}
.badge-gold{background:var(--gradient-gold);color:#3A2A08}
.badge-green{background:var(--green-100);color:var(--green-600)}
.badge-warn{background:var(--warning-bg);color:var(--warning)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-dark{background:var(--ink-900);color:#fff}
.badge-out{background:var(--ink-300);color:#fff}

.pill{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--r-full);
  border:1.5px solid var(--line-strong);background:#fff;color:var(--ink-600);
  font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all var(--t) var(--ease);
}
.pill:hover{border-color:var(--gold-400);color:var(--ink-900)}
.pill.is-active{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.pill .pill-ico{font-size:1rem;line-height:1}

/* Veg dot (FSSAI style) */
.veg-dot{
  width:15px;height:15px;border:1.6px solid var(--green-600);border-radius:3px;
  display:inline-grid;place-items:center;flex:none;background:#fff;
}
.veg-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-600)}

.rating{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-800)}
.rating .star{color:var(--gold-500);font-size:.9em}
.rating .count{font-weight:500;color:var(--ink-400);font-size:var(--fs-xs)}

/* ==========================================================================
   08 · CARDS
   ========================================================================== */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-xs);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t);
}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--line-strong)}
.card-body{padding:var(--sp-5)}
.card-pad-sm .card-body{padding:var(--sp-4)}

/* Media frame keeps every image the same aspect regardless of source */
.media{position:relative;overflow:hidden;background:var(--surface-3)}
.media::after{content:"";display:block;padding-top:var(--ratio,75%)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out),opacity .35s var(--ease-out);opacity:0}
.media img.is-loaded,.media img.is-fallback{opacity:1}
/* A gentle brand-coloured shimmer while a photo is still loading — a slow
   mobile connection then shows "still loading", never a flat block of colour. */
.media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,var(--surface-3) 30%,var(--gold-100) 50%,var(--surface-3) 70%);
  background-size:220% 100%;animation:mediaShimmer 1.6s ease-in-out infinite;
}
.media img.is-loaded ~ *,.media:has(img.is-loaded)::before,.media:has(img.is-fallback)::before{animation:none;background:none}
@keyframes mediaShimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.media::before{animation:none}}
.media.r-square{--ratio:100%}
.media.r-4x3{--ratio:75%}
.media.r-3x2{--ratio:66.66%}
.media.r-16x9{--ratio:56.25%}
.media.r-5x4{--ratio:80%}
.card-hover:hover .media img{transform:scale(1.06)}
.media-badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.media-fav{
  position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--ink-400);
  box-shadow:var(--sh-sm);transition:all var(--t) var(--ease);
}
.media-fav:hover{transform:scale(1.1);color:var(--red-500)}
.media-fav.is-active{color:var(--red-500)}
.media-fav svg{width:17px;height:17px}
.media-fav.is-active svg{fill:currentColor}

/* --- Product card ------------------------------------------------------- */
.product-card{display:flex;flex-direction:column;height:100%;position:relative}
.product-card .card-body{display:flex;flex-direction:column;flex:1;gap:6px;padding:var(--sp-4)}
.product-card .p-title{
  font-family:var(--font-body);font-size:var(--fs-md);font-weight:700;color:var(--ink-900);
  margin:0;line-height:1.35;display:flex;align-items:center;gap:7px;
}
.product-card .p-desc{
  font-size:var(--fs-sm);color:var(--ink-500);margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-card .p-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink-400)}
.product-card .p-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:var(--sp-3)}
.price{display:flex;align-items:baseline;gap:7px}
.price .amt{font-size:var(--fs-lg);font-weight:800;color:var(--ink-900);letter-spacing:-.02em}
.price .was{font-size:var(--fs-sm);color:var(--ink-400);text-decoration:line-through}
.price .unit{font-size:var(--fs-xs);color:var(--ink-400);font-weight:600;white-space:nowrap}
.p-oos{font-size:var(--fs-sm);font-weight:700;color:var(--ink-400)}
.product-card.is-oos .media img{filter:grayscale(.85) opacity(.7)}

/* Quantity stepper */
.qty{
  display:inline-flex;align-items:center;border:1.5px solid var(--red-500);border-radius:var(--r-full);
  background:#fff;overflow:hidden;height:38px;
}
.qty button{
  width:34px;height:100%;display:grid;place-items:center;color:var(--red-600);
  font-size:1.1rem;font-weight:700;line-height:1;transition:background var(--t);
}
.qty button:hover{background:var(--red-50)}
.qty .n{min-width:26px;text-align:center;font-weight:800;color:var(--red-600);font-size:var(--fs-base)}
.qty.is-sm{height:32px}
.qty.is-sm button{width:28px}
.btn-add{padding:10px 20px;height:38px}

/* --- Category card ------------------------------------------------------ */
.cat-card{
  position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;
  background:var(--ink-900);box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.cat-card .media{--ratio:112%}
.cat-card .media img{transition:transform .7s var(--ease-out)}
.cat-card:hover .media img{transform:scale(1.09)}
.cat-card .cat-veil{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(26,18,16,0) 32%,rgba(26,18,16,.55) 62%,rgba(26,18,16,.9) 100%);
}
.cat-card .cat-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:var(--sp-4);color:#fff}
.cat-card .cat-name{display:block;font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;line-height:1.2;margin:0}
.cat-card .cat-count{display:block;font-size:var(--fs-xs);color:rgba(255,255,255,.72);font-weight:600;letter-spacing:.04em;margin-top:3px}
.cat-card::after{
  content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none;
}

/* Compact circular category (mobile strip) */
.cat-chip{display:flex;flex-direction:column;align-items:center;gap:8px;width:82px;flex:none;text-align:center}
.cat-chip .cc-img{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--line);box-shadow:var(--sh-xs);background:var(--surface-3)}
.cat-chip .cc-img img{width:100%;height:100%;object-fit:cover}
.cat-chip .cc-name{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink-700);line-height:1.25}
.cat-chip.is-active .cc-img{border-color:var(--red-500);box-shadow:0 0 0 3px var(--red-50)}
.cat-chip.is-active .cc-name{color:var(--red-600)}

/* --- Branch card -------------------------------------------------------- */
.branch-card{display:flex;flex-direction:column;height:100%}
.branch-card .media{--ratio:58%}
.branch-card .b-name{font-family:var(--font-display);font-size:var(--fs-xl);margin:0 0 4px;color:var(--ink-900)}
.branch-card .b-rows{display:grid;gap:10px;margin:var(--sp-4) 0;font-size:var(--fs-sm);color:var(--ink-600)}
.branch-card .b-row{display:flex;gap:10px;align-items:flex-start}
.branch-card .b-row .ico{flex:none;width:17px;height:17px;color:var(--gold-600);margin-top:3px}
.contact-tile .ct-ico svg,.map-placeholder .mp-ico svg{width:20px;height:20px}
.branch-card .b-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.branch-card .b-actions .btn{flex:1;min-width:132px}
.b-open{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--green-600)}
.b-open::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-600);box-shadow:0 0 0 3px var(--green-100)}
.b-closed{color:var(--danger)}
.b-closed::before{background:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}

/* --- Offer card --------------------------------------------------------- */
.offer-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;
  background:var(--ink-800);min-height:210px;display:flex;align-items:flex-end;
  box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.offer-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.offer-card .media{position:absolute;inset:0}
.offer-card .media::after{display:none}
.offer-card .offer-veil{position:absolute;inset:0;background:linear-gradient(110deg,rgba(94,10,14,.95) 6%,rgba(94,10,14,.82) 45%,rgba(26,18,16,.55) 100%)}
.offer-card .offer-body{position:relative;z-index:2;padding:var(--sp-6);width:100%}
.offer-card h3{color:#fff;margin-bottom:6px;font-size:var(--fs-xl)}
.offer-card p{color:rgba(255,255,255,.82);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.offer-code{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-full);
  border:1.5px dashed var(--gold-300);color:var(--gold-300);
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.1em;cursor:pointer;background:rgba(0,0,0,.2);
}
.offer-code:hover{background:var(--gold-300);color:var(--red-900);border-style:solid}

/* --- Feature / USP card ------------------------------------------------- */
.feature{text-align:center;padding:var(--sp-6) var(--sp-4)}
.feature .f-ico{
  width:60px;height:60px;margin:0 auto var(--sp-4);border-radius:var(--r-lg);
  display:grid;place-items:center;background:var(--gold-50);border:1px solid var(--gold-100);
  color:var(--gold-600);
}
.feature .f-ico svg{width:26px;height:26px}
.feature h3{font-family:var(--font-body);font-size:var(--fs-md);font-weight:700;margin-bottom:6px}
.feature p{font-size:var(--fs-sm);color:var(--ink-500);margin:0}

/* Stat */
.stat{text-align:center}
.stat .s-num{font-family:var(--font-display);font-size:clamp(1.9rem,1.4rem + 1.6vw,2.75rem);font-weight:600;color:var(--gold-500);line-height:1}
.stat .s-lbl{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);font-weight:700;margin-top:8px}

/* ==========================================================================
   09 · HEADER & NAVIGATION
   ========================================================================== */
.topbar{
  background:var(--ink-900);color:#D9CCC2;font-size:var(--fs-xs);
  padding:8px 0;letter-spacing:.02em;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.topbar a{color:#EADFD6;font-weight:600}
.topbar a:hover{color:var(--gold-300)}
.topbar-marquee{display:flex;align-items:center;gap:8px;color:var(--gold-300);font-weight:700;min-width:0}
.topbar-marquee span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-links{display:flex;align-items:center;gap:var(--sp-5)}
@media (max-width:860px){.topbar-links{display:none}}

/* The header/footer are injected into wrapper divs. `display:contents` removes
   those wrappers from layout so the sticky header's containing block is <body>
   — otherwise it can only travel inside its wrapper and unsticks immediately. */
#siteHeaderMount,#siteFooterMount{display:contents}

.site-header{
  position:sticky;top:0;z-index:600;background:rgba(255,251,244,.9);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--t),background var(--t);
}
.site-header.is-stuck{box-shadow:var(--sh-md);background:rgba(255,251,244,.97)}
.header-inner{display:flex;align-items:center;gap:var(--sp-5);height:var(--header-h)}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:38px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text .bt-1{font-family:var(--font-display);font-size:1.02rem;font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.brand-text .bt-2{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-600);font-weight:800;margin-top:3px}
@media (max-width:1100px){.brand-text .bt-1{font-size:.9rem}}

.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.main-nav > li > a{
  display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:700;color:var(--ink-700);
  transition:color var(--t),background var(--t);white-space:nowrap;
}
.main-nav > li > a:hover{color:var(--red-600);background:var(--red-50)}
.main-nav > li.is-active > a{color:var(--red-600)}
.main-nav > li.is-active > a::after{content:"";position:absolute}
.nav-item{position:relative}
.nav-caret{width:12px;height:12px;opacity:.55;transition:transform var(--t)}
.nav-item:hover .nav-caret{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:8px;opacity:0;visibility:hidden;
  transition:all var(--t) var(--ease-out);z-index:20;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;color:var(--ink-600)}
.dropdown a:hover{background:var(--surface-2);color:var(--red-600)}
.dropdown .dd-ico{font-size:1rem;width:20px;text-align:center}

.header-actions{display:flex;align-items:center;gap:6px;flex:none}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ink-700);transition:all var(--t) var(--ease);
}
.icon-btn:hover{background:var(--surface-3);color:var(--red-600)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .count{
  position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-full);background:var(--red-500);color:#fff;
  font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;
  border:2px solid var(--cream);transform:scale(0);transition:transform var(--t) var(--ease-out);
}
.icon-btn .count.is-on{transform:scale(1)}
.icon-btn .count.bump{animation:bump .45s var(--ease-out)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

.header-cta{margin-left:4px}
@media (max-width:1180px){ .main-nav > li > a{padding:9px 10px;font-size:var(--fs-xs)} }
@media (max-width:1024px){ .main-nav,.header-cta{display:none} }
@media (max-width:640px){
  .header-inner{height:var(--header-h-sm);gap:var(--sp-3)}
  .brand img{height:31px}
  .brand-text .bt-1{font-size:.82rem}
  .brand-text .bt-2{font-size:8px;letter-spacing:.15em}
  .icon-btn{width:38px;height:38px}
}
.nav-toggle{display:none}
@media (max-width:1024px){.nav-toggle{display:grid}}

/* Branch strip under header (ordering context) */
.branch-strip{
  background:var(--gold-50);border-bottom:1px solid var(--gold-100);
  font-size:var(--fs-sm);
}
.branch-strip .container{display:flex;align-items:center;gap:var(--sp-3);padding-block:9px;flex-wrap:wrap}
.branch-strip .bs-label{color:var(--ink-500);font-weight:600;display:flex;align-items:center;gap:6px}
.branch-strip .bs-pick{
  display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--ink-900);
  border-bottom:2px dotted var(--gold-500);padding-bottom:1px;cursor:pointer;
}
.branch-strip .bs-pick:hover{color:var(--red-600);border-color:var(--red-500)}
.branch-strip .bs-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-4);color:var(--ink-500)}
@media (max-width:640px){.branch-strip .bs-right{display:none}}

/* --- Mobile drawer nav -------------------------------------------------- */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(360px,88vw);z-index:900;background:var(--cream);
  transform:translateX(101%);visibility:hidden;
  transition:transform var(--t-slow) var(--ease-out),visibility var(--t-slow);
  display:flex;flex-direction:column;box-shadow:var(--sh-xl);
}
.mobile-nav.is-open{transform:translateX(0);visibility:visible}
.mobile-nav .mn-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.mobile-nav .mn-body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-5) var(--sp-8)}
.mobile-nav .mn-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-md);font-weight:700;color:var(--ink-800);
}
.mobile-nav .mn-link:hover{color:var(--red-600)}
.mobile-nav .mn-link .mn-ico{color:var(--gold-600);width:20px}
.mobile-nav .mn-foot{padding:var(--sp-5);border-top:1px solid var(--line);background:var(--surface-2)}
.mobile-nav .mn-sub{display:grid;gap:2px;padding:0 0 10px 30px}
.mobile-nav .mn-sub a{padding:9px 0;font-size:var(--fs-sm);font-weight:600;color:var(--ink-500)}
.mobile-nav .mn-sub a:hover{color:var(--red-600)}

.backdrop{
  position:fixed;inset:0;z-index:800;background:rgba(26,18,16,.55);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t);
  backdrop-filter:blur(2px);
}
.backdrop.is-open{opacity:1;visibility:visible}

/* ==========================================================================
   10 · MOBILE BOTTOM NAVIGATION
   ========================================================================== */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:700;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 24px rgba(41,24,16,.08);
}
.bottom-nav ul{display:grid;grid-template-columns:repeat(5,1fr);height:var(--bottomnav-h)}
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;font-weight:700;color:var(--ink-400);position:relative;height:100%;
  transition:color var(--t);letter-spacing:.02em;
}
.bottom-nav a svg{width:21px;height:21px}
.bottom-nav a.is-active{color:var(--red-600)}
.bottom-nav a.is-active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--red-500)}
.bottom-nav .bn-count{
  position:absolute;top:6px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);background:var(--red-500);color:#fff;font-size:9px;font-weight:800;
  display:none;place-items:center;line-height:1;
}
.bottom-nav .bn-count.is-on{display:grid}
@media (max-width:900px){
  .bottom-nav{display:block}
  body{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom))}
  /* The floating "View Cart" bar sits above the bottom nav — when it's
     showing, reserve its own height too so it never overlaps the last
     row of cards/descriptions (--sticky-cart-h is measured in cart.js). */
  body.has-sticky-cart{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--sticky-cart-h,76px))}
}

/* ==========================================================================
   11 · FOOTER
   ========================================================================== */
.site-footer{background:var(--ink-900);color:#B7A79C;padding-top:clamp(3rem,2rem + 3vw,5rem);position:relative;overflow:hidden}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-gold);
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:var(--sp-8)}
@media (max-width:1024px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-family:var(--font-body);font-size:var(--fs-sm);font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.site-footer a{color:#B7A79C;font-size:var(--fs-sm);transition:color var(--t)}
/* buttons inside the footer keep their own colours */
.site-footer a.btn{color:var(--btn-fg);font-size:var(--fs-base)}
.site-footer a.btn-gold,.site-footer a.btn-gold:hover{color:#3A2A08}
.site-footer a.btn-sm{font-size:var(--fs-sm)}
.site-footer a:hover{color:var(--gold-300)}
.footer-links{display:grid;gap:11px}
.footer-brand .fb-logo{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--sp-5);
  background:#fff;border-radius:var(--r-lg);padding:11px 16px;box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.footer-brand .fb-logo img{height:36px;width:auto;margin:0}
.footer-brand .fb-words{display:flex;flex-direction:column;line-height:1}
.footer-brand .fb-1{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--ink-900)}
.footer-brand .fb-1 em{font-style:normal;color:var(--red-600)}
.footer-brand .fb-2{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-600);font-weight:800;margin-top:3px}
.footer-brand p{font-size:var(--fs-sm);line-height:1.7;color:#9C8B80}
.footer-contact{display:grid;gap:12px;font-size:var(--fs-sm)}
.footer-contact .fc-row{display:flex;gap:11px;align-items:flex-start}
.footer-contact .fc-row .ico{flex:none;width:16px;height:16px;color:var(--gold-500);margin-top:4px}
.social{display:flex;gap:9px;margin-top:var(--sp-5)}
.social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#D6C8BE;transition:all var(--t) var(--ease);
}
.social a:hover{background:var(--gradient-gold);color:var(--ink-900);transform:translateY(-3px)}
.social svg{width:17px;height:17px}
.footer-bottom{
  margin-top:clamp(2.5rem,2rem + 2vw,4rem);border-top:1px solid rgba(255,255,255,.09);
  padding:var(--sp-5) 0;font-size:var(--fs-xs);
}
.footer-bottom .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.footer-legal{display:flex;gap:var(--sp-5);flex-wrap:wrap}

/* ==========================================================================
   12 · MODAL, DRAWER, TOAST, SKELETON
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--sp-4);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t);
}
.modal.is-open{opacity:1;visibility:visible}
.modal-veil{position:absolute;inset:0;background:rgba(26,18,16,.62);backdrop-filter:blur(3px)}
.modal-box{
  position:relative;z-index:2;width:100%;max-width:var(--modal-w,560px);max-height:min(90vh,900px);
  background:#fff;border-radius:var(--r-2xl);box-shadow:var(--sh-xl);overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(24px) scale(.97);transition:transform var(--t-slow) var(--ease-out);
}
.modal.is-open .modal-box{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:var(--fs-xl)}
.modal-body{padding:var(--sp-6);overflow-y:auto;flex:1}
.modal-foot{padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--line);background:var(--surface-2);display:flex;gap:var(--sp-3);flex-wrap:wrap}
.modal-close{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-500);background:var(--surface-2);flex:none}
.modal-close:hover{background:var(--red-50);color:var(--red-600)}
.modal.is-wide{--modal-w:920px}
.modal.is-narrow{--modal-w:440px}
@media (max-width:640px){
  .modal{padding:0;align-items:flex-end}
  .modal-box{max-width:100%;max-height:94vh;border-radius:var(--r-2xl) var(--r-2xl) 0 0}
  .modal-body{padding:var(--sp-5)}
  .modal-head,.modal-foot{padding-inline:var(--sp-5)}
}

/* Toast */
.toast-wrap{
  position:fixed;z-index:1200;left:50%;transform:translateX(-50%);
  bottom:calc(var(--bottomnav-h) + 18px);display:grid;gap:10px;width:min(420px,calc(100vw - 32px));
  pointer-events:none;
}
@media (min-width:901px){.toast-wrap{bottom:24px}}
.toast{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r-lg);
  background:var(--ink-900);color:#fff;box-shadow:var(--sh-lg);font-size:var(--fs-sm);font-weight:600;
  transform:translateY(16px);opacity:0;animation:toast-in .34s var(--ease-out) forwards;pointer-events:auto;
}
.toast.is-out{animation:toast-out .28s var(--ease) forwards}
.toast .t-ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;background:var(--green-600)}
.toast.is-error .t-ico{background:var(--danger)}
.toast.is-info .t-ico{background:var(--gold-500);color:var(--ink-900)}
.toast a{color:var(--gold-300);text-decoration:underline;font-weight:700}
@keyframes toast-in{to{transform:translateY(0);opacity:1}}
@keyframes toast-out{to{transform:translateY(10px);opacity:0}}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,#fff 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-md)}
@keyframes shimmer{to{background-position:-200% 0}}
.sk-card{height:300px;border-radius:var(--r-xl)}

/* Empty state */
.empty{text-align:center;padding:clamp(2.5rem,2rem + 3vw,5rem) var(--sp-4);max-width:460px;margin-inline:auto}
.empty .e-ico{width:88px;height:88px;margin:0 auto var(--sp-5);border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-600)}
.empty .e-ico svg{width:34px;height:34px}
.empty h3{margin-bottom:8px}
.empty p{color:var(--ink-500);margin-bottom:var(--sp-5)}

/* ==========================================================================
   13 · SECTIONS & DECORATIVE
   ========================================================================== */
.page-hero{
  position:relative;background:var(--ink-900);color:#fff;overflow:hidden;
  padding-block:clamp(3rem,2.2rem + 4vw,6rem);
}
.page-hero .ph-bg{position:absolute;inset:0;opacity:.34}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,18,16,.55),rgba(26,18,16,.9))}
.page-hero .container{position:relative;z-index:3}
.page-hero h1{color:#fff;margin-bottom:var(--sp-3)}
.page-hero p{color:rgba(255,255,255,.76);max-width:640px;font-size:var(--fs-md)}

/* Ornamental arch divider (subtle Indian motif) */
.arch-divider{height:26px;background-repeat:repeat-x;background-size:52px 26px;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26' viewBox='0 0 52 26'%3E%3Cpath d='M0 26c0-14 11.6-26 26-26s26 12 26 26' fill='none' stroke='%23C9962C' stroke-width='1.2'/%3E%3C/svg%3E");
}
.gold-rule{height:2px;width:64px;background:var(--gradient-gold);border-radius:2px;margin:var(--sp-4) 0}
.gold-rule.is-center{margin-inline:auto}

/* Marquee ribbon */
.ribbon{background:var(--gradient-red);color:#fff;padding:11px 0;overflow:hidden}
.ribbon-track{display:flex;gap:var(--sp-8);width:max-content;animation:marquee 32s linear infinite;font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em}
.ribbon-track span{display:inline-flex;align-items:center;gap:var(--sp-8);white-space:nowrap}
.ribbon-track span::after{content:"◆";color:var(--gold-300);font-size:.7em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1.5rem + 3vw,4.5rem);align-items:center}
.split.is-reverse .split-media{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.is-reverse .split-media{order:0}}
.split-media{position:relative;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-lg)}
.split-media .media{--ratio:82%}
.split-media .badge-float{
  position:absolute;bottom:var(--sp-5);left:var(--sp-5);z-index:3;background:#fff;
  border-radius:var(--r-lg);padding:14px 18px;box-shadow:var(--sh-md);display:flex;gap:12px;align-items:center;
}
.split-media .badge-float .bf-num{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--red-600);line-height:1}
.split-media .badge-float .bf-lbl{font-size:var(--fs-xs);font-weight:700;color:var(--ink-500);line-height:1.3}

.tick-list{display:grid;gap:12px;margin:var(--sp-5) 0}
.tick-list li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-base);color:var(--ink-600)}
.tick-list li::before{
  content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-100);color:var(--green-600);font-size:12px;font-weight:900;margin-top:2px;
}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-2xl);
  background:var(--gradient-red);color:#fff;padding:clamp(2rem,1.5rem + 3vw,3.75rem);
  text-align:center;box-shadow:var(--sh-lg);
}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06);
}
.cta-band::before{width:280px;height:280px;top:-120px;right:-60px}
.cta-band::after{width:200px;height:200px;bottom:-100px;left:-40px}
.cta-band h2{color:#fff;position:relative;z-index:2}
.cta-band p{color:rgba(255,255,255,.85);max-width:560px;margin-inline:auto;position:relative;z-index:2}
.cta-band .cta-actions{position:relative;z-index:2;display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-6)}

/* Testimonial */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--sh-xs)}
.quote-card .q-mark{font-family:var(--font-display);font-size:3rem;color:var(--gold-300);line-height:.6;display:block;margin-bottom:var(--sp-3)}
.quote-card p{font-size:var(--fs-base);color:var(--ink-600);font-style:italic}
.quote-card .q-who{display:flex;align-items:center;gap:12px;margin-top:var(--sp-5)}
.quote-card .q-av{width:42px;height:42px;border-radius:50%;background:var(--gradient-gold);display:grid;place-items:center;font-weight:800;color:#3A2A08;flex:none}
.quote-card .q-name{display:block;font-weight:700;color:var(--ink-900);font-size:var(--fs-sm)}
.quote-card .q-role{display:block;font-size:var(--fs-xs);color:var(--ink-400)}

/* ==========================================================================
   14 · BREADCRUMBS, PAGINATION, ACCORDION, TABS
   ========================================================================== */
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink-400);padding-block:14px}
.breadcrumb a{color:var(--ink-500);font-weight:600}
.breadcrumb a:hover{color:var(--red-600)}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:8px;color:var(--ink-300)}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li[aria-current]{color:var(--ink-800);font-weight:700}
.breadcrumb.on-dark{color:rgba(255,255,255,.6)}
.breadcrumb.on-dark a{color:rgba(255,255,255,.8)}
.breadcrumb.on-dark li[aria-current]{color:#fff}

.pagination{display:flex;gap:6px;justify-content:center;margin-top:var(--sp-8);flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px;height:40px;padding:0 12px;border-radius:var(--r-md);display:grid;place-items:center;
  border:1px solid var(--line-strong);font-size:var(--fs-sm);font-weight:700;color:var(--ink-600);background:#fff;
}
.pagination a:hover{border-color:var(--ink-900);color:var(--ink-900)}
.pagination .is-current{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

.accordion{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.accordion + .accordion{margin-top:12px}
.accordion summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:16px 20px;cursor:pointer;font-weight:700;color:var(--ink-900);list-style:none;font-size:var(--fs-base);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:1.3rem;color:var(--gold-600);font-weight:400;transition:transform var(--t)}
.accordion[open] summary::after{transform:rotate(45deg)}
.accordion .acc-body{padding:0 20px 18px;color:var(--ink-500);font-size:var(--fs-sm)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{
  padding:12px 18px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-500);
  border-bottom:2.5px solid transparent;white-space:nowrap;transition:all var(--t);
}
.tabs button:hover{color:var(--ink-900)}
.tabs button.is-active{color:var(--red-600);border-bottom-color:var(--red-500)}

/* ==========================================================================
   15 · MOTION & A11Y
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

@media print{
  .site-header,.site-footer,.bottom-nav,.sticky-cart,.topbar,.branch-strip{display:none !important}
  body{background:#fff;padding:0}
}