/* ==========================================================
   Ilanthulir — design tokens
   ========================================================== */
:root{
  --ink:#0d0c0a;
  --panel:#161410;
  --panel-2:#1d1a14;
  --gold:#c8a24a;
  --gold-bright:#e9cf8c;
  --gold-dim:rgba(200,162,74,0.35);
  --cream:#f4eee0;
  --muted:#a89f8c;
  --line:rgba(200,162,74,0.16);
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Work Sans',sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--cream);
  margin:0 0 .4em;
}
.ta{font-family:'Noto Sans Tamil',sans-serif;}
::selection{background:var(--gold);color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:1.5px solid var(--gold-bright); outline-offset:3px;}

/* ==========================================================
   Signature motif — gold drop / ripple
   ========================================================== */
.drop-line{
  display:block; width:56px; height:10px; margin:0 auto;
  background:
    radial-gradient(circle at 8px 3px, var(--gold) 0 3px, transparent 4px),
    radial-gradient(circle at 28px 3px, var(--gold) 0 3px, transparent 4px),
    radial-gradient(circle at 48px 3px, var(--gold) 0 3px, transparent 4px);
  opacity:.7;
}
.ripple{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--gold-bright) 0%, transparent 70%);
  transform:scale(0); opacity:.55; pointer-events:none;
  animation:ripple-out .7s var(--ease) forwards;
}
@keyframes ripple-out{ to{ transform:scale(1); opacity:0; } }

/* ==========================================================
   Header
   (site-header / header-inner / main-nav / header-actions / cart-link /
   cart-count / nav-toggle moved into the "site-header" content block —
   see Admin > Website — so that markup and its CSS live together in one
   editable place. brand-mark/brand-word stay here since the footer's
   logo reuses them too.)
   ========================================================== */
.brand-mark{display:flex; align-items:center; gap:12px;}
.brand-lotus{width:34px; height:34px; fill:none; stroke:var(--gold); stroke-width:2.2;}
.brand-word{display:flex; flex-direction:column; line-height:1.1; gap: 8px;}
.brand-word .ta{font-size:20px; color:var(--cream);}
.brand-word .en{font-size:9px; letter-spacing:.32em; color:var(--muted);}

/* ==========================================================
   Buttons
   ========================================================== */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:14px 30px; font-family:'Work Sans',sans-serif; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; border-radius:var(--radius); cursor:pointer; border:1px solid var(--gold);
  transition:background .3s, color .3s, transform .2s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{background:var(--gold-bright); border-color:var(--gold-bright);}
.btn-outline{background:transparent; color:var(--gold-bright);}
.btn-outline:hover{background:var(--gold); color:var(--ink);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ==========================================================
   Hero
   ========================================================== */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(200,162,74,.14), transparent 60%),
    var(--ink);
}
.hero-noise{position:absolute; inset:0; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hero-content{position:relative; z-index:2; max-width:640px; padding:0 28px;}

.hero-eyebrow{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-bright);
  opacity:0; animation:rise .8s var(--ease) forwards; animation-delay:1s;
}
.hero h1{
  font-size:clamp(38px,6vw,64px); margin:16px 0 10px;
  opacity:0; animation:rise .9s var(--ease) forwards; animation-delay:1.15s;
}
.hero p.lede{
  color:var(--muted); font-size:17px; max-width:480px; margin:0 auto 30px;
  opacity:0; animation:rise .9s var(--ease) forwards; animation-delay:1.3s;
}
.hero-cta{opacity:0; animation:rise .9s var(--ease) forwards; animation-delay:1.45s;}
@keyframes rise{from{opacity:0; transform:translateY(0);} to{opacity:1;}}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; opacity:0; animation:rise .9s var(--ease) forwards; animation-delay:1.6s;
}
.scroll-cue i{width:1px; height:30px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden;}
.scroll-cue i::after{content:''; position:absolute; top:-30px; left:0; width:100%; height:100%; background:var(--gold-bright); animation:drip 2.2s ease-in-out infinite;}
@keyframes drip{0%{top:-30px;} 100%{top:30px;}}

/* ==========================================================
   Reveal on scroll
   ========================================================== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s;}

/* ==========================================================
   Section shell
   ========================================================== */
.section{padding:96px 0;}
.section-head{text-align:center; max-width:560px; margin:0 auto 56px;}
.section-head .eyebrow{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-bright); display:block; margin-bottom:10px;}
.section-head h2{font-size:clamp(28px,4vw,42px);}
.section-head p{color:var(--muted);}

/* ==========================================================
   Pillars
   ========================================================== */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pillar{background:var(--ink); padding:44px 32px; text-align:center; transition:background .4s;}
.pillar:hover{background:var(--panel);}
.pillar svg{width:34px; height:34px; stroke:var(--gold); fill:none; stroke-width:1.4; margin-bottom:16px;}
.pillar h3{font-size:19px;}
.pillar p{color:var(--muted); font-size:14px; margin:0;}
@media (max-width:760px){.pillars{grid-template-columns:1fr;}}

/* ==========================================================
   Product grid + card (hover overlay)
   ========================================================== */
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
@media (max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.product-grid{grid-template-columns:1fr;}}

.product-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; position:relative; transition:transform .45s var(--ease), border-color .3s;
}
.product-card:hover{transform:translateY(-6px); border-color:var(--gold-dim);}
.product-media{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--panel-2);}
.product-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.product-card:hover .product-media img{transform:scale(1.08);}

.product-badge{
  position:absolute; top:12px; left:12px; background:var(--gold); color:var(--ink);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius); z-index:2;
}

.product-overlay{
  position:absolute; inset:auto 0 0 0; padding:16px;
  background:linear-gradient(to top, rgba(13,12,10,.96) 30%, transparent);
  display:flex; gap:8px; justify-content:center;
  transform:translateY(100%); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.product-card:hover .product-overlay{transform:translateY(0); opacity:1;}
.product-overlay button, .product-overlay a{
  flex:1; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:10px 8px;
  border-radius:var(--radius); border:1px solid var(--gold); text-align:center; cursor:pointer;
  white-space:nowrap;
}
.ov-quick{background:transparent; color:var(--gold-bright);}
.ov-quick:hover{background:var(--gold); color:var(--ink);}
.ov-add{background:var(--gold); color:var(--ink); border:1px solid var(--gold);}
.ov-add:hover{background:var(--gold-bright); border-color:var(--gold-bright);}

.product-info{padding:18px 18px 20px;}
.product-info h3{font-size:20px; margin:0 0 4px;}
.product-info .desc{font-size:13px; color:var(--muted); margin:0 0 10px; min-height:34px;}
.price-row{display:flex; align-items:baseline; gap:10px;}
.price-now{font-size:18px; color:var(--gold-bright); font-weight:500;}
.price-was{font-size:13px; color:var(--muted); text-decoration:line-through;}

/* ==========================================================
   Quick view modal / overlay panel
   ========================================================== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,9,7,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:100;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease);
  padding:20px;
}
.modal-backdrop.open{opacity:1; visibility:visible;}
.modal-box{
  background:var(--panel); border:1px solid var(--line); max-width:760px; width:100%;
  display:grid; grid-template-columns:1fr 1fr; max-height:86vh; overflow:auto;
  transform:translateY(24px) scale(.98); transition:transform .4s var(--ease);
}
.modal-backdrop.open .modal-box{transform:translateY(0) scale(1);}
.modal-media{background:var(--panel-2); aspect-ratio:1/1;}
.modal-media img{width:100%; height:100%; object-fit:cover;}
.modal-info{padding:34px; position:relative;}
.modal-close{position:absolute; top:14px; right:14px; background:none; border:0; color:var(--muted); font-size:22px; cursor:pointer; line-height:1;}
.modal-close:hover{color:var(--cream);}
.modal-info h3{font-size:26px;}
.modal-info .desc{color:var(--muted); font-size:14px; margin-bottom:16px;}
.qty-row{display:flex; align-items:center; gap:14px; margin:18px 0;}
.qty-box{display:flex; align-items:stretch; border:1px solid var(--line); background:var(--panel-2); border-radius:var(--radius); overflow:hidden;}
.qty-box button{background:none; border:0; color:var(--gold-bright); width:34px; height:40px; cursor:pointer; font-size:16px; line-height:1; flex-shrink:0; transition:background .2s;}
.qty-box button:hover{background:rgba(200,162,74,.14);}
.qty-box input{
  width:44px; text-align:center; background:var(--panel-2); border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  color:var(--cream); font-size:14px; font-family:'Work Sans',sans-serif; -moz-appearance:textfield; appearance:textfield;
}
.qty-box input::-webkit-outer-spin-button,
.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.qty-box input:focus{outline:none; color:var(--gold-bright);}
.qty-box input[readonly], .cart-qty-box input[readonly]{cursor:default; caret-color:transparent;}

/* Cart page quantity stepper (same look, used inside a cart row) */
.cart-qty-box{display:flex; align-items:stretch; border:1px solid var(--line); background:var(--panel-2); border-radius:var(--radius); overflow:hidden; width:fit-content;}
.cart-qty-box button{background:none; border:0; color:var(--gold-bright); width:30px; height:40px; cursor:pointer; font-size:15px; transition:background .2s;}
.cart-qty-box button:hover{background:rgba(200,162,74,.14);}
.cart-qty-box input{
  width:50px; text-align:center; background:var(--panel-2); border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  color:var(--cream); font-size:14px; font-family:'Work Sans',sans-serif; -moz-appearance:textfield; appearance:textfield;
}
.cart-qty-box input::-webkit-outer-spin-button,
.cart-qty-box input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.cart-qty-box input:focus{outline:none;}
@media (max-width:640px){.modal-box{grid-template-columns:1fr;}}

/* ==========================================================
   Story split
   ========================================================== */
.story-split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.story-media{position:relative; aspect-ratio:4/5; background:var(--panel); border:1px solid var(--line); overflow:hidden;}
.story-media img{width:100%; height:100%; object-fit:cover;}
.story-text .eyebrow{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-bright);}
.story-text h2{font-size:clamp(28px,4vw,40px); margin-top:10px;}
.story-text p{color:var(--muted);}
.story-stats{display:flex; gap:40px; margin-top:28px;}
.story-stats div strong{display:block; font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--gold-bright);}
.story-stats div span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
@media (max-width:860px){.story-split{grid-template-columns:1fr; gap:36px;}}

/* ==========================================================
   Testimonials
   ========================================================== */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testimonial{background:var(--panel); border:1px solid var(--line); padding:30px; border-radius:var(--radius);}
.testimonial p{color:var(--cream); font-family:'Cormorant Garamond',serif; font-size:19px; font-style:italic;}
.testimonial .who{color:var(--gold-bright); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-top:14px; display:block;}
@media (max-width:860px){.testimonials{grid-template-columns:1fr;}}

/* ==========================================================
   Footer
   (moved into the "site-footer" content block — see
   Admin > Website — so its markup and CSS live together in one
   editable place. Nothing left to define here.)
   ========================================================== */

/* ==========================================================
   Added-to-cart celebration popup
   ========================================================== */
.cart-pop-backdrop{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(10,9,7,.6); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease);
}
.cart-pop-backdrop.show{opacity:1; visibility:visible;}
.cart-pop{
  position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--gold-dim);
  border-radius:6px; padding:36px 34px 30px; width:100%; max-width:340px; text-align:center;
  transform:translateY(18px) scale(.92); transition:transform .45s var(--ease);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.cart-pop-backdrop.show .cart-pop{transform:translateY(0) scale(1);}
.cart-pop-x{position:absolute; top:10px; right:12px; background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer; z-index:3; line-height:1;}
.cart-pop-x:hover{color:var(--cream);}

.cart-pop-bubbles{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.cart-pop-bubbles span{
  position:absolute; bottom:-20px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-bright), var(--gold) 70%);
  opacity:0; animation:bubble-rise 2.6s ease-in infinite; animation-play-state:paused;
}
.cart-pop-backdrop.show .cart-pop-bubbles span{animation-play-state:running;}
.cart-pop-bubbles span:nth-child(1){left:6%;  width:9px;  height:9px;  animation-delay:0s;}
.cart-pop-bubbles span:nth-child(2){left:14%; width:15px; height:15px; animation-delay:.13s;}
.cart-pop-bubbles span:nth-child(3){left:23%; width:7px;  height:7px;  animation-delay:.26s;}
.cart-pop-bubbles span:nth-child(4){left:31%; width:12px; height:12px; animation-delay:.39s;}
.cart-pop-bubbles span:nth-child(5){left:40%; width:6px;  height:6px;  animation-delay:.52s;}
.cart-pop-bubbles span:nth-child(6){left:48%; width:17px; height:17px; animation-delay:.65s;}
.cart-pop-bubbles span:nth-child(7){left:56%; width:8px;  height:8px;  animation-delay:.78s;}
.cart-pop-bubbles span:nth-child(8){left:64%; width:13px; height:13px; animation-delay:.91s;}
.cart-pop-bubbles span:nth-child(9){left:72%; width:6px;  height:6px;  animation-delay:1.04s;}
.cart-pop-bubbles span:nth-child(10){left:80%; width:16px; height:16px; animation-delay:1.17s;}
.cart-pop-bubbles span:nth-child(11){left:88%; width:9px;  height:9px;  animation-delay:1.3s;}
.cart-pop-bubbles span:nth-child(12){left:10%; width:11px; height:11px; animation-delay:1.43s;}
.cart-pop-bubbles span:nth-child(13){left:19%; width:6px;  height:6px;  animation-delay:1.56s;}
.cart-pop-bubbles span:nth-child(14){left:35%; width:14px; height:14px; animation-delay:1.69s;}
.cart-pop-bubbles span:nth-child(15){left:44%; width:7px;  height:7px;  animation-delay:1.82s;}
.cart-pop-bubbles span:nth-child(16){left:59%; width:10px; height:10px; animation-delay:1.95s;}
.cart-pop-bubbles span:nth-child(17){left:68%; width:6px;  height:6px;  animation-delay:2.08s;}
.cart-pop-bubbles span:nth-child(18){left:76%; width:13px; height:13px; animation-delay:2.21s;}
.cart-pop-bubbles span:nth-child(19){left:92%; width:8px;  height:8px;  animation-delay:2.34s;}
.cart-pop-bubbles span:nth-child(20){left:27%; width:9px;  height:9px;  animation-delay:2.47s;}
/* every third bubble is white/cream instead of gold, for a bit of sparkle variety */
.cart-pop-bubbles span:nth-child(3n){
  background:radial-gradient(circle at 30% 30%, #ffffff, rgba(255,255,255,.55) 70%);
}@keyframes bubble-rise{
  0%{ transform:translateY(0) translateX(0) scale(.4); opacity:0; }
  15%{ opacity:.85; }
  100%{ transform:translateY(-260px) translateX(var(--drift,12px)) scale(1); opacity:0; }
}
.cart-pop-bubbles span:nth-child(odd){ --drift:-14px; }
.cart-pop-bubbles span:nth-child(even){ --drift:14px; }

.cart-pop-check{
  width:56px; height:56px; border-radius:50%; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; position:relative; z-index:2;
}
.cart-pop-check svg{width:26px; height:26px; stroke:var(--gold-bright); fill:none; stroke-width:2;
  stroke-dasharray:30; stroke-dashoffset:30; animation:check-draw .5s var(--ease) forwards; animation-delay:.15s;}
.cart-pop-backdrop.show .cart-pop-check svg{animation-name:check-draw;}
@keyframes check-draw{to{stroke-dashoffset:0;}}

.cart-pop h4{position:relative; z-index:2; font-size:22px; margin-bottom:4px;}
.cart-pop-product{position:relative; z-index:2; display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:16px 0 20px;}
.cart-pop-product img{width:48px; height:48px; object-fit:cover; border-radius:4px; flex-shrink:0;}
.cart-pop-product .name{font-size:14px; color:var(--cream); margin-bottom:2px;}
.cart-pop-product .meta{font-size:12px; color:var(--muted);}
.cart-pop-actions{position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; width:100%;}
.cart-pop-actions .btn{width:100%; padding:12px 10px; font-size:12px;}
.cart-pop-dismiss{display:inline-flex; align-items:center; justify-content:center; gap:7px;}
.cart-pop-dismiss svg{flex-shrink:0; transition:transform .25s var(--ease);}
.cart-pop-dismiss:hover svg{transform:translateX(-3px);}

/* Loading state: shown immediately on submit, before we know success/failure */
.cart-pop-spinner{position:relative; z-index:2; width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(200,162,74,.25); border-top-color:var(--gold-bright); margin:6px auto 16px;
  animation:pop-spin .8s linear infinite; display:none;}
.cart-pop.is-loading .cart-pop-spinner{display:block;}
.cart-pop.is-loading .cart-pop-bubbles,
.cart-pop.is-loading .cart-pop-check,
.cart-pop.is-loading .cart-pop-actions{display:none;}
@keyframes pop-spin{to{transform:rotate(360deg);}}
/* ==========================================================
   Toast
   ========================================================== */
.toast{
  position:fixed; bottom:26px; right:26px; background:var(--gold); color:var(--ink);
  padding:14px 22px; font-size:13px; border-radius:var(--radius); transform:translateY(120%);
  transition:transform .4s var(--ease); z-index:200; max-width:280px;
}
.toast.show{transform:translateY(0);}

/* ==========================================================
   Generic page shell (products, cart, checkout, order-success)
   ========================================================== */
.page-hero{padding:56px 0 20px; text-align:center; border-bottom:1px solid var(--line);}
.page-hero .eyebrow{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-bright);}
.page-hero h1{font-size:clamp(32px,5vw,48px); margin-top:8px;}

.filter-bar{display:flex; justify-content:center; gap:14px; margin:34px 0 46px; flex-wrap:wrap;}
.filter-bar button{
  background:none; border:1px solid var(--line); color:var(--muted); padding:8px 18px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; border-radius:20px; cursor:pointer; transition:all .25s;
}
.filter-bar button.active, .filter-bar button:hover{border-color:var(--gold); color:var(--gold-bright);}

/* Cart */
.cart-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:50px; align-items:start;}
.cart-row{display:grid; grid-template-columns:80px 1fr auto auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line);}
.cart-row img{width:80px; height:80px; object-fit:cover; border-radius:var(--radius); background:var(--panel-2); flex-shrink:0;}
.cart-row h4{margin:0 0 4px; font-size:17px;}
.cart-row .rm{color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer; background:none; border:0; padding:0;}
.summary-box{background:var(--panel); border:1px solid var(--line); padding:28px; border-radius:var(--radius); position:sticky; top:110px;}
.summary-row{display:flex; justify-content:space-between; font-size:14px; color:var(--muted); margin-bottom:12px;}
.summary-row.total{color:var(--cream); font-size:18px; border-top:1px solid var(--line); padding-top:14px; margin-top:14px;}
.summary-row.total strong{color:var(--gold-bright);}
.empty-state{text-align:center; padding:80px 20px; color:var(--muted);}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr;}}
/* Below ~640px the original 4-column row (image / name / qty-box / price)
   doesn't have room to breathe and squeezes everything together. Reflow
   into: image spanning two rows on the left, name+remove on the top
   right, qty box and price sharing a second row underneath it. */
@media (max-width:640px){
  .cart-row{
    grid-template-columns:64px 1fr auto;
    grid-template-areas:
      "img info info"
      "img qty  price";
    row-gap:12px; column-gap:14px; padding:16px 0;
  }
  .cart-row img{grid-area:img; width:64px; height:64px; align-self:start;}
  .cart-row > div:nth-child(2){grid-area:info; min-width:0;}
  .cart-row h4{font-size:15px; line-height:1.3;}
  .cart-row .cart-qty-box{grid-area:qty; justify-self:start;}
  .cart-row > div:last-child{grid-area:price; justify-self:end; align-self:center; font-size:15px;}
  .summary-box{padding:22px 20px; position:static;}
}

/* Checkout form */
.checkout-layout{display:grid; grid-template-columns:1.5fr 1fr; gap:50px; align-items:start;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1 / -1;}
label{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
input, textarea, select{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--cream);
  padding:12px 14px; font-size:14px; font-family:'Work Sans',sans-serif; border-radius:var(--radius);
  transition:border-color .25s;
}
input:focus, textarea:focus, select:focus{border-color:var(--gold); outline:none;}
.field{margin-bottom:18px;}
@media (max-width:900px){.checkout-layout{grid-template-columns:1fr;} .form-grid{grid-template-columns:1fr;}}

.order-success-box{text-align:center; padding:100px 20px; max-width:520px; margin:0 auto;}
.order-success-box svg{width:70px; height:70px; stroke:var(--gold); fill:none; stroke-width:1.4; margin-bottom:18px;}
.order-number{display:inline-block; background:var(--panel); border:1px solid var(--gold-dim); padding:10px 22px; font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--gold-bright); margin:18px 0 28px; border-radius:var(--radius);}
/* ==========================================================================
   MODERN UX LAYER — transitions, feedback, real-time status
   Everything below is additive; it respects prefers-reduced-motion via the
   global rule near the top of this file.
   ========================================================================== */

/* ---------- Page transitions (View Transitions API, progressive) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .22s var(--ease) both; }
::view-transition-new(root){ animation:vt-in .38s var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } }
main, body > section:first-of-type{ animation:page-in .5s var(--ease) both; }
@keyframes page-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.page-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:300; pointer-events:none;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow:0 0 10px rgba(233,207,140,.6); opacity:0; transition:opacity .3s;
}
.page-progress.run{ opacity:1; animation:progress-run 2.4s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes progress-run{ from{ width:0; } to{ width:88%; } }

.site-header{ transition:box-shadow .35s var(--ease), border-color .3s var(--ease); }
.site-header.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.35); }

/* ---------- Buttons: lift, glow, loading ---------- */
.btn{ will-change:transform; }
.btn:hover:not([disabled]){ transform:translateY(-1px); box-shadow:0 8px 22px rgba(200,162,74,.18); }
.btn:active:not([disabled]){ transform:translateY(0) scale(.97); box-shadow:none; }
.btn.is-loading{ pointer-events:none; color:transparent !important; }
.btn.is-loading > *{ visibility:hidden; }
.btn.is-loading::after{
  content:attr(data-loading-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--ink); font-size:12px; letter-spacing:.08em;
  background:inherit;
}
.btn-outline.is-loading::after{ color:var(--gold-bright); }
.btn.is-loading::before{
  content:''; position:absolute; left:18px; top:50%; width:14px; height:14px; margin-top:-7px; z-index:2;
  border:2px solid currentColor; border-color:rgba(13,12,10,.35); border-top-color:var(--ink); border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn-outline.is-loading::before{ border-color:rgba(233,207,140,.3); border-top-color:var(--gold-bright); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Toasts (stacked, typed, auto-dismiss with progress) ---------- */
.toast-stack{
  position:fixed; right:22px; bottom:22px; z-index:400; display:flex; flex-direction:column-reverse; gap:10px;
  width:min(360px, calc(100vw - 32px)); pointer-events:none;
}
.toast-item{
  pointer-events:auto; position:relative; overflow:hidden; display:flex; gap:12px; align-items:flex-start;
  background:rgba(22,20,16,.96); border:1px solid var(--line); border-left:3px solid var(--gold);
  color:var(--cream); padding:14px 40px 14px 14px; font-size:13.5px; line-height:1.45; border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.45); backdrop-filter:blur(8px);
  animation:toast-in .45s cubic-bezier(.2,1.2,.4,1) both;
}
.toast-item.leaving{ animation:toast-out .3s var(--ease) both; }
.toast-item .toast-icon{ flex:0 0 20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gold); color:var(--ink); font-size:12px; font-weight:700; }
.toast-item .toast-title{ display:block; font-weight:600; margin-bottom:2px; }
.toast-item .toast-close{ position:absolute; top:8px; right:8px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:4px; }
.toast-item .toast-close:hover{ color:var(--cream); }
.toast-item .toast-bar{ position:absolute; left:0; bottom:0; height:2px; background:var(--gold); animation:toast-bar linear forwards; }
.toast-item.is-success{ border-left-color:#6fbf8a; } .toast-item.is-success .toast-icon, .toast-item.is-success .toast-bar{ background:#6fbf8a; }
.toast-item.is-error{ border-left-color:#e07b75; } .toast-item.is-error .toast-icon, .toast-item.is-error .toast-bar{ background:#e07b75; }
.toast-item.is-info .toast-icon{ background:var(--gold-bright); }
.toast-item:hover .toast-bar{ animation-play-state:paused; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(16px) scale(.96); } }
@keyframes toast-out{ to{ opacity:0; transform:translateX(30px); } }
@keyframes toast-bar{ from{ width:100%; } to{ width:0; } }

/* ---------- Full-screen overlay (payment confirmation etc.) ---------- */
.ui-overlay{
  position:fixed; inset:0; z-index:350; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(13,12,10,.72); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.ui-overlay.show{ opacity:1; visibility:visible; }
.ui-overlay-card{ text-align:center; max-width:340px; transform:translateY(12px) scale(.97); transition:transform .45s cubic-bezier(.2,1.2,.4,1); }
.ui-overlay.show .ui-overlay-card{ transform:none; }
.ui-overlay-spinner{ width:54px; height:54px; margin:0 auto 20px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--gold-bright); animation:spin .8s linear infinite; }
.ui-overlay.is-done .ui-overlay-spinner{ animation:none; border-color:var(--gold); background:var(--gold); position:relative; }
.ui-overlay.is-done .ui-overlay-spinner::after{ content:''; position:absolute; left:18px; top:12px; width:12px; height:22px; border:solid var(--ink); border-width:0 3px 3px 0; transform:rotate(45deg); animation:pop-in .35s var(--ease); }
.ui-overlay h3{ font-size:24px; margin-bottom:6px; }
.ui-overlay p{ color:var(--muted); font-size:14px; margin:0; }
@keyframes pop-in{ from{ transform:rotate(45deg) scale(0); } }

/* ---------- Interactive forms: live validation ---------- */
.field{ position:relative; }
.field input, .field textarea, .field select{ transition:border-color .25s, box-shadow .25s, background .25s; }
.field input:focus, .field textarea:focus, .field select:focus{ box-shadow:0 0 0 3px rgba(200,162,74,.14); }
.field.is-invalid input, .field.is-invalid textarea{ border-color:#e07b75; box-shadow:0 0 0 3px rgba(224,123,117,.12); }
.field.is-valid input, .field.is-valid textarea{ border-color:rgba(111,191,138,.6); }
.field-error{ display:block; color:#e88f89; font-size:12px; margin-top:6px; animation:field-msg .25s var(--ease); }
.field-hint{ display:block; color:var(--muted); font-size:12px; margin-top:6px; }
@keyframes field-msg{ from{ opacity:0; transform:translateY(-4px); } }
.field.is-valid::after{
  content:''; position:absolute; right:14px; top:39px; width:6px; height:11px; border:solid #6fbf8a; border-width:0 2px 2px 0;
  transform:rotate(45deg); animation:pop-in .3s var(--ease);
}
.field.full.is-valid::after{ display:none; }
.form-alert{ background:rgba(224,123,117,.1); border:1px solid rgba(224,123,117,.35); color:#f0b2ae; padding:12px 16px; font-size:13.5px; margin-bottom:20px; border-radius:var(--radius); animation:field-msg .3s var(--ease); }
.shake{ animation:shake .45s var(--ease); }
@keyframes shake{ 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }

/* Checkout progress + WhatsApp opt-in toggle */
.checkout-steps{ list-style:none; display:flex; gap:8px; padding:0; margin:0 0 28px; counter-reset:none; }
.checkout-steps li{ flex:1; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-bottom:10px; border-bottom:2px solid var(--line); }
.checkout-steps li span{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); font-size:11px; }
.checkout-steps li.done{ color:var(--gold-bright); border-color:var(--gold-dim); }
.checkout-steps li.done span{ background:var(--gold-dim); border-color:transparent; color:var(--cream); }
.checkout-steps li.current{ color:var(--cream); border-image:linear-gradient(90deg, var(--gold), var(--gold-bright)) 1; }
.checkout-steps li.current span{ background:var(--gold); color:var(--ink); border-color:var(--gold); box-shadow:0 0 0 4px rgba(200,162,74,.15); }
@media (max-width:560px){ .checkout-steps li{ font-size:0; } .checkout-steps li span{ font-size:11px; } }

.toggle-row{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; text-transform:none; letter-spacing:0; margin:4px 0 0; padding:14px 16px; border:1px solid var(--line); background:var(--panel); border-radius:6px; transition:border-color .25s, background .25s; }
.toggle-row:hover{ border-color:var(--gold-dim); }
.toggle-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.toggle-switch{ flex:0 0 40px; height:22px; border-radius:20px; background:var(--panel-2); border:1px solid var(--line); position:relative; transition:background .3s, border-color .3s; margin-top:2px; }
.toggle-switch::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .35s cubic-bezier(.2,1.4,.4,1), background .3s; }
.toggle-row input:checked + .toggle-switch{ background:#25d366; border-color:#25d366; }
.toggle-row input:checked + .toggle-switch::after{ transform:translateX(18px); background:#fff; }
.toggle-row input:focus-visible + .toggle-switch{ outline:1.5px solid var(--gold-bright); outline-offset:3px; }
.toggle-text strong{ display:block; color:var(--cream); font-weight:500; font-size:14px; }
.toggle-text small{ display:block; color:var(--muted); font-size:12.5px; margin-top:2px; line-height:1.5; }

/* ---------- Customer notification bell ---------- */
.notif-bell{ position:relative; }
.notif-bell-btn{ position:relative; background:none; border:0; color:var(--cream); cursor:pointer; padding:4px; display:flex; transition:transform .2s; }
.notif-bell-btn:hover{ transform:rotate(-8deg); }
.notif-bell.ringing .notif-bell-btn svg{ animation:ring 1s var(--ease); transform-origin:50% 2px; }
@keyframes ring{ 10%,30%,50%{ transform:rotate(14deg); } 20%,40%,60%{ transform:rotate(-14deg); } 70%{ transform:rotate(0); } }
.notif-bell-count{ position:absolute; top:-6px; right:-8px; min-width:17px; height:17px; padding:0 4px; border-radius:10px; background:#e07b75; color:#fff; font-size:10px; font-weight:600; display:none; align-items:center; justify-content:center; }
.notif-bell-count.show{ display:flex; animation:badge-pop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes badge-pop{ from{ transform:scale(0); } }
.notif-panel{
  position:absolute; right:-12px; top:calc(100% + 16px); width:min(340px, calc(100vw - 24px)); z-index:60;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 24px 50px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top right;
  transition:opacity .25s var(--ease), transform .3s var(--ease), visibility .25s;
}
.notif-bell.open .notif-panel{ opacity:1; visibility:visible; transform:none; }
.notif-panel-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.notif-mark-all{ background:none; border:0; color:var(--gold-bright); font-size:12px; cursor:pointer; }
.notif-list{ max-height:360px; overflow-y:auto; }
.notif-item{ display:block; padding:13px 16px 13px 28px; border-bottom:1px solid var(--line); position:relative; font-size:13px; transition:background .2s; color:var(--cream); }
.notif-item:hover{ background:var(--panel-2); }
.notif-item.unread::before{ content:''; position:absolute; left:12px; top:19px; width:7px; height:7px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 0 3px rgba(233,207,140,.15); }
.notif-item strong{ display:block; font-weight:500; }
.notif-item span{ display:block; color:var(--muted); margin-top:2px; line-height:1.45; }
.notif-item time{ display:block; color:#736f64; font-size:11px; margin-top:4px; }
.notif-item.fresh{ animation:notif-in .5s var(--ease); }
@keyframes notif-in{ from{ background:rgba(200,162,74,.18); transform:translateX(-6px); } }
.notif-empty{ padding:28px 16px; text-align:center; color:var(--muted); font-size:13px; }
.notif-panel-foot{ display:block; padding:12px 16px; text-align:center; font-size:12px; color:var(--gold-bright); letter-spacing:.04em; }
.notif-skeleton{ height:54px; margin:10px 16px; border-radius:4px; background:linear-gradient(90deg, var(--panel-2) 25%, #26221a 50%, var(--panel-2) 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.notif-bell-floating{ position:fixed; left:20px; bottom:20px; z-index:70; background:var(--panel); border:1px solid var(--line); border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.4); }
.notif-bell-floating .notif-panel{ top:auto; bottom:calc(100% + 12px); left:-8px; right:auto; transform-origin:bottom left; }

/* ---------- Order tracking ---------- */
.track-wrap{ max-width:900px; }
.track-card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:32px; }
.track-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.track-status-pill{ display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:20px; background:rgba(200,162,74,.12); color:var(--gold-bright); font-size:13px; letter-spacing:.04em; transition:background .4s, color .4s; }
.track-status-pill.is-cancelled{ background:rgba(224,123,117,.12); color:#e88f89; }
.track-status-pill.changed{ animation:pill-flash 1.2s var(--ease); }
@keyframes pill-flash{ 0%{ box-shadow:0 0 0 0 rgba(233,207,140,.6); } 100%{ box-shadow:0 0 0 18px rgba(233,207,140,0); } }
.live-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; position:relative; }
.live-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; animation:live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(1.8); opacity:0; } }
.track-meta{ color:var(--muted); font-size:13px; margin:10px 0 0; }
.track-live-note{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6fbf8a; display:inline-flex; align-items:center; gap:6px; }
.track-live-note::before{ content:''; width:6px; height:6px; border-radius:50%; background:#6fbf8a; animation:blink 2s infinite; }
.track-live-note.offline{ color:var(--muted); } .track-live-note.offline::before{ background:var(--muted); animation:none; }
@keyframes blink{ 50%{ opacity:.3; } }

.track-steps{ list-style:none; padding:0; margin:36px 0 10px; display:grid; grid-template-columns:repeat(4,1fr); position:relative; --progress:0; }
.track-steps::before, .track-steps::after{ content:''; position:absolute; top:15px; left:12.5%; right:12.5%; height:2px; background:var(--line); }
.track-steps::after{ background:linear-gradient(90deg, var(--gold), var(--gold-bright)); right:auto; width:calc(75% * var(--progress)); transition:width 1s var(--ease); }
.track-steps.is-cancelled{ opacity:.45; filter:grayscale(1); }
.track-step{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
.track-dot{ width:32px; height:32px; border-radius:50%; background:var(--panel-2); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; transition:background .5s, border-color .5s, transform .5s cubic-bezier(.2,1.6,.4,1); }
.track-dot svg{ width:15px; height:15px; stroke:var(--ink); stroke-width:2.6; fill:none; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .5s .2s var(--ease); }
.track-step.done .track-dot, .track-step.current .track-dot{ background:var(--gold); border-color:var(--gold); }
.track-step.done .track-dot svg, .track-step.current .track-dot svg{ stroke-dashoffset:0; }
.track-step.current .track-dot{ box-shadow:0 0 0 6px rgba(200,162,74,.16); animation:current-glow 2.4s ease-in-out infinite; }
@keyframes current-glow{ 50%{ box-shadow:0 0 0 10px rgba(200,162,74,.06); } }
.track-step.just-reached .track-dot{ transform:scale(1.25); }
.track-step-label{ margin-top:12px; font-size:13px; color:var(--cream); }
.track-step-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.track-step:not(.done):not(.current) .track-step-label{ color:var(--muted); }
.track-cancelled-note{ color:#e88f89; font-size:13.5px; text-align:center; margin-top:16px; }
.track-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; margin-top:38px; padding-top:30px; border-top:1px solid var(--line); }
.track-grid h3{ font-size:20px; margin-bottom:14px; }
.track-timeline{ list-style:none; margin:0; padding:0 0 0 18px; border-left:1px solid var(--line); }
.track-timeline li{ position:relative; padding:0 0 20px 14px; font-size:13.5px; }
.track-timeline li::before{ content:''; position:absolute; left:-23px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--panel); }
.track-timeline li strong{ display:block; color:var(--cream); font-weight:500; }
.track-timeline li span{ display:block; color:var(--muted); margin-top:2px; }
.track-timeline li time{ display:block; color:#736f64; font-size:11.5px; margin-top:3px; }
.track-timeline li.track-timeline-empty{ color:var(--muted); }
.track-timeline li.track-timeline-empty::before{ background:var(--line); }
.track-timeline li.fresh{ animation:notif-in .7s var(--ease); }
.track-items{ list-style:none; padding:0; margin:0; font-size:13.5px; }
.track-items li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
.track-items em{ color:var(--muted); font-style:normal; }
.track-items-total{ font-weight:600; color:var(--gold-bright); border-bottom:0 !important; }
.track-channels, .success-deliveries{ display:flex; flex-wrap:wrap; gap:8px; }
.track-address{ color:var(--muted); font-size:12.5px; margin-top:18px; line-height:1.6; }
.track-lookup{ max-width:460px; margin:0 auto; }
.track-form{ background:var(--panel); border:1px solid var(--line); padding:30px; border-radius:8px; }
.track-recent{ margin-top:30px; }
.track-recent h3{ font-size:19px; margin-bottom:12px; }
.track-recent-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:6px; margin-bottom:8px; transition:border-color .25s, transform .25s; }
.track-recent-row:hover{ border-color:var(--gold-dim); transform:translateX(4px); }
.track-recent-row small{ display:block; color:var(--muted); font-size:12px; }
.track-recent-status{ font-size:12px; color:var(--gold-bright); }
@media (max-width:720px){
  .track-card{ padding:22px 18px; }
  .track-grid{ grid-template-columns:1fr; gap:28px; }
  .track-step-sub{ display:none; }
  .track-step-label{ font-size:11.5px; }
}

/* Channel chips with live delivery state */
.channel-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:20px; border:1px solid var(--line); font-size:12px; color:var(--cream); background:var(--panel-2); transition:border-color .4s, background .4s; }
.channel-chip::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--muted); transition:background .4s; }
.channel-chip[data-status="queued"]::before, .channel-chip[data-status="sending"]::before, .channel-chip.is-waiting::before{ background:var(--gold-bright); animation:blink 1s infinite; }
.channel-chip[data-status="sent"]::before{ background:var(--gold); }
.channel-chip[data-status="delivered"]::before, .channel-chip[data-status="read"]::before{ background:#6fbf8a; }
.channel-chip[data-status="delivered"], .channel-chip[data-status="read"]{ border-color:rgba(111,191,138,.35); }
.channel-chip[data-status="failed"]::before{ background:#e07b75; }
.channel-chip em{ font-style:normal; color:var(--muted); }
.channel-chip.fresh{ animation:badge-pop .4s cubic-bezier(.2,1.6,.4,1); }

/* ---------- Order success ---------- */
.order-success-box .success-lead{ color:var(--muted); }
.success-mark{ position:relative; width:84px; height:84px; margin:0 auto 22px; }
.order-success-box .success-check{ width:84px; height:84px; margin:0; stroke:var(--gold); stroke-width:2; fill:none; }
.success-check circle{ stroke-dasharray:152; stroke-dashoffset:152; }
.success-check path{ stroke-dasharray:40; stroke-dashoffset:40; stroke-linecap:round; stroke-linejoin:round; stroke-width:3; }
.is-paid .success-check circle{ animation:draw .8s var(--ease) forwards; }
.is-paid .success-check path{ animation:draw .45s .7s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success-spinner{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--line); border-top-color:var(--gold-bright); animation:spin 1s linear infinite; display:none; }
.is-pending .success-spinner{ display:block; }
.is-pending .success-check{ opacity:0; }
.success-deliveries{ justify-content:center; margin:6px 0 30px; min-height:32px; }
.success-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }

/* ---------- Invoice (screen + print) ---------- */
.invoice-section .wrap{ max-width:860px; }
.invoice-actions{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
.invoice-status{ padding:6px 14px; border-radius:20px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; background:rgba(200,162,74,.12); color:var(--gold-bright); }
.invoice-status.status-paid{ background:rgba(111,191,138,.12); color:#8fd3a7; }
.invoice-status.status-overdue, .invoice-status.status-cancelled{ background:rgba(224,123,117,.12); color:#e88f89; }
.invoice-paper{ background:#fbf8f1; color:#2a261e; padding:48px; border-radius:6px; box-shadow:0 30px 60px rgba(0,0,0,.45); font-size:14px; }
.invoice-paper h1{ color:#2a261e; font-size:34px; margin:0; }
.invoice-top{ display:flex; justify-content:space-between; gap:20px; padding-bottom:24px; border-bottom:2px solid #c8a24a; flex-wrap:wrap; }
.invoice-brand{ font-family:'Noto Sans Tamil',serif; font-size:26px; color:#8a692f; }
.invoice-brand-sub{ font-size:12px; color:#736f64; margin-top:4px; }
.invoice-title{ text-align:right; color:#736f64; }
.invoice-meta{ display:flex; justify-content:space-between; gap:24px; margin:28px 0; line-height:1.6; flex-wrap:wrap; }
.invoice-meta small, .invoice-dates small{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8a8473; }
.invoice-dates{ display:grid; grid-template-columns:repeat(3,auto); gap:24px; text-align:right; }
.invoice-table-wrap{ overflow-x:auto; }
.invoice-table{ width:100%; border-collapse:collapse; }
.invoice-table th{ text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8a8473; border-bottom:1px solid #e3dccb; padding:10px 8px; }
.invoice-table td{ padding:12px 8px; border-bottom:1px solid #efe9db; }
.invoice-table th:not(:first-child), .invoice-table td:not(:first-child){ text-align:right; white-space:nowrap; }
.invoice-totals{ margin:20px 0 0 auto; max-width:340px; }
.invoice-totals div{ display:flex; justify-content:space-between; padding:6px 8px; gap:16px; }
.invoice-totals .grand{ font-weight:600; border-top:1px solid #e3dccb; margin-top:4px; padding-top:10px; }
.invoice-totals .paid{ color:#3f7d52; font-size:13px; }
.invoice-totals .balance{ background:#2a261e; color:#f4eee0; font-weight:600; border-radius:4px; margin-top:8px; padding:10px 12px; }
.invoice-notes{ margin-top:28px; color:#5c5648; background:#f3eee2; padding:14px 16px; border-radius:4px; }
.invoice-foot{ margin-top:30px; font-size:12px; color:#8a8473; text-align:center; }
@media (max-width:640px){ .invoice-paper{ padding:26px 18px; } .invoice-dates{ grid-template-columns:1fr 1fr; text-align:left; } .invoice-title{ text-align:left; } }
@media print{
  body{ background:#fff !important; }
  .site-header, .site-footer, footer, .no-print, .toast-stack, .page-progress, .back-to-top, .notif-bell-floating, .drop-cursor, .cart-pop-backdrop{ display:none !important; }
  .invoice-section{ padding:0 !important; }
  .invoice-paper{ box-shadow:none; padding:0; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:65; width:44px; height:44px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); color:var(--gold-bright); cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s, transform .3s var(--ease), visibility .3s, border-color .25s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ border-color:var(--gold); }
.toast-stack:not(:empty) ~ .back-to-top{ opacity:0; pointer-events:none; }

/* Cart rows: show progress while quantities update */
.cart-row{ transition:opacity .25s; }
.cart-row.is-updating{ opacity:.5; pointer-events:none; }
.toggle-row + .toggle-row{ margin-top:10px; }
.toggle-row input:checked + .toggle-switch.is-sms{ background:var(--gold); border-color:var(--gold); }

/* ==========================================================================
   MOTION LAYER (see the matching block at the end of main.js)
   ========================================================================== */
.scroll-progress{ position:fixed; left:0; right:0; top:0; height:2px; z-index:299; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--gold), var(--gold-bright)); pointer-events:none; }

/* Hero */
.hero{ --mx:50%; --my:40%; --hero-fade:1; }
.hero::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(500px circle at var(--mx) var(--my), rgba(233,207,140,.10), transparent 60%); transition:background .2s; }
.motion-on .hero-content{ transition:transform .6s var(--ease); opacity:var(--hero-fade); }
.hero h1.split-ready .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; line-height:1.1; }
.hero h1.split-ready .wi{ display:inline-block; transform:translateY(110%) rotate(4deg); animation:word-up .9s var(--ease) forwards; }
.hero h1.split-ready{ opacity:1 !important; animation:none !important; }
@keyframes word-up{ to{ transform:none; } }
.hero-bubbles{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; transition:transform .8s var(--ease); }
.hero-bubbles span{
  position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(233,207,140,.10) 45%, rgba(200,162,74,.04) 70%);
  border:1px solid rgba(233,207,140,.22); box-shadow:inset -2px -3px 6px rgba(200,162,74,.12);
  animation:bubble-float linear infinite;
}
@keyframes bubble-float{
  0%{ transform:translate(0,0) scale(.7); opacity:0; }
  10%{ opacity:.9; }
  50%{ transform:translate(var(--drift), -55vh) scale(1); }
  90%{ opacity:.7; }
  100%{ transform:translate(calc(var(--drift) * -1), -110vh) scale(1.1); opacity:0; }
}

/* Auto-reveal */
.motion-on .auto-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.motion-on .auto-reveal.is-in{ opacity:1; transform:none; }

/* Section heading underline draw + eyebrow tracking */
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{ content:''; position:absolute; left:50%; bottom:-10px; width:64px; height:1px; background:var(--gold); transform:translateX(-50%) scaleX(0); transition:transform 1s .2s var(--ease); }
.section-head.drawn h2::after{ transform:translateX(-50%) scaleX(1); }
.motion-on .section-head .eyebrow{ letter-spacing:.6em; opacity:0; transition:letter-spacing 1.2s var(--ease), opacity 1s; }
.motion-on .section-head.drawn .eyebrow{ letter-spacing:.3em; opacity:1; }

/* Pillars: icons draw, lift on hover */
.motion-on .pillar svg *{ stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset 1.6s var(--ease); }
.motion-on .pillar.drawn svg *{ stroke-dashoffset:0; }
.pillar{ transition:background .4s, transform .5s var(--ease); }
.pillar:hover{ transform:translateY(-4px); }
.pillar:hover svg{ animation:icon-bob 1.2s var(--ease) infinite alternate; }
@keyframes icon-bob{ to{ transform:translateY(-4px) rotate(-4deg); } }

/* Testimonials */
.testimonial{ position:relative; transition:transform .5s var(--ease), border-color .4s, box-shadow .5s; }
.testimonial:hover{ transform:translateY(-6px); border-color:var(--gold-dim); box-shadow:0 24px 50px rgba(0,0,0,.35); }
.testimonial::before{ content:'\201C'; position:absolute; right:22px; top:6px; font-family:'Cormorant Garamond',serif; font-size:84px; line-height:1; color:var(--gold); opacity:0; transform:scale(.4) rotate(-12deg); transition:opacity .8s .2s, transform .9s .2s cubic-bezier(.2,1.4,.4,1); }
.testimonial.drawn::before{ opacity:.18; transform:none; }
.pressed{ animation:press .35s var(--ease); }
@keyframes press{ 50%{ transform:scale(.98); } }

/* Story */
.story-media{ overflow:hidden; }
.story-media img{ transform:scale(1.12); will-change:transform; transition:transform .2s linear; }
.story-text .eyebrow, .story-text h2, .story-text p, .story-stats > div{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.motion-on .story-text:not(.drawn) .story-stats > div{ opacity:0; transform:translateY(16px); }
.story-text.drawn .story-stats > div:nth-child(2){ transition-delay:.12s; }
.story-text.drawn .story-stats > div:nth-child(3){ transition-delay:.24s; }

/* Product cards: image wipe-in, tilt, shine */
.motion-on .img-reveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.motion-on .img-reveal.is-in{ clip-path:inset(0 0 0 0); }
.motion-on .img-reveal img{ transform:scale(1.25); transition:transform 1.4s var(--ease); }
.motion-on .img-reveal.is-in img{ transform:scale(1); }
.motion-on .product-card:hover .img-reveal.is-in img{ transform:scale(1.08); }
.product-card{ transform-style:preserve-3d; will-change:transform; transition:transform .5s var(--ease), border-color .4s, box-shadow .5s; position:relative; }
.product-card:hover{ box-shadow:0 30px 60px rgba(0,0,0,.45); }
.card-shine{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(233,207,140,.16), transparent 45%); }
.product-card:hover .card-shine{ opacity:1; }
.product-badge{ animation:badge-glint 3.5s 2s infinite; }
@keyframes badge-glint{ 0%,85%,100%{ filter:none; } 90%{ filter:brightness(1.35); } }
.price-now{ transition:color .3s; }
.product-card:hover .price-now{ color:var(--gold-bright); }

/* Magnetic buttons + shimmer sweep */
.btn.magnetic{ transition:transform .35s cubic-bezier(.2,1.4,.4,1), background .3s, color .3s, box-shadow .3s; }
.btn-primary::before{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); pointer-events:none; }
.btn-primary:hover::before{ animation:sweep .8s var(--ease); }
.btn-primary.is-loading::before{ animation:spin .7s linear infinite; }
@keyframes sweep{ to{ left:130%; } }

/* Fly to cart */
.fly-ghost{ position:fixed; z-index:500; object-fit:cover; pointer-events:none; box-shadow:0 12px 30px rgba(0,0,0,.4); }
.cart-bump{ animation:cart-bump .6s cubic-bezier(.2,1.6,.4,1); }
.cart-bump .cart-count{ animation:badge-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes cart-bump{ 30%{ transform:scale(1.25) rotate(-8deg); } 60%{ transform:scale(.95) rotate(4deg); } }

/* Links + nav micro-interactions */
.main-nav a{ transition:color .25s, transform .25s var(--ease); }
.main-nav a:hover{ transform:translateY(-1px); }
.cart-link svg, .notif-bell-btn svg{ transition:transform .3s var(--ease); }
.cart-link:hover svg{ transform:translateY(-2px) rotate(-6deg); }

/* Modals + popups: springier entrance */
.modal-backdrop .modal-box{ transition:transform .55s cubic-bezier(.2,1.25,.4,1), opacity .4s; }

.motion-off .hero-bubbles, .motion-off .scroll-progress{ display:none; }