/* Devanagari face for the header's periodic "पद्मोरा" — the rest of the site's
   type (Marcellus/Jost) has no Devanagari glyphs, so this loads only the one
   family actually needed for that. Rozha One is a serif display face (same
   register as Marcellus) rather than a plain-sans UI face, so the Marathi
   state reads as considered branding, not a fallback. */
/* Self-hosted type (was Google Fonts): same files, served from this site with a year of caching, so no extra
   connections to another host before the first text can be drawn. Jost is one variable file covering 300-700. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/marcellus-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rozha One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/rozha-mr.woff2) format('woff2');unicode-range:U+926,U+92a,U+92e,U+930,U+93e,U+94b,U+94d;}

:root{
  /* Padmora palette v2 — revised after feedback that v1's olive-forward
     accent read dull and buried the pink. Pink is now the dominant
     interactive color (buttons/links/icons); green is demoted to a hover-
     only accent (a "petal → leaf" moment on primary buttons, see
     .btn-primary:hover below) rather than a base UI color. Sampled the
     actual logo artwork's petal/leaf tones as a starting point, then
     darkened/saturated where the raw sample was too light or too muddy
     for UI duty. --ink stays a neutral dark (readable body text), everything
     else leans into rose/pink so "pink everywhere" doesn't fight legibility. */
  --ivory:#FFF0E6; --ivory-deep:#FCE8D9; --maroon:#AD3B5C; --maroon-deep:#7A2740;
  --gold:#B87F55; --gold-soft:#D9A97C; --teal:#7EA043; --blush:#F2B9BB;
  --ink:#3D2229; --ink-soft:#8C5A63; --white:#FFFFFF; --shadow:0 10px 30px rgba(61,34,41,0.12);
  --font-display:'Marcellus', serif; --font-body:'Jost', sans-serif;
  /* Reused everywhere the brand's outlined-lotus motif appears (page banners,
     the hero separator, etc.) so every instance stays visually identical. */
  --lotus-outline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23F2B9BB' stroke-width='1.1'%3E%3Cpath d='M20 34 C16 26 15 17 20 6 C25 17 24 26 20 34 Z'/%3E%3Cpath d='M20 32 C12 27 8 20 10 12 C17 15 20 22 20 32 Z'/%3E%3Cpath d='M20 32 C28 27 32 20 30 12 C23 15 20 22 20 32 Z'/%3E%3Cpath d='M20 30 C8 27 3 19 6 10 C14 14 19 21 20 30 Z' opacity='0.6'/%3E%3Cpath d='M20 30 C32 27 37 19 34 10 C26 14 21 21 20 30 Z' opacity='0.6'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0;}
/* Responsiveness safety net — every genuinely-scrollable-on-purpose element
   (category/reel rails, admin tables) scrolls on its OWN axis via its own
   overflow-x:auto, so clipping it at the document root here never hides
   anything intentional; it only ever catches an accidental overflow.
   min-height uses the dvh/svh pair so iOS Safari's address-bar show/hide
   doesn't leave a gap or clip content the way a bare 100vh does — vh is a
   safe fallback for browsers that don't know dvh yet (an unsupported value
   is ignored, not applied, so this is a pure upgrade, no regression). */
/* overflow-x:hidden lives on <html> only, never on <body> — setting it on
   body too (as this used to) makes body a second, nested scroll container,
   and per spec, declaring overflow-x without overflow-y forces overflow-y
   to 'auto' as well. That nested auto-scroll container is what silently
   broke position:sticky on .site-header (and anything else sticky) — the
   header stuck relative to body's own scrollport, not the real page
   viewport, so it just scrolled away like a normal element. One axis on
   the true root element is enough to catch accidental overflow; body
   doesn't need its own copy. */
html{overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--ivory);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select{font-family:inherit;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--maroon-deep);}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.container{max-width:1240px;margin:0 auto;padding:0 28px;width:100%;}
main{flex:1;animation:pageFadeIn .6s ease;}
/* The footer must not sit high up while a page is still filling in (it then jumped down when the content arrived): every shop page holds at least 60% of the screen. */
body:not([data-page="admin.html"]) main{min-height:60vh;}
/* the footer is drawn by a script a moment after the page: hold its place so it does not appear to jump when it arrives */
body:not([data-page="admin.html"]) #site-footer{min-height:300px;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

.zari-border{height:14px;position:relative;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 7c4-7 10-7 14 0s10 7 14 0 10-7 14 0 10 7 14 0' fill='none' stroke='%23B87F55' stroke-width='1.1' opacity='0.75'/%3E%3Cg fill='none' stroke='%23B87F55' stroke-width='1'%3E%3Cpath d='M7 10.3 C4.3 9 4.3 5 7 3.7 C9.7 5 9.7 9 7 10.3 Z'/%3E%3Cpath d='M7 7 L7 10.3 M7 7 L7 3.7' opacity='0.55'/%3E%3Cpath d='M21 10.3 C18.3 9 18.3 5 21 3.7 C23.7 5 23.7 9 21 10.3 Z'/%3E%3Cpath d='M35 10.3 C32.3 9 32.3 5 35 3.7 C37.7 5 37.7 9 35 10.3 Z'/%3E%3Cpath d='M49 10.3 C46.3 9 46.3 5 49 3.7 C51.7 5 51.7 9 49 10.3 Z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat-x;background-size:56px 14px;background-position:center;opacity:.85;}
.zari-border::after{content:'';position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent);animation:zariShine 4s ease-in-out infinite;}

/* ---------- Decorative lotus-trail side borders (wide screens only) ---------- */
body::before, body::after{
  content:'';
  position:fixed;
  top:0; bottom:0;
  width:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='70' viewBox='0 0 22 70'%3E%3Cpath d='M11 26 C9.5 20 9 14.5 11 10 C13 14.5 12.5 20 11 26 Z' fill='%23B87F55' fill-opacity='0.16' stroke='%23B87F55' stroke-width='0.7' opacity='0.65'/%3E%3Cpath d='M11 25 C7.8 21.5 6.3 17.5 6.8 13.5 C10 16.3 11 20 11 25 Z' fill='%23B87F55' fill-opacity='0.13' stroke='%23B87F55' stroke-width='0.6' opacity='0.55'/%3E%3Cpath d='M11 25 C14.2 21.5 15.7 17.5 15.2 13.5 C12 16.3 11 20 11 25 Z' fill='%23B87F55' fill-opacity='0.13' stroke='%23B87F55' stroke-width='0.6' opacity='0.55'/%3E%3Cpath d='M10.6 24 C7.2 22 5 19.3 5.3 16.3 C8.1 17.9 9.9 20.6 10.6 24 Z' fill='%23B87F55' fill-opacity='0.1' stroke='%23B87F55' stroke-width='0.5' opacity='0.45'/%3E%3Cpath d='M11.4 24 C14.8 22 17 19.3 16.7 16.3 C13.9 17.9 12.1 20.6 11.4 24 Z' fill='%23B87F55' fill-opacity='0.1' stroke='%23B87F55' stroke-width='0.5' opacity='0.45'/%3E%3Cpath d='M11 22.5 C9.4 21.2 10 19.4 11 19.4 C12 19.4 12.6 21.2 11 22.5 Z' fill='%23AD3B5C' fill-opacity='0.5' opacity='0.5'/%3E%3Ccircle cx='11' cy='27.2' r='0.9' fill='%23B87F55' opacity='0.5'/%3E%3Cpath d='M11 28 C9.3 36 12.7 42 11 50' fill='none' stroke='%23B87F55' stroke-width='0.5' opacity='0.25'/%3E%3Ccircle cx='11' cy='52' r='1' fill='%23B87F55' opacity='0.35'/%3E%3Ccircle cx='11.5' cy='61' r='0.6' fill='%23AD3B5C' opacity='0.3'/%3E%3C/svg%3E");
  background-repeat:repeat-y;
  background-position:top center;
  pointer-events:none;
  opacity:0;
  z-index:5;
  animation:embFadeIn 1.2s ease forwards, embDrift 46s linear infinite;
  animation-delay:.2s, 1.4s;
}
body::before{left:0;}
body::after{right:0;transform:scaleX(-1);}
@media (max-width:1360px){ body::before, body::after{ display:none; } }
/* The border is viewport-fixed, so it would otherwise draw over the footer
   as it scrolls into view — the footer's own opaque background sits above
   it (see z-index below) so the lotus trail stops at the footer's edge. */

/* ---------- Buffer / loading bar (shown during API calls, styled like a moving zari thread) ---------- */
.loader-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;overflow:hidden;opacity:0;transition:opacity .2s ease;pointer-events:none;}
.loader-bar.active{opacity:1;}
.loader-bar span{position:absolute;top:0;left:0;height:100%;width:26%;background:linear-gradient(90deg, transparent, var(--gold-soft), var(--gold), var(--maroon), transparent);animation:loomWeave 1s linear infinite;}

/* ---------- Inline spinner (used in loading states across pages) ---------- */
.zari-spinner{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid rgba(173,59,92,0.15);border-top-color:var(--maroon);animation:spin .7s linear infinite;vertical-align:middle;margin-right:10px;}
.loading-state{display:flex;align-items:center;justify-content:center;gap:2px;padding:30px 0;color:var(--ink-soft);font-size:13.5px;}
/* while the saree is loading, hold roughly the room it will fill, so the reviews and footer below do not jump down when it arrives */
#pdWrap:has(.loading-state){min-height:min(78vh,780px);}

/* ---------- Hover / interaction animations ---------- */
.btn{position:relative;overflow:hidden;}
.btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(110deg, transparent, rgba(255,255,255,0.35), transparent);transform:skewX(-15deg);transition:left .55s ease;z-index:2;}
@media (hover:hover) and (pointer:fine){ .btn:hover::after{left:130%;} }
@media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-2px);} }
@media (hover:hover) and (pointer:fine){ .btn-outline:hover::after{background:linear-gradient(110deg, transparent, rgba(173,59,92,0.12), transparent);} }

/* Two small two-line lotus buds bloom open on opposite corners (top-right / bottom-left)
   behind the label on hover, underneath the shine sweep. Both live on one ::before so a
   single scale animation makes them bloom outward from the button's center together.
   Stroke is cream/ivory at high opacity — primary buttons hover to green (see
   .btn-primary:hover), so the buds need to read clearly against that, not just
   against the resting pink. Sized up from the original 20px for visibility. */
.btn::before{content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF6EF' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF6EF' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:calc(100% - 8px) 5px, 8px calc(100% - 5px);
  background-size:26px 26px, 26px 26px;
  opacity:0;transform:scale(.35) rotate(-20deg);transform-origin:center;
  transition:opacity .45s ease, transform .6s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:0;}
@media (hover:hover) and (pointer:fine){ .btn:hover::before{opacity:.9;transform:scale(1) rotate(0deg);} }
.btn-gold::before{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2740' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2740' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E");}
@media (hover:hover) and (pointer:fine){ .btn-gold:hover::before{opacity:.65;} }

.product-card{transition:box-shadow .3s ease, transform .3s ease;}
.product-media{transition:transform .5s ease;}
@media (hover:hover) and (pointer:fine){ .product-card:hover .product-media{transform:scale(1.055);} }
.wishlist-toggle{transition:transform .25s ease, background .25s ease, border-color .25s ease;}
@media (hover:hover) and (pointer:fine){ .wishlist-toggle:hover{transform:scale(1.12);} }
@media (hover:hover) and (pointer:fine){ .wishlist-toggle:hover svg{animation:heartBeat .7s ease;} }
.wishlist-toggle.active svg{animation:heartPop .35s ease;}

.cat-item{transition:transform .3s ease;}
.cat-swatch{transition:transform .35s ease, box-shadow .35s ease;}
@media (hover:hover) and (pointer:fine){ .cat-item:hover .cat-swatch{transform:scale(1.07) rotate(-4deg);box-shadow:var(--shadow);} }

.swatch-dot{transition:transform .2s ease, border-color .2s ease;}
@media (hover:hover) and (pointer:fine){ .swatch-dot:hover{transform:scale(1.16);} }

.icon-btn{transition:background .2s ease, transform .2s ease;}
@media (hover:hover) and (pointer:fine){ .icon-btn:hover{transform:translateY(-2px);} }
.badge-count{transition:transform .2s ease;}
@media (hover:hover) and (pointer:fine){ .icon-btn:hover .badge-count{transform:scale(1.15);} }

.main-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s ease;}
.main-nav a.active::after{width:100%;}
@media (hover:hover) and (pointer:fine){ .main-nav a:hover::after{width:100%;} }

.footer-grid ul li a{transition:color .2s ease, padding-left .2s ease;display:inline-block;}
@media (hover:hover) and (pointer:fine){ .footer-grid ul li a:hover{color:var(--gold-soft);padding-left:4px;} }

.product-badge.sale,.product-badge.new{animation:badgePulse 2.4s ease-in-out infinite;}

.occasion-card{transition:transform .4s ease;}
@media (hover:hover) and (pointer:fine){ .occasion-card:hover{transform:scale(1.02);} }
.occasion-card::before{transition:background .4s ease;}

.weave-card,.trousseau-card{transition:transform .3s ease, box-shadow .3s ease;}
@media (hover:hover) and (pointer:fine){ .weave-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} }

@keyframes pageFadeIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
@keyframes embFadeIn{ from{opacity:0;} to{opacity:0.9;} }
@keyframes embDrift{ from{background-position:top center;} to{background-position:top -280px center;} }
@keyframes zariShine{ 0%{left:-40%;} 55%{left:120%;} 100%{left:120%;} }
@keyframes loomWeave{ from{transform:translateX(-140%);} to{transform:translateX(480%);} }
@keyframes spin{ to{transform:rotate(360deg);} }
@keyframes heartBeat{ 0%,100%{transform:scale(1);} 30%{transform:scale(1.25);} 50%{transform:scale(0.95);} 70%{transform:scale(1.15);} }
@keyframes heartPop{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }
@keyframes badgePulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

/* #site-header/#site-footer start as empty <div>s in the page's own HTML —
   components.js only fills them in once it has loaded and run, which on a
   slow connection is long enough to notice as a bare, unstyled gap where the
   header should be. This reserves the header's real height and colors on the
   empty mount itself, so what's visible before the real markup lands is a
   correctly-colored, correctly-sized placeholder, not a blank flash. It has
   no effect once real content fills the div (that content's own layout takes
   over), and does nothing on the admin dashboard, whose shorter header isn't
   worth a second placeholder for. */
#site-header:empty{
  min-height:114px;   /* the real top bar (35px) + header (79px), so nothing jumps when they appear */
  background:linear-gradient(to bottom, var(--maroon-deep) 0 35px, rgba(250,245,236,0.96) 35px 100%);
}
@media (max-width:760px){ #site-header:empty{ min-height:98px; background:linear-gradient(to bottom, var(--maroon-deep) 0 35px, rgba(250,245,236,0.96) 35px 100%); } }
@media (max-width:429px){ #site-header:empty{ min-height:117px; background:linear-gradient(to bottom, var(--maroon-deep) 0 54px, rgba(250,245,236,0.96) 54px 100%); } }

/* Once components.js fills this mount div, collapse it out of the box tree
   entirely so .topbar and .site-header become direct flex items of <body>
   (which is display:flex;flex-direction:column — see body{} below), instead
   of grandchildren nested inside this wrapper. That nesting is exactly what
   silently breaks position:sticky on .site-header: a flex item that's a
   plain block containing a sticky descendant doesn't give the browser a
   stable enough containing block for sticky to compute against, so the
   header would just scroll away like a static element despite every sticky
   rule being correctly applied. display:contents removes the div's own box
   (so it can't do that) while leaving its children's own layout untouched —
   confirmed by isolated repro, not a guess. Scoped to :not(:empty) so the
   placeholder rule above still gets a real box to paint before JS runs. */
#site-header:not(:empty){display:contents;}

/* Topbar */
.topbar{background:var(--maroon-deep);color:var(--ivory-deep);font-size:12.5px;padding:8px 0;text-align:center;}
.topbar a{color:inherit;text-decoration:none;}
@media (hover:hover) and (pointer:fine){ .topbar a:hover{text-decoration:underline;} }

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(250,245,236,0.96);backdrop-filter:blur(6px);border-bottom:1px solid rgba(173,59,92,0.12);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1240px;margin:0 auto;gap:24px;}
.logo{font-family:var(--font-display);font-size:26px;color:var(--maroon);letter-spacing:.03em;display:flex;align-items:baseline;gap:9px;}
.logo-mark{height:38px;width:auto;align-self:center;flex-shrink:0;border-radius:3px;}
/* The wordmark cycles English -> Marathi -> English (see components.js).
   Both states are always in the DOM, stacked in the same grid cell — that
   makes the stage's own width the wider of the two permanently, in every
   browser, with no JS measuring involved, so .header-inner's flex layout
   (space-between) never reflows the nav links when the text underneath
   changes; only opacity crossfades, nothing shifts. */
.logo-text-stage{display:inline-grid;}
.logo-text-el{grid-area:1/1;align-self:center;opacity:0;transition:opacity .5s ease;pointer-events:none;}
.logo-text-el.active{opacity:1;}
.logo-text-el.lang-mr{font-family:'Rozha One','Marcellus',serif;font-size:1.08em;letter-spacing:.01em;}
@media (prefers-reduced-motion:reduce){ .logo-text-el{transition:none;} }
.admin-view-store{font-size:12.5px;color:var(--ink-soft);border:1px solid rgba(173,59,92,0.18);border-radius:20px;padding:7px 16px;transition:border-color .15s,color .15s;}
@media (hover:hover) and (pointer:fine){ .admin-view-store:hover{color:var(--maroon);border-color:var(--maroon);} }
.logo span.by-yashi{color:var(--gold);font-size:11px;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;}
@media (max-width:420px){ .logo span.by-yashi{display:none;} }
@media (max-width:480px){ .logo-mark{height:32px;} }
.main-nav{display:flex;gap:26px;}
.main-nav a{font-size:14px;letter-spacing:.03em;color:var(--ink);position:relative;padding:6px 0;}
.main-nav a.active{color:var(--maroon);}
@media (hover:hover) and (pointer:fine){ .main-nav a:hover{color:var(--maroon);} }
.main-nav a.active::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);}
.header-actions{display:flex;align-items:center;gap:4px;}
.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;transition:background .2s ease;}
@media (hover:hover) and (pointer:fine){ .icon-btn:hover{background:var(--blush);} }
.icon-btn svg{width:19px;height:19px;stroke:var(--maroon-deep);}
.badge-count{position:absolute;top:-2px;right:-2px;background:var(--gold);color:var(--maroon-deep);font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.account-chip{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 12px;border-radius:20px;border:1px solid rgba(173,59,92,0.2);}
.hamburger{display:none;width:38px;height:38px;align-items:center;justify-content:center;}
.hamburger svg{width:22px;height:22px;stroke:var(--maroon-deep);}
.mobile-nav{display:none;flex-direction:column;padding:0 28px 20px;gap:14px;}
.mobile-nav a{font-size:14px;}

/* Desktop "Collections" hover reveal — a plain CSS hover panel (and
   :focus-within for keyboard users tabbing to the link) rather than a JS
   click-toggle, since this is a nav reveal, not a form control. */
/* display:flex here (not just position:relative) matters: a plain <a> that's
   a direct child of .main-nav (display:flex) gets blockified by the flex
   spec, which is what lets its padding:6px 0 center it in the stretched row.
   The Collections <a> is one level deeper (inside this wrapper), so it never
   gets blockified and would otherwise sit noticeably higher than its
   siblings — centering it explicitly here fixes that regardless. */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%,-6px);min-width:240px;background:var(--white);border-radius:4px;box-shadow:var(--shadow);padding:8px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:70;}
.nav-item:focus-within .nav-dropdown{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
@media (hover:hover) and (pointer:fine){ .nav-item:hover .nav-dropdown{opacity:1;pointer-events:auto;transform:translate(-50%,0);} }
.nav-dropdown a{display:block;padding:10px 12px;border-radius:3px;text-align:center;transition:background .15s ease;}
@media (hover:hover) and (pointer:fine){ .nav-dropdown a:hover{background:var(--ivory);} }
.nav-dropdown a strong{display:block;font-size:13.5px;color:var(--ink);font-weight:500;}
.nav-dropdown a span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}

/* Mobile "Collections" accordion — same max-height transition pattern as the
   FAQ page's answer reveal, under its own class names since this is nav
   chrome, not FAQ content. */
.mobile-nav-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.mobile-nav-item a{font-size:14px;}
.mobile-nav-caret{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mobile-nav-caret svg{width:14px;height:14px;stroke:var(--maroon);transition:transform .2s ease;}
.mobile-nav-caret[aria-expanded="true"] svg{transform:rotate(180deg);}
.mobile-nav-dropdown-panel{flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.mobile-nav-dropdown-panel.open{max-height:220px;}
.mobile-nav-dropdown-panel a{display:block;padding:8px 0;text-align:center;border-top:1px solid rgba(173,59,92,0.1);}
.mobile-nav-dropdown-panel a:first-child{border-top:none;}
.mobile-nav-dropdown-panel a strong{display:block;font-size:13.5px;font-weight:500;}
.mobile-nav-dropdown-panel a span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}

/* Header, narrow phones (confirmed via layout audit: hamburger + logo +
   search/account/wishlist/cart icons genuinely don't fit side by side under
   ~400px at the CSS's original sizes — the icons were shrinking/deforming
   instead of the row reflowing). Icons keep flex-shrink:0 so they never
   distort; the logo and the logged-in account name shrink instead, since
   those are the parts that can lose size without losing function. Nothing
   here is hidden or removed — same icons, same links, same click targets,
   just smaller on the narrowest phones. */
.hamburger,.icon-btn,.logo-mark{flex-shrink:0;}
.account-chip{max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
@media (max-width:480px){
  .header-inner{gap:8px;}
  .header-actions{gap:2px;}
  .icon-btn,.hamburger{width:34px;height:34px;}
  .logo{font-size:20px;gap:6px;}
  .account-chip{max-width:70px;padding:6px 9px;gap:5px;font-size:12px;}
}
@media (max-width:360px){
  .header-inner{padding:14px 10px;}
  .icon-btn,.hamburger{width:30px;height:30px;}
  .icon-btn svg,.hamburger svg{width:17px;height:17px;}
  .logo{font-size:17px;}
  .logo-mark{height:26px;}
  /* Icon-only account pill on the very narrowest phones — the SVG has its
     own width/height attributes (unaffected by font-size), only the name
     text collapses, so the button still works exactly the same, just
     without a name label there's no room for. */
  .account-chip{font-size:0;max-width:none;padding:6px;gap:0;}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:2px;transition:all .25s ease;}
.btn-primary{background:var(--maroon);color:var(--ivory);}
/* Petal → leaf: the one deliberate spot green shows up as the main accent,
   not a base UI color — pink at rest, green the moment you interact. */
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{background:var(--teal);} }
.btn-outline{border:1px solid var(--maroon);color:var(--maroon);}
.btn-outline.wishlisted{background:var(--blush);border:1.5px solid var(--maroon);color:var(--maroon-deep);font-weight:700;}
@media (hover:hover) and (pointer:fine){ .btn-outline:hover{background:var(--maroon);color:var(--ivory);} }
.btn-gold{background:var(--gold);color:var(--maroon-deep);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:11.5px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* Page header banner */
.page-banner{background:linear-gradient(120deg,var(--ivory),var(--ivory-deep));padding:48px 0 34px;text-align:center;position:relative;overflow:hidden;}
.page-banner .container{position:relative;z-index:1;}
.page-banner h1{font-size:34px;}
.page-banner p{color:var(--ink-soft);margin-top:10px;font-size:14px;}


/* A fuller scatter of outlined lotus blooms — one large one via ::before,
   five more (varied size/position) layered on ::after — applies to every
   page that uses .page-banner with this one change. */
.page-banner::before,.page-banner::after{content:'';position:absolute;pointer-events:none;z-index:0;background-repeat:no-repeat;}
.page-banner::before{
  width:110px;height:110px;left:-18px;top:-16px;opacity:.3;transform:rotate(-14deg);
  background-image:var(--lotus-outline);
  background-size:110px 110px;
}
.page-banner::after{
  width:100%;height:100%;right:0;top:0;
  background-image:var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline);
  background-position:
    right 3% top 8px,
    right 16% bottom -10px,
    left 6% bottom -14px,
    left 22% top 4px,
    center bottom -6px,
    right 38% top -12px,
    left 40% bottom -22px,
    right 8% bottom 30%,
    left 12% top 30%;
  background-size:64px 64px, 46px 46px, 56px 56px, 30px 30px, 38px 38px, 26px 26px, 34px 34px, 42px 42px, 24px 24px;
  opacity:.24;
}
/* A toned-down version of the same decoration for mobile — the full 10-bloom
   desktop scatter reads as clutter on a narrow banner, but the banner should
   still carry the lotus motif the way the desktop version does, not go bare. */
@media (max-width:640px){
  .page-banner::before{ width:64px;height:64px;left:-10px;top:-8px;background-size:64px 64px; }
  .page-banner::after{
    background-image:var(--lotus-outline),var(--lotus-outline),var(--lotus-outline);
    background-position:right 4% top 6px, left 8% bottom -10px, right 14% bottom 22%;
    background-size:34px 34px, 26px 26px, 20px 20px;
  }
}

.promo-band{background:linear-gradient(120deg,var(--maroon-deep),var(--maroon) 60%,#D9749A);color:var(--ivory);text-align:center;padding:56px 28px;display:flex;flex-direction:column;align-items:center;}
.promo-band h2{color:var(--ivory);font-size:32px;}
.promo-band p{color:var(--gold-soft);margin:12px 0 22px;font-size:14px;}
.breadcrumb{font-size:12px;color:var(--ink-soft);margin-bottom:10px;}
@media (hover:hover) and (pointer:fine){ .breadcrumb a:hover{color:var(--maroon);} }

.section{padding:48px 0;}
.section-head{text-align:center;max-width:560px;margin:0 auto 36px;}
.section-head h2{font-size:30px;margin-top:8px;}
.section-sub{max-width:520px;margin:10px auto 0;color:var(--ink-soft);font-size:14px;line-height:1.6;}
.section-sub[hidden],.section-head .eyebrow[hidden]{display:none;}

/* Product grid & card (shop / home / product pages) */
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.result-count{font-size:13.5px;color:var(--ink-soft);}
.sort-select{border:1px solid rgba(173,59,92,0.25);padding:9px 14px;border-radius:2px;font-size:13px;background:var(--white);}

/* Custom-styled dropdown (used for the shop sort control) */
.custom-select{position:relative;min-width:210px;}
.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid rgba(173,59,92,0.25);padding:10px 14px;border-radius:2px;font-size:13px;background:var(--white);transition:border-color .2s ease;}
@media (hover:hover) and (pointer:fine){ .custom-select-trigger:hover{border-color:var(--maroon);} }
.custom-select-trigger svg{width:13px;height:13px;stroke:var(--maroon);flex-shrink:0;transition:transform .25s ease;}
.custom-select.open .custom-select-trigger svg{transform:rotate(180deg);}
.custom-select.open .custom-select-trigger{border-color:var(--maroon);}
.custom-select-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--white);
  border-radius:8px;box-shadow:var(--shadow);padding:6px;z-index:45;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.custom-select.open .custom-select-menu{opacity:1;transform:translateY(0);pointer-events:auto;}
.custom-select-option{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:11px 13px;font-size:13px;border-radius:5px;color:var(--ink);transition:background .15s ease, color .15s ease;}
@media (hover:hover) and (pointer:fine){ .custom-select-option:hover{background:var(--ivory);} }
.custom-select-option.active{color:var(--maroon-deep);font-weight:600;background:var(--blush);}
.custom-select-option .check-mark{opacity:0;color:var(--maroon);font-size:12px;}
.custom-select-option.active .check-mark{opacity:1;}
@media (max-width:560px){ .custom-select{min-width:0;} .custom-select-menu{right:0;left:0;min-width:0;} }

/* Order history action buttons */
.order-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center;}
.order-action-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:20px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:all .2s ease;border:1.5px solid transparent;}
.order-action-btn svg{width:14px;height:14px;flex-shrink:0;}
.order-action-btn.track{border-color:var(--teal);color:var(--teal);}
@media (hover:hover) and (pointer:fine){ .order-action-btn.track:hover{background:var(--teal);color:var(--ivory);transform:translateY(-1px);} }
.order-action-btn.cancel{border-color:rgba(173,59,92,0.3);color:var(--ink-soft);}
@media (hover:hover) and (pointer:fine){ .order-action-btn.cancel:hover{border-color:var(--maroon);color:var(--maroon);background:rgba(173,59,92,0.06);} }
.order-action-btn.return{border-color:var(--gold);color:#8a6a1f;}
@media (hover:hover) and (pointer:fine){ .order-action-btn.return:hover{background:var(--gold);color:var(--maroon-deep);transform:translateY(-1px);} }
.order-locked-note{font-size:11.5px;color:var(--ink-soft);font-style:italic;}

/* Post-delivery return request panel — expands inline under an order card */
.return-request-panel{margin-top:14px;padding:16px;border:1px solid rgba(201,162,39,0.35);background:rgba(201,162,39,0.06);border-radius:4px;}
.return-request-panel h4{font-family:var(--font-body);font-size:14px;font-weight:600;margin:0 0 4px;color:var(--ink);}
.return-item-list{margin:14px 0;display:flex;flex-direction:column;gap:8px;}
.return-item-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:9px 12px;background:var(--surface,#fff);border:1px solid rgba(173,59,92,0.1);border-radius:4px;cursor:pointer;}
.return-item-row input[type="checkbox"]{flex-shrink:0;width:16px;height:16px;accent-color:var(--maroon);}
.return-item-name{flex:1;}
.return-item-qty{font-size:11.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
.return-item-qty select{padding:3px 6px;font-size:12px;border-radius:3px;border:1px solid rgba(173,59,92,0.25);}
.return-photo-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.order-review-btn{font:inherit;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:10px 20px;border-radius:6px;border:1px solid var(--maroon);background:var(--maroon);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(122,39,64,0.22);transition:background .15s,transform .15s;}
.order-review-btn::before{content:'★';font-size:15px;line-height:1;}
.order-review-btn:focus-visible{background:var(--maroon-deep);transform:translateY(-1px);}
@media (hover:hover) and (pointer:fine){ .order-review-btn:hover{background:var(--maroon-deep);transform:translateY(-1px);} }
.order-item-row .order-review-btn{display:flex;width:fit-content;}
.order-reviewed{font-size:11.5px;color:var(--teal,#2f7d62);margin-left:8px;}
.order-review-form{margin:8px 0 12px;padding:14px;background:var(--ivory,#FFF0E6);border-radius:4px;}
.co-items{margin:0 0 12px;border:1px solid rgba(173,59,92,0.14);border-radius:8px;background:#fff;}
.co-item{display:flex;align-items:center;gap:12px;padding:10px 12px;}
.co-item + .co-item{border-top:1px solid rgba(173,59,92,0.1);}
.co-item-thumb{width:48px;height:62px;border-radius:4px;flex-shrink:0;background-size:cover !important;background-position:center !important;}
.co-item-info{flex:1;min-width:0;} .co-item-info strong{display:block;font-size:13.5px;font-weight:500;line-height:1.3;} .co-item-info small{font-size:12px;color:var(--ink-soft);}
.co-item-price{font-size:13.5px;font-weight:600;color:var(--maroon-deep);white-space:nowrap;}
.co-address{margin:18px 0 12px;padding:12px 14px;border:1px solid rgba(173,59,92,0.14);border-radius:8px;background:#fff;}
.co-address-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;}
.co-address-head button{font:inherit;font-size:12px;text-transform:none;letter-spacing:0;color:var(--maroon);text-decoration:underline;}
.co-address p{margin:0;font-size:13.5px;line-height:1.55;}
.co-item-controls{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap;}
.co-stepper button[disabled]{opacity:.35;cursor:not-allowed;}
.co-item-remove{font:inherit;font-size:12px;color:var(--maroon);text-decoration:underline;}
.co-coupon{margin:0 0 14px;}
.co-coupon-row{display:flex;gap:8px;} .co-coupon-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(173,59,92,0.25);border-radius:4px;font:inherit;font-size:13px;background:#fff;}
.co-coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:4px;background:rgba(58,140,80,0.1);color:#2E7D45;font-size:13px;}
.co-coupon-applied button{font:inherit;font-size:12px;color:var(--maroon);text-decoration:underline;}
.order-confirm-copy{margin:6px 0 0;padding:5px 12px;border-radius:999px;border:1px solid var(--maroon);background:#fff;color:var(--maroon);font:inherit;font-size:12px;cursor:pointer;transition:background .2s ease,color .2s ease;}
.order-confirm-copy.copied{background:var(--maroon);color:#fff;}
@media (hover:hover) and (pointer:fine){ .order-confirm-copy:hover{background:var(--maroon);color:#fff;} }
.return-photo-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.return-photo-actions .btn[disabled]{opacity:.55;cursor:not-allowed;}
.return-photo-count{font-size:12px;color:var(--ink-soft);}
.return-photo-item{position:relative;}
.return-photo-thumb{width:72px;height:72px;}
.return-photo-remove{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;border:none;background:var(--maroon);color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3);padding:0;}
.cam-modal{position:fixed;inset:0;z-index:2100;background:rgba(18,10,12,.92);display:flex;align-items:center;justify-content:center;padding:16px;}
.cam-box{background:#120a0c;border-radius:10px;padding:12px;max-width:min(94vw,720px);width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;}
.cam-video{width:100%;max-height:68vh;border-radius:6px;background:#000;object-fit:contain;}
.cam-actions{display:flex;gap:10px;}
.cam-actions .btn:not(.btn-primary){color:#fff;border:1px solid rgba(255,255,255,.45);background:transparent;}
.btn[disabled]{opacity:.6;cursor:not-allowed;}
[id^="retSubmit-"]{white-space:nowrap;}
.return-photo-thumb{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid rgba(173,59,92,0.2);display:block;}
.admin-return-photo{width:110px;height:110px;transition:transform .15s ease;}
@media (hover:hover) and (pointer:fine){ .admin-return-photo:hover{transform:scale(1.04);} }

/* Product-page "add to bag" quantity stepper (shown once the item is in the
   bag) sits right next to the Wishlist button in .pd-actions — match the
   Wishlist .btn's own height so the two don't look mismatched. */
.cart-control-stepper{border-color:var(--maroon);height:49px;box-sizing:border-box;}
.cart-control-stepper button{color:var(--maroon-deep);font-weight:600;height:47px;}
.cart-control-stepper span{font-weight:600;color:var(--maroon-deep);}
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:flex-start;}
.shop-layout > *{min-width:0;}
.filters{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:22px;position:sticky;top:100px;}
.filter-group{border-bottom:1px solid rgba(173,59,92,0.1);padding:16px 0;}
.filter-group:first-child{padding-top:0;}
.filter-group:last-child{border-bottom:none;}
.filter-group h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;color:var(--maroon-deep);font-weight:600;font-family:var(--font-body);}
.filter-option{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:5px 0;color:var(--ink-soft);cursor:pointer;}
.filter-option input{accent-color:var(--maroon);}
.color-filter-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.12);}
.price-range{width:100%;accent-color:var(--maroon);}
.clear-filters{font-size:12px;color:var(--teal);margin-top:14px;text-decoration:underline;}
/* Occasion and Color are dropdowns: a heading you press to open a short list that scrolls on its own */
.filter-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:0;margin:0;background:none;border:0;cursor:pointer;text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--maroon-deep);font-weight:600;font-family:var(--font-body);}
.filter-toggle:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;border-radius:2px;}
.filter-count{color:var(--maroon);font-weight:700;letter-spacing:0;}
.filter-chev{width:16px;height:16px;flex:0 0 auto;stroke:var(--maroon);transition:transform .2s ease;}
.filter-collapsible.open .filter-chev{transform:rotate(180deg);}
.filter-collapsible .filter-options-scroll{display:none;margin-top:12px;max-height:230px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(173,59,92,.35) transparent;}
.filter-collapsible.open .filter-options-scroll{display:block;}
.filter-options-scroll::-webkit-scrollbar{width:6px;}
.filter-options-scroll::-webkit-scrollbar-thumb{background:rgba(173,59,92,.3);border-radius:3px;}
@media (prefers-reduced-motion:reduce){ .filter-chev{transition:none;} }
/* Computers: the filter column stays beside the sarees and scrolls on its own, so every filter is reachable without scrolling the
   whole page down to the end of the grid */
@media (min-width:981px){
  .shop-layout .filters{max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(173,59,92,.35) transparent;}
  .shop-layout .filters::-webkit-scrollbar{width:6px;}
  .shop-layout .filters::-webkit-scrollbar-thumb{background:rgba(173,59,92,.3);border-radius:3px;}
}
.search-page-input{width:100%;border:1px solid rgba(173,59,92,0.25);padding:11px 14px;border-radius:2px;font-size:13.5px;margin-bottom:14px;}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.product-card{background:var(--white);border-radius:3px;overflow:hidden;position:relative;box-shadow:0 1px 3px rgba(43,26,29,0.06);transition:box-shadow .3s ease, transform .3s ease;}
@media (hover:hover) and (pointer:fine){ .product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);} }
.product-media{aspect-ratio:3/4;position:relative;overflow:hidden;background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 24px);}
.product-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.35' stroke-width='1'%3E%3Cpath d='M0 15c7-10 14-10 21 0s14 10 21 0'/%3E%3Ccircle cx='10' cy='15' r='1.2' fill='%23ffffff' fill-opacity='0.4' stroke='none'/%3E%3Ccircle cx='31' cy='15' r='1.2' fill='%23ffffff' fill-opacity='0.4' stroke='none'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;}
.product-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:2px;font-weight:600;}
.product-badge.sale{background:var(--maroon);color:var(--ivory);}
.product-badge.new{background:var(--teal);color:var(--ivory);}
.product-badge.bestseller{background:var(--gold);color:var(--maroon-deep);}
.wishlist-toggle{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:2px solid transparent;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;transition:transform .2s ease, background .2s ease, border-color .2s ease;}
@media (hover:hover) and (pointer:fine){ .wishlist-toggle:hover{transform:scale(1.1);} }
.wishlist-toggle svg{width:25px;height:25px;overflow:visible;}
/* Not wishlisted: a bold, clearly-legible 3-petal lotus outline (centre +
   left + right), sized and stroked heavily enough to actually read as a
   lotus at this small size rather than an abstract squiggle. */
.wishlist-toggle svg path{fill:none;stroke:var(--maroon);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;transition:fill .2s ease, stroke .2s ease;}
/* Wishlisted: circle stays white, just its border turns pink, with the
   petals themselves a light pink (centre) and light green (left + right)
   — a softer, more elegant palette than the site's bold maroon/teal,
   purpose-picked for this icon. Each petal gets a fine border in its own
   darker shade (not a shared colour) so the light fills stay clearly
   defined against the white circle. The centre (pink) path is last in the
   markup so it paints in front of the two green side petals at their
   shared base, instead of green cutting across on top of it. */
.wishlist-toggle.active{background:#fff;border-color:#D9718F;}
.wishlist-toggle.active svg path{stroke-width:0.9;}
.wishlist-toggle.active svg path.petal-a{fill:#E8A0B0;stroke:var(--maroon);}
.wishlist-toggle.active svg path.petal-b{fill:#A8CB88;stroke:#3F6B2E;stroke-width:1.2;}
.quick-add{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;background:var(--ivory);color:var(--maroon-deep);text-align:center;padding:12px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;border-radius:2px;transform:translateY(calc(100% + 16px));opacity:0;transition:transform .3s cubic-bezier(.22,.8,.3,1),opacity .2s ease;}
@media (hover:hover) and (pointer:fine){ .product-card:hover .quick-add{transform:none;opacity:1;} }
/* Two-button version of the same slide-up slot — real "Add to Cart" +
   "Quick View" instead of a single label that just navigated away. */
.quick-actions{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;gap:6px;transform:translateY(calc(100% + 16px));opacity:0;transition:transform .3s cubic-bezier(.22,.8,.3,1),opacity .2s ease;will-change:transform;}
/* shown on hover with a mouse and when a button inside has keyboard focus; on a phone or tablet (no hover) they are always showing */
@media (hover:hover){ .product-card:hover .quick-actions{transform:none;opacity:1;} }
.product-card:focus-within .quick-actions{transform:none;opacity:1;}
@media (hover:none){ .product-card .quick-actions,.product-card .quick-add{transform:none;opacity:1;} }
/* Phones and tablets: instead of buttons laid over the picture, two small buttons sit just under the price (a sold-out saree gets a small Pre Book).
   A computer never shows this row, so desktop cards are exactly as they were. */
.card-mini-actions{display:none;}
@media (hover:none){
  .product-card .quick-actions{display:none;}
  .product-card:has(.card-mini-actions) .quick-add{display:none;}
  /* the row sits at the very bottom of every card, however long the name is: it is placed from the card's bottom edge, and the info block keeps the room for it
     (18px bottom padding + 8px + the 28px row), so a card is exactly as tall as before. The cards of a row are already the same height. */
  .product-card:has(.card-mini-actions) .product-info{padding-bottom:54px;}
  .card-mini-actions{position:absolute;left:16px;right:16px;bottom:18px;height:28px;display:flex;gap:6px;margin:0;padding:0;}
  .card-mini-actions > button,.card-mini-actions > a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1px;height:28px;min-height:28px;font-size:9px;line-height:1.15;letter-spacing:0;white-space:nowrap;text-transform:uppercase;font-weight:600;border-radius:2px;border:1px solid var(--maroon);background:transparent;color:var(--maroon-deep);cursor:pointer;}
  .card-mini-actions > button:first-child,.card-mini-actions > a{background:var(--maroon);color:var(--ivory);}
  .card-mini-actions .card-qty-stepper{flex:1 1 0;min-width:0;height:28px;min-height:28px;border:1px solid var(--maroon);background:transparent;padding:0 2px;}
  .card-mini-actions .card-qty-stepper button{padding:0 8px;height:26px;font-size:14px;}
}
.quick-actions button{flex:1;background:var(--ivory);color:var(--maroon-deep);text-align:center;padding:12px 2px;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;border-radius:2px;border:none;cursor:pointer;transition:background .2s ease, color .2s ease;}
@media (hover:hover) and (pointer:fine){ .quick-actions button:hover{background:var(--maroon);color:var(--ivory);} }
/* Replaces the "Add to Cart" slot once the card's default variant is already
   in the bag, so the shopper adjusts quantity in place instead of stacking
   up duplicate "Add to Cart" clicks. */
.card-qty-stepper{flex:1;display:flex;align-items:center;justify-content:space-between;background:var(--ivory);border-radius:2px;padding:0 6px;}
.card-qty-stepper button{background:none;border:none;color:var(--maroon-deep);font-size:15px;font-weight:700;cursor:pointer;padding:9px 6px;line-height:1;}
@media (hover:hover) and (pointer:fine){ .card-qty-stepper button:hover{color:var(--maroon);} }
.card-qty-stepper span{font-size:12px;font-weight:600;color:var(--maroon-deep);min-width:16px;text-align:center;}
.wishlist-alert-badge{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:10px;margin-bottom:6px;}
.wishlist-alert-badge.drop{background:rgba(58,140,80,0.14);color:#2E7D45;}
.wishlist-alert-badge.out{background:rgba(173,59,92,0.1);color:var(--maroon);}

/* Sold out — still browsable (never hidden), just visibly unavailable: a
   grey, semi-transparent wash over the photo and a diagonal ribbon, with the
   quick-add slot repurposed into "Pre Book" instead of "Add to Bag". */
.product-card.sold-out .product-media{filter:grayscale(65%) brightness(0.92);}
.product-card.sold-out .product-media::before{
  content:''; position:absolute; inset:0; z-index:1; background:rgba(247,241,232,0.4);
}
.sold-out-ribbon{
  position:absolute; top:23px; left:-42px; z-index:3; width:170px;
  transform:rotate(-45deg); transform-origin:center;
  background:linear-gradient(120deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  color:var(--ivory); text-align:center; padding:6px 0;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  box-shadow:0 3px 10px rgba(43,16,21,0.3);
  display:flex; align-items:center; justify-content:center; gap:5px;
  pointer-events:none;
}
.sold-out-ribbon .ribbon-lotus{display:inline-flex; color:var(--gold-soft);}
.sold-out-ribbon .ribbon-lotus svg{width:10px;height:10px;display:block;}
.product-card.sold-out .quick-add{background:var(--maroon-deep);color:var(--ivory);}
.product-card.sold-out .wishlist-toggle{z-index:3;}
.product-info{padding:16px 16px 18px;}
.product-fabric{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);font-weight:600;}
/* on the cards the weave name is easier to read: a little larger and bolder */
.product-card .product-fabric{font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1.3;}
@media (max-width:560px){ .product-card .product-fabric{font-size:12px;letter-spacing:.05em;} }
.product-name{font-size:15px;margin:5px 0 6px;font-weight:500;color:var(--ink);}
.product-rating{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-bottom:8px;}
.stars{color:var(--gold);letter-spacing:1px;}
.product-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.price-now{font-size:16px;font-weight:600;color:var(--maroon-deep);}
.price-mrp{font-size:13px;color:var(--ink-soft);text-decoration:line-through;}
.price-off{font-size:12px;color:var(--teal);font-weight:600;}
.load-more-wrap{text-align:center;margin-top:44px;}
.empty-state{text-align:center;padding:70px 20px;color:var(--ink-soft);}
.empty-state svg{width:48px;height:48px;stroke:var(--blush);margin:0 auto 16px;}

/* Product detail page */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;}
.pd-grid > *{min-width:0;}
.pd-media{aspect-ratio:3/4;border-radius:4px;position:relative;overflow:hidden;box-shadow:var(--shadow);background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 24px);}
/* Gallery: a real page-flip between photos — each slide is a 3D-rotated
   card, the outgoing one turning away while the incoming one turns in,
   like a page of a book. Auto-advances on its own when there's more than
   one photo, and a swipe/tap/dot/arrow triggers the same flip manually.
   A colour with only one photo (or none) renders one static slide with no
   dots/arrows/autoplay, identical to the old single-image look. */
.pd-media-flip{position:relative;width:100%;height:100%;perspective:1400px;}
.pd-flip-slide{position:absolute;inset:0;background-size:cover;background-position:center;backface-visibility:hidden;opacity:0;transform:rotateY(0deg);transition:transform .65s cubic-bezier(.45,.05,.25,1), opacity .5s ease;z-index:1;}
.pd-flip-slide.active{opacity:1;transform:rotateY(0deg);z-index:2;}
.pd-flip-slide > img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;}
.pd-flip-slide.from-right{opacity:0;transform:rotateY(78deg);}
.pd-flip-slide.from-left{opacity:0;transform:rotateY(-78deg);}
@media (prefers-reduced-motion: reduce){
  .pd-flip-slide{transition:opacity .3s ease;}
  .pd-flip-slide.from-right,.pd-flip-slide.from-left{transform:none;}
}
.pd-media-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:7px;}
.pd-media-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.65);border:1px solid rgba(0,0,0,0.15);cursor:pointer;padding:0;transition:background .2s ease, transform .2s ease;}
.pd-media-dot.active{background:var(--maroon);border-color:var(--maroon);transform:scale(1.25);}
.pd-media-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,0.85);color:var(--maroon-deep);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(43,16,21,0.15);transition:background .2s ease, transform .2s ease;}
@media (hover:hover) and (pointer:fine){ .pd-media-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);} }
.pd-media-arrow.prev{left:12px;}
.pd-media-arrow.next{right:12px;}
/* Full-screen photo viewer (product page) */
.pd-media.zoomable{cursor:zoom-in;}
.pd-media.zoomable:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;}
html.iv-open{overflow:hidden;}
.iv{position:fixed;inset:0;z-index:2000;background:#120a0c;display:flex;flex-direction:column;opacity:0;transition:opacity .2s ease;}
.iv.open{opacity:1;}
.iv-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));height:56px;color:#fff;}
.iv-count{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;}
.iv-tools{display:flex;align-items:center;gap:6px;}
.iv-btn{font:inherit;min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease;}
@media (hover:hover) and (pointer:fine){ .iv-btn:hover{background:rgba(255,255,255,.2);} }
.iv-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.iv-level{font-size:12.5px;letter-spacing:.04em;min-width:58px;}
.iv-close{font-size:26px;margin-left:6px;}
.iv-scroll{--z:1;--fit-h:calc(100vh - 56px - 28px);flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:8px 0 20px;touch-action:pan-x pan-y pinch-zoom;outline:none;-webkit-overflow-scrolling:touch;}
@supports (height:100dvh){ .iv-scroll{--fit-h:calc(100dvh - 56px - 28px);} }
.iv-frame{width:calc(var(--z) * 100%);height:calc(var(--z) * var(--fit-h));margin:0 auto 12px;}
.iv-frame img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;}
.iv-scroll.zoomed{cursor:grab;} .iv-scroll.dragging{cursor:grabbing;}
@media (prefers-reduced-motion:reduce){ .iv{transition:none;} }
.pd-info h1{font-size:28px;margin:10px 0;}
.pd-tax-note{margin-top:3px;font-size:11px;line-height:1.3;letter-spacing:.02em;color:var(--ink-soft);opacity:.75;}
.pd-tax-note[hidden]{display:none;}
.pd-desc{font-size:14px;color:var(--ink-soft);margin:16px 0;line-height:1.75;}
.swatch-row{display:flex;gap:10px;margin:8px 0 20px;}
.swatch-dot{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.swatch-dot.active{border-color:var(--maroon);}
.pd-meta{display:flex;gap:22px;font-size:12.5px;color:var(--ink-soft);margin:18px 0;flex-wrap:wrap;}
.pd-meta strong{color:var(--ink);}
.pd-actions{display:flex;gap:12px;margin-top:24px;}
.qty-stepper{display:flex;align-items:center;border:1px solid rgba(173,59,92,0.2);width:fit-content;border-radius:2px;}
.qty-stepper button{width:34px;height:38px;font-size:16px;}
.qty-stepper span{width:34px;text-align:center;font-size:14px;}

/* Cart / Wishlist pages */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:flex-start;}
.cart-layout > *{min-width:0;}
.cart-line{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(173,59,92,0.1);align-items:center;}
.cart-thumb{width:80px;height:104px;border-radius:2px;flex-shrink:0;position:relative;overflow:hidden;}
.cart-line-info{flex:1;}
.cart-line-info h4{font-size:15px;font-weight:500;margin-bottom:4px;font-family:var(--font-body);}
.cart-line-info span{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:8px;}
.cart-line-price{text-align:right;font-size:14.5px;font-weight:600;color:var(--maroon-deep);min-width:90px;}
.remove-line{font-size:11.5px;color:var(--ink-soft);text-decoration:underline;margin-top:8px;cursor:pointer;}
.summary-card{background:var(--white);border:1px solid rgba(173,59,92,0.12);border-radius:4px;padding:24px;position:sticky;top:100px;}
.summary-card h3{font-size:18px;margin-bottom:16px;}
.summary-row{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:10px;color:var(--ink-soft);}
.summary-row.total{font-size:17px;font-weight:600;color:var(--ink);margin-top:12px;border-top:1px solid rgba(173,59,92,0.1);padding-top:12px;}
.promo-row{display:flex;gap:8px;margin:16px 0;}
.promo-row input{flex:1;border:1px solid rgba(173,59,92,0.25);padding:10px 12px;font-size:13px;border-radius:2px;}
.promo-row button{border:1px solid var(--maroon);color:var(--maroon);padding:0 16px;font-size:12px;text-transform:uppercase;border-radius:2px;}

/* Forms (login/register/account/checkout) */
.auth-shell{max-width:440px;margin:0 auto;background:var(--white);padding:44px;border-radius:4px;box-shadow:var(--shadow);}
.auth-shell h1{font-size:26px;text-align:center;margin-bottom:6px;}
.auth-shell p.sub{text-align:center;color:var(--ink-soft);font-size:13.5px;margin-bottom:28px;}
.form-field{margin-bottom:16px;}
.form-field label{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:6px;}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid rgba(173,59,92,0.25);padding:12px 14px;border-radius:2px;font-size:13.5px;background:var(--white);}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* a field that failed its check: red edge and the reason right under it (checkout, address book, sign-up) */
.form-field input.invalid,.form-field select.invalid{border-color:var(--maroon);background:rgba(173,59,92,0.05);}
.field-error{display:block;color:var(--maroon);font-size:12px;line-height:1.4;margin-top:5px;}
.field-error:empty{display:none;}
.form-note{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:20px;}
.form-note a{color:var(--maroon);text-decoration:underline;}
.form-error{background:rgba(173,59,92,0.08);color:var(--maroon-deep);font-size:13px;padding:10px 14px;border-radius:2px;margin-bottom:16px;display:none;}
.form-error.show{display:block;}
.password-field{position:relative;}
.password-field input{padding-right:56px;}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--maroon);text-transform:uppercase;letter-spacing:.03em;font-weight:600;}
.field-hint{display:block;font-size:11.5px;color:var(--maroon);margin-top:5px;min-height:14px;}
.strength-meter{height:4px;border-radius:2px;background:var(--ivory-deep);margin-top:8px;overflow:hidden;}
.strength-meter span{display:block;height:100%;width:0;transition:width .25s ease, background .25s ease;}
.strength-meter.level-1 span{width:25%;background:var(--maroon);}
.strength-meter.level-2 span{width:50%;background:#C98A1F;}
.strength-meter.level-3 span{width:75%;background:var(--gold);}
.strength-meter.level-4 span{width:100%;background:var(--teal);}

/* Account page */
/* min-width:0 on both tracks: a grid item's default min-width is 'auto',
   meaning it won't shrink below its content's intrinsic size — without this,
   admin.html's wide tables (min-width:640px, meant to scroll inside their
   own overflow-x:auto wrapper) instead blow out this whole grid column
   wider than the viewport on mobile, dragging the entire page into
   horizontal scroll. This one property lets the column actually respect
   the viewport so that wrapper's own scrolling can do its job. */
.account-layout{display:grid;grid-template-columns:230px 1fr;gap:36px;}
.account-layout > *{min-width:0;}
.account-nav{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:12px;}
.account-nav button{display:block;width:100%;text-align:left;padding:12px 14px;font-size:13.5px;border-radius:2px;color:var(--ink-soft);}
.account-nav button.active{background:var(--blush);color:var(--maroon-deep);font-weight:600;}
/* Admin on a phone: the section list hides behind a Menu button (the desktop sidebar is unchanged) */
.admin-menu-toggle{display:none;}
@media (max-width:980px){
  .admin-menu-toggle{display:flex;align-items:center;gap:10px;width:100%;position:sticky;top:0;z-index:60;padding:12px 14px;margin-bottom:12px;background:var(--white);border:1px solid rgba(173,59,92,0.18);border-radius:6px;color:var(--maroon-deep);font:inherit;font-size:14px;font-weight:600;box-shadow:0 2px 8px rgba(80,30,40,.08);}
  .admin-menu-toggle svg{width:20px;height:20px;flex-shrink:0;}
  .admin-menu-toggle span{flex:1;text-align:left;}
  .admin-menu-toggle .admin-menu-caret{width:16px;height:16px;transition:transform .2s ease;}
  .admin-menu-toggle[aria-expanded="true"] .admin-menu-caret{transform:rotate(180deg);}
  .account-nav.admin-nav{display:none;position:sticky;top:58px;z-index:59;margin-bottom:16px;max-height:calc(100vh - 140px);overflow-y:auto;box-shadow:0 10px 30px rgba(80,30,40,.18);}
  .account-nav.admin-nav.open{display:block;}
  .account-nav.admin-nav button{padding:14px 14px;}
}
.account-panel{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:32px;}
.account-panel h2{font-size:22px;margin-bottom:20px;}
.order-card{border:1px solid rgba(173,59,92,0.12);border-radius:3px;padding:18px;margin-bottom:14px;}
.order-card-head{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:10px;}
.order-status{background:var(--teal);color:var(--ivory);font-size:10.5px;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;}
.order-item-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:6px 0;color:var(--ink-soft);}
.order-item-row>span:first-child{overflow-wrap:anywhere;min-width:0;}

/* Admin dashboard */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.stat-card{background:var(--ivory);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:18px;text-align:center;}
.stat-card strong{display:block;font-family:var(--font-display);font-size:22px;color:var(--maroon-deep);}
.stat-card span{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
.stat-card-warn{border-color:rgba(173,59,92,0.35);background:rgba(173,59,92,0.05);}
/* Overview: what is waiting for the store owner (above the figures) */
.action-items{margin:0 0 26px;}
.action-items-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.action-items-head h3{font-size:16px;margin:0;}
.action-items-sum{font-size:12.5px;color:var(--ink-soft);}
.action-items-sum.has{color:var(--maroon);font-weight:600;}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.action-card{background:var(--ivory);border:1px solid rgba(173,59,92,0.12);border-radius:4px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;}
.action-card.has{border-color:rgba(173,59,92,0.4);background:rgba(173,59,92,0.06);}
.action-card .n{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--ink-soft);}
.action-card.has .n{color:var(--maroon);}
.action-card .lbl{font-size:13.5px;font-weight:600;color:var(--ink);}
.action-card .hint{font-size:12px;color:var(--ink-soft);line-height:1.4;}
.action-card:not(.has) .hint{color:var(--teal);}
.action-card .btn{margin-top:8px;}
@media (max-width:980px){ .action-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .action-grid{grid-template-columns:1fr;} }
/* Refund status on a cancelled order (My Orders, Track Order) */
.refund-box{margin-top:12px;padding:12px 14px;border-radius:4px;border:1px solid rgba(173,59,92,0.18);background:var(--ivory-deep);}
.refund-box-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.refund-pill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--gold);color:#fff;}
.refund-done .refund-pill{background:var(--teal);}
.refund-na .refund-pill{background:var(--ink-soft);}
.refund-when{font-size:11.5px;color:var(--ink-soft);}
.refund-box strong{display:block;font-size:14px;color:var(--maroon-deep);}
.refund-box p{font-size:12.5px;color:var(--ink-soft);margin:3px 0 0;line-height:1.5;}
.notif-row{margin:0 0 10px;}
.notif-heading{font-size:13px;font-weight:600;color:var(--ink);margin-top:4px;overflow-wrap:anywhere;}
.notif-meta{font-size:11.5px;color:var(--ink-soft);overflow-wrap:anywhere;}
.stat-card-warn strong{color:var(--maroon);}
.admin-form{background:var(--ivory);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:20px;margin-bottom:20px;}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
.admin-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid rgba(173,59,92,0.12);}
.admin-table td{padding:10px;border-bottom:1px solid rgba(173,59,92,0.08);vertical-align:top;}
.reel-upload-status{font-size:11px;color:var(--maroon);margin-right:4px;}
/* Formatting editor for product descriptions (admin) */
.rte{border:1px solid rgba(173,59,92,0.25);border-radius:3px;background:#fff;}
.rte:focus-within{border-color:var(--maroon);box-shadow:0 0 0 2px rgba(173,59,92,0.12);}
.rte-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px;border-bottom:1px solid rgba(173,59,92,0.18);background:var(--ivory,#FFF0E6);border-radius:3px 3px 0 0;}
.rte-bar button{font:inherit;font-size:12.5px;min-width:32px;height:30px;padding:0 9px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--ink,#3D2229);cursor:pointer;}
@media (hover:hover) and (pointer:fine){ .rte-bar button:hover{background:#fff;border-color:rgba(173,59,92,0.3);} }
.rte-bar button.on{background:var(--maroon,#AD3B5C);color:#fff;}
.rte-bar button:focus-visible{outline:2px solid var(--maroon,#AD3B5C);outline-offset:1px;}
.rte-sep{width:1px;height:20px;background:rgba(173,59,92,0.25);margin:0 4px;}
.rte-area{min-height:130px;max-height:420px;overflow-y:auto;padding:12px 14px;font-size:14px;line-height:1.7;outline:none;}
.rte-area p{margin:0 0 10px;} .rte-area h3{font-size:16px;margin:12px 0 6px;}
.rte-area ul,.rte-area ol{margin:0 0 10px;padding-left:22px;} .rte-area ul{list-style:disc;} .rte-area ol{list-style:decimal;}
/* The same formatting as shoppers see it on the product page */
.pd-desc p{margin:0 0 10px;} .pd-desc h3{font-size:16px;margin:14px 0 6px;color:var(--ink);}
.pd-desc ul,.pd-desc ol{margin:0 0 10px;padding-left:22px;} .pd-desc ul{list-style:disc;} .pd-desc ol{list-style:decimal;}
.pd-desc > :last-child{margin-bottom:0;}
/* Product description / Product details dropdowns on the product page */
.pd-acc-group{margin:22px 0 0;border-top:1px solid rgba(173,59,92,0.14);}
.pd-acc{border-bottom:1px solid rgba(173,59,92,0.14);}
.pd-acc[hidden]{display:none;}
.pd-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:14px 2px;font-size:15px;font-weight:500;color:var(--ink);}
.pd-acc summary::-webkit-details-marker{display:none;}
.pd-acc summary svg{flex-shrink:0;color:var(--maroon);transition:transform .2s ease;}
.pd-acc[open] summary svg{transform:rotate(180deg);}
.pd-acc summary:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;border-radius:4px;}
.pd-acc-body{padding:0 2px 18px;animation:pdAccIn .22s ease;}
.pd-acc .pd-acc-body.pd-desc{margin:0;}
.pd-acc-body .pd-rich{font-size:14px;color:var(--ink-soft);line-height:1.75;}
.pd-acc-body .pd-rich p{margin:0 0 10px;} .pd-acc-body .pd-rich h3{font-size:16px;margin:14px 0 6px;color:var(--ink);}
.pd-acc-body .pd-rich ul,.pd-acc-body .pd-rich ol{margin:0 0 10px;padding-left:22px;} .pd-acc-body .pd-rich ul{list-style:disc;} .pd-acc-body .pd-rich ol{list-style:decimal;}
.pd-acc-body .pd-rich > :last-child{margin-bottom:0;}
.pd-specs{margin:0;display:grid;gap:0;font-size:14px;}
.pd-specs > div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(173,59,92,0.14);}
.pd-specs > div:last-child{border-bottom:0;}
.pd-specs dt{color:var(--ink);font-weight:600;font-size:13px;}
.pd-specs dd{margin:0;color:var(--ink-soft);}
@keyframes pdAccIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.pd-acc-body{animation:none;}.pd-acc summary svg{transition:none;}}
@media (max-width:560px){.pd-specs > div{grid-template-columns:92px 1fr;}}
/* phone: Add to bag and Buy now share one row, Wishlist gets its own full-width row (three squeezed buttons wrapped their labels) */
@media (max-width:560px){.pd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}.pd-actions > *{min-width:0;}.pd-actions .btn{width:100%;white-space:nowrap;padding-left:10px;padding-right:10px;}#pd-actions-wish,.pd-actions #pdWish{grid-column:1 / -1;}.pd-actions #pdCartControl .btn,.pd-actions #pdCartControl .qty-stepper{width:100%;}.pd-actions #pdCartControl .qty-stepper{justify-content:space-between;}}
/* Admin list tools: search, date range, sort, count, export */
.list-tools{margin:0 0 14px;padding:12px 14px;background:#fff;border:1px solid rgba(173,59,92,0.14);border-radius:8px;}
.lt-search{position:relative;display:flex;align-items:center;}
.lt-search > svg{position:absolute;left:12px;width:17px;height:17px;color:var(--ink-soft);pointer-events:none;}
.list-tools .lt-search input{width:100%;padding:11px 36px 11px 38px;font-size:14px;border-radius:999px;}
.lt-clear{position:absolute;right:8px;width:26px;height:26px;border-radius:50%;font-size:18px;line-height:1;color:var(--ink-soft);background:rgba(173,59,92,.08);}
@media (hover:hover) and (pointer:fine){ .lt-clear:hover{background:rgba(173,59,92,.18);color:var(--maroon);} }
.lt-hint{margin:6px 4px 10px;font-size:11.5px;color:var(--ink-soft);}
.lt-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;}
.lt-row label{display:flex;flex-direction:column;gap:3px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);}
.lt-row .admin-input{width:auto;min-width:130px;font-size:13px;padding:7px 9px;}
.lt-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-bottom:2px;}
.lt-presets button{font-size:12px;padding:6px 11px;border:1px solid rgba(173,59,92,0.25);border-radius:999px;background:#fff;color:var(--maroon-deep);}
@media (hover:hover) and (pointer:fine){ .lt-presets button:hover{background:var(--blush);} }
.lt-presets button.active{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.lt-export{margin-left:auto;}
.lt-count{margin-top:10px;font-size:12.5px;color:var(--ink-soft);}
.lt-reset{font:inherit;font-size:12.5px;color:var(--maroon);text-decoration:underline;}
.admin-table mark,.order-card mark{background:#ffe9a8;color:inherit;padding:0 1px;border-radius:2px;}
.lt-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:999px;vertical-align:1px;}
.lt-badge.low{background:rgba(184,127,85,.18);color:#8a5a2b;} .lt-badge.out{background:rgba(173,59,92,.14);color:var(--maroon);}
@media (max-width:640px){ .lt-row .admin-input{min-width:0;width:100%;} .lt-row label{flex:1 1 130px;} .lt-export{margin-left:0;width:100%;} }
.admin-input{border:1px solid rgba(173,59,92,0.25);padding:7px 9px;border-radius:2px;font-size:12.5px;width:85px;font-family:inherit;}
select.admin-input{width:auto;min-width:150px;}

/* Product editor (General / Variants tabs) */
.editor-card{background:var(--white);border:1px solid rgba(173,59,92,0.15);border-radius:6px;padding:24px;margin-top:8px;}
.editor-tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid rgba(173,59,92,0.1);overflow-x:auto;}
.editor-tabs button{padding:10px 16px;font-size:12.5px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;text-transform:uppercase;letter-spacing:.03em;}
.editor-tabs button.active{color:var(--maroon-deep);border-bottom-color:var(--maroon);}
.variant-card{border:1px solid rgba(173,59,92,0.15);border-radius:4px;padding:16px;margin-bottom:16px;background:var(--ivory);}
.variant-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.variant-card-head h4{font-size:14px;font-family:var(--font-body);font-weight:700;color:var(--maroon-deep);display:flex;align-items:center;gap:8px;}
.variant-swatch-dot{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,0.15);}
.default-tag{font-size:10px;background:var(--gold);color:var(--maroon-deep);padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
.variant-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;}
.variant-fields .form-field{margin-bottom:0;}
.variant-fields label{font-size:10.5px;}
.variant-media-strip{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;}
.media-thumb{position:relative;width:64px;height:64px;border-radius:4px;overflow:hidden;border:2px solid transparent;background:var(--ivory-deep);}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.media-thumb.is-primary{border-color:var(--gold);}
.media-thumb .media-del{position:absolute;top:2px;right:2px;background:rgba(43,26,29,0.75);color:#fff;width:18px;height:18px;border-radius:50%;font-size:11px;line-height:18px;text-align:center;}
.media-thumb .media-primary-btn{position:absolute;bottom:0;left:0;right:0;background:rgba(43,26,29,0.7);color:#fff;font-size:9px;text-align:center;padding:2px 0;text-transform:uppercase;}
.upload-label{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1.5px dashed rgba(173,59,92,0.35);border-radius:4px;font-size:22px;color:var(--maroon);cursor:pointer;}
/* Admin product form: info tips, colour blocks, inline editor row */
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:4px;padding:0;border:1px solid var(--maroon);border-radius:50%;background:transparent;color:var(--maroon);font:italic 700 10px/1 Georgia,serif;text-transform:none;letter-spacing:0;cursor:help;position:relative;vertical-align:1px;}
.info-tip::after{content:attr(data-tip);position:absolute;left:-6px;bottom:calc(100% + 8px);width:max-content;max-width:min(270px,62vw);padding:9px 11px;background:#2b1a1d;color:#fff;font:400 12px/1.45 var(--font-body);font-style:normal;text-transform:none;letter-spacing:0;text-align:left;white-space:normal;border-radius:6px;opacity:0;pointer-events:none;z-index:60;box-shadow:0 6px 18px rgba(0,0,0,.22);}
.info-tip:focus::after{opacity:1;}
@media (hover:hover) and (pointer:fine){ .info-tip:hover::after{opacity:1;} }
.pf-section{margin:6px 0 14px;padding:14px 16px 4px;border:1px solid rgba(173,59,92,0.14);border-radius:6px;background:#fff;}
.pf-section > h4{font-family:var(--font-body);font-size:13.5px;font-weight:700;color:var(--maroon-deep);margin:0 0 2px;}
.pf-section > .pf-note{font-size:12px;color:var(--ink-soft);margin:0 0 12px;}
.colour-block{padding:2px 0;}
.colour-block + .colour-block{border-top:1px dashed rgba(173,59,92,0.25);margin-top:10px;padding-top:12px;}
.colour-block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.colour-block-head h4{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--maroon-deep);margin:0;}
.shade-pick{display:flex;align-items:center;gap:10px;}
.shade-pick select{flex:1;}
.activity-day{font-family:var(--font-body);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--maroon-deep);margin:18px 0 4px;padding-bottom:4px;border-bottom:1px solid rgba(173,59,92,0.18);}
.alt-list{margin:6px 0 10px;padding:10px 12px;background:#fff;border:1px solid rgba(173,59,92,0.12);border-radius:6px;}
.alt-title{font-size:12px;font-weight:600;color:var(--ink);margin:0 0 8px;}
.alt-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.alt-thumb{width:36px;height:36px;border-radius:4px;object-fit:cover;flex:0 0 auto;border:1px solid rgba(173,59,92,0.18);}
.alt-row input{flex:1;min-width:0;font-size:12.5px;padding:7px 10px;}
.shade-dot{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.18);}
.sale-preview-line{display:block;font-size:12px;color:var(--teal);margin-top:6px;}
.occ-checks{display:flex;flex-wrap:wrap;gap:8px;}
.occ-check{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid rgba(173,59,92,0.25);border-radius:999px;background:#fff;font-size:12.5px;color:var(--ink);cursor:pointer;}
.occ-check input{width:auto;margin:0;padding:0;border:0;accent-color:var(--maroon);}
.occ-check:has(input:checked){background:rgba(173,59,92,0.1);border-color:var(--maroon);color:var(--maroon-deep);font-weight:600;}
.occ-empty{font-size:12.5px;color:var(--ink-soft);}
.pf-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px;}
.pf-status{font-size:12.5px;color:var(--ink-soft);}
.upload-status{display:none;margin:0 0 12px;padding:9px 12px;font-size:12.5px;background:#fff7e0;border:1px solid #ecd9a0;border-radius:6px;color:#6b5311;}
.admin-table tr.is-open > td{background:rgba(173,59,92,0.06);}
.admin-table tr.editor-row > td{padding:0 0 14px;border-bottom:2px solid rgba(173,59,92,0.18);background:rgba(173,59,92,0.03);}
.admin-table tr.editor-row .editor-card{margin:0;border-radius:0 0 6px 6px;border-top:0;}
@media (max-width:760px){ .admin-table tr.editor-row #productEditor{position:sticky;left:0;} .admin-table tr.editor-row .editor-tabs button{padding:10px 8px;font-size:11.5px;white-space:nowrap;} .admin-table tr.editor-row .editor-card{padding:16px;} }
@media (max-width:760px){ .variant-fields{grid-template-columns:1fr 1fr;} }

/* Order filter chips + order/inventory detail panels */
.order-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.order-filter-row button{padding:7px 14px;font-size:12px;border:1px solid rgba(173,59,92,0.25);border-radius:20px;color:var(--ink-soft);}
.order-filter-row button.active{background:var(--maroon);border-color:var(--maroon);color:var(--ivory);font-weight:600;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0;}
.detail-block{background:var(--ivory);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:16px;}
.detail-block h5{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:10px;}
.detail-block p{font-size:13px;line-height:1.7;}
/* Order detail "Items" — the exact photo the customer was shown, so an
   admin packing the order can visually confirm it's the right saree/colour
   before it ships, not just trust the text name. */
.order-line-item{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;line-height:1.5;}
.order-line-thumb{width:42px;height:42px;border-radius:4px;object-fit:cover;flex-shrink:0;box-shadow:var(--shadow);}
.order-line-thumb-empty{display:flex;align-items:center;justify-content:center;background:var(--blush);color:var(--gold);}
.order-line-thumb-empty svg{width:20px;height:20px;}
.order-id-cell.unviewed{font-weight:800;color:var(--maroon-deep);}
.order-line-meta{font-size:12px;color:var(--ink-soft);}
.order-line-meta b{color:var(--ink);font-weight:600;}
.admin-table tr.is-open > td{background:rgba(173,59,92,0.06);}
.admin-table tr.order-detail-row > td{padding:0 0 14px;border-bottom:2px solid rgba(173,59,92,0.18);background:rgba(173,59,92,0.03);}
.admin-table tr.order-detail-row .editor-card{margin:0;border-radius:0 0 6px 6px;border-top:0;}
@media (max-width:760px){ .admin-table tr.order-detail-row .order-detail-body{position:sticky;left:0;} .admin-table tr.order-detail-row .editor-card{padding:16px;} }
.manual-override-flag{display:inline-block;background:var(--gold);color:var(--maroon-deep);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 10px;border-radius:10px;margin-left:8px;}
.status-pill{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:3px 10px;border-radius:10px;margin:2px 4px 2px 0;}
.status-pill.status-confirmed{background:rgba(58,140,80,0.14);color:#2E7D45;}
.status-pill.status-cancelled{background:rgba(173,59,92,0.12);color:var(--maroon);}
.status-pill.status-pending{background:rgba(201,162,75,0.18);color:#8a6a1a;}
.mini-timeline{display:flex;gap:4px;margin:16px 0;}
.mini-timeline span{flex:1;text-align:center;font-size:10.5px;padding:8px 4px;border-radius:3px;background:var(--ivory-deep);color:var(--ink-soft);}
.mini-timeline span.done{background:var(--teal);color:var(--ivory);font-weight:600;}
@media (max-width:760px){ .detail-grid{grid-template-columns:1fr;} }
@media (max-width:980px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }

/* Checkout steps */
.checkout-steps{display:flex;justify-content:center;gap:0;margin-bottom:36px;}
.step{display:flex;align-items:center;gap:10px;padding:0 18px;position:relative;}
.step-num{width:26px;height:26px;border-radius:50%;border:1px solid rgba(173,59,92,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-soft);}
.step.active .step-num{background:var(--maroon);color:var(--ivory);border-color:var(--maroon);}
.step span.step-label{font-size:12px;color:var(--ink-soft);}
.step.active span.step-label{color:var(--maroon-deep);font-weight:600;}
.step:not(:last-child)::after{content:'';width:36px;height:1px;background:rgba(173,59,92,0.2);margin-left:8px;}
/* Confirmed via layout audit: 3 steps at their default padding/connector
   width genuinely don't fit a 320-390px phone screen — reduce padding,
   connector length and label size so all 3 stay on one row and in view. */
@media (max-width:480px){
  .step{padding:0 6px;gap:5px;}
  .step-num{width:22px;height:22px;font-size:11px;}
  .step span.step-label{font-size:10.5px;}
  .step:not(:last-child)::after{width:14px;margin-left:5px;}
}
@media (max-width:380px){
  .step{padding:0 4px;gap:4px;}
  .step:not(:last-child)::after{width:9px;margin-left:4px;}
}
.pay-options{display:grid;gap:12px;margin:16px 0;}
.pay-option{display:flex;align-items:center;gap:12px;border:1px solid rgba(173,59,92,0.2);border-radius:2px;padding:14px 16px;cursor:pointer;}
.pay-option.active{border-color:var(--maroon);background:rgba(173,59,92,0.04);}
.pay-option input{accent-color:var(--maroon);}
.pay-subpanel{border:1px solid rgba(173,59,92,0.14);border-radius:2px;padding:16px;margin:-4px 0 16px;background:rgba(173,59,92,0.02);}
.upi-app-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.upi-app-btn{display:flex;align-items:center;gap:8px;border:1px solid rgba(173,59,92,0.2);background:var(--ivory);border-radius:20px;padding:8px 16px;font-size:13px;font-family:var(--font-body);cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s;}
@media (hover:hover) and (pointer:fine){ .upi-app-btn:hover{border-color:var(--maroon);} }
.upi-app-btn.active{border-color:var(--maroon);background:rgba(173,59,92,0.06);font-weight:600;}
.upi-app-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.success-box{text-align:center;padding:50px 20px;}
.success-icon{width:70px;height:70px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.success-icon svg{width:32px;height:32px;stroke:var(--ivory);}

/* Order-confirmed screen: the order ID pops in like a stamp, then each
   ordered saree's own photo rises in just after, one by one — alongside
   the existing confetti burst (js/components.js's fireConfetti), not a
   replacement for it. */
.order-confirm-id-badge{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:14px auto 4px;padding:9px 24px;border:1px dashed var(--gold);border-radius:6px;background:var(--ivory-deep);animation:orderIdPop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:.1s;}
.order-confirm-id-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);}
.order-confirm-id-value{font-size:17px;font-weight:700;color:var(--maroon-deep);letter-spacing:.02em;}
@keyframes orderIdPop{0%{opacity:0;transform:scale(.7) translateY(8px);}100%{opacity:1;transform:scale(1) translateY(0);}}

.order-confirm-items{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0 6px;}
.order-confirm-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;opacity:0;animation:orderItemRise .55s ease both;animation-delay:var(--order-item-delay, .2s);}
.order-confirm-item img,.order-confirm-item-empty{width:72px;height:72px;border-radius:6px;object-fit:cover;box-shadow:var(--shadow);}
.order-confirm-item-empty{display:flex;align-items:center;justify-content:center;background:var(--blush);color:var(--gold);}
.order-confirm-item-empty svg{width:28px;height:28px;}
.order-confirm-item-name{font-size:10.5px;color:var(--ink-soft);text-align:center;line-height:1.3;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@keyframes orderItemRise{0%{opacity:0;transform:translateY(14px) scale(.92);}100%{opacity:1;transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion: reduce){
  .order-confirm-id-badge,.order-confirm-item{animation:none;opacity:1;}
}

/* Footer */
footer{background:var(--maroon-deep);color:var(--ivory-deep);padding:50px 0 0;margin-top:60px;position:relative;overflow:hidden;z-index:10;}
.footer-lotus-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.footer-lotus-bg span{position:absolute;color:var(--gold);display:block;}
.footer-lotus-bg svg{width:100%;height:100%;display:block;}
.footer-lotus-bg .fl-a{width:230px;height:230px;right:-55px;bottom:-45px;opacity:.11;transform:rotate(8deg);}
.footer-lotus-bg .fl-b{width:210px;height:210px;left:-50px;bottom:-40px;opacity:.1;transform:rotate(-12deg);}
.footer-lotus-bg .fl-c{width:150px;height:150px;left:26%;bottom:-30px;opacity:.09;transform:rotate(5deg);}
.footer-lotus-bg .fl-d{width:110px;height:110px;right:22%;bottom:-16px;opacity:.08;transform:rotate(-8deg);}
.footer-lotus-bg .fl-e{width:75px;height:75px;left:12%;bottom:-10px;opacity:.07;transform:rotate(14deg);}
.footer-lotus-bg .fl-f{width:60px;height:60px;left:45%;bottom:-4px;opacity:.06;transform:rotate(-20deg);}
.footer-lotus-bg .fl-g{width:100px;height:100px;right:41%;bottom:-24px;opacity:.075;transform:rotate(18deg);}
.footer-lotus-bg .fl-h{width:55px;height:55px;left:19%;bottom:4px;opacity:.055;transform:rotate(26deg);}
.footer-lotus-bg .fl-i{width:85px;height:85px;left:35%;bottom:-18px;opacity:.065;transform:rotate(-14deg);}
.footer-lotus-bg .fl-j{width:70px;height:70px;right:30%;bottom:-2px;opacity:.06;transform:rotate(10deg);}
.footer-lotus-bg .fl-k{width:45px;height:45px;left:7%;bottom:10px;opacity:.05;transform:rotate(-30deg);}
.footer-lotus-bg .fl-l{width:95px;height:95px;right:12%;bottom:16px;opacity:.065;transform:rotate(-22deg);}
.footer-lotus-bg .fl-m{width:65px;height:65px;left:55%;bottom:-8px;opacity:.055;transform:rotate(16deg);}
.footer-lotus-bg .fl-n{width:130px;height:130px;left:-30px;top:-40px;opacity:.08;transform:rotate(30deg);}
.footer-lotus-bg .fl-o{width:120px;height:120px;right:2%;top:-30px;opacity:.07;transform:rotate(-18deg);}
.footer-lotus-bg .fl-p{width:50px;height:50px;left:63%;bottom:8px;opacity:.06;transform:rotate(-10deg);}
@media (max-width:900px){ .footer-lotus-bg .fl-i,.footer-lotus-bg .fl-j,.footer-lotus-bg .fl-k,.footer-lotus-bg .fl-l,.footer-lotus-bg .fl-m,.footer-lotus-bg .fl-n,.footer-lotus-bg .fl-o,.footer-lotus-bg .fl-p{display:none;} }
@media (max-width:900px){ .footer-lotus-bg .fl-c,.footer-lotus-bg .fl-d,.footer-lotus-bg .fl-e,.footer-lotus-bg .fl-f,.footer-lotus-bg .fl-g,.footer-lotus-bg .fl-h{display:none;} }
.footer .container,.footer-bottom{position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(var(--footer-cols,2),minmax(0,1fr));gap:40px;padding-bottom:36px;}
.footer-grid h5{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-soft);margin-bottom:16px;}
.footer-grid ul li{margin-bottom:9px;font-size:13.5px;color:rgba(250,245,236,0.75);}
.footer-logo{font-family:var(--font-display);font-size:22px;color:var(--ivory);margin-bottom:12px;}
.footer-logo .by-yashi{font-family:var(--font-body);font-size:12px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-left:4px;}
.footer-grid p{font-size:13px;color:rgba(250,245,236,0.65);line-height:1.7;max-width:280px;}
.footer-mail{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:rgba(250,245,236,0.85);transition:color .2s ease;}
.footer-mail svg{width:16px;height:16px;stroke:var(--gold-soft);flex-shrink:0;}
@media (hover:hover) and (pointer:fine){ .footer-mail:hover{color:var(--gold-soft);} }
.footer-social{display:flex;gap:10px;margin-top:16px;}
.social-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(250,245,236,0.3);display:flex;align-items:center;justify-content:center;color:var(--ivory-deep);transition:background .25s ease,border-color .25s ease,transform .25s ease,color .25s ease;}
.social-btn svg{width:16px;height:16px;stroke:currentColor;}
@media (hover:hover) and (pointer:fine){ .social-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--maroon-deep);transform:translateY(-2px);} }
/* padding-bottom is taller than the rest of this rule needs on its own — it's
   reserving room for the fixed back-to-top/"Find My Saree" buttons, which
   otherwise sit right on top of this line once the page is fully scrolled,
   on both desktop (finder button, bottom-right) and mobile (both buttons). */
.footer-bottom{border-top:1px solid rgba(250,245,236,0.15);padding:18px 28px calc(90px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(250,245,236,0.55);max-width:1240px;margin:0 auto;flex-wrap:wrap;gap:10px;}
.footer-lotus-mark{display:inline-flex;align-items:center;color:var(--gold-soft);opacity:.85;}
.footer-lotus-mark svg{width:13px;height:13px;}

/* Toasts — animated, top of screen, typed (success/error/info) */
.toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;}
.toast{
  position:relative;overflow:hidden;pointer-events:auto;
  display:flex;align-items:center;gap:12px;
  min-width:270px;max-width:400px;padding:14px 18px 14px 16px;
  background:var(--white);color:var(--ink);border-radius:8px;
  border-left:4px solid var(--teal);box-shadow:var(--shadow);
  font-size:13.5px;font-weight:500;
  opacity:0;transform:translateY(-18px) scale(.95);
  transition:opacity .35s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{opacity:1;transform:translateY(0) scale(1);}
.toast.hide{opacity:0;transform:translateY(-12px) scale(.96);transition:opacity .3s ease, transform .3s ease;}
.toast-icon{display:flex;flex-shrink:0;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;}
.toast-icon svg{width:16px;height:16px;}
.toast-msg{flex:1;line-height:1.4;}
.toast-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;animation:toastShrink 3.2s linear forwards;}
.toast-success{border-left-color:var(--teal);}
.toast-success .toast-icon{background:rgba(31,75,74,0.12);}
.toast-success .toast-icon svg{stroke:var(--teal);}
.toast-success .toast-progress{background:var(--teal);}
.toast-error{border-left-color:var(--maroon);}
.toast-error .toast-icon{background:rgba(173,59,92,0.1);}
.toast-error .toast-icon svg{stroke:var(--maroon);}
.toast-error .toast-progress{background:var(--maroon);}
.toast-info{border-left-color:var(--gold);}
.toast-info .toast-icon{background:rgba(201,162,39,0.14);}
.toast-info .toast-icon svg{stroke:var(--gold);}
.toast-info .toast-progress{background:var(--gold);}
@keyframes toastShrink{from{width:100%;}to{width:0%;}}
@media (max-width:560px){
  .toast-wrap{top:14px;width:92vw;}
  .toast{min-width:0;width:100%;max-width:none;}
}

/* Confirm dialog — animated modal replacing native confirm() */
.confirm-backdrop{position:fixed;inset:0;background:rgba(20,10,10,0.45);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:700;}
.confirm-backdrop.open{opacity:1;pointer-events:auto;}
.confirm-dialog{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.94);width:min(380px,88vw);
  background:var(--white);border-radius:10px;box-shadow:var(--shadow);padding:30px 26px 26px;text-align:center;
  z-index:701;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.confirm-dialog.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
.confirm-icon{width:52px;height:52px;border-radius:50%;background:rgba(31,75,74,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.confirm-icon svg{width:24px;height:24px;stroke:var(--teal);}
.confirm-icon.danger{background:rgba(173,59,92,0.1);}
.confirm-icon.danger svg{stroke:var(--maroon);}
.confirm-dialog h3{font-size:19px;margin-bottom:10px;}
.confirm-dialog p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:24px;}
.confirm-actions{display:flex;gap:12px;}
.confirm-actions .btn{flex:1;justify-content:center;}
.confirm-danger-btn{background:var(--maroon) !important;}
@media (hover:hover) and (pointer:fine){ .confirm-danger-btn:hover{background:var(--maroon-deep) !important;} }

.stock-note{font-size:12.5px;font-weight:600;margin:10px 0;}
.stock-note.low{color:var(--maroon);}
.stock-note.ok{color:var(--teal);}

.size-guide-link{background:none;border:none;color:var(--maroon);text-decoration:underline;font-size:12px;cursor:pointer;padding:0;margin-top:10px;display:inline-block;}
.size-guide-dialog{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.96);width:min(520px,90vw);max-height:82vh;overflow-y:auto;
  background:var(--white);border-radius:10px;box-shadow:var(--shadow);padding:30px 30px 26px;
  z-index:701;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.size-guide-dialog.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
.size-guide-dialog .sg-close{position:absolute;top:16px;right:18px;font-size:22px;line-height:1;color:var(--ink-soft);cursor:pointer;background:none;border:none;}
.size-guide-dialog h3{font-size:19px;margin-bottom:4px;padding-right:24px;}
.size-guide-dialog h4{font-size:13px;color:var(--maroon-deep);margin:18px 0 6px;text-transform:uppercase;letter-spacing:.03em;}
.size-guide-dialog p{font-size:13px;color:var(--ink-soft);line-height:1.65;}
.size-guide-dialog table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px;}
.size-guide-dialog th,.size-guide-dialog td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(173,59,92,0.1);}
.prebook-dialog{width:min(420px,90vw);}
.quick-view-dialog{width:min(680px,92vw);padding:28px;}
.quick-view-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;}
.quick-view-media{aspect-ratio:3/4;border-radius:6px;background-repeat:no-repeat;}
.quick-view-info h3{font-size:21px;margin:4px 0 6px;}
@media (max-width:560px){ .quick-view-grid{grid-template-columns:1fr;} .quick-view-media{aspect-ratio:4/3;} }
.prebook-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.prebook-btn .ribbon-lotus{display:inline-flex;color:var(--gold-soft);}
.prebook-btn .ribbon-lotus svg{width:14px;height:14px;display:block;}

/* Reviews */
.review-summary{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap;}
.review-summary .big-rating{font-family:var(--font-display);font-size:44px;color:var(--maroon-deep);}
/* rating picker: a star you have not chosen is white with a gold outline (empty); chosen stars are filled gold */
.star-input{display:flex;gap:4px;margin:8px 0 16px;}
.star-input button{font-size:36px;line-height:1;padding:2px 3px;color:#fff;-webkit-text-stroke:1.6px var(--gold);cursor:pointer;transition:transform .12s;}
@media (hover:hover) and (pointer:fine){ .star-input button:hover{transform:scale(1.12);} }
.star-input button:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;border-radius:4px;}
.star-input button.active,.star-input button.hover{color:var(--gold);}
.review-card{border-bottom:1px solid rgba(173,59,92,0.1);padding:18px 0;}
.review-card-head{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:6px;flex-wrap:wrap;}
.review-card-head strong{font-size:13.5px;}
.verified-tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);font-weight:600;border:1px solid var(--teal);border-radius:20px;padding:2px 9px;}
.review-card .stars{font-size:13px;}
.review-card p{font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.6;}
.pd-occasions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);margin:16px 0 18px;}
.pd-occasions strong{color:var(--ink);}
.occ-chip{padding:4px 12px;border:1px solid rgba(173,59,92,0.28);border-radius:999px;font-size:12px;color:var(--maroon-deep);background:#fff;transition:background .15s,color .15s;}
@media (hover:hover) and (pointer:fine){ .occ-chip:hover{background:var(--maroon);color:#fff;border-color:var(--maroon);} }
/* Reviews: clickable cards, customer photo strip */
.review-card-open{cursor:pointer;border-radius:6px;transition:background .15s;}
.review-card-open:focus-visible{background:rgba(173,59,92,0.04);outline:none;}
@media (hover:hover) and (pointer:fine){ .review-card-open:hover{background:rgba(173,59,92,0.04);outline:none;} }
.review-text-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.review-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.review-thumb{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid rgba(173,59,92,0.18);background:var(--ivory-deep);}
.review-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.review-thumb-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(43,26,29,.6);color:#fff;font-size:14px;font-weight:600;}
.review-readmore{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--maroon);font-weight:600;}
.rv-photo-strip-wrap{margin:0 0 6px;}
.rv-strip-title{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:8px;}
.rv-photo-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;}
.rv-strip-thumb{flex:0 0 auto;width:84px;height:84px;border-radius:6px;overflow:hidden;border:1px solid rgba(173,59,92,0.18);padding:0;scroll-snap-align:start;background:var(--ivory-deep);}
.rv-strip-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
@media (hover:hover) and (pointer:fine){ .rv-strip-thumb:hover{border-color:var(--maroon);} }
/* The review window (modal) */
body.rv-modal-open{overflow:hidden;}
.rv-modal{position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;padding:16px;}
.rv-backdrop{position:absolute;inset:0;background:rgba(18,10,12,.72);}
.rv-dialog{position:relative;width:min(760px,100%);max-height:min(92vh,880px);display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.rv-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(173,59,92,0.12);}
.rv-modal-title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
.rv-close{width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1;color:var(--maroon-deep);background:rgba(173,59,92,.08);}
@media (hover:hover) and (pointer:fine){ .rv-close:hover{background:rgba(173,59,92,.18);} }
.rv-modal-scroll{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.rv-gallery{position:relative;background:#120a0c;}
.rv-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.rv-track::-webkit-scrollbar{display:none;}
.rv-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;height:min(56vh,460px);}
.rv-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.rv-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--maroon-deep);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;}
.rv-prev{left:10px;} .rv-next{right:10px;}
.rv-counter{position:absolute;right:10px;bottom:10px;padding:3px 10px;border-radius:999px;background:rgba(18,10,12,.7);color:#fff;font-size:12px;}
.rv-body{padding:18px 20px 8px;}
.rv-rating{display:flex;align-items:center;gap:10px;}
.rv-rating .stars{font-size:18px;}
.rv-outof{font-size:12.5px;color:var(--ink-soft);}
.rv-title{font-family:var(--font-body);font-size:17px;font-weight:700;color:var(--ink);margin:10px 0 4px;}
.rv-who{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft);margin:6px 0 12px;}
.rv-who strong{color:var(--ink);}
.rv-text{font-size:14.5px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-break:break-word;}
.rv-reply{margin-top:14px;padding:10px 12px;background:var(--ivory-deep);border-radius:4px;border-left:2px solid var(--maroon);}
.rv-reply p{font-size:13px;margin:0;}
.rv-reply-label{font-size:11px !important;font-weight:600;color:var(--maroon);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px !important;}
.rv-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-top:1px solid rgba(173,59,92,0.12);font-size:12px;color:var(--ink-soft);}
.rv-modal-foot .btn[disabled]{opacity:.45;cursor:not-allowed;}
@media (max-width:640px){
  .rv-modal{padding:0;align-items:flex-end;}
  .rv-dialog{width:100%;max-height:94vh;border-radius:14px 14px 0 0;}
  .rv-slide{height:min(52vh,420px);}
  .rv-modal-foot .btn{padding:7px 10px;font-size:11.5px;}
}
.review-form{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:22px;margin:18px 0 30px;}

/* Order tracking timeline */
.order-timeline{display:flex;gap:0;margin:14px 0 6px;}
.order-timeline .tl-step{flex:1;text-align:center;position:relative;}
.order-timeline .tl-dot{width:14px;height:14px;border-radius:50%;background:rgba(173,59,92,0.15);margin:0 auto 6px;}
.order-timeline .tl-step.done .tl-dot{background:var(--teal);}
.order-timeline .tl-step:not(:last-child)::after{content:'';position:absolute;top:6px;left:55%;width:90%;height:2px;background:rgba(173,59,92,0.15);}
.order-timeline .tl-step.done:not(:last-child)::after{background:var(--teal);}
.order-timeline .tl-label{font-size:10.5px;color:var(--ink-soft);}
.order-timeline .tl-step.done .tl-label{color:var(--teal);font-weight:600;}
.order-status.cancelled{background:var(--maroon);}
.order-status.returned{background:var(--gold);color:var(--maroon-deep);}
.refund-note{display:inline-block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--maroon);font-weight:600;}
.stat-card .stat-sub{display:block;margin-top:4px;font-size:10.5px;font-style:normal;color:var(--ink-soft);text-transform:none;letter-spacing:0;}
.order-status.low{background:var(--gold);color:var(--maroon-deep);}
.order-status.ok{background:var(--teal);}
.cancel-order-btn{font-size:11.5px;color:var(--maroon);text-decoration:underline;margin-top:10px;cursor:pointer;}

/* Content pages: About / Our Weaves / FAQ / Policies */
.story-band{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.story-band > *{min-width:0;}
.story-band .story-art{aspect-ratio:4/3;border-radius:4px;box-shadow:var(--shadow);}
.logo-showcase{background:var(--ivory-deep);display:flex;align-items:center;justify-content:center;padding:26px;border:1px solid rgba(201,162,39,0.4);}
.logo-showcase img{width:100%;height:100%;object-fit:contain;}
.story-band h2{font-size:28px;margin-bottom:14px;}
.story-band p{color:var(--ink-soft);font-size:14px;line-height:1.8;margin-bottom:12px;}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;background:var(--white);border-top:1px solid rgba(173,59,92,0.1);border-bottom:1px solid rgba(173,59,92,0.1);}
.stats-strip div{padding:30px 20px;border-right:1px solid rgba(173,59,92,0.1);}
.stats-strip div:last-child{border-right:none;}
.stats-strip strong{display:block;font-family:var(--font-display);font-size:32px;color:var(--maroon-deep);}
.stats-strip span{font-size:12px;color:var(--ink-soft);}
.weave-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.weave-card{background:var(--white);border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgba(43,26,29,0.06);}
.weave-card .weave-art{aspect-ratio:16/10;}
.weave-card-body{padding:18px 20px;}
.weave-card-body h4{font-size:16px;margin-bottom:4px;}
.weave-card-body span{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.weave-card-body p{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.6;}
/* Weave-tile rail — originally index.html-only, now shared with
   collection.html so a collection's weave tiles look the same. Exactly 4
   visible at a time; an admin adding more fabrics scrolls instead of
   wrapping into a cramped row. */
.cat-rail-wrap{position:relative;}
/* the rail scrolls, which clips anything outside it — padding (cancelled by the negative margin) leaves room for a circle's hover grow/tilt and shadow */
.cat-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 14px 30px;margin:-14px -14px -26px;scroll-padding:0 14px;}
.cat-rail::-webkit-scrollbar{display:none;}
.cat-item{flex:0 0 calc(25% - 16.5px);scroll-snap-align:start;text-align:center;cursor:pointer;}
/* the picture fills the whole circle edge to edge; only a slim border frames it */
.cat-swatch{width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:12px;border:2px solid var(--gold-soft);padding:0;overflow:hidden;background-clip:padding-box;}
.cat-swatch-inner{width:100%;height:100%;border-radius:50%;}
.cat-item strong{font-size:13px;font-weight:500;}
/* placeholders shown for the first moments of a page load, so the weave row never looks empty */
.cat-item.sk .cat-swatch-inner{background:rgba(173,59,92,0.08);animation:skPulse 1.3s ease-in-out infinite;}
.cat-item.sk strong{opacity:0;}
@keyframes skPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){ .cat-item.sk .cat-swatch-inner{animation:none;} }
.cat-rail-wrap .reel-scroll-btn{display:none;}
.cat-rail-wrap.has-overflow .reel-scroll-btn{display:flex;}
/* Small, quiet arrows on phones as well (they only show when there is more to scroll to, and each hides at its own end). */
.cat-rail-wrap .reel-scroll-btn.at-end{opacity:0;pointer-events:none;}
@media (max-width:760px){
  .cat-rail-wrap .reel-scroll-btn{width:30px;height:30px;font-size:20px;top:calc(25vw - 28px);opacity:.92;box-shadow:0 2px 8px rgba(80,30,40,.22);}
  .cat-rail-wrap .reel-scroll-btn.at-end{opacity:0;}
  .cat-rail-wrap .reel-scroll-btn.left{left:6px;} .cat-rail-wrap .reel-scroll-btn.right{right:6px;}
}
@media (max-width:980px){ .cat-item{flex:0 0 calc(33.333% - 14.7px);} }
/* Phones: three smaller circles across (about 110px) instead of two big ones, so Shop by Weave takes a small part of the screen and
   the next band shows on the first screen; more weaves than three scroll sideways as before. */
@media (max-width:760px){
  .cat-rail{gap:14px;}
  .cat-item{flex:0 0 calc(33.333% - 9.4px);}
  .cat-swatch{margin-bottom:8px;border-width:2px;}
  .cat-item strong{display:block;font-size:12px;line-height:1.25;}
  .cat-rail-wrap .reel-scroll-btn{top:calc(14vw - 15px);}
}


/* A collection's "meaning" copy (collection.html) — set apart as a small
   centered editorial quote rather than a plain left-aligned paragraph. */
/* Collection page hero (shop.html in collection mode): the admin's hero image
   with the name/tagline centred over a dark wash; brand gradient if no image. */
.collection-hero{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ivory);overflow:hidden;background:linear-gradient(120deg,#7A2740,#B87F55);}
.collection-hero-media{position:absolute;inset:0;background-size:cover;background-position:center;}
.collection-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,10,.28),rgba(20,10,10,.55));}
.collection-hero-inner{position:relative;z-index:1;padding-top:64px;padding-bottom:64px;}
.collection-hero h1{color:var(--ivory);font-size:clamp(30px,5vw,54px);margin:6px 0 10px;}
.collection-hero .breadcrumb,.collection-hero .breadcrumb a{color:rgba(250,245,236,.85);}
.collection-hero-tagline{color:var(--gold-soft);font-size:13px;letter-spacing:.14em;text-transform:uppercase;}
.collection-meaning-wrap{padding:0;}
.section.in-collection{padding-top:20px !important;}
@media (max-width:760px){ .collection-hero{min-height:230px;} .collection-hero-inner{padding-top:40px;padding-bottom:40px;} }

/* Mobile/tablet: the filter column becomes a slide-in drawer behind a
   "Filters" button beside Sort, so the first screen is sarees, not filters.
   Desktop (>980px) is unchanged: sticky sidebar, none of this shows. */
.toolbar-actions{display:flex;align-items:center;gap:10px;}
.filters-toggle,.filters-drawer-head,.filters-drawer-foot,.filters-backdrop{display:none;}
.filters-toggle svg{width:16px;height:16px;stroke:var(--maroon);}
.filters-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--maroon);color:var(--ivory);font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
@media (max-width:980px){
  .result-count{flex-basis:100%;}
  .toolbar-actions{width:100%;}
  .toolbar-actions .custom-select{flex:1;min-width:0;}
  .filters-toggle{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;border:1px solid rgba(173,59,92,0.25);padding:10px 14px;border-radius:2px;font-size:13px;background:var(--white);}
  .filters-toggle:hover{border-color:var(--maroon);}
  .shop-layout .filters{position:fixed;top:0;left:0;bottom:0;width:min(88vw,360px);z-index:301;border-radius:0;border:none;padding:0 20px;overflow-y:auto;transform:translateX(-104%);transition:transform .3s ease;box-shadow:0 0 40px rgba(20,10,10,.25);visibility:hidden;}
  .shop-layout .filters.open{transform:none;visibility:visible;}
  .filters-drawer-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;background:var(--white);padding:16px 0;margin-bottom:6px;border-bottom:1px solid rgba(173,59,92,0.12);font-size:15px;}
  .filters-drawer-head button{font-size:26px;line-height:1;color:var(--maroon-deep);padding:0 4px;}
  .filters-drawer-foot{display:block;position:sticky;bottom:0;background:var(--white);padding:14px 0 16px;margin-top:18px;border-top:1px solid rgba(173,59,92,0.12);}
  .filters-backdrop.open{display:block;position:fixed;inset:0;z-index:300;background:rgba(20,10,10,.5);}
  body.filters-open{overflow:hidden;}
}
@media (prefers-reduced-motion:reduce){ .shop-layout .filters{transition:none;} }

.collection-meaning{max-width:620px;margin:0 auto 36px;text-align:center;}
.collection-meaning p{color:var(--ink-soft);font-size:15.5px;font-style:italic;line-height:1.8;}
.collection-meaning p::before{content:'“';}
.collection-meaning p::after{content:'”';}
.faq-item{border-bottom:1px solid rgba(173,59,92,0.12);}
.faq-q{width:100%;text-align:left;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:500;color:var(--ink);}
.faq-q svg{width:16px;height:16px;stroke:var(--maroon);transition:transform .2s ease;flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:13.5px;color:var(--ink-soft);line-height:1.7;}
.faq-item.open .faq-a{max-height:240px;padding-bottom:18px;}
.prose h2{font-size:20px;margin:28px 0 10px;}
.prose h2:first-child{margin-top:0;}
.prose p,.prose li{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-bottom:10px;}
.prose ul{list-style:disc;padding-left:22px;}
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;}
.contact-layout > *{min-width:0;}
.contact-info-card{background:var(--maroon-deep);color:var(--ivory);border-radius:4px;padding:32px;}
.contact-info-card h3{color:var(--ivory);font-size:20px;margin-bottom:14px;}
.contact-info-card p{font-size:13.5px;color:rgba(250,245,236,0.8);line-height:1.9;margin-bottom:8px;}
.trousseau-card{background:var(--white);border:1px solid rgba(173,59,92,0.12);border-radius:4px;padding:22px;}

@media (max-width:980px){
  .story-band{grid-template-columns:1fr;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .weave-grid{grid-template-columns:repeat(2,1fr);}
  .contact-layout{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .weave-grid{grid-template-columns:1fr;}
}

@media (max-width:980px){
  .main-nav{display:none;}
  .hamburger{display:flex;}
  .shop-layout{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .pd-grid{grid-template-columns:1fr;}
  .cart-layout{grid-template-columns:1fr;}
  .summary-card{position:static;}
  .account-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1.5fr 1fr;gap:36px 24px;}
  /* Two columns on tablet/phone: the brand block on the left and the last link column (Company) beside it,
     with the other columns on the next row. */
  .footer-cols > div{order:2;}
  .footer-cols > div:last-child{order:1;}
  .footer-grid .footer-mail{overflow-wrap:anywhere;}
}
@media (max-width:480px){
  .footer-grid .footer-mail{font-size:12px;gap:6px;}
}
/* Phone widths only — desktop's 3:4 portrait image is fine since the
   details sit beside it, but stacked full-width on a phone that same
   ratio runs ~500-570px tall before the colour swatches even start.
   5:4 (shorter than square) cuts that down further still. Arrows are
   hidden here too since swipe already covers touch devices. */
@media (max-width:760px){
  /* A portrait frame (4:5) so the whole saree shows at first glance instead of a wide crop of it; capped so it never
     fills the screen. Photos are shown whole (contain) on a soft ivory ground - a few are taller than the frame, and
     those get a little ivory at the sides rather than being cut. */
  .pd-media{aspect-ratio:4/5;max-height:68vh;width:100%;background:var(--ivory-deep);}
  .pd-flip-slide > img{object-fit:contain;}
  .pd-flip-slide > video{object-fit:contain;background:var(--ivory-deep);}
  .pd-media-arrow{display:none;}
}
/* smooth colour change (see switchGallery in product.html) */
.pd-media > *{transition:opacity .22s ease;}
.pd-media.is-swapping > *{opacity:0;}
.pd-colours{margin-top:14px;}
.pd-colours .swatch-row{margin-bottom:4px;}
.pd-colours .stock-note{margin:8px 0 0;}
.pd-colours .stock-note[hidden]{display:none;}
.pd-colours + .pd-desc{margin-top:16px;}
@media (max-width:560px){
  .product-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .header-inner{padding:14px 18px;}
  .container{padding:0 18px;}
  .auth-shell{padding:28px;}
  .form-row-2{grid-template-columns:1fr;}
}

/* iOS Safari zooms the whole page in when a focused text input's computed
   font-size is under 16px — every real text input a visitor types into
   (login/register/checkout/account/address forms, shop search, the promo
   code box, order tracking, the instant-search overlay) gets bumped to 16px
   on phone-sized viewports only; desktop keeps its original 12.5-15px
   sizing untouched. Native <select>s get the same treatment for consistency. */
@media (max-width:760px){
  .form-field input,.form-field select,.form-field textarea,
  .search-page-input,.promo-row input,.track-search-row input,
  .search-input-row input,.sort-select,.return-item-qty select{
    font-size:16px;
  }
}

/* ================= Mini-cart drawer ================= */
.mini-cart-backdrop{position:fixed;inset:0;background:rgba(20,10,10,0.45);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:300;}
.mini-cart-backdrop.open{opacity:1;pointer-events:auto;}
.mini-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--ivory);box-shadow:-10px 0 30px rgba(43,26,29,0.2);z-index:301;transform:translateX(100%);transition:transform .35s ease;display:flex;flex-direction:column;}
.mini-cart-drawer.open{transform:translateX(0);}
.mini-cart-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid rgba(173,59,92,0.1);}
.mini-cart-head h3{font-size:19px;}
.mini-cart-close{font-size:26px;line-height:1;color:var(--maroon-deep);}
.mini-cart-body{flex:1;overflow-y:auto;padding:10px 22px;}
.mini-cart-line{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(173,59,92,0.08);}
.mini-cart-thumb{width:48px;height:64px;border-radius:2px;flex-shrink:0;}
.mini-cart-line-info{flex:1;}
.mini-cart-line-info strong{display:block;font-size:13px;font-weight:500;}
.mini-cart-line-info span{font-size:12px;color:var(--ink-soft);}
.mini-cart-stepper{margin-top:6px;transform:scale(.85);transform-origin:left center;}
.mini-cart-foot{padding:18px 22px calc(24px + env(safe-area-inset-bottom));border-top:1px solid rgba(173,59,92,0.1);}

/* ================= Mobile bottom navigation ================= */
.bottom-nav{display:none;}
@media (max-width:760px){
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;
    background:var(--white);border-top:1px solid rgba(173,59,92,0.12);
    box-shadow:0 -4px 16px rgba(43,26,29,0.08);padding:6px 4px calc(4px + env(safe-area-inset-bottom));
  }
  /* Extra bottom padding matches the bar's own safe-area growth above, so
     page content still clears it exactly on iPhones with a home indicator
     and stays at the original 64px everywhere else (env() is 0 there). */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .bottom-nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:10px;color:var(--ink-soft);position:relative;}
  .bottom-nav-tab.active{color:var(--maroon-deep);font-weight:600;}
  .bottom-nav-tab svg{width:20px;height:20px;stroke:currentColor;}
  .bottom-nav-icon-wrap{position:relative;}
  .bottom-nav-icon-wrap .badge-count{position:absolute;top:-4px;right:-8px;}
}

/* ================= Saree Finder floating widget ================= */
.saree-finder-btn{
  position:fixed;right:22px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:220;
  display:flex;align-items:center;gap:8px;padding:13px 18px 13px 15px;
  background:var(--maroon);color:var(--ivory);border-radius:30px;box-shadow:var(--shadow);
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;transition:transform .25s ease;
}
@media (hover:hover) and (pointer:fine){ .saree-finder-btn:hover{transform:translateY(-2px) scale(1.03);} }
.saree-finder-btn svg{width:18px;height:18px;stroke:var(--gold-soft);fill:var(--gold-soft);flex-shrink:0;}
.saree-finder-backdrop{position:fixed;inset:0;z-index:219;background:transparent;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.saree-finder-backdrop.open{pointer-events:auto;opacity:1;}
.saree-finder-panel{
  position:fixed;right:22px;bottom:88px;z-index:221;width:340px;max-width:calc(100vw - 24px);
  background:var(--white);border-radius:12px;box-shadow:0 18px 50px rgba(60,20,30,.28);
  opacity:0;transform:translateY(12px) scale(.97);pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  max-height:min(520px, calc(100vh - 120px));overflow-y:auto;padding-bottom:6px;
}
.saree-finder-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.finder-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 12px 4px 14px;}
.finder-head strong{flex:1;text-align:center;font-family:var(--font-display);font-size:16px;color:var(--maroon-deep);}
.finder-back,.finder-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--maroon);border-radius:50%;flex-shrink:0;}
@media (hover:hover) and (pointer:fine){ .finder-back:not(span):hover,
.finder-close:hover{background:var(--blush);} }
.finder-close{font-size:24px;line-height:1;}
.finder-progress{display:flex;justify-content:center;gap:6px;padding:2px 0 8px;}
.finder-progress span{width:22px;height:3px;border-radius:2px;background:rgba(173,59,92,.18);}
.finder-progress span.on{background:var(--maroon);}
.finder-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 14px 10px;}
.finder-chip{border:1px solid rgba(173,59,92,0.25);border-radius:999px;padding:10px 10px;font-size:13px;line-height:1.2;text-align:center;background:#fff;color:var(--ink);transition:background .2s ease, border-color .2s ease, color .2s ease;}
.finder-chip.picked{background:var(--maroon);border-color:var(--maroon);color:var(--ivory);}
@media (hover:hover) and (pointer:fine){ .finder-chip:hover{background:var(--maroon);border-color:var(--maroon);color:var(--ivory);} }
.finder-count{margin:0;padding:0 16px 10px;font-size:12px;color:var(--ink-soft);text-align:center;min-height:16px;}
.finder-note{margin:2px 16px 8px;font-size:12.5px;color:var(--ink-soft);}
.finder-again{display:block;margin:4px auto 10px;padding:6px 10px;font-size:12.5px;color:var(--maroon);text-decoration:underline;}
.finder-results{display:flex;flex-direction:column;gap:8px;padding:6px 14px 10px;}
.finder-result-card{display:flex;align-items:center;gap:12px;border:1px solid rgba(173,59,92,0.12);border-radius:8px;padding:8px;transition:box-shadow .2s ease, border-color .2s ease;}
@media (hover:hover) and (pointer:fine){ .finder-result-card:hover{box-shadow:var(--shadow);border-color:rgba(173,59,92,.35);} }
.finder-result-media{width:48px;height:62px;border-radius:4px;flex-shrink:0;background-size:cover !important;background-position:center !important;}
.finder-result-text{min-width:0;}
.finder-result-card strong{display:block;font-size:13px;font-weight:500;line-height:1.3;}
.finder-result-card small{display:block;font-size:11px;color:var(--ink-soft);margin:1px 0 2px;}
.finder-result-card span{font-size:13px;color:var(--maroon-deep);font-weight:600;}
.finder-result-card em{font-style:normal;font-size:11px;color:var(--gold);margin-left:4px;font-weight:500;}
.saree-finder-panel .btn-block{margin:4px 14px 6px;width:calc(100% - 28px);}

/* ================= Back to top ================= */
.back-to-top-btn{
  position:fixed;left:22px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:220;width:42px;height:42px;border-radius:50%;
  background:var(--white);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease;
}
.back-to-top-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top-btn svg{width:18px;height:18px;stroke:var(--maroon-deep);}

@media (max-width:760px){
  .saree-finder-btn span{display:none;}
  .saree-finder-btn{padding:13px;border-radius:50%;}
  .saree-finder-btn svg{width:20px;height:20px;}
  .saree-finder-btn{bottom:calc(76px + env(safe-area-inset-bottom));}
  .saree-finder-backdrop{background:rgba(18,10,12,.38);}
  .saree-finder-panel{left:12px;right:12px;width:auto;max-width:none;bottom:calc(132px + env(safe-area-inset-bottom));max-height:min(380px, calc(100vh - 220px - env(safe-area-inset-bottom)));border-radius:14px;}
  .finder-head{padding-top:10px;} .finder-head strong{font-size:15px;}
  .finder-chips{gap:6px;padding:4px 12px 8px;} .finder-chip{padding:8px 8px;font-size:12.5px;}
  .finder-result-media{width:42px;height:54px;} .finder-results{padding:4px 12px 8px;gap:6px;} .finder-result-card{padding:6px 8px;}
  .saree-finder-panel .btn-block{margin:2px 12px 4px;width:calc(100% - 24px);}
  .back-to-top-btn{bottom:calc(76px + env(safe-area-inset-bottom));}
  .mini-cart-drawer{width:100%;max-width:100%;}

  /* The product page's sticky "Add to Bag" bar stacks on top of the bottom
     nav too, so on that page only, these two floating buttons need to clear
     BOTH bars, not just the bottom nav — otherwise they land on top of the
     sticky bar's own Add to Bag button. :has() scopes this to whichever page
     actually renders that bar, wherever in the document it sits, rather than
     hardcoding one page's filename here. */
  body:has(.sticky-add-bar) .saree-finder-btn,
  body:has(.sticky-add-bar) .back-to-top-btn{
    bottom:calc(76px + 64px + env(safe-area-inset-bottom));
  }

  /* On the Bag page, a short cart (few items) ends close enough to the
     bottom that the promo "Apply" button sits at the same screen height as
     these floating buttons on first load — before any scrolling, so extra
     space after the content doesn't help; the buttons themselves need to
     start higher on this page specifically. */
  body[data-page="cart.html"] .saree-finder-btn,
  body[data-page="cart.html"] .back-to-top-btn{
    bottom:calc(76px + 60px + env(safe-area-inset-bottom));
  }
}

/* ================= Sticky mobile "Add to Bag" bar (product page) ================= */
.sticky-add-bar{display:none;}
@media (max-width:760px){
  .sticky-add-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:210;
    background:var(--white);border-top:1px solid rgba(173,59,92,0.12);
    padding:10px 16px;box-shadow:0 -4px 16px rgba(43,26,29,0.08);
  }
  .sticky-add-bar > div{display:flex;flex-direction:column;min-width:0;}
  .sticky-add-bar strong{color:var(--maroon-deep);font-size:15px;}
  .sticky-add-bar span{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
  .sticky-add-bar .btn{flex-shrink:0;padding:12px 20px;}
  /* Reserves clearance from the fixed sticky bar below — belongs on the
     end of the whole info column (not .pd-actions specifically), so it
     shows up as breathing room after the last thing in the panel rather
     than as an odd gap wherever .pd-actions happens to sit in the order. */
  /* (No extra bottom padding on .pd-info: it used to add 70px here, which stacked on the section's own padding and left a big
     empty band between the buttons and "Ratings & Reviews". The page always continues below the details, so the fixed
     bar never hides anything that has no space after it.) */
  #pdWrap{padding-bottom:40px;}
}

/* ================= Animated order tracker ================= */
.track-search-row{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.track-search-row input{flex:1;min-width:180px;border:1px solid rgba(173,59,92,0.25);padding:12px 14px;border-radius:2px;font-size:13.5px;background:var(--white);}
#orderPicker{margin-bottom:28px;}
.picker-chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.picker-chip{border:1px solid rgba(173,59,92,0.25);border-radius:20px;padding:8px 14px;font-size:12px;transition:background .2s ease,border-color .2s ease;}
@media (hover:hover) and (pointer:fine){ .picker-chip:hover{background:var(--blush);border-color:var(--maroon);} }

.tracker-card{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:8px;padding:30px 28px;box-shadow:var(--shadow);}
.tracker-card.entering{animation:trackerFadeIn .5s ease;}
@keyframes trackerFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.tracker-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex-wrap:wrap;gap:8px;}
.tracker-order-id{font-family:var(--font-display);font-size:16px;color:var(--maroon-deep);}
.live-badge{display:flex;align-items:center;gap:9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);font-weight:600;}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);position:relative;}
.live-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--teal);animation:liveDotPing 1.6s ease-out infinite;}
@keyframes liveDotPing{0%{transform:scale(0.6);opacity:1;}100%{transform:scale(1.9);opacity:0;}}

.eta-line{font-size:13px;color:var(--ink-soft);margin:12px 0 34px;}
.eta-line strong{color:var(--maroon-deep);}
.eta-line.delivered-line strong{color:var(--teal);}

.tracker-path{display:flex;align-items:flex-start;margin-bottom:10px;}
.tracker-node{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;}
.tracker-icon-circle{width:44px;height:44px;border-radius:50%;background:var(--ivory-deep);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;flex-shrink:0;transition:background .4s ease;}
.tracker-icon-circle svg{width:19px;height:19px;stroke:var(--ink-soft);transition:stroke .4s ease;}
.tracker-node.done .tracker-icon-circle{background:var(--teal);}
.tracker-node.done .tracker-icon-circle svg{stroke:var(--ivory);}
.tracker-node.current .tracker-icon-circle{background:var(--maroon);box-shadow:0 0 0 4px rgba(173,59,92,0.15);}
.tracker-node.current .tracker-icon-circle svg{stroke:var(--ivory);}
.tracker-icon-circle.cancelled{background:var(--maroon);}
.tracker-icon-circle.cancelled svg{stroke:var(--ivory);}
.pulse-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--maroon);animation:pulseRing 1.8s ease-out infinite;}
@keyframes pulseRing{0%{transform:scale(0.85);opacity:1;}100%{transform:scale(1.5);opacity:0;}}

.tracker-node-label{margin-top:10px;display:flex;flex-direction:column;gap:2px;}
.tracker-node-label strong{font-size:12px;color:var(--ink);}
.tracker-node-label span{font-size:10.5px;color:var(--ink-soft);}
.tracker-node.current .tracker-node-label strong{color:var(--maroon-deep);}

.tracker-connector{position:absolute;top:22px;left:50%;width:100%;height:3px;background:var(--ivory-deep);z-index:1;overflow:hidden;}
.tracker-connector.filled{background:var(--teal);}
.connector-shine{position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent);}
.tracker-connector.filled .connector-shine{animation:zariShine 3.5s ease-in-out infinite;}

.updates-heading{font-size:15px;margin:30px 0 14px;}
.updates-feed{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
.update-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(173,59,92,0.08);opacity:0;animation:updateSlideIn .4s ease forwards;}
.update-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.update-item strong{display:block;font-size:13px;}
.update-item span{font-size:11.5px;color:var(--ink-soft);}
@keyframes updateSlideIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}

.cancelled-banner{display:flex;align-items:center;gap:16px;padding:20px;background:rgba(173,59,92,0.06);border-radius:6px;margin-bottom:20px;}
.cancelled-banner strong{display:block;color:var(--maroon-deep);font-size:15px;}
.cancelled-banner span{font-size:13px;color:var(--ink-soft);}

.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden;}
.confetti-piece{position:absolute;top:-20px;width:9px;height:14px;opacity:0.9;border-radius:2px;animation:confettiFall linear forwards;}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(110vh) rotate(540deg);opacity:0.3;}
}

@media (max-width:640px){
  .tracker-card{padding:24px 18px;}
  .tracker-path{flex-direction:column;align-items:flex-start;gap:30px;}
  .tracker-node{flex-direction:row;align-items:center;text-align:left;gap:14px;width:100%;}
  .tracker-node-label{margin-top:0;}
  .tracker-connector{top:44px;left:21px;width:3px;height:30px;}
  .connector-shine{left:0;top:-40%;width:100%;height:35%;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.75),transparent);}
}

/* ================= Instant search overlay ================= */
.search-backdrop{position:fixed;inset:0;background:rgba(20,10,10,0.4);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:310;}
.search-backdrop.open{opacity:1;pointer-events:auto;}
.search-overlay{
  position:fixed;top:96px;left:50%;transform:translateX(-50%) translateY(-10px);width:min(600px,92vw);
  background:var(--white);border-radius:8px;box-shadow:var(--shadow);z-index:311;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;max-height:70vh;display:flex;flex-direction:column;
}
.search-overlay.open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.search-input-row{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid rgba(173,59,92,0.1);flex-shrink:0;}
.search-input-row svg{width:18px;height:18px;stroke:var(--maroon);flex-shrink:0;}
.search-input-row input{flex:1;border:none;font-size:15px;background:transparent;}
.search-input-row input:focus{outline:none;}
.search-input-row button{font-size:22px;color:var(--maroon-deep);line-height:1;}
.search-results{overflow-y:auto;padding:8px 10px;}
.search-hint{padding:24px 16px;text-align:center;font-size:13px;color:var(--ink-soft);}
.search-result-list{display:flex;flex-direction:column;}
.search-result-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:4px;transition:background .15s ease;}
@media (hover:hover) and (pointer:fine){ .search-result-item:hover{background:var(--ivory);} }
.search-result-media{width:42px;height:56px;border-radius:3px;flex-shrink:0;}
.search-result-info strong{display:block;font-size:13px;font-weight:500;}
.search-result-info span{font-size:12px;color:var(--ink-soft);}
.search-view-all{display:block;text-align:center;padding:14px;font-size:12.5px;font-weight:600;color:var(--maroon);text-transform:uppercase;letter-spacing:.04em;border-top:1px solid rgba(173,59,92,0.1);}
@media (max-width:640px){
  .search-overlay{top:78px;width:94vw;max-height:75vh;}
}

/* Admin table pager (25 rows per page) */
.admin-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:12px 0 4px;font-size:12.5px;color:var(--ink-soft);}
.admin-pager-btns{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.admin-pager button{min-width:34px;height:32px;padding:0 10px;border:1px solid rgba(173,59,92,0.18);background:#fff;color:var(--ink);border-radius:4px;font:inherit;cursor:pointer;}
@media (hover:hover) and (pointer:fine){ .admin-pager button:hover:not(:disabled){border-color:var(--maroon);color:var(--maroon);} }
.admin-pager button.on{background:var(--maroon);border-color:var(--maroon);color:#fff;}
.admin-pager button:disabled{opacity:.4;cursor:default;}
.admin-pager .gap{padding:0 4px;}

/* Order inquiry window */
body.oi-open{overflow:hidden;}
.oi-modal{position:fixed;inset:0;z-index:2050;display:flex;align-items:center;justify-content:center;padding:16px;}
.oi-backdrop{position:absolute;inset:0;background:rgba(18,10,12,.7);}
.oi-dialog{position:relative;width:min(620px,100%);max-height:min(92vh,900px);display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.oi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(173,59,92,0.12);}
.oi-head h3{font-family:var(--font-display);font-size:22px;color:var(--maroon-deep);margin:0;}
.oi-order{font-size:12.5px;color:var(--ink-soft);}
.oi-x{width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1;color:var(--maroon-deep);background:rgba(173,59,92,.08);flex:0 0 auto;}
.oi-body{padding:18px 20px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.oi-body .form-field{margin-bottom:16px;}
.oi-items{display:flex;flex-direction:column;gap:8px;}
.oi-body .oi-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(173,59,92,0.2);border-radius:8px;background:#fff;cursor:pointer;}
.oi-body .oi-item input{width:auto;margin:0;accent-color:var(--maroon);flex:0 0 auto;padding:0;border:0;}
.oi-body .oi-item select{width:auto !important;padding:6px 8px !important;flex:0 0 auto;}
.oi-thumb{display:block;flex:0 0 auto;width:44px;height:56px;border-radius:5px;background-size:cover;background-position:center;}
.oi-body .oi-item-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.35;}
.oi-item-text small{color:var(--ink-soft);font-size:11.5px;}
.oi-count{display:block;text-align:right;font-size:11.5px;color:var(--ink-soft);margin-top:4px;}
.oi-req{color:var(--maroon);font-weight:600;font-size:11.5px;}
.oi-hint{font-size:12px;color:var(--ink-soft);margin:6px 0 0;line-height:1.5;}
.oi-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap;}
.oi-notice{padding:12px 14px;border-radius:8px;background:rgba(173,59,92,0.06);margin-bottom:14px;font-size:13.5px;line-height:1.55;}
.oi-notice p{margin:4px 0 0;}
.oi-notice.is-second{background:#fff7e0;border:1px solid #ecd9a0;color:#6b5311;}
.oi-notice.is-final{background:rgba(173,59,92,0.1);}
.oi-hist{padding:10px 12px;border-left:3px solid rgba(173,59,92,0.35);background:rgba(173,59,92,0.04);border-radius:0 6px 6px 0;margin-bottom:8px;font-size:13px;}
.oi-hist.is-rejected{border-left-color:var(--maroon);}
.oi-hist p{margin:4px 0 0;color:var(--ink-soft);}
.oi-done{text-align:center;padding:14px 6px 6px;}
.oi-done h4{font-family:var(--font-display);font-size:22px;color:var(--maroon-deep);margin:10px 0 6px;}
.oi-done p{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 0 16px;}
.oi-tick{width:54px;height:54px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:rgba(31,75,74,.12);color:var(--teal);font-size:28px;}
@media (max-width:640px){
  .oi-modal{padding:0;align-items:flex-end;}
  .oi-dialog{width:100%;max-height:95vh;border-radius:14px 14px 0 0;}
  .oi-foot .btn{flex:1;justify-content:center;}
}
.oi-attempt{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;background:rgba(173,59,92,0.1);color:var(--maroon-deep);vertical-align:2px;}
.oi-attempt.last{background:#fff1d6;color:#8a5a00;}

/* Sign-in / sign-up code step */
.code-sent{background:rgba(31,75,74,0.08);color:var(--teal);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:16px;line-height:1.5;}
.code-sent button{color:var(--maroon);text-decoration:underline;font-size:13px;margin-left:6px;}
.form-field .code-input{letter-spacing:.5em;font-size:22px;text-align:center;font-weight:600;}
.resend-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--ink-soft);}
.resend-row button{color:var(--maroon);text-decoration:underline;font-size:13px;}
.resend-row button[disabled]{color:var(--ink-soft);text-decoration:none;cursor:default;}
.phone-row{display:flex;gap:8px;}
.phone-row .cc-select{flex:0 0 auto;width:140px;padding:12px 8px;border:1px solid rgba(173,59,92,0.25);background:#fff;border-radius:2px;font-size:13px;}
.phone-row input{flex:1;min-width:0;}
@media (max-width:420px){ .phone-row .cc-select{width:112px;font-size:12.5px;} }

/* Where an order came from (Orders list, order detail, Instagram Orders) */
.src-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:10px;margin-top:3px;}
.src-tag.ig{background:rgba(173,59,92,0.12);color:var(--maroon);border:1px solid rgba(173,59,92,0.3);}

/* Cost price -> Final CP -> selling price, and the profit panel (admin) */
.pricing-group{background:rgba(31,75,74,0.05);border:1px solid rgba(31,75,74,0.16);border-radius:6px;padding:14px 14px 4px;margin:4px 0 14px;}
.pricing-group .pf-ro{background:rgba(0,0,0,0.04);color:var(--ink);cursor:default;border-style:dashed;}
.pricing-group .pf-sp[readonly]{background:rgba(31,75,74,0.1);font-weight:700;color:var(--teal);border-style:solid;}
.pf-profit{font-size:12.5px;color:var(--teal);margin:0 0 12px;min-height:1px;}
.pf-profit.pf-loss{color:var(--maroon);font-weight:600;}
.pf-try{background:rgba(201,162,75,0.1);border-radius:6px;padding:12px 14px;margin:6px 0 16px;}
.pf-try-out{font-size:13px;line-height:1.7;}
.pf-reprice{margin-top:26px;padding-top:18px;border-top:1px solid rgba(173,59,92,0.14);}
.pf-reprice h4{font-family:var(--font-body);font-size:14px;margin-bottom:6px;}
.pf-reprice p{font-size:12.5px;color:var(--ink-soft);margin-bottom:12px;line-height:1.6;}
.profit-panel{margin-top:26px;padding:18px;border:1px solid rgba(31,75,74,0.2);border-radius:8px;background:rgba(31,75,74,0.03);}
.profit-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px;}
.profit-head h3{font-size:16px;margin:0;}
.profit-head .order-filter-row{margin-bottom:0;}
.stat-card-profit strong{color:var(--teal);}
.stat-card-profit.stat-card-warn strong{color:var(--maroon);}
.profit-note{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:10px 0;padding:10px 12px;border-left:3px solid var(--gold);background:rgba(201,162,75,0.1);border-radius:0 4px 4px 0;}
.profit-note.profit-loss{border-left-color:var(--maroon);background:rgba(173,59,92,0.08);color:var(--maroon);}
.profit-how{margin:14px 0;}
.profit-how summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--maroon-deep);}
.profit-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px;}
.profit-table td{padding:7px 4px;border-bottom:1px solid rgba(0,0,0,0.06);}
.profit-table td span{color:var(--ink-soft);font-size:11.5px;}
.profit-table tr.sub td{font-weight:600;}
.profit-table tr.total td{font-weight:700;font-size:15px;color:var(--teal);border-bottom:2px solid var(--teal);}
.profit-foot{font-size:12px;color:var(--ink-soft);line-height:1.6;margin:8px 0 0;}
.profit-sub{font-family:var(--font-body);font-size:14px;margin:18px 0 8px;}

/* Margin rules + rounded selling price (admin) */
.pf-tiers{background:rgba(31,75,74,0.05);border:1px solid rgba(31,75,74,0.16);border-radius:6px;padding:14px 14px 12px;margin:6px 0 16px;}
.pf-tiers h4{font-family:var(--font-body);font-size:14px;margin-bottom:4px;}
.pf-tiers > p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:10px;}
.pf-tier{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:8px;font-size:13px;}
.pf-tier-input{width:120px;padding:8px 10px;}
.pf-tier-above{margin:12px 0 0;padding-top:12px;border-top:1px dashed rgba(31,75,74,0.25);font-weight:600;}
.pf-tier-del{color:var(--maroon);}
.pf-sphint{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px;}
.pf-reset{color:var(--maroon);text-decoration:underline;font-size:12px;margin-left:4px;}

.pf-tier-text{min-width:0;}

/* Admin: main photo / product video / more photos */
.media-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.media-slot{min-width:0;}
.media-slot label{display:block;}
@media (max-width:760px){ .media-slots{grid-template-columns:1fr;} }
.media-slot .variant-media-strip{margin:6px 0 4px;}
.media-note{display:block;font-size:11.5px;color:var(--ink-soft);}
.media-help{font-size:11.5px;color:var(--ink-soft);margin:2px 0 8px;line-height:1.55;}
.media-add-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0;}
.media-add{cursor:pointer;}
.media-status{font-size:12px;color:var(--teal);min-height:1px;margin:2px 0 6px;}
.media-badge{position:absolute;left:3px;top:3px;background:rgba(43,26,29,0.78);color:#fff;font-size:9px;padding:1px 5px;border-radius:8px;letter-spacing:.02em;pointer-events:none;}
.upload-label input[disabled]{cursor:not-allowed;}
.upload-video{width:64px;}
/* Storefront: the product video that plays when a product card is hovered */
.product-media .card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1);pointer-events:none;background:transparent;will-change:opacity;}
.product-media.is-playing .card-video{opacity:1;transition-duration:.75s;}   /* the photo melts into the video slowly, and back a little quicker */
/* Storefront: the video slide of the product page gallery */
.pd-flip-slide > video{display:block;width:100%;height:100%;object-fit:cover;background:#000;pointer-events:none;}
.media-slot:nth-child(n+2) .info-tip::after{left:auto;right:-6px;}   /* the tips in the 2nd and 3rd columns open towards the left, so they never push the page sideways */

/* Admin: "how it looks on the website" previews. The homepage banner preview mirrors the homepage's own banner rules (index.html),
   drawn at a real screen width (1366px on a computer, 390px on a phone) and scaled down to fit, so what you see is what shoppers get. */
.hpv{margin:18px 0 6px;padding:16px;border:1px solid rgba(173,59,92,.2);border-radius:6px;background:rgba(255,255,255,.7);}
.hpv h4{font-size:14px;margin:0 0 4px;color:var(--maroon-deep);}
.hpv-note{font-size:12px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5;}
.hpv-stage{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;}
.hpv-col{min-width:0;}
.hpv-col.desk{flex:1 1 480px;}
.hpv-col.phone{flex:0 0 auto;}
.hpv-cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:6px;}
.hpv-frame{position:relative;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px rgba(43,26,29,.18),0 6px 18px rgba(43,26,29,.1);background:var(--cream, #fdf1e8);}
.hpv-frame.desk,.hpv-frame.phone{cursor:grab;touch-action:none;}
.hpv-frame.desk.dragging,.hpv-frame.phone.dragging{cursor:grabbing;}
.hpv-inner{position:absolute;left:0;top:0;transform-origin:0 0;}
.hpv-inner.desk{width:1366px;height:768px;background:var(--cream, #fdf1e8);}
.hpv-chrome{height:114px;background:#fff;border-bottom:1px solid rgba(43,26,29,.12);display:flex;align-items:center;justify-content:center;color:#b9a79d;font-size:22px;letter-spacing:.2em;text-transform:uppercase;}
.hpv-weave{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;overflow:hidden;background:#fff3ea;color:var(--maroon-deep);}
.hpv-weave b{font-family:var(--font-display);font-weight:400;font-size:34px;}
.hpv-weave div{display:flex;gap:26px;}
.hpv-weave i{display:block;width:240px;height:240px;border-radius:50%;border:2px solid var(--gold-soft);background:rgba(173,59,92,.08);}
.hpv-inner.phone{width:390px;}
.hpv-hero{position:relative;overflow:hidden;width:100%;height:100%;background:linear-gradient(160deg,#7A2740 0%,#AD3B5C 45%,#D9A97C 100%);}
.hpv-inner.phone .hpv-hero{height:auto;min-height:120px;}
.hpv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.hpv-img.natural{position:static;display:block;height:auto;min-height:203px;object-fit:cover;}
.hpv-btn{position:absolute;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:1em;padding:.6em .6em .6em 1.9em;max-width:38%;background:rgba(255,240,230,0.96);color:var(--maroon-deep);font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;box-shadow:0 0 0 .5em rgba(255,240,230,0.26),0 1em 2.4em rgba(0,0,0,0.3);white-space:nowrap;overflow:hidden;pointer-events:none;font-family:var(--font-body, inherit);}
.hpv-btn > span{overflow:hidden;text-overflow:ellipsis;}
.hpv-btn i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:3em;height:3em;border-radius:50%;background:var(--maroon);}
.hpv-btn i svg{width:1.3em;height:1.3em;stroke:var(--ivory);fill:none;stroke-width:2;}
.hpv-inner.desk .hpv-btn{top:82%;left:85%;font-size:14px;}
.hpv-inner.phone .hpv-btn{top:65%;left:78%;font-size:7px;}
.hpv-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:120px;color:rgba(255,255,255,.85);font-size:20px;}
.hpv-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px;margin-top:14px;}
.hpv-controls label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:2px;}
.hpv-controls input[type=range]{width:100%;accent-color:var(--maroon);}
.hpv-info{font-size:12px;margin-top:10px;line-height:1.5;}
.hpv-info.warn{color:#9a5a00;}
.hpv-circle{width:120px;aspect-ratio:1;border-radius:50%;border:2px solid var(--gold-soft);overflow:hidden;background-size:cover;background-position:center;}
/* the thin bar that runs along the top the moment a link is tapped on a phone (see tapGuard in components.js) */
.nav-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;pointer-events:none;background:linear-gradient(90deg,var(--maroon),var(--gold));opacity:0;}
.nav-progress.run{opacity:1;width:88%;transition:width 6s cubic-bezier(.1,.7,.2,1);}