/* ==========================================================================
   MODE XV | POLISH LAYER
   Loads AFTER styles.css and typography.css. Visual refinements only:
   no class names, markup or behavior from script.js are changed.
   To go back to the old look, delete the <link> to this file.
   ========================================================================== */

:root{
  --xv-gold:#a88f62;
  --xv-gold-deep:#8a7248;
  --xv-gold-soft:#c5b7a3;
  --xv-warm:#f6f3ed;
  --xv-card:#fffdfa;
  --xv-edge:#e6dfd2;
  --xv-ink:#1d1c1b;
  --xv-ease:cubic-bezier(.22,1,.36,1);
}
:root{background:#0b0b0c}
body{background:var(--xv-warm);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#d9c9a8;color:#1d1c1b}

/* ---------- Top bar and header ---------- */
.site-chrome{background:#151617}
.announcement{background:linear-gradient(90deg,#141516,#2a2b2e 50%,#141516);border-bottom:1px solid #3c3d40}
.site-header,.site-chrome.scrolled .site-header{background:radial-gradient(ellipse at 50% 0%,rgba(190,190,190,.14),transparent 70%),linear-gradient(110deg,#151617,#303133 50%,#171819)}
.site-chrome.scrolled .site-header{background:radial-gradient(ellipse at 50% 0%,rgba(190,190,190,.14),transparent 70%),linear-gradient(110deg,rgba(21,22,23,.94),rgba(48,49,51,.94) 50%,rgba(23,24,25,.94))}
@media(max-width:700px){.site-header nav{background:linear-gradient(160deg,#1b1c1e,#2a2b2e);border-top-color:#3c3d40}}
.announcement-group i{color:#b9a27a;opacity:1}
.site-chrome{position:sticky}
.site-chrome::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#8a7248,#d9c9a8 50%,#a88f62);transform:scaleX(var(--xv-scroll,0));transform-origin:left;pointer-events:none;z-index:2}
.site-chrome.scrolled .site-header{box-shadow:0 10px 30px rgba(0,0,0,.28)}
.site-header nav a{position:relative;padding-block:6px}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--xv-gold-soft);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--xv-ease)}
.site-header nav a:hover{text-decoration:none}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{transform:scaleX(1)}
.cart-toggle{border-radius:50%;transition:background .25s ease,transform .25s var(--xv-ease)}
.cart-toggle:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
@media(max-width:700px){
  .site-header nav a::after{display:none}
  .site-header nav a{padding-block:13px;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-header nav a:last-child{border-bottom:0}
}

/* ---------- Hero ---------- */
.campaign-hero{isolation:isolate}
.campaign-hero .hero-controls{z-index:4}
/* Hero photos stay still: slides only cross-fade, with no zoom. */
.campaign-hero .campaign-image,.campaign-hero .campaign-image.active{animation:none;transform:none}
@media(max-width:600px){
  /* Fill the full width (no side strips). Slide 2 keeps its bottom edge so the tagline stays visible. */
  .campaign-hero picture .campaign-image{object-fit:cover!important;object-position:50% 70%!important;width:100%!important;background:transparent}
  .campaign-hero .campaign-image.is-split-art{object-position:50% 100%!important}
  .campaign-hero,.campaign-hero:has(.campaign-image.is-split-art.active){background:#c5bbb1}
}

/* Homepage hero: computers use 2400 × 1000 photos (2.4 : 1, a short banner);
   phones use 1200 × 1500 photos (4 : 5). Slide 2 keeps its bottom edge anchored. */
.campaign-hero{height:clamp(400px,41.667vw,800px)}
@media(min-width:601px) and (max-width:1000px){.campaign-hero{height:41.667vw}}
@media(max-width:600px){.campaign-hero{height:auto;aspect-ratio:4/5}}
.campaign-hero .campaign-image.is-split-art{object-position:50% 100%}

/* ---------- Collection ---------- */
.products.section-wrap{position:relative;max-width:1120px;padding-block:84px 96px;box-shadow:0 0 0 100vmax var(--xv-warm);clip-path:inset(0 -100vmax)}
.products .section-heading{display:block;text-align:center;margin-bottom:46px}
.products .section-heading .eyebrow{display:inline-flex;align-items:center;gap:16px;color:var(--xv-gold-deep)}
.products .section-heading .eyebrow::before,.products .section-heading .eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--xv-gold))}
.products .section-heading .eyebrow::after{transform:scaleX(-1)}
.products .section-heading h2{margin:14px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.04;letter-spacing:-.02em;color:var(--xv-ink)}
.products .section-heading>p{max-width:420px;margin:14px auto 0;font-size:1rem;color:#6b665d}

.products .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:none}
.products .product-card{position:relative;display:flex;flex-direction:column;padding:14px 14px 20px;background:var(--xv-card);border:1px solid var(--xv-edge);border-radius:22px;box-shadow:0 1px 2px rgba(60,48,28,.04),0 14px 34px -18px rgba(60,48,28,.28);transition:transform .45s var(--xv-ease),box-shadow .45s var(--xv-ease),border-color .3s ease}
@media(hover:hover){
  .products .product-card:hover{transform:translateY(-6px);border-color:#d8cdb9;box-shadow:0 2px 4px rgba(60,48,28,.05),0 28px 50px -20px rgba(60,48,28,.38)}
}
.products .product-gallery .product-media{border-radius:15px}
.products .product-category{margin-top:20px;padding-inline:6px;color:var(--xv-gold-deep);font-weight:600}
.products .product-card h2{margin:8px 0 8px;padding-inline:6px;color:var(--xv-ink)}
.products .review-chip{margin-inline:6px}
.products .product-purchase{margin:10px 6px 4px}
.products .product-purchase .price{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.products .product-description{margin:6px 6px 0!important;max-width:none!important;color:#5f5a52}

.products .quick-add{background:var(--xv-ink);border-color:var(--xv-ink);color:#fff;box-shadow:0 8px 18px -6px rgba(29,28,27,.55);transition:background .25s ease,transform .3s var(--xv-ease),box-shadow .3s ease}
.products .quick-add:hover{background:#4a3f2c;border-color:#4a3f2c;transform:translateY(-2px) scale(1.04);box-shadow:0 12px 22px -8px rgba(74,63,44,.6)}
.products .quick-add:active{transform:scale(.96)}
.products .quick-add .add-bag-count{background:var(--xv-gold-soft);color:#1b1b1b}
.products .quick-add:focus-visible,.products .quick-remove:focus-visible{outline:2px solid var(--xv-gold);outline-offset:3px}
.products .quick-remove{border-color:var(--xv-card)}

/* ---------- Trust strip ---------- */
.benefits.trust-strip{background:#fbf9f4;border-top:1px solid var(--xv-edge);border-bottom:1px solid var(--xv-edge);padding-block:34px}
.trust-strip .benefit{border-color:#e0d6c3}
.trust-strip .benefit-symbol{color:var(--xv-gold-deep);width:38px;height:38px}
.trust-strip h2{font-weight:600;color:var(--xv-ink)}

/* ---------- Films ---------- */
.styled{background:radial-gradient(60% 55% at 50% 0%,rgba(197,183,163,.13),transparent 72%),#0b0c0c;border-top:0;padding-top:30px}
.styled .section-wrap{border-top:1px solid rgba(197,183,163,.3)}
.styled-masthead{color:#b4a98f}
.styled-intro{padding-block:34px 36px}
.styled .video-grid{max-width:1180px}
.styled .mode-player{border-radius:16px;border-color:rgba(197,183,163,.22);box-shadow:0 30px 60px -24px rgba(0,0,0,.8);transition:border-color .4s ease,box-shadow .4s ease}
@media(hover:hover){.styled .mode-player:hover{border-color:rgba(197,183,163,.55)}}
.styled-caption{color:#b4a98f}

/* ---------- Footer ---------- */
.brand-footer{--ft-gold:#d4b67c;--ft-gold-soft:#e9dcbd;--ft-text:#ebe4d6;--ft-dim:#c4bbab;position:relative;isolation:isolate;overflow:hidden;color:#f5f2ec;border-top:0;background:radial-gradient(60% 50% at 0% 0%,rgba(212,182,124,.26),transparent 70%),radial-gradient(50% 60% at 100% 100%,rgba(176,124,56,.34),transparent 72%),radial-gradient(40% 35% at 55% 40%,rgba(120,98,70,.12),transparent 70%),linear-gradient(170deg,#25221e 0%,#18181a 38%,#111214 70%,#0b0b0c 100%)}
.brand-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ft-gold) 50%,transparent)}
.brand-footer::after{content:"XV";position:absolute;z-index:-1;right:-.04em;bottom:-.28em;font-family:var(--font-display,Georgia,serif);font-size:clamp(14rem,26vw,24rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(217,201,168,.07);pointer-events:none}
.brand-footer .mx-subscribe{margin-bottom:8px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.brand-footer .footer-upper{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);padding-block:clamp(48px,6vw,72px) clamp(40px,5vw,56px)}
.brand-footer .footer-upper .footer-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.brand-footer .footer-upper .footer-sr::after{display:none}
.brand-footer .footer-upper h2{position:relative;margin:4px 0 20px;padding-bottom:12px;font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ft-gold)}
.brand-footer .footer-upper h2::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:1px;background:linear-gradient(90deg,var(--ft-gold),transparent)}
.brand-footer .footer-upper p{color:var(--ft-text);line-height:1.65}
.brand-footer .footer-upper p+p{margin-top:14px}
.brand-footer .footer-logo{width:190px;margin:0 0 18px}
.brand-footer .footer-logo img{filter:none;mix-blend-mode:normal;opacity:.95;transition:opacity .3s ease}
.brand-footer .footer-logo:hover img{opacity:1}
.brand-footer .footer-about p{max-width:400px}
.brand-footer .footer-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.brand-footer .footer-trust li{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border:1px solid rgba(217,201,168,.26);border-radius:999px;background:rgba(255,255,255,.06);color:#f5efe2;font-size:.78rem;white-space:nowrap}
.brand-footer .footer-trust svg{width:16px;height:16px;color:var(--ft-gold)}
.brand-footer .footer-upper nav a{position:relative;display:block;width:fit-content;margin:0 0 12px;color:var(--ft-text);text-decoration:none;transition:color .25s ease,transform .35s var(--xv-ease)}
.brand-footer .footer-upper nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--ft-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--xv-ease)}
.brand-footer .footer-upper nav a:hover{color:#fff;text-decoration:none;transform:translateX(4px)}
.brand-footer .footer-upper nav a:hover::after{transform:scaleX(1)}
.brand-footer .footer-support strong{color:#f5f2ec;font-weight:600}
.brand-footer .footer-support a{color:var(--ft-text);text-decoration:none}
.brand-footer .footer-mail{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 11px;border:1px solid rgba(217,201,168,.24);border-radius:999px;background:rgba(255,255,255,.04);color:#f5f2ec!important;transition:border-color .3s ease,background .3s ease}
.brand-footer .footer-mail svg{width:17px;height:17px;color:var(--ft-gold)}
.brand-footer .footer-mail:hover{border-color:var(--ft-gold);background:rgba(212,182,124,.1);text-decoration:none}
/* Social buttons in each brand's own colors */
.brand-footer .footer-socials{display:flex;gap:12px;margin-top:22px}
.brand-footer .footer-socials a{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -12px rgba(0,0,0,.8);transition:transform .4s var(--xv-ease),box-shadow .4s ease}
.brand-footer .footer-socials svg{width:22px;height:22px}
.brand-footer .footer-socials .social-facebook{background:#1877f2}
.brand-footer .footer-socials .social-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.brand-footer .footer-socials .social-tiktok{background:#010101;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 22px -12px rgba(0,0,0,.8)}
.brand-footer .footer-socials a:hover{color:#fff;transform:translateY(-4px) scale(1.05)}
.brand-footer .footer-socials .social-facebook:hover{box-shadow:0 14px 28px -10px rgba(24,119,242,.75)}
.brand-footer .footer-socials .social-instagram:hover{box-shadow:0 14px 28px -10px rgba(214,36,159,.7)}
.brand-footer .footer-socials .social-tiktok:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),-4px 10px 24px -10px rgba(37,244,238,.6),4px 14px 24px -10px rgba(254,44,85,.6)}
.brand-footer .footer-socials a:focus-visible,.brand-footer .footer-top:focus-visible,.brand-footer .footer-policy:focus-visible{outline:2px solid var(--ft-gold);outline-offset:3px}
/* Bottom bar */
.brand-footer .footer-lower{position:relative;background:rgba(0,0,0,.28);border-top:0}
.brand-footer .footer-lower::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,201,168,.35) 20%,rgba(217,201,168,.35) 80%,transparent)}
.brand-footer .footer-lower-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;min-height:88px}
.brand-footer .footer-lower-inner>.xv-pop,.brand-footer .footer-lower-inner>.footer-policy{grid-column:2;grid-row:1;justify-self:center}
.brand-footer .footer-lower-inner>.footer-copyright{grid-column:1;grid-row:1;justify-self:start}
.brand-footer .footer-end{display:flex;align-items:center;gap:18px;grid-column:3;grid-row:1;justify-self:end}
.brand-footer .footer-copyright{color:var(--ft-dim);font-size:.88rem}
.brand-footer .footer-policy{position:relative;color:#fff;font-size:.92rem;font-weight:500;letter-spacing:.02em;text-decoration:none}
.brand-footer .footer-policy::before{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:linear-gradient(90deg,transparent,var(--ft-gold),transparent);transform:scaleX(.4);opacity:.6;transition:transform .45s var(--xv-ease),opacity .3s ease}
.brand-footer .footer-policy:hover::before,.brand-footer .xv-pop:has(.is-open) .footer-policy::before{transform:scaleX(1);opacity:1}
.brand-footer .footer-secure{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border:1px solid transparent;border-radius:999px;background:linear-gradient(135deg,#17181c,#111215) padding-box,linear-gradient(120deg,rgba(99,91,255,.9),rgba(140,134,255,.4) 45%,rgba(217,201,168,.22)) border-box;box-shadow:0 12px 28px -16px rgba(99,91,255,.7),inset 0 1px 0 rgba(255,255,255,.05)}
.brand-footer .footer-secure-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#8a84ff,#635bff 58%,#4a43d4);color:#fff;box-shadow:0 6px 16px -6px rgba(99,91,255,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.brand-footer .footer-secure-ico svg{width:19px;height:19px}
.brand-footer .footer-secure-text{display:grid;gap:2px;line-height:1.2;text-align:left}
.brand-footer .footer-secure-text b{font-size:.86rem;font-weight:600;color:#fff;letter-spacing:.01em}
.brand-footer .footer-secure-text span{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;font-size:.74rem;color:var(--ft-dim)}
.brand-footer .footer-secure-text em{font-style:normal;font-weight:700;color:#aaa5ff;letter-spacing:.01em}
.brand-footer .footer-secure-text i{font-style:normal;color:rgba(170,165,255,.6)}
.brand-footer .footer-top{position:relative;display:grid;place-items:center;flex:none;width:76px;height:76px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--ft-gold-soft);font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.brand-footer .footer-top-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--ft-gold-soft);font-size:10.4px;font-weight:600;letter-spacing:0;animation:ft-spin 14s linear infinite}
.brand-footer .footer-top-arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(217,201,168,.4);border-radius:50%;background:rgba(255,255,255,.05);transition:transform .45s var(--xv-ease),background .3s ease,color .3s ease,border-color .3s ease}
.brand-footer .footer-top-arrow svg{width:18px;height:18px}
.brand-footer .footer-top:hover{text-decoration:none}
.brand-footer .footer-top:hover .footer-top-ring{animation-duration:4s}
.brand-footer .footer-top:hover .footer-top-arrow{transform:translateY(-3px);background:var(--ft-gold);border-color:var(--ft-gold);color:#141414}
@keyframes ft-spin{to{transform:rotate(360deg)}}
@media(max-width:1000px) and (min-width:701px){.brand-footer .footer-upper{grid-template-columns:repeat(3,minmax(0,1fr))}.brand-footer .footer-about{grid-column:1/-1}}
@media(max-width:700px){
  .brand-footer::after{font-size:13rem}
  .brand-footer .footer-upper{display:grid;grid-template-columns:1fr 1fr;gap:34px 20px;padding-block:44px 36px}
  .brand-footer .footer-about,.brand-footer .footer-support{grid-column:1/-1;margin:0}
  .brand-footer .footer-account{margin:0}
  .brand-footer .footer-upper p,.brand-footer .footer-upper nav a{font-size:1rem}
  .brand-footer .footer-logo{width:170px}
  .brand-footer .footer-lower-inner{grid-template-columns:1fr auto;grid-template-areas:"policy policy" "secure secure" "copy top";align-items:center;gap:18px 16px;padding-block:24px calc(24px + env(safe-area-inset-bottom));text-align:left}
  .brand-footer .footer-lower-inner>.xv-pop,.brand-footer .footer-lower-inner>.footer-policy{grid-area:policy;justify-self:center}
  .brand-footer .footer-end{display:contents}
  .brand-footer .footer-secure{grid-area:secure;justify-self:stretch;justify-content:center;padding:9px 16px 9px 9px;border-radius:18px}
  .brand-footer .footer-lower-inner>.footer-copyright{grid-area:copy;justify-self:start;font-size:.85rem}
  .brand-footer .footer-top{grid-area:top;justify-self:end;width:68px;height:68px}
  .brand-footer .footer-top-arrow{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.brand-footer .footer-top-ring{animation:none}.brand-footer .footer-socials a,.brand-footer .footer-top-arrow,.brand-footer .footer-upper nav a,.brand-footer .footer-upper nav a::after{transition:none}}

/* ==========================================================================
   PRODUCT PAGES (pomade + texture powder)
   ========================================================================== */
.mode-product-page .product-breadcrumb{color:#7d7568}
.mode-product-page .product-breadcrumb a{border-color:var(--xv-gold-soft);transition:color .2s ease,border-color .2s ease}
.mode-product-page .product-breadcrumb a:hover{color:var(--xv-gold-deep);border-color:var(--xv-gold)}

/* Gallery */
.mode-product-page .product-gallery-stage{border-radius:20px;box-shadow:0 1px 2px rgba(60,48,28,.05),0 30px 60px -32px rgba(60,48,28,.5)}
.mode-product-page .product-gallery-thumbs{border-radius:16px;border-color:var(--xv-edge);background:#fbf9f4}
.mode-product-page .product-gallery-thumb{transition:transform .3s var(--xv-ease),border-color .2s ease}
.mode-product-page .product-gallery-thumb[aria-pressed="true"]{border-color:var(--xv-ink);box-shadow:0 0 0 3px #fbf9f4,0 0 0 4px var(--xv-gold)}
.mode-product-page .product-gallery-label{color:var(--xv-gold-deep);font-weight:600}
:is(.pomade-gallery,.powder-gallery) .product-gallery-counter{border-radius:999px;padding:7px 11px}

/* Copy column */
.mode-product-page .product-detail-eyebrow{color:var(--xv-gold-deep);font-weight:600}
.mode-product-page .product-detail-copy h1{font-size:clamp(2.2rem,3.8vw,3.5rem);line-height:1.06;color:var(--xv-ink);margin:16px 0 14px}
.mode-product-page .product-detail-lead{color:var(--xv-ink);max-width:36ch}
.mode-product-page .product-detail-short{color:#6b665d!important}
.mode-product-page .product-detail-price strong{font-size:clamp(2rem,2.6vw,2.5rem);color:var(--xv-ink)}
.mode-product-page .product-detail-price span{color:#7d7568}

/* Buy row: bigger, clearer primary action */
.mode-product-page .product-purchase-row{grid-template-columns:132px minmax(0,1fr);width:100%;max-width:440px}
.mode-product-page .product-quantity-control{height:54px;border-radius:14px;border-color:#d9d0be;background:#fffdfa}
.mode-product-page .product-quantity>span{color:#7d7568;font-weight:600}
.mode-product-page .product-add-button{height:54px;border-radius:14px;font-size:.9375rem;letter-spacing:.02em;box-shadow:0 12px 24px -12px rgba(13,13,13,.6);transition:background-position .35s ease,transform .3s var(--xv-ease),box-shadow .3s ease}
.mode-product-page .product-add-button:hover{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(13,13,13,.65)}
.mode-product-page .product-add-button:active{transform:translateY(0)}
.mode-product-page .product-add-button svg{width:19px;height:21px}
.mode-product-page .product-detail-page :is(button,a,summary):focus-visible,.mode-product-page :is(button,a,summary):focus-visible{outline-color:var(--xv-gold)}
.mode-product-page .product-purchase-note{color:#7d7568}

/* Accordion */
.mode-product-page .product-accordion details{border-color:var(--xv-edge)}
.mode-product-page .product-accordion summary{transition:color .2s ease}
.mode-product-page .product-accordion summary:hover{color:var(--xv-gold-deep)}
.mode-product-page .product-accordion summary span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #d9d0be;border-radius:50%;font-size:1.1rem;transition:background .2s ease,border-color .2s ease}
.mode-product-page .product-accordion summary:hover span,.mode-product-page .product-accordion details[open] summary span{background:#f3ecdd;border-color:var(--xv-gold-soft)}
.mode-product-page .product-benefits-list li::before{color:var(--xv-gold)}

/* Pomade film band: same dark treatment as the home page films */
.pomade-story{position:relative;border-top:0;color:#f5f2ec;background:radial-gradient(60% 70% at 25% 0%,rgba(197,183,163,.12),transparent 70%),#0b0c0c;box-shadow:0 0 0 100vmax #0b0c0c;clip-path:inset(0 -100vmax)}
.pomade-story-copy .eyebrow{color:#b4a98f}
.pomade-story-copy h2{color:#f5f2ec}
.pomade-story-copy h2 span{color:var(--xv-gold-soft)}
.pomade-story-media{border-radius:18px;border:1px solid rgba(197,183,163,.25);box-shadow:0 30px 60px -24px rgba(0,0,0,.8)}
.pomade-page .pomade-story{padding-block:clamp(48px,6vw,88px)}

/* Pair it with */
.mode-product-page .product-pairing-card{border-color:var(--xv-edge);border-radius:20px;background:var(--xv-card);box-shadow:0 1px 2px rgba(60,48,28,.04),0 18px 40px -24px rgba(60,48,28,.35);transition:box-shadow .4s ease}
@media(hover:hover){.mode-product-page .product-pairing-card:hover{box-shadow:0 2px 4px rgba(60,48,28,.05),0 28px 52px -24px rgba(60,48,28,.45)}}
.mode-product-page .product-pairing-heading{color:var(--xv-gold-deep);border-color:var(--xv-edge)}
.mode-product-page .product-pairing-buy{border-color:var(--xv-edge)}
.mode-product-page .product-pairing-link{color:var(--xv-ink)}

/* Reviews */
.mode-product-page .reviews{background:#fbf9f4;border-top:1px solid var(--xv-edge)}
.mode-product-page .reviews .eyebrow{color:var(--xv-gold-deep)}
.mode-product-page .reviews h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.02em}
.mode-product-page .review-summary{color:#6b665d}
.mode-product-page .review-grid blockquote{border:1px solid var(--xv-edge);border-radius:18px;background:var(--xv-card);box-shadow:0 14px 30px -22px rgba(60,48,28,.4);transition:transform .4s var(--xv-ease),box-shadow .4s ease}
@media(hover:hover){.mode-product-page .review-grid blockquote:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(60,48,28,.5)}}
.mode-product-page .review-grid blockquote div,.mode-product-page .review-grid .rating-stars{color:var(--xv-gold)}
.mode-product-page .powder-reviews{background:#fbf9f4;border-color:var(--xv-edge)}
.mode-product-page .powder-reviews-empty{border-color:#d8cdb9}

/* Floating buy bar */
.product-sticky-purchase{background:rgba(255,253,250,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--xv-edge);border-radius:16px;box-shadow:0 18px 40px -16px rgba(60,48,28,.4)}
.product-sticky-purchase img{border-radius:10px}
.product-sticky-purchase button{border-radius:12px}

@media(max-width:700px){
  .mode-product-page .product-gallery-stage{border-radius:16px}
  .mode-product-page .product-detail-copy h1{font-size:clamp(2.1rem,10vw,2.7rem)}
  .mode-product-page .product-purchase-row{grid-template-columns:124px minmax(0,1fr);max-width:none}
  .mode-product-page .product-quantity-control{height:52px}
  .mode-product-page .product-add-button{height:52px}
  .mode-product-page .review-grid blockquote{border-radius:16px}
  .pomade-story-media{border-radius:14px}
}
@media(max-width:370px){.mode-product-page .product-purchase-row{grid-template-columns:116px minmax(0,1fr)}}

/* in-bag state keeps the round minus button centered in the taller button */
.mode-product-page .product-add-wrap.has-items .product-add-button{padding-right:58px}
.mode-product-page .product-quick-remove{right:8px;width:38px;height:38px}

.mode-product-page .product-add-button>span:not(.add-bag-icon){font-size:inherit;font-weight:inherit;line-height:1;letter-spacing:inherit}
.mode-product-page .product-add-button{gap:12px}
.mode-product-page .product-add-button .add-bag-icon{margin-right:6px}


/* ---------- Product accordion: icons, chevron, motion ---------- */
.mode-product-page .product-accordion summary{justify-content:flex-start;gap:14px}
.mode-product-page .product-accordion summary .xv-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;color:var(--xv-gold-deep);background:linear-gradient(145deg,#f7f0e1,#efe5cf);border:1px solid #e3d6b8;transition:transform .4s var(--xv-ease),background .3s ease,color .3s ease,box-shadow .3s ease}
.mode-product-page .product-accordion summary .xv-ico svg{width:19px;height:19px}
.mode-product-page .product-accordion summary:hover .xv-ico{transform:translateY(-2px) rotate(-4deg);box-shadow:0 8px 16px -8px rgba(138,114,72,.6)}
.mode-product-page .product-accordion details[open] summary .xv-ico{background:linear-gradient(145deg,#a88f62,#8a7248);border-color:#8a7248;color:#fff}
.mode-product-page .product-accordion details[open] summary{color:var(--xv-gold-deep)}
.mode-product-page .product-accordion summary>span:not(.xv-ico){margin-left:auto;width:32px;height:32px;position:relative;font-size:0}
.mode-product-page .product-accordion summary>span::before,.mode-product-page .product-accordion details[open] summary>span::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .45s var(--xv-ease)}
.mode-product-page .product-accordion details[open] summary>span::before{transform:translateY(2px) rotate(-135deg)}
.mode-product-page .product-accordion details[open] summary>span,.mode-product-page .product-accordion details summary>span{transform:none}
.mode-product-page .product-accordion details[open] summary>span{background:var(--xv-ink);border-color:var(--xv-ink);color:#fff}
@keyframes xv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes xv-panel{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes xv-li{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.mode-product-page .product-accordion-content{animation:xv-panel .55s var(--xv-ease) both}
.mode-product-page .product-accordion details[open] .xv-ico path,.mode-product-page .product-accordion details[open] .xv-ico circle{stroke-dasharray:1;animation:xv-draw .9s var(--xv-ease) both}
.mode-product-page .product-benefits-list{gap:10px 18px;padding-top:4px}
.mode-product-page .product-benefits-list li{position:relative;display:flex;align-items:center;gap:11px;animation:xv-li .55s var(--xv-ease) both;animation-delay:calc(var(--i,0)*60ms + 120ms)}
.mode-product-page .product-benefits-list li::before{content:"";flex:none;width:20px;height:20px;margin:0;border-radius:50%;background:#f1e8d4;border:1px solid #e0d2b0;box-sizing:border-box}
.mode-product-page .product-benefits-list li::after{content:"";position:absolute;left:7px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid var(--xv-gold-deep);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* ---------- Film section: fills the left side ---------- */
@media(min-width:701px){.pomade-page .pomade-story{align-items:center}}
.pomade-story-copy{position:relative;max-width:520px}
.pomade-story-copy::after{content:"XV";position:absolute;left:-.04em;bottom:-.55em;font-family:var(--font-display);font-size:clamp(9rem,20vw,19rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(197,183,163,.16);pointer-events:none;z-index:0}
.pomade-story-copy>*{position:relative;z-index:1}
.xv-pillars{list-style:none;margin:clamp(26px,4vw,48px) 0 0;padding:0;border-top:1px solid rgba(197,183,163,.25)}
.xv-pillars li{display:flex;align-items:baseline;gap:20px;padding:20px 4px;border-bottom:1px solid rgba(197,183,163,.25);transition:padding-left .45s var(--xv-ease),border-color .3s ease}
.xv-pillars b{font-family:var(--font-display);font-weight:400;font-size:1.05rem;color:var(--xv-gold);letter-spacing:.08em}
.xv-pillars span{font-size:clamp(1.15rem,1.7vw,1.5rem);color:#f5f2ec;letter-spacing:-.01em}
@media(hover:hover){.xv-pillars li:hover{padding-left:16px;border-bottom-color:var(--xv-gold)}}
@media(max-width:700px){.pomade-story-copy::after{display:none}.xv-pillars li{padding:15px 2px}}

/* ---------- Reviews: modern mosaic ---------- */
.mode-product-page .reviews{background:radial-gradient(50% 60% at 85% 0%,rgba(197,183,163,.16),transparent 70%),#fbf9f4}
.mode-product-page .review-summary{display:inline-flex;align-items:center;gap:10px;margin:2px 0 34px;padding:9px 18px 9px 14px;border:1px solid var(--xv-edge);border-radius:999px;background:var(--xv-card)}
.mode-product-page .review-summary span{margin:0}
.mode-product-page .review-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.mode-product-page .review-grid blockquote{position:relative;grid-column:span 2;min-height:0;padding:34px 32px 26px;overflow:hidden;transition:transform .5s var(--xv-ease),box-shadow .5s var(--xv-ease),border-color .3s ease}
.mode-product-page .review-grid blockquote:nth-child(n+4){grid-column:span 3}
.mode-product-page .review-grid blockquote::before{content:"\201C";position:absolute;right:22px;top:2px;font-family:var(--font-display);font-size:7rem;line-height:1;color:var(--xv-gold);opacity:.22;pointer-events:none}
.mode-product-page .review-grid blockquote::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--xv-gold-deep),#d9c9a8,transparent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--xv-ease)}
.mode-product-page .review-grid blockquote p{margin:20px 0 26px;font-size:1.05rem;line-height:1.65;color:var(--xv-ink)}
.mode-product-page .review-grid blockquote cite{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--xv-edge);font-style:normal;font-weight:600;color:var(--xv-ink)}
.mode-product-page .review-grid .xv-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#a88f62,#8a7248);color:#fff;font-size:.85rem;font-weight:600}
.mode-product-page .review-grid blockquote img{display:block;order:-1;width:calc(100% + 64px);max-width:none;margin:-34px -32px 22px;aspect-ratio:4/3;object-fit:cover}
@media(hover:hover){.mode-product-page .review-grid blockquote:hover{transform:translateY(-6px);border-color:#d8cdb9;box-shadow:0 28px 50px -24px rgba(60,48,28,.5)}.mode-product-page .review-grid blockquote:hover::after{transform:scaleX(1)}}
.xv-reveal .review-grid blockquote .rating-stars{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--xv-ease) .35s}
.xv-reveal .review-grid blockquote.is-in .rating-stars{clip-path:inset(0 0 0 0)}
@media(max-width:1000px){
  .mode-product-page .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode-product-page .review-grid blockquote,.mode-product-page .review-grid blockquote:nth-child(n+4){grid-column:span 1}
  .mode-product-page .review-grid blockquote:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:700px){
  .mode-product-page .review-grid{grid-template-columns:1fr;gap:14px}
  .mode-product-page .review-grid blockquote,.mode-product-page .review-grid blockquote:nth-child(n+4){grid-column:auto;padding:28px 22px 22px}
  .mode-product-page .review-grid blockquote::before{font-size:5.5rem;right:14px}
  .mode-product-page .review-grid blockquote img{width:calc(100% + 44px);margin:-28px -22px 20px}
}
@media(prefers-reduced-motion:reduce){
  .mode-product-page .product-accordion details[open] .xv-ico path,.mode-product-page .product-accordion details[open] .xv-ico circle,.mode-product-page .product-benefits-list li,.mode-product-page .product-accordion-content{animation:none}
}


/* ---------- Info and policy pages ---------- */
.info-page{overflow-x:clip;background:var(--xv-warm);padding-bottom:clamp(56px,7vw,96px)}
.info-hero.section-wrap{position:relative;isolation:isolate;max-width:920px;padding-block:clamp(36px,5vw,64px) clamp(44px,6vw,72px);color:#f5f2ec;clip-path:inset(0 -100vmax)}
.info-hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vmax;right:-100vmax;background:radial-gradient(40% 90% at 50% 0%,rgba(197,183,163,.16),transparent 72%),linear-gradient(110deg,#121314,#26272a 50%,#131415)}
.info-hero::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--xv-gold) 50%,transparent)}
.info-hero .info-back{color:#b4a98f;transition:color .2s ease,transform .3s var(--xv-ease)}
.info-hero .info-back:hover{color:#fff;text-decoration:none;transform:translateX(-3px)}
.info-hero .info-eyebrow{color:var(--xv-gold-soft)}
.info-hero h1{color:#fff;font-size:clamp(2.6rem,5vw,4.2rem)}
.info-hero p{color:#c9c2b4}
.info-hero .info-updated{display:inline-block;margin-top:20px;padding:7px 15px;border:1px solid rgba(197,183,163,.35);border-radius:999px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--xv-gold-soft)}
.info-layout.section-wrap{border-top:0;padding-top:clamp(34px,4vw,56px)}
.info-index{gap:4px;padding-top:0}
.info-index>span{color:var(--xv-gold-deep);margin-bottom:12px}
.info-index a{position:relative;width:100%;padding:7px 0 7px 16px;border-left:1px solid var(--xv-edge);color:#6b665d;transition:color .2s ease,border-color .2s ease,padding-left .3s var(--xv-ease)}
.info-index a:hover{text-decoration:none;color:var(--xv-ink);padding-left:20px}
.info-index a.is-active{color:var(--xv-ink);font-weight:600;border-left:2px solid var(--xv-gold)}
.info-content{counter-reset:xvs}
.info-section{counter-increment:xvs;border-top:1px solid var(--xv-edge);padding:32px 0 34px}
.info-section h2{display:flex;align-items:center;gap:14px;font-size:1.5rem}
.info-section h2::before{content:counter(xvs);flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--xv-ink);color:#f1e6cc;font-family:var(--font-sans);font-size:.8125rem;font-weight:600;line-height:1;font-variant-numeric:lining-nums tabular-nums;letter-spacing:0}
.info-section ul,.info-section ol{margin:0 0 15px;padding-left:1.2em;color:#575149;line-height:1.75}
.info-section li::marker{color:var(--xv-gold)}
.info-section li{margin-bottom:8px}
.info-section a{color:var(--xv-gold-deep);text-decoration-color:rgba(138,114,72,.4);transition:text-decoration-color .2s ease}
.info-section a:hover{text-decoration-color:var(--xv-gold-deep)}
.info-note{border:1px solid #e3d6b8;border-left:3px solid var(--xv-gold);border-radius:14px;background:linear-gradient(145deg,#f9f3e5,#f4ecd8);margin-bottom:30px}
.info-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}
.info-facts div{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;border:1px solid var(--xv-edge);border-radius:18px;background:var(--xv-card);box-shadow:0 14px 30px -24px rgba(60,48,28,.45);transition:transform .45s var(--xv-ease),box-shadow .45s var(--xv-ease)}
.info-facts strong{position:relative;padding-top:14px;font-family:var(--font-sans);font-weight:600;font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:lining-nums;color:var(--xv-ink)}
.info-facts strong::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;background:var(--xv-gold)}
.info-facts span{font-size:.9rem;line-height:1.45;color:#6b665d}
@media(hover:hover){.info-facts div:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(60,48,28,.5)}}
.policy-return{border-color:var(--xv-edge)}
.text-link{border-bottom-color:var(--xv-gold)}
.policy-grid.section-wrap{padding-top:clamp(38px,5vw,64px);gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.policy-card{border-color:var(--xv-edge);border-radius:20px;background:var(--xv-card);box-shadow:0 14px 30px -24px rgba(60,48,28,.45);transition:transform .45s var(--xv-ease),box-shadow .45s var(--xv-ease),border-color .3s ease}
.policy-card .panel-eyebrow{color:var(--xv-gold-deep)}
.policy-card h2{font-family:var(--font-display);font-weight:400;font-size:1.7rem}
.policy-card-arrow{color:var(--xv-gold-deep);transition:transform .35s var(--xv-ease)}
.policy-card:hover{border-color:#d8cdb9;box-shadow:0 28px 50px -24px rgba(60,48,28,.5)}
.policy-card:hover .policy-card-arrow{transform:translate(4px,-4px)}
@media(max-width:1000px){.policy-grid.section-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .info-facts{grid-template-columns:1fr;gap:10px}
  .info-facts div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;padding:16px 18px}
  .info-facts strong{font-size:1.5rem;flex:none;padding-top:0}
  .info-facts strong::before{display:none}
  .info-facts span{text-align:right}
  .info-index{gap:8px}
  .info-index a{width:auto;padding:8px 14px;border:1px solid var(--xv-edge);border-radius:999px;background:var(--xv-card);font-size:.85rem}
  .info-index a:hover{padding-left:14px}
  .info-index a.is-active{border:1px solid var(--xv-gold);background:#f4ecd8}
  .info-section h2{font-size:1.25rem}
  .policy-grid.section-wrap{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.info-facts div,.policy-card,.info-index a,.info-hero .info-back{transition:none}}


/* ---------- Footer: Terms and Policies pop-up menu ---------- */
.xv-pop{position:relative;display:inline-block;justify-self:center}
@media(max-width:700px){.xv-pop{justify-self:auto}}
.xv-pop-trigger{cursor:pointer}
.brand-footer .xv-pop-trigger{display:inline-flex;align-items:center;gap:8px}
.brand-footer .xv-pop-menu{position:absolute;z-index:20;left:50%;bottom:calc(100% + 16px);width:max-content;min-width:250px;max-width:calc(100vw - 32px);padding:10px;border:1px solid rgba(217,201,168,.28);border-radius:20px;color:#f5f2ec;background:radial-gradient(90% 60% at 0% 0%,rgba(212,182,124,.18),transparent 70%),linear-gradient(160deg,#1d1e20,#121314);box-shadow:0 30px 60px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);opacity:0;visibility:hidden;translate:-50% 14px;scale:.92;transform-origin:50% 100%;transition:opacity .25s ease,translate .5s var(--xv-ease),scale .5s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .5s}
.brand-footer .xv-pop-menu::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;background:#131415;border-right:1px solid rgba(217,201,168,.28);border-bottom:1px solid rgba(217,201,168,.28);transform:rotate(45deg)}
.brand-footer .xv-pop-menu::before{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px}
.brand-footer .xv-pop-menu.is-open{opacity:1;visibility:visible;translate:-50% 0;scale:1;transition:opacity .25s ease,translate .5s var(--xv-ease),scale .5s cubic-bezier(.34,1.56,.64,1)}
.brand-footer .xv-pop-head{margin:4px 10px 8px;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ft-gold,#d4b67c)}
.brand-footer .xv-pop-menu a{display:flex;align-items:center;gap:12px;padding:9px 12px 9px 9px;border-radius:12px;color:#e8dfcc;font-size:.93rem;text-decoration:none;white-space:nowrap;opacity:0;translate:0 6px;transition:background .25s ease,color .25s ease,padding-left .35s var(--xv-ease),opacity .3s ease,translate .45s var(--xv-ease)}
.brand-footer .xv-pop-menu.is-open a{opacity:1;translate:0 0;transition-delay:0s,0s,0s,calc(.06s + var(--i,0)*45ms),calc(.06s + var(--i,0)*45ms)}
.brand-footer .xv-pop-ico{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid rgba(217,201,168,.22);border-radius:10px;background:rgba(255,255,255,.04);color:var(--ft-gold,#d4b67c);transition:background .25s ease,color .25s ease,border-color .25s ease}
.brand-footer .xv-pop-ico svg{width:17px;height:17px}
.brand-footer .xv-pop-menu a:hover,.brand-footer .xv-pop-menu a:focus-visible{background:rgba(212,182,124,.12);color:#fff;padding-left:13px;outline:0;transform:none}
.brand-footer .xv-pop-menu a:hover .xv-pop-ico,.brand-footer .xv-pop-menu a:focus-visible .xv-pop-ico{background:var(--ft-gold,#d4b67c);border-color:var(--ft-gold,#d4b67c);color:#141414}
.brand-footer .xv-pop-menu a:focus-visible{box-shadow:inset 0 0 0 1px var(--ft-gold,#d4b67c)}
@media(prefers-reduced-motion:reduce){.brand-footer .xv-pop-menu,.brand-footer .xv-pop-menu.is-open,.brand-footer .xv-pop-menu a{transition:none}}


/* ---------- Video player controls ---------- */
.mode-player::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(6,6,6,.78),rgba(6,6,6,.28) 55%,transparent);opacity:0;transition:opacity .35s ease;pointer-events:none}
.mode-player.controls-visible::after,.mode-player.is-paused::after{opacity:1}
/* big play button */
.mode-player .video-play-glass{position:relative;width:52px;height:52px;border:1px solid rgba(217,201,168,.7);background:rgba(17,18,19,.78);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);color:#fff;box-shadow:0 12px 34px -8px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.18);transition:opacity .3s ease,transform .45s var(--xv-ease),background .3s ease,border-color .3s ease}
.mode-player .video-play-glass svg{width:20px;height:20px;margin-left:2px;color:#e6d8b8;transition:color .3s ease}
.mode-player .video-play-glass::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(217,201,168,.6);opacity:0;pointer-events:none}
.mode-player.is-paused .video-play-glass::before{animation:xv-pulse 2.4s var(--xv-ease) infinite}
@keyframes xv-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
@media(hover:hover){.mode-player .video-surface:hover .video-play-glass{transform:scale(1.08);background:#a88f62;border-color:#e6d8b8}.mode-player .video-surface:hover .video-play-glass svg{color:#fff}}
.mode-player .video-surface:active .video-play-glass{transform:scale(.94)}
/* control dock */
.mode-player .video-ui{z-index:2;left:14px;right:14px;bottom:30px;gap:12px;transform:translateY(8px);transition:opacity .3s ease,transform .45s var(--xv-ease)}
.mode-player.controls-visible .video-ui{transform:none}
.mode-player .video-time{display:inline-flex;align-items:center;gap:9px;padding:0 15px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(16,16,16,.5);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);color:#f5f2ec;font-size:.78rem;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.mode-player .video-time::before{content:"";flex:none;width:13px;height:13px;background:linear-gradient(#d9c9a8,#d9c9a8) 0 100%/3px 35% no-repeat,linear-gradient(#d9c9a8,#d9c9a8) 5px 100%/3px 85% no-repeat,linear-gradient(#d9c9a8,#d9c9a8) 10px 100%/3px 55% no-repeat;animation:xv-eq 1s ease-in-out infinite alternate}
.mode-player.is-paused .video-time::before{animation-play-state:paused}
@keyframes xv-eq{0%{background-size:3px 35%,3px 85%,3px 55%}50%{background-size:3px 100%,3px 40%,3px 90%}100%{background-size:3px 55%,3px 100%,3px 30%}}
.mode-player .video-actions{gap:8px}
.mode-player .video-actions button{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);background:rgba(16,16,16,.5);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);color:#f5f2ec;transition:transform .3s var(--xv-ease),background .25s ease,border-color .25s ease,color .25s ease}
.mode-player .video-actions button[aria-pressed="true"]{border-color:rgba(217,201,168,.7);color:#e6d8b8}
@media(hover:hover){.mode-player .video-actions button:hover{transform:translateY(-2px);background:rgba(168,143,98,.5);border-color:#e6d8b8;color:#fff}}
.mode-player .video-actions button:active{transform:scale(.92)}
.mode-player .video-actions svg{width:18px;height:18px}
/* progress line */
.mode-player .video-seek{--played:0%;left:14px;right:14px;bottom:8px;width:calc(100% - 28px);height:20px}
.mode-player .video-seek::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,#a88f62,#e6d8b8 var(--played),rgba(255,255,255,.28) var(--played));transform:translateY(8px) scaleY(.5);transition:transform .3s var(--xv-ease)}
.mode-player .video-seek::-moz-range-track{height:4px;border-radius:99px;background:linear-gradient(90deg,#a88f62,#e6d8b8 var(--played),rgba(255,255,255,.28) var(--played));transform:translateY(8px) scaleY(.5)}
.mode-player.controls-visible .video-seek::-webkit-slider-runnable-track,.mode-player .video-seek:hover::-webkit-slider-runnable-track{transform:translateY(8px) scaleY(1)}
.mode-player .video-seek::-webkit-slider-thumb{width:0;height:0;margin-top:0;border:0;background:#fff;box-shadow:0 0 0 3px rgba(217,201,168,.45);transition:width .2s ease,height .2s ease,margin-top .2s ease}
.mode-player.controls-visible .video-seek::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px}
.mode-player.controls-visible .video-seek::-moz-range-thumb{width:12px;height:12px;border:0;background:#fff;box-shadow:0 0 0 3px rgba(217,201,168,.45)}
.mode-player .video-seek:focus-visible{outline:2px solid #e6d8b8;outline-offset:2px;border-radius:99px}
.mode-player:fullscreen .video-ui{bottom:46px}
.mode-player:fullscreen .video-seek{bottom:22px}
@media(max-width:700px){
  .mode-player .video-ui{left:12px;right:12px;bottom:28px}
  .mode-player .video-time{height:44px;padding:0 14px}
  .mode-player .video-actions button{width:44px;height:44px}
  .mode-player .video-seek{left:12px;right:12px;width:calc(100% - 24px);height:24px;bottom:5px}
  .mode-player .video-play-glass{width:50px;height:50px}
}
@media(prefers-reduced-motion:reduce){.mode-player.is-paused .video-play-glass::before,.mode-player .video-time::before{animation:none}.mode-player .video-ui,.mode-player::after,.mode-player .video-actions button,.mode-player .video-play-glass{transition:none}}


/* ---------- Common Questions, Account, Orders, About ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.info-layout.xv-solo{display:block;max-width:1000px}
.info-hero .faq-search{display:flex;align-items:center;gap:12px;max-width:520px;height:54px;margin:30px auto 0;padding:0 22px;border:1px solid rgba(197,183,163,.35);border-radius:999px;background:rgba(255,255,255,.07);color:#c9c2b4;text-align:left;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.info-hero .faq-search:focus-within{border-color:var(--xv-gold);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(168,143,98,.18)}
.faq-search svg{width:20px;height:20px;flex:none}
.faq-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:1rem;-webkit-appearance:none}
.faq-search input::placeholder{color:#a79f90}
.faq-hub.section-wrap{max-width:1000px;padding-top:clamp(28px,4vw,52px)}
.faq-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:30px}
.faq-tab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:18px 16px 16px;border:1px solid var(--xv-edge);border-radius:18px;background:var(--xv-card);color:var(--xv-ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 14px 30px -26px rgba(60,48,28,.5);transition:transform .45s var(--xv-ease),box-shadow .45s var(--xv-ease),background .3s ease,color .3s ease,border-color .3s ease}
.faq-tab-ico{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border:1px solid #e3d6b8;border-radius:12px;background:linear-gradient(145deg,#f7f0e1,#efe5cf);color:var(--xv-gold-deep);transition:background .3s ease,color .3s ease,transform .45s var(--xv-ease)}
.faq-tab-ico svg{width:20px;height:20px}
.faq-tab-name{font-size:.98rem;font-weight:600}
.faq-tab-count{font-size:.78rem;color:#7a7468;transition:color .3s ease}
@media(hover:hover){.faq-tab:hover{transform:translateY(-4px);border-color:#d8cdb9;box-shadow:0 24px 40px -24px rgba(60,48,28,.5)}.faq-tab:hover .faq-tab-ico{transform:rotate(-6deg) scale(1.06)}}
.faq-tab.is-active{background:var(--xv-ink);border-color:var(--xv-ink);color:#fff;box-shadow:0 22px 36px -20px rgba(20,18,14,.7)}
.faq-tab.is-active .faq-tab-ico{background:linear-gradient(145deg,#a88f62,#8a7248);border-color:#8a7248;color:#fff}
.faq-tab.is-active .faq-tab-count{color:#c9c2b4}
.faq-tab:focus-visible{outline:2px solid var(--xv-gold);outline-offset:3px}
.faq-panel-title{margin:0 0 18px;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3vw,2.5rem);letter-spacing:-.02em}
.xv-faq .faq-panel{display:none}
.xv-faq .faq-panel.is-active{display:block;animation:xv-panel .55s var(--xv-ease) both}
.xv-faq.xv-searching .faq-panel.is-active{display:none}
.xv-faq.xv-searching .faq-panel.is-hit{display:block;margin-bottom:26px}
.faq-list{display:grid;gap:10px;border:0}
.faq-item{border:1px solid var(--xv-edge);border-radius:16px;background:var(--xv-card);padding:0 22px;transition:border-color .3s ease,box-shadow .4s var(--xv-ease)}
@media(hover:hover){.faq-item:hover{border-color:#d8cdb9}}
.faq-item[open]{border-color:#d8cdb9;box-shadow:0 18px 34px -26px rgba(60,48,28,.55)}
.faq-item summary{position:relative;min-height:0;padding:19px 48px 19px 0;font-size:1.02rem;font-weight:500;transition:color .2s ease}
.faq-item[open] summary{color:var(--xv-gold-deep)}
.faq-item summary::after,.faq-item[open] summary::after{content:"";position:absolute;right:0;top:50%;width:32px;height:32px;margin-top:-16px;padding:0;border:1px solid #d9d0be;border-radius:50%;background:transparent;transition:background .3s ease,border-color .3s ease}
.faq-item summary::before{content:"";position:absolute;z-index:1;right:12px;top:50%;width:7px;height:7px;margin-top:-6px;border:solid var(--xv-ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:transform .45s var(--xv-ease),border-color .3s ease}
.faq-item[open] summary::after{background:var(--xv-ink);border-color:var(--xv-ink)}
.faq-item[open] summary::before{border-color:#fff;transform:translateY(4px) rotate(-135deg)}
.faq-answer{padding:0 8px 22px 0;animation:xv-panel .5s var(--xv-ease) both}
.faq-answer a{color:var(--xv-gold-deep)}
.faq-empty{margin:20px 0;padding:22px;border:1px dashed #d8cdb9;border-radius:16px;color:#6b665d;text-align:center}
.faq-help{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;padding:26px 30px;border-radius:22px;color:#f5f2ec;background:radial-gradient(60% 120% at 0% 0%,rgba(197,183,163,.18),transparent 70%),linear-gradient(110deg,#141516,#2a2b2e)}
.faq-help strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.7rem;letter-spacing:-.01em}
.faq-help span{color:#c9c2b4;font-size:.95rem}
.faq-help a:not(.info-button){color:var(--xv-gold-soft)}
.faq-help .info-button,.xv-cta .info-button,.xv-panel .info-button{border-radius:999px;background:var(--xv-gold);color:#141414;font-weight:600;white-space:nowrap;transition:background .25s ease,transform .3s var(--xv-ease)}
.faq-help .info-button:hover,.xv-cta .info-button:hover{background:#d9c9a8;transform:translateY(-2px)}
.xv-panel .info-button{background:var(--xv-ink);color:#fff}
.xv-panel .info-button:hover{background:#4a3f2c}
/* account: steps and link cards */
.xv-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.xv-steps li{display:flex;flex-direction:column;gap:8px;padding:26px 24px;border:1px solid var(--xv-edge);border-radius:20px;background:var(--xv-card);box-shadow:0 14px 30px -26px rgba(60,48,28,.5)}
.xv-steps b{display:grid;place-items:center;width:34px;height:34px;margin-bottom:8px;border-radius:50%;background:var(--xv-ink);color:#f1e6cc;font-size:.8125rem;font-weight:600}
.xv-steps strong{font-size:1.15rem;letter-spacing:-.01em}
.xv-steps span{color:#6b665d;line-height:1.55;font-size:.95rem}
.xv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.xv-card,.xv-product{position:relative;display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--xv-edge);border-radius:20px;background:var(--xv-card);color:inherit;text-decoration:none;box-shadow:0 14px 30px -26px rgba(60,48,28,.5);transition:transform .45s var(--xv-ease),box-shadow .45s var(--xv-ease),border-color .3s ease}
.xv-card{min-height:190px;padding:26px}
.xv-card h2{margin:12px 0 8px;font-family:var(--font-display);font-weight:400;font-size:1.7rem}
.xv-card p{margin:0 0 20px;color:#6b665d;font-size:.95rem;line-height:1.55}
.xv-card .panel-eyebrow{color:var(--xv-gold-deep)}
.xv-card .policy-card-arrow{margin-top:auto;color:var(--xv-gold-deep);font-size:1.2rem;transition:transform .35s var(--xv-ease)}
@media(hover:hover){.xv-card:hover,.xv-product:hover{transform:translateY(-6px);border-color:#d8cdb9;box-shadow:0 28px 50px -24px rgba(60,48,28,.5)}.xv-card:hover .policy-card-arrow{transform:translateX(5px)}}
/* orders: timeline */
.xv-timeline{list-style:none;margin:0 0 30px;padding:26px 6px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.xv-timeline li{position:relative;display:flex;flex-direction:column;gap:6px;padding-right:18px}
.xv-dot{display:grid;place-items:center;width:38px;height:38px;margin-bottom:12px;border-radius:50%;background:var(--xv-ink);color:#f1e6cc;font-size:.85rem;font-weight:600;position:relative;z-index:1}
.xv-timeline strong{font-size:1.1rem}
.xv-timeline li>span:last-child{color:#6b665d;font-size:.92rem;line-height:1.5}
.xv-timeline li:not(:last-child)::after{content:"";position:absolute;top:18px;left:46px;right:8px;height:2px;border-radius:2px;background:linear-gradient(var(--xv-gold),var(--xv-gold)) left center/0% 100% no-repeat,var(--xv-edge);transition:background-size 1.1s var(--xv-ease)}
.xv-timeline.is-in li:not(:last-child)::after,.xv-timeline:not(.reveal) li:not(:last-child)::after{background-size:100% 100%}
.xv-timeline li:nth-child(2)::after{transition-delay:.35s}.xv-timeline li:nth-child(3)::after{transition-delay:.7s}
.xv-panel{padding:32px;border:1px solid var(--xv-edge);border-radius:22px;background:var(--xv-card);box-shadow:0 14px 30px -26px rgba(60,48,28,.5)}
.xv-panel h2{margin:0 0 14px;font-family:var(--font-display);font-weight:400;font-size:1.9rem}
.xv-panel ul{margin:0 0 16px;padding-left:1.2em;color:#575149;line-height:1.75}
.xv-panel li::marker{color:var(--xv-gold)}
.xv-note{margin:0 0 22px;color:#6b665d;font-size:.95rem}
/* about */
.xv-about.section-wrap{max-width:1000px;padding-top:clamp(30px,4vw,52px)}
.xv-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:26px}
.xv-product{overflow:hidden}
.xv-product-img{display:block;width:100%;aspect-ratio:5/4;overflow:hidden;background:#e9e4d9}
.xv-product-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--xv-ease)}
@media(hover:hover){.xv-product:hover .xv-product-img img{transform:scale(1.05)}}
.xv-product-copy{display:flex;flex-direction:column;gap:6px;padding:24px 26px 28px}
.xv-product-copy .panel-eyebrow{color:var(--xv-gold-deep)}
.xv-product h3{margin:4px 0 0;font-family:var(--font-display);font-weight:400;font-size:1.9rem;letter-spacing:-.01em}
.xv-product p{margin:0;color:#6b665d;line-height:1.55}
.xv-product-go{margin-top:14px;font-weight:600;color:var(--xv-gold-deep)}
.xv-product-go i{display:inline-block;font-style:normal;transition:transform .35s var(--xv-ease)}
.xv-product:hover .xv-product-go i{transform:translateX(5px)}
.xv-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(28px,4vw,44px);border-radius:24px;color:#f5f2ec;background:radial-gradient(60% 120% at 0% 0%,rgba(197,183,163,.2),transparent 70%),linear-gradient(110deg,#141516,#2a2b2e)}
.xv-cta .info-eyebrow{color:var(--xv-gold-soft)}
.xv-cta h2{margin:10px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.02em}
@media(max-width:1000px){.faq-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .faq-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .faq-tab{padding:14px 14px 13px;border-radius:16px}
  .faq-tab-ico{width:36px;height:36px;margin-bottom:6px}
  .faq-item{padding:0 18px}
  .faq-item summary{padding:17px 44px 17px 0;font-size:1rem}
  .faq-help,.xv-cta{flex-direction:column;align-items:flex-start;padding:24px}
  .xv-steps,.xv-cards,.xv-products{grid-template-columns:1fr}
  .xv-steps li{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:20px}
  .xv-steps b{margin:0}
  .xv-steps span{flex-basis:100%}
  .xv-card{min-height:0}
  .xv-timeline{grid-template-columns:1fr;gap:6px;padding-top:6px}
  .xv-timeline li{padding:0 0 26px 54px;min-height:70px}
  .xv-dot{position:absolute;left:0;top:0;margin:0}
  .xv-timeline li:not(:last-child)::after{top:42px;bottom:4px;left:18px;right:auto;width:2px;height:auto;background:linear-gradient(var(--xv-gold),var(--xv-gold)) top center/100% 0% no-repeat,var(--xv-edge)}
  .xv-timeline.is-in li:not(:last-child)::after,.xv-timeline:not(.reveal) li:not(:last-child)::after{background-size:100% 100%}
  .xv-panel{padding:24px}
}
@media(prefers-reduced-motion:reduce){.faq-tab,.faq-item,.xv-card,.xv-product,.xv-product-img img{transition:none}.xv-faq .faq-panel.is-active,.faq-answer{animation:none}.xv-timeline li::after{transition:none}}


/* ---------- Contact ---------- */
.xv-contact.section-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;max-width:1000px;padding-top:clamp(30px,4vw,52px)}
.xv-contact-main{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:clamp(28px,4vw,46px);border-radius:24px;color:#f5f2ec;background:radial-gradient(70% 70% at 0% 0%,rgba(197,183,163,.2),transparent 70%),linear-gradient(120deg,#141516,#2a2b2e)}
.xv-contact-main::after{content:"XV";position:absolute;right:-.05em;bottom:-.3em;font-family:var(--font-display);font-size:clamp(9rem,18vw,15rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(197,183,163,.14);pointer-events:none}
.xv-contact-main>*{position:relative;z-index:1}
.xv-contact-main .info-eyebrow{color:var(--xv-gold-soft)}
.xv-contact-main h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.02em}
.xv-contact-main p{margin:0;max-width:44ch;color:#c9c2b4;line-height:1.7}
.xv-contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.xv-contact-main .info-button{margin:0;border-radius:999px;background:var(--xv-gold);color:#141414;font-weight:600;transition:background .25s ease,transform .3s var(--xv-ease)}
.xv-contact-main .info-button:hover{background:#d9c9a8;transform:translateY(-2px)}
.xv-copy{min-height:50px;padding:0 22px;border:1px solid rgba(197,183,163,.45);border-radius:999px;background:transparent;color:#f5f2ec;font:inherit;font-weight:500;cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .3s var(--xv-ease)}
.xv-copy:hover{background:rgba(255,255,255,.08);border-color:var(--xv-gold-soft);transform:translateY(-2px)}
.xv-copy.is-done{border-color:var(--xv-gold);color:#e6d8b8}
.xv-contact-main .form-note{font-size:.85rem;color:#a79f90}
.xv-contact-side{display:grid;gap:14px;align-content:start}
.xv-contact-card{padding:26px 28px;border:1px solid var(--xv-edge);border-radius:20px;background:var(--xv-card);box-shadow:0 14px 30px -26px rgba(60,48,28,.5)}
.xv-contact-card .panel-eyebrow{color:var(--xv-gold-deep)}
.xv-contact-card h2{margin:10px 0 10px;font-family:var(--font-display);font-weight:400;font-size:1.7rem}
.xv-contact-card p,.xv-contact-card address{margin:0;color:#575149;font-style:normal;line-height:1.7}
.xv-open{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px!important;padding:6px 14px;border:1px solid var(--xv-edge);border-radius:999px;background:#fff;font-size:.85rem;font-weight:600;color:var(--xv-ink)!important}
.xv-open i{width:8px;height:8px;border-radius:50%;background:#2f9e5b;box-shadow:0 0 0 0 rgba(47,158,91,.5);animation:xv-live 2s infinite}
.xv-open.is-closed i{background:#d64545;box-shadow:0 0 0 0 rgba(214,69,69,.5);animation:xv-live-red 2s infinite}
@keyframes xv-live{70%{box-shadow:0 0 0 8px rgba(47,158,91,0)}100%{box-shadow:0 0 0 0 rgba(47,158,91,0)}}
.xv-links{display:grid;margin-top:10px}
.xv-links a{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid var(--xv-edge);color:var(--xv-ink);text-decoration:none;font-weight:500;transition:padding-left .3s var(--xv-ease),color .2s ease}
.xv-links a:first-child{border-top:0}
.xv-links a i{font-style:normal;color:var(--xv-gold-deep);transition:transform .3s var(--xv-ease)}
.xv-links a:hover{padding-left:6px;color:var(--xv-gold-deep)}
.xv-links a:hover i{transform:translateX(4px)}
@media(max-width:900px){.xv-contact.section-wrap{grid-template-columns:1fr}}
@media(max-width:700px){.xv-contact-actions .info-button,.xv-copy{width:100%;justify-content:center}.xv-contact-card{padding:22px}}
@media(prefers-reduced-motion:reduce){.xv-open i{animation:none}}

/* ---------- Scroll reveal (enabled by polish.js only) ---------- */
.xv-reveal .reveal{opacity:0;translate:0 24px;transition:opacity .9s var(--xv-ease),translate .9s var(--xv-ease)}
.xv-reveal .reveal.is-in{opacity:1;translate:0 0}
.xv-reveal .reveal.reveal-done{translate:none;transition:none}
.xv-reveal .products .product-card.reveal.is-in{transition:opacity .9s var(--xv-ease),translate .9s var(--xv-ease),transform .45s var(--xv-ease),box-shadow .45s var(--xv-ease),border-color .3s ease}
.xv-reveal .products .product-card.reveal.reveal-done{transition:transform .45s var(--xv-ease),box-shadow .45s var(--xv-ease),border-color .3s ease}

/* ---------- Phones ---------- */
@media(max-width:700px){
  .products.section-wrap{padding-block:52px 60px}
  .products .section-heading{margin-bottom:28px}
  .products .section-heading h2{font-size:clamp(2.1rem,10vw,2.6rem)}
  .products .section-heading>p{font-size:.9375rem}
  .products .product-grid{gap:12px}
  .products .product-card{padding:8px 8px 14px;border-radius:16px}
  .products .product-gallery .product-media{border-radius:10px}
  .products .product-category{margin-top:14px;padding-inline:3px;font-size:.5625rem}
  .products .product-card h2{padding-inline:3px;font-size:1rem}
  .products .review-chip{margin-inline:3px}
  .products .product-purchase{margin:6px 3px 2px}
  .products .product-purchase .price{font-size:1.1rem}
  .products .product-description{margin:4px 3px 0!important;font-size:.875rem}
  .benefits.trust-strip{padding-block:26px 12px}
  .styled .mode-player{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .xv-reveal .reveal{opacity:1;translate:none;transition:none}
  .site-chrome::after{display:none}
  .products .product-card,.products .quick-add{transition:none}
}

/* about story */
.xv-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:start;margin:0 0 18px;padding:clamp(28px,4vw,48px);border:1px solid var(--xv-edge);border-radius:24px;background:var(--xv-card);box-shadow:0 14px 30px -26px rgba(60,48,28,.5)}
.xv-story .info-eyebrow{grid-column:1/-1;margin:0}
.xv-story h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.02em;line-height:1.1}
.xv-story-copy{border-left:2px solid var(--xv-gold);padding-left:clamp(16px,2.5vw,28px)}
.xv-story-copy p{margin:0 0 14px;color:#575149;line-height:1.75}
.xv-story-copy p:last-child{margin:0}
@media(max-width:760px){.xv-story{grid-template-columns:1fr}}
.xv-story{row-gap:14px}.xv-story h2{align-self:center}

@keyframes xv-live-red{70%{box-shadow:0 0 0 8px rgba(214,69,69,0)}100%{box-shadow:0 0 0 0 rgba(214,69,69,0)}}
.xv-company{background:linear-gradient(145deg,#141516,#2a2b2e);border-color:#2a2b2e;color:#f5f2ec}
.xv-company .panel-eyebrow{color:var(--xv-gold-soft)}
.xv-company-logo{display:block;width:min(220px,70%);height:auto;margin:6px 0 14px}
.xv-company address{color:#d8d2c5}
.xv-copy{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.xv-copy .xv-tick{width:18px;height:18px;flex:none}
.xv-copy .xv-tick circle{stroke-dasharray:57;stroke-dashoffset:57}
.xv-copy .xv-tick path{stroke-dasharray:20;stroke-dashoffset:20}
.xv-copy.is-done{background:var(--xv-gold);border-color:var(--xv-gold);color:#141414;animation:xv-pop .45s var(--xv-ease)}
.xv-copy.is-done .xv-tick circle{animation:xv-draw .5s var(--xv-ease) forwards}
.xv-copy.is-done .xv-tick path{animation:xv-draw .35s .25s var(--xv-ease) forwards}
@keyframes xv-draw{to{stroke-dashoffset:0}}
@keyframes xv-pop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.xv-open.is-closed i,.xv-copy.is-done,.xv-copy.is-done .xv-tick *{animation:none!important;stroke-dashoffset:0!important}}

/* all products page */
.products .section-heading h1{margin:14px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:1.04;letter-spacing:-.02em;color:var(--xv-ink)}
.products .section-heading>div{display:block}
@media(max-width:700px){.products.section-wrap{padding-block:56px 64px}}

/* styled page */
.styled-page .styled{padding-bottom:40px}
.styled-page .styled-intro{padding-block:44px 44px}
.styled-page .styled-page-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.02em;line-height:1.05}

/* 404 */
.xv-404-body{margin:0;background:#0b0c0c}
.xv-404{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:48px 24px;overflow:hidden;text-align:center;color:#f5f2ec;background:radial-gradient(60% 50% at 50% 0%,rgba(197,183,163,.16),transparent 72%),linear-gradient(180deg,#141516,#0b0c0c)}
.xv-404-logo{display:block;width:min(170px,44vw);margin-bottom:clamp(28px,7vh,64px)}
.xv-404-logo img{display:block;width:100%;height:auto}
.xv-404-num{position:absolute;left:50%;top:52%;translate:-50% -50%;margin:0;font-family:var(--font-display);font-size:clamp(11rem,38vw,26rem);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(197,183,163,.16);user-select:none;pointer-events:none;animation:xv-404-float 9s ease-in-out infinite}
.xv-404 .info-eyebrow,.xv-404 h1,.xv-404-text,.xv-404-actions{position:relative}
.xv-404 .info-eyebrow{color:var(--xv-gold-soft)}
.xv-404 h1{margin:14px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.02em;line-height:1.05;color:#fff}
.xv-404-text{max-width:420px;margin:16px 0 0;color:#cfc8ba;line-height:1.65}
.xv-404-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin-top:30px}
.xv-404 .info-button{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;background:var(--xv-gold);color:#141414;font-weight:600;text-decoration:none;transition:background .25s ease,transform .3s var(--xv-ease)}
.xv-404 .info-button:hover{background:#d9c9a8;transform:translateY(-2px)}
.xv-404-link{color:#e6d8b8;text-decoration:none;border-bottom:1px solid rgba(197,183,163,.5);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.xv-404-link:hover{color:#fff;border-color:#fff}
.xv-404 a:focus-visible{outline:2px solid var(--xv-gold);outline-offset:4px}
.xv-404 .info-eyebrow,.xv-404 h1,.xv-404-text,.xv-404-actions,.xv-404-logo{animation:xv-404-in .9s var(--xv-ease) both}
.xv-404 h1{animation-delay:.08s}.xv-404-text{animation-delay:.16s}.xv-404-actions{animation-delay:.24s}
@keyframes xv-404-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes xv-404-float{50%{translate:-50% calc(-50% - 10px)}}
@media(prefers-reduced-motion:reduce){.xv-404 *{animation:none!important}}

/* ---------- Trust strip redesign ---------- */
.benefits.trust-strip{background:linear-gradient(180deg,#fbf9f4,#f6f3ed)}
.trust-strip .benefit-symbol{box-sizing:border-box;flex:none;width:64px;height:64px;padding:16px;margin:0 0 18px;border-radius:50%;color:var(--xv-gold-deep);background:radial-gradient(circle at 30% 25%,#fffdfa,#f1e8d4);border:1px solid #e0d2b0;box-shadow:0 10px 22px -12px rgba(120,96,50,.55);transition:transform .5s var(--xv-ease),box-shadow .4s ease,border-color .3s ease}
.trust-strip .benefit-copy h2{margin:0 0 8px;font-family:var(--font-sans);font-size:1.12rem;font-weight:600;letter-spacing:-.01em;color:var(--xv-ink)}
.trust-strip .benefit-copy p{margin:0 auto;max-width:30ch;color:#6b665d;line-height:1.6;font-size:.95rem}
@media(min-width:600px){
  .trust-strip .benefit-grid{gap:18px;max-width:1120px}
  .trust-strip .benefit,.trust-strip .benefit:first-child,.trust-strip .benefit:last-child{position:relative;padding:34px 26px 32px;border:1px solid var(--xv-edge);border-radius:22px;background:var(--xv-card);box-shadow:0 1px 2px rgba(60,48,28,.04),0 16px 34px -24px rgba(60,48,28,.4);overflow:hidden;transition:transform .5s var(--xv-ease),box-shadow .5s var(--xv-ease),border-color .3s ease}
  .trust-strip .benefit::before{content:"";position:absolute;left:24%;right:24%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--xv-gold),transparent);transform:scaleX(.35);opacity:.55;transition:transform .6s var(--xv-ease),opacity .4s ease}
  @media(hover:hover){
    .trust-strip .benefit:hover{transform:translateY(-5px);border-color:#d9c9a8;box-shadow:0 1px 2px rgba(60,48,28,.05),0 26px 42px -24px rgba(60,48,28,.5)}
    .trust-strip .benefit:hover::before{transform:scaleX(1);opacity:1}
    .trust-strip .benefit:hover .benefit-symbol{transform:translateY(-2px) scale(1.06);border-color:var(--xv-gold);box-shadow:0 14px 26px -12px rgba(120,96,50,.65)}
  }
}
@media(max-width:599px){
  .trust-strip .benefit-symbol{width:60px;height:60px;padding:15px}
  .trust-strip .benefit{padding-block:6px 12px}
}
/* Phones: slightly quicker auto-advance for the benefits dots (script.js timer matches). */
.benefit-controls.running button.active span::after{animation-duration:3.5s}
@media(prefers-reduced-motion:reduce){.trust-strip .benefit,.trust-strip .benefit-symbol,.trust-strip .benefit::before{transition:none}}

/* ---------- Cart drawer (look only; behavior lives in script.js) ---------- */
.cart-drawer{background:var(--xv-warm);box-shadow:-28px 0 70px -20px rgba(15,12,6,.45)}
.cart-drawer::backdrop{background:rgba(12,11,9,.55);backdrop-filter:blur(4px)}
@media(prefers-reduced-motion:no-preference){
  .cart-drawer[open]{animation:xv-drawer .55s var(--xv-ease) both}
  .cart-drawer[open]::backdrop{animation:xv-fade .4s ease both}
  .cart-drawer[open] .cart-add{animation:xv-rise .6s .12s var(--xv-ease) both}
}
@keyframes xv-drawer{from{translate:36px 0;opacity:.4}to{translate:0 0;opacity:1}}
@keyframes xv-fade{from{opacity:0}to{opacity:1}}
@keyframes xv-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.cart-heading{position:sticky;background:radial-gradient(60% 140% at 100% 0%,rgba(197,183,163,.22),transparent 65%),linear-gradient(115deg,#121314,#2a2b2e)}
.cart-heading::after{content:"";position:absolute;left:25px;right:25px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--xv-gold),transparent)}
.cart-eyebrow{color:var(--xv-gold-soft);letter-spacing:.2em}
.cart-heading h2{font-family:var(--font-display);font-weight:400;font-size:2rem;letter-spacing:-.005em;line-height:1.1}
.cart-close{border-radius:50%;border-color:rgba(197,183,163,.45);transition:background .2s ease,border-color .2s ease,transform .3s var(--xv-ease)}
.cart-close:hover{background:rgba(255,255,255,.1);border-color:var(--xv-gold-soft);transform:rotate(90deg)}
.cart-shell{background:var(--xv-warm)}
.cart-row{border-bottom-color:var(--xv-edge)}
.cart-row img{border-radius:14px;background:#fff;border:1px solid var(--xv-edge);box-shadow:0 10px 20px -14px rgba(60,48,28,.5)}
.cart-row h3{font-size:1rem;color:var(--xv-ink)}
.cart-product-size{color:#7a7468}
.cart-row p{color:var(--xv-gold-deep);font-size:.95rem}
.cart-item-actions .cart-quantity{border-radius:999px;border-color:#dccfae;background:var(--xv-card);overflow:hidden}
.cart-item-actions .cart-quantity button:hover{background:#f1e8d4}
.cart-item-actions .cart-quantity output{border-color:#eadfc7}
.cart-item-actions .cart-remove{color:#7a7468;transition:color .2s ease}
.cart-item-actions .cart-remove:hover{color:#8a3d2f}
.cart-suggestions-heading h3,.cart-suggestions h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:0}
.cart-add{border-color:var(--xv-edge);border-radius:16px;background:var(--xv-card);box-shadow:0 12px 24px -22px rgba(60,48,28,.6);transition:border-color .25s ease,transform .35s var(--xv-ease),box-shadow .35s ease}
.cart-add:hover{border-color:#d9c9a8;background:var(--xv-card);transform:translateY(-2px);box-shadow:0 18px 30px -22px rgba(60,48,28,.7)}
.cart-add img{border-radius:12px}
.cart-add-icon{border-radius:50%;background:var(--xv-gold);color:#141414;transition:transform .35s var(--xv-ease),background .2s ease}
.cart-add:hover .cart-add-icon{transform:rotate(90deg) scale(1.08);background:#c9b78f}
.cart-footer{background:var(--xv-card);border-top:1px solid var(--xv-edge);margin-inline:-25px;padding:20px 25px 4px;box-shadow:0 -18px 30px -26px rgba(60,48,28,.45)}
.cart-subtotal strong{color:var(--xv-ink)}
.cart-checkout{border-radius:999px!important}
.cart-checkout:not(:disabled){position:relative;overflow:hidden;background:linear-gradient(105deg,#b59d6e,#a88f62 55%,#8f7849)!important;border-color:transparent!important;color:#fff;box-shadow:0 14px 26px -14px rgba(120,96,50,.8);transition:transform .3s var(--xv-ease),box-shadow .3s ease,filter .2s ease}
.cart-checkout:not(:disabled)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);translate:-120% 0;transition:translate .8s var(--xv-ease)}
.cart-checkout:not(:disabled):hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(120,96,50,.9)}
.cart-checkout:not(:disabled):hover::after{translate:120% 0}
.cart-checkout:disabled{border-radius:999px;background:#ece5d4;color:#8a8372;cursor:not-allowed}
.cart-checkout-note{color:#6b665d;text-align:center}
.cart-footer p{text-align:center}
.cart-empty-state{text-align:center}
.cart-empty-icon{color:var(--xv-gold-deep)}
.cart-continue{border-radius:999px;background:var(--xv-gold);color:#141414;border:0;padding:13px 26px;font-weight:600;cursor:pointer;transition:background .25s ease,transform .3s var(--xv-ease)}
.cart-continue:hover{background:#d9c9a8;transform:translateY(-2px)}
@media(max-width:480px){.cart-footer{margin-inline:-18px;padding-inline:18px}.cart-heading::after{left:18px;right:18px}.cart-heading h2{font-size:1.8rem}}

/* ---------- Cart: plus rises, minus and remove fall ---------- */
.cart-drawer .cart-quantity output{position:relative;overflow:hidden}
.cart-drawer .qty-num{display:block;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
  /* The number rolls in from below when you add, from above when you take away. */
  .cart-drawer .cart-row.quantity-added .cart-quantity output{animation:none}
  .cart-drawer .cart-row.quantity-added .qty-num{animation:xv-num-up .5s var(--xv-ease) both}
  .cart-drawer .cart-row.quantity-reduced .cart-quantity output{animation:none}
  .cart-drawer .cart-row.quantity-reduced .qty-num{animation:xv-num-down .5s var(--xv-ease) both}
  /* The buttons: plus lifts, minus presses down, with a gold flash. */
  .cart-drawer .cart-row.quantity-added .cart-quantity button[data-delta="1"]{animation:xv-plus-up .55s var(--xv-ease)}
  .cart-drawer .cart-row.quantity-reduced .cart-quantity button[data-delta="-1"]{animation:xv-minus-down .55s var(--xv-ease)}
  /* Price follows the same direction. */
  .cart-drawer .cart-row.quantity-added .cart-row-price,.cart-drawer .cart-row.quantity-added>div>p{animation:xv-num-up .55s var(--xv-ease) both}
  .cart-drawer .cart-row.quantity-reduced>div>p{animation:xv-num-down .55s var(--xv-ease) both}
  /* The row itself: a small lift on add, a small settle on reduce. */
  .cart-drawer .cart-row.quantity-added{animation:xv-row-up .55s var(--xv-ease) both}
  .cart-drawer .cart-row.quantity-reduced{animation:xv-row-down .5s var(--xv-ease) both}
  /* Remove (and minus down to zero): the row drops away. */
  .cart-drawer .cart-row.is-removing{animation:xv-row-out .32s cubic-bezier(.5,0,.9,.4) forwards}
  .cart-drawer .cart-remove:active{transform:translateY(2px)}
}
@keyframes xv-num-up{0%{transform:translateY(105%);opacity:0}60%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes xv-num-down{0%{transform:translateY(-105%);opacity:0}60%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes xv-plus-up{0%{transform:translateY(0) scale(1);background:#f1e8d4}35%{transform:translateY(-8px) scale(1.18);background:#e9d9ae}70%{transform:translateY(1px) scale(.97)}100%{transform:translateY(0) scale(1);background:transparent}}
@keyframes xv-minus-down{0%{transform:translateY(0) scale(1);background:#f1e8d4}35%{transform:translateY(7px) scale(.88);background:#ecd9d2}70%{transform:translateY(-1px) scale(1.02)}100%{transform:translateY(0) scale(1);background:transparent}}
@keyframes xv-row-up{0%{transform:translateY(10px);opacity:.8}60%{transform:translateY(-4px);opacity:1}100%{transform:translateY(0)}}
@keyframes xv-row-down{0%{transform:translateY(-6px)}60%{transform:translateY(4px)}100%{transform:translateY(0)}}
@keyframes xv-row-out{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(34px) scale(.96);filter:blur(2px)}}

/* ---------- Cart: empty state ---------- */
.cart-drawer .cart-empty-state{position:relative;isolation:isolate;overflow:hidden;margin-top:20px;padding:44px 24px 38px;border:1px solid rgba(197,183,163,.28);border-radius:22px;text-align:center;color:#f5f2ec;background:radial-gradient(70% 60% at 50% 0%,rgba(197,183,163,.26),transparent 70%),linear-gradient(150deg,#141516,#2a2b2e);box-shadow:0 26px 44px -30px rgba(15,12,6,.8)}
.cart-drawer .cart-empty-state::before{content:"XV";position:absolute;z-index:-1;right:-6px;bottom:-30px;font-family:var(--font-display);font-size:9.5rem;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(197,183,163,.28);pointer-events:none;user-select:none}
.cart-drawer .cart-empty-state::after{content:"";position:absolute;z-index:-1;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--xv-gold),transparent)}
.cart-drawer .cart-empty-icon{position:relative;display:grid;place-items:center;width:84px;height:84px;margin:0 auto 22px;border-radius:50%;color:var(--xv-gold-soft);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid rgba(197,183,163,.45)}
.cart-drawer .cart-empty-icon svg{width:34px;height:36px}
.cart-drawer .cart-empty-icon::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(197,183,163,.4)}
.cart-drawer .cart-empty-title{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:2rem;letter-spacing:-.005em;color:#fff}
.cart-drawer .cart-empty-description{max-width:26ch;margin:0 auto 24px;color:#cfc8ba;line-height:1.6}
.cart-drawer .cart-continue{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(105deg,#c9b78f,#a88f62);color:#141414;font-family:var(--font-sans);font-weight:650;cursor:pointer;box-shadow:0 14px 26px -14px rgba(0,0,0,.7)}
.cart-drawer .cart-continue::after{content:"\2192";transition:transform .3s var(--xv-ease)}
.cart-drawer .cart-continue:hover::after{transform:translateX(4px)}
@media(prefers-reduced-motion:no-preference){
  .cart-drawer .cart-empty-icon::before{animation:xv-orbit 14s linear infinite}
  .cart-drawer .cart-empty-icon svg{animation:xv-bob 3.4s ease-in-out 1.4s infinite}
  .cart-drawer .cart-empty-state::before{animation:xv-xv 7s ease-in-out infinite}
  .cart-drawer .cart-empty-state::after{animation:xv-glint 4.5s ease-in-out infinite}
}
@keyframes xv-orbit{to{transform:rotate(360deg)}}
@keyframes xv-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes xv-xv{0%,100%{-webkit-text-stroke-color:rgba(197,183,163,.2);transform:translateY(0)}50%{-webkit-text-stroke-color:rgba(197,183,163,.5);transform:translateY(-6px)}}
@keyframes xv-glint{0%,100%{opacity:.35}50%{opacity:1}}
/* ---------- Homepage collection: desktop showcase (1100px and wider only) ----------
   Smaller cards on each side with an animated MODE XV medallion in the middle.
   The medallion sits after both cards in index.html so nothing else shifts,
   and it stays hidden on tablets and phones, which keep their current layout. */
.xv-showcase{display:none}
@media(min-width:1100px){
  .products .product-grid:has(>.xv-showcase){grid-template-columns:minmax(0,340px) minmax(250px,1fr) minmax(0,340px);gap:clamp(28px,3vw,44px);align-items:center;justify-content:center}
  .products .product-grid:has(>.xv-showcase)>.product-card:first-child{grid-column:1;grid-row:1}
  .products .product-grid:has(>.xv-showcase)>.product-card:nth-child(2){grid-column:3;grid-row:1}
  .products .product-grid:has(>.xv-showcase) .product-card{align-self:stretch}
  .xv-showcase{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:20px;min-width:0}
  .xv-showcase-mark{display:flex;align-items:center;align-self:stretch;margin-inline:calc(-1 * clamp(28px,3vw,44px))}
  .xv-showcase-line{position:relative;flex:1;height:1px;overflow:hidden;background:linear-gradient(90deg,transparent,var(--xv-gold-soft) 55%,var(--xv-gold))}
  .xv-showcase-line:last-child{transform:scaleX(-1)}
  .xv-showcase-line::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,#fff7e3,transparent);opacity:0}
  .xv-medallion{position:relative;flex:none;display:grid;place-items:center;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fffdfa,#f1e8d4 78%);border:1px solid #e0d2b0;box-shadow:0 1px 2px rgba(60,48,28,.05),0 24px 44px -26px rgba(120,96,50,.6)}
  .xv-medallion::before{content:"";position:absolute;inset:36px;border-radius:50%;border:1px dashed rgba(168,143,98,.55)}
  .xv-medallion-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .xv-medallion-ring text{fill:var(--xv-gold-deep);font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.12em}
  .xv-medallion-mono{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:radial-gradient(ellipse at 50% 0%,rgba(190,190,190,.2),transparent 70%),linear-gradient(135deg,#151617,#34353a 50%,#171819);box-shadow:inset 0 0 0 1px rgba(197,183,163,.35),0 14px 28px -12px rgba(20,18,14,.6);font-family:var(--font-display);font-size:3.1rem;line-height:1;letter-spacing:-.02em;color:#d9c9a8}
  @supports((-webkit-background-clip:text) or (background-clip:text)){
    .xv-medallion-mono{color:transparent;background:radial-gradient(ellipse at 50% 0%,rgba(190,190,190,.2),transparent 70%),linear-gradient(135deg,#151617,#34353a 50%,#171819);-webkit-background-clip:border-box;background-clip:border-box}
    .xv-medallion-mono::after{content:"XV";position:absolute;inset:0;display:grid;place-items:center;padding-top:.06em;background:linear-gradient(115deg,#8a7248 20%,#f3e6c8 45%,#c5b7a3 52%,#a88f62 70%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
  }
  .xv-showcase-title{margin:30px 0 0;font-family:var(--font-display);font-size:clamp(1.6rem,2.1vw,2rem);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:var(--xv-ink)}
  .xv-claims{position:relative;width:100%;height:1.6em;margin-top:16px;padding-top:16px;box-sizing:content-box;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6f5c3b}
  .xv-claims::before{content:"";position:absolute;top:0;left:50%;width:34px;height:1px;margin-left:-17px;background:var(--xv-gold)}
  .xv-claims span{position:absolute;left:0;right:0;bottom:0;line-height:1.6;opacity:0}
  .xv-claims span:first-child{opacity:1}
}
@media(min-width:1100px) and (prefers-reduced-motion:no-preference){
  .xv-medallion-ring{animation:xv-sc-spin 48s linear infinite}
  .xv-medallion::before{animation:xv-sc-spin 30s linear infinite reverse}
  .xv-medallion-mono{animation:xv-sc-glow 5s ease-in-out infinite}
  .xv-medallion-mono::after{animation:xv-sc-sheen 6s ease-in-out infinite}
  .xv-showcase-line::after{animation:xv-sc-glint 4.5s var(--xv-ease) infinite}
  .xv-claims span{animation:xv-sc-claim 9s var(--xv-ease) infinite both}
  .xv-claims span:first-child{opacity:0}
  .xv-claims span:nth-child(2){animation-delay:3s}
  .xv-claims span:nth-child(3){animation-delay:6s}
}
@keyframes xv-sc-spin{to{transform:rotate(360deg)}}
@keyframes xv-sc-glow{0%,100%{box-shadow:inset 0 0 0 1px rgba(197,183,163,.35),0 14px 28px -12px rgba(20,18,14,.6)}50%{box-shadow:inset 0 0 0 1px rgba(217,201,168,.7),0 14px 34px -10px rgba(168,143,98,.55)}}
@keyframes xv-sc-sheen{0%,35%{background-position:100% 0}65%,100%{background-position:0 0}}
@keyframes xv-sc-glint{0%{transform:translateX(260%);opacity:0}15%{opacity:1}70%{opacity:1}85%,100%{transform:translateX(-120%);opacity:0}}
@keyframes xv-sc-claim{0%{opacity:0;transform:translateY(8px)}6%,28%{opacity:1;transform:translateY(0)}34%,100%{opacity:0;transform:translateY(-8px)}}
/* ---------- Pinch-zoom on photos and videos (phones) ----------
   These areas only allowed scrolling, which also blocked two-finger zoom.
   Swiping between photos and tapping videos keep working the same. */
.product-gallery .product-media{touch-action:pan-y pinch-zoom}
.video-surface{touch-action:pan-x pan-y pinch-zoom}
/* ==========================================================================
   STEP 22 — Cart: free-shipping progress, shipping line, "unlocks" perk
   ========================================================================== */
.cart-ship{--ship:0;margin:18px 0 2px;padding:14px 16px 15px;border:1px solid var(--xv-edge);border-radius:16px;background:var(--xv-card);box-shadow:0 12px 24px -22px rgba(60,48,28,.6)}
.cart-ship[hidden]{display:none}
.cart-ship-text{display:flex;align-items:center;gap:10px;margin:0 0 11px;color:var(--xv-ink);font-size:.88rem;line-height:1.35}
.cart-ship-text strong{font-weight:600;color:var(--xv-gold-deep);font-variant-numeric:tabular-nums}
.cart-ship-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1e8d4;color:var(--xv-gold-deep)}
.cart-ship-icon svg{width:17px;height:17px}
.cart-ship-track{position:relative;height:6px;border-radius:999px;background:#ece4d3;overflow:hidden}
.cart-ship-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#c5b7a3,var(--xv-gold) 60%,var(--xv-gold-deep));transform:scaleX(var(--ship));transform-origin:left center;transition:transform .7s var(--xv-ease)}
.cart-ship.is-free .cart-ship-icon{background:var(--xv-gold);color:#fff}
.cart-ship.is-free .cart-ship-text strong{color:var(--xv-ink)}
.cart-ship.is-free .cart-ship-fill{background:linear-gradient(90deg,var(--xv-gold),var(--xv-gold-deep))}
.cart-ship-track::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-100%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .cart-ship.just-unlocked .cart-ship-track::after{animation:xv-ship-glint 1.1s .55s var(--xv-ease) both}
  .cart-ship.just-unlocked .cart-ship-icon{animation:xv-ship-pop .6s .5s var(--xv-ease) both}
}
@media (prefers-reduced-motion:reduce){.cart-ship-fill{transition:none}}
@keyframes xv-ship-glint{to{transform:translateX(100%)}}
@keyframes xv-ship-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.cart-footer .cart-ship-row{margin-top:8px;font-size:.88rem;font-weight:500;color:#6b665d}
.cart-footer .cart-ship-row strong{font-size:.95rem;font-weight:600;color:var(--xv-ink);font-variant-numeric:tabular-nums}
.cart-footer .cart-tax-note{margin:10px 0 16px;color:#7a7468;font-size:.8rem}
.cart-add-perk{justify-self:start;margin-top:3px;padding:3px 9px;border-radius:999px;background:#f1e8d4;color:var(--xv-gold-deep);font-size:.68rem;font-weight:600;letter-spacing:.02em}

/* ==========================================================================
   STEP 23 — Homepage collection: wider cards, "Add to bag – price" buttons,
   and the "Better together" card (with the XV medallion) in the middle.
   Desktop: product | pair | product. Tablet: two products, pair below.
   Phones: one product per row, full width, pair card after them.
   ========================================================================== */
.products.section-wrap{max-width:1360px}

/* Heading: title on the left, short line on the right (tablet and up) */
@media(min-width:701px){
  .products .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;text-align:left;margin-bottom:36px}
  .products .section-heading .eyebrow::before{display:none}
  .products .section-heading .eyebrow::after{transform:none;background:linear-gradient(90deg,var(--xv-gold),transparent)}
  .products .section-heading>p{max-width:300px;margin:0 0 8px;text-align:right}
}

/* Grid */
.products .product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
@media(min-width:1100px){
  .products .product-grid:has(>.xv-pair):not(:has(>article:nth-of-type(3))){grid-template-columns:minmax(0,1fr) minmax(300px,.78fr) minmax(0,1fr);gap:22px}
  .products .product-grid:has(>.xv-pair):not(:has(>article:nth-of-type(3)))>article:nth-of-type(1){grid-column:1;grid-row:1}
  .products .product-grid:has(>.xv-pair):not(:has(>article:nth-of-type(3)))>article:nth-of-type(2){grid-column:3;grid-row:1}
  .products .product-grid:has(>.xv-pair):not(:has(>article:nth-of-type(3)))>.xv-pair{grid-column:2;grid-row:1}
  .products .product-grid:has(>article:nth-of-type(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Product cards: description above the button, button pinned to the bottom */
.products .product-grid .product-card{padding:12px 12px 18px}
.products .product-grid .product-card .product-description{min-height:0;margin:8px 6px 18px!important;line-height:1.5}
.products .product-grid .product-card .product-purchase{display:block;margin:auto 6px 0;min-height:0}

/* Wide "Add to bag – $17.99" button */
.products .quick-add-wrap.is-wide{position:static;display:flex;gap:8px;width:100%;height:auto}
.products .quick-add.quick-add-wide{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;width:auto;height:52px;padding:0 20px;border:1px solid var(--xv-ink);border-radius:999px;background:var(--xv-ink);color:#f6f3ed;font:600 .95rem/1 var(--font-sans,inherit);letter-spacing:.005em;white-space:nowrap;cursor:pointer;box-shadow:0 10px 20px -12px rgba(29,28,27,.6)}
.products .quick-add.quick-add-wide:hover{background:#3a3226;border-color:#3a3226;transform:translateY(-2px);box-shadow:0 14px 24px -12px rgba(74,63,44,.65)}
.products .quick-add.quick-add-wide:active{transform:translateY(0) scale(.98)}
.products .quick-add.quick-add-wide:disabled{background:#d9d2c4;border-color:#d9d2c4;color:#6b665d;box-shadow:none;cursor:not-allowed;transform:none}
.products .quick-add.quick-add-wide .add-bag-icon{position:relative;display:block;flex:none;width:20px;height:21px;margin-right:2px}
.products .quick-add.quick-add-wide svg{width:20px;height:21px}
.products .quick-add.quick-add-wide .price{font:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}
.products .quick-add-wrap.is-wide .quick-remove{position:static;flex:none;width:52px;height:52px;border:1px solid var(--xv-edge);background:var(--xv-card);color:var(--xv-ink);box-shadow:none}
.products .quick-add-wrap.is-wide .quick-remove:hover{background:#f1e8d4;transform:none}
.products .quick-add-wrap.is-wide .quick-remove span{width:14px}

/* "Better together" card */
.xv-pair{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:40px 30px;border-radius:22px;background:radial-gradient(70% 55% at 50% 0%,rgba(197,183,163,.2),transparent 70%),linear-gradient(160deg,#141516,#2a2b2e);color:#f6f3ed;text-align:center;box-shadow:0 1px 2px rgba(20,18,14,.08),0 24px 44px -24px rgba(20,18,14,.55)}
.xv-pair::after{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--xv-gold),transparent)}
.xv-pair .xv-medallion{position:relative;flex:none;display:grid;place-items:center;width:var(--medal,190px);height:var(--medal,190px);border-radius:50%;background:radial-gradient(circle at 32% 26%,#fffdfa,#f1e8d4 78%);border:1px solid #e0d2b0;box-shadow:0 22px 40px -22px rgba(0,0,0,.7)}
.xv-pair .xv-medallion::before{content:"";position:absolute;inset:18%;border-radius:50%;border:1px dashed rgba(168,143,98,.55)}
.xv-pair .xv-medallion-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xv-pair .xv-medallion-ring text{fill:var(--xv-gold-deep);font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.12em}
.xv-pair .xv-medallion-mono{position:relative;display:grid;place-items:center;width:53%;height:53%;border-radius:50%;background:linear-gradient(135deg,#151617,#34353a 50%,#171819);box-shadow:inset 0 0 0 1px rgba(197,183,163,.35),0 14px 28px -12px rgba(20,18,14,.6);font-family:var(--font-display);font-size:calc(var(--medal,190px) * .25);line-height:1;color:#d9c9a8}
.xv-pair-body{display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px}
.xv-pair-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,2.6vw,2.5rem);line-height:1.05;letter-spacing:-.01em;color:#fff}
.xv-pair-copy{margin:12px 0 0;max-width:30ch;color:#cfc8ba;font-size:.95rem;line-height:1.55}
.xv-pair-price{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.xv-pair-price strong{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.xv-pair-ship{padding:4px 11px;border-radius:999px;background:rgba(197,183,163,.16);color:#e3d6bb;font-size:.78rem;font-weight:600}
.xv-pair-add{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:20px;padding:12px 18px;line-height:1.25!important;text-align:center;border:0;border-radius:999px;background:#f6f3ed;color:var(--xv-ink);font:600 .95rem/1 var(--font-sans,inherit);cursor:pointer;transition:background .2s ease,transform .3s var(--xv-ease)}
.xv-pair-add:hover{background:#fff;transform:translateY(-2px)}
.xv-pair-add:active{transform:scale(.98)}
.xv-pair-add[hidden]{display:none}
.xv-pair-add:focus-visible{outline:2px solid var(--xv-gold-soft);outline-offset:3px}
.xv-pair-status{min-height:1.4em;margin:12px 0 0;color:#cfc8ba;font-size:.8rem;line-height:1.4}
.xv-pair-status:empty{margin:0;min-height:0}
.xv-pair.is-solo .xv-pair-copy,.xv-pair.is-solo .xv-pair-price{display:none}
@media(prefers-reduced-motion:no-preference){
  .xv-pair .xv-medallion-ring{animation:xv-sc-spin 48s linear infinite}
  .xv-pair .xv-medallion::before{animation:xv-sc-spin 30s linear infinite reverse}
  .xv-pair .xv-medallion-mono{animation:xv-sc-glow 5s ease-in-out infinite}
}

/* Tablet: two products side by side, pair card full width underneath */
@media(min-width:701px) and (max-width:1099px){
  .products .product-grid>.xv-pair{grid-column:1/-1;flex-direction:row;justify-content:center;gap:44px;padding:34px 40px;text-align:left}
  .xv-pair{--medal:170px}
  .xv-pair-body{align-items:flex-start}
  .xv-pair-price{justify-content:flex-start}
}
@media(min-width:1100px){.products .product-grid:has(>article:nth-of-type(3))>.xv-pair{grid-column:1/-1;flex-direction:row;gap:44px;text-align:left}}

/* Phones: one product per row, full width */
@media(max-width:700px){
  .products .product-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .products .product-grid .product-card{padding:10px 10px 16px;border-radius:20px}
  .products .product-grid .product-card .product-gallery .product-media{border-radius:14px}
  .products .product-grid .product-card .product-category{margin-top:16px;min-height:0;font-size:.7rem;letter-spacing:.14em}
  .products .product-grid .product-card h2{min-height:0;margin:6px 0 8px;font-size:1.4rem;line-height:1.15}
  .products .product-grid .product-card h2 span{display:inline}
  .products .product-grid .product-card .description-desktop{display:inline}
  .products .product-grid .product-card .description-mobile{display:none}
  .products .product-grid .product-card .product-description{font-size:.95rem;margin:6px 4px 16px!important}
  .products .product-grid .product-card .review-chip{min-height:32px;gap:7px;padding:5px 9px 5px 7px;font-size:.8rem}
  .products .product-grid .product-card .review-chip .rating-stars{width:84px;height:17px}
  .products .product-grid .product-card .review-count-long{display:inline}
  .products .product-grid .product-card .review-count-short{display:none}
  .products .product-grid .product-card .product-purchase{margin:auto 4px 0}
  .xv-pair{--medal:150px;gap:22px;padding:34px 22px;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.products .quick-add.quick-add-wide,.xv-pair-add{transition:none}}

/* ==========================================================================
   STEP 25 — The XV Set on the homepage: three cards (Pomade, Powder, Set)
   ========================================================================== */
@media(min-width:860px){
  .products .product-grid:has(>article:nth-of-type(3)){grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media(min-width:701px) and (max-width:859px){
  .products .product-grid>article:nth-of-type(3):last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}
}
.products .product-gallery{position:relative}
.products .card-save{position:absolute;z-index:3;top:12px;left:12px;padding:6px 12px;border-radius:999px;background:var(--xv-ink);color:#f6f3ed;font-size:.75rem;font-weight:600;letter-spacing:.02em;box-shadow:0 6px 14px -8px rgba(20,18,14,.6);pointer-events:none}
.products .product-media-empty{position:relative;display:block;aspect-ratio:1;border-radius:15px;background:linear-gradient(160deg,#e8e0d2,#d9cfbf)}
.products .card-includes{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:32px;margin:2px 6px 0;color:#5f5a52;font-size:.9rem}
.products .card-includes span{font-weight:600;color:var(--xv-ink)}
.products .card-includes s{color:#8a8372;font-variant-numeric:tabular-nums}
.products .product-card.is-bundle{border-color:#d8cdb9}
@media(max-width:700px){
  .products .card-save{top:10px;left:10px;font-size:.72rem}
  .products .product-grid .product-card .card-includes{margin:2px 4px 0;font-size:.9rem}
}

/* ==========================================================================
   STEP 26 — Collection section: richer background, logo-style titles,
   charcoal gradient buttons and a slow word ticker
   ========================================================================== */
.products.section-wrap{isolation:isolate}
/* Full-width warm backdrop with two soft glows, drifting light beams and a large XV watermark */
.xv-collection-bg{position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);overflow:hidden;pointer-events:none;background:radial-gradient(55% 45% at 88% 6%,rgba(197,183,163,.42),transparent 70%),radial-gradient(45% 40% at 6% 92%,rgba(168,143,98,.2),transparent 72%),linear-gradient(180deg,#f2ece2 0%,#e6dccb 100%)}
.xv-collection-bg::before{content:"";position:absolute;inset:0;opacity:.35;background-image:radial-gradient(rgba(120,96,50,.18) .6px,transparent .7px);background-size:5px 5px}
.xv-beam{position:absolute;top:-30%;left:8%;width:22%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(18deg);filter:blur(18px)}
.xv-beam-2{left:58%;width:14%;opacity:.7}
.xv-watermark{position:absolute;right:max(2vw,calc(50% - 760px));top:-2%;font-family:var(--font-display);font-size:clamp(14rem,30vw,30rem);line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.2px rgba(168,143,98,.38);white-space:nowrap;user-select:none}
@media(prefers-reduced-motion:no-preference){
  .xv-beam{animation:xv-beam-drift 16s ease-in-out infinite alternate}
  .xv-beam-2{animation-duration:22s;animation-delay:-6s}
}
@keyframes xv-beam-drift{from{translate:-12vw 0}to{translate:14vw 0}}

/* Cards: soft glass so the backdrop shows through */
.products .product-grid .product-card{background:rgba(255,253,250,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:rgba(216,205,185,.9)}

/* Product names in the logo's serif */
.products .product-grid .product-card h2,.products .product-grid .product-card h2 a,.products .product-grid .product-card h2 span{font-family:var(--font-display);font-weight:400;letter-spacing:.01em}
.products .product-grid .product-card h2{font-size:clamp(1.55rem,1.9vw,1.85rem);line-height:1.1;margin:8px 0 10px}
.products .product-grid .product-card h2 span{letter-spacing:.01em}

/* Charcoal gradient buttons and price pill, with a soft sheen on hover */
.products .quick-add.quick-add-wide,.products .card-save{background:linear-gradient(115deg,#121314 0%,#2a2b2e 55%,#46474c 100%);border:1px solid rgba(197,183,163,.38)}
.products .quick-add.quick-add-wide{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 22px -12px rgba(20,18,14,.7)}
.products .quick-add.quick-add-wide::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);translate:-120% 0;transition:translate .8s var(--xv-ease);pointer-events:none}
.products .quick-add.quick-add-wide:hover{background:linear-gradient(115deg,#1a1b1d 0%,#34353a 55%,#55565c 100%);border-color:rgba(197,183,163,.6)}
.products .quick-add.quick-add-wide:hover::after{translate:120% 0}
.products .quick-add.quick-add-wide:disabled{background:#d9d2c4;border-color:#d9d2c4}
.products .quick-add.quick-add-wide:disabled::after{display:none}
.products .card-save{color:#efe4cc;letter-spacing:.04em}

/* Slow ticker of what the products do, in the logo's serif */
.xv-ticker{position:relative;margin:56px calc(50% - 50vw) -40px;padding:20px 0;border-block:1px solid rgba(168,143,98,.28);overflow:hidden;background:rgba(255,253,250,.35)}
.xv-ticker-track{display:flex;width:max-content}
.xv-ticker-group{display:flex;align-items:center;flex:none}
.xv-ticker span{padding:0 26px;font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1;color:#3a332a;white-space:nowrap}
.xv-ticker i{flex:none;width:7px;height:7px;transform:rotate(45deg);background:var(--xv-gold)}
@media(prefers-reduced-motion:no-preference){.xv-ticker-track{animation:xv-ticker 48s linear infinite}}
@keyframes xv-ticker{to{transform:translateX(-50%)}}
@media(max-width:700px){
  .xv-watermark{top:auto;bottom:4%;right:-6vw;font-size:15rem;-webkit-text-stroke-color:rgba(168,143,98,.26)}
  .xv-ticker{margin:40px calc(50% - 50vw) -36px;padding:16px 0}
  .xv-ticker span{padding:0 18px}
  .products .product-grid .product-card h2{font-size:1.65rem}
}
@media(prefers-reduced-motion:reduce){.products .quick-add.quick-add-wide::after{transition:none}}

/* ==========================================================================
   STEP 29 — Warmer product cards with a gold edge (scrolling word strip removed)
   ========================================================================== */
.xv-ticker{display:none}
/* Cards: warm cream-to-sand gradient, thin gold gradient edge, soft inner light */
.products .product-grid .product-card{border:1px solid transparent;background:linear-gradient(165deg,#fffcf6 0%,#f6efe3 55%,#ece2d1 100%) padding-box,linear-gradient(160deg,rgba(201,168,106,.75),rgba(216,205,185,.5) 40%,rgba(168,143,98,.65)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(60,48,28,.05),0 22px 44px -24px rgba(60,48,28,.45)}
.products .product-grid .product-card::after{content:"";position:absolute;right:18px;top:18px;z-index:2;width:26px;height:26px;border-right:1px solid rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.7);border-top-right-radius:6px;pointer-events:none}
.products .product-grid .product-card::before{content:"";position:absolute;left:18px;top:18px;z-index:2;width:26px;height:26px;border-left:1px solid rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.7);border-top-left-radius:6px;pointer-events:none}
.products .product-grid .product-card .product-category{display:inline-flex;align-items:center;gap:10px}
.products .product-grid .product-card .product-category::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--xv-gold),transparent)}
@media(hover:hover){.products .product-grid .product-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(60,48,28,.06),0 30px 54px -24px rgba(60,48,28,.5)}}



/* ==========================================================================
   STEP 30 — "Made for your hair": hair types per product with icons.
   Computer: three cards in a row. Phone: swipe sideways.
   ========================================================================== */
.xv-hair{margin:64px 0 -12px}
.xv-hair-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:22px}
.xv-hair-head h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;letter-spacing:.01em;color:var(--xv-ink)}
.xv-hair-head p{margin:0;color:#6b665d;font-size:.95rem}
.xv-hair-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.xv-hair-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 24px 22px;border:1px solid transparent;border-radius:20px;background:linear-gradient(165deg,#fffcf6 0%,#f4ecdf 100%) padding-box,linear-gradient(160deg,rgba(201,168,106,.7),rgba(216,205,185,.45) 45%,rgba(168,143,98,.6)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 36px -24px rgba(60,48,28,.45);color:var(--xv-ink);text-decoration:none;transition:transform .35s var(--xv-ease),box-shadow .35s var(--xv-ease)}
.xv-hair-card.is-set{background:linear-gradient(165deg,#fbf3e4 0%,#efe1c8 100%) padding-box,linear-gradient(160deg,rgba(201,168,106,.95),rgba(201,168,106,.5) 50%,rgba(138,114,72,.85)) border-box}
.xv-hair-kicker{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--xv-gold-deep)}
.xv-hair-card strong{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.1;letter-spacing:.01em}
.xv-hair-types{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px;padding:0;list-style:none}
.xv-hair-types li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(201,168,106,.35);font-size:.82rem;font-weight:600;color:#3a332a}
.xv-hair-types svg{width:20px;height:20px;flex:none;color:var(--xv-gold-deep)}
.xv-hair-card p{margin:0;color:#5f5a52;font-size:.92rem;line-height:1.5}
.xv-hair-go{margin-top:auto;padding-top:6px;font-size:.85rem;font-weight:600;color:var(--xv-gold-deep)}
.xv-hair-go i{display:inline-block;font-style:normal;transition:transform .3s var(--xv-ease)}
@media(hover:hover){.xv-hair-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 26px 44px -24px rgba(60,48,28,.5)}.xv-hair-card:hover .xv-hair-go i{transform:translateX(4px)}}
.xv-hair-card:focus-visible{outline:2px solid var(--xv-gold);outline-offset:3px}
/* Tablet and phone: one row you swipe sideways, with the next card peeking in */
@media(max-width:900px){
  .xv-hair-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:calc(50% - 50vw);padding:4px 16px 18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .xv-hair-row::-webkit-scrollbar{display:none}
  .xv-hair-card{flex:0 0 min(82vw,360px);scroll-snap-align:start}
  .xv-hair-head p::after{content:" Swipe to see all three.";}
}
@media(max-width:700px){.xv-hair{margin:40px 0 -16px}.xv-hair-card strong{font-size:1.45rem}}
@media(prefers-reduced-motion:reduce){.xv-hair-card,.xv-hair-go i{transition:none}}

/* ==========================================================================
   STEP 31 — Hair cards with warm gradients, colour-coded hair types,
   and a pop-up with a short definition when you tap a type
   ========================================================================== */
/* Richer card backgrounds: each product gets its own warm tone */
.xv-hair-card{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.75),transparent 55%) padding-box,linear-gradient(160deg,#f3e9d8 0%,#e8dac3 55%,#dccaad 100%) padding-box,linear-gradient(160deg,rgba(201,168,106,.85),rgba(216,205,185,.5) 45%,rgba(138,114,72,.75)) border-box}
.xv-hair-card.is-powder{background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.75),transparent 55%) padding-box,linear-gradient(160deg,#eeebe6 0%,#e0dad1 55%,#d0c8bc 100%) padding-box,linear-gradient(160deg,rgba(201,168,106,.85),rgba(216,205,185,.5) 45%,rgba(138,114,72,.75)) border-box}
.xv-hair-card.is-set{background:radial-gradient(120% 80% at 0% 0%,rgba(255,250,236,.7),transparent 55%) padding-box,linear-gradient(160deg,#f0dfbd 0%,#e2c999 55%,#d1b27a 100%) padding-box,linear-gradient(160deg,#c9a86a,#e9d5a8 45%,#8a7248) border-box}
.xv-hair-art{position:absolute;z-index:-1;right:-18px;bottom:-22px;width:150px;height:150px;color:rgba(138,114,72,.16);stroke-width:1}
.xv-hair-name{font-family:var(--font-display);font-size:1.6rem;line-height:1.1;letter-spacing:.01em;color:var(--xv-ink);text-decoration:none}
.xv-hair-name:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.xv-hair-go{text-decoration:none}
@media(max-width:700px){.xv-hair-name{font-size:1.45rem}}

/* Hair-type buttons: each type has its own colour */
.xv-hair-types li{padding:0;border:0;background:none}
.xv-hair-chip{--hc:#8a7248;--hb:#f6eedd;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 9px;border:1px solid color-mix(in srgb,var(--hc) 35%,transparent);border-radius:999px;background:linear-gradient(135deg,var(--hb),color-mix(in srgb,var(--hb) 70%,#fff));color:#2f2a24;font:600 .82rem/1 var(--font-sans,inherit);cursor:pointer;box-shadow:0 4px 10px -6px color-mix(in srgb,var(--hc) 70%,transparent);transition:transform .25s var(--xv-ease),box-shadow .25s ease,border-color .2s ease}
.xv-hair-chip svg{width:20px;height:20px;flex:none;color:var(--hc)}
.xv-hair-chip:hover{transform:translateY(-2px);border-color:var(--hc);box-shadow:0 8px 16px -8px color-mix(in srgb,var(--hc) 80%,transparent)}
.xv-hair-chip:active{transform:scale(.96)}
.xv-hair-chip:focus-visible{outline:2px solid var(--hc);outline-offset:2px}
.t-straight{--hc:#8a6a2f;--hb:#f5e7c8}
.t-wavy{--hc:#4f7466;--hb:#e1ece4}
.t-curly{--hc:#9a5444;--hb:#f3dfd7}
.t-thick{--hc:#5b4330;--hb:#e9ddd0}
.t-thin{--hc:#56677d;--hb:#e2e8ef}
.t-length{--hc:#7a6650;--hb:#efe7dc}

/* Pop-up definition: centred card that pops in, closes on tap outside or Esc */
.xv-pop{--hc:#8a7248;--hb:#f6eedd;width:min(340px,calc(100vw - 40px));margin:auto;padding:26px 24px 22px;border:1px solid color-mix(in srgb,var(--hc) 40%,transparent);border-radius:22px;background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.85),transparent 60%),linear-gradient(160deg,#fffcf6,var(--hb));color:var(--xv-ink);text-align:center;box-shadow:0 30px 60px -20px rgba(20,18,14,.45)}
.xv-pop::backdrop{background:rgba(20,18,14,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.xv-pop-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--hb);border:1px solid color-mix(in srgb,var(--hc) 40%,transparent);color:var(--hc)}
.xv-pop-icon svg{width:34px;height:34px}
.xv-pop h4{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1.1;letter-spacing:.01em}
.xv-pop p{margin:0 auto 18px;max-width:28ch;color:#5f5a52;font-size:.95rem;line-height:1.55}
.xv-pop-close{min-height:44px;padding:0 24px;border:1px solid rgba(197,183,163,.38);border-radius:999px;background:linear-gradient(115deg,#121314,#2a2b2e 55%,#46474c);color:#f6f3ed;font:600 .9rem/1 var(--font-sans,inherit);cursor:pointer}
.xv-pop-close:focus-visible{outline:2px solid var(--hc);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .xv-pop{opacity:0;transform:translateY(14px) scale(.9);transition:opacity .25s ease,transform .45s cubic-bezier(.2,1.3,.4,1),overlay .45s allow-discrete,display .45s allow-discrete}
  .xv-pop:popover-open{opacity:1;transform:none}
  @starting-style{.xv-pop:popover-open{opacity:0;transform:translateY(14px) scale(.9)}}
  .xv-pop::backdrop{opacity:0;transition:opacity .3s ease,overlay .3s allow-discrete,display .3s allow-discrete}
  .xv-pop:popover-open::backdrop{opacity:1}
  @starting-style{.xv-pop:popover-open::backdrop{opacity:0}}
  .xv-pop:popover-open .xv-pop-icon{animation:xv-pop-icon .6s .08s cubic-bezier(.2,1.4,.4,1) both}
}
@keyframes xv-pop-icon{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.xv-hair-chip{transition:none}}

/* Pop-up sits centred on screen (another rule was making it scroll with the page) */
.xv-pop{position:fixed;inset:0;height:fit-content}
/* Hair guide title: centred on computers, with a small label above it */
.xv-hair-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--xv-gold-deep)}
.xv-hair-eyebrow::before,.xv-hair-eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--xv-gold))}
.xv-hair-eyebrow::after{transform:scaleX(-1)}
@media(min-width:901px){
  .xv-hair-head{flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:30px}
  .xv-hair-head p{max-width:46ch}
}
@media(max-width:900px){.xv-hair-head{flex-direction:column;align-items:flex-start;gap:8px}.xv-hair-eyebrow::before{display:none}}

/* Hair guide: hair-strand line art fills the space either side of the centred title on computers */
@media(min-width:901px){
  .xv-hair-head{position:relative}
  .xv-hair-head::before,.xv-hair-head::after{content:"";position:absolute;top:50%;width:min(26vw,320px);height:130px;translate:0 -50%;background:center/contain no-repeat;opacity:.75;pointer-events:none}
  .xv-hair-head::before{left:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20120%22%20fill%3D%22none%22%20stroke%3D%22%23a88f62%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M10%2030c30-22%2050%2022%2080%200s50%2022%2080%200%2050%2022%2060%2010%22/%3E%3Cpath%20d%3D%22M10%2052c30-22%2050%2022%2080%200s50%2022%2080%200%2050%2022%2060%2010%22%20opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M10%2074c30-22%2050%2022%2080%200s50%2022%2080%200%2050%2022%2060%2010%22%20opacity%3D%22.45%22/%3E%3Cpath%20d%3D%22M10%2096c30-22%2050%2022%2080%200s50%2022%2080%200%2050%2022%2060%2010%22%20opacity%3D%22.25%22/%3E%3C/svg%3E")}
  .xv-hair-head::after{right:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20120%22%20fill%3D%22none%22%20stroke%3D%22%23a88f62%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M230%2030c-14%200-20%2014-10%2020s22-4%2014-14-28-8-30%2010%2016%2026%2030%2014M190%2040c-14%200-20%2014-10%2020s22-4%2014-14-28-8-30%2010%2016%2026%2030%2014%22%20opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M150%2054c-14%200-20%2014-10%2020s22-4%2014-14-28-8-30%2010%2016%2026%2030%2014%22%20opacity%3D%22.55%22/%3E%3Cpath%20d%3D%22M110%2066c-14%200-20%2014-10%2020s22-4%2014-14-28-8-30%2010%2016%2026%2030%2014%22%20opacity%3D%22.35%22/%3E%3Cpath%20d%3D%22M70%2076c-14%200-20%2014-10%2020s22-4%2014-14-28-8-30%2010%2016%2026%2030%2014%22%20opacity%3D%22.2%22/%3E%3C/svg%3E")}
}
@media(min-width:901px) and (max-width:1180px){.xv-hair-head::before,.xv-hair-head::after{width:18vw;opacity:.5}}

/* ==========================================================================
   STEP 32 — Fonts, clear tap targets, steadier pop-ups and smoother scrolling
   ========================================================================== */
:root{--font-title:'Cormorant Garamond',Georgia,'Times New Roman',serif;--font-mark:'Cinzel',Georgia,serif}

/* Steadier on phones: no frosted-glass layer under the cards, beams stay still on small screens.
   (On some iPhones these extra layers left a faint tinted film over the photos while scrolling.) */
.products .product-grid .product-card{-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:900px){.xv-beam{animation:none!important}}

/* Section titles: a fuller serif that reads clearly on phones */
.products .section-heading h2,.products .section-heading h1,.xv-hair-head h3{font-family:var(--font-title);font-weight:600;letter-spacing:-.01em;line-height:1.02}
.products .section-heading h2,.products .section-heading h1{font-size:clamp(2.5rem,4.6vw,3.8rem)}
.xv-hair-head h3{font-size:clamp(2.1rem,3.4vw,3rem)}

/* Product card text: three clear levels
   1. Category: small bold gold capitals   2. Name: "MODE XV" in the logo-style capitals, product in a bold serif
   3. Description: plain, softer grey */
.products .product-grid .product-card .product-category{font-weight:700;letter-spacing:.2em;color:var(--xv-gold-deep)}
.products .product-grid .product-card h2,.products .product-grid .product-card h2 a{font-family:var(--font-mark);font-weight:600;font-size:.8rem;letter-spacing:.2em;line-height:1.2;color:var(--xv-gold-deep);text-transform:uppercase}
.products .product-grid .product-card h2{margin:10px 0 10px}
.products .product-grid .product-card h2 span{display:block;margin-top:4px;font-family:var(--font-title);font-weight:700;font-size:clamp(1.8rem,2.2vw,2.15rem);letter-spacing:-.005em;line-height:1.05;color:var(--xv-ink);text-transform:none}
.products .product-grid .product-card h2 a:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.products .product-grid .product-card .product-description{color:#6a645b;font-size:.95rem;line-height:1.55}
.products .card-includes span{font-family:var(--font-title);font-size:1.1rem;font-weight:700}
@media(max-width:700px){
  .products .product-grid .product-card h2,.products .product-grid .product-card h2 a{font-size:.74rem}
  .products .product-grid .product-card h2 span{display:block;font-size:1.85rem}
}

/* Hair guide names and pop-up titles match */
.xv-hair-name{font-family:var(--font-title);font-weight:700;font-size:1.75rem;letter-spacing:-.005em}
.xv-pop h4{font-family:var(--font-title);font-weight:700;font-size:1.85rem}
@media(max-width:700px){.xv-hair-name{font-size:1.6rem}}

/* Hair types look tappable: raised button, coloured "i" badge, press feedback */
.xv-hair-chip{padding-right:6px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 -1px color-mix(in srgb,var(--hc) 30%,transparent),0 6px 12px -8px color-mix(in srgb,var(--hc) 70%,transparent)}
.xv-chip-more{display:grid;place-items:center;flex:none;width:20px;height:20px;margin-left:2px;border-radius:50%;background:var(--hc);color:#fff;font:700 .7rem/1 Georgia,serif;font-style:italic}
.xv-hair-chip:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 0 -1px color-mix(in srgb,var(--hc) 30%,transparent)}
@media(prefers-reduced-motion:no-preference){
  .xv-hair-card:first-child .xv-hair-types li:first-child .xv-chip-more{animation:xv-chip-hint 2.4s ease-in-out 1s 2}
}
@keyframes xv-chip-hint{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hc) 50%,transparent)}50%{box-shadow:0 0 0 6px transparent}}

/* Pop-up opens with a pop and closes instantly (no half-open state) */
@media(prefers-reduced-motion:no-preference){
  .xv-pop{transition:opacity .25s ease,transform .45s cubic-bezier(.2,1.3,.4,1)}
  .xv-pop::backdrop{transition:opacity .3s ease}
}
/* Older phones without pop-up support: show it as a fixed card instead */
@supports not selector(:popover-open){
  .xv-pop{display:none;position:fixed;inset:0;z-index:1000;opacity:1;transform:none}
  .xv-pop.is-open{display:block}
}

/* ==========================================================================
   STEP 33 — Product names: "MODE XV" as a logo mark, a gold diamond, then the name
   Same on all three cards (The XV Set gets the mark too).
   ========================================================================== */
.products .product-grid .product-card h2{margin:10px 0 12px}
.products .product-grid .product-card h2 a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-family:var(--font-mark);font-weight:600;font-size:1rem;letter-spacing:.16em;line-height:1.1;color:var(--xv-ink);text-transform:uppercase;text-decoration:none}
.products .product-grid .product-card.is-bundle h2 a::before{content:"MODE XV";font-family:var(--font-mark);font-weight:600;font-size:1rem;letter-spacing:.16em;color:var(--xv-ink)}
.products .product-grid .product-card h2 span{display:inline-flex;align-items:center;margin:0;font-family:var(--font-title);font-weight:700;font-size:clamp(1.8rem,2.2vw,2.15rem);letter-spacing:-.005em;line-height:1.05;color:var(--xv-ink);text-transform:none}
.products .product-grid .product-card h2 span::before{content:"";flex:none;width:7px;height:7px;margin:0 14px 0 12px;transform:rotate(45deg);background:linear-gradient(135deg,#c9a86a,#8a7248);box-shadow:0 0 0 3px rgba(201,168,106,.18)}
.products .product-grid .product-card h2 a:hover span{text-decoration:none}
.products .product-grid .product-card h2 a:hover{color:var(--xv-ink)}
.products .product-grid .product-card h2 a:hover span{color:var(--xv-gold-deep)}
.products .product-grid .product-card h2 a:focus-visible{outline:2px solid var(--xv-gold);outline-offset:4px;border-radius:4px}
@media(max-width:700px){
  .products .product-grid .product-card h2 a,.products .product-grid .product-card.is-bundle h2 a::before{font-size:.92rem}
  .products .product-grid .product-card h2 span{font-size:1.8rem}
  .products .product-grid .product-card h2 span::before{margin:0 12px 0 10px}
}

/* ==========================================================================
   STEP 34 — "MODE XV" in the logo's thin high-contrast serif (Italiana),
   the product name in the bold serif, and a gold four-point star between them
   ========================================================================== */
.products .product-grid .product-card h2 a,.products .product-grid .product-card.is-bundle h2 a::before{font-family:var(--font-display);font-weight:400;font-size:1.35rem;letter-spacing:.12em;color:var(--xv-ink)}
.products .product-grid .product-card h2 span{font-family:var(--font-title);font-weight:700}
.products .product-grid .product-card h2 span::before{width:15px;height:15px;margin:0 12px 0 10px;transform:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e3cf9e%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23b8975c%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237d6438%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20fill%3D%22url%28%23g%29%22%20d%3D%22M12%200c.9%206.2%205.8%2011.1%2012%2012-6.2.9-11.1%205.8-12%2012-.9-6.2-5.8-11.1-12-12C6.2%2011.1%2011.1%206.2%2012%200Z%22/%3E%3C/svg%3E") center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 1px 2px rgba(138,114,72,.35))}
@media(max-width:700px){
  .products .product-grid .product-card h2 a,.products .product-grid .product-card.is-bundle h2 a::before{font-size:1.2rem}
  .products .product-grid .product-card h2 span::before{width:13px;height:13px;margin:0 10px 0 8px}
}

/* Every card name now comes as "MODE XV" + name from the server, so the extra mark on the set card is not needed */
.products .product-grid .product-card.is-bundle h2 a::before{content:none}

/* ==========================================================================
   STEP 35 — Hair-type taps fixed, smoother swiping, bolder "MODE XV"
   ========================================================================== */
/* The fix: an older ".xv-pop" rule (line ~342) kept every closed pop-up on the page
   as an invisible layer. Those invisible layers sat on top of the hair cards and
   swallowed taps, and made swiping heavier on phones. Closed pop-ups are now removed. */
.xv-pop[popover]:not(:popover-open):not(.is-open){display:none!important}
.xv-pop[popover]{justify-self:auto}

/* "MODE XV" on the product cards: solid Roman capitals that read clearly */
.products .product-grid .product-card h2 a{font-family:var(--font-mark);font-weight:600;font-size:1.3rem;letter-spacing:.14em;color:#141414}
@media(max-width:700px){
  .products .product-grid .product-card h2 a{font-size:1.12rem;letter-spacing:.12em}
}

/* Phones: hair-type buttons a little more compact so they sit side by side on every card */
@media(max-width:700px){
  .xv-hair-card{flex-basis:min(86vw,360px);padding:22px 18px 20px}
  .xv-hair-types{gap:7px 6px}
  .xv-hair-chip{gap:6px;padding:7px 5px 7px 8px;font-size:.78rem}
  .xv-hair-chip svg{width:17px;height:17px}
  .xv-chip-more{width:18px;height:18px;margin-left:1px;font-size:.66rem}
}

/* Smoother sideways swiping on phones: each card paints on its own, lighter shadows */
@media(max-width:900px){
  .xv-hair-row{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .xv-hair-card{contain:paint;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 20px -14px rgba(60,48,28,.4)}
  .xv-hair-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 -1px color-mix(in srgb,var(--hc) 30%,transparent)}
  .xv-hair-card:first-child .xv-hair-types li:first-child .xv-chip-more{animation:none}
}
@media(max-width:380px){.xv-hair-card{padding-inline:16px}.xv-hair-chip{font-size:.72rem;padding-left:7px}.xv-hair-chip svg{width:15px;height:15px}}

/* ==========================================================================
   STEP 36 — Hair-type buttons click every time, lighter swiping on phones
   ========================================================================== */
/* Click fix: the buttons used to move up 2px on hover and down 2px when pressed.
   Clicking near an edge, the button slid out from under the cursor, so the click missed.
   Now the button stays still; hover and press show with colour and shadow only. */
.xv-hair-chip,.xv-hair-chip:hover,.xv-hair-chip:active{transform:none}
.xv-hair-chip{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.xv-hair-chip:hover{border-color:var(--hc);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 -1px color-mix(in srgb,var(--hc) 45%,transparent),0 8px 16px -8px color-mix(in srgb,var(--hc) 80%,transparent)}
.xv-hair-chip:active{background:color-mix(in srgb,var(--hb) 80%,var(--hc) 20%);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--hc) 30%,transparent)}
.xv-chip-more{transition:transform .25s ease}
.xv-hair-chip:hover .xv-chip-more{transform:scale(1.15)}
/* The card no longer lifts on hover either, so nothing inside it moves under the cursor */
@media(hover:hover){.xv-hair-card:hover{transform:none}}

/* Swipe fix: on phones and tablets the blurred light beams behind this section are removed.
   Blur on such large shapes is heavy work for a phone and made the sideways swipe stutter. */
@media(max-width:900px){
  .xv-beam{display:none}
  .xv-hair-row{scroll-snap-type:x proximity;transform:translateZ(0)}
  .xv-hair-card{scroll-snap-align:start;scroll-snap-stop:normal}
  .xv-hair-chip,.xv-chip-more{transition:none}
}

/* ==========================================================================
   STEP 37 — Hair-type pop-ups rebuilt as a plain on-screen card (reliable on iPhone)
   The script moves each pop-up to the end of the page and opens it with a class.
   ========================================================================== */
body>.xv-pop{display:none;position:fixed;inset:0;z-index:1001;width:min(340px,calc(100vw - 40px));height:fit-content;max-height:calc(100dvh - 40px);margin:auto;overflow:auto;opacity:1;transform:none;transition:none}
body>.xv-pop.is-open{display:block}
.xv-pop-scrim{position:fixed;inset:0;z-index:1000;background:rgba(20,18,14,.4);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.xv-pop-scrim.is-open{opacity:1;visibility:visible;transition:opacity .25s ease}
@media(prefers-reduced-motion:no-preference){
  body>.xv-pop.is-open{animation:xv-pop-in .45s cubic-bezier(.2,1.3,.4,1) both}
  body>.xv-pop.is-open .xv-pop-icon{animation:xv-pop-icon .6s .08s cubic-bezier(.2,1.4,.4,1) both}
}
@keyframes xv-pop-in{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}

/* Undo two Step 35/36 phone tweaks on the swipe row; iPhone can mis-place taps with them */
@media(max-width:900px){
  .xv-hair-row{transform:none}
  .xv-hair-card{contain:none}
}

/* ==========================================================================
   STEP 38 — Swipe indicator under the hair cards (phones and tablets),
   and the hair guide sits above anything else on the page
   ========================================================================== */
.xv-hair{position:relative;z-index:5}
.xv-hair-progress{display:none}
@media(max-width:900px){
  .xv-hair-row{padding-bottom:10px}
  .xv-hair-progress{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px auto 0;font-family:var(--font-mark);font-size:.78rem;font-weight:600;letter-spacing:.14em;color:#9a8a6c}
  .xv-hair-progress.is-off{display:none}
  .xv-hp-now{color:var(--xv-gold-deep);min-width:2ch;text-align:right}
  .xv-hp-total{min-width:2ch}
  .xv-hp-track{position:relative;width:min(46vw,180px);height:3px;border-radius:3px;overflow:hidden;background:linear-gradient(90deg,rgba(168,143,98,.16),rgba(168,143,98,.3),rgba(168,143,98,.16))}
  .xv-hp-thumb{position:absolute;left:0;top:0;bottom:0;width:33%;border-radius:3px;background:linear-gradient(90deg,#8a7248,#c9a86a 55%,#e3cf9e);box-shadow:0 0 8px rgba(201,168,106,.55)}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .xv-hp-thumb{transition:transform .12s linear}
}

/* ==========================================================================
   STEP 39 — Footer "Terms and Policies" back in the footer
   The footer menu and the hair-type pop-ups both used the name "xv-pop".
   The pop-up styles were turning the footer link into an invisible box fixed
   in the middle of the screen. This puts the footer link back where it belongs.
   ========================================================================== */
.brand-footer .xv-pop{position:relative;inset:auto;z-index:auto;display:inline-block;justify-self:center;width:auto;height:auto;max-height:none;margin:0;padding:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;text-align:inherit;opacity:1;transform:none;transition:none;animation:none}
@media(max-width:700px){.brand-footer .xv-pop{justify-self:auto}}

/* ==========================================================================
   STEP 40 — "How it styles" on Texture Powder and The XV Set (video from the dashboard)
   Pomade keeps its dark section. Powder: light stone and matte, like the white bottle.
   The XV Set: warm sand into gold, tying the black jar and the white bottle together.
   ========================================================================== */
.xv-story{position:relative;isolation:isolate;padding-block:clamp(48px,6vw,88px);background:none;box-shadow:none;clip-path:none}
@media(min-width:701px){.xv-story{align-items:center}}
.xv-story::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);pointer-events:none}
.xv-story::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);pointer-events:none;opacity:.5;background-image:radial-gradient(rgba(70,60,45,.16) .6px,transparent .7px);background-size:5px 5px}
.xv-story .pomade-story-copy .eyebrow{color:#8a7248}
.xv-story .pomade-story-copy h2{color:#1d1b18}
.xv-story .xv-pillars{border-top-color:rgba(70,60,45,.2)}
.xv-story .xv-pillars li{border-bottom-color:rgba(70,60,45,.2)}
.xv-story .xv-pillars b{color:#8a7248}
.xv-story .xv-pillars span{color:#2a2622}
@media(hover:hover){.xv-story .xv-pillars li:hover{border-bottom-color:#8a7248}}

/* Texture Powder: soft off-white to stone grey, flat and matte */
.xv-story-powder::before{background:radial-gradient(70% 90% at 18% 0%,rgba(255,255,255,.95),transparent 60%),radial-gradient(50% 60% at 95% 100%,rgba(176,170,162,.35),transparent 70%),linear-gradient(165deg,#f7f5f2 0%,#ebe7e2 50%,#dcd7d0 100%);border-block:1px solid #ddd8d1}
.xv-story-powder .pomade-story-copy h2 span{color:#6e675f}
.xv-story-powder .pomade-story-copy::after{-webkit-text-stroke:1px rgba(80,74,66,.13)}
.xv-story-powder .pomade-story-media{background:#d9d4cd;border:1px solid rgba(80,74,66,.16);box-shadow:0 26px 50px -26px rgba(60,54,46,.5),0 0 0 8px rgba(255,255,255,.5)}

/* The XV Set: warm sand into gold */
.xv-story-set::before{background:radial-gradient(70% 90% at 15% 0%,rgba(255,250,238,.9),transparent 60%),radial-gradient(55% 70% at 100% 100%,rgba(176,138,74,.35),transparent 70%),linear-gradient(160deg,#f6ecd9 0%,#ead7b4 55%,#d9bb86 100%);border-block:1px solid #d9c39b}
.xv-story-set .pomade-story-copy h2 span{color:#8a6a2f}
.xv-story-set .pomade-story-copy::after{-webkit-text-stroke:1px rgba(120,90,40,.18)}
.xv-story-set .xv-pillars b{color:#7a5a22}
.xv-story-set .pomade-story-media{background:#2a2420;border:1px solid rgba(120,90,40,.35);box-shadow:0 30px 56px -26px rgba(80,58,24,.6),0 0 0 8px rgba(255,248,232,.45)}

/* Player buttons sit on the video, so they keep their dark glass on light sections */
@media(max-width:700px){.xv-story{padding-block:44px 48px}.xv-story .pomade-story-media{box-shadow:0 20px 40px -22px rgba(60,54,46,.5)}}

/* ==========================================================================
   STEP 41 — "How it styles": clear 01/02/03 numbers in gold circles, bigger points,
   gold lines, brighter heading, and a more visible XV on the empty side.
   Pomade (dark), Texture Powder (light stone) and The XV Set (sand and gold).
   ========================================================================== */
.pomade-story-copy .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.8rem;font-weight:600;letter-spacing:.22em;color:#cdb98f}
.pomade-story-copy .eyebrow::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,#c9a86a,transparent)}
.pomade-story-copy h2 span{color:#dcc8a0}
.pomade-story-copy::after{left:auto;right:-.02em;bottom:-.62em;font-size:clamp(8rem,16vw,15rem);-webkit-text-stroke:1.5px rgba(201,168,106,.34);background:linear-gradient(180deg,rgba(201,168,106,.10),transparent 75%);-webkit-background-clip:text;background-clip:text}
.xv-pillars{border-top:1px solid rgba(201,168,106,.42)}
.xv-pillars li{align-items:center;gap:22px;padding:18px 4px;border-bottom:1px solid rgba(201,168,106,.42)}
.xv-pillars b{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,168,106,.7);background:radial-gradient(circle at 30% 25%,rgba(227,207,158,.22),rgba(201,168,106,.06));font-family:var(--font-sans);font-size:.82rem;font-weight:600;letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums;color:#e3cf9e;transition:background .3s ease,color .3s ease,border-color .3s ease}
.xv-pillars span{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:500;color:#fbf8f2}
@media(hover:hover){.xv-pillars li:hover b{background:#c9a86a;color:#141414;border-color:#c9a86a}}
/* Light sections (powder and set): dark text, white circles with gold edges */
.xv-story.section-wrap{margin-inline:auto;padding-inline:0}
.xv-story .pomade-story-copy .eyebrow{color:#8a7248}
.xv-story .pomade-story-copy h2 span{color:#8a7248}
.xv-story .pomade-story-copy::after{-webkit-text-stroke:1.5px rgba(110,92,60,.3);background:linear-gradient(180deg,rgba(138,114,72,.08),transparent 75%);-webkit-background-clip:text;background-clip:text}
.xv-story .xv-pillars,.xv-story .xv-pillars li{border-color:rgba(110,92,60,.3)}
.xv-story .xv-pillars b{border-color:rgba(138,114,72,.6);background:radial-gradient(circle at 30% 25%,#fff,rgba(255,255,255,.35));color:#7a5f30;box-shadow:0 2px 8px -3px rgba(60,48,28,.3)}
.xv-story .xv-pillars span{color:#1f1c19}
@media(hover:hover){.xv-story .xv-pillars li:hover b{background:#8a7248;color:#fff;border-color:#8a7248}}
.xv-story-set .pomade-story-copy h2 span,.xv-story-set .pomade-story-copy .eyebrow{color:#7a5a22}
.xv-story-set .pomade-story-copy::after{-webkit-text-stroke-color:rgba(120,88,36,.34)}
.xv-story-set .xv-pillars,.xv-story-set .xv-pillars li{border-color:rgba(120,88,36,.32)}
@media(max-width:700px){.xv-pillars li{gap:16px;padding:14px 2px}.xv-pillars b{width:40px;height:40px;font-size:.78rem}.xv-pillars span{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){.xv-pillars b{transition:none}}
/* ==========================================================================
   Compact product cards: DESKTOP ONLY (701px and wider)
   Photo on top (square, no extra zoom), then category, product name,
   description with reviews, and the bag button. On wide screens the card
   size follows the window height so the heading and the full row of cards
   fit on screen together. Phones keep their original layout.
   ========================================================================== */
@media(min-width:701px){
  .products .section-heading{margin-bottom:18px}
  .products .product-grid .product-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "cat" "title" "desc" "rev" "buy";grid-template-rows:auto auto auto auto 1fr auto;align-content:start;padding:10px 10px 12px;container-type:inline-size}
  .products .product-grid .product-card>.product-gallery,.products .product-grid .product-card>.product-media-empty{grid-area:media}
  .products .product-grid .product-card>.product-category{grid-area:cat;margin:12px 6px 0;min-height:0;font-size:.62rem}
  .products .product-grid .product-card>h2{grid-area:title;margin:6px 6px 0;min-height:0}
  .products .product-grid .product-card>h2 a{flex-wrap:nowrap;white-space:nowrap}
  .products .product-grid .product-card>h2 a{font-size:clamp(.78rem,4.3cqi,1.3rem)}
  .products .product-grid .product-card>h2 span{font-size:clamp(.95rem,6.6cqi,1.55rem)}
  .products .product-grid .product-card>h2 span::before{margin:0 8px 0 7px}
  .products .product-grid .product-card>.product-description{grid-area:desc;margin:6px 6px 0!important;min-height:0;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .products .product-grid .product-card>.product-feedback,.products .product-grid .product-card>.card-includes{grid-area:rev;justify-self:start;align-self:start;margin:8px 6px 0;min-height:0}
  .products .product-grid .product-card>.card-includes{display:flex;flex-wrap:nowrap;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden;font-size:.9rem}
  .products .product-grid .product-card>.product-purchase{grid-area:buy;margin:12px 6px 0}
  .products .product-grid .product-card .quick-add.quick-add-wide{min-height:46px}
}
@media(min-width:1100px){
  .products .section-heading h1,.products .section-heading h2{font-size:clamp(2.3rem,3.6vw,3.2rem)}
  .products .product-grid:has(>article:nth-of-type(3)){grid-template-columns:repeat(3,minmax(0,calc(clamp(240px,100vh - 432px,420px) + 20px)));justify-content:center}
}
@media(min-width:1100px) and (max-height:799px){
  .products .product-grid .product-card>.product-description{-webkit-line-clamp:1}
}
/* ==========================================================================
   Ask MODE XV — quick contact form (sheet on product pages, inline on /contact)
   ========================================================================== */
.xv-ask{--ask-gold:#c5b28d;--ask-gold-soft:#e4d6b8;--ask-line:rgba(217,201,168,.22);--ask-ease:cubic-bezier(.22,1,.36,1);width:min(560px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 32px));margin:auto;padding:0;border:1px solid var(--ask-line);border-radius:24px;color:#f5f2ec;background:radial-gradient(70% 60% at 0% 0%,rgba(197,183,163,.18),transparent 70%),linear-gradient(160deg,#1c1d1f,#121314 70%);box-shadow:0 40px 90px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);overflow:auto;overscroll-behavior:contain}
.xv-ask::backdrop{background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.xv-ask[open]{animation:xv-ask-in .42s var(--ask-ease)}
.xv-ask[open]::backdrop{animation:xv-ask-fade .3s ease}
@keyframes xv-ask-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes xv-ask-fade{from{opacity:0}to{opacity:1}}
html.xv-ask-open{overflow:hidden}
.xv-ask-x{position:absolute;right:14px;top:14px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--ask-line);border-radius:50%;background:rgba(255,255,255,.05);color:#f5f2ec;cursor:pointer;transition:background .2s ease,transform .3s var(--ask-ease)}
.xv-ask-x svg{width:17px;height:17px}
.xv-ask-x:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.xv-ask-body{--ask-gold:#c5b28d;--ask-gold-soft:#e4d6b8;--ask-line:rgba(217,201,168,.22);--ask-ease:cubic-bezier(.22,1,.36,1);display:grid;gap:18px;padding:30px 28px 26px;text-align:left}
.xv-contact-main .xv-ask-body{padding:0}
.xv-ask-head{display:grid;gap:8px;padding-right:40px}
.xv-ask-head[hidden]{display:none}
.xv-ask-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ask-gold-soft)}
.xv-ask-eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--ask-gold),transparent)}
.xv-ask-body .xv-ask-title{margin:0;font-family:var(--font-display,Georgia,serif);font-weight:400;font-size:clamp(1.75rem,3.2vw,2.3rem);line-height:1.08;letter-spacing:-.015em;color:#fff}
.xv-ask-body .xv-ask-lead{margin:0;max-width:none;font-size:.92rem;line-height:1.55;color:#c9c2b4}
.xv-ask-form{display:grid;gap:16px;min-width:0}
.xv-ask-topics{margin:0;padding:0;border:0;min-width:0}
.xv-ask-label{display:block;margin-bottom:7px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a99f8e}
.xv-ask-pills{display:flex;flex-wrap:wrap;gap:6px}
.xv-ask-pill{position:relative;cursor:pointer}
.xv-ask-pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.xv-ask-pill span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--ask-line);border-radius:999px;background:rgba(255,255,255,.04);font-size:.84rem;font-weight:500;color:#e6dfd2;transition:background .25s ease,border-color .25s ease,color .25s ease}
.xv-ask-pill:hover span{border-color:rgba(217,201,168,.45)}
.xv-ask-pill input:checked+span{background:linear-gradient(135deg,#e2d4b4,#b39b6d);border-color:transparent;color:#141414;font-weight:600}
.xv-ask-pill input:focus-visible+span{outline:2px solid var(--ask-gold-soft);outline-offset:2px}
.xv-ask-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.xv-ask-ideas[hidden]{display:none}
.xv-ask-ideas::before{content:"Popular questions";flex-basis:100%;font-size:.75rem;color:#9b9284}
.xv-ask-idea{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;border:1px dashed rgba(217,201,168,.32);border-radius:10px;background:transparent;color:#d9d1c2;font:inherit;font-size:.82rem;line-height:1.3;text-align:left;cursor:pointer;animation:xv-ask-pop .35s var(--ask-ease) backwards;transition:background .2s ease,border-color .2s ease,color .2s ease}
.xv-ask-idea:nth-child(2){animation-delay:.04s}.xv-ask-idea:nth-child(3){animation-delay:.08s}.xv-ask-idea:nth-child(4){animation-delay:.12s}
.xv-ask-idea::before{content:"?";display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:rgba(217,201,168,.16);color:var(--ask-gold-soft);font-size:.66rem;font-weight:700}
.xv-ask-idea:hover,.xv-ask-idea.is-on{border-style:solid;border-color:var(--ask-gold);background:rgba(197,178,141,.12);color:#fff}
@keyframes xv-ask-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.xv-ask-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xv-ask-field{position:relative;display:block;min-width:0}
.xv-ask-field[hidden]{display:none}
.xv-ask-wide,.xv-ask-order{grid-column:1/-1}
.xv-ask-field input,.xv-ask-field textarea{display:block;width:100%;min-width:0;padding:0 14px;border:1px solid var(--ask-line);border-radius:12px;background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:1rem;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.xv-ask-field input{height:48px}
.xv-ask-field textarea{min-height:112px;padding:12px 14px 26px;line-height:1.5;resize:vertical}
.xv-ask-field input::placeholder,.xv-ask-field textarea::placeholder{color:#8f877a}
.xv-ask-field input:focus,.xv-ask-field textarea:focus{outline:0;border-color:var(--ask-gold-soft);background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(197,178,141,.16)}
.xv-ask-count{position:absolute;right:12px;bottom:9px;font-size:.72rem;color:#8f877a;pointer-events:none}
.xv-ask-status{min-height:0;margin:-4px 0 0;font-size:.88rem;color:#d4ccbd}
.xv-ask-status:empty{display:none}
.xv-ask-form.is-error .xv-ask-status{color:#f0b8a8}
.xv-ask-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.xv-ask-send{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border:0;border-radius:999px;background:linear-gradient(135deg,#e6d9bb,#a88f62);color:#141414;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;box-shadow:0 12px 26px -14px rgba(168,143,98,1);transition:transform .35s var(--ask-ease),filter .25s ease,box-shadow .35s ease}
.xv-ask-send svg{width:17px;height:17px;transition:transform .35s var(--ask-ease)}
.xv-ask-send:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}
.xv-ask-send:hover:not(:disabled) svg{transform:translateX(3px)}
.xv-ask-send:disabled{opacity:.7;cursor:progress}
.xv-ask-send.is-busy svg{animation:xv-ask-nudge .8s ease-in-out infinite}
@keyframes xv-ask-nudge{50%{transform:translateX(5px)}}
.xv-ask-body .xv-ask-alt{margin:0;max-width:none;font-size:.82rem;color:#a99f8e}
.xv-ask-alt a{color:#e4d6b8;text-underline-offset:3px}
.xv-ask-done{display:grid;justify-items:center;gap:8px;padding:18px 4px 6px;text-align:center;animation:xv-ask-in .5s var(--ask-ease) both}
.xv-ask-done .xv-ask-mark{--mx-gold-soft:#d9c9a8;--mx-ease:cubic-bezier(.22,1,.36,1);width:84px;height:84px;margin-bottom:8px}
.xv-ask-done h3{margin:0;font-family:var(--font-display,Georgia,serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.1rem);line-height:1.1;color:#fff;outline:0}
.xv-ask-body .xv-ask-done p{max-width:38ch;margin:0;font-size:.95rem;line-height:1.6;color:#cfc7b8}
.xv-ask-done strong{display:block;color:#fff;font-weight:600;overflow-wrap:anywhere}
.xv-ask-body .xv-ask-done .xv-ask-tip{font-size:.8rem;color:#9b9284}
.xv-ask-close-btn{margin-top:12px;min-width:150px}
.xv-ask-again{margin-top:10px;padding:0;border:0;background:none;color:#e4d6b8;font:inherit;font-size:.88rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.xv-ask :focus-visible,.xv-ask-body :focus-visible{outline:2px solid var(--ask-gold-soft);outline-offset:3px}
.xv-ask-field :focus-visible{outline:0}
@media(max-width:600px){
  .xv-ask{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}
  .xv-ask[open]{animation:xv-ask-up .45s var(--ask-ease)}
  .xv-ask-body{padding:26px 18px calc(22px + env(safe-area-inset-bottom))}
  .xv-contact-main .xv-ask-body{padding:0}
  .xv-ask-grid{grid-template-columns:1fr;gap:10px}
  .xv-ask-pills{flex-wrap:nowrap;overflow-x:auto;margin-inline:-18px;padding:2px 18px;scrollbar-width:none}
  .xv-ask-pills::-webkit-scrollbar{display:none}
  .xv-contact-main .xv-ask-pills{margin-inline:0;padding-inline:0}
  .xv-ask-pill span{height:34px;padding:0 13px;white-space:nowrap}
  .xv-ask-idea{min-height:30px;padding:5px 11px;font-size:.8rem}
  .xv-ask-label{margin-bottom:5px}
  .xv-ask-field input{height:46px}
  .xv-ask-field textarea{min-height:96px}
  .xv-ask-form{gap:14px}
  .xv-ask-send{flex:1 1 100%}
  .xv-ask-foot{justify-content:center;text-align:center}
}
@keyframes xv-ask-up{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.xv-ask[open],.xv-ask[open]::backdrop,.xv-ask-idea,.xv-ask-done,.xv-ask-send.is-busy svg{animation:none}.xv-ask-x,.xv-ask-send,.xv-ask-send svg{transition:none}}