/* ==========================================================
   Sheen Fashions — Public Site Stylesheet
   Palette (matched to the gold/bronze "SA Sheen Fashions" medallion
   logo): antique gold (#9c7a2e), bright champagne gold (#d4af6a),
   soft champagne panel tint (#f3e7c8), cream background (#fffbf2),
   deep bronze-brown ink (#241a0f). The variable NAMES below (--wine,
   --wine-dark, --gold, --blush) are kept as-is on purpose — they're
   used in well over a hundred places across this file — only the
   values changed, which is what reskins the whole site in one place.
   ========================================================== */

:root{
  --wine:#9c7a2e;
  --wine-dark:#6e5620;
  --gold:#d4af6a;
  --blush:#f3e7c8;
  --cream:#fffbf2;
  --ink:#241a0f;
  --muted:#7d6f57;
  --line:#ece0c4;
  --success:#2f8f5b;
  --danger:#c23b3b;
  --radius:14px;
  --shadow:0 10px 30px rgba(110,86,32,.10);
  --shadow-lg:0 24px 60px rgba(110,86,32,.18);
  --transition:.28s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Playfair Display',serif;margin:0 0 .4em;color:var(--wine-dark);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
/* Pairs with the contextmenu/dragstart block in main.js: stops the browser
   itself from offering a drag-out-to-save or a long-press "Save Image"
   menu on mobile Safari, on every photo and video across the site. */
img,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;}
.container{max-width:1240px;margin:0 auto;padding:0 20px;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- reveal-on-scroll animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:12px 26px;border-radius:30px;font-weight:500;font-size:.95rem;cursor:pointer;border:none;transition:transform var(--transition), box-shadow var(--transition), background var(--transition);}
.btn-primary{background:var(--wine);color:#fff;box-shadow:0 8px 20px rgba(156,122,46,.3);}
.btn-primary:hover{background:var(--wine-dark);transform:translateY(-3px);box-shadow:0 14px 28px rgba(156,122,46,.4);}
.btn-outline{background:transparent;border:1.5px solid var(--wine);color:var(--wine);}
.btn-outline:hover{background:var(--wine);color:#fff;}
.btn-small{padding:8px 16px;font-size:.82rem;border-radius:20px;background:var(--wine);color:#fff;}
.btn-small:hover{background:var(--wine-dark);}
.btn-large{padding:15px 34px;font-size:1.05rem;}
.btn-block{display:block;width:100%;text-align:center;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- announcement bar (continuous right-to-left running text) ---------- */
/* The bar itself just clips (overflow:hidden); .announce-track holds TWO
   identical copies of the message back to back (width:max-content keeps
   them from wrapping) and slides the whole thing left by exactly one
   copy's width (-50%) on a loop — so the moment copy #1 has fully
   scrolled off, copy #2 is sitting in exactly its old place and the loop
   restarts invisibly. That's what makes it look like one endless line
   running right→left instead of visibly resetting. */
.announce-bar{background:var(--wine);color:#fff;padding:8px 0;letter-spacing:.02em;overflow:hidden;position:relative;}
.announce-track{display:inline-flex;width:max-content;white-space:nowrap;animation:announceScroll 42s linear infinite;}
.announce-item{padding-right:56px;font-size:.82rem;}
.announce-bar:hover .announce-track{animation-play-state:paused;}
@keyframes announceScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:600px){
  .announce-item{font-size:.74rem;padding-right:40px;}
  .announce-track{animation-duration:34s;}
}
/* Respect visitors who've asked their system to reduce motion — the text
   stays put and readable instead of continuously scrolling. */
@media (prefers-reduced-motion:reduce){
  .announce-track{animation:none;}
  .announce-bar{overflow-x:auto;}
}

/* ---------- currency switcher bar ---------- */
.currency-bar{background:var(--wine-dark);}
.currency-bar-inner{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:6px 20px;}
.currency-bar-label{color:rgba(255,255,255,.7);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;}
.currency-switch{display:flex;gap:4px;}
.currency-btn{color:rgba(255,255,255,.85);font-size:.76rem;font-weight:500;padding:3px 10px;border-radius:14px;transition:background var(--transition), color var(--transition);}
.currency-btn:hover{background:rgba(255,255,255,.14);}
.currency-btn.active{background:#fff;color:var(--wine-dark);}
@media (max-width:560px){
  .currency-bar-inner{justify-content:center;padding:6px 12px;}
  .currency-bar-label{display:none;}
}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,250,246,.96);backdrop-filter:blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.06);transition:padding var(--transition);}
.header-inner{display:flex;align-items:center;gap:22px;padding:14px 20px;}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.brand-logo{width:46px;height:46px;border-radius:50%;object-fit:cover;transition:transform .4s;}
.brand:hover .brand-logo{transform:rotate(12deg) scale(1.08);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text strong{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--wine-dark);}
.brand-text small{font-size:.66rem;color:var(--muted);letter-spacing:.03em;}

.main-nav{display:flex;align-items:center;gap:22px;}
.main-nav > a{font-size:.92rem;font-weight:500;padding:8px 2px;position:relative;}
.main-nav > a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--wine);transition:width var(--transition);}
.main-nav > a:hover::after{width:100%;}
.nav-dropdown{position:relative;display:flex;align-items:center;flex-wrap:wrap;}
.nav-dropdown > a{display:inline-block;padding:8px 2px;font-size:.92rem;font-weight:500;}
.nav-dropdown-toggle{display:none;background:none;border:none;color:inherit;font-size:.8rem;padding:8px;cursor:pointer;line-height:1;}
.dropdown-panel{position:absolute;top:100%;left:0;background:#fff;min-width:210px;border-radius:10px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition);z-index:50;}
.nav-dropdown:hover .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-panel a{display:block;padding:8px 12px;border-radius:6px;font-size:.86rem;}
.dropdown-panel a:hover{background:var(--blush);color:var(--wine-dark);}

.header-actions{display:flex;align-items:center;gap:16px;}
.search-form{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:4px 6px 4px 14px;}
.search-form input{border:none;outline:none;font-size:.85rem;width:170px;background:transparent;}
.search-form button{background:var(--wine);border:none;color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer;}
.cart-link{position:relative;font-size:1.3rem;}
.cart-count{position:absolute;top:-8px;right:-10px;background:var(--wine);color:#fff;font-size:.66rem;font-weight:700;border-radius:50%;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 3px;transition:transform .2s;}
.cart-count.bump{animation:bump .35s ease;}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.staff-link{font-size:.82rem;font-weight:500;border:1px solid var(--line);padding:8px 14px;border-radius:20px;transition:all var(--transition);white-space:nowrap;}
.staff-link:hover{background:var(--wine);color:#fff;border-color:var(--wine);}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:none;cursor:pointer;}
.hamburger span{display:block;height:2px;width:100%;background:var(--ink);transition:all .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:all .3s;z-index:98;}
.mobile-nav-overlay.show{opacity:1;visibility:visible;}

/* ---------- hero showcase: 4 videos/photos in one frame ---------- */
/* On page load: Women appears large & centered, holds, then slides into
   its column on the left; Men does the same into the next column; then
   Children and Bridal pop straight into their columns — ending as a
   4-column video wall (see initHeroShowcase() in main.js). Everything
   below (position/opacity/transition) is only touched by JS during that
   one-time intro; by default — no JS, or prefers-reduced-motion — this
   renders as a plain, fully visible 4-column row with no animation, so
   it always degrades gracefully. */
.hero-showcase{padding:44px 0 8px;background:linear-gradient(180deg,#fff,var(--cream));}
.hero-showcase-heading{text-align:center;max-width:720px;margin:0 auto 28px;padding:0 20px;}
.hero-showcase-heading h1{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--wine-dark);margin-bottom:.3em;}
.hero-showcase-heading p{color:var(--muted);font-size:1.05rem;}

.hero-columns{position:relative;width:100%;max-width:1400px;margin:0 auto;padding:0 20px;
  display:flex;gap:16px;height:72vh;min-height:460px;max-height:640px;box-sizing:content-box;}
.hero-col{position:relative;flex:1;top:auto;left:auto;width:auto;height:100%;min-width:0;
  border-radius:18px;overflow:hidden;opacity:1;background:var(--cream);box-shadow:0 10px 30px rgba(156,122,46,.14);
  transition:left 1s cubic-bezier(.34,1.56,.64,1), width 1s cubic-bezier(.34,1.56,.64,1), opacity .6s ease;}
/* During the intro only: JS adds .intro-active and takes each column out
   of the flex flow to freely position/size it with inline styles. */
.hero-columns.intro-active{display:block;}
.hero-columns.intro-active .hero-col{position:absolute;top:0;left:0;width:25%;height:100%;opacity:0;}

.hero-col .hero-bg-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(34px) brightness(1.12) saturate(1.05);transform:scale(1.2);}
.hero-col .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.hero-col::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(255,250,246,.94));}
/* One-time diagonal shine sweep the moment a column settles into place. */
.hero-col.shine::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 62%);
  transform:translateX(-130%);animation:heroShine 1s ease forwards;}
@keyframes heroShine{to{transform:translateX(130%);}}

.hero-col-caption{position:absolute;left:0;right:0;bottom:0;padding:18px 16px;color:var(--wine-dark);z-index:2;
  opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease;}
.hero-columns.intro-active .hero-col-caption{opacity:0;transform:translateY(10px);}
.hero-columns.intro-active .hero-col.settled-caption .hero-col-caption{opacity:1;transform:translateY(0);}
.hcc-title{display:block;font-family:'Playfair Display',serif;font-size:1.35rem;text-shadow:0 1px 12px rgba(255,250,246,.8);}
.hcc-link{color:var(--wine-dark);font-size:.78rem;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(110,86,32,.55);padding-bottom:2px;}
.hcc-link:hover{border-color:var(--wine-dark);color:var(--wine);}

/* Mobile: no room (or CPU/battery budget) for the 4-way intro animation,
   so JS bails out below this width entirely. Instead of a cramped static
   grid, give each video its own tall "column" card — closest in spirit
   to the reference layout — laid out as a snap-scrolling swipe carousel
   so all 4 stay easy to browse one-handed. */
.hero-swipe-hint{display:none;}
@media (max-width:860px){
  .hero-showcase-heading{margin-bottom:14px;}
  .hero-swipe-hint{display:block;text-align:center;color:var(--ink);font-weight:700;font-size:.8rem;margin:-6px 0 14px;letter-spacing:.02em;}

  .hero-columns, .hero-columns.intro-active{
    display:flex !important;flex-wrap:nowrap;position:static;
    height:64vh;min-height:380px;max-height:560px;
    gap:12px;max-width:100%;padding:0 20px 6px;margin:0;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* The base (desktop) rule sets box-sizing:content-box so the JS
       choreography's pixel math (initHeroShowcase() in main.js) has a
       predictable box on desktop. On mobile that same content-box turns
       width:100% + this rule's own left/right padding into a box that's
       literally wider than the screen — the padding is added ON TOP of
       100%, not carved out of it — which silently made the ENTIRE PAGE
       swipe sideways by the padding amount, not just this carousel.
       Only mobile needs the fix since only mobile hits this combination. */
    box-sizing:border-box;}
  .hero-columns::-webkit-scrollbar,
  .hero-columns.intro-active::-webkit-scrollbar{display:none;}

  .hero-col, .hero-columns.intro-active .hero-col{
    position:relative !important;top:auto !important;left:auto !important;
    flex:0 0 78% !important;width:78% !important;height:100% !important;
    opacity:1;scroll-snap-align:center;}

  .hero-col-caption, .hero-columns.intro-active .hero-col-caption{opacity:1;transform:none;padding:14px;}
  .hcc-title{font-size:1.1rem;}
}
@media (max-width:560px){
  .hero-columns, .hero-columns.intro-active{height:60vh;min-height:340px;padding:0 14px 6px;}
  .hero-col, .hero-columns.intro-active .hero-col{flex-basis:84% !important;width:84% !important;}
}

/* ---------- sections ---------- */
.section-block{padding:36px 0 56px;}
.section-title{text-align:center;font-size:2rem;margin-bottom:36px;position:relative;}
.section-title::after{content:'';display:block;width:60px;height:3px;background:var(--gold);margin:14px auto 0;}

/* ---------- product grid & card ---------- */
/* align-items:stretch (grid's default) makes every card in a row the same
   HEIGHT, but a card is a plain block by default, so its own content
   (name, code, description, price, button) just stacks from the top —
   a product with a one-line description still leaves its "+ Reserve"
   button sitting higher up than a neighbor with a two-line one. Making
   the card a column flexbox and giving the price row margin-top:auto
   (below) pushes the price + button block down to a shared bottom edge
   in every card, so the whole row lines up regardless of how much
   description text each product has — on both desktop and mobile. */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:stretch;}
.product-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--transition), box-shadow var(--transition);display:flex;flex-direction:column;height:100%;}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.product-card-img{display:block;width:100%;height:100%;overflow:hidden;background:var(--blush);}
/* Slow, gentle zoom on hover — overflow:hidden on .product-carousel (below)
   keeps it clipped so the photo never spills past its frame. */
.product-carousel:hover .carousel-slide.active{transform:scale(1.05);}
.quick-add-overlay{position:absolute;inset:auto 0 0 0;background:rgba(156,122,46,.92);color:#fff;text-align:center;font-size:.8rem;padding:10px;transform:translateY(100%);transition:transform var(--transition);z-index:3;}
.product-card:hover .quick-add-overlay{transform:translateY(0);}

/* ---------- product image carousel (cards + detail gallery) ---------- */
.product-carousel{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--blush);border-radius:0;}
.gallery-carousel{border-radius:var(--radius);}
.carousel-track{position:relative;width:100%;height:100%;}
/* Each .carousel-slide is now a container with two stacked layers — a
   blurred cover copy filling the frame, and the real, uncropped photo
   centered on top (object-fit:contain) — so a full-length product shot
   is never cut off at the top or bottom to force-fill the card. */
.carousel-slide{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease, transform 1.6s ease;overflow:hidden;}
.carousel-slide.active{opacity:1;z-index:1;}
.carousel-slide.gallery-slide{background:var(--blush);}
.carousel-slide-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:blur(20px) brightness(.8);transform:scale(1.15);}
.carousel-slide-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}
/* "Sheen" mark centered over every product photo and video (listing
   cards, the product-detail gallery, Watch & Shop tiles, and the video
   players that replace those tiles on click) — present no matter how the
   image is viewed, and still there in a screenshot or a copy of the
   picture even though it isn't literally baked into the image file on
   the server.
   Color: rather than picking one fixed color that goes invisible on
   either a light OR a dark product photo (white vanished on light
   fabrics, black vanished on dark ones), mix-blend-mode:difference makes
   the browser compute the mark's color from whatever is directly behind
   it, pixel by pixel — on a light/grey photo that yields a dark mark, on
   a black/dark photo it yields a light one, automatically, with no need
   to know the photo's color ahead of time.
   z-index sits above every photo AND above the actual <video> element
   that gets swapped in when someone taps play (so the mark doesn't
   disappear once playback starts) — and pointer-events:none means it
   never blocks a click on anything underneath it (play buttons, the
   "View Details"/quick-add overlay, badges), no matter how the stacking
   works out. */
.sheen-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);z-index:3;pointer-events:none;user-select:none;
  font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:1.7rem;letter-spacing:.06em;white-space:nowrap;
  color:#fff;mix-blend-mode:difference;filter:blur(.4px);opacity:.92;}
.ws-tile .sheen-watermark{font-size:1.05rem;}
/* The product-detail carousel and Watch & Shop tiles get their own
   "expand" button (added by main.js) instead of relying on the video's
   built-in fullscreen control — a browser's native video fullscreen
   shows ONLY the <video> element itself, and the watermark above is a
   separate sibling element next to it, not inside it, so it would
   otherwise vanish the moment someone goes fullscreen. Fullscreening the
   whole slide/tile container instead keeps the watermark in the picture. */
.sheen-fullscreen-btn{position:absolute;top:10px;right:10px;z-index:4;width:32px;height:32px;border-radius:8px;border:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sheen-fullscreen-btn:hover{background:rgba(0,0,0,.78);}
.carousel-slide:fullscreen,.carousel-slide:-webkit-full-screen,.ws-tile:fullscreen,.ws-tile:-webkit-full-screen{
  background:#000;display:flex;align-items:center;justify-content:center;}
.carousel-slide:fullscreen video,.carousel-slide:-webkit-full-screen video,
.ws-tile:fullscreen video,.ws-tile:-webkit-full-screen video{width:100%;height:100%;object-fit:contain;}
.carousel-slide:fullscreen .sheen-watermark,.carousel-slide:-webkit-full-screen .sheen-watermark,
.ws-tile:fullscreen .sheen-watermark,.ws-tile:-webkit-full-screen .sheen-watermark{font-size:3rem;}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.85);color:var(--wine-dark);font-size:1.2rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s, background .2s;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.15);}
.product-carousel:hover .carousel-arrow{opacity:1;}
.carousel-arrow:hover{background:#fff;}
/* Touch screens have no hover state, so always show the arrows there —
   otherwise a phone visitor would have no way to see more than photo 1. */
@media (hover:none){
  .carousel-arrow{opacity:1;background:rgba(255,255,255,.92);}
}
.carousel-prev{left:8px;}
.carousel-next{right:8px;}
.carousel-dots{position:absolute;bottom:8px;left:0;right:0;z-index:4;display:flex;justify-content:center;gap:5px;}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);border:1px solid rgba(156,122,46,.3);}
.carousel-dot.active{background:var(--wine);}

/* ---------- color swatches ("More Colors") ---------- */
.color-swatch-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0;}
.swatch-row-label{font-size:.8rem;color:var(--muted);margin-right:2px;}
.color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0;transition:box-shadow .2s, transform .2s;}
.color-swatch:hover{transform:scale(1.12);}
.color-swatch.active{box-shadow:0 0 0 2px var(--wine);}
.detail-swatches{margin-bottom:10px;}
.detail-swatches .color-swatch{width:30px;height:30px;}

/* ---------- product video playback ---------- */
/* No circle/disc behind the play button anymore — just the ▶ glyph
   itself, centered over the media, so the photo/video underneath is
   never covered by anything but the icon. mix-blend-mode:difference is
   the same auto-contrast trick as .sheen-watermark below: it inverts
   against whatever color is directly behind it, so the glyph stays
   legible on a light OR a dark product photo without needing to know
   the photo's color ahead of time. The drop-shadow blur gives it a soft,
   slightly-glowing edge instead of a hard-edged shape. */
/* Nudged down from dead-center (where the "Sheen" watermark sits) so the
   two don't render as one jumbled mark on top of each other now that
   neither has a background shape to visually separate them. */
.video-play-btn{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;padding:0;background:transparent;border:none;color:#fff;mix-blend-mode:difference;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;line-height:1;
  cursor:pointer;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)) blur(.3px);
  transition:transform .2s;}
.video-play-btn:hover{transform:translate(-50%,-50%) scale(1.12);}
/* Compact variant used on the small product-grid cards. */
.video-play-btn-card{width:34px;height:34px;font-size:1.15rem;}
/* contain (not cover) so the played video is never cropped; the blurred
   photo layer already underneath (see .carousel-slide-blur) shows through
   in any empty space instead of plain black bars. */
.product-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;background:transparent;}
.video-views-badge{position:absolute;top:12px;right:12px;z-index:3;background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;padding:3px 9px;border-radius:12px;}
.size-chart-btn-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.btn-size-chart{flex:1 1 160px;background:linear-gradient(135deg,var(--gold),#e0c19b);color:var(--ink);border:none;border-radius:24px;
  padding:11px 16px;font-size:.86rem;font-weight:600;cursor:pointer;transition:transform .2s, box-shadow .2s;text-align:center;white-space:nowrap;}
.btn-size-chart:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(212,175,106,.4);}
.btn-how-to-measure{background:linear-gradient(135deg,var(--wine),var(--wine-dark));color:#fff;}
.btn-how-to-measure:hover{box-shadow:0 8px 18px rgba(156,122,46,.4);}
@media (max-width:420px){
  .size-chart-btn-row{gap:6px;flex-wrap:nowrap;}
  .btn-size-chart{flex:1 1 0;padding:8px 4px;font-size:.66rem;border-radius:16px;white-space:nowrap;}
}
@media (max-width:340px){
  .btn-size-chart{font-size:.6rem;padding:7px 3px;}
}

/* ---------- Watch & Shop homepage video carousel ---------- */
.ws-subtitle{text-align:center;color:var(--muted);margin-top:-10px;margin-bottom:24px;font-size:.92rem;}
.watch-shop-section{position:relative;}
.ws-carousel{overflow:hidden;position:relative;padding:6px 0 16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
/* The scroll speed is set in JS (main.js) as a --ws-duration custom
   property sized to the track's own rendered width, so the tiles glide
   past at one steady, comfortable speed on any screen — narrow phone or
   wide desktop — instead of a fixed-seconds duration racing or crawling
   depending on how much content happens to be in the track. The 44s
   fallback here only matters for the instant before JS runs. */
.ws-track{display:flex;gap:18px;width:max-content;animation:wsScroll var(--ws-duration, 60s) linear infinite;
  animation-play-state:running;will-change:transform;}
.ws-carousel.paused .ws-track{animation-play-state:paused;}
/* Used instead of the scrolling track when there's only one video (see
   index.php) — no animation, just that one tile centered on its own. */
.ws-track-static{animation:none;flex-wrap:wrap;justify-content:center;width:100%;}
@keyframes wsScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ws-tile{position:relative;flex:0 0 auto;width:190px;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;background:#000;transition:transform .35s ease, box-shadow .35s ease;}
/* Lifting the tile on hover only makes sense on a device that actually
   has hover (a mouse) — on touch it would otherwise stick "lifted" after
   a tap with nothing to un-hover it. */
@media (hover:hover) and (pointer:fine){
  .ws-tile:hover{transform:translateY(-6px);box-shadow:0 18px 30px rgba(0,0,0,.22);}
}
/* Same blur-backdrop + contain treatment as the product carousel — the
   thumbnail is always shown in full, never cropped. Both layers are the
   video itself (paused at its opening frame via the #t=0.1 src fragment),
   not the product's uploaded photo, so the cover always matches what
   plays. pointer-events:none keeps taps landing on the tile, not the
   video element underneath. */
.ws-tile-blur,.ws-tile-fg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:transform 1.6s ease;}
.ws-tile-blur{object-fit:cover;filter:blur(18px) brightness(.75);transform:scale(1.15);}
.ws-tile-fg{object-fit:contain;}
.ws-tile:hover .ws-tile-blur{transform:scale(1.22);}
.ws-tile:hover .ws-tile-fg{transform:scale(1.05);}
/* No circle/disc behind this one either — same auto-contrast trick as
   .video-play-btn and .sheen-watermark: mix-blend-mode:difference keeps
   the bare ▶ glyph legible against any photo/video color without a
   background shape to carry it, just a soft blurred glow instead. */
/* Same down-nudge as .video-play-btn, and for the same reason — keeps
   clear of the "Sheen" watermark sitting dead-center on this tile. */
.ws-play-icon{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;padding:0;
  background:transparent;border:none;color:#fff;mix-blend-mode:difference;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)) blur(.3px);
  transition:opacity .2s, transform .2s;z-index:1;}
@media (hover:hover) and (pointer:fine){
  .ws-tile:hover .ws-play-icon{transform:translate(-50%,-50%) scale(1.12);}
}
.ws-tile.playing .ws-play-icon{opacity:0;pointer-events:none;}
.ws-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;}
.ws-views{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:.68rem;padding:3px 8px;border-radius:10px;z-index:3;}
.ws-tile-name{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:.76rem;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);z-index:3;}
/* Manual pause/play control, floated over the top-right corner of the
   whole strip — lets anyone stop the motion on purpose, not just by
   accident of where their mouse or finger happens to be, which matters
   for both comfort and (per WCAG 2.2.2) accessibility on any auto-moving
   content. */
.ws-toggle{position:absolute;top:6px;right:6px;z-index:5;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.5);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s, transform .2s;}
.ws-toggle:hover{background:rgba(0,0,0,.65);}
.ws-toggle:active{transform:scale(.92);}
.ws-toggle-play{display:none;}
.ws-toggle[aria-pressed="true"] .ws-toggle-pause{display:none;}
.ws-toggle[aria-pressed="true"] .ws-toggle-play{display:block;}
@media (max-width:768px){
  .ws-tile{width:140px;}
  .ws-track{gap:12px;}
}
@media (max-width:380px){
  .ws-tile{width:122px;}
  .ws-track{gap:10px;}
}
/* Respect a visitor's OS-level request for less motion: no auto-scroll,
   and no toggle button since there's nothing left for it to control. Each
   video still opens normally on tap/click either way. */
@media (prefers-reduced-motion:reduce){
  .ws-track{animation:none !important;flex-wrap:wrap;justify-content:center;width:100%;}
  .ws-toggle{display:none;}
}
.badge{display:inline-block;font-size:.68rem;font-weight:600;padding:4px 10px;border-radius:12px;background:var(--blush);color:var(--wine-dark);}
.badge-sale{position:absolute;top:10px;left:10px;background:var(--wine);color:#fff;}
.badge-stock{position:absolute;top:10px;right:10px;}
.badge-out{background:#f4d4d4;color:var(--danger);}
.badge-low{background:#fdeecb;color:#a3720c;}
.badge-in{background:#dcf3e4;color:var(--success);}
/* Column flex + flex:1 so this box always fills whatever height the grid
   gave the card (see .product-card above), instead of only being as tall
   as its own text. */
.product-card-body{padding:16px;display:flex;flex-direction:column;flex:1 1 auto;}
.product-name{display:block;font-weight:600;font-size:.96rem;margin-bottom:4px;color:var(--ink);}
.product-sub{font-size:.78rem;color:var(--muted);margin:0 0 10px;}
.product-code{font-size:.74rem;color:var(--wine-dark);font-weight:600;letter-spacing:.02em;margin:0 0 6px;font-family:'Courier New',monospace;}
.product-price-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.product-price-row.large{font-size:1.4rem;margin-bottom:6px;}
/* margin-top:auto eats whatever leftover space the card's extra height
   left behind, so the price + "Reserve" button always sit flush at the
   bottom of the card — lined up with every other card in the row, no
   matter how short or long that product's description is. Scoped to the
   card body only; the "large" price row on the product detail page isn't
   inside a flex column, so it's unaffected. */
.product-card-body .product-price-row{margin-top:auto;}
/* Shiny gold currency amounts: ONE solid gold color (not a multi-tone
   gradient — an earlier version cycled through several gold shades and
   could wash out to near-white mid-cycle, hurting legibility) with a
   soft glossy text-shadow for the "shiny" look. Reusable .amt-gold class
   for standalone price/total displays in the cart, checkout and
   confirmation templates; .price-now (product cards/detail) and the
   JS-rendered cart-drawer amounts share the same treatment. */
.price-now, .amt-gold, .modal-item-subtotal, .modal-total-amount{
  font-weight:700;
  color:#9c7220;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 0 8px rgba(212,175,106,.35);
}
.price-old{text-decoration:line-through;color:var(--muted);font-size:.85em;}
.quick-add-form button{width:100%;}
/* The Reserve/Out-of-Stock button switches to width:auto on phone-width
   cards (see the ≤480px rule above) so it can hug its own text instead of
   stretching full-width — that's fine on its own, but once a row of tiny
   share icons sits right next to it, an auto-width button is free to
   render wider than whatever slice of the row flexbox math actually gave
   it, spilling over and silently swallowing taps meant for the icons.
   The line below beats that ≤480px rule on specificity (3 classes vs. 2)
   at every screen size, so inside .reserve-row the button is ALWAYS
   pinned to exactly its allotted share of the row — it can wrap to a
   second line of text on a very narrow card, but it can never physically
   overlap its neighbour. flex-wrap is kept as a second, independent
   safety net in case anything else ever forces the row too narrow. */
.reserve-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.reserve-row .quick-add-form{flex:1 1 auto;min-width:0;}
.reserve-row .quick-add-form button{width:100%;white-space:normal;}
.reserve-row .social-share-row{margin-top:2px;}

/* ---------- tiny per-product social share icons ---------- */
.social-share-row{display:flex;align-items:center;gap:5px;flex:0 0 auto;}
.reserve-form .social-share-row{margin-left:2px;}
.share-btn{width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.share-btn:hover, .share-btn:focus-visible{color:#fff;border-color:transparent;}
.share-fb:hover, .share-fb:focus-visible{background:#1877f2;}
.share-wa:hover, .share-wa:focus-visible{background:#25d366;}
.share-ig:hover, .share-ig:focus-visible{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);}
.share-tt:hover, .share-tt:focus-visible{background:#010101;}

/* ---------- designer banner ---------- */
.designer-banner{background:linear-gradient(135deg,var(--blush),#fff);padding:50px 0;margin:20px 0;}
.designer-banner-inner{display:flex;align-items:center;gap:36px;text-align:center;flex-wrap:wrap;justify-content:center;}
.designer-banner-inner > div:not(.designer-logo-box){flex:1;min-width:260px;max-width:560px;}
.designer-logo-box{flex:0 0 auto;background:#fff;border-radius:16px;padding:clamp(10px,2.5vw,18px) clamp(14px,4vw,26px);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;max-width:90%;}
.designer-mini-logo{height:clamp(56px,9vw,100px);width:auto;max-width:min(60vw,220px);object-fit:contain;opacity:1;}

/* ---------- pickup banner ---------- */
.pickup-banner{margin:40px auto;}
.pickup-banner-inner{background:var(--wine);color:#fff;border-radius:var(--radius);padding:30px;text-align:center;}
.pickup-banner-inner h3{color:#fff;margin-bottom:8px;}

/* ---------- customer reviews (two endless marquee rows) ---------- */
/* Same technique as .announce-track above: each row's real cards are
   duplicated back-to-back (.reviews-track holds TWO identical copies,
   width:max-content keeps them from wrapping) and slid exactly one
   copy's width (50%) on a loop, so the instant copy #1 finishes, copy
   #2 is sitting in its old place and the loop restarts invisibly — one
   endless line with no visible seam. The top row runs one direction,
   the bottom row the exact reverse, both the same duration so neither
   ever looks like it's "winning" the race. No product photos anywhere
   here on purpose — every card is text-only, so it reads identically
   whether a review has a picture behind it or not. */
.reviews-section{background:linear-gradient(180deg,var(--blush),var(--cream) 40%);padding:60px 0 66px;margin:20px 0;overflow:hidden;}
.reviews-heading{text-align:center;max-width:640px;margin:0 auto 40px;padding:0 20px;}
.reviews-eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--wine);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.reviews-eyebrow::before, .reviews-eyebrow::after{content:'';width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.reviews-eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent);}
.reviews-heading h2{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:10px;}
.reviews-heading p{color:var(--muted);font-size:.96rem;margin:0;}
.reviews-marquee{display:flex;flex-direction:column;gap:20px;}
.reviews-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.reviews-track{display:inline-flex;width:max-content;gap:18px;animation:reviewsScrollLeft 75s linear infinite;}
.reviews-row-reverse .reviews-track{animation-name:reviewsScrollRight;}
.reviews-row:hover .reviews-track{animation-play-state:paused;}
@keyframes reviewsScrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes reviewsScrollRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
/* Animated gold border: the ring is masked down to just the border-width
   band (mask-composite:exclude), same as before — but the gold light is
   made to travel around that fixed ring by animating the conic-gradient's
   own start angle (a registered @property, so it interpolates smoothly)
   rather than by rotating the whole element's `transform`. Rotating the
   transform was the earlier bug: it spun the entire rounded-rectangle
   ring (and, because of border-radius, made the shape itself look like
   it was tumbling/tilting) instead of just circling the light around a
   perfectly still border. Cards alternate direction one by one — 1st
   clockwise, 2nd counter-clockwise, 3rd clockwise, 4th counter-clockwise,
   and so on — via :nth-child, independent of which row they're in. */
@property --border-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.review-card{
  position:relative;
  flex:0 0 auto;width:min(78vw,320px);
  border:2px solid transparent;
  border-radius:var(--radius);
  padding:20px 22px;
  background:#fff;
  background-clip:padding-box;
  box-shadow:var(--shadow), 0 0 14px rgba(212,175,106,.32);
}
.review-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(from var(--border-angle),#8a6a2e,#f7e6b8,#d4af6a,#8a6a2e 50%,#f7e6b8 75%,#d4af6a,#8a6a2e);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:reviewBorderSpinCW 3.5s linear infinite;
  pointer-events:none;
}
.review-card:nth-child(even)::before{animation-name:reviewBorderSpinCCW;}
@keyframes reviewBorderSpinCW{to{--border-angle:360deg;}}
@keyframes reviewBorderSpinCCW{to{--border-angle:-360deg;}}
.review-stars{color:var(--gold);font-size:.9rem;letter-spacing:2px;margin-bottom:10px;}
.review-quote{font-size:.9rem;line-height:1.6;color:var(--ink);margin:0 0 14px;}
.review-name{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--wine-dark);}
.review-name::before{content:'';width:16px;height:1px;background:var(--gold);}
@media (max-width:600px){
  .reviews-section{padding:36px 0 40px;}
  .reviews-heading{margin-bottom:22px;}
  .reviews-heading h2{font-size:1.35rem;}
  .reviews-heading p{font-size:.82rem;}
  .reviews-eyebrow{font-size:.7rem;gap:10px;}
  .reviews-marquee{gap:10px;}
  .reviews-track{gap:10px;animation-duration:48s;}
  .review-card{width:min(58vw,240px);padding:12px 14px;}
  .review-stars{font-size:.74rem;letter-spacing:1.5px;margin-bottom:6px;}
  .review-quote{font-size:.78rem;line-height:1.45;margin:0 0 8px;}
  .review-name{font-size:.7rem;gap:6px;}
}
/* Respect visitors who've asked their system to reduce motion — the
   cards stay put and readable, in a horizontally-scrollable row,
   instead of animating on their own. */
@media (prefers-reduced-motion:reduce){
  .reviews-track{animation:none;}
  .review-card::before{animation:none;}
  .reviews-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
}

/* ---------- breadcrumb ---------- */
.breadcrumb{padding:16px 20px;font-size:.82rem;color:var(--muted);}
.breadcrumb a:hover{color:var(--wine);}

/* ---------- shop layout ---------- */
/* Colorful one-row quick-nav pills at the top of a department page —
   Home, "All X", and every sub-category — so the full sub-menu is
   always visible and one tap away, on mobile as much as desktop. */
.quick-nav-wrap{margin:14px auto 4px;}
.quick-nav-row{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;}
.quick-nav-pill{flex:0 0 auto;white-space:nowrap;padding:9px 16px;border-radius:20px;font-size:.82rem;font-weight:600;
  color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.1);transition:transform .15s ease, box-shadow .15s ease;}
.quick-nav-pill:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.16);}
.quick-nav-pill.active{outline:2.5px solid var(--wine-dark);outline-offset:2px;}
.qnp-home{background:linear-gradient(135deg,var(--wine-dark),var(--wine));}
.qnp-c0{background:linear-gradient(135deg,var(--wine),var(--wine-dark));}
.qnp-c1{background:linear-gradient(135deg,var(--gold),#b8934a);}
.qnp-c2{background:linear-gradient(135deg,#2f8f7a,#1f6b5c);}
.qnp-c3{background:linear-gradient(135deg,#4a76b8,#325a94);}
.qnp-c4{background:linear-gradient(135deg,#b0568a,#8a3b68);}
.qnp-c5{background:linear-gradient(135deg,#c68a3d,#a06a20);}

.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;padding:20px 0 60px;}
.shop-filters{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:sticky;top:100px;}
.cat-list li a{display:block;padding:8px 10px;border-radius:8px;font-size:.88rem;margin-bottom:2px;}
.cat-list li a:hover, .cat-list li a.active{background:var(--blush);color:var(--wine-dark);font-weight:600;}
.price-filter{margin-top:20px;display:flex;flex-direction:column;gap:8px;}
.price-filter input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:.86rem;color:var(--muted);}
.sort-form select{padding:6px 10px;border-radius:8px;border:1px solid var(--line);}
.empty-msg{text-align:center;color:var(--muted);padding:60px 20px;}

/* ---------- product detail ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:30px 0 60px;}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gallery-thumb{width:70px;height:88px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:border-color .2s;}
.gallery-thumb:hover, .gallery-thumb.active{border-color:var(--wine);}
.product-info .eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-weight:600;}
.product-code-tag{display:inline-block;background:#faf1e6;color:var(--wine-dark);font-size:.86rem;font-weight:600;padding:6px 14px;border-radius:20px;margin:8px 0 14px;font-family:'Courier New',monospace;}
.product-code-tag .code-hint{color:var(--muted);font-weight:400;font-family:'Poppins',sans-serif;font-size:.78rem;}
.product-desc{color:var(--muted);margin:18px 0;}
.spec-table{width:100%;border-collapse:collapse;margin:16px 0;}
.spec-table th{text-align:left;color:var(--muted);font-weight:500;padding:6px 10px 6px 0;width:110px;vertical-align:top;}
.spec-table td{padding:6px 0;}
.reserve-form{display:flex;gap:12px;align-items:center;margin:22px 0 8px;flex-wrap:wrap;}
.reserve-form input[type=number]{width:70px;padding:12px;border:1px solid var(--line);border-radius:8px;}
.pickup-note{font-size:.86rem;color:var(--muted);}

/* ---------- cart / checkout ---------- */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.cart-table th, .cart-table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:.9rem;}
.cart-thumb{width:56px;height:70px;object-fit:cover;border-radius:6px;}
.qty-input{width:60px;padding:6px;border:1px solid var(--line);border-radius:6px;}
.remove-link{color:var(--danger);font-size:1.1rem;}
.cart-actions{margin-bottom:30px;}
.cart-summary{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);max-width:420px;}
.cart-total-row{display:flex;justify-content:space-between;font-size:1.15rem;margin:14px 0;}
.empty-cart{text-align:center;padding:60px 20px;}
.order-receipt{max-width:640px;margin:0 auto;}
.order-receipt .form-success{margin-bottom:20px;font-size:.95rem;}

.checkout-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;}
.checkout-form{background:#fff;padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);}
.checkout-form label{display:block;margin:14px 0 6px;font-size:.86rem;font-weight:500;}
.checkout-form input, .checkout-form textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.95rem;}
.checkout-form input:focus, .checkout-form textarea:focus{outline:none;border-color:var(--wine);}
.field-hint{font-size:.78rem;color:var(--muted);margin:6px 0 0;line-height:1.4;}
.field-hint strong{color:var(--wine-dark);}
.pickup-info-box{background:var(--blush);border-radius:10px;padding:14px 16px;font-size:.86rem;margin:20px 0;line-height:1.5;}
.order-summary{background:#fff;padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);}
.summary-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
.summary-row img{width:48px;height:60px;object-fit:cover;border-radius:6px;}
.summary-row div{flex:1;display:flex;flex-direction:column;font-size:.86rem;}
.summary-row small{color:var(--muted);}
.summary-total{display:flex;justify-content:space-between;font-size:1.2rem;margin-top:16px;}

/* Pickup vs. Home Delivery (Cash on Delivery) choice — shared markup/classes
   between the AJAX reservation popup (assets/js/main.js) and the classic
   full-page checkout (reservation-checkout.php), so both look identical. */
.delivery-choice{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px;}
.delivery-option{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;transition:border-color var(--transition),background var(--transition);
}
.delivery-option:has(input:checked){border-color:var(--wine);background:var(--blush);}
.delivery-option input[type="radio"]{margin-top:3px;accent-color:var(--wine);width:17px;height:17px;flex-shrink:0;}
/* No physical store anymore, so delivery is the only option — this variant
   shows that single option as an informational row instead of a choice
   (no radio dot, no pointer cursor, already-"selected" styling). */
.delivery-option-static{cursor:default;border-color:var(--wine);background:var(--blush);}
.delivery-option-body{display:flex;flex-direction:column;gap:2px;font-size:.9rem;}
.delivery-option-body strong{font-size:.92rem;}
.delivery-option-body small{color:var(--muted);font-size:.78rem;line-height:1.4;}
.modal-delivery-charge-row{
  display:flex;justify-content:space-between;padding:8px 4px;font-size:.85rem;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.form-error{background:#fdeaea;color:var(--danger);padding:10px 14px;border-radius:8px;font-size:.86rem;}
.form-success{background:#e2f6ea;color:var(--success);padding:10px 14px;border-radius:8px;font-size:.86rem;}

/* ---------- "keep adding to the same order" banners in the reserve modal ---------- */
.modal-flash-success{background:#e2f6ea;color:var(--success);padding:10px 14px;border-radius:8px;font-size:.88rem;margin-bottom:14px;font-weight:600;text-align:left;transition:opacity .4s;}
.modal-open-order-banner{background:var(--blush);color:var(--wine-dark);padding:10px 14px;border-radius:8px;font-size:.84rem;line-height:1.5;margin-bottom:14px;text-align:left;}
.modal-open-order-banner .btn-text{display:inline;padding:0;margin-left:2px;font-size:.84rem;text-underline-offset:2px;}

/* ---------- confirmation page ---------- */
.confirmation-page{max-width:640px;margin:0 auto;text-align:center;}
.confirm-icon{width:80px;height:80px;background:var(--success);color:#fff;font-size:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.confirm-order-no{font-size:1.1rem;color:var(--wine);}
.confirm-details{text-align:left;background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin:24px 0;}

/* ---------- about page ---------- */
.about-page{max-width:920px;margin:0 auto;padding:50px 0 70px;}
.about-hero{text-align:center;margin-bottom:40px;}
.about-hero h1{font-size:2.6rem;}
.about-lead{color:var(--gold);font-weight:600;letter-spacing:.03em;}
.about-specialties{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0 40px;}
.specialty-card{background:#fff;border-radius:var(--radius);padding:22px 16px;text-align:center;box-shadow:var(--shadow);transition:transform var(--transition);}
.specialty-card:hover{transform:translateY(-6px);}
.specialty-icon{font-size:2rem;display:block;margin-bottom:8px;}
.specialty-card h3{font-size:1rem;}
.specialty-card p{font-size:.82rem;color:var(--muted);}
.institute-logos{display:flex;gap:30px;flex-wrap:wrap;margin:20px 0 40px;justify-content:center;align-items:stretch;}
.institute-card{
  text-align:center;background:#fff;padding:26px 20px;border-radius:var(--radius);box-shadow:var(--shadow);
  flex:1;min-width:220px;max-width:280px;min-height:190px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:transform var(--transition), box-shadow var(--transition);
}
.institute-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.institute-card img{max-height:70px;max-width:100%;object-fit:contain;}
.institute-card p{
  font-family:'Playfair Display',serif;font-size:1.02rem;font-weight:600;color:var(--wine-dark);
  letter-spacing:.2px;margin:0;line-height:1.35;position:relative;padding-top:12px;
}
.institute-card p::before{
  content:'';display:block;width:36px;height:2px;background:var(--gold);
  position:absolute;top:0;left:50%;transform:translateX(-50%);
}

/* ---------- contact page ---------- */
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;}
.contact-info h3{margin-top:20px;}
.contact-form{background:#fff;padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);}
.contact-form label{display:block;margin:14px 0 6px;font-size:.86rem;font-weight:500;}
.contact-form input, .contact-form textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
.checkbox-label{display:flex !important;align-items:center;gap:10px;font-weight:500 !important;margin:16px 0 6px !important;cursor:pointer;}
.checkbox-label input[type="checkbox"]{width:auto;flex:0 0 auto;}
.checkbox-label.human-check{background:#faf6f4;padding:12px 14px;border-radius:10px;border:1px solid var(--line);}
.map-embed{margin-top:18px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#e9dfc4;margin-top:60px;padding-top:50px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px;}
.footer-logo{border-radius:50%;margin-bottom:10px;}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:14px;}
.footer-col a{display:block;font-size:.85rem;color:#d8c9a3;padding:4px 0;transition:color .2s;}
.footer-col a:hover{color:#fff;}
.designer-credit{font-size:.8rem;color:#d8c9a3;margin-top:10px;}
.map-link{color:var(--gold) !important;font-weight:600;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:18px 10px;font-size:.76rem;color:#a89478;}

/* ---------- misc ---------- */
#backToTop{position:fixed;bottom:26px;right:26px;width:44px;height:44px;border-radius:50%;background:var(--wine);color:#fff;border:none;font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition);z-index:80;}
#backToTop.show{opacity:1;visibility:visible;transform:translateY(0);}
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--wine-dark);color:#fff;padding:12px 22px;border-radius:30px;font-size:.86rem;opacity:0;visibility:hidden;transition:all .35s;z-index:200;box-shadow:var(--shadow-lg);max-width:calc(100% - 40px);text-align:center;}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* ---------- WhatsApp click-to-chat ---------- */
.whatsapp-float{
  position:fixed;left:20px;bottom:26px;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.5);z-index:150;
  transition:transform .25s ease;
  animation:wa-pulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover{transform:scale(1.08);}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 6px 20px rgba(37,211,102,.5);}
  50%{box-shadow:0 6px 20px rgba(37,211,102,.5), 0 0 0 9px rgba(37,211,102,.18);}
}
.whatsapp-text-link{color:#128C7E;font-weight:600;text-decoration:underline;text-decoration-color:rgba(18,140,126,.35);}
.whatsapp-text-link:hover{color:#0e6b5f;}
@media (max-width: 480px){
  .whatsapp-float{width:50px;height:50px;left:14px;bottom:18px;}
  .whatsapp-float svg{width:26px;height:26px;}
}

/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */
@media (max-width: 1024px){
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .shop-layout{grid-template-columns:200px 1fr;}
  .about-specialties{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */
@media (max-width: 860px){
  .hamburger{display:flex;}
  .main-nav{position:fixed;top:0;left:-300px;width:280px;height:100vh;background:#fff;flex-direction:column;align-items:flex-start;padding:90px 24px 24px;gap:6px;transition:left var(--transition);z-index:99;overflow-y:auto;box-shadow:6px 0 30px rgba(0,0,0,.15);}
  .main-nav.open{left:0;}
  .main-nav > a{width:100%;padding:12px 4px;border-bottom:1px solid var(--line);}
  .nav-dropdown{width:100%;border-bottom:1px solid var(--line);}
  .nav-dropdown > a{flex:1;width:auto;padding:12px 4px;border-bottom:none;}
  .nav-dropdown-toggle{display:block;width:44px;flex-shrink:0;text-align:center;}
  .nav-dropdown.open .nav-dropdown-toggle{transform:rotate(180deg);}
  .dropdown-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;padding-left:14px;flex:1 0 100%;}
  .nav-dropdown.open .dropdown-panel{display:block;}
  .search-form{display:none;}
  .header-inner{gap:12px;padding:10px 16px;}
  .brand-logo{width:36px;height:36px;}
  .brand-text strong{font-size:1rem;}
  .brand-text small{display:none;}

  .hero-slider{height:60vh;min-height:340px;}
  .hero-content{padding:0 6%;}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .shop-layout{grid-template-columns:1fr;}
  .shop-filters{position:static;}
  .product-detail{grid-template-columns:1fr;}
  .checkout-layout{grid-template-columns:1fr;}
  .contact-layout{grid-template-columns:1fr;}
  .designer-banner-inner{flex-direction:column;}
  .designer-logo-box{order:2;}
  .about-specialties{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;text-align:left;}
  .data-table{font-size:.8rem;}
}

@media (max-width: 480px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .about-specialties{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .hero-content h1{font-size:1.6rem;}
  .container{padding:0 14px;}
  .form-row-3{grid-template-columns:1fr !important;}

  /* Compact product cards: a smaller Reserve button and tighter text
     frees up room so more of the photo and details are visible without
     the button dominating the card on a phone-width grid. */
  .product-card-body{padding:10px 12px 12px;}
  .product-name{font-size:.84rem;line-height:1.3;}
  .product-code{font-size:.66rem;margin-bottom:4px;}
  .product-sub{font-size:.72rem;margin-bottom:8px;}
  .product-price-row{margin-bottom:8px;}
  .price-now{font-size:.92rem;}
  .quick-add-form button{width:auto;padding:7px 16px;font-size:.76rem;}
  .color-swatch-row{margin:6px 0;}
  .color-swatch{width:20px;height:20px;}

  /* Slightly smaller still on narrow phones (320-480px). */
  .brand-logo{width:32px;height:32px;}
  .brand-text strong{font-size:.92rem;}
  .review-card{width:min(64vw,210px);padding:10px 12px;}
}

/* A little tactile feedback on tap, since phones have no hover state. */
@media (hover:none){
  .product-card:active{transform:scale(.98);}
}

/* ==========================================================================
   Reservation popup / modal (AJAX cart + checkout)
   ========================================================================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(44,26,32,.55);backdrop-filter:blur(3px);
  z-index:500;opacity:0;visibility:hidden;transition:opacity var(--transition);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show{opacity:1;visibility:visible;}

.reserve-modal{
  background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);
  width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  position:relative;transform:translateY(24px) scale(.97);opacity:0;
  transition:transform var(--transition), opacity var(--transition);
  padding:clamp(20px,4vw,36px);
}
.reserve-modal.show{transform:translateY(0) scale(1);opacity:1;}

.modal-close{
  position:sticky;top:0;float:right;margin:-6px -6px 0 0;
  background:var(--blush);color:var(--wine);border:none;width:34px;height:34px;
  border-radius:50%;font-size:.95rem;cursor:pointer;transition:background var(--transition);
  z-index:2;
}
.modal-close:hover{background:var(--wine);color:#fff;}

.reserve-modal h2{margin:0 0 16px;font-family:'Playfair Display',serif;color:var(--wine-dark);font-size:1.4rem;clear:both;}
.reserve-modal h3{margin:22px 0 4px;font-size:1.05rem;color:var(--ink);}

.modal-loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:50px 0;color:var(--muted);}
.modal-spinner{
  width:20px;height:20px;border:3px solid var(--blush);border-top-color:var(--wine);
  border-radius:50%;display:inline-block;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.modal-cart-empty{padding:30px 0;text-align:center;color:var(--muted);}

.modal-cart-list{display:flex;flex-direction:column;gap:12px;max-height:34vh;overflow-y:auto;margin-bottom:6px;padding-right:2px;}
.modal-cart-item{
  display:grid;grid-template-columns:52px 1fr auto auto auto;align-items:center;gap:10px;
  padding:8px;border-radius:10px;background:var(--cream);transition:opacity var(--transition);
}
.modal-cart-item img{width:52px;height:64px;object-fit:cover;border-radius:6px;}
.modal-cart-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.modal-cart-item-info a{font-size:.88rem;font-weight:500;color:var(--ink);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.modal-cart-item-info a:hover{color:var(--wine);}
.modal-cart-item-info small{color:var(--muted);font-size:.76rem;}
.modal-item-code{color:var(--wine-dark)!important;font-weight:600;font-family:'Courier New',monospace;font-size:.72rem!important;}

.modal-qty-stepper{display:flex;align-items:center;gap:6px;background:#fff;border-radius:20px;padding:3px;border:1px solid var(--line);}
.modal-qty-stepper .qty-btn{
  width:24px;height:24px;border-radius:50%;border:none;background:var(--blush);color:var(--wine);
  cursor:pointer;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.modal-qty-stepper .qty-btn:hover{background:var(--wine);color:#fff;}
.modal-qty-stepper .qty-btn[disabled]{opacity:.4;cursor:not-allowed;background:var(--blush);color:var(--wine);}
.modal-qty-stepper .qty-val{min-width:16px;text-align:center;font-size:.85rem;font-weight:500;}

.modal-item-subtotal{font-size:.86rem;white-space:nowrap;}
.modal-item-remove{
  background:none;border:none;color:var(--danger);cursor:pointer;font-size:.95rem;
  width:26px;height:26px;border-radius:50%;transition:background var(--transition);
}
.modal-item-remove:hover{background:#fbe6e6;}

.modal-cart-total{
  display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;
  padding:14px 4px;border-top:1px dashed var(--line);margin-bottom:14px;
}
.modal-cart-total strong{color:var(--wine-dark);font-size:1.2rem;}

.modal-reserve-form label{display:block;margin:14px 0 6px;font-size:.85rem;font-weight:500;}
.modal-reserve-form input, .modal-reserve-form textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:.92rem;
}
.modal-reserve-form input:focus, .modal-reserve-form textarea:focus{outline:none;border-color:var(--wine);}
.modal-reserve-form .btn{margin-top:18px;}
.modal-form-error{
  background:#fdeaea;color:#a33;padding:10px 14px;border-radius:8px;font-size:.85rem;margin:10px 0;
}

.modal-success{text-align:center;padding:10px 0 6px;}
.modal-success-icon{
  width:60px;height:60px;border-radius:50%;background:var(--success);color:#fff;
  font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  animation:popIn .4s ease;
}
.modal-success h2{text-align:center;}
.modal-order-number{font-size:1.05rem;}
.modal-success .pickup-note{margin:14px 0 20px;}

/* Read-only "receipt" of items shown after a reservation is submitted, and
   the little confirm step for the optional "Start a New Reservation"
   action — see includes/order.php / assets/js/main.js. */
.modal-receipt-heading{font-size:.95rem;text-align:left;margin:18px 0 10px;color:var(--wine-dark);}
.modal-receipt-list{text-align:left;max-height:30vh;}
.modal-receipt-item{grid-template-columns:52px 1fr auto!important;}
.modal-receipt-item .qty-val{font-size:.82rem;color:var(--muted);white-space:nowrap;}
@media (max-width:560px){
  .modal-receipt-item{grid-template-columns:44px 1fr auto!important;grid-template-areas:none!important;}
  .modal-receipt-item img{width:44px;height:54px;}
}
.btn-text{background:none;border:none;color:var(--wine);text-decoration:underline;font-size:.85rem;padding:10px 0;cursor:pointer;}
.btn-text:hover{color:var(--wine-dark);}
.modal-confirm-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.modal-confirm-actions .btn{margin-top:0;flex:1 1 160px;}
.modal-postsubmit-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.modal-postsubmit-actions .btn{margin-top:0;}
.modal-postsubmit-order-no{font-size:.95rem;color:var(--muted);margin:2px 0 0;}

@media (max-width: 560px){
  .modal-cart-item{grid-template-columns:44px 1fr auto;grid-template-areas:"img info info" "img stepper remove" "img subtotal subtotal";row-gap:6px;}
  .modal-cart-item img{grid-area:img;width:44px;height:54px;}
  .modal-cart-item-info{grid-area:info;}
  .modal-qty-stepper{grid-area:stepper;justify-self:start;}
  .modal-item-subtotal{grid-area:subtotal;text-align:right;}
  .modal-item-remove{grid-area:remove;justify-self:end;}
  .reserve-modal{max-height:92vh;border-radius:14px;}
}

/* ==========================================================
   SIZE CHART & HOW TO MEASURE MODAL — colorful + animated
   ========================================================== */
.size-chart-box{
  background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);
  width:100%;max-width:640px;max-height:88vh;overflow-y:auto;
  position:relative;transform:translateY(24px) scale(.97);opacity:0;
  transition:transform var(--transition), opacity var(--transition);
  padding:clamp(20px,4vw,34px);
}
.size-chart-overlay.show .size-chart-box{transform:translateY(0) scale(1);opacity:1;}
.size-chart-heading{
  margin:0 0 16px;font-size:1.4rem;text-align:center;clear:both;
  background:linear-gradient(90deg,var(--wine),var(--gold),var(--wine));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:scHeadingShine 4s linear infinite;
}
@keyframes scHeadingShine{to{background-position:200% center;}}

.size-chart-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:16px;}
.sc-tab{background:var(--blush);color:var(--wine-dark);border:none;border-radius:22px;padding:9px 20px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .25s;}
.sc-tab.active{background:var(--wine);color:#fff;box-shadow:0 6px 16px rgba(156,122,46,.35);transform:translateY(-1px);}

.size-chart-toggles{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:18px;}
.sc-toggle-group{display:flex;background:var(--cream);border-radius:20px;padding:3px;border:1px solid var(--line);}
.sc-toggle-btn{background:transparent;border:none;padding:6px 14px;font-size:.78rem;font-weight:600;border-radius:18px;cursor:pointer;color:var(--muted);transition:all .2s;}
.sc-toggle-btn.active{background:var(--gold);color:#fff;box-shadow:0 3px 8px rgba(212,175,106,.5);}

.sc-panel{animation:scFadeIn .35s ease;}
@keyframes scFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.sc-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line);}
.size-chart-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:420px;}
.size-chart-table thead tr{background:linear-gradient(90deg,var(--wine),var(--wine-dark));color:#fff;}
.size-chart-table th{padding:10px 12px;text-align:center;font-weight:600;white-space:nowrap;}
.size-chart-table td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--line);}
.size-chart-table tbody tr:nth-child(even){background:var(--cream);}
.size-chart-table tbody tr:hover{background:var(--blush);}
.sc-size-label{font-weight:700;color:var(--wine-dark);}
.sc-note{font-size:.76rem;color:var(--muted);margin-top:10px;}

.measure-diagram{position:relative;background:linear-gradient(135deg,var(--blush),#fff);border-radius:16px;padding:26px 16px;margin-bottom:18px;overflow:hidden;min-height:180px;}
.measure-float-icon{position:absolute;font-size:1.3rem;opacity:.5;animation:scFloat 5s ease-in-out infinite;}
.measure-float-icon:nth-child(1){top:10%;left:8%;animation-delay:0s;}
.measure-float-icon:nth-child(2){top:70%;left:14%;animation-delay:1.1s;}
.measure-float-icon:nth-child(3){top:16%;right:10%;animation-delay:2.1s;}
.measure-float-icon:nth-child(4){top:68%;right:14%;animation-delay:3s;}
@keyframes scFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-10px) rotate(8deg);}}

/* An original, labeled body-measurement diagram (inline SVG, drawn from
   scratch): a front-facing silhouette with dashed guide lines and numbered
   markers at chest/bust (1), waist (2), hip (3) and a vertical length
   guide (4) — see render_measure_figure_svg() in functions.php. */
.measure-svg{width:150px;max-width:100%;height:auto;display:block;margin:0 auto;position:relative;z-index:1;}
.ms-body{fill:var(--wine);opacity:.92;}
.ms-head,.ms-neck{fill:none;stroke:var(--wine);stroke-width:3;}
.ms-guide{stroke-width:2;stroke-dasharray:5 4;}
.ms-guide-light{stroke:#fff;}
.ms-guide-dark{stroke:var(--wine);opacity:.5;}
.ms-badge{fill:var(--gold);animation:scPulse 1.8s ease-in-out infinite;}
.ms-badge-dark{fill:var(--wine);}
.ms-badge-txt{fill:#fff;font-size:13px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:inherit;}
@keyframes scPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

/* "Important notes" colorful callout, shown above the numbered steps */
.measure-notes{background:linear-gradient(135deg,#fff7ec,var(--cream));border:1px solid var(--gold);border-radius:12px;padding:14px 16px;margin:4px 0 16px;}
.measure-notes-title{display:block;color:var(--wine-dark);font-size:.86rem;margin-bottom:6px;}
.measure-notes ol{margin:0;padding-left:20px;font-size:.82rem;line-height:1.55;color:var(--ink);}
.measure-notes[dir="rtl"] ol{padding-left:0;padding-right:20px;}

.measure-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.measure-steps[hidden]{display:none;}
.measure-steps li{position:relative;background:var(--cream);border-left:3px solid var(--gold);border-radius:8px;padding:10px 14px 10px 40px;font-size:.86rem;line-height:1.5;}
.measure-steps li strong{color:var(--wine-dark);}
.measure-steps[dir="rtl"] li{border-left:none;border-right:3px solid var(--gold);text-align:right;padding:10px 40px 10px 14px;}
.ms-num{position:absolute;left:10px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--wine);color:#fff;
  font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.measure-steps[dir="rtl"] .ms-num{left:auto;right:10px;}

/* ---------- colorful size chart table ---------- */
.size-chart-table thead tr{background:linear-gradient(90deg,var(--wine),var(--gold));color:#fff;}
.sc-size-pill{display:inline-block;background:var(--wine);color:#fff;font-weight:700;font-size:.78rem;padding:4px 12px;border-radius:14px;}
.size-chart-table tbody tr{transition:transform .15s ease, box-shadow .15s ease;}
.size-chart-table tbody tr:hover{background:var(--blush);transform:scale(1.01);box-shadow:0 3px 10px rgba(156,122,46,.12);position:relative;}
.sc-empty{text-align:center;padding:26px 10px;}
.sc-empty-icon{font-size:2rem;display:block;margin-bottom:10px;}
.sc-empty p{color:var(--muted);font-size:.9rem;margin-bottom:14px;}
.sc-whatsapp-btn{display:inline-block;}

/* WhatsApp "ask us" callout shown under a populated size-chart table */
.sc-whatsapp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:linear-gradient(135deg,#fffaf6,#fdf1e8);border:1.5px dashed var(--gold);
  border-radius:14px;padding:14px 16px;margin-top:14px;}
.sc-whatsapp-cta p{flex:1;min-width:180px;margin:0;font-size:.84rem;color:var(--ink);}
.sc-whatsapp-cta .sc-whatsapp-btn{white-space:nowrap;}

/* Men's "How to Measure" diagram: a plain white technical size-guide
   (see render_measure_figure_svg_men() in functions.php), distinct from
   the decorative gradient panel used elsewhere in this modal. */
.measure-diagram-plain{background:#fff;border:1px solid var(--line);padding:20px 10px;}
.measure-svg-men{width:100%;max-width:340px;}
.msn-body{fill:#f2f2f2;stroke:#8f8f8f;stroke-width:2;}
.msn-center{stroke:#c9c9c9;stroke-width:1.2;stroke-dasharray:3,4;fill:none;}
.msn-guide{stroke:#8fd6d1;stroke-width:1.4;stroke-dasharray:4,4;fill:none;}
.msn-lead{stroke:#0f9e96;stroke-width:1.4;}
.msn-cap{stroke:#0f9e96;stroke-width:1.4;}
.msn-dot{fill:#0f9e96;}
.msn-label{font-size:14px;fill:#0f9e96;font-weight:700;font-family:inherit;}
.msn-label-sub{font-size:11.5px;fill:#0f9e96;font-weight:500;font-family:inherit;}

@media (max-width:560px){
  .size-chart-box{padding:18px 14px;border-radius:14px;max-height:92vh;}
  .size-chart-heading{font-size:1.15rem;}
  .measure-svg:not(.measure-svg-men){width:120px;}
  .size-chart-toggles{gap:10px;}
  .sc-whatsapp-cta{flex-direction:column;align-items:stretch;text-align:center;}
}

/* ---------- logo-press reveal effect ---------- */
/* Full-screen dimmed overlay that plays a short branded video (the
   medallion forming, a gold flash, then settling) for ~2s on a handful
   of meaningful button presses — see playLogoFx() in main.js. Kept out
   of the normal document flow (position:fixed) so it can be triggered
   from anywhere without any per-page markup. */
.logo-fx-overlay{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center, rgba(20,15,8,.6), rgba(10,7,4,.9));
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.logo-fx-overlay.show{opacity:1;}
.logo-fx-video{
  width:min(58vw,220px);border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,106,.35);
  transform:scale(.92);opacity:0;transition:opacity .3s ease, transform .3s ease;
  background:#0c0a08;
}
.logo-fx-overlay.show .logo-fx-video{opacity:1;transform:scale(1);}
@media (prefers-reduced-motion:reduce){
  .logo-fx-overlay{transition:none;}
  .logo-fx-video{transition:none;}
}