@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800&display=swap");

/* ===================================
   ROOT VARIABLES
   Theme accent: Smoked Brass
=================================== */
:root{
  --gold:#b6945a;         /* primary accent */
  --gold-2:#a07f43;       /* deeper accent */
  --gold-hi:#d4bb86;      /* lighter highlight */
  --gold-rgb:182,148,90;

  --bg:#000;
  --panel:#0f0f0f;
  --ink:#fff;
  --muted:#bbb;
  --line:#1a1a1a;
  --btn-onyx:#2b2b2b;
  --btn-onyx-2:#333333;

  /* rating row height */
  --rating-h:22px;
}
@media (min-width:769px){
  :root{ --rating-h:20px; }
}

/* ===================================
   BASE
=================================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{
  display:block;
  max-width:100%;
  height:auto;
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  user-select:none;
  pointer-events:none;    /* anchors remain clickable */
}

/* ===================================
   HEADER
=================================== */
.main-header{
  background:#111;
  text-align:center;
  padding:40px 0;
  position:relative;
  min-height:180px;
}
.main-header .header-inner{ position:relative; min-height:180px; }
.header-logo{
  width:560px; max-width:90%; height:auto;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .3s ease, filter .3s ease;
}
@media (max-width:768px){
  .main-header{ padding:16px 0; min-height:120px; }
  .main-header .header-inner{ min-height:120px; }
  .header-logo{ width:clamp(240px,70vw,380px); }
}
@media (max-width:380px){
  .header-logo{ width:clamp(220px,78vw,340px); }
}

/* ===================================
   COLLECTION STACK
=================================== */
.collection-stack{ display:block; width:100%; margin:0 auto }
.occasion-section{
  padding:36px 16px 24px;
  border-top:1px solid var(--line);
}
.occasion-section:first-of-type{ border-top:0 }

/* ===================================
   SECTION HEADERS
=================================== */
.section-head{ max-width:1200px; margin:0 auto 16px; padding:0 8px; text-align:center; }
.occasion-title{
  font-family:"Cinzel","Trajan Pro",serif;
  font-size:clamp(22px,2.4vw,28px);
  color:var(--gold);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 6px;
  font-weight:800;
  text-align:center;
}
.occasion-title::after{
  content:""; display:block; width:84px; height:1px; margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-2) 15%,var(--gold) 50%,var(--gold-2) 85%,transparent);
  opacity:.9;
}
.occasion-tagline{ margin:0 auto; color:var(--muted); font-size:clamp(14px,1.6vw,15px); opacity:.9; }

/* NEW: tiny instruction under section title */
.customize-hint{
  margin:6px 0 0;
  font-size:clamp(12px,1.4vw,14px);
  color:var(--gold);
  opacity:.92;
  letter-spacing:.01em;
}

/* ===================================
   SWIPER WRAPPER
=================================== */
.coat-swiper{ max-width:1200px; margin:12px auto 0; padding:8px 8px 20px; position:relative; cursor:grab; }
.coat-swiper:active{ cursor:grabbing }
.swiper{ overflow:hidden }
.swiper-slide{ height:auto }

/* important: keep slides on the GPU, avoid sub-pixel blur */
.swiper-slide{
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* hide bullets */
.coat-swiper .swiper-pagination,
.coat-swiper .swiper-pagination-bullets,
.coat-swiper .swiper-pagination-horizontal{ display:none !important; visibility:hidden !important; height:0 !important; margin:0 !important; padding:0 !important; }

/* soft edge gradients on desktop */
@media (min-width:769px){
  .coat-swiper::before,
  .coat-swiper::after{
    content:""; position:absolute; top:0; bottom:0; width:32px; pointer-events:none;
  }
  .coat-swiper::before{ left:0;  background:linear-gradient(to right,rgba(0,0,0,.85),rgba(0,0,0,0)); }
  .coat-swiper::after{  right:0; background:linear-gradient(to left, rgba(0,0,0,.85),rgba(0,0,0,0)); }
}

/* ===================================
   COAT CARDS
=================================== */
.coat-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  height:100%;
  box-shadow:0 8px 22px rgba(var(--gold-rgb), .12);
}
.coat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 28px rgba(var(--gold-rgb), .18);
  border-color:rgba(var(--gold-rgb), .35);
}

/* image frame */
.coat-image{
  width:100%; aspect-ratio:4/5.5; border-radius:8px; overflow:hidden; background:#0b0b0b;
  display:grid; place-items:center; position:relative;
}
@media (max-width:480px){ .coat-image{ aspect-ratio:4/6; } }

/* ===== Anti-moiré tuning ===== */
.coat-image::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 85% at 50% 35%, rgba(255,255,255,.03), rgba(0,0,0,.14) 60%, rgba(0,0,0,.22) 100%);
  mix-blend-mode:soft-light; pointer-events:none; opacity:.12; transition:opacity .25s ease;
}
.coat-card:hover .coat-image::after{ opacity:.18; }

/* hairline “champagne” frame */
.gold-frame{
  width:100%; height:100%; border-radius:8px; overflow:hidden; position:relative;
  background:
    linear-gradient(#0b0b0b,#0b0b0b) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.60), rgba(223,206,173,.40), rgba(255,255,255,.10)) border-box;
  border:1px solid transparent;
  box-shadow:0 0 6px rgba(223,206,173,.10);
  transition:box-shadow .3s ease, transform .3s ease;
}
.coat-card:hover .gold-frame{
  transform:scale(1.01);
  box-shadow:0 0 12px rgba(223,206,173,.16);
  background:
    linear-gradient(#0b0b0b,#0b0b0b) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.75), rgba(223,206,173,.50), rgba(255,255,255,.18)) border-box;
}

/* images — correct resampling + smaller zoom (fix fabric shimmer) */
.gold-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  image-rendering:auto;
  backface-visibility:hidden; transform:translateZ(0);
  max-width:none;
  transition:transform .3s ease, filter .3s ease;
}
.gold-frame:hover img{ transform:scale(1.015); filter:brightness(1.02) contrast(1.01); }

@media (hover:none){
  .gold-frame:hover img{ transform:none; filter:none; }
  .coat-image::after{ display:none; }
}

/* NEW: make the main image anchor feel luxe & accessible */
.coat-link{
  position:relative;
  display:block;
  border-radius:8px;
  outline:none;
}
.coat-link:focus-visible::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:10px;
  box-shadow:0 0 0 3px rgba(var(--gold-rgb), .45);
  pointer-events:none;
}
@media (hover:hover){
  .coat-link::after{
    content:"Customize →";
    position:absolute; right:.6rem; bottom:.6rem;
    font-size:.85rem; padding:.35rem .55rem;
    background:rgba(0,0,0,.55);
    border:1px solid var(--gold);
    border-radius:10px;
    opacity:0; transform:translateY(4px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .coat-link:hover::after{ opacity:1; transform:translateY(0); }
}



.coat-price{
  margin:0 6px;
  font-size:14px; text-align:center; font-weight:700; letter-spacing:.3px; color:var(--gold);
  min-height:calc(1.35em * 1 + 6px);
  display:flex; align-items:center; justify-content:center;
}
.coat-price .price-value{
  color:var(--gold);
  background:linear-gradient(135deg,var(--gold),var(--gold-hi));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:contrast(1.03) saturate(0.98);
}

/* ================================
   BUTTONS — (Customize deprecated)
================================ */
/* Globally hide old Customize button to avoid layout surprises */
.coat-card .btn-customize{ display:none !important; }

/* View All */
.btn-view-all{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; font-weight:700; letter-spacing:.2px; text-decoration:none !important; border-radius:999px;
  background:linear-gradient(#111,#111) padding-box, linear-gradient(135deg,var(--gold-2),var(--gold-hi)) border-box;
  border:1.6px solid transparent; color:var(--gold) !important;
  box-shadow:none;
  cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .1s ease, filter .2s ease;
}
.btn-view-all::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  opacity:.15; pointer-events:none; transition:opacity .2s ease;
}
.btn-view-all:hover{
  filter:none; transform:none; box-shadow:none;
  background:linear-gradient(#141414,#141414) padding-box, linear-gradient(135deg,var(--gold-2),var(--gold-hi)) border-box;
}
.btn-view-all:hover::before{ opacity:.2; }
.btn-view-all:active{
  transform:translateY(1px); filter:none; box-shadow:none;
}
.btn-view-all:focus-visible{
  outline:2px solid rgba(var(--gold-rgb), .35);
  outline-offset:2px;
  box-shadow:none;
}
.view-all-wrapper{ max-width:1200px; margin:10px auto 0; padding:0 8px; display:flex; justify-content:center !important; }
.btn-view-all[aria-expanded="true"]{ opacity:.95; }

/* containers */
.occasion-section .coat-swiper, .hidden-coats{ max-width:1200px; margin:12px auto 0; }
.occasion-section .coat-swiper{ width:100%; }

/* view all panel */
.hidden-coats{ display:none; padding:8px; }
.hidden-coats.active{ display:block; }

/* grid */
.coat-grid{ display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:769px){ .coat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* normalize view-all cards */
.hidden-coats .coat-card{ width:100%; max-width:unset; position:relative; display:flex; flex-direction:column; box-sizing:border-box; transform:none !important; }
.hidden-coats .coat-card:hover{ transform:none !important; }
.hidden-coats .coat-image{ width:100%; aspect-ratio:3/4; overflow:hidden; }
.hidden-coats .coat-image .coat-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* swiper disable */
.coat-swiper.is-disabled .swiper-button-prev,
.coat-swiper.is-disabled .swiper-button-next,
.coat-swiper.is-disabled .swiper-pagination{ visibility:hidden; pointer-events:none; }

/* NAV ARROWS — keep fully visible on desktop */
@media (min-width:769px){
  .coat-swiper.swiper{ overflow:hidden; position:relative; }
  .coat-swiper .swiper-button-prev,
  .coat-swiper .swiper-button-next{ z-index:6; top:50%; transform:translateY(-50%); }
  .coat-swiper .swiper-button-prev{ left:6px; }
  .coat-swiper .swiper-button-next{ right:6px; }
  .coat-swiper .swiper-button-prev:after,
  .coat-swiper .swiper-button-next:after{ font-size:20px; color:var(--gold); text-shadow:0 0 8px rgba(0,0,0,.6); }
}
/* mobile arrows */
@media (max-width:768px){
  .coat-swiper .swiper-button-prev{ left:-6px; top:64%; transform:translateY(-50%); width:34px; height:34px; }
  .coat-swiper .swiper-button-next{ right:-6px; top:64%; transform:translateY(-50%); width:34px; height:34px; }
  .coat-swiper .swiper-button-prev:after,
  .coat-swiper .swiper-button-next:after{ font-size:16px; color:var(--gold); text-shadow:0 0 8px rgba(0,0,0,.6); }
}

/* Bottom "Hide Coats" button (mirror) — same size as top */
.hidden-coats .btn-view-all.btn-view-all--mirror{
  display:inline-block;          /* remove full-width */
  margin:16px auto 4px;          /* center it, same spacing */
  text-align:center;
}

/* ===================================
   INTERACTION / MISC
=================================== */
.coat-swiper .swiper-wrapper{ align-items:stretch; }
.coat-name{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.25; min-height:calc(1.25em * 2 + 4px); }
.coat-desc{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.35; min-height:calc(1.35em * 2 + 6px); }

.swiper, .swiper-wrapper, .coat-card{ will-change:transform; }
.gold-frame img{ transform:translateZ(0); }

/* Typography finesse very large screens */
@media (min-width:1440px){
  .occasion-title{ letter-spacing:.045em; }
}

/* Focus ring (no glow) */
.coat-card .btn-customize:focus-visible, /* kept for legacy */
.btn-view-all:focus-visible,
.category-pill:focus-visible,
.collection-stack .coat-card .coat-name a:focus-visible,
.coat-link:focus-visible{
  outline:2px solid rgba(var(--gold-rgb), .35);
  outline-offset:2px;
  box-shadow:none;
}

/* Remove shimmer animation */
@keyframes ms-shimmer{ 0%{ background-position:0% 50% } 100%{ background-position:200% 50% } }
.coat-card .btn-customize:hover,
.btn-view-all:hover{ background-size:auto; animation:none; }
@media (prefers-reduced-motion:reduce){
  .coat-card .btn-customize:hover, .btn-view-all:hover{ animation:none; }
}

/* ===================================
   CATEGORY BAR (equal width, de-glow)
=================================== */
.category-bar{
  width:100%; background:transparent; max-width:1200px; margin:16px auto 8px; padding:0 8px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.category-bar__inner{
  max-width:1200px; margin:8px auto 0; padding:0 12px;
  display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;
}
.category-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 22px; border-radius:999px;
  font-weight:800; letter-spacing:.02em; text-decoration:none; color:var(--ink);
  min-width:clamp(112px, 20vw, 148px);
  background:linear-gradient(#121212,#121212) padding-box,
             linear-gradient(135deg,var(--gold-2),var(--gold)) border-box;
  border:1.4px solid transparent;
  box-shadow:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .1s ease, filter .1s ease;
}
.category-pill i{ font-size:16px; opacity:.95; }
.category-pill:hover{
  filter:none; transform:none;
  background:linear-gradient(#171717,#171717) padding-box,
             linear-gradient(135deg,var(--gold-2),var(--gold-hi)) border-box;
}
.category-pill:active{ transform:translateY(1px); }

.category-pill[aria-current="page"]{
  color:var(--gold);
  border-width:2px;
  filter:none;
  box-shadow:none;
  background:linear-gradient(#141414,#141414) padding-box,
             linear-gradient(135deg,var(--gold-2),var(--gold)) border-box;
}

/* hide inactive stacks */
#men-occasions[hidden], #women-occasions[hidden], #kids-occasions[hidden]{ display:none !important; }

/* enter animation */
.category-enter{ opacity:0; transform:translateX(12px); }
.category-enter.category-enter-active{
  opacity:1; transform:translateX(0);
  transition:opacity .25s ease, transform .30s ease;
}

/* Anchor offset for sticky category bar */
#men-occasions, #women-occasions, #kids-occasions{ scroll-margin-top:84px; }

/* ===== Mobile: keep all three pills on one line ===== */
@media (max-width: 480px){
  .category-bar{ padding:0 10px; }
  .category-bar__inner{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    justify-content:stretch;
    align-items:center;
  }
  .category-pill{
    min-width:0; width:100%;
    height:38px;
    padding:0 12px;
    font-size:14px;
    letter-spacing:.01em;
  }
  .category-pill i{ font-size:14px; }
}
@media (max-width: 360px){
  .category-bar__inner{ gap:8px; }
  .category-pill{ height:36px; font-size:13px; padding:0 10px; }
}

/* ===================================
   FOOTER
=================================== */
.main-footer{
  background:var(--bg,#111);
  border-top:1px solid var(--line,#1a1a1a);
  color:var(--ink,#fff);
}
.main-footer .footer-header-logo{
  display:flex; justify-content:center; align-items:center;
  padding:12px 0 4px; text-align:center;
}
.main-footer .footer-logo{
  position:static !important; transform:none !important; display:block; margin:0 auto;
  height:auto; max-width:92%;
  width:clamp(240px,70vw,560px);
}
@media (min-width:1440px){
  .main-footer .footer-logo{ width:560px; }
}
.footer-columns{
  max-width:1200px; margin:18px auto 0; padding:20px 16px 10px;
  display:grid; gap:20px; grid-template-columns:1.2fr 1fr 1fr;
}
@media (max-width:900px){ .footer-columns{ grid-template-columns:1fr; text-align:center; } }
.footer-col h4{
  margin:0 0 10px; font-weight:800; letter-spacing:.02em; color:var(--gold);
  font-family:"Cinzel","Trajan Pro",serif; font-size:clamp(16px,1.9vw,18px);
}
.footer-col h4 i{ margin-right:8px; opacity:.9; }
.footer-tagline{ margin:6px 0 0; font-size:clamp(14px,1.6vw,16px); color:var(--muted); }

/* links */
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:8px 0; }
.footer-col a{
  color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:.015em;
  border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease, text-shadow .25s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.footer-col a:hover{
  color:var(--gold);
  border-color:rgba(var(--gold-rgb), .35);
  text-shadow:0 0 6px rgba(var(--gold-rgb), .25);
}

/* newsletter */
.footer-newsletter{
  display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; justify-content:flex-start;
}
@media (max-width:900px){ .footer-newsletter{ justify-content:center; } }
.footer-newsletter input[type="email"]{
  padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#0d0d0d; color:#fff; width:min(340px,90%);
}
.footer-newsletter button{
  padding:10px 14px; border-radius:10px; border:1px solid var(--gold);
  background:#111; color:var(--gold); font-weight:700; cursor:pointer;
}
.footer-newsletter .hp{ position:absolute; left:-9999px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* trust badges */
.trust-badges{
  max-width:1200px; margin:8px auto 0; padding:12px 16px 6px;
  display:grid; gap:10px; grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:700px){ .trust-badges{ grid-template-columns:1fr; text-align:center; } }
.trust-badge{
  background:linear-gradient(#111,#111) padding-box, linear-gradient(135deg,var(--gold-2),var(--gold-hi)) border-box;
  border:1.4px solid transparent; border-radius:10px; padding:10px 14px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 6px 16px rgba(0,0,0,.35);
}
.trust-badge i{ margin-right:8px; }

/* Payments row */
.payments-accepted{
  max-width:1200px; margin:12px auto 0; padding:0 16px 8px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.pay-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; font-weight:700; font-size:14px; line-height:1;
  color:var(--ink); white-space:nowrap;
  background:linear-gradient(#111,#111) padding-box, linear-gradient(135deg,var(--gold-2),var(--gold-hi)) border-box;
  border:1.4px solid transparent;
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 6px 16px rgba(0,0,0,.35);
}
.pay-badge i{ font-size:16px; opacity:.95; }
.pay-badge.pay-rupay{ font-weight:800; letter-spacing:.02em; }
.pay-badge.is-disabled{ opacity:.55; filter:grayscale(1); border-style:dashed; cursor:not-allowed; }
@media (max-width:360px){
  .payments-accepted{ gap:8px; }
  .pay-badge{ padding:7px 10px; font-size:13px; }
  .pay-badge i{ font-size:15px; }
}

/* bottom */
.footer-bottom{
  margin-top:12px; padding:14px 16px 26px; text-align:center; color:var(--muted);
  border-top:1px solid var(--line); opacity:.9; font-size:14px;
}

/* back to top */
.to-top{
  position:fixed; right:16px; bottom:16px;
  padding:10px 12px; border-radius:999px; border:1px solid var(--line);
  background:#111; color:var(--gold); font-weight:700; letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; transform:translateY(8px); z-index:50;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:focus{ outline:2px solid var(--gold); outline-offset:2px; }

/* ==== Intro block alignment ==== */
.home-page .intro-luxe,
.home-page .intro-luxe .intro-heading,
.home-page .intro-luxe .intro-kicker,
.home-page .intro-luxe .intro-copy{ text-align:center; }
.home-page .intro-luxe .intro-heading{ color:var(--gold); font-family:"Cinzel",serif; font-weight:800; }
.home-page .intro-luxe .intro-kicker,
.home-page .intro-luxe .intro-copy{ color:var(--ink); opacity:.95; margin-left:auto; margin-right:auto; }
.home-page .intro-luxe .accent{ color:var(--gold); }

/* ===================================
   RATING (single, centered)
=================================== */
.collection-stack .coat-card .coat-rating{ height:var(--rating-h); align-self:center; margin:2px auto 0; }

.coat-rating.stars{
  display:inline-block;
  position:relative;
  font-size:clamp(12px,3.6vw,16px);
  line-height:1;
  letter-spacing:2px;
  width:auto;
  text-align:center;
}

/* subtle base stars */
.coat-rating.stars::before{
  content:"★★★★★";
  color:#1e1e1e;
  opacity:.28;
}

/* gold overlay clipped to percentage */
.coat-rating.stars::after{
  content:"★★★★★";
  color:var(--gold);
  text-shadow:0 0 3px rgba(var(--gold-rgb), .18);
  position:absolute; inset:0 auto 0 0;
  width:calc((var(--rating) / 5) * 100%);
  overflow:hidden; white-space:nowrap; pointer-events:none;
}

/* spacing guard so price never collides */
.collection-stack .coat-card .coat-price{ margin-top:2px; min-height:20px; }

/* === Desktop swiper gutter: a bit closer, still fully visible === */
@media (min-width: 769px){
  .occasion-section .coat-swiper{
    padding-left: 20px;
    padding-right: 20px;
  }
  .coat-swiper .swiper-button-prev{ left: 0px; }
  .coat-swiper .swiper-button-next{ right: 0px; }
  .coat-swiper::before,
  .coat-swiper::after{ width: 40px; }
}

/* ===================================
   MADE-TO-MEASURE BANNER
=================================== */
.mtm-banner{
  max-width:1100px;
  margin: 8px auto 14px;
  text-align:center;
  padding-inline: 10px;
}
.mtm-line{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  column-gap:.65rem; row-gap:.28rem;
  padding:.5rem .9rem;
  border:1px solid color-mix(in oklab, var(--gold) 42%, transparent);
  border-radius:999px;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--gold) 12%, transparent), transparent 60%);
  font-size:clamp(.80rem, .74rem + .30vw, 1rem);
  line-height:1.35; color:#fff;
}
.mtm-kicker{ font-weight:800; color:var(--gold); letter-spacing:.02em; }
.mtm-divider{ width:1px; height:1.1em; background: color-mix(in oklab, var(--gold) 55%, transparent); opacity:.45; }
.mtm-copy{ white-space:normal; }
.mtm-cta{
  padding:0 4px; margin-left:auto; text-decoration:none;
  border-bottom:1px dotted color-mix(in oklab, var(--gold) 60%, transparent);
  color:var(--gold); font-weight:600; line-height:1.2;
}
.mtm-cta:hover{ opacity:.85; }
@media (min-width: 992px){ .mtm-line{ padding:.55rem 1rem; } }
@media (max-width: 540px){
  .mtm-banner{ margin: 8px auto 12px; }
  .mtm-line{ border-radius:16px; }
  .mtm-divider{ display:none; }
  .mtm-cta{ margin-left:0; order:3; font-size:.9em; }
}
/* Desktop: force “How it works” onto its own centered line */
@media (min-width: 992px){
  .mtm-line{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:.6rem; row-gap:.3rem; }
  .mtm-cta{ flex-basis:100%; text-align:center; margin-top:.1rem; }
}


/* ---- Anchor the header so absolutely-positioned button uses it ---- */
.main-header .header-inner { position: relative; }

/* bottom-left placement with a small, responsive drop */
.ms-hamburger-wrapper{
  position: absolute;
  left: 12px;                         /* left edge */
  bottom: clamp(6px, 1.1vh, 14px);    /* a little lower, scales by screen height */
  z-index: 60;
}

.ms-hamburger-btn{
  display:inline-grid; place-items:center;
  width:42px; height:38px; border-radius:10px;
  background:rgba(17,17,17,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid color-mix(in oklab, var(--gold) 48%, transparent);
  color:var(--gold);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:background .2s ease, border-color .2s ease, transform .1s ease;
}
.ms-hamburger-btn i{ font-size:1.25rem; }
.ms-hamburger-btn:hover{ background:rgba(20,20,20,.98); }
.ms-hamburger-btn:active{ transform:translateY(1px); }
.ms-hamburger-btn:focus-visible{
  outline:2px solid color-mix(in oklab, var(--gold) 50%, transparent);
  outline-offset:2px;
}

/* ---- Panel (glass + shadow) ---- */
.ms-hamburger-panel{
  position:fixed; inset:0 auto 0 0;
  width:min(86vw, 280px);
  background:rgba(15,15,15,.82);
  color:var(--ink);
  border-right:1px solid color-mix(in oklab, var(--gold) 28%, var(--line));
  transform:translateX(-100%);
  transition:transform .28s ease;
  padding:18px 16px 24px;
  overflow:auto; z-index:80;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:8px 0 24px rgba(0,0,0,.35);
}
body.ms-nav-open .ms-hamburger-panel{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .ms-hamburger-panel{ transition:none; } }

/* ---- Close button ---- */
.ms-close-btn{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:10px;
  background:rgba(17,17,17,.95); color:var(--gold);
  border:1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  display:inline-grid; place-items:center; cursor:pointer;
}
.ms-close-btn:hover{ background:#151515; }
.ms-close-btn:focus-visible{
  outline:2px solid color-mix(in oklab, var(--gold) 50%, transparent);
  outline-offset:2px;
}

/* ---- Menu typography ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&display=swap');

.ms-hamburger-nav{
  margin-top:44px;
  display:flex; flex-direction:column;
  gap:16px;                    /* wider breathing space */
}

/* ---- Menu links (text in smoked brass) ---- */
.ms-hamburger-nav a{
  font-family:"Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-size:.98rem;
  letter-spacing:.02em;
  line-height:1.12;
  color:var(--gold);           /* smoked brass text */
  padding:12px 14px;
  min-height:48px;
  border-radius:12px;

  background:
    linear-gradient(#0f0f0f,#0f0f0f) padding-box,
    linear-gradient(135deg, rgba(var(--gold-rgb),.25), rgba(var(--gold-rgb),.10)) border-box;
  border:1.4px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.20);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  display:flex; align-items:center; gap:12px;
}

/* Icon badge */
.ms-hamburger-nav a i{
  width:28px; height:28px;
  display:inline-grid; place-items:center;
  border-radius:8px;
  font-size:1rem;
  color:var(--gold);
  background:rgba(var(--gold-rgb), .10);
  border:1px solid color-mix(in oklab, var(--gold) 38%, transparent);
}

/* Hover / tap */
.ms-hamburger-nav a:hover,
.ms-hamburger-nav a:active{
  color:var(--gold-hi);  /* slight lift on hover */
  background:
    linear-gradient(#121212,#121212) padding-box,
    linear-gradient(135deg, var(--gold-2), var(--gold)) border-box;
  transform:translateX(4px);
}

/* Focus ring */
.ms-hamburger-nav a:focus-visible{
  outline:2px solid color-mix(in oklab, var(--gold) 55%, transparent);
  outline-offset:2px;
}

/* Optional active page */
.ms-hamburger-nav a[aria-current="page"]{
  color:var(--gold-hi);
  background:
    linear-gradient(#121212,#121212) padding-box,
    linear-gradient(135deg, var(--gold-2), var(--gold)) border-box;
}

/* CTA harmonized */
.ms-hamburger-nav .ms-cta{
  justify-content:center;
  color:var(--gold);
  padding:12px 14px;
  border:1.6px solid transparent;
  background:
    linear-gradient(#111,#111) padding-box,
    linear-gradient(135deg, var(--gold-2), var(--gold-hi)) border-box;
}

/* ---- Overlay: blurred, click-to-close, scroll-through ---- */
.ms-hamburger-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:70;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;        /* page stays scrollable */
}
body.ms-nav-open .ms-hamburger-overlay{
  opacity:1;
  pointer-events:auto;        /* enables outside click to close */
  cursor:pointer;
}

/* tiny nudge for very small phones */
@media (max-width: 480px){
  .ms-hamburger-wrapper{
    left: 10px;
    bottom: 8px;                      /* slightly closer to bottom edge */
  }
}

/* optional: give it a hair more drop on big, tall headers */
@media (min-width: 1440px){
  .ms-hamburger-wrapper{ bottom: 12px; }
}


/* ================================
   ACTION DOCK (Maple quick actions)
================================ */
.ms-action-dock{
  position:fixed; left:50%; bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(720px, calc(100% - 20px));
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
  padding:8px;
  background:rgba(15,15,15,.82);
  border:1px solid color-mix(in oklab, var(--gold) 30%, var(--line));
  border-radius:16px;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  z-index:60;
  transition:opacity .22s ease, transform .22s ease;
}
.ms-action-dock[data-hide="1"]{ opacity:.0; pointer-events:none; transform:translate(-50%, 10px); }

.dock-btn{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:44px; text-decoration:none; color:var(--ink);
  border-radius:12px; outline:none;
}
.dock-btn i{ font-size:22px; color:var(--gold); line-height:1; }
.dock-btn .dock-label{ font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--muted); }
.dock-btn:hover .dock-label{ color:var(--gold); }
.dock-btn:focus-visible{ outline:2px solid rgba(var(--gold-rgb), .45); outline-offset:2px; }

/* Badge (mobile) */
.dock-badge{
  position:absolute; top:4px; right:10px;
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; line-height:1;
  color:#000; background:var(--gold);
  border-radius:999px; box-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Create breathing room so content isn't hidden under dock */
@media (max-width: 900px){
  body{ padding-bottom:72px; }
}

/* DESKTOP SIDE DOCK */
.ms-side-dock{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px;
  z-index:60;
}
.side-btn{
  position:relative;
  width:46px; height:46px; display:inline-grid; place-items:center;
  color:var(--ink); text-decoration:none; border-radius:12px; outline:none;
  background:linear-gradient(#111,#111) padding-box,
             linear-gradient(135deg, var(--gold-2), var(--gold)) border-box;
  border:1.4px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  transition:transform .1s ease, background .2s ease;
}
.side-btn i{ font-size:20px; color:var(--gold); }

/* Tooltip */
.side-btn .dock-tip{
  position:absolute; right:54px; top:50%; transform:translateY(-50%);
  background:rgba(15,15,15,.92);
  border:1px solid color-mix(in oklab, var(--gold) 35%, transparent);
  color:var(--gold); font-weight:800; font-size:12px; letter-spacing:.02em;
  padding:6px 10px; border-radius:10px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.side-btn:hover .dock-tip,
.side-btn:focus-visible .dock-tip{ opacity:1; transform:translate(-2px, -50%); }

/* Badge (desktop) */
.side-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; line-height:1;
  color:#000; background:var(--gold);
  border-radius:999px; box-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Show/hide per viewport */
@media (min-width: 901px){
  .ms-action-dock{ display:none; }
}
@media (max-width: 900px){
  .ms-side-dock{ display:none; }
}

/* Avoid collision with existing “to-top” button on mobile */
@media (max-width: 900px){
  .to-top{ right:auto; left:16px; bottom:calc(82px + env(safe-area-inset-bottom)); }
}

/* floor glow behind dock */
.ms-action-dock::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-8px; height:14px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.45), transparent 70%);
  pointer-events:none;
}
/* XS screens: icon-only */
@media (max-width:360px){
  .ms-action-dock .dock-label{ display:none; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ms-action-dock{ transition:none; }
  .ms-action-dock[data-hide]{ transform:translateX(-50%); opacity:1; }
}


/* ===== Quick Actions — compact, aligned, high-contrast ===== */

:root{
  --ms-gold: var(--gold, #b6945a);
  --ms-ink:  #e7e7e7;
}

/* Lock image frame so overlays never affect layout */
.coat-image{
  position:relative;
  aspect-ratio: 4 / 5.5;
  overflow:hidden;
  border-radius:8px;
  background:#0b0b0b;

  /* Quick-actions tuning (controls BOTH buttons) */
  --qa-edge: clamp(8px, 2.4vw, 12px);
  --qa-size: 28px;
  --qa-icon: 13px;
}
@media (max-width:480px){
  .coat-image{ aspect-ratio: 4 / 6; }
}
@media (min-width:480px){
  .coat-image{ --qa-size: 34px; --qa-icon: 16px; }
}
@media (min-width:768px){
  .coat-image{ --qa-size: 40px; --qa-icon: 18px; }
}

/* Frame + image fit */
.gold-frame{
  background:
    linear-gradient(#0b0b0b,#0b0b0b) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.60), rgba(223,206,173,.40), rgba(255,255,255,.10)) border-box;
  border:1px solid transparent;
}
.gold-frame img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Overlay root */
.coat-quick{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:2;
}

/* Buttons: small circular jewels */
.btn-heart, .btn-share{
  pointer-events:auto;
  width:var(--qa-size); height:var(--qa-size);
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(10,10,10,.56);      /* visible on light fabrics */
  color:var(--ms-gold);
  box-shadow:0 8px 18px rgba(0,0,0,.32);
  border:none;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, opacity .2s ease;
  touch-action:manipulation;
}
.btn-heart i, .btn-share i{ font-size:var(--qa-icon); line-height:1; }

/* Heart (top-right) uses absolute; Share is anchored by its wrap (bottom-right) */
.btn-heart{
  position:absolute;
  top:var(--qa-edge);
  right:var(--qa-edge);
}
.share-wrap{
  position:absolute;
  right:var(--qa-edge);
  bottom:var(--qa-edge);
  z-index:5;
  pointer-events:auto;
}
.btn-share{ position:relative; }

.btn-heart:hover, .btn-share:hover{ background:rgba(10,10,10,.64); }
.btn-heart:active, .btn-share:active{ transform:scale(.96); }
.btn-heart.is-active{ background:rgba(182,148,90,.22); color:var(--ms-gold); }

/* Keyboard focus */
.btn-heart:focus-visible, .btn-share:focus-visible{
  outline:2px solid color-mix(in oklab, var(--ms-gold) 70%, #ffffff 0%);
  outline-offset:2px;
}

/* Popover (sits just above the share button) */
.share-popover{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  min-width:180px;
  background:rgba(10,10,10,.92);
  border:1px solid color-mix(in oklab, var(--ms-gold) 38%, transparent);
  border-radius:12px; padding:6px;
  box-shadow:0 14px 30px rgba(0,0,0,.46);
}
.share-popover[hidden]{ display:none !important; }

.share-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px;
  color:var(--ms-ink); font-weight:600; letter-spacing:.01em;
  cursor:pointer; user-select:none;
}
.share-item i{ color:var(--ms-gold); width:18px; text-align:center; }
.share-item:hover{ background:#121212; color:var(--ms-gold); }



/* ===== Premium Empty Wishlist ===== */
:root{
  --ms-gold: #c9a04f;
  --ms-gold-soft: rgba(201,160,79,.26);
}

/* The empty state card */
.ms-wishlist-empty{
  box-sizing: border-box;
  text-align:center;
  padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 32px);
  border-radius: 20px;
  outline: 1px solid var(--ms-gold-soft);
  outline-offset: -6px;
  background:
    radial-gradient(800px 220px at 50% -10%, rgba(201,160,79,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%);
  max-width: 980px;         /* keeps it elegant, not full-bleed */
  margin: 24px auto;        /* centers inside the wishlist panel */
}

.ms-wl-hero{ 
  max-width: 820px; margin: 0 auto clamp(16px, 3.2vw, 28px);
}

.ms-wl-title{
  font-family: "Cinzel", serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(26px, 4.2vw, 40px);
  color: #fff;
  margin: 0 0 .25em;
}

.ms-wl-sub{
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 22px);
  color: var(--ms-gold);
  margin: 0 0 .35em;
}

.ms-wl-note{
  font-family: "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(13px, 1.8vw, 16px);
  color: rgba(255,255,255,.75);
  letter-spacing: .01em;
  margin: 0;
}

/* Optional image styling if you use the hero artwork */
.ms-wl-hero-img{
  display:block;
  width: clamp(220px, 35vw, 360px);
  margin: 0 auto 12px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
  border-radius: 12px;
}

/* Buttons */
.ms-wl-ctas{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top: clamp(16px, 3vw, 28px);
}
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--ms-gold-soft);
  color:#fff; text-decoration:none; font-size:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.0));
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.btn-pill:hover{ transform:translateY(-1px); border-color: var(--ms-gold); }

/* Keep your toolbar on top in case of fancy backgrounds */
.wishlist-toolbar{ position: relative; z-index: 2; }

/* Safety: if items exist, never show the empty state */
.wishlist-has-items .ms-wishlist-empty{ display:none !important; }

/* Safety: the empty panel is hidden by default (JS will unhide only if empty) */
.ms-wishlist-empty[hidden]{ display:none !important; }

/* Category pills — match index style */
.cat-pill{
  --ring: rgba(201,160,79,.28);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 18px;
  border-radius: 999px;
  border:1px solid var(--ms-gold);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.0));
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:#fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-pill i{ color: var(--ms-gold); }
.cat-pill:hover{ transform: translateY(-1px); box-shadow: 0 0 0 3px var(--ring) inset; }
.cat-pill:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--ring); }

/* First pill “active” look (as in your screenshot) */
.cat-pill.is-selected{
  color: var(--ms-gold);
}

/* Layout inside the empty state */
.ms-wl-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Let image clicks reach the .coat-link while keeping heart/share clickable */
.coat-card .coat-image .coat-quick { pointer-events: none !important; }
.coat-card .coat-image .coat-quick .btn-heart,
.coat-card .coat-image .coat-quick .btn-share,
.coat-card .coat-image .coat-quick .share-popover { pointer-events: auto !important; }









/* ===============================
   MAPLE — Highlight patch (colors only)
   (unchanged from yours)
   =============================== */

:root{
  --ms-title:#e7c98a;      /* champagne gold for names */
  --ms-desc:#d5c6a6;       /* warm ivory for description */
  --ms-pill-1:#f5d593;     /* price pill gradient top */
  --ms-pill-2:#e9c47f;     /* price pill gradient bottom */
  --ms-pill-stroke:#d7b066;/* pill border */
  --ms-pill-ink:#111;      /* pill text */
}

.coat-title-link{
  color:var(--ms-title,#e7c98a);
  text-decoration:none;
  text-shadow:0 0 10px rgba(231,201,138,.10),0 0 2px rgba(231,201,138,.20);
}
.coat-title-link:hover,
.coat-title-link:focus-visible{
  color:var(--ms-title,#e7c98a);
  filter:brightness(1.05);
  outline:none;
}

/* ===== Description (unchanged color; clamped via tokens below) ===== */
.coat-desc{ color:var(--ms-desc,#d5c6a6); opacity:.95; }

/* ===== Price (colors kept; size handled later) ===== */
.coat-price-line{
  color:var(--ms-pill-ink,#111);
  background:linear-gradient(180deg,var(--ms-pill-1,#f5d593),var(--ms-pill-2,#e9c47f));
  border:1px solid var(--ms-pill-stroke,#d7b066);
  border-radius:10px;
  padding:8px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px rgba(0,0,0,.35);
}
.coat-price-line:hover{ filter:brightness(1.06); }
.coat-link:focus-visible,
.coat-title-link:focus-visible{ outline:2px solid rgba(231,201,138,.55); outline-offset:2px; border-radius:6px; }

/* ===== Description line clamp defaults ===== */
:root{
  --ms-desc-lines:4;
  --ms-desc-lh:1.45;
  --ms-desc-fs:clamp(13px,2.5vw,15px);
  --ms-desc-wt:500;
}
.view-all,
[data-view="all"]{
  --ms-desc-lines:6;
  --ms-desc-lh:1.5;
  --ms-desc-fs:clamp(12px,2.2vw,14px);
  --ms-desc-wt:400;
}
.view-all .coat-card,
[data-view="all"] .coat-card{
  grid-template-rows:auto minmax(2.4em,auto) auto auto;
  overflow:visible;
}
.coat-desc{
  font-weight:var(--ms-desc-wt);
  font-size:var(--ms-desc-fs);
  line-height:var(--ms-desc-lh);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--ms-desc-lines);
  max-height:calc(var(--ms-desc-lh)*1em*var(--ms-desc-lines));
  overflow:hidden; word-break:break-word;
}
.coat-desc strong{ font-weight:600; }

/* ===============================
   NAME — visibility + alignment (NEW)
   =============================== */

/* Tokens for name sizing & rhythm */
:root{
  --ms-name-lines:2;                          /* exactly 2 visible lines */
  --ms-name-lh:1.18;                          /* title line-height */
  --ms-name-fs:clamp(14px,2.4vw,18px);        /* slightly smaller on small screens */
  --ms-name-letter:.4px;                      /* gentle tracking */
}

/* Title block gets the height of exactly 2 lines -> rows align */
.coat-name{
  margin:6px 0 0;
  line-height:var(--ms-name-lh);
  min-height:calc(var(--ms-name-lh) * 1em * var(--ms-name-lines));
  text-align:left;
}

/* Work whether the link has .coat-title-link or is a bare <a> */
.coat-name .coat-title-link,
.coat-name a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--ms-name-lines);
  overflow:hidden; text-overflow:ellipsis;

  font-family:"Cinzel", serif;
  font-weight:800;
  font-size:var(--ms-name-fs);
  letter-spacing:var(--ms-name-letter);
  text-transform:uppercase;
  white-space:normal; text-align:left;

  /* smarter wrapping so 3-word names look balanced */
  overflow-wrap:anywhere; hyphens:auto;
  text-wrap:balance;
  /* color is inherited from your highlight patch */
}

/* Optional helper for rare long names: add class="tight" to <h3> */
.coat-name.tight .coat-title-link,
.coat-name.tight a{
  --ms-name-fs:clamp(13px,2.2vw,17px);
  --ms-name-letter:.2px;
}

/* Desktop: give titles a touch more breathing room */
@media (min-width:1024px){
  .coat-name{ margin-top:8px; }
}

/* ===============================
   PRICE PILL — final polish (from your last message)
   =============================== */

.coat-card .coat-price-line{
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  box-sizing:border-box; width:100%;
  min-height:44px; padding:8px 12px;
  margin-top:-2px; /* kiss the description */
  color:var(--ms-pill-ink,#111);
  background:linear-gradient(180deg,var(--ms-pill-1,#f5d593),var(--ms-pill-2,#e9c47f));
  border:1px solid var(--ms-pill-stroke,#d7b066);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 20px rgba(0,0,0,.35);
  font-family:"Inter Tight",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:800; font-size:clamp(13px,2.6vw,15px); letter-spacing:.2px;
}
.coat-card .coat-price-line .price-note{ font-weight:600; opacity:.9; margin-left:6px; }

@media (min-width:768px){
  .coat-card .coat-price-line{ min-height:46px; font-size:15px; padding:9px 13px; }
}
@media (min-width:1024px){
  .coat-card .coat-price-line{ min-height:50px; font-size:16px; padding:10px 14px; margin-top:0; }
}

/* Safety: hide any legacy price blocks if they still exist anywhere */
.coat-card .coat-price,
.coat-card .price-value{ display:none !important; }

/* Lock image frames so they align across cards, even if an image fails */
.coat-card .coat-image{
  /* identical frame across all occasions */
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  margin: 0 0 10px 0;           /* normalize any weird top margins */
  border-radius: 10px;          /* keeps your gold-frame look tidy */
}

.coat-card .coat-link{
  display: block;               /* anchors fill the frame */
  height: 100%;
  width: 100%;
}

.coat-card .coat-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* consistent crop */
  font-size: 0;                 /* hides giant ALT text on broken images */
  line-height: 0;
}

/* Optional: if any theme CSS adds padding to .gold-frame, neutralize inside cards */
.coat-card .gold-frame { padding: 0; }


/* --- Consistent description height across ALL occasions --- */
:root{
  /* default for sliders */
  --ms-desc-lines: 3;      /* make this 3 (or 4) everywhere */
  --ms-desc-lh: 1.45;
  --ms-desc-block: calc(var(--ms-desc-lines) * var(--ms-desc-lh) * 1em);
}

/* Every card uses the same reserved row height for description */
.occasion-section .coat-card{
  display: grid;
  grid-template-rows:
    auto                     /* image */
    minmax(2.4em, auto)      /* title (up to ~2 lines) */
    var(--ms-desc-block)     /* fixed description slot */
    auto;                    /* price */
  gap: 10px;
}

/* Clamp text to the same number of lines and hide overflow */
.occasion-section .coat-desc{
  margin: 0;                 /* normalize margins so heights match */
  line-height: var(--ms-desc-lh);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ms-desc-lines);
  max-height: var(--ms-desc-block);   /* fallback if clamp unsupported */
  overflow: hidden;
  word-break: break-word;
}

/* Keep title margins consistent (prevents 1–2px drift) */
.occasion-section .coat-name{ margin: 0; }

/* In View-All, show more without breaking alignment (cards expand equally) */
.view-all,
[data-view="all"]{
  --ms-desc-lines: 5;        /* show more lines when user expands */
  --ms-desc-block: calc(var(--ms-desc-lines) * var(--ms-desc-lh) * 1em);
}

/* Optional: let desktop breathe a bit more while staying even */
@media (min-width:1024px){
  :root{
    --ms-desc-lh: 1.5;       /* slightly airier on wide screens */
    /* keep --ms-desc-lines the same unless you want 4 lines on desktop */
  }
}

.coat-name{ margin:0; line-height:1.18; text-transform:uppercase; }
.coat-title-link{
  display:block;
  font-weight:800;
  font-size:clamp(15px,2.6vw,18px);
  letter-spacing:.4px;
  text-decoration:none;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;    /* show up to 2 lines */
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
  hyphens:auto;
}


/* Force labels ON at all mobile widths (beats older rules) */
.ms-action-dock .dock-btn .dock-label,
.ms-action-dock .dock-label{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Make room for icon + label */
.ms-action-dock{ min-height:64px; }
.ms-action-dock .dock-btn{ padding:6px 0 8px; }
.ms-action-dock .dock-btn i{ font-size:20px; line-height:1; }
.ms-action-dock .dock-label{
  font-size:11px; line-height:1.05; letter-spacing:.2px;
  white-space:nowrap;              /* prevent wrap-cutoff */
  color:var(--dock-ink-dim, #bfae86);
}

/* Very small phones (≤360px): shrink a touch more */
@media (max-width:360px){
  .ms-action-dock{ min-height:58px; }
  .ms-action-dock .dock-btn i{ font-size:18px; }
  .ms-action-dock .dock-label{ font-size:10px; letter-spacing:0; }
}

/* Ultra-narrow (≤320px): switch to 2 rows so labels are never cramped */
@media (max-width:320px){
  .ms-action-dock{
    grid-template-columns:repeat(2,1fr);
    row-gap:4px;
    padding-top:6px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  /* lift page so it doesn't sit under the taller dock */
  body{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
}



/* ---------- Bottom dock (centered pill) ---------- */
.ms-action-dock{
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  transform: translate(-50%, 100%);          /* hidden by default */
  transition: transform .24s ease;
  width: min(560px, calc(100% - 24px));      /* gutters on small screens */
  background: #0b0b0b;
  border-radius: 16px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
}
.ms-action-dock.dock--shown{ transform: translate(-50%, 0); }

/* only reserve space when bar is shown */
html.dock-open body{ padding-bottom: calc(var(--dock-h, 64px) + 8px); }

/* keep visible while interacting (keyboard/focus) */
.ms-action-dock:focus-within{ transform: translate(-50%, 0); }

/* Buttons: column layout, consistent hit area */
.ms-action-dock .dock-btn{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #f6f6f6;
  padding: 6px 10px;
  min-width: 64px;             /* prevents squish */
}

/* Icon & label sizes locked (prevents “tiny icon” issue) */
.ms-action-dock .dock-btn i{ font-size: 22px; line-height: 1; }
.ms-action-dock .dock-label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.1;
  white-space: nowrap;
}

/* Badges stay readable */
.ms-action-dock .dock-badge{
  position: absolute; transform: translate(12px, -6px);
  background:#e43; color:#fff; font-size:11px; font-weight:700;
  border-radius: 999px; padding: 2px 6px;
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .ms-action-dock{ transition: none; }
}

/* --- visibility by viewport --- */
.ms-action-dock{ display:flex; }           /* mobile default */
.ms-side-dock{ display:none; }

@media (min-width:1024px){
  .ms-action-dock{ display:none !important; } /* hide bottom bar on desktop */
  .ms-side-dock{ display:flex; }              /* show right-side dock on desktop */
}

/* center pill + sizing (same as before) */
.ms-action-dock{
  position: fixed; z-index: 10000;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  transform: translate(-50%, 100%);
  transition: transform .24s ease;
  width: min(560px, calc(100% - 24px));
  background:#0b0b0b; border-radius:16px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around; align-items: center; gap: 8px;
}
.ms-action-dock.dock--shown{ transform: translate(-50%, 0); }

/* reserve space ONLY while shown (prevents covering © line) */
@media (max-width:1023px){
  html.dock-open body{
    padding-bottom: calc(var(--dock-h, 64px) + 10px); /* + small breathing room */
  }
}

/* button layout + locked sizes */
.ms-action-dock .dock-btn{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:#f6f6f6; padding:6px 10px; min-width:64px; }
.ms-action-dock .dock-btn i{ font-size:22px; line-height:1; }
.ms-action-dock .dock-label{ font-size:12px; font-weight:600; letter-spacing:.2px; line-height:1.1; white-space:nowrap; }

/* keep visible while interacting */
.ms-action-dock:focus-within{ transform: translate(-50%, 0); }

/* motion safety */
@media (prefers-reduced-motion: reduce){ .ms-action-dock{ transition:none; } }

/* --- Which dock shows where --- */
.ms-action-dock{ display:flex; }            /* mobile default */
.ms-side-dock{ display:none; }

@media (min-width:1024px){
  .ms-action-dock{ display:none !important; } /* bottom dock OFF on desktop */
  .ms-side-dock{ display:flex; }              /* right dock ON on desktop */
}

/* --- Bottom dock: centered floating pill --- */
.ms-action-dock{
  position: fixed; z-index: 10000;
  left: 50%; right: auto;
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  transform: translate(-50%, 100%);          /* hidden state */
  transition: transform .24s ease;
  width: min(560px, calc(100% - 24px));
  background:#0b0b0b; border-radius:16px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  display:flex; justify-content:space-around; align-items:center; gap:8px;
}
.ms-action-dock.dock--shown{ transform: translate(-50%, 0); }

/* Reserve space ONLY while the dock is shown (prevents footer overlap) */
@media (max-width:1023px){
  html.dock-open body{
    padding-bottom: calc(var(--dock-h, 64px) + 12px) !important;
  }
  /* Extra safety if your footer has its own bottom spacing rules */
  html.dock-open footer,
  html.dock-open #site-footer{
    margin-bottom: calc(var(--dock-h, 64px) + 12px) !important;
  }
  /* Avoids anchor/jump links landing under the dock */
  html{ scroll-padding-bottom: calc(var(--dock-h, 64px) + 12px); }
}

/* Buttons + icon sizes stay consistent */
.ms-action-dock .dock-btn{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  gap:4px; text-decoration:none; color:#f6f6f6; padding:6px 10px; min-width:64px;
}
.ms-action-dock .dock-btn i{ font-size:22px; line-height:1; }
.ms-action-dock .dock-label{ font-size:12px; font-weight:600; letter-spacing:.2px; line-height:1.1; white-space:nowrap; }

/* Keep visible while user is interacting with it */
.ms-action-dock:focus-within{ transform: translate(-50%, 0); }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .ms-action-dock{ transition:none; }
}





/* Mobile-only bottom action dock: centered pill (no layout impact) */
.ms-action-dock{
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  background: #0b0b0b;
  border-radius: 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  z-index: 1000;
  transition: transform .2s ease, opacity .2s ease;
  will-change: transform, opacity;
}

.ms-action-dock.is-hidden{
  transform: translate(-50%, calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
}

/* labels small but always on */
.ms-action-dock .dock-label{
  display: block;
  font-size: 12px;
  line-height: 1;
}

/* spacer reserves space only when needed (height set via JS) */
.ms-dock-spacer{ height: 0; }

/* hide bottom dock entirely on desktop — you already have the right-side dock there */
@media (min-width:1024px){
  .ms-action-dock{ display:none; }
}

<style>
  /* Re-enable price text inside the new pill */
  .coat-card .coat-price-line .price-value,
  .coat-card .coat-price-line .price-amount { display:inline !important; }
</style>


/* ===============================
   NAME — alignment + consistency
   =============================== */
:root{
  --ms-name-lines:2;
  --ms-name-lh:1.18;
  --ms-name-fs:clamp(14px,2.4vw,18px);
  --ms-name-letter:.4px;
}

.coat-name{
  margin:6px 0 0;
  line-height:var(--ms-name-lh);
  min-height:calc(var(--ms-name-lh) * 1em * var(--ms-name-lines));
  text-align:left;
}

.coat-name .coat-title-link,
.coat-name a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--ms-name-lines);
  overflow:hidden; text-overflow:ellipsis;

  font-family:"Cinzel", serif;
  font-weight:800;
  font-size:var(--ms-name-fs);
  letter-spacing:var(--ms-name-letter);
  text-transform:uppercase;
  white-space:normal; text-align:left;

  overflow-wrap:anywhere; hyphens:auto;
  text-wrap:balance;
}

.coat-title-link{
  color:var(--ms-title,#e7c98a);
  text-decoration:none;
  text-shadow:0 0 10px rgba(231,201,138,.10),0 0 2px rgba(231,201,138,.20);
}
.coat-title-link:hover,
.coat-title-link:focus-visible{
  color:var(--ms-title,#e7c98a);
  filter:brightness(1.05);
  outline:none;
}