/* LP-W14 design system, loaded last (LP-W15: less rounded corners and the QA fixes at the end). James, 2026-10-15: "We need softer slightly rounded corners for the design. give
   buttons some depth and preferred button system. the scale and font/menu sizing in relation to hero photo seems off ...
   we need to add some dimension so its not all flat. the video should be in the hero".
   One radius scale, three elevations, one button system (default, primary, accent, small; text links stay tertiary),
   a type scale that grows with the screen, and the vertical brand film in the hero. */
:root{
  --r-xs:3px;--r-sm:5px;--r-md:7px;--r-lg:10px;--r-xl:12px;   /* LP-W15: James, "go with less rounded corners" (was 6/10/14/20/26) */
  --sh-1:0 1px 2px rgba(48,20,37,.06),0 4px 12px -4px rgba(48,20,37,.10);
  --sh-2:0 2px 4px rgba(48,20,37,.06),0 14px 30px -12px rgba(48,20,37,.24);
  --sh-3:0 6px 14px rgba(48,20,37,.08),0 34px 70px -26px rgba(48,20,37,.42);
  --gold:#a8823c;--gold-hi:#e9cf8f;
  --fs-nav:clamp(12px,.4vw + 6.3px,16px);
  --fs-body:clamp(14px,.26vw + 10.3px,17px);
  --fs-small:clamp(12px,.18vw + 9.4px,14px);
  --fs-btn:clamp(13px,.2vw + 10.2px,16px);
  --fs-eyebrow:clamp(12px,.2vw + 9px,14px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- header: translucent, with a soft edge; type that grows with the screen ---------- */
.announcement{font-size:var(--fs-small)}
.site-header{background:rgba(255,248,242,.84);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(48,20,37,.06),0 10px 28px -22px rgba(48,20,37,.45);padding-block:clamp(14px,1.1vw + 6px,30px)}
.site-header .wordmark{font-size:clamp(19px,.75vw + 9px,30px)}
.site-header>nav,.site-header nav{font-size:var(--fs-nav)}
@media(min-width:1024px){.site-header>nav{gap:clamp(18px,1.5vw,36px)}}
.site-header .header-actions,.site-header .header-actions>*{font-size:var(--fs-nav)}
.site-header .bag-btn span{border-radius:var(--r-xs)}

/* ---------- the button system ---------- */
.button{--b-bg:linear-gradient(180deg,#fffdfb 0%,#f6ebe3 100%);--b-fg:var(--ink);--b-bd:rgba(48,20,37,.2);
  display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 24px;
  border:1px solid var(--b-bd);border-radius:var(--r-sm);background:var(--b-bg);color:var(--b-fg);
  font:600 var(--fs-btn)/1.1 Manrope,system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(48,20,37,.08),0 8px 18px -10px rgba(48,20,37,.38);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease)}
.button:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 4px rgba(48,20,37,.1),0 14px 26px -12px rgba(48,20,37,.5)}
.button:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(48,20,37,.2)}
.button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.button span{font-weight:400}
.button.primary,#ensemble-dialog .button,#shared-dialog .button,.fit-actions .button,.selection-actions .button:first-child{
  --b-bg:linear-gradient(180deg,#4b2341 0%,#2a1020 100%);--b-fg:#fff8f2;--b-bd:#2a1020;
  background:linear-gradient(180deg,#4b2341 0%,#2a1020 100%);color:#fff8f2;border-color:#2a1020;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(48,20,37,.25),0 12px 24px -10px rgba(48,20,37,.62)}
.button.primary:hover{filter:brightness(1.08)}
.button.accent{--b-bg:linear-gradient(180deg,#ef2f7d 0%,#c8004f 100%);--b-fg:#fff;--b-bd:#b80049;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(184,0,73,.3),0 12px 24px -10px rgba(184,0,73,.55)}
.button.small{min-height:40px;padding:0 16px;border-radius:var(--r-sm);font-size:clamp(12px,.15vw + 10px,14px)}
.text-link{text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.button,.button:hover{transition:none;transform:none}}

/* ---------- fields ---------- */
.catalog-tools input,.catalog-tools select,.sort-label select,.variant-fields select,.personalization input,
.co-form input,.co-form select,.co-form textarea,.help-form input,.help-form select,.help-form textarea,.newsletter input,#fit-form input{
  border-radius:var(--r-sm);background-color:#fffdfb;box-shadow:inset 0 1px 2px rgba(48,20,37,.06)}
.newsletter button,.help-form button[type=submit]{border-radius:var(--r-sm)}

/* ---------- surfaces with depth ---------- */
.product-card .product-image{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);
  background:radial-gradient(120% 90% at 50% 35%,#fffdfb 0%,#f7ece4 100%);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.product-card:hover .product-image{transform:translateY(-3px);box-shadow:var(--sh-2)}
.product-card .product-label{border-radius:var(--r-xs)}
.card-save{border-radius:50%!important;box-shadow:var(--sh-1)}
.category-card img,.category-card,.story-grid a img,.beds-grid a img,.green-grid button img,.monogram-visual img,.sport-story>img{border-radius:var(--r-md)}
.category-card{overflow:hidden;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.category-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.story-grid a img,.beds-grid a img,.green-grid button img{box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.story-grid a:hover img,.beds-grid a:hover img,.green-grid button:hover img{transform:translateY(-3px);box-shadow:var(--sh-2)}
.monogram-visual img,.sport-story>img{box-shadow:var(--sh-2)}
.ensemble-card{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);background:#fffdfb}
.film-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.film-chapters button{border-radius:var(--r-sm)}
.service-strip{border-radius:var(--r-lg);margin-inline:clamp(16px,4%,72px);box-shadow:var(--sh-1);background:linear-gradient(180deg,#fffdfb,#fbf1ea)}
.faq details{border-radius:var(--r-sm)}
.subcategory-filters button,.catalog-sidebar button{border-radius:var(--r-sm)}
.toast{border-radius:var(--r-sm);box-shadow:var(--sh-2)}
dialog{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
dialog.drawer,#bag-dialog{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.detail-image,.detail-image img,.zoom{border-radius:var(--r-md)}
.variant-fields fieldset label,.variant-finishes label{border-radius:var(--r-sm)}

/* range bar and hero range tiles (range.css) gain the same depth */
.range-tabs{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:#fffdfb;border-color:rgba(48,20,37,.12)}
.range-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#4b2341,#2a1020);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.range-tabs strong{font-size:clamp(28px,1.1vw + 14px,40px)}
.range-tabs span{font-size:var(--fs-small)}
.hero-ranges{gap:12px;border-top:0}
.hero-ranges a{margin:0;border:1px solid rgba(48,20,37,.1);border-radius:var(--r-md);padding:16px 18px 14px;
  background:linear-gradient(180deg,#fffdfb 0%,#fbf0e9 100%);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hero-ranges a:last-child{border-right:1px solid rgba(48,20,37,.1)}
.hero-ranges a:hover,.hero-ranges a[aria-current]{transform:translateY(-2px);box-shadow:var(--sh-2)}
.hero-ranges a[aria-current]{border-color:rgba(168,130,60,.55)}
.hero-ranges .rn{font-size:clamp(28px,1vw + 15px,42px)}
.hero-ranges .rm{font-size:var(--fs-small)}

/* ---------- section type grows with the screen ---------- */
.section-heading h2{font-size:clamp(44px,3.4vw + 10px,104px)}
.section-heading p,.about-section p{font-size:var(--fs-body)}
.eyebrow{font-size:var(--fs-eyebrow)}
.product-caption h3{font-size:clamp(22px,.55vw + 15px,30px)}
.product-format,.product-price,.product-caption .category{font-size:var(--fs-small)}
.catalog-sidebar button,.catalog-tools label{font-size:var(--fs-small)}

/* ---------- the hero: copy sized to the media beside it; media floats as a card ---------- */
/* the hero's glow sits on the page itself, so it has no edge on wide screens */
body{background-image:radial-gradient(1200px 900px at 82% 460px,rgba(230,0,96,.07) 0%,transparent 70%),radial-gradient(1000px 800px at 10% 980px,rgba(168,130,60,.08) 0%,transparent 70%);background-repeat:no-repeat}
.hero h1{font-size:clamp(54px,5.2vw + 4px,140px)}
.hero .eyebrow,#hero-label{font-size:var(--fs-eyebrow)}
.hero-copy>p:not(.eyebrow){font-size:clamp(14px,.4vw + 8.8px,20px);line-height:1.75;max-width:34em}
.hero .button{font-size:var(--fs-btn)}
@media(min-width:701px){
  .hero{max-width:1760px;margin-inline:auto}
  .hero .hero-visual{padding:clamp(16px,2vw,44px) clamp(16px,2.6vw,56px) clamp(16px,1.6vw,32px) 0}
}
.hero .hero-visual>img{border-radius:var(--r-xl);box-shadow:var(--sh-3)}
/* the film, at its own 9:16 so nothing is cropped; pause, sound and the full film sit on it as glass pills */
html .hero .hero-visual video{display:none!important}
.hero-reel{display:none}
html .hero .hero-visual.has-video{--hr:.5625}
html .hero .hero-visual.has-video .hero-reel{display:block;position:relative}
html .hero .hero-visual.has-video .hero-reel video{display:block!important;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  border-radius:var(--r-xl);box-shadow:var(--sh-3);background:#2a1020}
html .hero .hero-visual.has-video>img{display:none!important}
html .hero .hero-visual.has-video .hero-caption{display:none!important}
.hero-film{position:absolute;top:14px;right:14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;z-index:2}
.hero-film>*{display:inline-flex!important;align-items:center;position:static!important;inset:auto!important;min-height:36px;padding:0 13px;border-radius:var(--r-sm);
  font:600 12px/1 Manrope,sans-serif;color:var(--ink);text-decoration:none;cursor:pointer;
  background:rgba(255,248,242,.74);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 1px 2px rgba(48,20,37,.12),0 8px 18px -10px rgba(48,20,37,.45)}
.hero-film>*:hover{background:rgba(255,248,242,.92)}
.hero-film>*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero-film>[hidden]{display:none!important}
@media(max-width:700px){
  html .hero .hero-visual.has-video{width:100%;padding:0 16px 8px}
  html .hero .hero-visual.has-video .hero-reel{max-width:min(100%,calc(78svh * .5625));margin-inline:auto}
  .hero-film>*{min-height:44px}
  .hero .hero-visual>img{border-radius:0;box-shadow:none}
  .service-strip{margin-inline:16px}
}

/* ---------- supporting text: never under 12 px, and it grows with the screen ----------
   (measured on LP-W13 at 1440 px: product labels, card details, filters, sets, film chapters, FAQ and footer were 10 to 11 px) */
.product-image .product-label,.variant-card-summary span,.product-card .card-pattern,.film-chapters button span,.category-card div span,
#category-filters button span,.catalog-sidebar button span,.ensemble-copy .eyebrow,.ensemble-price span,.faq details p,.faq details p a,.story-grid a p,
.green-grid button span,.footer-main h3,.footer-bottom span,.footer-main p,.newsletter label.fine,.footer-production p,.mosaic-name span,
.catalog-sidebar h3,.catalog-sidebar .catalog-help,.catalog-sidebar>a,#result-count,#clear-filters,.catalog-status .sort-label,
.monogram-copy .eyebrow,.section .eyebrow,.section .fine,.co-wrap .eyebrow,.hero-copy .eyebrow,.pl-co .fine{font-size:var(--fs-small)}
.pl-badge{font-size:12px}
/* the older sheets pin fine print with !important (10 to 11 px) and the clear-filters link at 10 px */
.fine,.pl-co .fine{font-size:var(--fs-small)!important}
.catalog-status #clear-filters{font-size:var(--fs-small)}
dialog .close,.dialog-top button,.product-dialog .close{border-radius:var(--r-sm)}
@media(max-width:700px){.hero-film a{display:none!important}}

/* ---------- LP-W15 QA fixes (desktop and phone pass, 2026-10-15) ---------- */
/* the service strip sits on the same centered measure as the sections around it (it was 72 px from the left and
   475 px from the right on a 2227 px screen) */
.service-strip{width:min(1500px,92%);margin-inline:auto}
@media(max-width:700px){.service-strip{width:auto;margin-inline:16px}}
/* the site footer's ground was bleeding onto the small credit footer on checkout and customer care */
footer.ns-credit{background:transparent}
/* customer care: text and side links follow the type scale; the measure widens on large screens */
.help-wrap,.co-wrap{max-width:clamp(1180px,62vw,1500px)}
.help-main p,.help-main li{font-size:var(--fs-body)}
.help-main h2{font-size:clamp(34px,1.4vw + 20px,52px)}
.help-nav a{font-size:var(--fs-small)}
.help-form label{font-size:var(--fs-small)}
.help-nav a{border-radius:var(--r-sm)}
.help-form input,.help-form select,.help-form textarea{border-radius:var(--r-sm)}
/* checkout: lead and summary text follow the scale */
.co-lead,.co-aside{font-size:var(--fs-body)}