/* ---- tokens ---- */
:root{
  --accent:#B08165; --accent-dk:#8A6249; --accent-rgb:176,129,101; --ink:#241C18; --muted:#6B5D55;
  --wash:#FBF6F1; --line:#E8DDD3; --white:#fff; --ok:#1F7A4C; --ok-wash:#DFF3E4; --sale:#B23A2F;
  --max:1120px; --r:14px;
  --en:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Alvi Nastaleeq","Noto Naskh Arabic","Urdu Typesetting",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{margin:0;font-family:var(--en);color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dk)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ---- urdu ---- */
/* Every Urdu element gets real RTL: direction, alignment and the Urdu face.
   direction:rtl also matters for the bidi algorithm — the Urdu copy embeds Latin
   words (Niacinamide, Vitamin C, SPF 15) which order incorrectly without it. */
[dir="rtl"],.ur,.ur-block{direction:rtl;text-align:right;font-family:var(--ur);
  line-height:2.35;font-size:1.02em}
.ur-block{margin-top:14px;padding:14px 16px;background:var(--wash);
  border-right:3px solid var(--accent);border-radius:8px}

/* ---- bilingual pairs: stacked on phones, side by side on wide screens ---- */
.bi{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){
  .bi{grid-template-columns:1fr 1fr;gap:30px;align-items:start}
  .bi>.ur-block{margin-top:0}
  .bi>.bi-en>:first-child{margin-top:0}
}
.ur-block p{margin:0 0 8px}
.ur-block p:last-child{margin-bottom:0}
.ur-block ul{margin:0;padding:0 20px 0 0;list-style:none}
.ur-block li{margin:0 0 6px;position:relative;padding-right:16px}
.ur-block li::before{content:"•";position:absolute;right:0;color:var(--accent)}

/* ---- topbar / header ---- */
.topbar{background:var(--ink);color:#F3E9E0;font-size:13.5px}
.topbar .wrap{display:flex;gap:14px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.topbar a{color:#F3E9E0;text-decoration:none;font-weight:600}
.topbar .dot{opacity:.45}
header.site{border-bottom:1px solid var(--line);background:var(--white);
  position:sticky;top:0;z-index:40}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .mark{width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dk));
  color:#fff;display:grid;place-items:center;font-weight:700;letter-spacing:.5px;font-size:14px}
.logo b{display:block;font-size:16.5px;letter-spacing:-.2px;line-height:1.2}
.logo span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.hdr-cta{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.logo{min-width:0}
.logo b,.logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:520px){
  .hdr-cta .btn{padding:11px 14px;font-size:14px}
  .hdr-cta .btn-primary{display:none}
  .logo b{font-size:15px}
  header.site .wrap{gap:8px}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font:inherit;font-weight:650;text-decoration:none;line-height:1;transition:.15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-wa{background:#25D366;color:#08301A}
.btn-wa:hover{filter:brightness(.94)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-lg{padding:16px 26px;font-size:17px;width:100%}

/* ---- hero ---- */
.hero{padding:26px 0 10px}
.hero-grid{display:grid;gap:26px;grid-template-columns:1fr}
.hero-grid>*{min-width:0}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1fr;gap:40px;align-items:start}}
.gallery{position:relative}
.gallery .main{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;aspect-ratio:1/1}
.gallery .main img{width:100%;height:100%;object-fit:contain;background:var(--wash)}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.thumbs button{flex:0 0 66px;height:66px;border-radius:9px;border:2px solid var(--line);
  background:var(--wash);padding:0;overflow:hidden;cursor:pointer}
.thumbs button[aria-selected="true"]{border-color:var(--accent)}
.thumbs img{width:100%;height:100%;object-fit:cover}

h1{font-size:clamp(24px,4.6vw,33px);line-height:1.22;margin:0 0 6px;letter-spacing:-.4px}
.sub{color:var(--muted);margin:0 0 14px;font-size:15.5px}
.brandline{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dk);font-weight:700;margin-bottom:8px}
.pricebox{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0}
.price{font-size:32px;font-weight:750;letter-spacing:-.5px}
.was{color:var(--muted);text-decoration:line-through;font-size:17px}
.save{background:#FDEBE8;color:var(--sale);font-weight:700;font-size:13px;
  padding:5px 10px;border-radius:999px}

/* ---- shades ---- */
.field{margin:18px 0}
.field>label,.lbl{display:block;font-weight:650;font-size:14px;margin-bottom:8px}
.shades{display:flex;gap:10px;flex-wrap:wrap}
.shade{cursor:pointer}
.shade input{position:absolute;opacity:0;pointer-events:none}
.shade span{display:flex;align-items:center;gap:8px;border:2px solid var(--line);
  border-radius:999px;padding:6px 14px 6px 6px;font-size:14px;font-weight:600;transition:.15s}
.shade i{width:24px;height:24px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.shade input:checked+span{border-color:var(--accent);background:var(--wash)}
.shade input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

.qtyrow{display:flex;align-items:center;gap:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty button{width:42px;height:44px;border:0;background:var(--wash);font-size:19px;cursor:pointer;color:var(--ink)}
.qty input{width:52px;height:44px;border:0;text-align:center;font:inherit;font-weight:650;
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- trust ---- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 6px}
.trust div{background:var(--wash);border:1px solid var(--line);border-radius:10px;
  padding:11px 8px;text-align:center;font-size:12.5px;font-weight:600;line-height:1.4}
.trust b{display:block;font-size:15px;color:var(--accent-dk)}

/* ---- sections ---- */
section{padding:34px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
h2{font-size:clamp(20px,3.4vw,26px);margin:0 0 4px;letter-spacing:-.3px}
h2+.h2ur{font-family:var(--ur);direction:rtl;text-align:right;color:var(--accent-dk);
  font-size:19px;margin:0 0 16px;line-height:2}
/* Section headings: stacked on phones, English left / Urdu right on one row
   once there is width for both. Baseline alignment keeps the two scripts
   sitting on the same line despite very different line-heights. */
.sechead{display:block}
@media(min-width:900px){
  .sechead{display:flex;align-items:baseline;justify-content:space-between;
    gap:26px;margin-bottom:16px}
  .sechead>h2{margin-bottom:0}
  .sechead>.h2ur{margin-bottom:0;flex:0 1 auto}
  .sechead.center{justify-content:center;gap:16px}
  .sechead.center>h2{text-align:left}
}
.lead{font-size:16.5px;color:#3B322C;margin:0 0 4px}

.cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:#fff}
.card h3{margin:0 0 6px;font-size:16.5px;color:var(--accent-dk)}
.card p{margin:0;font-size:15px;color:#42392F}
.card .ur{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:15px;color:var(--muted)}

/* ---- paired bilingual lists ----------------------------------------------
   Each <li> is one grid row holding both languages, so item N in English and
   item N in Urdu always sit on the same line. Two side-by-side lists cannot do
   this: Urdu needs a far taller line-height and either column may wrap. */
.paired{list-style:none;margin:0;padding:0;counter-reset:s;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.paired>li{display:grid;grid-template-columns:1fr;gap:2px;
  border-bottom:1px solid var(--line)}
.paired>li:last-child{border-bottom:0}
.paired .p-en{padding:12px 16px;font-size:15.5px}
.paired .p-ur{direction:rtl;text-align:right;font-family:var(--ur);
  line-height:2.15;font-size:15.5px;background:var(--wash);padding:10px 16px;
  border-right:3px solid var(--accent)}
@media(min-width:900px){
  .paired>li{grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
  .paired .p-en{padding:14px 22px 14px 18px}
  /* column flex so justify-content controls the VERTICAL axis only. Using a row
     flex here is a trap: in an RTL container flex-end resolves to the LEFT edge,
     which silently left-aligns the Urdu. text-align:right stays authoritative. */
  .paired .p-ur{padding:12px 20px;display:flex;flex-direction:column;
    justify-content:center}
}
/* numbered variant keeps the step badge */
ol.paired .p-en{counter-increment:s;position:relative;padding-left:52px}
ol.paired .p-en::before{content:counter(s);position:absolute;left:16px;top:12px;
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700}
@media(min-width:900px){ol.paired .p-en{padding-left:58px}
  ol.paired .p-en::before{left:18px;top:50%;transform:translateY(-50%)}}
/* bulleted variant — flex so the dot tracks the first text line rather than
   being positioned against the padding box, which drifts when text wraps */
ul.paired .p-en{display:flex;gap:12px;padding-left:18px}
ul.paired .p-en::before{content:"";flex:0 0 5px;height:5px;border-radius:50%;
  background:var(--accent);margin-top:.62em}

ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 0 40px;margin:0 0 12px;font-size:15.5px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:27px;height:27px;
  border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:13.5px;font-weight:700}

table.spec{width:100%;border-collapse:collapse;font-size:15px}
table.spec th,table.spec td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{width:42%;font-weight:650;background:var(--wash)}
table.spec .speclbl{display:block}
table.spec .urlbl{display:block;font-family:var(--ur);direction:rtl;font-weight:400;
  font-size:14px;color:var(--muted);line-height:1.9}
/* Wide screens: both labels share one row, English left, Urdu right, which takes a
   whole line out of all 12 rows. space-between is safe here because .speclbl itself is
   LTR -- only the Urdu span inside it is RTL. */
@media(min-width:760px){
  table.spec .speclbl{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
  table.spec .urlbl{display:inline;line-height:1.75;white-space:nowrap}
}

details.inci{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--wash)}
details.inci summary{cursor:pointer;font-weight:650}
details.inci p{font-size:13px;color:var(--muted);word-break:break-word;margin:12px 0 0;line-height:1.8}

.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:650;font-size:15.5px;
  list-style:none;display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q-en{grid-column:1}
.faq summary .q-ur{grid-column:1;direction:rtl;text-align:right;font-family:var(--ur);
  font-weight:400;font-size:15px;line-height:2;color:var(--accent-dk)}
.faq summary::after{content:"+";font-size:21px;color:var(--accent);line-height:1;
  grid-column:2;grid-row:1/span 2;align-self:center}
@media(min-width:900px){
  /* question row mirrors the answer grid: English left, Urdu right, marker last */
  .faq summary{grid-template-columns:1fr 1fr auto;gap:0 26px}
  .faq summary .q-ur{grid-column:2}
  .faq summary::after{grid-column:3;grid-row:1;align-self:baseline}
}
.faq .a.bi{padding:0 18px 16px}
@media(min-width:900px){.faq .a.bi{gap:26px}}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 18px 16px;font-size:15px;color:#42392F}

.warn{background:#FFF6ED;border:1px solid #F0D9BE;border-radius:var(--r);padding:15px 17px;font-size:15px}

/* ---- order form ---- */
#order{background:var(--wash);border-top:1px solid var(--line)}
.formcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;
  max-width:640px;margin:0 auto;box-shadow:0 2px 18px rgba(60,40,25,.05)}
.formgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.formgrid .half{grid-column:span 1}.formgrid{grid-template-columns:1fr 1fr}
  .formgrid .full{grid-column:1/-1}}
label.f{display:block;font-weight:650;font-size:14px;margin-bottom:6px}
label.f .req{color:var(--sale)}
input.t,textarea.t,select.t{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
input.t:focus,textarea.t:focus,select.t:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea.t{min-height:78px;resize:vertical}
/* "What you're ordering" — product choices, deliberately set apart from the
   name/address fields above so the two groups don't read as one long form. */
.orderblock{border:1px solid var(--accent);border-radius:12px;
  background:var(--wash);padding:14px 16px 16px}
.ob-head{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-dk);margin-bottom:12px;display:flex;align-items:baseline;
  justify-content:space-between;gap:14px}
.ob-head .ur{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  line-height:1.7}
.ob-fields{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.ob-fields{grid-template-columns:1fr 1fr}}
/* too narrow for the label and its Urdu side by side — stack them instead of
   letting both wrap into a ragged two-line header */
@media(max-width:619px){
  .ob-head{display:block}
  .ob-head .ur{display:block;margin-top:1px}
}
.orderblock .t{background:#fff}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.summary{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:4px 0 2px}
.summary div{display:flex;justify-content:space-between;gap:12px;font-size:15px;
  padding:4px 0;align-items:baseline}
.summary div>span:last-child{white-space:nowrap;flex:0 0 auto}
.summary .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;font-weight:750;font-size:18px}
.err{background:#FDECEA;border:1px solid #F3C0BA;color:#8C2F26;border-radius:10px;
  padding:11px 14px;font-size:14.5px;margin-bottom:14px}
.hint{font-size:13px;color:var(--muted);margin-top:6px}
/* Inline Urdu inside labels, hints and shade pills: the 2.35 line-height used
   for Urdu paragraphs inflates the line box and shunts the Latin text around,
   so tighten it where Urdu sits beside English on one line. */
/* spacing between the English label and its Urdu, done with margin rather
   than a "/" character — a separator typed at the start of an RTL run is
   reordered by the bidi algorithm and lands on the far side of the Urdu */
label.f .ur,.hint .ur,.shade .ur{line-height:1.5;font-size:.97em}
label.f .ur{margin-inline-start:8px}
/* the phone hint spans both columns, so both languages fit on one line:
   English left, Urdu right, wrapping to two lines only if truly cramped */
.hint-row{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-top:-6px}
.hint-row .ur{display:inline}

/* ---- footer ---- */
footer.site{background:var(--ink);color:#CFC3BA;padding:34px 0 26px;font-size:14.5px}
footer.site a{color:#EADFD6;text-decoration:none}
footer.site a:hover{text-decoration:underline}
.fgrid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.fgrid{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:980px){.fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
footer.site h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:9px}
.fnet{border-top:1px solid #3A2E27;margin-top:26px;padding-top:18px}
.fnet ul{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:760px){.fnet ul{grid-template-columns:1fr 1fr;gap:9px 30px}}
.fnet li{margin:0}
.fnet .tag{color:#9C8D84;margin-inline-start:8px}

.fbot{border-top:1px solid #3A2E27;margin-top:26px;padding-top:16px;font-size:13px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#9C8D84}

/* ---- sticky mobile bar ---- */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
  border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:10px;align-items:center;
  box-shadow:0 -3px 16px rgba(0,0,0,.07)}
.stickybuy .p{font-weight:750;font-size:17px;white-space:nowrap}
.stickybuy .btn{flex:1;padding:14px 16px}
@media(min-width:900px){.stickybuy{display:none}}
@media(max-width:899px){body{padding-bottom:74px}}

.prose h2{margin-top:26px}
.prose p,.prose li{font-size:15.5px;color:#3B322C}
.prose ul{padding-left:20px}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   Written for a 90%-mobile audience on cheap Android hardware, so:

   - Only transform and opacity are animated. Both are composited on the GPU
     and skip layout and paint entirely. Animating box-shadow, height, top or
     width instead would repaint on every frame and is what makes a phone
     stutter.
   - Nothing is animated on scroll position. Scroll handlers run on the main
     thread and fight the browser's own scrolling; IntersectionObserver fires
     once per element, off the critical path, and app.js unobserves it after.
   - Looping animations (the badge shine, the button breathing) only run while
     their element is on screen. An infinite animation on a element scrolled
     out of view keeps a compositor layer alive and quietly drains battery.
   - Horizontal slide is desktop-only. On a narrow screen a translateX can
     push the document wider than the viewport and hand the user a sideways
     scroll -- the same 473px-vs-375px bug this page already had once.
   - Every hover effect has an :active twin. On touch there is no hover, and
     what hover there is gets stuck on after a tap.
   ========================================================================== */

/* The hidden state is applied only under .js-anim, which app.js sets on <html>.
   If the script is slow, blocked or broken, none of this applies and the page
   renders exactly as it does today. Content is never hidden behind JS. */
.js-anim .rv{opacity:0;transform:translate3d(0,14px,0)}
.js-anim .rv.in{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}

/* Desktop only: English enters from the left, Urdu mirrors from the right, so
   motion runs with the reading direction instead of against it. */
@media(min-width:900px){
  .js-anim .rv-l{transform:translate3d(-18px,0,0)}
  .js-anim .rv-r{transform:translate3d(18px,0,0)}
  .js-anim .rv-l.in,.js-anim .rv-r.in{transform:none}
}

/* Hero stagger. Delays are on the transition, not separate keyframes, so the
   whole group costs one compositor pass. */
.js-anim .hero-copy .rv.in{transition-delay:var(--d,0ms)}

/* Shine across the discount badge -- the "flash", as a gleam rather than a
   blink. .save is overflow-hidden and the sweep is a single translateX on a
   pseudo-element, so nothing reflows. Runs only while .lit is on. */
.save{position:relative;overflow:hidden}
.save::after{content:"";position:absolute;top:0;left:0;width:65%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translate3d(-160%,0,0)}
.save.lit::after{animation:sweep 4.2s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translate3d(-160%,0,0)}100%{transform:translate3d(320%,0,0)}}

/* Order button breathing. A scaled ring on a pseudo-element, not a box-shadow,
   so it composites. app.js removes .lit once the customer starts filling in the
   form -- nagging someone who is already converting is just noise. */
/* The order CTA. A sheen sweeping across the face reads as more deliberate than the
   ring that was here before, without adding a second loop: one animation, transform
   only, and app.js parks it when the button scrolls away and drops it entirely once
   the customer starts filling the form.
   The lift and the deeper shadow are behind hover:hover -- on touch there is no
   hover, and the state it does synthesise sticks after a tap. :active carries the
   touch case instead.
   Shadow uses rgba(var(--accent-rgb)) rather than color-mix(): color-mix needs
   Chrome 111+, and a real share of this audience is on older Android. */
.btn-primary{position:relative;overflow:hidden;
  box-shadow:0 8px 22px rgba(var(--accent-rgb),.30);
  transition:transform .22s cubic-bezier(.19,1,.22,1),background .2s ease,box-shadow .25s ease}
.btn-primary::after{content:"";position:absolute;top:0;left:0;width:38%;height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translate3d(-140%,0,0) skewX(-18deg)}
.btn-primary.lit::after{animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%{transform:translate3d(-140%,0,0) skewX(-18deg)}
  55%,100%{transform:translate3d(300%,0,0) skewX(-18deg)}}

.btn-primary .arw{font-style:normal;transition:transform .3s cubic-bezier(.19,1,.22,1)}
.btn-primary:active{transform:translateY(-1px)}
@media(hover:hover){
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(var(--accent-rgb),.40)}
  .btn-primary:hover .arw{transform:translateX(6px)}
}

/* Order total: flashes when it changes, so the customer sees their edit land.
   Fades a tinted overlay rather than animating background-color -- a colour
   animation repaints every frame, and the whole point of this layer is that
   nothing does. */
#sumtot{position:relative;border-radius:6px}
#sumtot::after{content:"";position:absolute;inset:-4px -7px;border-radius:6px;
  background:var(--ok-wash);opacity:0;pointer-events:none;z-index:-1}
#sumtot.flash::after{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

/* Shade swatches and thumbnails: :active carries the touch case. */
.shades button,.thumbs button{transition:transform .16s ease,box-shadow .16s ease}
.shades button:active,.thumbs button:active{transform:scale(.93)}
@media(hover:hover){
  .shades button:hover,.thumbs button:hover{transform:scale(1.06)}
}
#mainimg{transition:opacity .22s ease}
#mainimg.swap{opacity:.35}

/* WhatsApp: slow, low-contrast glow. Opacity only. */
.btn-wa.lit::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:#25D366;opacity:0;animation:glow 3.4s ease-in-out infinite;pointer-events:none}
.btn-wa{position:relative;overflow:hidden}
@keyframes glow{0%,100%{opacity:0}50%{opacity:.16}}

/* FAQ chevron. The panel itself is left alone: <details> cannot animate its own
   height without JS measuring it, and that is layout work on every frame. */
.faq summary::after{transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(180deg)}

/* An OS-level accessibility setting, sometimes set for medical reasons.
   Honour it completely rather than just shortening the durations. */
@media(prefers-reduced-motion:reduce){
  .js-anim .rv,.js-anim .rv.in{opacity:1!important;transform:none!important;transition:none!important}
  .save.lit::after,.btn-primary.lit::after,.btn-wa.lit::after{animation:none!important}
  .btn-primary,.btn-primary .arw{transition:none!important;transform:none!important}
  .flash{animation:none!important}
  .shades button,.thumbs button,#mainimg,.faq summary::after{transition:none!important}
}