/* ============================================================ */
/* White Hanger — Manyavar Mohey-inspired, now with imagery      */
/* Structure untouched; CSS-only visual lift.                    */
/* ============================================================ */

/* Great Vibes — classic wedding-signature cursive script.
   Used by the .wh-divider wordmark animation. Italiana kept as a
   secondary fallback. */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Italiana&display=swap');

:root{
  /* Black & white theme with subtle silver shimmer */
  --wh-ink:         #0a0a0a;   /* near-black */
  --wh-ink-soft:    #5a5a5a;   /* muted gray */
  --wh-navy:        #141414;   /* charcoal — reads as black on cream */
  --wh-maroon:      #2a2a2a;   /* dark gray (hover states) */
  --wh-maroon-deep: #000000;
  --wh-cream:       #f7f7f7;   /* off-white background */
  --wh-cream-deep:  #ebebeb;
  --wh-paper:       #ffffff;
  --wh-line:        #e2e2e2;   /* light gray hairline */

  /* Shimmer accents (was gold) */
  --wh-gold:        #b8b8b8;   /* silver (was #c9a961) */
  --wh-gold-soft:   #dcdcdc;   /* light silver highlight */
  --wh-gold-deep:   #888888;

  /* Removed festive saturated accents (kept names for compatibility) */
  --wh-saffron:     #b8b8b8;
  --wh-rose:        #2a2a2a;
  --wh-emerald:     #2a2a2a;
}

/* ============================================================ */
/* SHIMMER — for brand wordmark + key ornaments                 */
/* ============================================================ */
.wh-shimmer{
  background:linear-gradient(
    100deg,
    #5a5a5a 0%,
    #5a5a5a 35%,
    #ffffff 50%,
    #5a5a5a 65%,
    #5a5a5a 100%
  );
  background-size:220% 100%;
  background-position:200% 0;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:whShimmer 5s ease-in-out infinite;
}
@keyframes whShimmer{
  0%, 100% { background-position:200% 0; }
  50%      { background-position:-100% 0; }
}

/* Subtle pulsing brightness on decorative SVG ornaments */
.wh-shimmer-orn{ animation:whOrnPulse 3.5s ease-in-out infinite; }
@keyframes whOrnPulse{
  0%, 100% { opacity:0.78; filter:drop-shadow(0 0 0 transparent); }
  50%      { opacity:1;    filter:drop-shadow(0 0 4px rgba(220,220,220,0.7)); }
}

@media (prefers-reduced-motion: reduce){
  .wh-shimmer, .wh-shimmer-orn{ animation:none; }
  .wh-shimmer{ color:var(--wh-ink); -webkit-text-fill-color:var(--wh-ink); background:none; }
}

/* Hide Ghost Portal badge */
[data-testid="powered"], .gh-portal-powered,
[class*="powered-by-ghost"], [class*="PortalPowered"]{
  display:none !important;
}

/* ---------- Base ---------- */
.wh{
  font-family:'Montserrat', sans-serif;
  color:var(--wh-ink);
  background:var(--wh-cream);
  line-height:1.7;
  font-size:16px;
  max-width:none; margin:0; padding:0;
}
.gh-canvas .wh, .gh-outer .wh, .gh-inner .wh{
  grid-column:1 / -1; max-width:none; margin:0; padding:0;
}
.wh h1, .wh h2, .wh h3{
  font-family:'Jost', sans-serif;
  font-weight:500; letter-spacing:0.01em; color:var(--wh-ink); margin:0;
}
.wh p{margin:0;}
.wh a{text-decoration:none; color:inherit; transition:color 0.25s ease;}
.wh ul, .wh ol{list-style:none; margin:0; padding:0;}

/* ============================================================ */
/* MEN / WOMEN TOGGLE                                            */
/* Compound selectors so we beat .wh-hero's display:flex          */
/* ============================================================ */
.wh-tab-input{position:absolute; opacity:0; pointer-events:none; width:0; height:0;}

/* Default: hide both men and women variants */
.wh-hero.wh-men-only,
.wh-hero.wh-women-only,
.wh-section.wh-men-only,
.wh-section.wh-women-only{display:none !important;}

/* When Men is checked: show men, keep women hidden */
#wh-tab-men:checked ~ .wh-hero.wh-men-only{
  display:flex !important; animation:whFade 0.5s ease;
}
#wh-tab-men:checked ~ .wh-section.wh-men-only{
  display:block !important; animation:whFade 0.5s ease;
}

/* When Women is checked: show women, keep men hidden */
#wh-tab-women:checked ~ .wh-hero.wh-women-only{
  display:flex !important; animation:whFade 0.5s ease;
}
#wh-tab-women:checked ~ .wh-section.wh-women-only{
  display:block !important; animation:whFade 0.5s ease;
}

@keyframes whFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.wh-tab--men, .wh-tab--women{cursor:pointer;}
#wh-tab-men:checked   ~ .wh-nav .wh-tab--men,
#wh-tab-women:checked ~ .wh-nav .wh-tab--women{color:var(--wh-maroon);}
#wh-tab-men:checked   ~ .wh-nav .wh-tab--men::after,
#wh-tab-women:checked ~ .wh-nav .wh-tab--women::after{transform:scaleX(1);}

/* ============================================================ */
/* NAV                                                           */
/* ============================================================ */
/* Top announcement bar */
.wh-announce{
  background:#000;
  color:#ffffff;
  text-align:center;
  padding:0.85rem 1rem;
  font-family:'Montserrat', sans-serif;
  font-size:1.05rem;
  letter-spacing:0.18em;
  font-weight:500;
  position:relative;
  z-index:60;
}

.wh-nav{
  background:#fff;
  border-bottom:1px solid var(--wh-line);
  position:sticky; top:0; z-index:50;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:2rem;
  padding:0.3rem 2.5rem;
  box-shadow:0 1px 0 rgba(200,200,200,0.15);
}

/* LEFT: White Hanger logo — anchored to start of its 1fr column */
.wh-nav__logo{
  display:inline-flex; align-items:center; justify-content:flex-start;
  line-height:0;
  text-decoration:none;
  justify-self:start;
}
.wh-nav__logo svg{display:block;}

/* Mobile hamburger button (hidden on desktop) */
.wh-nav__menu-btn{
  display:none;
  background:transparent; border:none; padding:0.4rem;
  color:var(--wh-ink); cursor:pointer;
  align-items:center; justify-content:center;
}
.wh-nav__menu-btn svg{display:block;}

/* CENTER: text link strip */
.wh-nav__links{
  display:flex; align-items:center; justify-content:center;
  gap:2.75rem;
}
.wh-nav__link{
  position:relative;
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  letter-spacing:0.02em;
  color:var(--wh-ink);
  font-weight:500;
  text-decoration:none;
  padding:0.4rem 0;
  cursor:pointer;
  transition:color 0.25s ease;
}
.wh-nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:center;
  transition:transform 0.3s ease;
}
.wh-nav__link:hover{color:var(--wh-maroon);}
.wh-nav__link:hover::after{transform:scaleX(1);}

/* Bump specificity above the base ".wh a{color:inherit}" rule (0,1,1) */
.wh .wh-nav__link--sale{color:#e11d2e; font-weight:600;}
.wh .wh-nav__link--sale:hover{color:#a8101e;}

/* Active Men/Women state when toggle is checked */
#wh-tab-men:checked   ~ .wh-nav .wh-tab--men,
#wh-tab-women:checked ~ .wh-nav .wh-tab--women{color:var(--wh-maroon);}
#wh-tab-men:checked   ~ .wh-nav .wh-tab--men::after,
#wh-tab-women:checked ~ .wh-nav .wh-tab--women::after{transform:scaleX(1);}

/* Legacy left/right wrappers — only right is used now */
.wh-nav__left{display:none;}

/* CENTER: links auto-sized, perfectly centered between left and right columns */
.wh-nav__links{
  justify-self:center;
}

/* RIGHT: icons cluster — anchored to end of its 1fr column */
.wh-nav__right{
  display:flex; align-items:center;
  gap:1.5rem;
  justify-self:end;
}

/* (Legacy tab styles removed — now using .wh-nav__link instead) */

/* Icon-only nav links (search, wishlist, cart, account) — no hover transform */
.wh-icon, .wh-search{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.5rem !important;
  background:transparent; border:none; cursor:pointer;
  color:inherit;
}
.wh-icon svg, .wh-search svg{display:block;}
.wh-icon::after, .wh-search::after{display:none !important;}
.wh-icon:hover, .wh-search:hover{color:inherit; transform:none; opacity:1;}

/* ============================================================ */
/* UNIFIED HERO BANNER — campaign-style (Manyavar-inspired)      */
/* ============================================================ */
.wh-banner{
  position:relative; overflow:hidden;
  min-height:78vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  isolation:isolate;
}
/* Blended diptych background — two ethnic photos meeting in the middle */
.wh-banner__bg{
  position:absolute; inset:0; z-index:-2;
  display:grid;
  grid-template-columns:1fr 1fr;
  animation:whBannerZoom 24s ease-in-out infinite alternate;
}
.wh-banner__photo{
  background-size:cover;
  background-position:center;
  filter:grayscale(15%) brightness(0.78) sepia(8%) contrast(1.04);
}
.wh-banner__photo--left{
  background-image:url('https://images.unsplash.com/photo-1681717055630-c62333c22fec?w=1400&h=1800&auto=format&fit=crop&q=85');
  -webkit-mask-image:linear-gradient(to right, #000 60%, transparent 100%);
          mask-image:linear-gradient(to right, #000 60%, transparent 100%);
  grid-column:1; grid-row:1;
}
.wh-banner__photo--right{
  background-image:url('https://images.unsplash.com/photo-1668371679302-a8ec781e876e?w=1400&h=1800&auto=format&fit=crop&q=85');
  -webkit-mask-image:linear-gradient(to left, #000 60%, transparent 100%);
          mask-image:linear-gradient(to left, #000 60%, transparent 100%);
  grid-column:2; grid-row:1;
}
.wh-banner__pattern{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(200,200,200,0.18), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(200,200,200,0.04) 18px 19px),
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(200,200,200,0.04) 18px 19px);
  pointer-events:none;
}
.wh-banner__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at center, rgba(13,8,5,0.45) 0%, rgba(13,8,5,0.7) 70%),
    linear-gradient(180deg, rgba(15,15,15,0.35) 0%, rgba(13,8,5,0.55) 100%);
}
@keyframes whBannerZoom{
  from{transform:scale(1);}
  to  {transform:scale(1.05);}
}

/* Decorative gold ornament above the eyebrow */
.wh-banner__ornament{
  display:inline-flex;
  margin:0 0 1.5rem;
}
.wh-banner__ornament svg{display:block;}

.wh-banner__content{
  position:relative;
  max-width:760px;
  padding:5rem 1.5rem;
  animation:whBannerFade 1.3s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes whBannerFade{
  from{opacity:0; transform:translateY(24px);}
  to  {opacity:1; transform:translateY(0);}
}

.wh-banner__eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.45em;
  text-transform:uppercase;
  color:var(--wh-gold);
  margin:0 0 1.5rem;
  font-weight:600;
}
.wh-banner__eyebrow::before,
.wh-banner__eyebrow::after{
  content:"";
  display:inline-block;
  width:30px; height:1px;
  background:var(--wh-gold);
  vertical-align:middle;
  margin:0 0.85rem;
  opacity:0.8;
}

.wh-banner__title{
  font-family:'Jost', sans-serif;
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  font-weight:500;
  font-style:italic;
  color:#fff;
  letter-spacing:0.02em;
  line-height:1.15;
  margin:0 0 1rem;
  text-shadow:0 2px 22px rgba(0,0,0,0.45);
}

.wh-banner__sub{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  color:rgba(255,255,255,0.92);
  font-style:italic;
  letter-spacing:0.05em;
  margin:0 0 2.5rem;
  text-shadow:0 2px 14px rgba(0,0,0,0.4);
}

.wh-banner__cta{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  background:#fff;
  color:#1a1a1a;
  padding:1rem 2.75rem;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-weight:500;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-banner__cta:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.16em;
}

/* ============================================================ */
/* SECTIONS — h2 styling                                         */
/* ============================================================ */
.wh-section{
  padding:6rem 2rem;
  background:var(--wh-paper);
  border-top:1px solid var(--wh-line);
}
.wh-section:nth-of-type(odd){background:var(--wh-cream);}

.wh-section h2{
  text-align:center;
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:500; margin-bottom:0.75rem;
  color:var(--wh-navy); letter-spacing:0.02em;
}
.wh-section h2::before{
  content:""; display:block;
  width:60px; height:1px; background:var(--wh-gold);
  margin:0 auto 1.5rem;
}
.wh-section h2::after{
  /* Mirrors the ::before line above the heading — same 60×1px gold bar
     instead of the previous dot, so the heading is bracketed top + bottom. */
  content:""; display:block;
  width:60px; height:1px; background:var(--wh-gold);
  margin:1.5rem auto 0;
}

/* Tighter padding for the Men's / Women's Collections marquee sections.
   Top padding + heading margin both zeroed so the gold bracket line
   sits flush with the section above (no white band). Triple-class
   selector needed to beat the later .wh-section.wh-men-only /
   .wh-section.wh-women-only rule (specificity (0,2,0)) which sets
   padding: 5rem 0 5.5rem on these same sections. */
.wh-section.wh-men-only.wh-section--marquee,
.wh-section.wh-women-only.wh-section--marquee{
  /* 1rem top gives the gold ::before line breathing room above the heading
     so it reads as a matching bracket to the ::after line below. */
  padding:1rem 2rem 1rem;
}
/* Browser-default <h2> top margin was adding more whitespace above
   the gold line — kill it. */
.wh-section.wh-men-only.wh-section--marquee h2,
.wh-section.wh-women-only.wh-section--marquee h2{
  margin-top:0;
}
.wh-section.wh-men-only.wh-section--marquee .wh-collection-marquee,
.wh-section.wh-women-only.wh-section--marquee .wh-collection-marquee{
  margin-top:1rem;
}

/* ============================================================ */
/* CARD GRID — used by offers, collections, stores               */
/* ============================================================ */
.wh-section ul,
.wh-section ol{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
  max-width:1280px;
  margin:3rem auto 0;
}

/* Card base — for ul (offers, collections) */
.wh-section ul li{
  position:relative;
  aspect-ratio: 3 / 4;
  background-color:var(--wh-navy);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  padding:2rem;
  color:#fff;
  font-family:'Jost', sans-serif;
  font-size:1.5rem; font-weight:500; font-style:italic;
  letter-spacing:0.02em; line-height:1.3;
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  transition:transform 0.45s ease, box-shadow 0.45s ease;
  isolation:isolate;
}
.wh-section ul li::before{
  /* dark gradient overlay for text legibility */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(25,39,71,0.15) 0%,
    rgba(25,39,71,0.35) 45%,
    rgba(0,0,0,0.75) 100%);
  transition:background 0.4s ease;
  z-index:-1;
}
.wh-section ul li::after{
  /* tiny gold corner accent */
  content:""; position:absolute;
  left:1.25rem; top:1.25rem;
  width:24px; height:1px; background:var(--wh-gold);
  z-index:0;
}
.wh-section ul li:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px -22px rgba(40,40,40,0.45);
}
.wh-section ul li:hover::before{
  background:linear-gradient(180deg,
    rgba(40,40,40,0.25) 0%,
    rgba(40,40,40,0.45) 50%,
    rgba(0,0,0,0.85) 100%);
}

/* Men's / Women's Collections — edge-to-edge, zero-gap card strip */
.wh-section.wh-men-only,
.wh-section.wh-women-only{
  padding:5rem 0 5.5rem;
}
.wh-section.wh-women-only > ul{
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  max-width:none;
  margin:2.5rem 0 0;
}
.wh-section.wh-women-only > ul > li{
  aspect-ratio:3 / 4;
}
.wh-section.wh-women-only > ul > li:hover{
  transform:none;
  box-shadow:none;
}
@media (max-width: 900px){
  .wh-section.wh-women-only > ul{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width: 480px){
  .wh-section.wh-women-only > ul{
    grid-template-columns:1fr;
  }
}

/* Men's / Women's Collections — right-to-left infinite marquee (no pause, no edge mask) */
.wh-collection-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  margin-top:2.5rem;
}
.wh-collection-marquee__track{
  display:flex !important;
  flex-wrap:nowrap;
  gap:0 !important;
  width:max-content !important;
  max-width:none !important;
  margin:0 !important;
  padding:0;
  list-style:none;
  grid-template-columns:none !important;
  animation:whCollectionScroll 60s linear infinite;
}
@keyframes whCollectionScroll{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}  /* cards doubled in DOM */
}

.wh-collection-marquee__track > li{
  flex:0 0 auto;
  width:clamp(300px, 25vw, 400px);
  aspect-ratio:3 / 4;
  background-color:#1a1a1a;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  padding:1.75rem;
  color:#fff;
  font-family:'Jost', sans-serif;
  font-size:1.55rem; font-weight:500; font-style:italic;
  letter-spacing:0.02em; line-height:1.3;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:default;
  /* override any inherited hover transforms / shadows */
  transition:none;
}
.wh-collection-marquee__track > li:hover{
  transform:none !important;
  box-shadow:none !important;
}
.wh-collection-marquee__track > li::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.75) 100%);
  z-index:-1;
  transition:none;
}
.wh-collection-marquee__track > li:hover::before{
  background:linear-gradient(180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.75) 100%);
}
.wh-collection-marquee__track > li::after{
  /* hairline gold accent top-left */
  content:""; position:absolute;
  left:1.5rem; top:1.5rem;
  width:24px; height:1px; background:var(--wh-gold);
  z-index:0;
}
.wh-collection-marquee__track > li > span{
  position:relative; z-index:1;
}

/* Background images by category — Men's local photography.
   Extra specificity prefix beats the legacy
   `.wh-men-only ul li:nth-of-type(N)` rule (0,2,2). */
.wh-men-only .wh-collection-marquee__track > li[data-vibe="kurta"],
.wh-women-only .wh-collection-marquee__track > li[data-vibe="kurta"]{
  background-image:url('/content/images/kurtasetmen.png') !important;
}
.wh-men-only .wh-collection-marquee__track > li[data-vibe="jodhpuri"],
.wh-women-only .wh-collection-marquee__track > li[data-vibe="jodhpuri"]{
  background-image:url('/content/images/jodhpurimen.png') !important;
}
.wh-men-only .wh-collection-marquee__track > li[data-vibe="indowestern"]{
  background-image:url('/content/images/indowesternmen.png') !important;
}
.wh-men-only .wh-collection-marquee__track > li[data-vibe="tuxedo"]{
  background-image:url('/content/images/tuxedomen.png') !important;
}
.wh-men-only .wh-collection-marquee__track > li[data-vibe="sherwani"]{
  background-image:url('/content/images/sherwanimen.png') !important;
}

/* Hide the text labels inside marquee cards (per user request — image-only cards) */
.wh-collection-marquee__track > li > span{
  display:none;
}
/* Drop the gold corner accent too — it was only decorative for labeled cards */
.wh-collection-marquee__track > li::after{
  display:none;
}
/* No gradient overlay — show the photo plain */
.wh-collection-marquee__track > li::before{
  background:transparent !important;
  content:none;
}
/* Women's local photography — specificity prefix beats the legacy
   `.wh-women-only ul li:nth-of-type(N)` rule (0,2,2). */
.wh-women-only .wh-collection-marquee__track > li[data-vibe="gown"]{
  background-image:url('/content/images/gownwomen.png') !important;
}
.wh-women-only .wh-collection-marquee__track > li[data-vibe="lehenga"]{
  background-image:url('/content/images/lehengawomen.png') !important;
}
.wh-women-only .wh-collection-marquee__track > li[data-vibe="indowestern-w"]{
  background-image:url('/content/images/indowesternwomen.png') !important;
}
.wh-women-only .wh-collection-marquee__track > li[data-vibe="saree"]{
  background-image:url('/content/images/suitswomen.png') !important;
}

@media (max-width: 900px){
  .wh-collection-marquee__track{animation-duration:48s;}
}
@media (prefers-reduced-motion: reduce){
  .wh-collection-marquee__track{animation:none; transform:translateX(0);}
}

/* ============================================================ */
/* WHAT'S YOUR VIBE — arched portrait cards                      */
/* ============================================================ */
.wh-vibe{
  background:var(--wh-cream);
  /* Tightened from 6rem/5rem top/bottom + 2rem sides so the section
     reads compactly without the diamond ornaments that used to fill
     the vertical breathing room. */
  padding:2.75rem 0.75rem 2.5rem;
  text-align:center;
  position:relative;
  /* border-top removed — the line was visible right above the title. */
  border-top:none;
}
.wh-vibe__title{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.85rem, 4vw, 2.75rem);
  font-weight:500;
  color:var(--wh-navy);
  letter-spacing:0.12em;
  text-transform:uppercase;
  /* Was 3rem — tightened since the top ornament is gone. */
  margin:0 0 1.75rem;
}

.wh-vibe__carousel{
  display:flex; align-items:center; gap:1rem;
  /* Was 1280 — widened so each of the 4 visible cards gets a chunk
     more width on big screens. */
  max-width:1520px; margin:0 auto;
  position:relative;
  padding:0;
}

.wh-vibe__arrow{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--wh-line);
  background:#fff;
  color:var(--wh-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(0,0,0,0.18);
  transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.wh-vibe__arrow:hover{
  background:var(--wh-navy); color:#fff; border-color:var(--wh-navy);
  transform:scale(1.05);
}
.wh-vibe__arrow svg{display:block;}

.wh-vibe__grid{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  grid-auto-flow:column;
  /* exactly 4 cards visible at desktop: (100% - 3 gaps) / 4.
     Gap reduced from 2rem to 1.25rem so cards grow ~9% wider. */
  grid-auto-columns:calc((100% - 3 * 1.25rem) / 4);
  gap:1.25rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* Vertical padding tightened (was 1rem top / 1.5rem bottom). */
  padding:0.5rem 0.25rem 0.75rem;
  scrollbar-width:none;
}
.wh-vibe__grid::-webkit-scrollbar{display:none;}

@media (max-width: 1024px){
  .wh-vibe__grid{grid-auto-columns:calc((100% - 2 * 1.25rem) / 3); gap:1.25rem;}
}
@media (max-width: 720px){
  .wh-vibe__grid{grid-auto-columns:calc((100% - 1rem) / 2); gap:1rem;}
}
@media (max-width: 600px){
  /* One full card visible at a time on phones (was 80% = 1.25 cards).
     Parent selector bumps specificity over the later 768px override. */
  .wh-vibe .wh-vibe__grid{grid-auto-columns:100% !important; gap:0.75rem;}
}

.wh-vibe-card{
  scroll-snap-align:start;
  position:relative;
  aspect-ratio: 3 / 4;
  background-size:cover;
  background-position:center top;
  background-color:var(--wh-cream-deep);
  /* Full cathedral arch — half-ellipse spanning the card width */
  border-top-left-radius:50% 42%;
  border-top-right-radius:50% 42%;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:
    0 0 0 5px rgba(255,200,180,0.4),
    0 22px 45px -18px rgba(40,40,40,0.22);
  transition:transform 0.4s ease, box-shadow 0.4s ease;
  isolation:isolate;
}
.wh-vibe-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 0 0 5px rgba(255,200,180,0.6),
    0 30px 60px -20px rgba(40,40,40,0.4);
}
.wh-vibe-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.72) 100%);
  z-index:1;
}
.wh-vibe-card span{
  position:absolute; left:0; right:0; bottom:1.5rem;
  z-index:2; text-align:center;
  font-family:'Jost', sans-serif;
  font-size:1.95rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,0.55);
}

.wh-vibe-card[data-vibe="kurta"]{
  background-image:url('/content/images/Kurtasetvibe.png');
}
.wh-vibe-card[data-vibe="jodhpuri"]{
  background-image:url('/content/images/jodhpurivibe.png');
}
.wh-vibe-card[data-vibe="indowestern"]{
  background-image:url('/content/images/indowesternvibe.png');
}
.wh-vibe-card[data-vibe="tuxedo"]{
  background-image:url('/content/images/tuxedovibe.png');
}
.wh-vibe-card[data-vibe="sherwani"]{
  background-image:url('/content/images/sherwanivibe.png');
}
.wh-vibe-card[data-vibe="gown"]{
  background-image:url('/content/images/gownvibe.png');
}
.wh-vibe-card[data-vibe="lehenga"]{
  background-image:url('/content/images/lehengavibe.png');
}
/* Cards using the pre-designed local images — hide the dark bottom
   gradient and the label text so only the photo shows. All 8 vibe
   cards now use local images, so all 8 are listed here. */
.wh-vibe-card[data-vibe="kurta"]::before,
.wh-vibe-card[data-vibe="lehenga"]::before,
.wh-vibe-card[data-vibe="indowestern"]::before,
.wh-vibe-card[data-vibe="jodhpuri"]::before,
.wh-vibe-card[data-vibe="sherwani"]::before,
.wh-vibe-card[data-vibe="tuxedo"]::before,
.wh-vibe-card[data-vibe="gown"]::before,
.wh-vibe-card[data-vibe="saree"]::before{display:none;}
.wh-vibe-card[data-vibe="kurta"] > span,
.wh-vibe-card[data-vibe="lehenga"] > span,
.wh-vibe-card[data-vibe="indowestern"] > span,
.wh-vibe-card[data-vibe="jodhpuri"] > span,
.wh-vibe-card[data-vibe="sherwani"] > span,
.wh-vibe-card[data-vibe="tuxedo"] > span,
.wh-vibe-card[data-vibe="gown"] > span,
.wh-vibe-card[data-vibe="saree"] > span{display:none;}
.wh-vibe-card[data-vibe="saree"]{
  background-image:url('/content/images/indowesternwomen.png');
}

@media (max-width: 768px){
  .wh-vibe{padding:4rem 1rem 3rem;}
  .wh-vibe__arrow{width:36px; height:36px;}
  .wh-vibe__grid{grid-auto-columns:minmax(180px, 220px); gap:1rem;}
}

/* ============================================================ */
/* OCCASIONS — Men/Women section tabs + horizontal carousel      */
/* ============================================================ */

/* Section-level Men/Women tab switcher */
.wh-occ-tabs{
  display:flex; justify-content:center; gap:3rem;
  margin:0.5rem auto 2.75rem;
}
.wh-occ-tab{
  position:relative;
  cursor:pointer;
  font-family:'Montserrat', sans-serif;
  font-size:1.05rem;
  font-weight:500;
  color:var(--wh-ink-soft);
  letter-spacing:0.02em;
  padding:0.4rem 0.25rem 0.6rem;
  transition:color 0.25s ease;
}
.wh-occ-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--wh-saffron);
  transform:scaleX(0); transform-origin:center;
  transition:transform 0.3s ease;
}
.wh-occ-tab:hover{color:var(--wh-ink);}
#wh-tab-men:checked   ~ #offers .wh-occ-tab--men,
#wh-tab-women:checked ~ #offers .wh-occ-tab--women{
  color:var(--wh-ink);
  font-weight:600;
}
#wh-tab-men:checked   ~ #offers .wh-occ-tab--men::after,
#wh-tab-women:checked ~ #offers .wh-occ-tab--women::after{
  transform:scaleX(1);
}

/* Horizontal scrollable carousel — Manyavar pattern */
.wh-occ-grid{
  display:grid !important;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px, 320px);
  gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0.5rem 2rem 2rem;
  max-width:1400px !important;
  margin:0 auto !important;
  scrollbar-width:thin;
  scrollbar-color:var(--wh-gold) transparent;
}
.wh-occ-grid::-webkit-scrollbar{height:6px;}
.wh-occ-grid::-webkit-scrollbar-track{background:transparent;}
.wh-occ-grid::-webkit-scrollbar-thumb{background:var(--wh-gold); border-radius:3px;}

.wh-occ-grid li{
  scroll-snap-align:start;
  aspect-ratio: 4 / 5 !important;
  font-family:'Montserrat', sans-serif !important;
  font-size:1.5rem !important;
  font-weight:600 !important;
  font-style:normal !important;
  letter-spacing:0.25em !important;
  text-transform:uppercase;
  text-align:center !important;
  justify-content:center;
  padding:2rem 1rem !important;
}
.wh-occ-grid li::after{display:none;} /* hide the gold corner accent for cleaner look */

/* ---------- MEN occasion photos ---------- */
#wh-tab-men:checked ~ #offers .wh-occ-grid li:nth-of-type(1){ /* Wedding */
  background-image:url('https://images.unsplash.com/photo-1610047402714-307d99a677db?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-men:checked ~ #offers .wh-occ-grid li:nth-of-type(2){ /* Engagement */
  background-image:url('https://images.unsplash.com/photo-1681717055630-c62333c22fec?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-men:checked ~ #offers .wh-occ-grid li:nth-of-type(3){ /* Mehndi */
  background-image:url('https://images.unsplash.com/photo-1727835523545-70ee992b5763?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-men:checked ~ #offers .wh-occ-grid li:nth-of-type(4){ /* Haldi */
  background-image:url('https://images.unsplash.com/photo-1633104502699-b2ecf0fee294?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-men:checked ~ #offers .wh-occ-grid li:nth-of-type(5){ /* Sangeet */
  background-image:url('https://images.unsplash.com/photo-1729347917808-e3e35a462fec?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-men:checked ~ #offers .wh-occ-grid li:nth-of-type(6){ /* Reception */
  background-image:url('https://images.unsplash.com/photo-1633104502901-10d124036629?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-men:checked ~ #offers .wh-occ-grid li:nth-of-type(7){ /* Cocktail */
  background-image:url('https://images.unsplash.com/photo-1587271339318-2e78fdf79586?w=900&h=1125&auto=format&fit=crop&q=85');
}

/* ---------- WOMEN occasion photos ---------- */
#wh-tab-women:checked ~ #offers .wh-occ-grid li:nth-of-type(1){ /* Wedding */
  background-image:url('https://images.unsplash.com/photo-1668371679302-a8ec781e876e?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-women:checked ~ #offers .wh-occ-grid li:nth-of-type(2){ /* Engagement */
  background-image:url('https://images.unsplash.com/photo-1600685890506-593fdf55949b?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-women:checked ~ #offers .wh-occ-grid li:nth-of-type(3){ /* Mehndi */
  background-image:url('https://images.unsplash.com/photo-1525135850648-b42365991054?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-women:checked ~ #offers .wh-occ-grid li:nth-of-type(4){ /* Haldi */
  background-image:url('https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-women:checked ~ #offers .wh-occ-grid li:nth-of-type(5){ /* Sangeet */
  background-image:url('https://images.unsplash.com/photo-1619715613791-89d35b51ff81?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-women:checked ~ #offers .wh-occ-grid li:nth-of-type(6){ /* Reception */
  background-image:url('https://images.unsplash.com/photo-1617627143750-d86bc21e42bb?w=900&h=1125&auto=format&fit=crop&q=85');
}
#wh-tab-women:checked ~ #offers .wh-occ-grid li:nth-of-type(7){ /* Cocktail */
  background-image:url('https://images.unsplash.com/photo-1735052709798-2abcc8c0d6e1?w=900&h=1125&auto=format&fit=crop&q=85');
}

/* ---------- COLLECTIONS (Men) ---------- */
.wh-men-only ul li:nth-of-type(1){ /* Sherwani */
  background-image:url('https://images.unsplash.com/photo-1681717055630-c62333c22fec?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-men-only ul li:nth-of-type(2){ /* Bandhgala */
  background-image:url('https://images.unsplash.com/photo-1633104502901-10d124036629?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-men-only ul li:nth-of-type(3){ /* Kurta */
  background-image:url('https://images.unsplash.com/photo-1727835523545-70ee992b5763?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-men-only ul li:nth-of-type(4){ /* Indo-Western */
  background-image:url('https://images.unsplash.com/photo-1729347917808-e3e35a462fec?w=900&h=1200&auto=format&fit=crop&q=85');
}

/* ---------- COLLECTIONS (Women) ---------- */
.wh-women-only ul li:nth-of-type(1){ /* Bridal Lehenga */
  background-image:url('https://images.unsplash.com/photo-1668371679302-a8ec781e876e?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-women-only ul li:nth-of-type(2){ /* Saree */
  background-image:url('https://images.unsplash.com/photo-1617627143750-d86bc21e42bb?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-women-only ul li:nth-of-type(3){ /* Anarkali */
  background-image:url('https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-women-only ul li:nth-of-type(4){ /* Indo-Western */
  background-image:url('https://images.unsplash.com/photo-1619715613791-89d35b51ff81?w=900&h=1200&auto=format&fit=crop&q=85');
}

/* ============================================================ */
/* STORES — compact city tiles row                               */
/* ============================================================ */
.wh-section#stores{
  padding:3rem 2rem 3.25rem;
}
.wh-section#stores h2{
  margin-bottom:0;
}
.wh-section#stores h2::before{
  margin-bottom:14px;
}
.wh-section#stores h2::after{
  margin-top:14px;
}
#stores ol{
  /* Centered flex row so any number of visible stores (4, 5, or 6)
     sits centered instead of left-bunched. Wraps on smaller screens. */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.5rem 2rem;
  max-width:1280px;
  margin:1.5rem auto 0;
  counter-reset:store;
}
#stores ol li{
  position:relative;
  background:transparent;
  flex:0 0 auto;
  width:170px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:0.75rem 0.5rem;
  color:var(--wh-navy);
  text-align:center;
  cursor:pointer;
  border:none;
  aspect-ratio:auto;
  transition:none;
}
#stores ol li::before{
  display:none;          /* drop the gold halo */
}
#stores ol li:hover{transform:none;}

.wh-store-icon{
  position:relative; z-index:1;
  color:#555;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:0.5rem;
  transition:color 0.2s ease;
}
.wh-store-icon svg{display:block; width:42px; height:42px;}
#stores ol li:hover .wh-store-icon{
  transform:none;
  color:#1a1a1a;
}

.wh-store-city{
  position:relative; z-index:1;
  font-family:'Inter', sans-serif;
  font-size:14px; font-weight:500; font-style:normal;
  color:#1a1a1a;
  letter-spacing:0.2px;
  line-height:1.2;
  margin-bottom:2px;
}
.wh-store-state{
  position:relative; z-index:1;
  font-family:'Inter', sans-serif;
  font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:#888;
  font-weight:500;
}

/* ============================================================ */
/* FOOTER — Manyavar-style multi-band                            */
/* ============================================================ */
.wh-footer{
  background:var(--wh-navy);
  color:var(--wh-cream);
  border-top:4px solid var(--wh-gold);
  position:relative;
}
.wh-footer a{color:inherit; text-decoration:none;}

/* ---------- 1. Newsletter band ---------- */
.wh-foot__news{
  text-align:center;
  padding:4.5rem 1.5rem 4rem;
  border-bottom:1px solid rgba(200,200,200,0.2);
  background:
    radial-gradient(ellipse at top, rgba(200,200,200,0.08), transparent 60%);
}
.wh-foot__news-eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.5em;
  text-transform:uppercase; color:var(--wh-gold);
  margin:0 0 1rem; font-weight:600;
}
.wh-foot__news-title{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.75rem, 3.5vw, 2.5rem);
  font-style:italic; font-weight:500;
  color:var(--wh-cream);
  margin:0 0 0.75rem; letter-spacing:0.02em;
}
.wh-foot__news-sub{
  font-family:'Jost', sans-serif;
  font-size:1rem; font-style:italic;
  color:rgba(251,245,230,0.75);
  margin:0 auto 2rem; max-width:520px;
}
.wh-foot__news-form{
  display:inline-flex; align-items:stretch;
  max-width:520px; width:100%;
  border:1px solid rgba(200,200,200,0.4);
  background:rgba(200,200,200,0.04);
}
.wh-foot__news-form input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  padding:0.95rem 1.25rem;
  color:var(--wh-cream);
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem;
}
.wh-foot__news-form input::placeholder{color:rgba(251,245,230,0.45);}
.wh-foot__news-form button{
  background:var(--wh-gold); color:var(--wh-navy);
  border:none; padding:0 2rem; cursor:pointer;
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.4em; text-transform:uppercase;
  font-weight:700;
  transition:background 0.25s ease;
}
.wh-foot__news-form button:hover{background:var(--wh-gold-soft);}

/* ---------- 2. Brand block (centered) ---------- */
.wh-foot__main{
  max-width:1280px; margin:0 auto;
  padding:5rem 2rem 4rem;
  text-align:center;
  border-bottom:1px solid rgba(200,200,200,0.2);
}
.wh-foot__brand{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
}
.wh-foot__mark{display:inline-block; line-height:0;}
.wh-foot__mark svg{display:block;}
.wh-foot__brand-name{
  font-family:'Montserrat', sans-serif;
  font-size:1.05rem; font-weight:800;
  letter-spacing:0.25em; text-transform:uppercase;
  color:var(--wh-cream);
  margin:1rem 0 0.75rem;
}
.wh-foot__brand-tag{
  font-family:'Jost', sans-serif;
  font-size:1rem; font-style:italic; line-height:1.6;
  color:rgba(251,245,230,0.75);
  margin:0; max-width:280px;
}

.wh-foot__cols{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2.5rem;
}
.wh-foot__col h4{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--wh-gold);
  margin:0 0 1.25rem; font-weight:600;
  padding-bottom:0.85rem;
  border-bottom:1px solid rgba(200,200,200,0.2);
}
.wh-foot__col ul{margin:0; padding:0; list-style:none;}
.wh-foot__col li{margin:0 0 0.7rem;}
.wh-foot__col a{
  font-family:'Jost', sans-serif;
  font-size:1rem; font-style:italic;
  color:rgba(251,245,230,0.78);
  transition:color 0.2s ease, padding-left 0.2s ease;
  display:inline-block;
}
.wh-foot__col a:hover{color:var(--wh-gold); padding-left:4px;}

/* ---------- 3. Contact row ---------- */
.wh-foot__contact{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:2.5rem;
  padding:2.25rem 1.5rem;
  border-bottom:1px solid rgba(200,200,200,0.2);
}
.wh-foot__contact-item{
  display:inline-flex; align-items:center; gap:0.65rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.88rem; letter-spacing:0.05em;
  color:var(--wh-cream); opacity:0.85;
  transition:color 0.2s ease, opacity 0.2s ease;
}
.wh-foot__contact-item:hover{color:var(--wh-gold); opacity:1;}
.wh-foot__contact-item--static{cursor:default;}
.wh-foot__contact-item--static:hover{color:var(--wh-cream); opacity:0.85;}
.wh-foot__contact-item svg{color:var(--wh-gold);}

/* ---------- 4. Stores ribbon ---------- */
.wh-foot__stores{
  text-align:center;
  padding:2.5rem 1.5rem;
  background:rgba(0,0,0,0.18);
  border-bottom:1px solid rgba(200,200,200,0.2);
}
.wh-foot__stores-label{
  font-family:'Jost', sans-serif;
  font-size:1.1rem; font-style:italic;
  color:rgba(251,245,230,0.75);
  margin:0 0 0.85rem;
}
.wh-foot__stores-cities{
  font-family:'Montserrat', sans-serif;
  font-size:0.78rem; letter-spacing:0.4em;
  color:var(--wh-gold);
  margin:0; font-weight:600;
}

/* ---------- 5. Social row (centered) ---------- */
.wh-foot__row{
  display:flex; justify-content:center; align-items:center;
  gap:2rem;
  max-width:1280px; margin:0 auto;
  padding:2.5rem 2rem;
  border-bottom:1px solid rgba(200,200,200,0.2);
}

/* Social icons (re-styled inline) */
.wh-social{
  display:flex; gap:1rem; align-items:center;
  margin:0;
}
.wh-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  color:var(--wh-cream); opacity:0.75;
  border:1px solid rgba(200,200,200,0.4);
  border-radius:50%;
  transition:color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s, opacity 0.25s;
}
.wh-social a:hover{
  color:var(--wh-navy);
  background:var(--wh-gold);
  border-color:var(--wh-gold);
  opacity:1;
  transform:translateY(-2px);
}
.wh-social svg{display:block;}

/* Payment row */
.wh-foot__payment{
  display:flex; flex-direction:column; align-items:flex-end; gap:0.65rem;
}
.wh-foot__payment-label{
  font-family:'Montserrat', sans-serif;
  font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase;
  color:rgba(251,245,230,0.6); font-weight:500;
}
.wh-foot__pay-row{
  display:flex; gap:0.5rem; flex-wrap:wrap;
}
.wh-foot__pay-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.4rem 0.85rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.62rem; letter-spacing:0.18em; font-weight:700;
  color:var(--wh-cream);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(200,200,200,0.3);
  border-radius:3px;
}

/* ---------- 6. Trust badges ---------- */
.wh-foot__trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem;
  padding:2.5rem 1.5rem;
  border-bottom:1px solid rgba(200,200,200,0.2);
}
.wh-foot__trust-item{
  display:inline-flex; align-items:center; gap:0.75rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--wh-cream); opacity:0.82; font-weight:500;
}
.wh-foot__trust-item svg{color:var(--wh-gold); flex:0 0 auto;}

/* ---------- 7. Legal ---------- */
.wh-foot__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.25rem;
  max-width:1280px; margin:0 auto;
  padding:2rem 2rem 2.5rem;
}
.wh-foot__copy{
  font-family:'Jost', sans-serif;
  font-size:0.88rem; font-style:italic;
  color:rgba(251,245,230,0.65);
  margin:0; letter-spacing:0.05em;
}
.wh-foot__legal-links{
  display:flex; gap:1.75rem; flex-wrap:wrap;
  margin:0; padding:0; list-style:none;
}
.wh-foot__legal-links a{
  font-family:'Montserrat', sans-serif;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(251,245,230,0.65); font-weight:500;
  transition:color 0.2s ease;
}
.wh-foot__legal-links a:hover{color:var(--wh-gold);}

/* ---------- Footer responsive ---------- */
@media (max-width: 1024px){
  .wh-foot__cols{grid-template-columns:repeat(2, 1fr); gap:2rem 1.5rem;}
}
@media (max-width: 768px){
  .wh-foot__main{
    grid-template-columns:1fr;
    gap:2.5rem;
    padding:3.5rem 1.5rem 3rem;
    text-align:center;
  }
  .wh-foot__brand-tag{margin:0 auto;}
  .wh-foot__col h4{text-align:left;}
  .wh-foot__col{text-align:left;}
  .wh-foot__contact{gap:1.25rem; padding:2rem 1.25rem;}
  .wh-foot__row{
    flex-direction:column; text-align:center;
    padding:2rem 1.25rem;
  }
  .wh-foot__payment{align-items:center;}
  .wh-foot__trust{gap:1.5rem 2rem; padding:2rem 1.25rem;}
  .wh-foot__legal{flex-direction:column; text-align:center; padding:2rem 1.25rem 2.5rem;}
  .wh-foot__legal-links{justify-content:center; gap:1.25rem;}
}
@media (max-width: 480px){
  .wh-foot__cols{grid-template-columns:1fr; gap:1.5rem;}
  .wh-foot__news{padding:3.5rem 1.25rem 3rem;}
  /* Keep input + button inline as a pill (luxe.shreeshivam.com reference)
     instead of stacking. The pill rounds at both ends with the JOIN button
     sitting on the right of the input. */
  .wh-foot__news-form{
    flex-direction:row;
    border-radius:999px;
    overflow:hidden;
    padding:4px;
    background:rgba(255,255,255,0.06);
  }
  .wh-foot__news-form input{padding:0.85rem 1rem; font-size:0.92rem;}
  .wh-foot__news-form button{
    padding:0 1.4rem;
    border-radius:999px;
    font-size:0.68rem; letter-spacing:0.3em;
    white-space:nowrap;
  }
  .wh-foot__trust-item{font-size:0.7rem; letter-spacing:0.15em;}
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */
@media (max-width: 900px){
  .wh-announce{font-size:0.9rem; letter-spacing:0.14em; padding:0.7rem 0.75rem;}
  .wh-nav{
    grid-template-columns:auto 1fr auto;
    gap:0.75rem;
    padding:0.75rem 1rem;
  }
  .wh-nav__menu-btn{display:inline-flex;}
  .wh-nav__logo{justify-self:center;}
  .wh-nav__logo svg{width:48px; height:48px;}
  .wh-nav__links{display:none;}
  .wh-nav__right{gap:0.85rem;}
  .wh-nav__right .wh-icon[aria-label="Wishlist"],
  .wh-nav__right .wh-icon[aria-label="Account"]{display:none;}
  .wh-hero{padding:5rem 1.5rem; min-height:55vh;}
  .wh-section{padding:4rem 1.25rem;}
  .wh-section ul, .wh-section ol{grid-template-columns:1fr;}
  .wh-section ul li{aspect-ratio: 4 / 3;}
  .wh-occ-grid{grid-auto-columns:minmax(220px, 260px); padding:0.5rem 1.25rem 2rem;}
  .wh-occ-grid li{aspect-ratio:4/5 !important;}

  /* Banner: shift mask blend toward center so text stays readable on narrow screens */
  .wh-banner{min-height:68vh;}
  .wh-banner__photo--left{
    -webkit-mask-image:linear-gradient(to right, #000 55%, transparent 100%);
            mask-image:linear-gradient(to right, #000 55%, transparent 100%);
  }
  .wh-banner__photo--right{
    -webkit-mask-image:linear-gradient(to left, #000 55%, transparent 100%);
            mask-image:linear-gradient(to left, #000 55%, transparent 100%);
  }
  .wh-banner__content{padding:4rem 1.25rem;}
}

@media (max-width: 560px){
  /* Stack the diptych vertically on phones for richer composition */
  .wh-banner__bg{grid-template-columns:1fr; grid-template-rows:1fr 1fr;}
  .wh-banner__photo--left{
    grid-column:1; grid-row:1;
    -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 55%, transparent 100%);
  }
  .wh-banner__photo--right{
    grid-column:1; grid-row:2;
    -webkit-mask-image:linear-gradient(to top, #000 55%, transparent 100%);
            mask-image:linear-gradient(to top, #000 55%, transparent 100%);
  }
  .wh-banner{min-height:62vh;}
}

/* ============================================================ */
/* SEARCH MODAL                                                  */
/* ============================================================ */
.wh-modal{
  position:fixed; inset:0; z-index:100;
  opacity:0; pointer-events:none;
  transition:opacity 0.35s ease;
}
.wh-modal[aria-hidden="false"]{opacity:1; pointer-events:auto;}
body.wh-modal-open{overflow:hidden;}

.wh-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(13,8,5,0.72);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}

.wh-modal__panel{
  position:relative;
  max-width:720px;
  margin:8vh auto 0;
  background:var(--wh-cream);
  padding:3rem 2.5rem 2.5rem;
  border-top:4px solid var(--wh-gold);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.4);
  text-align:center;
  transform:translateY(-30px);
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.wh-modal[aria-hidden="false"] .wh-modal__panel{transform:translateY(0);}

.wh-modal__close{
  position:absolute; top:1rem; right:1rem;
  width:40px; height:40px;
  background:transparent; border:1px solid var(--wh-line);
  color:var(--wh-ink); cursor:pointer;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background 0.25s, color 0.25s, border-color 0.25s;
}
.wh-modal__close:hover{background:var(--wh-ink); color:#fff; border-color:var(--wh-ink);}

.wh-modal__eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.45em;
  text-transform:uppercase; color:var(--wh-gold);
  margin:0 0 0.75rem; font-weight:600;
}
.wh-modal__title{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  font-style:italic; font-weight:500;
  color:var(--wh-navy);
  margin:0 0 2rem;
}

.wh-modal__input-wrap{
  display:flex; align-items:center; gap:0.5rem;
  border:1px solid var(--wh-line);
  background:#fff;
  padding:0.4rem 0.4rem 0.4rem 1rem;
  margin-bottom:2rem;
  transition:border-color 0.25s;
}
.wh-modal__input-wrap:focus-within{border-color:var(--wh-gold);}
.wh-modal__input-icon{color:var(--wh-gold); flex:0 0 auto;}
.wh-modal__input-wrap input{
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-family:'Jost', sans-serif;
  font-size:1.1rem; font-style:italic;
  padding:0.85rem 0.75rem;
  color:var(--wh-ink);
}
.wh-modal__input-wrap input::placeholder{color:rgba(13,8,5,0.45);}
.wh-modal__submit{
  background:#fff; color:#1a1a1a;
  border:1px solid #1a1a1a; border-radius:0;
  padding:11px 22px;
  font-family:'Inter', sans-serif;
  font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:500; cursor:pointer;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-modal__submit:hover{background:#1a1a1a; color:#fff; letter-spacing:1.7px;}

.wh-modal__suggestions-label{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.35em;
  text-transform:uppercase; color:var(--wh-ink-soft);
  margin:0 0 1rem; font-weight:600;
}
.wh-modal__suggestions ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem;
}
.wh-modal__suggestions li a{
  display:inline-block;
  padding:0.45rem 1rem;
  border:1px solid var(--wh-line);
  background:#fff;
  font-family:'Jost', sans-serif;
  font-size:0.95rem; font-style:italic;
  color:var(--wh-navy);
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.wh-modal__suggestions li a:hover{
  background:var(--wh-navy); color:#fff; border-color:var(--wh-navy);
}

@media (max-width: 600px){
  .wh-modal__panel{
    margin:4vh 1rem 0; padding:2.5rem 1.25rem 1.75rem;
    max-height:92vh; overflow-y:auto;
  }
  .wh-modal__input-wrap{flex-wrap:wrap;}
  .wh-modal__input-wrap input{min-width:140px;}
  .wh-modal__submit{flex:1; padding:0.85rem 1rem;}
}

/* ============================================================ */
/* GENERIC PAGE (blog, cart, wishlist)                           */
/* ============================================================ */
.wh-page{
  background:var(--wh-cream);
  padding:6rem 1.5rem 5rem;
  border-top:1px solid var(--wh-line);
  min-height:60vh;
}
.wh-page__inner{
  max-width:680px; margin:0 auto;
  text-align:center;
}
.wh-page__inner--narrow{max-width:620px;}

/* Ornament hidden — kept selector for backward compat with other pages */
.wh-page__ornament{display:none;}
.wh-page__ornament svg{display:none;}

.wh-page__eyebrow{
  font-family:'Inter', sans-serif;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:#888;
  margin:0 0 14px; font-weight:500;
}
.wh-page__title{
  font-family:'Inter', sans-serif;
  font-size:clamp(28px, 4vw, 40px);
  font-weight:600; font-style:normal;
  color:#1a1a1a;
  letter-spacing:-0.5px; line-height:1.2;
  margin:0 0 14px;
}
.wh-page__lede{
  font-family:'Inter', sans-serif;
  font-size:15px; font-weight:400;
  font-style:normal; color:#555;
  margin:0 auto 36px !important;
  max-width:480px; line-height:1.6;
  text-align:center !important;
}

/* Empty state (cart/wishlist) — clean card with soft icon */
.wh-page__empty{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:0 auto 32px;
  padding:48px 24px;
  background:#fff;
  border:1px solid #ececec;
  border-radius:10px;
}
.wh-page__empty svg{
  opacity:0.45;
  color:#1a1a1a;
}
.wh-page__empty-line{
  font-family:'Inter', sans-serif;
  font-size:14px; color:#777; font-weight:400;
  font-style:normal;
  margin:0;
}

/* Buttons row — brand-standard CTAs */
.wh-page__cta-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin:0 0 40px;
}
.wh-page__btn{
  display:inline-block;
  padding:11px 26px;
  font-family:'Inter', sans-serif;
  font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  border-radius:0;
  cursor:pointer;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-page__btn--primary{
  background:#fff; color:#1a1a1a; border:1px solid #1a1a1a;
}
.wh-page__btn--primary:hover{
  background:#1a1a1a; color:#fff;
  letter-spacing:1.7px;
}
.wh-page__btn--ghost{
  background:#fff; color:#1a1a1a; border:1px solid #1a1a1a;
}
.wh-page__btn--ghost:hover{
  background:#1a1a1a; color:#fff;
  letter-spacing:1.7px;
}

/* Suggestion chips — subtle, refined */
.wh-page__suggest-label{
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:#888; margin:0 0 14px; font-weight:500;
}
.wh-page__suggest-grid{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.wh-page__chip{
  padding:8px 16px;
  border:1px solid #ececec;
  background:#fff;
  font-family:'Inter', sans-serif;
  font-size:13px; font-style:normal; font-weight:400;
  color:#333;
  text-decoration:none;
  border-radius:999px;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wh-page__chip:hover{
  background:#1a1a1a; color:#fff; border-color:#1a1a1a;
}

/* Blog cards grid */
.wh-page__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:2rem;
  margin:0 0 3rem;
}

/* Blog page wider container — the default .wh-page__inner is 680px which
   leaves huge side gutters on widescreens. Use min() so it grows up to
   1480px on big screens but shrinks naturally on mobile (no enforced
   minimum, unlike clamp which was overflowing 390px viewports). */
.wh-page--blog .wh-page__inner{
  max-width:min(96vw, 1480px);
}
/* Compacted top padding — default .wh-page is 6rem (60px) which left a
   big gap above the heading. Trimmed for the blog page only. Bottom
   kept at default. */
.wh-page--blog{
  padding-top:1.25rem;
}
.wh-page--blog .wh-page__title,
.wh-page--blog .wh-page__eyebrow{
  max-width:720px;
  margin-left:auto; margin-right:auto;
}
/* Blog card photos: faces sit in the upper third of these product
   shots — shift the cover-crop up so heads aren't clipped. Double-class
   selector raises specificity above the later .wh-blog-card__image
   base rule that locked background-position to center. */
.wh-page--blog .wh-blog-card__image{ background-position:center 20% !important; }

/* Compact cards on the blog listing page — smaller grid columns, tighter
   padding + type, 2-line excerpt clamp. Renders ~5-6 cards per row at
   1480px. Selectors prefixed with .wh-page--blog so other pages using
   .wh-blog-card (if any) stay unchanged. */
.wh-page--blog .wh-page__grid{
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.5rem;
  margin:0 0 3rem;
}
.wh-page--blog .wh-blog-card{
  border-radius:6px;
}
.wh-page--blog .wh-blog-card__image{
  aspect-ratio:16/11;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
}
.wh-page--blog .wh-blog-card__body{ padding:1.3rem 1.3rem 1.4rem; }
.wh-page--blog .wh-blog-card__meta{
  font-size:0.72rem; letter-spacing:0.22em; margin:0 0 0.6rem;
}
.wh-page--blog .wh-blog-card h3{
  font-size:1.35rem; font-style:normal; font-weight:600;
  line-height:1.3;
  margin:0 0 0.65rem;
  /* Clamp to 2 lines so card heights stay even */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wh-page--blog .wh-blog-card h3 a{ color:inherit; text-decoration:none; }
.wh-page--blog .wh-blog-card__body p{
  font-family:'Inter', sans-serif;
  font-size:1rem; line-height:1.55;
  margin:0 0 1.15rem;
  color:#5a5550;
  /* Clamp the excerpt to 2 lines so all cards line up */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Unified site button — square outline, mirrors .wh-store-back. */
.wh-page--blog .wh-blog-card__link{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.6rem 1.15rem;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-family:'Inter', sans-serif;
  font-size:0.74rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-page--blog .wh-blog-card__link:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.16em;
}

/* Mobile: 1 card per row, image gets a taller crop to show more of the
   photo. */
@media (max-width: 600px){
  .wh-page--blog .wh-page__grid{ grid-template-columns:1fr !important; gap:1.25rem; }
  .wh-page--blog .wh-blog-card__image{ aspect-ratio:4/3 !important; }
  .wh-page--blog .wh-blog-card__body{ padding:1.3rem 1.3rem 1.4rem; }
  .wh-page--blog .wh-blog-card h3{ font-size:1.3rem; }
  .wh-page--blog .wh-blog-card__body p{ font-size:1rem; }
  .wh-page--blog .wh-blog-card__link{ font-size:0.72rem; padding:0.55rem 1.05rem; }
}
.wh-blog-card{
  background:#fff;
  border:1px solid var(--wh-line);
  overflow:hidden;
  text-align:left;
  transition:transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.wh-blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px -22px rgba(13,8,5,0.18);
  border-color:var(--wh-gold);
}
.wh-blog-card__image{
  display:block;                  /* <a> is inline by default — collapses aspect-ratio without this */
  aspect-ratio:16/10;
  background-size:cover; background-position:center;
  background-color:var(--wh-cream-deep);
}
.wh-blog-card__image[data-blog="craft"]{
  background-image:url('https://images.unsplash.com/photo-1727835523545-70ee992b5763?w=900&h=560&auto=format&fit=crop&q=85');
}
.wh-blog-card__image[data-blog="bridal"]{
  background-image:url('https://images.unsplash.com/photo-1668371679302-a8ec781e876e?w=900&h=560&auto=format&fit=crop&q=85');
}
.wh-blog-card__image[data-blog="festive"]{
  background-image:url('https://images.unsplash.com/photo-1729347917808-e3e35a462fec?w=900&h=560&auto=format&fit=crop&q=85');
}
.wh-blog-card__image[data-blog="atelier"]{
  background-image:url('https://images.unsplash.com/photo-1635919254131-cbaa334ef53e?w=900&h=560&auto=format&fit=crop&q=85');
}
.wh-blog-card__body{padding:1.75rem;}
.wh-blog-card__meta{
  font-family:'Montserrat', sans-serif;
  font-size:0.65rem; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--wh-gold); margin:0 0 0.85rem; font-weight:600;
}
.wh-blog-card h3{
  font-family:'Jost', sans-serif;
  font-size:1.5rem; font-style:italic; font-weight:500;
  color:var(--wh-navy); margin:0 0 0.85rem; line-height:1.25;
}
.wh-blog-card__body p{
  font-family:'Jost', sans-serif;
  font-size:1rem; color:var(--wh-ink-soft);
  margin:0 0 1.25rem; line-height:1.6;
}
.wh-blog-card__link{
  font-family:'Montserrat', sans-serif;
  font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--wh-maroon); font-weight:600;
  border-bottom:1px solid var(--wh-gold);
  padding-bottom:3px;
  text-decoration:none;
}
.wh-blog-card__link:hover{color:var(--wh-navy);}

.wh-page__note{
  margin-top:2rem;
  font-family:'Jost', sans-serif;
  font-size:0.95rem; font-style:italic;
  color:var(--wh-ink-soft);
}

/* Pagination nav under the blog card grid — matches the brand pill style. */
.wh-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  margin:3rem auto 0;
  flex-wrap:wrap;
}
.wh-pagination__btn{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.65rem 1.3rem;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-family:'Inter', sans-serif;
  font-size:0.74rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-pagination__btn:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.16em;
}
.wh-pagination__btn--disabled{
  opacity:0.35;
  pointer-events:none;
  cursor:default;
}
.wh-pagination__info{
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--wh-ink-soft);
}
@media (max-width: 600px){
  .wh-pagination{ gap:0.75rem; margin-top:2.25rem; }
  .wh-pagination__btn{ padding:0.55rem 1.05rem; font-size:0.7rem; }
  .wh-pagination__info{ flex-basis:100%; text-align:center; order:-1; }
}

@media (max-width: 768px){
  .wh-page{padding:4rem 1rem 3.5rem;}
  .wh-page__cta-row{flex-direction:column; align-items:stretch;}
  .wh-page__btn{text-align:center;}
  .wh-page__grid{grid-template-columns:1fr; gap:1.5rem;}
}

/* ============================================================ */
/* Home stores grid — make each tile a clickable link            */
/* ============================================================ */
.wh-store-link{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:inherit;
  cursor:pointer;
}

/* ============================================================ */
/* STORE DETAIL PAGES (Raipur, Bilaspur, Delhi, Faridabad)       */
/* ============================================================ */
.wh-store-page{
  /* Trim top padding so the "OUR HOUSES" eyebrow sits closer to the nav.
     Default .wh-page is 6rem (60px) top — store pages now use ~1.5rem. */
  padding-top:1.5rem;
  padding-bottom:5rem;
}
.wh-store-page__inner{
  max-width:1500px; margin:0 auto;
  padding:0 1.5rem;
  text-align:center;
}

.wh-store-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  max-width:1080px; margin:3rem auto 0;
  text-align:left;
  align-items:stretch;
}
.wh-store-detail__info{
  background:#fff;
  border:1px solid #ececec;
  padding:36px 32px;
  border-radius:6px;
  display:flex; flex-direction:column;
}
.wh-store-detail__subtitle{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.4rem, 2.5vw, 1.85rem);
  font-style:italic; font-weight:500;
  color:var(--wh-navy);
  margin:0 0 1.5rem 0;
  padding-bottom:1rem;
  border-bottom:1px solid #ececec;
}
.wh-store-info-block{
  margin:0 0 1.25rem;
}
.wh-store-info-block:last-of-type{margin-bottom:1.75rem;}
.wh-store-info-block__label{
  font-family:'Montserrat', sans-serif;
  font-size:0.62rem; letter-spacing:0.4em; text-transform:uppercase;
  color:#888;
  margin:0 0 0.4rem; font-weight:600;
}
.wh-store-info-block address,
.wh-store-info-block a,
.wh-store-info-block > p{
  font-family:'Jost', sans-serif;
  font-size:1.1rem; font-style:italic;
  color:#222; line-height:1.6;
  margin:0;
  text-decoration:none;
  transition:color 0.2s ease;
}
.wh-store-info-block a:hover{color:#000;}

/* Map preview — smaller, balanced, refined */
.wh-store-detail__map{
  position:relative;
  display:block;
  border:1px solid #ececec;
  overflow:hidden;
  aspect-ratio: 4 / 3;
  max-height:380px;
  background:var(--wh-cream-deep);
  border-radius:6px;
  cursor:pointer;
  transition:border-color 0.3s ease, transform 0.4s ease;
  align-self:start;
}
.wh-store-detail__map:hover{
  border-color:#bdbdbd;
  transform:translateY(-2px);
}
.wh-store-detail__map-frame{
  width:100%; height:100%;
  border:0; display:block;
  filter:saturate(0.95);
  pointer-events:none;
}
.wh-store-detail__map-overlay{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px;
  background:rgba(26,26,26,0.92);
  color:#fff;
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:500;
  border-radius:4px;
  transition:background 0.25s ease;
}
.wh-store-detail__map:hover .wh-store-detail__map-overlay{background:#000;}
.wh-store-detail__map-overlay svg{color:#fff; width:14px; height:14px;}

/* Get Directions button — matches collection white-button style */
.wh-store-detail .wh-page__btn,
.wh-store-detail .wh-page__btn--primary{
  display:inline-block;
  align-self:flex-start;
  background:#fff; color:#1a1a1a;
  padding:9px 22px;
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  border:1px solid #1a1a1a;
  border-radius:0;
  margin-top:auto;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-store-detail .wh-page__btn:hover,
.wh-store-detail .wh-page__btn--primary:hover{
  background:#1a1a1a; color:#fff;
  border-color:#1a1a1a;
  letter-spacing:1.5px;
}

/* Divider between Delhi sub-stores */
.wh-store-divider{
  border:none; height:1px;
  background:var(--wh-line);
  max-width:1180px; margin:4rem auto;
  position:relative;
}
.wh-store-divider::after{
  content:""; position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:10px; height:10px;
  background:var(--wh-gold);
  border-radius:50%;
  box-shadow:0 0 0 6px var(--wh-cream);
}

/* Back to all-stores — styled exactly like Browse All Collections */
.wh-store-back{
  display:inline-block;
  margin-top:56px;
  background:#fff; color:#1a1a1a;
  padding:9px 22px;
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  border:1px solid #1a1a1a;
  border-radius:0;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-store-back:hover{
  background:#1a1a1a; color:#fff;
  letter-spacing:1.5px;
}

/* Three-card row — Photo | Map | Address, all matched in size + style. */
.wh-store-detail--with-photo{
  grid-template-columns:1fr 1fr 1fr;
  max-width:1500px;
  gap:1.75rem;
  align-items:stretch;
}
.wh-store-detail--with-photo .wh-store-detail__photo,
.wh-store-detail--with-photo .wh-store-detail__map,
.wh-store-detail--with-photo .wh-store-detail__info{
  width:100%;
  min-width:0;
  height:420px;
  max-height:420px;
  aspect-ratio:auto;
  align-self:stretch;
  box-sizing:border-box;
}
/* Photo card mirrors map card: same border, radius, hover lift. */
.wh-store-detail__photo{
  position:relative;
  display:block;
  border:1px solid #ececec;
  overflow:hidden;
  background:var(--wh-cream-deep);
  border-radius:6px;
  transition:border-color 0.3s ease, transform 0.4s ease;
}
.wh-store-detail__photo:hover{
  border-color:#bdbdbd;
  transform:translateY(-2px);
}
.wh-store-detail__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Address card — comfortable padding and readable type at 420px height. */
.wh-store-detail--with-photo .wh-store-detail__info{
  padding:1.85rem 1.85rem;
  overflow:hidden;
}
.wh-store-detail--with-photo .wh-store-info-block{ margin:0 0 1rem; }
.wh-store-detail--with-photo .wh-store-info-block:last-of-type{ margin-bottom:1.25rem; }
.wh-store-detail--with-photo .wh-store-info-block__label{
  font-size:0.72rem; letter-spacing:0.28em; margin:0 0 0.35rem;
}
.wh-store-detail--with-photo .wh-store-info-block address,
.wh-store-detail--with-photo .wh-store-info-block a,
.wh-store-detail--with-photo .wh-store-info-block > p{
  font-size:1.18rem; line-height:1.55;
}
.wh-store-detail--with-photo .wh-store-detail__subtitle{
  font-size:1.55rem; margin:0 0 1.2rem; padding-bottom:0.95rem;
}

@media (max-width: 900px){
  .wh-store-detail{grid-template-columns:1fr; gap:1.5rem;}
  .wh-store-detail--with-photo{ grid-template-columns:1fr; }
  .wh-store-detail--with-photo .wh-store-detail__photo{ grid-column:auto; }
  .wh-store-detail--with-photo .wh-store-detail__photo,
  .wh-store-detail--with-photo .wh-store-detail__map,
  .wh-store-detail--with-photo .wh-store-detail__info{
    height:auto; max-height:none;
  }
  .wh-store-detail__info{padding:1.75rem 1.5rem;}
  .wh-store-detail__map{aspect-ratio:4/3;}
  .wh-store-divider{margin:3rem auto;}
}

/* ============================================================ */
/* MENU DRAWER (slides in from left)                             */
/* ============================================================ */
.wh-drawer{
  position:fixed; inset:0; z-index:100;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.wh-drawer[aria-hidden="false"]{opacity:1; pointer-events:auto;}
.wh-drawer__backdrop{
  position:absolute; inset:0;
  background:rgba(13,8,5,0.5);
  -webkit-backdrop-filter:blur(2px);
          backdrop-filter:blur(2px);
}
.wh-drawer__panel{
  position:absolute; top:0; left:0; bottom:0;
  width:min(380px, 86vw);
  background:var(--wh-cream);
  padding:4rem 2rem 2rem;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
  box-shadow:24px 0 60px -20px rgba(0,0,0,0.4);
}
.wh-drawer[aria-hidden="false"] .wh-drawer__panel{transform:translateX(0);}

.wh-drawer__close{
  position:absolute; top:1rem; right:1rem;
  width:40px; height:40px;
  background:transparent; border:1px solid var(--wh-line);
  color:var(--wh-ink); cursor:pointer;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background 0.25s, color 0.25s, border-color 0.25s;
}
.wh-drawer__close:hover{background:var(--wh-ink); color:#fff; border-color:var(--wh-ink);}

.wh-drawer__eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:0.65rem; letter-spacing:0.45em; text-transform:uppercase;
  color:var(--wh-gold);
  margin:0 0 0.65rem; font-weight:600;
}
.wh-drawer__title{
  font-family:'Jost', sans-serif;
  font-size:1.55rem; font-style:italic; font-weight:500;
  color:var(--wh-navy);
  margin:0 0 2rem; letter-spacing:0.02em;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--wh-line);
}
.wh-drawer__nav{
  display:flex; flex-direction:column;
}
.wh-drawer__nav a, .wh-drawer__nav-item{
  display:block;
  padding:0.85rem 0;
  font-family:'Jost', sans-serif;
  font-size:1.15rem; font-style:italic; font-weight:500;
  color:var(--wh-ink); text-decoration:none;
  border-bottom:1px solid rgba(13,8,5,0.06);
  cursor:pointer;
  transition:color 0.2s, padding-left 0.2s;
}
.wh-drawer__nav a:hover, .wh-drawer__nav-item:hover{
  color:var(--wh-maroon); padding-left:0.5rem;
}

.wh-drawer__foot{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--wh-line);
}
.wh-drawer__foot p{
  font-family:'Jost', sans-serif;
  font-size:0.92rem; color:var(--wh-ink-soft);
  margin:0 0 0.4rem;
}
.wh-drawer__foot p em{font-style:italic; opacity:0.85;}

/* ============================================================ */
/* CUSTOMER REVIEWS                                              */
/* ============================================================ */
.wh-reviews{
  background:var(--wh-cream);
  padding:2.5rem 1.5rem 3rem;
  border-top:1px solid var(--wh-line);
  position:relative;
}
.wh-reviews::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, transparent 0 140px, rgba(13,8,5,0.012) 140px 141px);
  pointer-events:none;
}
.wh-reviews__head{
  text-align:center;
  max-width:680px; margin:0 auto 1.5rem;
  position:relative;
}
.wh-reviews__eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:#888;
  margin:0 0 12px; font-weight:500;
}
.wh-reviews__title{
  font-family:'Inter', sans-serif;
  font-size:26px;
  font-style:normal; font-weight:500;
  color:#1a1a1a;
  letter-spacing:-0.4px;
  margin:0;
  line-height:1.2;
}

/* Marquee container — fades edges, hides overflow */
.wh-reviews__marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* Track — flex row of cards, animates right-to-left, NO pause on hover.
   gap:0 + per-card margin-right keeps the -50% loop math seamless. */
.wh-reviews__track{
  display:flex; flex-wrap:nowrap;
  gap:0;
  width:max-content;
  padding:6px 0 12px;
  animation:whReviewsScroll 40s linear infinite;
}
.wh-reviews__track > .wh-review{margin-right:18px;}
.wh-reviews__track:hover{animation-play-state:running;}

@keyframes whReviewsScroll{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}

/* Smaller, more compact card */
.wh-review{
  flex:0 0 260px;
  width:260px;
  background:#ffffff;
  border:1px solid #ececec;
  border-radius:8px;
  padding:18px 16px;
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,0.02);
  /* no transition — no hover lift */
}
.wh-review::before{ content:none; }
.wh-review:hover{
  transform:none;
  box-shadow:0 1px 2px rgba(0,0,0,0.02);
  border-color:#ececec;
}

.wh-review__stars{
  display:inline-flex; gap:2px;
  color:#e6b800;
  margin-bottom:10px;
}
.wh-review__stars svg{display:block; width:11px; height:11px;}

.wh-review blockquote{
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  font-style:normal;
  font-weight:400;
  color:#333;
  line-height:1.55;
  letter-spacing:0;
  margin:0 0 12px;
  padding:0;
  border-left:none !important;
  flex:1;
}
.wh-review cite{
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:#888;
  font-style:normal;
  font-weight:500;
  padding-top:9px;
  border-top:1px solid #ececec;
}
.wh-review cite::before{
  content:none;
}

@media (max-width: 1024px){
  .wh-review{flex-basis:240px; width:240px; padding:16px 14px;}
  .wh-reviews__track{animation-duration:36s;}
  .wh-reviews__track > .wh-review{margin-right:16px;}
}
@media (max-width: 600px){
  .wh-reviews{padding:4rem 0;}
  .wh-reviews__head{padding:0 1rem;}
  .wh-review{flex-basis:220px; width:220px; padding:14px 13px; border-radius:8px;}
  .wh-reviews__track{animation-duration:32s;}
  .wh-reviews__track > .wh-review{margin-right:12px;}
  .wh-review blockquote{font-size:12px;}
  .wh-review cite{font-size:10px;}
}

@media (prefers-reduced-motion: reduce){
  .wh-reviews__track{animation:none; transform:translateX(0);}
}

/* ============================================================ */
/* COLLECTION PAGES (Ethnic Edit, Wedding Tales, Sale)           */
/* ============================================================ */
.wh-collection{
  /* Was 1280px, but that left ~300px of empty space on each side at 1920px
     viewports. Now fills 96vw up to a 1820px cap so the product grid (and
     hence each picture) gets ~40% wider on common desktops without going
     edge-to-edge on ultrawides. Header text stays comfortable because the
     lede has its own max-width:580px. */
  max-width:clamp(1280px, 96vw, 1820px); margin:0 auto;
  /* Top trimmed from 5rem (50px) → 1.5rem (15px) so the eyebrow + title
     sit closer to the nav. Bottom kept at 6rem. */
  padding:1.5rem 1.5rem 6rem;
}
.wh-collection__head{
  text-align:center; margin-bottom:3rem;
}
.wh-collection__eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:0.72rem; letter-spacing:0.45em; text-transform:uppercase;
  color:var(--wh-ink-soft);
  margin:0 0 1rem; font-weight:600;
}
.wh-collection__eyebrow--sale{color:#e11d2e;}
.wh-collection__title{
  font-family:'Jost', sans-serif;
  font-size:clamp(2.5rem, 5.5vw, 4rem);
  font-style:italic; font-weight:500;
  color:var(--wh-ink);
  margin:0 0 1.25rem; line-height:1.05;
}
.wh-collection__lede{
  font-family:'Montserrat', sans-serif;
  font-size:14px; color:var(--wh-ink-soft);
  margin:0 auto 1.5rem; max-width:580px; line-height:1.65;
}

/* Sale-specific banner row */
.wh-collection__sale-banner{
  display:inline-flex; align-items:center; gap:0.85rem;
  padding:0.55rem 1.25rem;
  border:1px solid #e11d2e;
  background:rgba(225,29,46,0.04);
  margin-top:0.5rem;
}
.wh-collection__sale-tag{
  color:#e11d2e; font-weight:700;
  font-family:'Montserrat', sans-serif; font-size:0.8rem; letter-spacing:0.2em;
  text-transform:uppercase;
}
.wh-collection__sale-divider{color:#e11d2e; opacity:0.5;}
.wh-collection__sale-meta{
  font-family:'Montserrat', sans-serif; font-size:0.78rem;
  color:var(--wh-ink-soft); letter-spacing:0.06em;
}

/* Category / occasion chips */
.wh-collection__chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem;
  margin:0 0 1.25rem;
}
.wh-collection__chips--secondary{margin-bottom:2.25rem;}
.wh-chip{
  display:inline-block;
  padding:0.55rem 1.15rem;
  border:1px solid var(--wh-ink);
  background:var(--wh-ink); color:#fff;
  font-family:'Montserrat', sans-serif;
  font-size:0.78rem; letter-spacing:0.1em;
  text-decoration:none;
  border-radius:999px;
  transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wh-chip:hover{background:#2a2a2a; color:#fff; transform:translateY(-1px);}
.wh-chip--ghost{
  background:transparent; color:var(--wh-ink); border-color:var(--wh-line);
}
.wh-chip--ghost:hover{background:var(--wh-ink); color:#fff; border-color:var(--wh-ink);}

/* For Him / Bride / Family tabs (Wedding Tales) */
.wh-collection__split{
  display:flex; justify-content:center; gap:0;
  margin:0 0 2rem;
  border-bottom:1px solid var(--wh-line);
}
.wh-collection__split-tab{
  padding:0.9rem 1.5rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.82rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--wh-ink-soft); font-weight:500;
  text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.wh-collection__split-tab:hover{color:var(--wh-ink);}
.wh-collection__split-tab--active{
  color:var(--wh-ink); border-bottom-color:var(--wh-ink); font-weight:600;
}

/* Toolbar (filter + sort) */
.wh-collection__toolbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 0;
  border-top:1px solid var(--wh-line);
  border-bottom:1px solid var(--wh-line);
  margin-bottom:3rem;
  flex-wrap:wrap; gap:1rem;
}
.wh-collection__filters{
  display:inline-flex; align-items:center; gap:1.25rem;
}
.wh-filter-btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  background:transparent; border:1px solid var(--wh-line);
  padding:0.55rem 1rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.82rem; color:var(--wh-ink);
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.wh-filter-btn:hover{background:#fafafa; border-color:var(--wh-ink);}
.wh-collection__count{
  font-family:'Montserrat', sans-serif;
  font-size:0.82rem; color:var(--wh-ink-soft);
}
.wh-collection__sort{
  display:inline-flex; align-items:center; gap:0.75rem;
  font-family:'Montserrat', sans-serif; font-size:0.82rem;
  color:var(--wh-ink-soft);
}
.wh-collection__sort select{
  background:transparent; border:1px solid var(--wh-line);
  padding:0.5rem 0.85rem;
  font-family:'Montserrat', sans-serif; font-size:0.82rem;
  color:var(--wh-ink); cursor:pointer;
}

/* Empty state */
.wh-collection__empty{
  text-align:center;
  padding:5rem 1.5rem;
  background:#fafafa;
  border:1px dashed var(--wh-line);
  margin-bottom:4rem;
}
.wh-collection__empty-orn{display:inline-flex; margin:0 0 1.25rem;}
.wh-collection__empty-title{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-style:italic; font-weight:500;
  color:var(--wh-ink);
  margin:0 0 1rem;
}
.wh-collection__empty-msg{
  font-family:'Montserrat', sans-serif;
  font-size:14px; color:var(--wh-ink-soft);
  margin:0 auto 2rem; max-width:520px; line-height:1.6;
}

/* CTA button — white by default, fills dark on hover */
.wh-collection__btn{
  display:inline-block;
  background:#fff; color:#1a1a1a;
  padding:9px 22px;
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  border:1px solid #1a1a1a;
  border-radius:0;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease, transform 0.2s ease;
}
.wh-collection__btn:hover{
  background:#1a1a1a; color:#fff;
  letter-spacing:1.5px;
}
.wh-collection__btn--ghost{
  background:#fff; color:#1a1a1a;
}
.wh-collection__btn--ghost:hover{background:#1a1a1a; color:#fff;}

/* Atelier promise strip (Ethnic Edit) */
.wh-collection__promise{
  display:flex; justify-content:center; gap:3rem; flex-wrap:wrap;
  padding:2rem 0;
  border-top:1px solid var(--wh-line);
}
.wh-collection__promise-item{
  display:inline-flex; align-items:center; gap:0.65rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.82rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--wh-ink-soft); font-weight:600;
}
.wh-collection__promise-item svg{color:var(--wh-ink);}

/* Appointment strip (Wedding Tales) */
.wh-collection__appointment{
  background:var(--wh-ink); color:#fff;
  padding:4rem 2rem; text-align:center;
}
.wh-collection__appointment-inner{max-width:600px; margin:0 auto;}
.wh-collection__appointment-eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.45em; text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  margin:0 0 1rem; font-weight:600;
}
.wh-collection__appointment h3{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-style:italic; font-weight:500;
  color:#fff; margin:0 0 1rem;
}
.wh-collection__appointment p{
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem; color:rgba(255,255,255,0.75);
  margin:0 0 1.75rem; line-height:1.65;
}
.wh-collection__appointment .wh-collection__btn--ghost{
  color:#fff; border-color:#fff;
}
.wh-collection__appointment .wh-collection__btn--ghost:hover{background:#fff; color:var(--wh-ink);}

/* Sale alert / newsletter (Sale page) */
.wh-collection__alert{
  background:#fafafa; padding:3.5rem 2rem;
  text-align:center;
  border:1px solid var(--wh-line);
}
.wh-collection__alert-eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.45em; text-transform:uppercase;
  color:#e11d2e;
  margin:0 0 1rem; font-weight:700;
}
.wh-collection__alert h3{
  font-family:'Jost', sans-serif;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-style:italic; font-weight:500;
  color:var(--wh-ink); margin:0 0 0.75rem;
}
.wh-collection__alert p{
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem; color:var(--wh-ink-soft);
  margin:0 auto 1.5rem; max-width:480px; line-height:1.6;
}
.wh-collection__alert .wh-foot__news-form{
  max-width:440px;
  margin:0 auto;
}

@media (max-width: 720px){
  .wh-collection{padding:3rem 1rem 4rem;}
  .wh-collection__toolbar{flex-direction:column; align-items:flex-start;}
  .wh-collection__empty{padding:3.5rem 1rem;}
  .wh-collection__promise{gap:1.5rem; padding:1.5rem 0;}
  .wh-collection__split{flex-wrap:wrap;}
  .wh-collection__split-tab{padding:0.75rem 1rem; font-size:0.72rem;}
}

/* ============================================================ */
/* PRODUCT CARD GRID (Ethnic Edit, Wedding Tales, Sale)          */
/* ============================================================ */
.wh-products{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem 1.75rem;
  margin:3.5rem 0 4rem;
}
@media (max-width: 1024px){
  .wh-products{grid-template-columns:repeat(2, 1fr); gap:1.75rem 1.25rem;}
}
@media (max-width: 600px){
  /* Mobile: 2-column near-edge-to-edge grid (luxe.shreeshivam.com reference).
     Drop most of the collection's side padding so cards reach the screen
     edges, tighten the inter-card gap, and shrink the body text since each
     card is now narrower. */
  .wh-collection{padding:2rem 6px 2.5rem;}
  .wh-collection__head{padding:0 14px; margin-bottom:1.5rem;}
  .wh-products{grid-template-columns:repeat(2, 1fr); gap:1.25rem 6px; margin:1.5rem 0 2rem;}
  .wh-product__body{padding:0.75rem 0.4rem 0.4rem;}
  .wh-product__name{font-size:0.92rem; line-height:1.2; margin:0 0 0.25rem;}
  .wh-product__subtitle{font-size:0.62rem; letter-spacing:0.14em; margin:0 0 0.4rem;}
  .wh-product__price{font-size:0.82rem;}
  .wh-product__price-old{font-size:0.74rem;}
  .wh-product__price-new{font-size:0.85rem;}
  .wh-product__badge{font-size:0.6rem; padding:0.25rem 0.55rem;}
  .wh-collection__after{padding:0 14px;}
}

.wh-product{
  position:relative;
  background:#fff;
  display:flex; flex-direction:column;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.wh-product:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px -22px rgba(0,0,0,0.18);
}

.wh-product__image{
  aspect-ratio: 3 / 4;
  background-size:cover;
  background-position:center;
  background-color:#eaeaea;
}

.wh-product__body{
  padding:1.25rem 0.25rem 0.5rem;
}
.wh-product__name{
  font-family:'Jost', sans-serif;
  font-size:1.15rem; font-weight:500; font-style:italic;
  color:var(--wh-ink);
  margin:0 0 0.35rem; line-height:1.25;
}
.wh-product__subtitle{
  font-family:'Montserrat', sans-serif;
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--wh-ink-soft);
  margin:0 0 0.6rem; font-weight:500;
}
.wh-product__price{
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem; font-weight:600;
  color:var(--wh-ink);
  margin:0;
}

/* Sale price row */
.wh-product__price-row{
  display:flex; align-items:baseline; gap:0.65rem;
  margin:0;
}
.wh-product__price-old{
  font-family:'Montserrat', sans-serif;
  font-size:0.85rem; font-weight:400;
  color:var(--wh-ink-soft);
  text-decoration:line-through;
}
.wh-product__price-new{
  font-family:'Montserrat', sans-serif;
  font-size:0.98rem; font-weight:700;
  color:#e11d2e;
}

/* Sale discount badge */
.wh-product__badge{
  position:absolute; top:0.85rem; left:0.85rem; z-index:2;
  background:#e11d2e; color:#fff;
  font-family:'Montserrat', sans-serif;
  font-size:0.65rem; letter-spacing:0.15em; font-weight:700;
  padding:0.35rem 0.65rem;
}

/* Image mappings — reuse existing Unsplash photos */
.wh-product__image[data-prod="sherwani"],
.wh-product__image[data-prod="sale-sherwani"]{
  background-image:url('https://images.unsplash.com/photo-1681717055630-c62333c22fec?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="bridal"],
.wh-product__image[data-prod="bridal-lehenga"],
.wh-product__image[data-prod="sale-lehenga"]{
  background-image:url('https://images.unsplash.com/photo-1668371679302-a8ec781e876e?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="kurta"],
.wh-product__image[data-prod="sale-kurta"]{
  background-image:url('https://images.unsplash.com/photo-1727835523545-70ee992b5763?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="bandhgala"],
.wh-product__image[data-prod="sale-bandhgala"]{
  background-image:url('https://images.unsplash.com/photo-1633104502901-10d124036629?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="saree"],
.wh-product__image[data-prod="sale-saree"]{
  background-image:url('https://images.unsplash.com/photo-1617627143750-d86bc21e42bb?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="indowestern"],
.wh-product__image[data-prod="sale-indo"]{
  background-image:url('https://images.unsplash.com/photo-1729347917808-e3e35a462fec?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="groom-sherwani"]{
  background-image:url('https://images.unsplash.com/photo-1610047402714-307d99a677db?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="engagement"]{
  background-image:url('https://images.unsplash.com/photo-1610030469983-98e550d6193c?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="sangeet"]{
  background-image:url('https://images.unsplash.com/photo-1729347917808-e3e35a462fec?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="reception"]{
  background-image:url('https://images.unsplash.com/photo-1682183948920-16d882bd786d?w=900&h=1200&auto=format&fit=crop&q=85');
}
.wh-product__image[data-prod="mehndi"]{
  background-image:url('https://images.unsplash.com/photo-1619715613791-89d35b51ff81?w=900&h=1200&auto=format&fit=crop&q=85');
}

/* Empty-state block (after the cards) */
.wh-collection__after{
  text-align:center;
  padding:3rem 1.5rem 2rem;
  border-top:1px solid var(--wh-line);
  margin-top:2rem;
}
.wh-collection__after .wh-collection__empty-msg{
  font-family:'Montserrat', sans-serif;
  /* Was 0.98rem (≈9.8px with 62.5% root) — bumped to ~14px so the
     "No products available…" line is readable. */
  font-size:1.4rem;
  color:var(--wh-ink-soft);
  margin:0 auto 2rem;
  max-width:520px; line-height:1.6;
}

/* ============================================================ */
/* INFO PAGES (Our Story, How It Works, Help, Privacy, Terms,    */
/* Shipping, Returns) — ONS-style minimal text layout            */
/* ============================================================ */
.wh-info{
  max-width:780px; margin:0 auto;
  padding:64px 24px 80px;
  color:#222;
  background:#fff;
  text-align:left;
}
.wh-info__head{
  text-align:left;
  margin-bottom:36px;
  padding-bottom:24px;
  border-bottom:1px solid #ececec;
}
.wh-info__eyebrow{
  font-family:'Inter', sans-serif;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:#888;
  margin:0 0 14px; font-weight:500;
}
h1.wh-info__title,
.wh h1.wh-info__title{
  font-family:'Inter', sans-serif;
  font-size:36px;
  font-style:normal; font-weight:600;
  color:#1a1a1a;
  margin:0 0 12px;
  line-height:1.2; letter-spacing:-0.5px;
}
.wh-info__lede{
  font-family:'Inter', sans-serif;
  font-size:16px;
  font-style:normal; color:#444;
  margin:0; max-width:none;
  line-height:1.6; font-weight:400;
}

.wh-info__content{
  font-family:'Inter', sans-serif;
  font-size:15px; line-height:1.75;
  color:#333;
  font-weight:400;
}
.wh-info__content p{margin:0 0 18px;}
.wh-info__content em{font-style:italic; color:#555;}
.wh-info__content strong{font-weight:600; color:#1a1a1a;}
.wh-info__content a{
  color:#222; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  border-bottom:none;
  transition:color 0.2s ease;
}
.wh-info__content a:hover{color:#000;}

.wh-info__content h2{
  font-family:'Inter', sans-serif;
  font-size:20px;
  font-style:normal; font-weight:600;
  color:#1a1a1a;
  margin:36px 0 12px;
  padding-top:0;
  border-top:none;
  letter-spacing:-0.2px;
  line-height:1.3;
}
.wh-info__content h2:first-of-type{margin-top:0;}

.wh-info__content h3{
  font-family:'Inter', sans-serif;
  font-size:15.5px; font-weight:600;
  color:#1a1a1a;
  margin:24px 0 8px;
  letter-spacing:0;
}

.wh-info__content ul,
.wh-info__content ol{
  margin:0 0 18px;
  padding-left:22px;
}
.wh-info__content li{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.75;
  color:#333;
}

.wh-info__signoff{
  margin-top:32px;
  text-align:left;
  font-family:'Inter', sans-serif;
  font-style:italic;
  color:#555;
  font-size:14.5px;
  font-weight:400;
}

/* Unified site button — square outline, mirrors .wh-store-back. */
.wh-info__back{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-top:48px;
  padding:0.6rem 1.15rem;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-family:'Inter', sans-serif;
  font-size:0.74rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-info__back:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.16em;
}

/* How It Works — numbered steps (clean ONS-style list) */
.wh-info__steps{
  list-style:none; padding:0; margin:0 0 24px;
}
.wh-info__steps > li{
  display:flex; gap:20px; align-items:flex-start;
  padding:24px 0;
  border-bottom:1px solid #ececec;
}
.wh-info__steps > li:last-of-type{border-bottom:none;}
.wh-info__step-num{
  flex:0 0 auto;
  font-family:'Inter', sans-serif;
  font-size:18px; font-style:normal; font-weight:600;
  color:#888;
  line-height:1.4;
  min-width:32px;
  letter-spacing:0;
}
.wh-info__steps h3{margin:0 0 6px;}
.wh-info__steps p{margin:0;}

/* Help Center FAQ blocks */
.wh-faq{
  padding:24px 0;
  border-bottom:1px solid #ececec;
}
.wh-faq:last-of-type{border-bottom:none;}
.wh-faq h3{margin-top:0; margin-bottom:8px;}
.wh-faq p{margin:0;}

@media (max-width: 600px){
  .wh-info{padding:40px 18px 56px;}
  .wh-info__title{font-size:28px;}
  .wh-info__lede{font-size:15px;}
  .wh-info__content h2{font-size:18px; margin-top:28px;}
}

/* Unified site button — duplicate kept in sync with the rule above
   so the cascade doesn't undo the square outline style on info pages. */
.wh-info__back{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  margin-top:3rem;
  padding:0.6rem 1.15rem;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-family:'Inter', sans-serif;
  font-size:0.74rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-info__back:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.16em;
}

@media (max-width: 600px){
  .wh-info{padding:3rem 1.25rem 4rem;}
  .wh-info__head{margin-bottom:2.5rem;}
  .wh-info__steps > li{flex-direction:column; gap:0.5rem;}
  .wh-info__step-num{font-size:1.5rem;}
}

/* ============================================================ */
/* ACCOUNT / LOGIN PAGE (/account/)                              */
/* ============================================================ */
.wh-auth{
  background:var(--wh-cream);
  padding:5rem 1.5rem 6rem;
  display:flex; align-items:center; justify-content:center;
  min-height:62vh;
}
.wh-auth__card{
  background:#fff;
  width:100%; max-width:540px;
  padding:3.5rem 3rem;
  border:1px solid var(--wh-line);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.18);
}

.wh-auth__head{
  text-align:center;
  margin-bottom:2.25rem;
}
.wh-auth__mark{
  display:inline-flex; line-height:0;
  margin-bottom:1.25rem;
}
.wh-auth__mark svg,
.wh-auth__mark img{display:block;}
.wh-auth__title{
  font-family:'Jost', sans-serif;
  font-size:2.3rem; font-style:italic; font-weight:500;
  color:var(--wh-ink);
  margin:0 0 0.85rem; letter-spacing:0.02em;
}
.wh-auth__sub{
  font-family:'Montserrat', sans-serif;
  font-size:1.1rem; line-height:1.55;
  color:var(--wh-ink-soft);
  margin:0;
}

/* OTP form */
.wh-auth__form{margin-bottom:1.5rem;}
.wh-auth__label{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-size:0.85rem; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:600;
  color:var(--wh-ink);
  margin-bottom:0.55rem;
}
.wh-auth__input{
  width:100%; box-sizing:border-box;
  padding:1rem 1.15rem;
  border:1px solid var(--wh-line);
  background:#fff;
  font-family:'Montserrat', sans-serif;
  font-size:1.05rem;
  color:var(--wh-ink);
  margin-bottom:1rem;
  border-radius:4px;
  transition:border-color 0.2s ease;
}
.wh-auth__input:focus{outline:none; border-color:var(--wh-ink);}
.wh-auth__input::placeholder{color:#999;}

.wh-auth__btn{
  width:100%; box-sizing:border-box;
  padding:14px 28px;
  font-family:'Inter', sans-serif;
  font-size:13.5px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:500;
  border-radius:0;
  cursor:pointer;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-auth__btn--primary{
  background:#fff; color:#1a1a1a;
  border:1px solid #1a1a1a;
}
.wh-auth__btn--primary:hover{
  background:#1a1a1a; color:#fff;
  letter-spacing:1.7px;
}

.wh-auth__hint{
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem;
  color:var(--wh-ink-soft);
  margin:0.75rem 0 0;
  text-align:center;
}

/* Divider */
.wh-auth__divider{
  display:flex; align-items:center;
  gap:1rem;
  margin:1.75rem 0;
}
.wh-auth__divider::before,
.wh-auth__divider::after{
  content:""; flex:1; height:1px;
  background:var(--wh-line);
}
.wh-auth__divider span{
  font-family:'Montserrat', sans-serif;
  font-size:0.85rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--wh-ink-soft); font-weight:500;
  white-space:nowrap;
}

/* Social buttons */
.wh-auth__social{
  display:flex; flex-direction:column; gap:0.75rem;
}
.wh-auth__btn--social{
  background:#fff; color:var(--wh-ink);
  border:1px solid var(--wh-line);
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.75rem;
  text-align:center;
}
.wh-auth__btn--social:hover{
  background:#fafafa;
  border-color:var(--wh-ink);
}
.wh-auth__btn-icon{flex:0 0 auto;}

/* Footer / fine print */
.wh-auth__foot{
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem; line-height:1.55;
  color:var(--wh-ink-soft);
  text-align:center;
  margin:2rem 0 0;
}
.wh-auth__foot a{
  color:var(--wh-ink);
  border-bottom:1px solid var(--wh-line);
  text-decoration:none;
}
.wh-auth__foot a:hover{border-bottom-color:var(--wh-ink);}

/* Unified square-outline button — matches Read the story / All Stores. */
.wh-auth__back{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  width:fit-content;
  margin:1.75rem auto 0;
  padding:0.65rem 1.3rem;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-family:'Inter', sans-serif;
  font-size:0.78rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-auth__back:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.18em;
}

@media (max-width: 480px){
  .wh-auth{padding:3rem 1rem 4rem;}
  .wh-auth__card{padding:2.25rem 1.5rem;}
  .wh-auth__title{font-size:1.65rem;}
}

/* ============================================================ */
/* FOOTER v2 — 4-column layout (overrides earlier footer rules) */
/* ============================================================ */
.wh-footer{
  background:#ffffff;
  color:var(--wh-ink);
  border-top:1px solid var(--wh-line);
  border-bottom:none;
  position:relative;
}
.wh-footer a{color:var(--wh-ink); text-decoration:none; transition:color 0.2s ease;}
.wh-footer a:hover{color:var(--wh-ink-soft);}

.wh-foot__grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr 0.95fr 1.55fr;
  gap:4.5rem;
  max-width:1320px; margin:0 auto;
  padding:5.5rem 2.25rem 4.5rem;
}

.wh-foot__col{min-width:0;}

/* Higher specificity + absolute px to defeat the legacy .wh-foot__col h4
   override AND the html{font-size:62.5%} rem-divisor used by Source theme. */
.wh-footer .wh-foot__col-title{
  font-family:'Inter', sans-serif;
  font-size:22px;
  letter-spacing:-0.3px;
  text-transform:none;
  font-weight:500;
  color:#222;
  margin:0 0 18px;
  line-height:1.25;
  border-bottom:none;
  padding-bottom:0;
}
.wh-footer .wh-foot__col-title--sub{margin-top:36px;}

.wh-footer .wh-foot__list{
  list-style:none; margin:0; padding:0;
}
.wh-footer .wh-foot__list li{
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:#444;
  margin:0 0 11px;
  line-height:1.75;
  font-weight:300;
  letter-spacing:0.4px;
}
.wh-footer .wh-foot__col a{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-style:normal;
  font-weight:300;
  color:#444;
  letter-spacing:0.4px;
}
.wh-footer .wh-foot__col a:hover{color:#000; padding-left:0;}

/* Phone/email rows with leading icon */
.wh-foot__contact-line{
  display:flex; align-items:center; gap:10px;
}
.wh-foot__contact-line svg{flex:0 0 auto; color:#555; width:16px; height:16px;}
.wh-footer .wh-foot__contact-line a{
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:300;
  color:#444;
  letter-spacing:0;
}

.wh-footer .wh-foot__contact-hours{
  margin-top:10px !important;
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:300;
  letter-spacing:0.4px;
  text-transform:none;
  color:#666;
  line-height:1.7;
}

/* Sale link in red (column 2) */
.wh-foot__sale{color:#e11d2e !important; font-weight:600;}
.wh-foot__sale:hover{color:#a8101e !important;}

/* Newsletter blurb */
.wh-footer .wh-foot__news-blurb{
  font-family:'Inter', sans-serif;
  font-size:14px;
  line-height:1.8;
  color:#444;
  margin:0 0 20px;
  max-width:440px;
  font-weight:300;
}

/* Newsletter input + button (override old styles) */
.wh-footer .wh-foot__news-form{
  display:inline-flex; align-items:stretch;
  width:100%; max-width:460px;
  border:1px solid var(--wh-line);
  background:#fff;
  border-radius:999px;
  overflow:hidden;
  padding:0;
}
.wh-footer .wh-foot__news-form input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  padding:13px 20px;
  color:#222;
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:300;
  letter-spacing:0;
}
.wh-footer .wh-foot__news-form input::placeholder{color:#999;}
.wh-footer .wh-foot__news-form button{
  background:#222; color:#fff;
  border:none; padding:0 26px;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-size:13px;
  letter-spacing:0.4px;
  font-weight:400;
  border-radius:999px;
  margin:5px;
  transition:background 0.25s ease;
}
.wh-foot__news-form button:hover{background:#2a2a2a;}

/* Social row (re-style for new layout — left-aligned, no border circles) */
.wh-footer .wh-social{
  display:flex; gap:1.35rem;
  margin:0;
  justify-content:flex-start;
}
.wh-footer .wh-social a{
  width:auto; height:auto;
  border:none; border-radius:0;
  background:transparent;
  color:var(--wh-ink);
  opacity:1;
  padding:0.25rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.wh-footer .wh-social svg{width:24px; height:24px;}
.wh-footer .wh-social a:hover{
  color:var(--wh-ink-soft);
  background:transparent;
  border:none;
  transform:translateY(-2px);
}

/* Base bar — compact one-line-ish strip */
.wh-foot__base{
  text-align:center;
  padding:14px 16px 16px;
  border-top:1px solid var(--wh-line);
  background:#fff;
}
.wh-foot__wordmark{
  font-family:'Jost', sans-serif;
  font-size:12px;
  letter-spacing:0.28em; text-transform:uppercase;
  margin:0 0 4px;
  font-weight:500;
  color:#444;
}
.wh-foot__cities{
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.4px;
  color:#888;
  margin:0 0 3px;
  font-weight:400;
}
.wh-foot__copy{
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  color:#888;
  margin:0;
  letter-spacing:0.3px;
  font-weight:400;
}

/* Footer grid spacing in px so it isn't shrunk by html{font-size:62.5%} */
.wh-foot__grid{
  gap:80px;
  padding:88px 36px 72px;
  max-width:1440px;
}

/* Responsive */
@media (max-width: 1024px){
  .wh-foot__grid{grid-template-columns:1fr 1fr; gap:48px 40px; padding:64px 28px 48px;}
  .wh-footer .wh-foot__col-title{font-size:20px;}
}
@media (max-width: 600px){
  .wh-foot__grid{grid-template-columns:1fr; gap:0; padding:24px 16px 28px;}
  .wh-foot__col{padding:0;}
  .wh-foot__col--wide{order:0;}
  .wh-footer .wh-foot__news-form{max-width:none;}
  .wh-foot__base{padding:12px 16px 16px;}
  .wh-footer .wh-foot__col-title{font-size:14px; letter-spacing:0.16em; margin:0;}
  .wh-footer .wh-foot__col-title--sub{margin-top:0;}

  /* ─────── Mobile accordion (luxe.shreeshivam.com style) ───────
     Each <h4>+content pair is wrapped in .wh-foot__section. Body is
     collapsed by default; tap on the title toggles .is-open which
     animates the body open. Chevron rotates. Desktop is untouched. */
  .wh-foot__section{
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .wh-foot__section:first-child{
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .wh-foot__section .wh-foot__col-title{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 4px;
    cursor:pointer;
    user-select:none;
  }
  .wh-foot__section .wh-foot__col-title::after{
    content:"";
    display:inline-block;
    width:8px; height:8px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform 0.3s ease;
    opacity:0.7;
  }
  .wh-foot__section.is-open .wh-foot__col-title::after{
    transform:rotate(-135deg) translateY(-2px);
  }
  .wh-foot__section-body{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
    padding:0 4px;
  }
  .wh-foot__section.is-open .wh-foot__section-body{
    max-height:600px;
    opacity:1;
    padding:0 4px 16px;
  }
  /* The newsletter form + social row are visual anchors — leave them
     open by default rather than hidden behind a tap. */
  .wh-foot__section--newsletter,
  .wh-foot__section--social{
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .wh-foot__section--newsletter .wh-foot__col-title,
  .wh-foot__section--social .wh-foot__col-title{
    cursor:default;
    padding:18px 4px 12px;
  }
  .wh-foot__section--newsletter .wh-foot__col-title::after,
  .wh-foot__section--social .wh-foot__col-title::after{
    display:none;
  }
  .wh-foot__section--newsletter .wh-foot__section-body,
  .wh-foot__section--social .wh-foot__section-body{
    max-height:none; opacity:1; padding:0 4px 18px; overflow:visible;
  }
}

/* ============================================================ */
/* FLOATING CONTACT FAB — Video Call / Call / WhatsApp           */
/* ============================================================ */
.wh-fab{
  position:fixed;
  right:24px; bottom:24px;
  z-index:1000;
  display:flex; flex-direction:column; align-items:flex-end;
  pointer-events:none;
}
.wh-fab *{pointer-events:auto;}

.wh-fab__trigger{
  width:52px; height:52px;
  border-radius:50%;
  border:none;
  background:#1a1a1a;
  color:#fff;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.1);
  transition:background 0.25s ease, transform 0.2s ease;
  position:relative;
}
.wh-fab__trigger:hover{background:#000; transform:translateY(-1px);}
.wh-fab__icon{position:absolute; transition:opacity 0.2s ease, transform 0.3s ease;}
.wh-fab__icon--close{opacity:0; transform:rotate(-90deg);}
.wh-fab.is-open .wh-fab__icon--open{opacity:0; transform:rotate(90deg);}
.wh-fab.is-open .wh-fab__icon--close{opacity:1; transform:rotate(0);}

.wh-fab__menu{
  list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-direction:column; gap:12px;
  opacity:0;
  transform:translateY(8px);
  visibility:hidden;
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.wh-fab.is-open .wh-fab__menu{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.wh-fab__row{
  display:inline-flex; align-items:center; gap:10px;
  justify-content:flex-end;
}
.wh-fab__label{
  font-family:'Inter', sans-serif;
  font-size:12px; font-weight:400; letter-spacing:0.2px;
  color:#333;
  background:#fff;
  padding:6px 12px;
  border-radius:4px;
  border:1px solid #ececec;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  white-space:nowrap;
}
.wh-fab__btn{
  width:44px; height:44px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  background:#1a1a1a;
  border:none;
  box-shadow:0 6px 16px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08);
  transition:background 0.2s ease, transform 0.2s ease;
  text-decoration:none;
  cursor:pointer; padding:0;
}
.wh-fab__btn:hover{background:#000; transform:translateY(-1px);}
.wh-fab__btn svg{width:18px; height:18px;}
.wh-fab__btn:hover{transform:translateY(-2px) scale(1.04);}
/* All FAB items share one unified palette — black circle with white icon. */
.wh-fab__btn--video,
.wh-fab__btn--call,
.wh-fab__btn--wa,
.wh-fab__btn--chat{
  background:#1a1a1a;
  color:#fff;
}

@media (max-width: 600px){
  .wh-fab{right:16px; bottom:16px;}
  .wh-fab__trigger{width:52px; height:52px;}
  .wh-fab__btn{width:42px; height:42px;}
  .wh-fab__label{font-size:12.5px; padding:7px 12px;}
}

/* ============================================================ */
/* BOOK-A-VIDEO-CALL FORM PAGE                                   */
/* ============================================================ */
.wh-book{
  background:#fafaf7;
  padding:64px 22px 80px;
  min-height:60vh;
}
.wh-book__inner{
  max-width:640px;
  margin:0 auto;
  background:#fff;
  border:1px solid #ececec;
  border-radius:14px;
  padding:48px 44px;
  box-shadow:0 4px 18px rgba(0,0,0,0.04);
}
.wh-book__eyebrow{
  font-family:'Inter', sans-serif;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:#888; font-weight:500;
  margin:0 0 12px;
}
.wh-book__title{
  font-family:'Inter', sans-serif;
  font-size:30px; font-weight:600; letter-spacing:-0.5px;
  color:#1a1a1a;
  line-height:1.2;
  margin:0 0 14px;
}
.wh-book__lede{
  font-family:'Inter', sans-serif;
  font-size:15px; line-height:1.65; font-weight:300;
  color:#555;
  margin:0 0 36px;
}
.wh-book__form{display:flex; flex-direction:column; gap:18px;}
.wh-book__row{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.wh-book__field{display:flex; flex-direction:column; gap:7px;}
.wh-book__field label{
  font-family:'Inter', sans-serif;
  font-size:13px; font-weight:500;
  color:#333; letter-spacing:0.1px;
}
.wh-book__field input,
.wh-book__field select,
.wh-book__field textarea{
  font-family:'Inter', sans-serif;
  font-size:14.5px; font-weight:400;
  color:#222;
  background:#fff;
  border:1px solid #d8d8d8;
  border-radius:8px;
  padding:11px 14px;
  outline:none;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.wh-book__field textarea{resize:vertical; min-height:80px;}
.wh-book__field input:focus,
.wh-book__field select:focus,
.wh-book__field textarea:focus{
  border-color:#222;
  box-shadow:0 0 0 3px rgba(34,34,34,0.06);
}
.wh-book__opt{color:#999; font-weight:400; font-size:12px;}

/* Brand standard CTA — matches "Browse All Collections" / "Get Directions" / "All Stores" */
button.wh-book__submit,
a.wh-book__submit,
.wh-book__submit{
  display:inline-block;
  margin-top:8px;
  background:#fff; color:#1a1a1a;
  padding:11px 26px;
  font-family:'Inter', sans-serif;
  font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:500; text-decoration:none;
  border:1px solid #1a1a1a;
  border-radius:0;
  cursor:pointer; text-align:center;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
button.wh-book__submit:hover,
a.wh-book__submit:hover,
.wh-book__submit:hover{
  background:#1a1a1a; color:#fff;
  letter-spacing:1.7px;
}
.wh-book__submit--ghost{
  background:#fff !important; color:#1a1a1a !important; border:1px solid #1a1a1a !important;
}
.wh-book__submit--ghost:hover{background:#1a1a1a !important; color:#fff !important;}

.wh-book__hint{
  font-family:'Inter', sans-serif;
  font-size:12.5px; color:#777; font-weight:300;
  margin:8px 0 0;
  text-align:center;
}
.wh-book__hint a{color:#222; font-weight:500; text-decoration:none; border-bottom:1px dotted #aaa;}

.wh-book__success{
  text-align:left;
  padding:4px 0 8px;
}

.wh-book__success-head{
  text-align:center;
  margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid #ececec;
}
.wh-book__success-icon{
  display:inline-flex;
  width:56px; height:56px;
  align-items:center; justify-content:center;
  background:#e8f5ec;
  color:#1f7a4d;
  border-radius:50%;
  margin:0 auto 16px;
}
.wh-book__success-title{
  font-family:'Inter', sans-serif;
  font-size:24px; font-weight:600; letter-spacing:-0.4px;
  color:#1a1a1a;
  margin:0 0 10px;
}
.wh-book__success-lede{
  font-family:'Inter', sans-serif;
  font-size:14.5px; color:#555; line-height:1.6;
  margin:0;
  font-weight:300;
  text-align:center;
}

.wh-book__appointment{
  background:#fff;
  border:1px solid #ececec;
  border-radius:10px;
  padding:24px 22px;
  margin-bottom:24px;
}
.wh-book__appointment-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid #f0f0f0;
}
.wh-book__appointment-label{
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:#888; font-weight:500;
  margin:0 0 4px;
}
.wh-book__appointment-id{
  font-family:'Inter', sans-serif;
  font-size:14.5px; font-weight:500;
  color:#1a1a1a;
  margin:0;
  letter-spacing:0.4px;
}
.wh-book__badge{
  display:inline-flex; align-items:center;
  padding:5px 12px;
  border-radius:999px;
  font-family:'Inter', sans-serif;
  font-size:11px; font-weight:500; letter-spacing:0.4px;
  text-transform:uppercase;
  flex-shrink:0;
}
.wh-book__badge--pending{
  background:#fff5e0; color:#9c6a10;
  border:1px solid #f5e2b3;
}
.wh-book__badge--confirmed{
  background:#e8f5ec; color:#1f7a4d;
  border:1px solid #c6e6d2;
}

.wh-book__details{
  margin:0; padding:0;
  display:flex; flex-direction:column;
  gap:0;
}
.wh-book__detail-row{
  display:grid; grid-template-columns:120px 1fr; gap:16px;
  padding:10px 0;
  border-bottom:1px solid #f5f5f5;
}
.wh-book__detail-row:last-of-type{border-bottom:none;}
.wh-book__detail-row dt{
  font-family:'Inter', sans-serif;
  font-size:12.5px; font-weight:500;
  color:#777;
  letter-spacing:0.2px;
  margin:0;
}
.wh-book__detail-row dd{
  font-family:'Inter', sans-serif;
  font-size:14px; font-weight:400;
  color:#222;
  margin:0;
  word-break:break-word;
}

.wh-book__appointment-foot{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #f0f0f0;
}
.wh-book__next{
  font-family:'Inter', sans-serif;
  font-size:13px; color:#555; line-height:1.6;
  margin:0;
  font-weight:300;
}
.wh-book__next strong{color:#1a1a1a; font-weight:500;}

.wh-book__success-actions{
  display:flex; gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.wh-book__success-actions .wh-book__submit{flex:0 1 auto; min-width:140px;}

/* Appointment-list section headings on /appointments/ */
.wh-appts__list-head{
  margin:32px 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid #ececec;
}
.wh-appts__list-heading{
  font-family:'Inter', sans-serif;
  font-size:13px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  color:#888;
  margin:0;
}
[data-wh-appts-list] .wh-book__appointment{
  margin-bottom:16px;
}

@media (max-width: 600px){
  .wh-book{padding:40px 16px 56px;}
  .wh-book__inner{padding:32px 22px; border-radius:12px;}
  .wh-book__title{font-size:24px;}
  .wh-book__lede{font-size:14px; margin-bottom:28px;}
  .wh-book__row{grid-template-columns:1fr;}
  .wh-book__appointment{padding:18px 16px;}
  .wh-book__appointment-head{flex-direction:column; align-items:flex-start;}
  .wh-book__detail-row{grid-template-columns:100px 1fr; gap:12px;}
  .wh-book__success-actions{flex-direction:column-reverse;}
  .wh-book__success-actions .wh-book__submit{width:100%;}
}

/* ============================================================ */
/* AI CHAT PANEL                                                 */
/* ============================================================ */
.wh-chat{
  position:fixed;
  right:24px; bottom:96px;
  z-index:1001;
  width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 120px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  display:flex; flex-direction:column;
  overflow:hidden;
  font-family:'Inter', sans-serif;
  opacity:0; visibility:hidden;
  transform:translateY(10px) scale(0.98);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.wh-chat.is-open{
  opacity:1; visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.wh-chat__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  color:#fff;
  flex:0 0 auto;
}
.wh-chat__head-info{display:flex; align-items:center; gap:10px;}
.wh-chat__avatar{
  width:36px; height:36px;
  border-radius:50%;
  background:#fff;
  color:#1a1a1a;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Inter', sans-serif;
  font-size:13px; font-weight:600; letter-spacing:0.5px;
  color:#fff;
}
.wh-chat__title{
  font-size:14px; font-weight:600; margin:0; line-height:1.2;
  color:#fff;
}
.wh-chat__status{
  font-size:11.5px; font-weight:400; margin:2px 0 0;
  color:rgba(255,255,255,0.7);
  display:inline-flex; align-items:center; gap:5px;
}
.wh-chat__dot{
  width:7px; height:7px; border-radius:50%;
  background:#25d366; display:inline-block;
  box-shadow:0 0 0 2px rgba(37,211,102,0.25);
}
.wh-chat__close{
  background:transparent; border:none; padding:6px;
  color:rgba(255,255,255,0.85); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px;
  transition:background 0.2s ease;
}
.wh-chat__close:hover{background:rgba(255,255,255,0.1); color:#fff;}

.wh-chat__body{
  flex:1; overflow-y:auto;
  padding:16px;
  background:#fafaf7;
  display:flex; flex-direction:column; gap:10px;
}
.wh-chat__msg{
  max-width:82%;
  padding:10px 14px;
  border-radius:14px;
  font-size:13.5px; line-height:1.5; font-weight:400;
}
.wh-chat__msg p{margin:0;}
.wh-chat__msg--bot{
  background:#fff;
  border:1px solid #ececec;
  color:#222;
  border-bottom-left-radius:4px;
  align-self:flex-start;
}
.wh-chat__msg--user{
  background:#222;
  color:#fff;
  border-bottom-right-radius:4px;
  align-self:flex-end;
}
.wh-chat__quick{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:4px;
}
/* Follow-up chip strip appended after a bot reply (a "next step" nudge).
   Indented slightly so it visually belongs to the preceding bot bubble. */
.wh-chat__quick--inline{
  margin:-2px 0 4px 0;
  padding-left:4px;
}
/* Typing indicator — small bot bubble with 3 blinking dots while the
   bot is composing its reply. Removed from DOM once the reply appears. */
.wh-chat__typing{
  padding:12px 14px;
  background:#fff;
  border:1px solid #ececec;
  border-bottom-left-radius:4px;
  align-self:flex-start;
}
.wh-chat__typing p{
  display:flex; align-items:center; gap:5px; margin:0;
}
.wh-chat__typing p span{
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:#a8a8a8;
  animation:wh-chat-blink 1.3s ease-in-out infinite;
}
.wh-chat__typing p span:nth-child(2){ animation-delay:0.18s; }
.wh-chat__typing p span:nth-child(3){ animation-delay:0.36s; }
@keyframes wh-chat-blink{
  0%, 60%, 100% { opacity:0.25; transform:translateY(0); }
  30%           { opacity:1;    transform:translateY(-2px); }
}
/* Small helper line at the bottom of a bot reply ("Still need help? …") */
.wh-chat__hint{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  color:#777;
}
.wh-chat__hint a{ color:#222; text-decoration:underline; }
/* Make links inside bot messages distinguishable but on-brand. */
.wh-chat__msg--bot a{
  color:#222;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:500;
}
.wh-chat__msg--bot a:hover{ color:#000; }
.wh-chat__chip{
  background:#fff;
  border:1px solid #d8d2c6;
  border-radius:999px;
  padding:6px 12px;
  font-family:'Inter', sans-serif;
  font-size:12.5px; font-weight:500;
  color:#444; cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wh-chat__chip:hover{background:#222; border-color:#222; color:#fff;}

.wh-chat__foot{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:#fff;
  border-top:1px solid #ececec;
  flex:0 0 auto;
}
.wh-chat__input{
  flex:1; min-width:0;
  background:#f5f5f3;
  border:1px solid transparent;
  border-radius:999px;
  padding:10px 14px;
  font-family:'Inter', sans-serif;
  font-size:13.5px; color:#222;
  outline:none;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.wh-chat__input:focus{background:#fff; border-color:#222;}
.wh-chat__input::placeholder{color:#9a958c;}
.wh-chat__send{
  width:38px; height:38px;
  background:#222; color:#fff;
  border:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
}
.wh-chat__send:hover{background:#000; transform:translateY(-1px);}

@media (max-width: 600px){
  .wh-chat{
    right:12px; left:12px; bottom:88px;
    width:auto; max-width:none;
    height:calc(100vh - 110px);
  }
}

/* ============================================================ */
/* HERO CAROUSEL — full-bleed cross-fade slideshow (ONS-style)   */
/* Specs extracted from onsclothing.com via Playwright:          */
/*   cross-fade: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1)        */
/*   Shop Now: white bg, #232323 text, Montserrat 14px/400,      */
/*             no border, 3px radius, padding 14px 25px          */
/* ============================================================ */
.wh-hero-carousel{
  position:relative;
  width:100%;
  height:600px;                    /* matches ONS fixed 600px height */
  overflow:hidden;
  background:#0a0a0a;
}
.wh-hero-carousel__track{
  position:absolute; inset:0;
}

.wh-hero-slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  visibility:hidden;
  transform:scale(1.06);
  transition:
      opacity 0.6s ease,
      transform 6.5s cubic-bezier(0.215, 0.61, 0.355, 1),
      visibility 0s linear 0.6s;
  display:flex; align-items:flex-end; justify-content:center;
}
.wh-hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);              /* Ken Burns: slow zoom-out while active */
  transition:
      opacity 0.6s ease,
      transform 6.5s cubic-bezier(0.215, 0.61, 0.355, 1),
      visibility 0s;
  z-index:1;
}

.wh-hero-slide__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.5) 100%);
  pointer-events:none;
}

.wh-hero-slide__content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 24px 76px;
  max-width:920px;
  color:#fff;
  /* Fade-up reveal once slide is active */
  opacity:0;
  transform:translateY(14px);
  transition:
      opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s,
      transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
}
.wh-hero-slide.is-active .wh-hero-slide__content{
  opacity:1;
  transform:translateY(0);
}

.wh-hero-slide__eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:12px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:500;
  margin:0 0 14px;
  color:rgba(255,255,255,0.88);
}
.wh-hero-slide__title,
.wh .wh-hero-slide__title{
  font-family:'Jost', sans-serif;       /* matches ONS hero font */
  font-size:clamp(38px, 5.6vw, 66px);
  font-weight:500;
  letter-spacing:-0.6px;
  line-height:1.1;
  margin:0 0 22px;
  color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,0.32);
}
.wh-hero-slide__sub{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(14px, 1.4vw, 17px);
  font-weight:400;
  line-height:1.5;
  margin:0 auto 28px;
  max-width:620px;
  color:rgba(255,255,255,0.92);
}

/* Shop Now — borderless transparent text, fills on hover */
.wh-hero-slide__cta{
  display:inline-block;
  background:transparent; color:#fff;
  padding:13px 24px;
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  text-decoration:none;
  border:none;
  border-radius:3px;
  transition:background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.wh-hero-slide__cta:hover{
  background:rgba(255,255,255,0.92); color:#232323;
  transform:translateY(-1px);
}

/* Prev/next arrows — slim, glassy, low-key */
.wh-hero-carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  color:#fff;
  border:1px solid rgba(255,255,255,0.3);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  opacity:0.85;
}
.wh-hero-carousel__arrow:hover{
  background:rgba(255,255,255,0.25);
  border-color:rgba(255,255,255,0.55);
  opacity:1;
}
.wh-hero-carousel__arrow--prev{left:24px;}
.wh-hero-carousel__arrow--next{right:24px;}
.wh-hero-carousel__arrow svg{width:16px; height:16px;}

/* Pagination dots — refined pills, expand on active */
.wh-hero-carousel__dots{
  position:absolute;
  bottom:22px; left:0; right:0;
  z-index:3;
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; gap:8px;
}
.wh-hero-carousel__dots li{display:inline-flex;}
.wh-hero-carousel__dots button{
  width:22px; height:2px;
  background:rgba(255,255,255,0.45);
  border:none; padding:0;
  cursor:pointer;
  transition:background 0.4s ease, width 0.4s ease;
  border-radius:0;
}
.wh-hero-carousel__dots button.is-active{
  background:#fff;
  width:36px;
}
.wh-hero-carousel__dots button:hover{background:rgba(255,255,255,0.7);}

@media (max-width: 900px){
  .wh-hero-carousel{height:480px;}
  .wh-hero-slide__content{padding:0 22px 60px;}
  .wh-hero-carousel__arrow{width:34px; height:34px;}
  .wh-hero-carousel__arrow--prev{left:14px;}
  .wh-hero-carousel__arrow--next{right:14px;}
}
@media (max-width: 600px){
  .wh-hero-carousel{height:420px;}
  .wh-hero-slide__content{padding:0 18px 50px;}
  .wh-hero-slide__cta{padding:12px 22px; font-size:13px;}
  .wh-hero-carousel__dots{bottom:16px;}
  .wh-hero-carousel__dots button{width:18px;}
  .wh-hero-carousel__dots button.is-active{width:28px;}
}

/* ============================================================ */
/* DIVIDER — "White Hanger" cursive wordmark, animated as a      */
/* typewriter pop-in: each letter appears one after another      */
/* (W → h → i → t → e → H → a → n → g → e → r) with a small      */
/* upward lift + fade-in, holds, then fades out in the same      */
/* order. Each char has its own gold-shimmer background-clip so  */
/* the "shiny" sweep continues across all visible characters.    */
/* Honors prefers-reduced-motion (chars render statically).      */
/* ============================================================ */
.wh-divider{
  /* Own white card so the wordmark sits on a single background instead
     of straddling the boundary between two cream sections. */
  background:#ffffff;
  border:none;
  /* Tighter — the .wh-divider__name itself already carries vertical
     padding to fit the cursive ascenders/descenders, so the outer
     band can be near-zero. */
  padding:0 16px;
  margin:0;
  position:relative;
  z-index:2;
  text-align:center;
  line-height:1;
}
.wh-divider__name{
  display:inline-block;
  font-family:'Great Vibes', 'Allura', 'Tangerine', 'Italiana', cursive;
  font-weight:400;
  font-style:normal;
  font-size:clamp(26px, 4vw, 52px);
  letter-spacing:0.01em;
  white-space:nowrap;
  line-height:1;
  /* Paint-box covers the entire wordmark including Great Vibes'
     tall ascenders, long g/y descenders and the W's left swoosh.
     Tightened — top trimmed a touch more than bottom because the
     ascenders need less room than the g's descender curl. */
  padding-top:0.12em;
  padding-bottom:0.5em;
  /* Black base text (the cascade fallback for browsers without
     background-clip:text). On top: a slow gold-into-cream highlight
     slice that sweeps L→R across the whole wordmark. */
  color:#1a1a1a;
  background:linear-gradient(
    100deg,
    #1a1a1a 0%,
    #1a1a1a 38%,
    #b8923f 47%,
    #f5e1b8 50%,
    #b8923f 53%,
    #1a1a1a 62%,
    #1a1a1a 100%
  );
  background-size:220% 100%;
  /* Position stays within 0%–100% range. Going beyond (e.g. 130% or
     -30%) would leave parts of the element uncovered, and since the
     text-fill is transparent those glyphs would vanish against the
     white card. Sweeping 0%→100% keeps full coverage always. */
  background-position:0% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:wh-divider-shine 7s ease-in-out infinite;
}
/* Char spans are markup-only now — no per-letter styling. They just
   contribute their text to the parent's clipped gradient. */
.wh-divider__char{display:inline; opacity:1;}
.wh-divider__char--space{display:inline;}
@keyframes wh-divider-shine{
  0%   { background-position:0% 0;   }   /* gold slice near left of wordmark */
  100% { background-position:100% 0; }   /* gold slice near right of wordmark */
}
@media (max-width: 600px){
  .wh-divider{ padding:0 12px; margin:0; }
}
@media (prefers-reduced-motion: reduce){
  .wh-divider__name{ animation:none; background-position:50% 0; }
}

/* ============================================================ */
/* BOOK LIVE VIDEO CALL — promo banner after What's Your Vibe    */
/* ============================================================ */
.wh-livecall{
  background-color:#1a1a1a;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  /* Top-heavy padding: pushes the CTA below the baked-in text in bannervc.png */
  padding:260px 24px 72px;
  text-align:center;
  border-top:1px solid #ececec;
  position:relative;
  overflow:hidden;
}
/* Softens the dark gradient baked into bannervc.png. */
.wh-livecall::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0.28);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
.wh-livecall__inner{
  position:relative; z-index:1;
  max-width:720px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.wh-livecall__eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  font-weight:500;
  color:rgba(255,255,255,0.72);
  margin:0 0 12px;
}
.wh-livecall__title{
  font-family:'Jost', sans-serif;
  font-size:clamp(26px, 3.4vw, 38px);
  font-weight:500;
  letter-spacing:-0.3px;
  color:#fff;
  margin:0 0 14px;
  line-height:1.2;
}
.wh-livecall__sub{
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.55;
  color:rgba(255,255,255,0.78);
  margin:0 0 28px;
  max-width:560px;
}
.wh-livecall__cta{
  display:inline-block;
  background:transparent;
  color:#fff;
  padding:13px 26px;
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.4px;
  text-transform:none;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.85);
  border-radius:3px;
  transition:background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.wh-livecall__cta:hover{
  background:#fff; color:#1a1a1a;
  transform:translateY(-1px);
}
@media (max-width: 600px){
  .wh-livecall{padding:180px 20px 48px;}
  .wh-livecall__sub{font-size:14px;}
}

/* ============================================================ */
/* GLOBAL OVERRIDES — kill italic everywhere + use Jost for      */
/* all titles/headings (the Men's Collections h2 font).          */
/* Appended last so these rules win the cascade.                 */
/* ============================================================ */

/* 1) Disable italic across the WH theme. We exempt <em>, <i>, and
   <cite> so semantic emphasis inside body content stays intact. */
.wh, .wh *,
.wh-footer, .wh-footer *,
.wh-fab, .wh-fab *,
.wh-chat, .wh-chat *,
.wh-drawer, .wh-drawer *,
.wh-modal, .wh-modal *,
.wh-hero-carousel, .wh-hero-carousel *,
.wh-collection, .wh-collection *,
.wh-info, .wh-info *,
.wh-store-detail, .wh-store-detail *,
.wh-store-back,
.wh-book, .wh-book *{
  font-style:normal !important;
}
.wh em, .wh i, .wh cite,
.wh-footer em, .wh-footer i, .wh-footer cite,
.wh-info em, .wh-info i, .wh-info cite,
.wh-review em, .wh-review i, .wh-review cite{
  font-style:italic !important;
}

/* 2) Unified heading font — Jost, matching .wh-section h2 "Men's
   Collections". Applies to every h1-h6 in the WH theme + every
   element whose class ends in "title", "heading", or "subtitle". */
.wh h1, .wh h2, .wh h3, .wh h4, .wh h5, .wh h6,
.wh-footer h1, .wh-footer h2, .wh-footer h3, .wh-footer h4,
.wh-info h1, .wh-info h2, .wh-info h3, .wh-info h4,
[class*="__title"], [class*="-title"],
[class*="__heading"], [class*="-heading"],
[class*="__subtitle"], [class*="-subtitle"],
.wh-foot__wordmark,
.wh-collection-marquee__track > li,
.wh-vibe-card > span,
.wh-store-city{
  font-family:'Jost', sans-serif !important;
  font-style:normal !important;
}

/* ============================================================ */
/* MOBILE-ONLY POLISH — fixes for issues spotted on screenshots: */
/*   • hero carousel: bg-position:center crops to dress fabric   */
/*     only — model's face was off-screen                        */
/*   • navbar: WH logo was shifted off-center because grid       */
/*     columns were uneven (auto 1fr auto with bigger icon col)  */
/*   • livecall banner: bannervc.png was cover-cropping the      */
/*     baked-in title text on narrow viewports                   */
/*   • men/women collection marquee: models' faces clipped       */
/*     because cards were 300px wide with bg-position:center     */
/*   • Stores section: 4 stores stacked in a 1-col tall column   */
/*     because auto-fit minmax(180px) couldn't fit 2             */
/* All gated to ≤600px — desktop is untouched.                   */
/* ============================================================ */
@media (max-width: 600px){

  /* Navbar — make the 3 grid columns symmetric so the centre
     auto column (logo) sits dead-centre in the viewport, not
     between two unequal columns. */
  .wh-nav{
    grid-template-columns:1fr auto 1fr;
  }
  .wh-nav__menu-btn{justify-self:start;}
  .wh-nav__logo{justify-self:center;}
  .wh-nav__right{justify-self:end;}

  /* Hero carousel — each fallback image has its model in a different
     horizontal spot, so a single bg-position can't keep all four faces
     in frame on a portrait mobile viewport. Default sits at 50% for any
     Ghost-driven slide we don't know about; per-image overrides below
     pin each known hero-N.png to its model's face. */
  .wh-hero-carousel{height:480px;}
  .wh-hero-slide{
    background-position:50% center !important;
  }
  .wh-hero-slide[style*="hero-1.png"]{ background-position:22% center !important; } /* model reclining, face on the LEFT */
  .wh-hero-slide[style*="hero-2.png"]{ background-position:55% center !important; } /* couple, centred-right */
  .wh-hero-slide[style*="hero-3.png"]{ background-position:65% center !important; } /* groom standing on the RIGHT */
  .wh-hero-slide[style*="hero-4.png"]{ background-position:52% center !important; } /* model centred */
  .wh-hero-slide__content{padding:0 18px 44px;}

  /* Livecall banner — hidden on mobile per request. Section still
     renders in DOM but is removed from layout. Desktop unaffected. */
  .wh-livecall{display:none;}

  /* Marquee cards — narrower so the model fits without being
     dwarfed, and bg-position shifted upward so faces are kept
     in frame instead of being cropped at the top.
     `.wh-section` prefix raises specificity above the legacy
     `.wh-section ul li` base rule (0,1,2). */
  .wh-section .wh-collection-marquee__track > li{
    width:260px !important;
    aspect-ratio:4 / 5 !important;
    background-position:center 18% !important;
  }

  /* Stores — 2 per row on mobile. Flex container centers them; each
     store takes ~42% so two fit per row with the row-gap below. */
  .wh-section#stores{padding:2.5rem 1rem 2.75rem;}
  #stores ol{
    gap:1.5rem 0.5rem;
  }
  #stores ol li{ width:42%; }
  .wh-store-icon svg{width:34px; height:34px;}
}


/* ============================================================ */
/* NEWSLETTER TOAST — confirmation popup for "Join The Inner    */
/* Circle" form. Fixed bottom-right, slides up + fades in,      */
/* auto-dismisses after 5s, tap × to close.                     */
/* ============================================================ */
.wh-news-toast{
  /* Inline — flows directly below the newsletter form. Compact size. */
  display:flex; align-items:flex-start; gap:10px;
  width:100%; max-width:380px;
  padding:10px 12px;
  margin:10px 0 0;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:6px;
  box-shadow:0 5px 14px -10px rgba(0, 0, 0, 0.18);
  font-family:'Inter', sans-serif;
  box-sizing:border-box;
  /* Collapsed by default — reveals on .is-visible. */
  opacity:0;
  max-height:0;
  margin-top:0;
  padding-top:0; padding-bottom:0;
  border-width:0;
  overflow:hidden;
  pointer-events:none;
  transition:
    opacity 0.18s ease,
    max-height 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
    margin-top 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
    padding 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-width 0s 0.03s;
}
.wh-news-toast.is-visible{
  opacity:1;
  max-height:160px;
  margin-top:10px;
  padding-top:10px; padding-bottom:10px;
  border-width:1px;
  pointer-events:auto;
}
.wh-news-toast__icon{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  background:#1a1a1a;
  color:#fff;
}
.wh-news-toast__icon svg{ width:14px; height:14px; }
.wh-news-toast__body{
  flex:1 1 auto;
  min-width:0;
}
.wh-news-toast__title{
  margin:0 0 2px;
  font-family:'Jost', sans-serif;
  font-size:13px; font-weight:600;
  color:#1a1a1a; letter-spacing:0;
}
.wh-news-toast__msg{
  margin:0;
  font-size:11.5px; line-height:1.4;
  color:#555;
}
.wh-news-toast__close{
  flex:0 0 auto;
  background:transparent; border:none;
  padding:0; margin:-2px -2px 0 4px;
  font-size:18px; line-height:1;
  color:#888; cursor:pointer;
  transition:color 0.2s ease;
}
.wh-news-toast__close:hover{ color:#1a1a1a; }
@media (max-width: 600px){
  .wh-news-toast{
    right:12px; left:12px; bottom:12px;
    max-width:none;
  }
}

/* ============================================================ */
/* CONTACT / HELP CENTER PAGE — two-column layout (info + form) */
/* ============================================================ */
.wh-contact{
  background:var(--wh-cream);
  padding:0 0 6rem;
  min-height:60vh;
}
/* Hero band on top — compact. */
.wh-contact__hero{
  background:#fff;
  text-align:center;
  padding:2.25rem 1.5rem 2rem;
  border-bottom:1px solid var(--wh-line);
}
.wh-contact__badge{
  display:inline-block;
  padding:0.4rem 1rem;
  background:rgba(184, 146, 63, 0.1);
  color:var(--wh-gold);
  border-radius:999px;
  font-family:'Inter', sans-serif;
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:600;
  margin-bottom:0.75rem;
}
.wh-contact__title{
  font-family:'Jost', sans-serif;
  font-size:clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight:500;
  color:var(--wh-navy);
  margin:0 0 0.6rem;
  letter-spacing:-0.5px;
  line-height:1.1;
}
.wh-contact .wh-contact__lede{
  font-family:'Inter', sans-serif;
  font-size:1.5rem; font-weight:400;
  color:var(--wh-ink-soft);
  margin:0 auto !important;
  max-width:600px !important;
  line-height:1.6;
  text-align:center !important;
}

/* Single-column body — form sits on top, contact info below.
   Narrower container (720px) so the form doesn't sprawl, with
   generous gap between the two cards for an airier feel.
   Positive top margin so the form card sits cleanly BELOW the
   hero band instead of overlapping into it. */
.wh-contact__grid{
  max-width:720px;
  margin:3rem auto 0;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  align-items:start;
}
.wh-contact__form{ order:1; }
.wh-contact__info{ order:2; }

/* Info card */
.wh-contact__info{
  background:#fff;
  border:1px solid var(--wh-line);
  border-radius:8px;
  padding:2.75rem 2.5rem;
}
.wh-contact__info-title{
  font-family:'Jost', sans-serif;
  font-size:1.7rem; font-weight:500;
  color:var(--wh-navy);
  margin:0 0 1.5rem;
  letter-spacing:0;
}
.wh-contact__list{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column;
  gap:2.25rem;
}
.wh-contact__item{
  display:flex; align-items:flex-start; gap:1rem;
}
.wh-contact__icon{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(184, 146, 63, 0.12);
  color:var(--wh-gold);
}
.wh-contact__item-body{
  flex:1 1 auto;
  min-width:0;
}
.wh-contact__label{
  font-family:'Inter', sans-serif;
  font-size:0.7rem; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--wh-ink-soft);
  margin:0 0 0.4rem;
}
.wh-contact__value{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:1.45rem; font-weight:500;
  color:var(--wh-navy);
  text-decoration:none;
  line-height:1.35;
  margin:0 0 0.25rem;
  word-break:break-word;
}
a.wh-contact__value:hover{ color:var(--wh-gold); }
.wh-contact__sub{
  font-family:'Inter', sans-serif;
  font-size:1.15rem; color:var(--wh-ink-soft);
  margin:0; line-height:1.35;
}
.wh-contact__sub--link{
  color:var(--wh-gold);
  text-decoration:none;
}
.wh-contact__sub--link:hover{ text-decoration:underline; }

/* Form column */
.wh-contact__form-card{
  background:#fff;
  border:1px solid var(--wh-line);
  border-radius:8px;
  padding:3rem 2.75rem;
}
.wh-contact__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.75rem;
}
.wh-contact__field{
  margin-bottom:1.75rem;
  display:flex; flex-direction:column;
}
.wh-contact__field label{
  font-family:'Inter', sans-serif;
  font-size:0.7rem; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--wh-ink-soft);
  margin-bottom:0.5rem;
}
.wh-contact__field input,
.wh-contact__field select,
.wh-contact__field textarea{
  font-family:'Inter', sans-serif;
  font-size:1.4rem;
  color:var(--wh-navy);
  background:#fafaf7;
  border:1px solid var(--wh-line);
  border-radius:4px;
  padding:0.85rem 1rem;
  width:100%;
  transition:border-color 0.2s ease, background 0.2s ease;
  font-weight:400;
}
.wh-contact__field input::placeholder,
.wh-contact__field textarea::placeholder{ color:#9a958c; }
.wh-contact__field input:focus,
.wh-contact__field select:focus,
.wh-contact__field textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--wh-ink);
}
.wh-contact__field textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.5;
}
.wh-contact__submit{
  display:block;
  width:100%;
  background:var(--wh-ink); color:#fff;
  border:none; border-radius:4px;
  padding:1.1rem 2rem;
  font-family:'Inter', sans-serif;
  font-size:1rem; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
  margin-top:0.5rem;
}
.wh-contact__submit:hover{
  background:#000;
  transform:translateY(-1px);
}

/* Success state replaces the form card after submit */
.wh-contact__success{
  background:#fff;
  border:1px solid var(--wh-line);
  border-radius:8px;
  padding:3rem 2rem;
  text-align:center;
}
.wh-contact__success-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  border-radius:50%;
  background:rgba(184, 146, 63, 0.15);
  color:var(--wh-gold);
  margin-bottom:1.25rem;
}
.wh-contact__success-title{
  font-family:'Jost', sans-serif;
  font-size:2rem; font-weight:500;
  color:var(--wh-navy);
  margin:0 0 0.75rem;
}
.wh-contact__success-msg{
  font-family:'Inter', sans-serif;
  font-size:1.4rem; color:var(--wh-ink-soft);
  margin:0 auto 1.75rem;
  max-width:380px; line-height:1.55;
}
.wh-contact__success-btn{
  background:transparent;
  color:var(--wh-navy);
  border:1px solid var(--wh-ink);
  border-radius:4px;
  padding:0.85rem 1.75rem;
  font-family:'Inter', sans-serif;
  font-size:0.95rem; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.wh-contact__success-btn:hover{
  background:var(--wh-ink); color:#fff;
}

@media (max-width: 900px){
  .wh-contact__grid{
    grid-template-columns:1fr;
    gap:2rem;
    margin-top:-1rem;
  }
  .wh-contact__hero{ padding:3.5rem 1.25rem 3rem; }
  .wh-contact__form-card,
  .wh-contact__success{ padding:1.75rem; }
  .wh-contact__row{ grid-template-columns:1fr; gap:0; }
}
@media (max-width: 600px){
  .wh-contact{ padding-bottom:3rem; }
  .wh-contact__info{ padding:1.5rem 1.25rem; }
  .wh-contact__form-card{ padding:1.5rem 1.25rem; }
  .wh-contact__success{ padding:2.25rem 1.25rem; }
}

/* ============================================================ */
/* BLOG DETAIL PAGE (post.hbs) — White Hanger brand styling      */
/* ============================================================ */
.wh-post{
  background:#fff;
  padding-bottom:5rem;
}
/* Centred article column */
.wh-post__inner{
  max-width:760px;
  margin:0 auto;
  padding:3rem 1.5rem 0;
}
/* Feature image — contained inside the article column, refined frame.
   Aspect-ratio gives it a calm, editorial proportion instead of the
   previous full-bleed hero that swamped the page. */
.wh-post__hero{
  margin:0 0 2.5rem;
  padding:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--wh-cream-deep);
  box-shadow:0 18px 40px -28px rgba(20, 30, 60, 0.35);
}
.wh-post__hero img{
  display:block;
  width:100%;
  height:auto;
  max-height:440px;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center 30%;
}
.wh-post__head{
  text-align:center;
  margin-bottom:2.75rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--wh-line);
}
.wh-post__tag{
  display:inline-block;
  padding:0.35rem 0.85rem;
  margin-bottom:1rem;
  background:rgba(184, 146, 63, 0.1);
  color:var(--wh-gold);
  border-radius:999px;
  font-family:'Inter', sans-serif;
  font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
}
.wh-post__title{
  font-family:'Jost', sans-serif;
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  font-weight:500;
  color:var(--wh-navy);
  letter-spacing:-0.5px;
  line-height:1.15;
  margin:0 0 1rem;
}
.wh-post__lede{
  font-family:'Inter', sans-serif;
  font-size:1.4rem;
  font-weight:400;
  line-height:1.55;
  color:var(--wh-ink-soft);
  margin:0 auto 1.5rem;
  max-width:600px;
}
.wh-post__meta{
  display:inline-flex; align-items:center;
  flex-wrap:wrap; justify-content:center;
  gap:0.6rem;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  color:var(--wh-ink-soft);
}
.wh-post__author-img{
  width:28px; height:28px; border-radius:50%;
  object-fit:cover;
  margin-right:0.3rem;
}
.wh-post__author{ color:var(--wh-navy); font-weight:500; }
.wh-post__meta-sep{ color:#ccc; }
.wh-post__date,
.wh-post__read-time{ color:var(--wh-ink-soft); }

/* The post body — inherits Ghost's .gh-content typography for paragraphs,
   headings, images, lists, blockquotes etc. */
.wh-post__content{
  font-family:'Inter', sans-serif;
  font-size:1.25rem;
  line-height:1.8;
  color:#222;
}
.wh-post__content p{ margin:0 0 1.5em; }
.wh-post__content h2,
.wh-post__content h3{
  font-family:'Jost', sans-serif;
  color:var(--wh-navy);
  margin-top:2em; margin-bottom:0.6em;
  font-weight:500;
}
.wh-post__content h2{ font-size:1.6rem; }
.wh-post__content h3{ font-size:1.3rem; }
.wh-post__content img,
.wh-post__content figure{
  margin:2em auto;
  max-width:100%;
  display:block;
}
.wh-post__content blockquote{
  margin:2em 0;
  padding:0.5rem 0 0.5rem 1.5rem;
  border-left:3px solid var(--wh-gold);
  font-family:'Jost', sans-serif;
  font-size:1.2rem; font-style:italic;
  color:var(--wh-navy);
  line-height:1.55;
}
.wh-post__content a{
  color:var(--wh-navy);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--wh-gold);
}
.wh-post__content a:hover{ color:var(--wh-gold); }
.wh-post__content ul,
.wh-post__content ol{ margin:1em 0 1.5em 1.25em; }
.wh-post__content li{ margin-bottom:0.4em; }
.wh-post__content code{
  font-family:'Menlo', 'Monaco', monospace;
  background:var(--wh-cream);
  padding:0.15em 0.4em;
  border-radius:3px;
  font-size:0.92em;
}

/* Back-to-blog link below the body — unified square outline button. */
.wh-post__back{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  margin-top:3rem;
  padding:0.7rem 1.4rem;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-family:'Inter', sans-serif;
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-post__back:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.16em;
}

/* "More from the Atelier" related-posts strip at the bottom */
.wh-post__related{
  max-width:1480px;
  margin:5rem auto 0;
  padding:0 1.5rem;
}
.wh-post__related-title{
  font-family:'Jost', sans-serif;
  font-size:1.5rem; font-weight:500;
  color:var(--wh-navy);
  text-align:center;
  margin:0 0 2rem;
}
.wh-post__related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1.5rem;
}
/* Related-card overrides — apply the same compact look as the listing. */
.wh-post__related .wh-blog-card{ border-radius:6px; }
.wh-post__related .wh-blog-card__image{
  aspect-ratio:16/11;
  background-position:center 20%;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
}
.wh-post__related .wh-blog-card__body{ padding:1.1rem 1.1rem 1.2rem; }
.wh-post__related .wh-blog-card__meta{
  font-size:0.58rem; letter-spacing:0.28em; margin:0 0 0.5rem;
}
.wh-post__related .wh-blog-card h3{
  font-size:1.05rem; font-style:normal; font-weight:600;
  line-height:1.3; margin:0 0 0.45rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wh-post__related .wh-blog-card h3 a{ color:inherit; text-decoration:none; }
.wh-post__related .wh-blog-card__body p{
  font-family:'Inter', sans-serif;
  font-size:0.82rem; line-height:1.5;
  margin:0 0 0.85rem;
  color:#666;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wh-post__related .wh-blog-card__link{
  font-size:0.58rem; letter-spacing:0.26em;
}

@media (max-width: 700px){
  .wh-post__hero{ margin-bottom:1.75rem; border-radius:6px; }
  .wh-post__hero img{ aspect-ratio:4/3; max-height:300px; }
  .wh-post__inner{ padding:2rem 1.25rem 0; }
  .wh-post__head{ margin-bottom:2rem; padding-bottom:1.5rem; }
  .wh-post__lede{ font-size:1.1rem; }
  .wh-post__content{ font-size:1.1rem; line-height:1.75; }
  .wh-post__back{ font-size:0.78rem; padding:0.6rem 1.2rem; }
  .wh-post__content h2{ font-size:1.4rem; }
  .wh-post__content h3{ font-size:1.2rem; }
  .wh-post__related{ margin-top:3.5rem; }
  .wh-post__related-grid{ grid-template-columns:1fr; }
}

/* ============================================================ */
/* SHOP ENGINE — badges, product-card buttons, cart/wishlist UI */
/* ============================================================ */

/* Cart / Wishlist count badges on the nav icons */
.wh-icon{ position:relative; }
.wh-icon__badge{
  position:absolute;
  top:-4px; right:-6px;
  min-width:16px; height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--wh-navy);
  color:#fff;
  font-family:'Inter', sans-serif;
  font-size:9px; font-weight:600;
  line-height:16px;
  text-align:center;
  letter-spacing:0;
  pointer-events:none;
}

/* Wishlist heart in top-right corner of each product card image */
.wh-product{ position:relative; }
.wh-product__fav{
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.92);
  color:#1a1a1a;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:50%;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wh-product__fav:hover{ background:#fff; transform:scale(1.05); }
.wh-product__fav.is-active{
  background:var(--wh-navy);
  color:#fff;
  border-color:var(--wh-navy);
}
.wh-product__fav.is-active svg{ fill:#fff; }

/* "Add to Bag" pill button — same brand square-outline style */
.wh-product__add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0.85rem;
  padding:0.55rem 1rem;
  background:#fff;
  color:#1a1a1a;
  border:1px solid #1a1a1a;
  border-radius:0;
  font-family:'Inter', sans-serif;
  font-size:0.7rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer;
  transition:background 0.25s ease, color 0.25s ease, letter-spacing 0.25s ease;
}
.wh-product__add:hover{
  background:#1a1a1a;
  color:#fff;
  letter-spacing:0.16em;
}

/* Cart-page / Wishlist-page rendered item list */
.wh-shop-list{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-width:760px;
  margin:2.5rem auto 0;
  text-align:left;
}
.wh-shop-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1.25rem;
  padding:1rem;
  background:#fff;
  border:1px solid var(--wh-line);
  border-radius:6px;
}
.wh-shop-row__img{
  display:block;
  width:120px; height:130px;
  background-color:var(--wh-cream-deep);
  background-size:cover;
  background-position:center;
  border-radius:4px;
}
.wh-shop-row__body{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.wh-shop-row__name{
  font-family:'Jost', sans-serif;
  font-size:1.3rem; font-weight:500;
  color:var(--wh-ink);
  margin:0;
}
.wh-shop-row__name a{ color:inherit; text-decoration:none; }
.wh-shop-row__name a:hover{ color:var(--wh-navy); }
.wh-shop-row__sub{
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  color:var(--wh-ink-soft);
  margin:0;
}
.wh-shop-row__price{
  font-family:'Inter', sans-serif;
  font-size:1.1rem; font-weight:500;
  color:var(--wh-navy);
  margin:0.3rem 0 0;
}
.wh-shop-row__actions{
  display:flex; gap:0.75rem;
  margin-top:auto;
  flex-wrap:wrap;
}
.wh-shop-row__remove,
.wh-shop-row__move{
  align-self:flex-start;
  margin-top:0.55rem;
  padding:0;
  background:none;
  border:none;
  font-family:'Inter', sans-serif;
  font-size:0.72rem; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--wh-ink-soft);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color 0.2s ease;
}
.wh-shop-row__move{ color:var(--wh-navy); }
.wh-shop-row__remove:hover{ color:#1a1a1a; }
.wh-shop-row__move:hover{ color:#1a1a1a; }

.wh-shop-foot{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  margin-top:2.5rem;
  flex-wrap:wrap;
}
/* Footer buttons inherit .wh-page__btn--primary / --ghost styling — the
   unified square-outline white-bg look used across the rest of the site. */

@media (max-width: 600px){
  .wh-shop-row{ grid-template-columns:90px 1fr; gap:1rem; padding:0.85rem; }
  .wh-shop-row__img{ width:90px; height:110px; }
  .wh-shop-row__name{ font-size:1.15rem; }
  .wh-shop-row__sub{ font-size:0.9rem; }
  .wh-shop-row__price{ font-size:1.05rem; }
}

/* ============================================================ */
/* CALL-NOW POPOVER — shows the WH phone number on Call icon tap */
/* ============================================================ */
.wh-call-popover{
  position:fixed;
  right:30px; bottom:120px;
  z-index:110;
  background:#fff;
  border:1px solid var(--wh-line);
  border-radius:8px;
  padding:1.1rem 3rem 1.1rem 1.4rem;
  min-width:260px;
  box-shadow:0 24px 60px -20px rgba(20,30,60,0.28);
  font-family:'Inter', sans-serif;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.wh-call-popover.is-open{
  opacity:1;
  transform:translateY(0);
}
.wh-call-popover__label{
  font-size:0.7rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--wh-ink-soft);
  margin:0 0 0.4rem;
  font-weight:600;
}
.wh-call-popover__num{
  display:block;
  font-family:'Jost', sans-serif;
  font-size:1.45rem;
  font-weight:500;
  color:var(--wh-navy);
  text-decoration:none;
  letter-spacing:0.02em;
  margin:0;
}
.wh-call-popover__num:hover{ color:var(--wh-ink); }
.wh-call-popover__close{
  position:absolute;
  top:10px; right:10px;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:none;
  border-radius:50%;
  color:var(--wh-ink-soft);
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.wh-call-popover__close:hover{
  background:var(--wh-cream-deep);
  color:var(--wh-ink);
}
@media (max-width: 480px){
  .wh-call-popover{
    right:1rem; left:1rem; bottom:100px;
    min-width:0;
  }
}

/* ============================================================ */
/* SIGN-IN OTP STEP — Clerk email verification code             */
/* ============================================================ */

/* Container for the OTP step (mirror of the email step layout) */
.wh-auth__form--otp {
  margin-bottom: 1.5rem;
}

/* Status line above the OTP input ("We sent a code to …") */
.wh-auth__otp-sent {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--wh-ink);
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--wh-cream);
  border-left: 3px solid var(--wh-navy);
  border-radius: 4px;
}

/* 6-digit code input — centered, monospaced, generous letter-spacing */
.wh-auth__input--otp {
  text-align: center;
  font-family: 'Inter', monospace, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  padding: 0.9rem 1rem;
  text-indent: 0.4em; /* offset letter-spacing for centering */
}
.wh-auth__input--otp::placeholder {
  letter-spacing: 0.4em;
  color: #c5c5c5;
}

/* Resend / Change email links in the OTP hint */
.wh-auth__form--otp [data-wh-auth-hint] a,
[data-wh-auth-otp-hint] a {
  color: var(--wh-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
[data-wh-auth-otp-hint] a:hover {
  color: var(--wh-ink);
}

/* Hint state colors — pick up via data-state */
.wh-auth__hint[data-state="error"],
[data-wh-auth-otp-hint][data-state="error"] {
  color: #c0392b;
}
.wh-auth__hint[data-state="success"],
[data-wh-auth-otp-hint][data-state="success"] {
  color: #1d7d4f;
}

/* Cross-link in auth footer ("Create one →" / "Sign in →") */
.wh-auth__foot-link {
  color: var(--wh-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.wh-auth__foot-link:hover {
  color: var(--wh-ink);
}