:root{
  --maroon:#5E1322; --maroon-deep:#450D19; --maroon-ink:#2E0A12;
  --cream:#F6EDDB; --ivory:#FCF8EF; --blush:#F2DDD3;
  --gold:#B9894B; --gold-soft:#D7B377;
  --text:#2B1419; --muted:#7A5E58; --line:#E5D8C4;
  --serif:"Playfair Display","Iowan Old Style",Palatino,Georgia,serif;
  --display:"Bebas Neue","Arial Narrow",var(--sans);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ivory);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
img,video,picture,canvas,iframe{border-radius:0}
a{color:inherit}
::selection{background:var(--maroon);color:var(--cream)}

/* ===== Typefaces =====
   Bebas Neue carries the retail voice — tall condensed caps for headlines,
   bands and buttons. Playfair Display is the luxury serif for editorial
   flourishes (standing in for Salega until a commercial license is bought —
   same high-contrast character, properly free under the OFL). Both are served
   from this repo so the page stays self-contained. */
@font-face{
  font-family:'Bebas Neue';
  src:url('/fonts/bebas-neue.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Playfair Display';
  src:url('/fonts/playfair-display.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Playfair Display';
  src:url('/fonts/playfair-display-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}

/* ============================================================
   HavenLoot — Header + Hero (hh-)
   ============================================================ */
/* FN-style announcement: one dark band carrying message + live clock + link */
.hh-annc { background: var(--maroon-ink); color: var(--cream); }
.hh-annc__text { margin: 0; padding: 0.5rem 1rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem 1.25rem; flex-wrap: wrap; text-transform: uppercase; text-align: center; }
.hh-annc__msg { font-family: var(--display); font-size: 0.9375rem; letter-spacing: 0.22em; line-height: 1.3; }
/* tabular digits so the ticking clock never jitters the row */
.hh-annc__clock { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.hh-annc__clock[hidden] { display: none; }
.hh-annc__time { color: var(--ivory); }
.hh-annc__link { color: var(--gold-soft); font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.3em; text-decoration-thickness: 1px; transition: color 300ms var(--ease); }
.hh-annc__link:hover { color: var(--ivory); }

.hh-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ivory) 92%, transparent); border-bottom: 1px solid var(--line); transition: box-shadow 400ms var(--ease); }
.hh-head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); transition: opacity 400ms var(--ease); pointer-events: none; }
.hh-head.is-scrolled::before { opacity: 1; }
.hh-head.is-scrolled { box-shadow: 0 10px 30px -18px var(--maroon-ink); }
/* wider row than the page body: logo + nav + search + six icons need room */
.hh-head__inner { max-width: 90rem; margin-inline: auto; padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; transition: padding 400ms var(--ease); }
.hh-head.is-scrolled .hh-head__inner { padding-block: 0.5rem; }

.hh-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: 0 0 auto; }
.hh-brand__mark { display: block; width: 44px; height: 44px; border-radius: 0; box-shadow: 0 2px 10px -4px var(--maroon-ink); transition: transform 400ms var(--ease); }
.hh-brand:hover .hh-brand__mark { transform: rotate(-4deg) scale(1.04); }
.hh-brand__stack { display: flex; flex-direction: column; gap: 0.1rem; }
.hh-brand__word { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em; }
.hh-brand__haven { color: var(--maroon); }
.hh-brand__loot  { color: var(--gold); }
.hh-brand__tag { font-family: var(--sans); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }

/* nav no longer spreads: the search pill claims the middle of the row */
.hh-nav { flex: 0 0 auto; display: flex; }
.hh-nav__list { display: flex; gap: clamp(1rem, 1.8vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
/* Bebas is condensed, so it earns a bigger size + wider tracking than the
   old sans links without growing the row */
.hh-nav__link { position: relative; display: inline-block; padding: 0.4rem 0.1rem; font-family: var(--display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; text-decoration: none; color: var(--text); transition: color 300ms var(--ease); white-space: nowrap; }
.hh-nav__link::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: right center; transition: transform 400ms var(--ease); }
.hh-nav__link:hover { color: var(--maroon); }
.hh-nav__link:hover::after, .hh-nav__link.is-active::after { transform: scaleX(1); transform-origin: left center; }
.hh-nav__link.is-active { color: var(--maroon); }

.hh-actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.hh-icon-btn { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--maroon); cursor: pointer; transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
.hh-icon-btn:hover { background: var(--blush); transform: translateY(-1px); }
.hh-icon { width: 1.25rem; height: 1.25rem; display: block; }
.hh-cart__count, .hh-love-count { position: absolute; top: 0.2rem; right: 0.1rem; min-width: 1rem; height: 1rem; padding-inline: 0.2rem; display: grid; place-items: center; border-radius: 999px; background: var(--gold); color: var(--ivory); font-family: var(--sans); font-size: 0.5625rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hh-cart__count[hidden], .hh-love-count[hidden] { display: none; }

/* ---------- Search pill: fills the middle of the main row ---------- */
.hh-search { flex: 1 1 auto; min-width: 0; max-width: 32rem; display: flex; align-items: center; gap: 0.55rem; height: 2.6rem; padding: 0 0.3rem 0 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--cream) 55%, var(--ivory)); transition: border-color 300ms var(--ease), background-color 300ms var(--ease); }
.hh-search:focus-within { border-color: var(--gold); background: var(--ivory); }
.hh-search__icon { flex: 0 0 auto; color: var(--muted); }
.hh-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: var(--sans); font-size: 0.875rem; color: var(--text); outline: none; }
.hh-search__input::placeholder { color: var(--muted); }
.hh-search__input::-webkit-search-decoration, .hh-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* decorative for now, so it reads quieter than the live icons */
.hh-search__cam { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: default; }

/* ---------- Category strip: slim scrolling row under the main row ---------- */
.hh-strip { border-top: 1px solid var(--line); }
.hh-strip__list { display: flex; gap: 1.6rem; margin: 0 auto; padding: 0.5rem 1.5rem; max-width: 90rem; list-style: none; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hh-strip__list::-webkit-scrollbar { display: none; } /* scrolls, but silently */
.hh-strip__link { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text); transition: color 300ms var(--ease); }
.hh-strip__link:hover { color: var(--maroon); }
.hh-strip__link--gold { color: var(--gold); }
.hh-strip__link--gold:hover { color: var(--maroon); }

/* ---------- Mega panels (FN-style, desktop only) ----------
   Absolutely positioned against the sticky header so they ride with it. */
.hh-mega { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -32px var(--maroon-ink); z-index: 60; }
.hh-mega.is-open { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hh-mega.is-open { animation: hh-mega-in 240ms var(--ease); }
  @keyframes hh-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.hh-mega__inner { max-width: 90rem; margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(14rem, 17rem); gap: 2.5rem; padding: 2rem 1.5rem 2.25rem; }
.hh-mega__head { margin: 0 0 0.75rem; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon); }
.hh-mega__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.hh-mega__link { font-family: var(--sans); font-size: 13.5px; text-decoration: none; color: var(--muted); transition: color 250ms var(--ease); }
.hh-mega__link:hover { color: var(--maroon); }
/* Promo frame: it is a [data-feed-photo] box whose children are all absolute,
   so the explicit aspect-ratio is what gives it height — without it the panel
   would collapse exactly the way the hero stage once did. */
.hh-mega__promo { display: block; text-decoration: none; }
.hh-mega__promo-frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 0; background: linear-gradient(160deg, var(--ivory) 0%, var(--cream) 60%, var(--blush) 100%); }
.hh-mega__promo-frame .hc-tee { position: absolute; inset: 0; }
.hh-mega__promo-cap { display: block; margin-top: 0.7rem; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon); }
.hh-mega__promo-sub { display: block; font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }

.hh-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 2.5rem; height: 2.5rem; padding: 0 0.55rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: background-color 300ms var(--ease); }
.hh-burger:hover { background: var(--blush); }
.hh-burger__bar { display: block; height: 1.7px; width: 100%; background: var(--maroon); border-radius: 1px; }
.hh-burger__bar:nth-child(2) { width: 72%; }

/* ---------- Full-bleed hero band ----------
   Fashion-Nova layout in the house palette: one edge-to-edge dark band, huge
   stacked serif type on the left, the day's photograph bleeding off the right
   edge. Copy sits above a scrim so cream type never fights the image. */
.hh-hero { position: relative; overflow: hidden; min-height: 72vh; display: grid; align-items: center; background: linear-gradient(118deg, var(--maroon-ink) 0%, var(--maroon-deep) 52%, var(--maroon) 100%); color: var(--cream); }

.hh-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 88rem; margin-inline: auto; padding: clamp(4rem, 10vh, 7rem) clamp(1.5rem, 5vw, 4.5rem); }
/* cap the measure so the headline never runs under the photograph */
.hh-hero__copy { max-width: 64rem; }

.hh-eyebrow { margin: 0 0 1.5rem; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-soft); }
.hh-eyebrow__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
/* FN-scale display type: clamps up to ~96px on wide screens */
.hh-title { margin: 0 0 1.25rem; font-family: var(--serif); font-weight: 700; font-size: clamp(2.75rem, 7vw, 6rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ivory); text-wrap: balance; }
.hh-title__flourish { font-style: italic; font-weight: 500; color: var(--gold-soft); }
.hh-lede { margin: 0 0 2.25rem; max-width: 36ch; font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--cream); opacity: 0.85; }

.hh-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; }
.hh-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.9rem; border-radius: 999px; font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; transition: background-color 350ms var(--ease), color 350ms var(--ease), border-color 350ms var(--ease), transform 350ms var(--ease), box-shadow 350ms var(--ease); }
/* on the dark band the pills invert: cream fill, cream outline */
.hh-btn--solid { background: var(--cream); color: var(--maroon); box-shadow: 0 14px 28px -16px var(--maroon-ink); }
.hh-btn--solid:hover { background: var(--gold-soft); color: var(--maroon-ink); transform: translateY(-2px); box-shadow: 0 20px 34px -16px var(--maroon-ink); }
.hh-btn__arrow { display: inline-block; transition: transform 350ms var(--ease); }
.hh-btn--solid:hover .hh-btn__arrow { transform: translateX(4px); }
.hh-btn--ghost { background: transparent; color: var(--cream); border: 1px solid var(--cream); }
.hh-btn--ghost:hover { background: var(--cream); color: var(--maroon); transform: translateY(-2px); }

.hh-stats { margin-top: 2.75rem; }
.hh-stats__rule { margin: 0 0 1.1rem; border: 0; height: 1px; max-width: 26rem; background: linear-gradient(90deg, var(--gold), var(--gold-soft) 60%, transparent); }
.hh-stats__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--cream); }
.hh-stats__item { display: inline-flex; align-items: center; gap: 0.9rem; }
.hh-stats__item + .hh-stats__item::before { content: "·"; color: var(--gold-soft); font-size: 1.1em; }

/* ---------- photo panel ---------- */
/* light panel: the artwork prints with multiply, which needs a pale backdrop */

/* Feed contract: motion.js inserts an .hc-feed-photo cover into any
   [data-feed-photo] box (styled once in the commerce sheet); the composed
   fallback below simply disappears beneath it. Only the box itself is ours.
   ties at single-class specificity and loads later in the bundle, which would
   flip this to relative and collapse the panel to nothing. */

/* scrim: darkens toward the copy so type stays readable where the photo nears */

.hh-annc__link:focus-visible, .hh-brand:focus-visible, .hh-nav__link:focus-visible, .hh-icon-btn:focus-visible, .hh-burger:focus-visible, .hh-btn:focus-visible, .hh-strip__link:focus-visible, .hh-mega__link:focus-visible, .hh-mega__promo:focus-visible, .hh-search__input:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }
.hh-icon-btn:focus-visible, .hh-burger:focus-visible, .hh-btn:focus-visible { border-radius: 999px; }
.hh-search__input:focus-visible { outline: none; } /* the pill's border carries focus */

@media (prefers-reduced-motion: reduce) {
  .hh-mega.is-open { animation: none; }
}

@media (max-width: 58rem) {
  .hh-nav { display: none; }
  .hh-burger { display: flex; }
  .hh-head__inner { gap: 1rem; }
  /* mega menus are a pointer idiom; the burger owns navigation below 58rem */
  .hh-mega { display: none !important; }
  /* the row cannot hold the pill and six icons; the strip still navigates
     and /shop carries its own tools, so search + secondary icons step back */
  .hh-search { display: none; }
  .hh-actions .hh-icon-btn[data-region-open], .hh-actions a[aria-label="Recently added"], .hh-actions a[aria-label="Account"] { display: none; }
  /* stacked band: type above, photo below, both still full-bleed
     (the stage sits first in the DOM, so the column reverses) */
  .hh-hero { min-height: 0; }
  .hh-hero__inner { padding-block: 3.5rem 3rem; }
  .hh-hero__copy { max-width: none; }
}
@media (max-width: 26rem) {
  .hh-brand__tag { display: none; }
  .hh-ctas { width: 100%; }
  .hh-btn { justify-content: center; flex: 1 1 auto; }
}

/* =========================================================
   HavenLoot — Commerce Sections (hc-)
   ========================================================= */
.hc-shop { background: var(--ivory); color: var(--text); padding: clamp(4rem, 8vw, 6.5rem) 0; overflow: hidden; }
.hc-shop--tint { background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 55%, var(--ivory) 100%); }
.hc-shop__inner { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.hc-shop__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.hc-shop__index { position: absolute; left: -0.75rem; bottom: -0.65em; z-index: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(6rem, 14vw, 10.5rem); line-height: 1; color: var(--cream); letter-spacing: -0.04em; user-select: none; pointer-events: none; }
.hc-shop__head-copy { position: relative; z-index: 1; }
.hc-eyebrow { margin: 0 0 0.6rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.hc-shop__title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.25rem, 4.7vw, 3.4rem); line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--maroon-ink); }
.hc-shop__head-tools { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }

.hc-shopall { position: relative; font-family: var(--display); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--maroon); padding-bottom: 0.3rem; }
.hc-shopall::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.hc-shopall:hover::after, .hc-shopall:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.hc-shopall__arrow { display: inline-block; transition: transform 0.45s var(--ease); }
.hc-shopall:hover .hc-shopall__arrow { transform: translateX(0.25rem); }

.hc-rail-nav { display: flex; gap: 0.5rem; }
.hc-rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--ivory); color: var(--maroon); cursor: pointer; transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), opacity 0.3s var(--ease); }
.hc-rail-btn:hover { background: var(--cream); border-color: var(--gold-soft); color: var(--maroon-deep); }
.hc-rail-btn:active { background: var(--blush); }
.hc-rail-btn.is-off { opacity: .35; pointer-events: none; }

.hc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(14rem, 21vw, 17.5rem); gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0.5rem 0.25rem 1.25rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hc-rail::-webkit-scrollbar { display: none; }
.hc-rail__item { scroll-snap-align: start; }

.hc-card { height: 100%; }
.hc-card__link { display: block; text-decoration: none; color: inherit; outline: none; }
.hc-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 0; background: radial-gradient(120% 90% at 50% 20%, var(--ivory) 0%, var(--cream) 62%, var(--blush) 125%); transform: translateY(0); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.hc-card__link:hover .hc-card__media, .hc-card__link:focus-visible .hc-card__media { will-change: transform; transform: translateY(-6px); box-shadow: 0 2px 6px rgba(94,19,34,0.07), 0 10px 24px rgba(94,19,34,0.11), 0 24px 48px rgba(46,10,18,0.1); }
.hc-card__link:focus-visible { border-radius: 0.6rem; outline: 2px solid var(--gold); outline-offset: 4px; }

.hc-tee { position: relative; display: block; height: 100%; }
.hc-tee__garment { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1); transition: transform 0.6s var(--ease); }
.hc-card__link:hover .hc-tee__garment, .hc-card__link:focus-visible .hc-tee__garment { transform: scale(1.04); }
.hc-tee__art { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 38%; height: auto; mix-blend-mode: multiply; filter: saturate(1.05); pointer-events: none; }

.hc-chip { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.3rem 0.65rem; border-radius: 999px; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; }
.hc-chip--best { background: var(--maroon); color: var(--ivory); }
.hc-chip--new { background: var(--gold); color: var(--ivory); }
.hc-chip--limited { background: transparent; color: var(--maroon-deep); border: 1px solid var(--maroon-deep); }

.hc-quickview { position: absolute; left: 50%; bottom: 1rem; z-index: 2; transform: translate(-50%, 0.85rem); opacity: 0; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--ivory); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(46,10,18,0.12); font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--maroon); white-space: nowrap; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.hc-card__link:hover .hc-quickview, .hc-card__link:focus-visible .hc-quickview { transform: translate(-50%, 0); opacity: 1; }

.hc-card__body { display: block; padding: 0.9rem 0.2rem 0; }
.hc-card__name { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 500; line-height: 1.3; color: var(--maroon-ink); }
.hc-card__price { display: block; margin-top: 0.25rem; font-family: var(--serif); font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--muted); }
.hc-card__cta { display: inline-block; margin-top: 0.55rem; font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.hc-card__cta-arrow { display: inline-block; transition: transform 0.45s var(--ease); }
.hc-card__link:hover .hc-card__cta-arrow, .hc-card__link:focus-visible .hc-card__cta-arrow { transform: translateX(0.3rem); }

.hc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.hc-tile { display: block; text-decoration: none; outline: none; }
.hc-tile__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 0; background: radial-gradient(110% 85% at 50% 32%, var(--ivory) 0%, var(--cream) 58%, var(--blush) 130%); transition: box-shadow 0.6s var(--ease); }
.hc-tile:hover .hc-tile__media, .hc-tile:focus-visible .hc-tile__media { box-shadow: 0 2px 6px rgba(94,19,34,0.07), 0 16px 36px rgba(46,10,18,0.1); }
.hc-tile:focus-visible { border-radius: 0.6rem; outline: 2px solid var(--gold); outline-offset: 4px; }
.hc-tile__art { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; transform: translate(-50%, -50%) scale(1); mix-blend-mode: multiply; filter: saturate(1.05); transition: transform 0.6s var(--ease); }
.hc-tile:hover .hc-tile__art, .hc-tile:focus-visible .hc-tile__art { transform: translate(-50%, -50%) scale(1.05); }
.hc-tile__caption { display: block; margin-top: 1rem; text-align: center; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--maroon-ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 0.5em; transition: text-decoration-color 0.45s var(--ease), color 0.45s var(--ease); }
.hc-tile:hover .hc-tile__caption, .hc-tile:focus-visible .hc-tile__caption { color: var(--maroon); text-decoration-color: var(--gold); }

@media (max-width: 52rem) {
  .hc-tiles { grid-template-columns: 1fr; }
  .hc-shop__head { align-items: flex-start; flex-direction: column; }
  .hc-shop__head-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .hc-shop__index { left: -0.35rem; font-size: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-shopall::after, .hc-shopall__arrow, .hc-rail-btn, .hc-card__media, .hc-tee__garment, .hc-quickview, .hc-card__cta-arrow, .hc-tile__media, .hc-tile__art, .hc-tile__caption { transition: none; }
  .hc-rail { scroll-behavior: auto; }
  .hc-card__link:hover .hc-card__media { transform: none; }
  .hc-card__link:hover .hc-tee__garment { transform: none; }
  .hc-tile:hover .hc-tile__art { transform: translate(-50%, -50%); }
  .hc-quickview { transform: translate(-50%, 0); opacity: 1; }
}

/* ---------- On-model presentation ----------
   Mirrors the merchant theme: a portrait frame so a model photo and the first
   frame of its video occupy one box, the shirt dressing the faceted android,
   and the frame scaled so both stay aligned at every size. */
.hc-model {
  aspect-ratio: 9 / 16;
  width: 75%;
  margin-inline: auto;
}
/* A model photo replaces the composition when the feed supplies one. It is
   framed exactly as the composition it covers, so the handover costs no layout. */
.hc-model__photo {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; background: var(--ivory);
}

/* The feed lands after first paint. Fading the new media up over the composed
   shirt keeps that handover to a compositor-only change instead of a second
   visible repaint; motion.js only adds this once the image has decoded. */
@keyframes hc-fade-in { from { opacity: 0; } }
.hc-fade-in { animation: hc-fade-in 320ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .hc-fade-in { animation: none; } }

/* The video sits above the photo and shares its exact frame, so swapping
   between them never shifts the layout. It covers rather than contains: a
   clip that plays unasked should fill the card the way the photograph does,
   not sit letterboxed inside it. */
.hc-model__video {
  position: absolute; inset: 0; z-index: 3; display: block;
  width: 100%; height: 100%; object-fit: cover; background: var(--ivory);
}
.hc-model__video[hidden] { display: none; }

/* With a clip running, the still frames beneath it are only a fallback. */
.hc-model.has-video .hc-tee { visibility: hidden; }

.hc-model__play {
  position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 4;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--maroon-ink) 70%, transparent);
  color: var(--cream); backdrop-filter: blur(4px);
  transition: background 300ms var(--ease), transform 300ms var(--ease);
}
.hc-model__play:hover { background: var(--maroon); transform: scale(1.06); }
/* A paused clip reads as stopped, so the control shows the way back in. */
.hc-model__play.is-paused { background: var(--maroon); }
.hc-model__play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hc-model__play[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .hc-model__play { transition: none; } }

/* A real model photograph supersedes the composition beneath it. */
.hc-model.has-photo .hc-tee { visibility: hidden; }

/* =========================================================
   Fashion-Nova-style home layout (trend report / category
   strip / tabbed latest grid) — same warm palette, denser
   structure. The rail/tile rules above are kept because the
   listing pages share .hc-card, and removing them risks the
   other surfaces more than a few idle selectors cost.
   ========================================================= */

/* ---------- 01 · The Trend Report ---------- */
.hc-trend__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.hc-trend__card { display: block; text-decoration: none; outline: none; }
.hc-trend__card:focus-visible { border-radius: 1.1rem; outline: 2px solid var(--gold); outline-offset: 4px; }

/* The tall 3/4 frame is reserved up front so the live photo that motion.js
   drops in later lands on a box that already holds its final size. */
.hc-trend__media {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  isolation: isolate; border: 1px solid var(--line); border-radius: 0;
  background: radial-gradient(120% 90% at 50% 24%, var(--ivory) 0%, var(--cream) 60%, var(--blush) 128%);
  transition: box-shadow 0.6s var(--ease);
}
.hc-trend__card:hover .hc-trend__media, .hc-trend__card:focus-visible .hc-trend__media {
  box-shadow: 0 2px 6px rgba(94,19,34,0.07), 0 16px 36px rgba(46,10,18,0.1);
}
/* The fallback composition fills the editorial frame: garment as the ground,
   artwork multiplied onto it so the print reads as ink, not a sticker. */
.hc-trend__media .hc-tee__garment { object-position: 50% 22%; }
.hc-trend__card:hover .hc-tee__garment, .hc-trend__card:focus-visible .hc-tee__garment { transform: scale(1.04); }

.hc-trend__caption {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.8rem; padding-inline: 0.2rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--maroon-ink);
  transition: color 0.45s var(--ease);
}
.hc-trend__card:hover .hc-trend__caption, .hc-trend__card:focus-visible .hc-trend__caption { color: var(--maroon); }
.hc-trend__arrow { display: inline-block; color: var(--gold); transition: transform 0.45s var(--ease); }
.hc-trend__card:hover .hc-trend__arrow { transform: translateX(0.25rem); }

/* ---------- Live feed photo cover (contract shared with the hero) ----------
   motion.js inserts an .hc-feed-photo into any [data-feed-photo] box once the
   image has decoded, then marks the box has-feed-photo. The photo covers the
   whole frame; the composed fallback simply goes invisible beneath it, so the
   handover is a compositor change with zero layout cost. */
[data-feed-photo] { position: relative; }
.hc-feed-photo {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover; background: var(--ivory);
}
[data-feed-photo].has-feed-photo .hc-tee { visibility: hidden; }

/* ---------- 02 · Shop by Category strip ---------- */
.hc-cats__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(9.5rem, 15vw, 12.5rem);
  gap: clamp(0.9rem, 1.8vw, 1.4rem); margin: 0; padding: 0.5rem 0.25rem 1.25rem;
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hc-cats__strip::-webkit-scrollbar { display: none; }
.hc-cats__item { scroll-snap-align: start; min-width: 0; }

.hc-cat { display: block; text-decoration: none; outline: none; }
.hc-cat:focus-visible { border-radius: 1rem; outline: 2px solid var(--gold); outline-offset: 4px; }
.hc-cat__media {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  isolation: isolate; border: 1px solid var(--line); border-radius: 0;
  background: radial-gradient(110% 85% at 50% 32%, var(--ivory) 0%, var(--cream) 58%, var(--blush) 130%);
  transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.hc-cat:hover .hc-cat__media, .hc-cat:focus-visible .hc-cat__media {
  border-color: var(--gold-soft);
  box-shadow: 0 2px 6px rgba(94,19,34,0.07), 0 14px 30px rgba(46,10,18,0.1);
}
/* Artwork multiplied onto the light panel — the same cutout language the
   collection tiles used, scaled down for the strip. */
.hc-cat__art {
  position: absolute; left: 50%; top: 50%; width: 68%; height: auto;
  transform: translate(-50%, -50%) scale(1); mix-blend-mode: multiply;
  filter: saturate(1.05); transition: transform 0.6s var(--ease);
}
.hc-cat:hover .hc-cat__art, .hc-cat:focus-visible .hc-cat__art { transform: translate(-50%, -50%) scale(1.06); }
.hc-cat__name {
  display: block; margin-top: 0.75rem; text-align: center;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--maroon-ink);
  transition: color 0.45s var(--ease);
}
.hc-cat:hover .hc-cat__name, .hc-cat:focus-visible .hc-cat__name { color: var(--maroon); }

/* ---------- 03 · Shop the Latest: tabs + dense grid ---------- */
.hc-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.hc-tab {
  padding: 0.55rem 1.2rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--ivory); color: var(--maroon);
  font-family: var(--display); font-size: 0.88rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hc-tab:hover { background: var(--cream); border-color: var(--gold-soft); }
.hc-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* The active pill inverts to maroon so the selected filter is legible at a
   glance without inventing any new colour. */
.hc-tab.is-on { background: var(--maroon); border-color: var(--maroon); color: var(--ivory); }

.hc-latest {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem) clamp(0.9rem, 1.6vw, 1.25rem);
  margin: 0; padding: 0; list-style: none;
}
.hc-latest__item { min-width: 0; }
/* The tabs hide rows with the hidden attribute; grid children ignore it
   unless display is forced off. */
.hc-latest__item[hidden] { display: none; }

/* ---------- Wishlist heart ---------- */
.hc-love {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 4;
  display: grid; place-items: center; width: 2rem; height: 2rem;
  padding: 0; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: var(--ivory); color: var(--maroon);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hc-love:hover { background: var(--cream); transform: scale(1.08); }
.hc-love:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* A saved heart fills maroon — state readable without relying on the stroke. */
.hc-love[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.hc-love[aria-pressed="true"] svg path { fill: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .hc-latest { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 47.5rem) { /* 760px */
  .hc-trend__row { grid-template-columns: repeat(2, 1fr); }
  .hc-latest { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-trend__media, .hc-trend__caption, .hc-trend__arrow,
  .hc-cat__media, .hc-cat__art, .hc-cat__name,
  .hc-tab, .hc-love { transition: none; }
  .hc-trend__card:hover .hc-tee__garment { transform: none; }
  .hc-cat:hover .hc-cat__art { transform: translate(-50%, -50%); }
  .hc-cats__strip { scroll-behavior: auto; }
  .hc-love:hover { transform: none; }
}

.hc-published-art { width:100%; height:100%; object-fit:contain; }
.hc-design-detail .hc-card__media { max-width:34rem; margin:2rem auto 0; }
.hc-card__media > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hf-editorial__inner { padding-left:clamp(1.5rem, 6vw, 6rem); }

/* =====================================================
   HavenLoot — lower sections (hf-)
   (reveal pre-states are owned by the global motion CSS)
   ===================================================== */
.hf-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hf-footer__link, .hf-strip__link { position: relative; color: var(--text); text-decoration: none; transition: color 0.35s var(--ease); }
.hf-footer__link::after, .hf-strip__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease); }
.hf-footer__link:hover, .hf-strip__link:hover { color: var(--maroon); }
.hf-footer__link:hover::after, .hf-strip__link:hover::after { transform: scaleX(1); }

.hf-btn-pill:focus-visible, .hf-rewards__cta:focus-visible, .hf-footer__link:focus-visible, .hf-strip__link:focus-visible, .hf-footer__promo-cta:focus-visible, .hf-footer__chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* A. promo banner — full-bleed, photo bleeding off the right edge like the
   hero above it, so the home page reads as a run of cinematic bands. */
.hf-editorial { position: relative; overflow: hidden; min-height: 56vh; display: grid; align-items: center; background: linear-gradient(115deg, var(--maroon-ink) 0%, var(--maroon-deep) 55%, var(--maroon) 100%); color: var(--cream); }
.hf-editorial__ghost { position: absolute; top: 50%; left: 42%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: 16vw; line-height: 1; letter-spacing: 0.08em; color: var(--cream); opacity: 0.05; white-space: nowrap; pointer-events: none; user-select: none; }
.hf-editorial__inner { position: relative; z-index: 2; width: 100%; max-width: 88rem; margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4.5rem); }
/* keep the type clear of the photo column */
.hf-editorial__copy { max-width: min(42rem, 56%); }
.hf-eyebrow { margin: 0 0 1.25rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-soft); }
/* promo type pushes toward the hero's scale without competing with it */
.hf-editorial__title { margin: 0 0 1.5rem; font-family: var(--display); font-weight: 400; font-size: clamp(3.3rem, 7.5vw, 6.4rem); line-height: 0.98; letter-spacing: 0.04em; text-transform: uppercase; }
/* the italic accent keeps the serif so the Bebas wall gets one flourish */
.hf-editorial__title em { font-family: var(--serif); font-size: 0.92em; }
.hf-editorial__title em { font-style: italic; color: var(--gold-soft); }
.hf-editorial__lede { margin: 0 0 2.25rem; max-width: 46ch; font-family: var(--sans); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.7; color: var(--cream); opacity: 0.8; }
.hf-btn-pill { display: inline-block; padding: 0.9rem 2.2rem; border-radius: 999px; background: var(--cream); color: var(--maroon-ink); font-family: var(--display); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.hf-btn-pill:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.3); }

/* photo column: full height, bleeding off the right edge; a left-side scrim
   fades it into the band so the copy never fights the image */
.hf-editorial__media { position: absolute; inset: 0 0 0 auto; width: min(42vw, 40rem); z-index: 1; }
/* the .hc-feed-photo cover (commerce sheet) lands inside this box at z-index 2 */
.hf-editorial__photo { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, var(--ivory) 0%, var(--cream) 55%, var(--blush) 100%); box-shadow: -30px 0 60px -40px var(--maroon-ink); }
.hf-editorial__photo::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; z-index: 3; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--maroon-deep) 55%, transparent), transparent); }
.hf-tee__garment { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hf-tee__art { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 34%; height: auto; mix-blend-mode: multiply; pointer-events: none; }

/* B. marquee */
.hf-marquee { overflow: hidden; background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.85rem 0; }
.hf-marquee__track { display: flex; width: max-content; animation: hf-marquee-scroll 40s linear infinite; will-change: transform; }
.hf-marquee:hover .hf-marquee__track { animation-play-state: paused; }
.hf-marquee__seq { flex: none; display: inline-flex; align-items: baseline; gap: 1.5rem; padding-right: 1.5rem; font-family: var(--serif); font-size: clamp(0.95rem, 1.4vw, 1.15rem); letter-spacing: 0.06em; color: var(--text); white-space: nowrap; }
.hf-marquee__dot { font-style: normal; color: var(--gold); }
@keyframes hf-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* B2. ribbon strip — one thin maroon line between the big bands */
.hf-ribbon { background: var(--maroon); color: var(--cream); }
.hf-ribbon__inner { max-width: 88rem; margin: 0 auto; padding: 0.7rem clamp(1.5rem, 5vw, 4.5rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.35rem 2rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.hf-ribbon__text { margin: 0; }
.hf-ribbon__link { color: var(--gold-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; transition: color 0.35s var(--ease); white-space: nowrap; }
.hf-ribbon__link:hover { color: var(--ivory); }
.hf-ribbon__link:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 2px; }

/* C. rewards */
.hf-rewards { background: var(--ivory); padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 5rem); }
.hf-rewards__band { position: relative; overflow: hidden; max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); border: 2px solid var(--gold); border-radius: 0.5rem; background: var(--ivory); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.5rem); }
.hf-rewards__band::before { content: ""; position: absolute; top: -40%; right: -10%; width: 24rem; height: 24rem; background: radial-gradient(circle, rgba(185,137,75,0.14), transparent 65%); pointer-events: none; }
.hf-rewards__lockup { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--text); letter-spacing: 0.05em; text-transform: uppercase; }
.hf-rewards__lockup-accent { color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 0.9em; text-transform: none; }
.hf-rewards__title { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.hf-rewards__sub { margin: 0; font-family: var(--sans); font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.hf-rewards__cta { position: relative; z-index: 1; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--maroon); text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; transition: color 0.35s var(--ease); white-space: nowrap; }
.hf-rewards__cta:hover { color: var(--gold); }

/* D. strip */
.hf-strip { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem clamp(1.25rem, 4vw, 3rem); }
.hf-strip__list { margin: 0 auto; padding: 0; max-width: 72rem; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 2.75rem; row-gap: 0.6rem; font-family: var(--sans); font-size: 0.85rem; color: var(--text); }
.hf-strip__item { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; }
.hf-strip__item + .hf-strip__item::before { content: "\00B7"; position: absolute; left: -1.55rem; color: var(--gold); font-family: var(--serif); font-size: 1.1rem; }
.hf-strip__glyph { color: var(--maroon); font-size: 1rem; line-height: 1; }

/* E. footer */
.hf-footer { background: var(--ivory); overflow: hidden; }
.hf-footer__grid { max-width: 72rem; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 5rem) clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: clamp(1.75rem, 3.5vw, 3rem); }
.hf-footer__heading { margin: 0 0 1.1rem; font-family: var(--display); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.hf-footer__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; font-family: var(--sans); font-size: 0.85rem; }
.hf-footer__link { display: inline-block; }
.hf-footer__link::after { bottom: 0; }

.hf-footer__promo { background: var(--cream); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; }
.hf-footer__promo-copy { margin: 0 0 0.9rem; font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--text); }
.hf-footer__promo-cta { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--maroon); text-decoration: underline; text-underline-offset: 0.4em; transition: color 0.35s var(--ease); }
.hf-footer__promo-cta:hover { color: var(--gold); }
.hf-footer__social { margin: 0; padding: 0; list-style: none; display: flex; gap: 0.6rem; }
.hf-footer__chip { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--maroon); color: var(--cream); font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; transition: background 0.35s var(--ease), transform 0.35s var(--ease); }
.hf-footer__chip:hover { background: var(--gold); transform: translateY(-2px); }

.hf-footer__legal { max-width: 72rem; margin: 0 auto; padding: 1.5rem clamp(1.25rem, 5vw, 5rem); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }
.hf-footer__legal-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem; }
.hf-footer__legal-links li { position: relative; }
.hf-footer__legal-links li + li::before { content: "\00B7"; position: absolute; left: -1rem; color: var(--gold); }
.hf-footer__legal .hf-footer__link { font-size: 0.78rem; color: var(--muted); }
.hf-footer__legal .hf-footer__link:hover { color: var(--maroon); }
.hf-footer__copyright { margin: 0; }

.hf-footer__signoff { position: relative; text-align: center; padding-top: clamp(2rem, 4vw, 3.5rem); max-height: clamp(7rem, 14vw, 13rem); overflow: hidden; }
.hf-footer__motto { margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.hf-footer__watermark { display: block; font-family: var(--serif); font-size: 11vw; line-height: 0.95; letter-spacing: 0.02em; text-align: center; color: var(--cream); filter: brightness(0.965); margin-bottom: -0.28em; white-space: nowrap; pointer-events: none; user-select: none; }

@media (max-width: 58rem) {
  /* stacked band: type above, photo below, both still full-bleed */
  .hf-editorial { display: flex; flex-direction: column-reverse; min-height: 0; }
  .hf-editorial__copy { max-width: none; }
  .hf-editorial__media { position: relative; inset: auto; width: 100%; min-height: 44vh; }
  .hf-editorial__photo::after { content: none; } /* photo no longer sits behind the type */
  .hf-rewards__band { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hf-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .hf-footer__col--aside { grid-column: 1 / -1; }
}
@media (max-width: 36rem) {
  .hf-footer__grid { grid-template-columns: 1fr; }
  .hf-strip__list { flex-direction: column; }
  .hf-strip__item + .hf-strip__item::before { content: none; }
  .hf-footer__legal { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-marquee__track { animation-play-state: paused; }
  .hf-btn-pill, .hf-footer__chip, .hf-ribbon__link { transition: none; }
}

/* F. currency & region modal (markup in chrome-foot.html, logic in shop.js)
   Patterned on the Fashion Nova picker: centred card over a dimmed page,
   search on top, the chosen region pinned above a divider. Palette tokens
   only — the maroon scrim and gold focus ring keep it on-brand. */
.hh-region { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); }
.hh-region[hidden] { display: none; }
.hh-region__backdrop { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--maroon-ink, #2e0a12) 62%, transparent); animation: hh-region-fade 0.3s var(--ease) both; }
.hh-region__dialog {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(30rem, 100%); max-height: min(84vh, 46rem);
  background: var(--ivory); border: 1px solid var(--line); border-radius: 0.9rem;
  box-shadow: 0 40px 90px -30px rgba(46, 10, 18, 0.55);
  padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.1rem, 2.5vw, 1.6rem) 0.9rem;
  animation: hh-region-rise 0.35s var(--ease) both;
}
@keyframes hh-region-fade { from { opacity: 0; } }
@keyframes hh-region-rise { from { opacity: 0; transform: translateY(14px); } }

.hh-region__close { position: absolute; top: 0.9rem; right: 0.9rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--maroon); cursor: pointer; transition: background 0.3s var(--ease); }
.hh-region__close:hover { background: var(--cream); }
.hh-region__close:focus-visible, .hh-region__opt:focus-visible, .hh-region__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The retail voice: Bebas already shouts, so weight stays 400 and the
   tracking does the work of making the caps read as a title, not a yell. */
.hh-region__title { margin: 0 0 1.1rem; padding-right: 2.5rem; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 1.8rem); line-height: 1.05; letter-spacing: 0.06em; text-transform: uppercase; color: var(--maroon-ink); }
.hh-region__label { margin: 0 0 0.6rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.hh-region__search { position: relative; display: flex; align-items: center; margin-bottom: 0.9rem; color: var(--muted); }
.hh-region__search svg { position: absolute; left: 0.9rem; pointer-events: none; }
.hh-region__input { width: 100%; min-height: 2.9rem; padding: 0 1rem 0 2.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--text); font: 400 0.95rem/1 var(--sans); }
.hh-region__input::placeholder { color: var(--muted); }

/* The list scrolls inside the card so the title and search stay put. */
.hh-region__list { margin: 0 -0.35rem; padding: 0 0.35rem 0.5rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.hh-region__item[hidden], .hh-region__billing[hidden], .hh-region__divider[hidden], .hh-region__empty[hidden] { display: none; }

.hh-region__opt { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.75rem; width: 100%; padding: 0.8rem 0.6rem; border: 0; border-radius: 0.6rem; background: none; color: var(--text); font: 400 0.95rem/1.3 var(--sans); text-align: left; cursor: pointer; transition: background 0.25s var(--ease); }
.hh-region__opt:hover { background: var(--cream); }
.hh-region__flag { font-size: 1.25rem; line-height: 1; }
.hh-region__name { min-width: 0; }
.hh-region__tag { font-size: 0.8em; color: var(--muted); }
.hh-region__code { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.hh-region__check { display: grid; place-items: center; color: var(--maroon); }
.hh-region__opt[aria-pressed="true"] .hh-region__name { color: var(--maroon-ink); font-weight: 600; }

.hh-region__billing { padding: 0 0.6rem 0.75rem; font-size: 0.8rem; color: var(--muted); }
.hh-region__divider { margin: 0 0.35rem 0.5rem; border-top: 1px solid var(--line); }
.hh-region__empty { padding: 1rem 0.6rem; font-size: 0.9rem; color: var(--muted); }

/* shop.js locks the page behind the dialog so the list is the only scroll. */
.hh-region-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  /* fade only: the rise is the one movement worth cutting */
  .hh-region__dialog { animation: hh-region-fade 0.2s linear both; }
  .hh-region__backdrop { animation: none; }
  .hh-region__close, .hh-region__opt { transition: none; }
}

/* ===== Inner pages: banner, toolbar, product grid =====
   The home page keeps its horizontal rails. A dedicated page is a destination
   rather than a glance, so it lays the same cards out as a grid and gives the
   section a title of its own. */

.hp-banner{
  position:relative;padding:clamp(56px,8vw,104px) 24px clamp(40px,5vw,64px);
  background:linear-gradient(180deg,var(--cream) 0%,var(--ivory) 100%);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.hp-banner__inner{max-width:1240px;margin:0 auto;position:relative;z-index:1}
.hp-crumb{
  display:flex;gap:10px;align-items:center;margin:0 0 18px;
  font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.hp-crumb a{color:var(--muted);text-decoration:none;transition:color .3s var(--ease)}
.hp-crumb a:hover{color:var(--maroon)}
.hp-crumb__sep{opacity:.45}
.hp-crumb__here{color:var(--maroon)}
/* listing banners speak Bebas: ~15% larger than the serif it replaces,
   tracking opened because condensed caps clog at negative spacing */
.hp-banner__title{
  margin:0;font:400 clamp(46px,8vw,88px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--maroon-ink);
}
/* the accent word keeps the italic serif as the one editorial flourish */
.hp-banner__title em{font:italic 400 .9em/1 var(--serif);color:var(--gold);text-transform:none}
.hp-banner__lede{
  margin:18px 0 0;max-width:46ch;font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:var(--muted);
}
.hp-banner__numeral{
  position:absolute;right:-2vw;top:50%;transform:translateY(-50%);
  font:400 clamp(160px,26vw,340px)/1 var(--serif);color:var(--maroon);opacity:.045;
  pointer-events:none;user-select:none;z-index:0;
}

/* toolbar */
.hp-tools{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  max-width:1240px;margin:0 auto;padding:26px 24px 0;
}
.hp-tools__count{margin:0;font-size:14px;color:var(--muted);letter-spacing:.02em}
.hp-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.hp-chip{
  display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--ivory);color:var(--text);text-decoration:none;
  font:400 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.hp-chip:hover{border-color:var(--gold);color:var(--maroon)}
.hp-chip.is-on{background:var(--maroon);border-color:var(--maroon);color:var(--cream)}

/* grid — reuses .hc-card from commerce.css so cards stay identical */
.hp-grid-wrap{max-width:1240px;margin:0 auto;padding:30px 24px clamp(64px,8vw,110px)}
.hp-grid{
  display:grid;gap:clamp(20px,2.4vw,34px);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr));
}
.hp-grid>li{min-width:0}

/* collections page tiles sit larger than the home strip */
.hp-tiles{
  display:grid;gap:clamp(18px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  max-width:1240px;margin:0 auto;padding:30px 24px clamp(64px,8vw,110px);
}
.hp-tile{
  position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--line);border-radius: 0;background:var(--cream);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
}
.hp-tile:hover{transform:translateY(-6px);border-color:var(--gold-soft);box-shadow:0 22px 48px -28px rgba(69,13,25,.5)}
.hp-tile__media{display:block;aspect-ratio:4/3;display:grid;place-items:center;padding:26px;background:var(--ivory);isolation:isolate}
.hp-tile__media img{height:100%;width:auto;aspect-ratio:1;mix-blend-mode:multiply}
.hp-tile__body{display:block;padding:18px 22px 22px;border-top:1px solid var(--line)}
.hp-tile__name{display:block;font:400 22px/1.2 var(--serif);color:var(--maroon-ink)}
.hp-tile__meta{display:block;margin-top:6px;font-size:13px;color:var(--muted);letter-spacing:.03em}

/* an empty filter result still reads as a finished page */
.hp-empty{
  max-width:1240px;margin:0 auto;padding:60px 24px clamp(64px,8vw,110px);
  text-align:center;color:var(--muted);
}
.hp-empty__title{margin:0 0 10px;font:400 30px/1.2 var(--serif);color:var(--maroon-ink)}

@media (max-width:640px){
  .hp-banner__numeral{display:none}
  .hp-tools{padding-top:20px}
}

/* ===== Buy page, cart and checkout =====
   The listing pages sell the design; this is where the decision gets made, so
   it trades motion for clarity: one large garment view, the choices in reach,
   and nothing between the shopper and the button. */

.pd{max-width:1240px;margin:0 auto;padding:clamp(28px,4vw,56px) 24px clamp(64px,8vw,110px)}
.pd__grid{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
@media (max-width:900px){.pd__grid{grid-template-columns:1fr}}

/* --- gallery --- */
.pd__gallery{position:sticky;top:96px}
@media (max-width:900px){.pd__gallery{position:static}}
/* The stage keeps its square from the aspect ratio alone, so the panes can fill
   it absolutely rather than being laid out as grid items. */
.pd__stage{
  position:relative;border:1px solid var(--line);border-radius: 0;overflow:hidden;
  background:var(--cream);aspect-ratio:1;isolation:isolate;
}
/* The pane is also an .hc-model so the feed's photo and video overlays reach it,
   but the rails' portrait 9/16 framing would size it taller than this square
   stage and push the garment out of the bottom. Here it simply fills the stage. */
.pd__tee{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;margin:0}
.pd__tee img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%}
/* -54% is the shared -50% centring plus the 4% lift that sits the print on the chest */
.pd__tee .pd__tee-art{width:38%;mix-blend-mode:multiply;transform:translate(-50%,-54%)}
.pd__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--cream)}
.pd__badge{
  position:absolute;left:18px;top:18px;z-index:2;padding:7px 14px;border-radius:999px;
  background:var(--maroon);color:var(--cream);font:600 11px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;
}
.pd__thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.pd__thumb{
  width:76px;height:76px;padding:8px;border:1px solid var(--line);border-radius: 0;
  background:var(--ivory);cursor:pointer;display:grid;place-items:center;isolation:isolate;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.pd__thumb:hover{transform:translateY(-2px)}
.pd__thumb[aria-pressed="true"]{border-color:var(--maroon);box-shadow:inset 0 0 0 1px var(--maroon)}
.pd__thumb img{max-width:100%;max-height:100%;mix-blend-mode:multiply}
.pd__thumb--video{position:relative;color:var(--maroon)}

/* --- buy column --- */
.pd__eyebrow{
  margin:0 0 10px;font:500 12px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.pd__name{margin:0;font:400 clamp(38px,5.2vw,62px)/1 var(--display);color:var(--maroon-ink);letter-spacing:.04em;text-transform:uppercase}
.pd__price{margin:14px 0 0;font:400 26px/1 var(--serif);color:var(--maroon)}
.pd__price small{font:400 14px/1 var(--sans);color:var(--muted);margin-left:10px}
.pd__blurb{margin:18px 0 0;max-width:46ch;color:var(--muted);line-height:1.75}
.pd__rule{border:0;border-top:1px solid var(--line);margin:26px 0}

.pd__field{margin:0 0 22px}
.pd__label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;
  font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text);
}
.pd__label a{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted);font-size:13px}
.pd__opts{display:flex;flex-wrap:wrap;gap:10px}
.pd__opt{
  min-width:52px;min-height:46px;padding:0 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--ivory);color:var(--text);font:500 14px/1 var(--sans);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.pd__opt:hover:not(:disabled){border-color:var(--gold)}
.pd__opt[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);color:var(--cream)}
.pd__opt:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through}

.pd__swatch{
  width:44px;height:44px;min-width:0;padding:0;border-radius:50%;position:relative;
  border:1px solid var(--line);
}
.pd__swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ivory),0 0 0 4px var(--maroon);border-color:transparent}

.pd__qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--ivory)}
.pd__qty button{
  width:46px;height:46px;border:0;background:none;color:var(--text);font-size:20px;cursor:pointer;
  transition:background .25s var(--ease);
}
.pd__qty button:hover{background:var(--cream)}
.pd__qty output{min-width:46px;text-align:center;font:500 16px/1 var(--sans)}

.pd__buy{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.pd__add{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 28px;border:0;border-radius:999px;cursor:pointer;
  background:var(--maroon);color:var(--cream);
  font:400 17px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.pd__add:hover{background:var(--maroon-deep);transform:translateY(-2px)}
.pd__add.is-added{background:#2F6B4F}
.pd__buynow{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;
  border:1px solid var(--maroon);border-radius:999px;background:transparent;color:var(--maroon);
  font:400 16px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.pd__buynow:hover{background:var(--maroon);color:var(--cream)}
.pd__reassure{display:flex;flex-wrap:wrap;gap:18px;margin:20px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.pd__reassure li{display:flex;align-items:center;gap:7px}
.pd__reassure svg{color:var(--gold);flex:none}

/* --- details accordion --- */
.pd__details{margin-top:30px;border-top:1px solid var(--line)}
.pd__details details{border-bottom:1px solid var(--line)}
.pd__details summary{
  list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;align-items:center;
  font:500 15px/1 var(--sans);color:var(--maroon-ink);
}
.pd__details summary::-webkit-details-marker{display:none}
.pd__details summary::after{content:'+';font:300 22px/1 var(--serif);color:var(--gold)}
.pd__details details[open] summary::after{content:'–'}
.pd__details p{margin:0 0 18px;color:var(--muted);line-height:1.75;max-width:60ch}

/* --- cart & checkout --- */
.ck{max-width:1100px;margin:0 auto;padding:clamp(28px,4vw,56px) 24px clamp(64px,8vw,110px)}
.ck__grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){.ck__grid{grid-template-columns:1fr}}

.ck__lines{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ck__line{display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.ck__thumb{width:92px;height:92px;border:1px solid var(--line);border-radius: 0;background:var(--cream);display:grid;place-items:center;padding:8px;position:relative;isolation:isolate}
.ck__thumb img{max-width:100%;max-height:100%;mix-blend-mode:multiply}
.ck__name{display:block;font:400 19px/1.3 var(--serif);color:var(--maroon-ink);text-decoration:none}
.ck__meta{display:block;margin-top:5px;font-size:13px;color:var(--muted)}
.ck__remove{margin-top:8px;border:0;background:none;padding:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ck__remove:hover{color:var(--maroon)}
.ck__lineprice{font:400 18px/1 var(--serif);color:var(--maroon);white-space:nowrap}

.ck__panel{border:1px solid var(--line);border-radius:18px;background:var(--cream);padding:26px}
.ck__panel h2{margin:0 0 18px;font:400 24px/1.2 var(--serif);color:var(--maroon-ink)}
.ck__row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:15px;color:var(--muted)}
.ck__row--total{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;color:var(--maroon-ink);font:400 21px/1 var(--serif)}
.ck__go{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:20px;
  border:0;border-radius:999px;background:var(--maroon);color:var(--cream);cursor:pointer;text-decoration:none;
  font:400 16px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;
  transition:background .3s var(--ease);
}
.ck__go:hover{background:var(--maroon-deep)}
.ck__note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);text-align:center}

.ck__form{display:grid;gap:16px}
.ck__pair{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.ck__pair{grid-template-columns:1fr}}
.ck__input{display:block}
.ck__input span{display:block;margin:0 0 7px;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.ck__input input,.ck__input select{
  width:100%;min-height:50px;padding:0 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--ivory);color:var(--text);font:400 15px/1 var(--sans);
}
.ck__input input:focus,.ck__input select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.ck__legend{margin:10px 0 0;font:400 22px/1.2 var(--serif);color:var(--maroon-ink)}

.ck__empty{text-align:center;padding:70px 24px;color:var(--muted)}
.ck__empty h1{margin:0 0 12px;font:400 34px/1.2 var(--serif);color:var(--maroon-ink)}

/* the header count only appears once something is in the bag */
.hh-cart__count[hidden]{display:none}

/* ===== The daily reveal =====
   One design a day is the whole premise, so the moment it appears should feel
   like something opening rather than a picture loading. The garment settles
   first, a light sweeps across it, then the artwork prints onto the fabric.
   Scoped to the hero's photo panel (.hh-arch): in the full-bleed banner the
   panel is the right-hand photographic column, and the cover lifts off it
   edge-to-edge once a day. */

.hh-arch{position:relative}

/* the cover sits over the stage and lifts away */
.hh-reveal__cover{
  position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  background:linear-gradient(170deg,var(--maroon) 0%,var(--maroon-deep) 100%);
  transform-origin:top center;
}
.hh-reveal__seal{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  display:grid;place-items:center;gap:8px;text-align:center;pointer-events:none;
  color:var(--cream);
}
.hh-reveal__seal-mark{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(246,237,219,.45);
}
.hh-reveal__seal-text{
  font:600 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.82;
}

/* the sweep of light that crosses the garment once it is uncovered */
.hh-reveal__sweep{
  position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%);
}

/* artwork prints on after the garment has settled */
.hh-is-revealing .hh-tee__art{opacity:0;transform:scale(1.07)}

@media (prefers-reduced-motion: no-preference){
  .hh-is-revealing .hh-reveal__cover{
    animation:hhLift 1.05s cubic-bezier(.76,0,.24,1) .25s both;
  }
  .hh-is-revealing .hh-reveal__seal{
    animation:hhSeal .55s cubic-bezier(.4,0,1,1) .25s both;
  }
  .hh-is-revealing .hh-reveal__sweep{
    animation:hhSweep .85s cubic-bezier(.33,0,.2,1) 1.05s both;
  }
  .hh-is-revealing .hh-tee__garment{
    animation:hhSettle 1s cubic-bezier(.22,1,.36,1) .95s both;
  }
  .hh-is-revealing .hh-tee__art{
    animation:hhPrint .9s cubic-bezier(.22,1,.36,1) 1.3s both;
  }
  .hh-is-revealing .hh-daily-pill{
    animation:hhPop .6s cubic-bezier(.34,1.56,.64,1) 1.75s both;
  }
}

/* with reduced motion the design is simply there */
@media (prefers-reduced-motion: reduce){
  .hh-reveal__cover,.hh-reveal__seal,.hh-reveal__sweep{display:none}
  .hh-is-revealing .hh-tee__art{opacity:1;transform:none}
}

@keyframes hhLift{
  0%{transform:scaleY(1)}
  100%{transform:scaleY(0)}
}
@keyframes hhSeal{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.88)}
}
@keyframes hhSweep{
  0%{opacity:0;transform:translateX(-62%)}
  22%{opacity:1}
  100%{opacity:0;transform:translateX(62%)}
}
@keyframes hhSettle{
  0%{opacity:0;transform:translateY(16px) scale(.97)}
  100%{opacity:1;transform:none}
}
@keyframes hhPrint{
  0%{opacity:0;transform:scale(1.07)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes hhPop{
  0%{opacity:0;transform:translateY(10px) scale(.92)}
  100%{opacity:1;transform:none}
}

/* ---- countdown to the next drop ---- */
.hh-next{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--ivory);
  font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.hh-next__dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;
}
@media (prefers-reduced-motion: no-preference){
  .hh-next__dot{animation:hhPulse 2.4s ease-in-out infinite}
}
.hh-next__time{color:var(--maroon);font-variant-numeric:tabular-nums;letter-spacing:.04em}
@keyframes hhPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(185,137,75,.5)}
  60%{opacity:.75;box-shadow:0 0 0 7px rgba(185,137,75,0)}
}

/* ============ HavenLoot Motion CSS ============ */

/* reveals (pre-state only when JS runs) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: translateY(0); }
.js [data-reveal-delay="1"] { transition-delay: 80ms; }
.js [data-reveal-delay="2"] { transition-delay: 160ms; }
.js [data-reveal-delay="3"] { transition-delay: 240ms; }
.js [data-reveal-delay="4"] { transition-delay: 320ms; }
.js [data-reveal-delay="5"] { transition-delay: 400ms; }
.js [data-reveal-delay="6"] { transition-delay: 480ms; }

/* load gate: hold reveals invisible until first paint */
.js body.is-loading [data-reveal] { opacity: .001; }

/* split headline */
.js [data-split] .hl-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.js [data-split] .hl-wi { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); will-change: transform; }
.js [data-split].is-split-in .hl-wi { transform: translateY(0); }

/* rail buttons disabled state is in commerce css (.hc-rail-btn.is-off) */

/* float accents */
.js [data-float] { will-change: transform; }

/* hero entrance orchestration (plays once, after first paint) */
@keyframes hh-fade  { from { opacity: 0; } }
@keyframes hh-drop  { from { opacity: 0; transform: translateY(-8px); } }
@keyframes hh-stage { from { opacity: 0; transform: scale(.97); } }
.js body.is-ready .hh-annc        { animation: hh-fade .9s var(--ease) both; }
.js body.is-ready .hh-head        { animation: hh-drop .8s var(--ease) .1s both; }
.js body.is-ready .hh-hero__stage { animation: hh-stage 1.1s var(--ease) .25s both; }

/* reduced motion: everything instant */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal].is-in { opacity: 1; transform: none; transition: none; transition-delay: 0s !important; }
  .js [data-split] .hl-wi { transform: none; transition: none; }
  .js body.is-ready .hh-annc, .js body.is-ready .hh-head, .js body.is-ready .hh-hero__stage { animation: none; }
}

/* one drawn piece; height drives it so mark and wordmark keep their ratio */
.hl-brand__lockup{display:block;height:46px;width:auto}
@media(max-width:760px){.hl-brand__lockup{height:38px}}
/* Editorial storefront: Rino & Pelle's spacious campaign rhythm in HavenLoot's palette. */
:root{--display:var(--sans)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--maroon);outline-offset:5px}
.hl-skip{position:fixed;top:8px;left:16px;padding:12px 20px;background:var(--ivory);z-index:100;transform:translateY(-180%)}
.hl-skip:focus{transform:none}
.hh-annc{background:var(--maroon);color:var(--cream)}
.hh-annc__text{min-height:36px;padding:6px 24px;gap:28px;text-transform:none}
.hh-annc__msg,.hh-annc__link{font:11px/1.5 var(--sans);letter-spacing:.04em;color:var(--cream)}
.hh-head{background:var(--ivory)}
.hh-head__inner,.hh-head.is-scrolled .hh-head__inner{max-width:none;min-height:86px;padding:16px 3.2vw;gap:32px}
.hh-brand{margin-right:auto}
.hh-brand__word{font-family:var(--serif);font-size:27px;letter-spacing:.015em;font-weight:500}
.hh-brand__loot{color:var(--maroon)}
.hh-nav__list{gap:28px}
.hh-nav__link{font:12px/1.5 var(--sans);letter-spacing:.015em;text-transform:none;min-height:44px;align-content:center}
.hh-nav__link::after{background:var(--maroon);height:1px}
.hh-search{flex:0 1 130px;max-width:130px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:0;height:44px}
.hh-search__input{font-size:12px}
.hl-search-submit{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--maroon);cursor:pointer}
.hh-icon-btn,.hh-burger{width:44px;height:44px}
.hl-campaign{display:grid;grid-template-columns:38% 62%;min-height:650px;background:var(--cream);color:var(--maroon);scroll-margin-top:90px}
.hl-campaign__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:64px clamp(24px,4vw,76px);position:relative}
.hl-kicker,.hc-eyebrow{font:10px/1.6 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--maroon);margin:0 0 24px}
.hl-campaign h1{font:400 clamp(54px,5.5vw,88px)/1.05 var(--serif);letter-spacing:-.055em;margin:0 0 28px}
.hl-campaign h1 em,.hl-story h2 em{font-weight:400}
.hl-campaign__intro{font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 32px}
.hl-button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;padding:13px 24px;background:var(--maroon);color:var(--ivory);font:12px/1.6 var(--sans);text-decoration:none;border:1px solid var(--maroon);transition:background .2s}
.hl-button:hover{background:var(--maroon-deep)}
.hl-text-link{font-size:11px;margin-top:18px;text-underline-offset:5px}
.hl-campaign__edition{position:absolute;bottom:22px;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.hl-campaign__images{display:flex;min-width:0;overflow:hidden;background:var(--blush)}
.hl-campaign__frame{position:relative;flex:1;min-width:0;display:block;overflow:hidden;color:var(--ivory);background:var(--blush)}
.hl-campaign__frame img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hl-campaign__frame--art img{object-fit:contain;padding:28px}
.hl-campaign__caption{position:absolute;bottom:0;left:0;right:0;padding:56px 22px 22px;background:linear-gradient(transparent,rgba(46,10,18,.75));font-size:11px;display:flex;justify-content:space-between;gap:12px}
.hl-note{display:flex;justify-content:space-between;gap:20px;padding:18px 4vw;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.hl-note a{color:var(--maroon);text-decoration:none}
.hc-shop{padding:120px 0 32px;background:var(--ivory)}
.hc-shop__inner{max-width:none;padding-inline:0}
.hc-shop__inner>h1,.hc-shop__inner>p,.hc-shop__inner>nav{margin-inline:24px}
.hc-shop__head{margin-bottom:48px;padding-inline:24px;align-items:center}
.hc-eyebrow{margin-bottom:10px}
.hc-shop__title{font:400 clamp(32px,3.5vw,48px)/1.15 var(--serif);letter-spacing:-.035em;text-transform:none}
.hc-shopall{font:12px/1.5 var(--sans);letter-spacing:0;text-transform:none;border-bottom:1px solid var(--maroon);padding-bottom:5px}
.hc-latest{gap:32px 8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.hc-latest>li{min-width:0}
/* Match the published portraits so contained photos fill the entire card width. */
.hc-card__media{aspect-ratio:9/16;border:0;background:var(--cream)}
.hc-card__media>img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hc-card__media>video{object-position:center top}
.hc-card__media>.hc-published-art{object-fit:contain;padding:0}
.hc-card__name{font:400 13px/1.5 var(--sans)}
.hc-card__body{padding:8px 8px 0}
.hc-card__cta{font:10px/1.6 var(--sans);letter-spacing:.04em;color:var(--muted);margin-top:5px}
.hc-card__link{min-height:60px}
.hc-card__link:focus-visible{outline:2px solid var(--maroon);border-radius:0}
.hl-story{text-align:center;background:var(--blush);color:var(--maroon);padding:88px 24px 0;overflow:hidden}
.hl-story h2{font:400 clamp(40px,5vw,68px)/1.15 var(--serif);letter-spacing:-.04em;margin:0 0 24px}
.hl-story>p:not(.hl-kicker){max-width:430px;margin:0 auto 30px;font-size:13px;line-height:1.9;color:var(--muted)}
.hl-story__word{display:block;font:400 clamp(48px,10vw,160px)/1.3 var(--serif);letter-spacing:-.06em;margin:50px 0 -20px;color:var(--maroon);opacity:.16;white-space:nowrap}
.hf-footer{padding-top:55px;background:var(--cream);color:var(--maroon)}
.hf-footer__grid{max-width:1600px;grid-template-columns:1fr 1fr 2fr;padding-inline:4vw;gap:40px}
.hf-footer__heading{font:500 11px/1.6 var(--sans);letter-spacing:.1em}
.hf-footer__link{font:12px/1.8 var(--sans)}
.hf-footer__signoff{padding-top:30px}
.hf-footer__watermark{font-family:var(--serif);text-transform:none;letter-spacing:-.05em}
@media(min-width:1600px){.hl-campaign{min-height:760px}}
@media(max-width:1000px){.hh-head__inner{gap:20px}.hh-nav__list{gap:18px}.hl-campaign{grid-template-columns:43% 57%;min-height:560px}.hl-campaign__frame:nth-child(2){display:none}.hc-latest{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.hh-head__inner,.hh-head.is-scrolled .hh-head__inner{min-height:76px;padding:12px 20px;gap:12px;flex-wrap:wrap}.hh-brand__word{font-size:25px}.hh-annc__link{display:none}.hh-search{order:4;flex-basis:100%;max-width:none}.hh-nav{display:flex;order:3;flex-basis:100%;justify-content:center}.hh-nav__list{gap:24px}.hh-nav__link{font-size:11px}.hh-burger{display:none}.hl-campaign{grid-template-columns:1fr;min-height:0}.hl-campaign__copy{padding:44px 24px 55px}.hl-campaign h1{font-size:58px}.hl-campaign__images{height:480px}.hl-campaign__frame:nth-child(2){display:block}.hl-campaign__edition{bottom:18px}.hl-note{padding:16px 24px;font-size:10px;align-items:center}.hl-note>span{max-width:170px}.hc-shop{padding-block:44px}.hc-shop__inner{padding-inline:20px}.hc-latest{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}.hc-shop__head{flex-direction:row;align-items:flex-end}.hc-shopall{font-size:11px}.hc-eyebrow{font-size:9px}.hl-story{padding-top:55px}.hf-footer__grid{grid-template-columns:1fr 1fr;gap:30px}.hf-footer__col--aside{grid-column:1/-1}.hl-campaign__caption{padding:40px 12px 16px}}
@media(max-width:440px){.hl-campaign__images{height:420px}.hl-campaign__frame:nth-child(2){display:none}.hh-nav__list{gap:20px}.hc-shop__title{font-size:30px}}
@media(prefers-reduced-motion:reduce){.hl-campaign__frame img,.hl-button{transition:none}.hl-campaign__frame:hover img{transform:none}}
/* Keep compact navigation and search available at intermediate/mobile widths. */
.hh-nav{display:flex}
.hh-search{display:flex}
.hh-actions .hh-icon-btn[data-region-open]{display:grid}
.hh-search:focus-within{outline:2px solid var(--maroon);outline-offset:4px}
#latest,#story{scroll-margin-top:220px}
/* Preserve the entire supplied photo and clip, including heads and shirt hems. */
.hl-campaign__frame>a{display:block;width:100%;height:100%}
.hl-campaign__frame img,.hc-card__media>img,.hc-card__media>video,.hl-campaign__frame>video{object-fit:contain;object-position:center}
.hc-card__media.hc-model{width:100%}
.hl-campaign__frame>video{position:absolute;inset:0;width:100%;height:100%}
[data-published-media]>video{z-index:3;background:var(--cream)}
.js [data-published-media]>video{opacity:0;pointer-events:none}
.js [data-published-media].is-video-active>video{opacity:1}
.hl-video-toggle{position:absolute;right:10px;bottom:10px;z-index:5;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--cream);border-radius:50%;background:var(--maroon);color:var(--ivory);cursor:pointer;opacity:0;font:14px/1 var(--sans)}
.hl-video-toggle[hidden]{display:none}
.is-video-active>.hl-video-toggle,[data-published-media]:hover>.hl-video-toggle,[data-published-media]:focus-within>.hl-video-toggle{opacity:1}
.hl-campaign__caption{z-index:4;pointer-events:none;padding-right:60px}
.hl-brand{gap:10px;min-height:56px;color:var(--maroon)}
.hl-brand__mark{flex:none;width:44px;height:52px}
.hl-brand__ribbon{fill:var(--gold)}
.hl-brand__ribbon-light{fill:var(--gold-soft)}
.hl-brand__type{display:flex;flex-direction:column;gap:5px}
.hl-brand__name{font:600 26px/1 var(--serif);letter-spacing:-.04em;white-space:nowrap}
.hl-brand__name>span{color:var(--gold)}
.hl-brand__tagline{font:500 7px/1.4 var(--sans);letter-spacing:.21em;text-transform:uppercase;white-space:nowrap}
@media(hover:none){.hl-video-toggle{opacity:1}}
@media(max-width:760px){.hl-brand{gap:7px}.hl-brand__mark{width:36px;height:44px}.hl-brand__name{font-size:23px}.hl-brand__tagline{font-size:6px;letter-spacing:.17em}}
/* Size paired portraits from their width instead of a fixed viewport height. */
.hl-campaign{height:auto;min-height:0}
.hl-campaign__images{height:auto;min-height:0;aspect-ratio:4/3;align-self:center;gap:4px}
.hl-campaign__frame{height:100%}
@media(min-width:761px) and (max-width:1000px){.hl-campaign__images{aspect-ratio:2/3}}
@media(min-width:761px){.hc-latest{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){
  .hc-shop{padding-block:80px 24px}
  .hc-shop__inner{padding-inline:0}
  .hc-shop__inner>h1,.hc-shop__inner>p,.hc-shop__inner>nav{margin-inline:16px}
  .hc-shop__head{padding-inline:16px;margin-bottom:32px}
  .hc-latest{gap:24px 1px}
  .hl-campaign__images{gap:1px}
}
@media(max-width:440px){.hl-campaign__images{aspect-ratio:2/3}}

.hl-daily-hero{position:relative;background:#d8d5d0;color:var(--maroon);isolation:isolate}
.hl-daily-hero picture,.hl-daily-hero img{display:block;width:100%}
.hl-daily-hero img{height:auto;aspect-ratio:16/9;object-fit:contain}
.hl-daily-hero__copy{position:absolute;left:6%;top:50%;transform:translateY(-50%);width:40%;padding:0;background:transparent;color:var(--maroon)}
.hl-daily-hero h1{font:400 clamp(32px,4.5vw,76px)/1.08 var(--serif);letter-spacing:-.035em;overflow-wrap:anywhere;margin:16px 0}
.hl-daily-hero__copy>p:not(.hl-kicker){margin:20px 0;font-size:14px}
.hl-daily-hero .hl-button{min-height:44px}
@media(max-width:760px){.hl-daily-hero img{aspect-ratio:4/5}.hl-daily-hero__copy{position:relative;inset:auto;transform:none;width:100%;padding:28px 24px 36px}.hl-daily-hero h1{font-size:40px}}