/* Luxe Elite — premium apparel theme in the spirit of Shopify Impulse.
   Base component stylesheet first (shared markup contracts), then the Impulse design layer.
   All design tokens arrive as CSS custom properties from layout/theme.liquid. */

*, *::before, *::after { box-sizing: border-box; }

/* Dawn's type rhythm: body copy is the text colour at 75% with a touch of tracking; headings stay
   at full strength. Derived from --brand-text, so a merchant's colour choice still drives both. */
:root { --text-soft: color-mix(in srgb, var(--brand-text) 75%, transparent); --surface-soft: color-mix(in srgb, var(--brand-text) 5%, var(--brand-bg)); }

body {
  margin: 0;
  background: var(--brand-bg);
  color: var(--text-soft);
  font-family: var(--body-font);
  font-size: var(--base-font-size);
  line-height: 1.8;
  letter-spacing: 0.06rem;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.3;
  margin: 0 0 0.5em;
}
/* Full-strength headings on the page itself; anything on its own background (hero, footer) keeps
   the colour that background sets. */
main h1, main h2, main h3 { color: var(--brand-text); }
main .hero h1, main .hero h2, main .hero h3 { color: inherit; }
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.page-width {
  max-width: var(--page-width);
  margin-inline: auto;
  --page-gutter: clamp(20px, 4vw, 50px);
  padding-inline: var(--page-gutter);
}

.rte > :first-child { margin-top: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary { background: var(--btn-primary-bg-color); color: var(--btn-primary-text-color); }
.btn--primary:hover { background: var(--btn-primary-hover-bg); }
.btn--outline { background: transparent; border-color: var(--brand-text); color: var(--brand-text); }
.btn--outline:hover { background: var(--brand-text); color: var(--brand-bg); }
.btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--brand-text); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; background: transparent; border-color: var(--brand-border); color: var(--brand-muted); }
.btn.is-added { background: var(--brand-text); color: var(--brand-bg); }

.btn-icon {
  background: none;
  border: 0;
  padding: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: #fff;
  font-size: 12px;
}

/* ---------- header ---------- */
.site-header {
  background: var(--menu-background-color);
  color: var(--menu-foreground-color);
  border-bottom: 1px solid var(--brand-border);
}
.site-header a:hover, .site-nav__link:hover { color: var(--menu-hover-color); }
/* Dawn layout: logo, then the menu right beside it, then the icons pushed to the far right. */
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--menu-height);
}
.site-header__wordmark {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--menu-foreground-color);
}

.site-nav__list {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--menu-font-size);
}
.site-nav__item { position: relative; }
.site-nav__link {
  padding: 8px 0;
  display: inline-flex;
  color: color-mix(in srgb, var(--menu-foreground-color) 75%, transparent);
  text-underline-offset: 4px;
}
.site-header .site-nav__link:hover,
.site-nav__item--has-children:focus-within > .site-nav__link {
  color: var(--menu-foreground-color);
  text-decoration: underline;
}
.site-nav__submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: -20px;
  min-width: 200px;
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  background: var(--menu-background-color);
  border: 1px solid var(--brand-border);
  z-index: 20;
}
/* Bridges the 8px gap so the menu doesn't close while the pointer travels down to it. */
.site-nav__submenu::before { content: ""; position: absolute; inset: -9px 0 auto; height: 9px; }
.site-nav__item--has-children:hover .site-nav__submenu,
.site-nav__item--has-children:focus-within .site-nav__submenu { display: flex; }

.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* ---------- hero ---------- */
/* Falls back to the theme's own dark text color so the white heading/CTA stay legible even before
   (or without) a background image — a photo-less hero is a valid, if plain, starting state. */
.hero { position: relative; display: grid; min-height: var(--hero-height, 520px); overflow: hidden; background: var(--brand-text); }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay, transparent); }

/* Dawn's signature: two images side by side, heading/CTA centered across the seam. */
.hero--split { grid-template-columns: 1fr 1fr; }
.hero--split .hero__image { position: static; grid-row: 1; height: var(--hero-height, 520px); }
.hero--split .hero__image { grid-column: 1; }
.hero--split .hero__image--two { grid-column: 2; }
@media (max-width: 700px) {
  .hero--split { grid-template-columns: 1fr; }
  .hero--split .hero__image,
  .hero--split .hero__image--two { grid-column: 1; height: calc(var(--hero-height, 520px) / 2); }
  .hero--split .hero__image--two { grid-row: 2; }
}
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: min(var(--page-width), 100%);
  margin-inline: auto;
  padding: 40px 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hero__content--left { text-align: left; margin-right: auto; align-items: flex-start; }
.hero__content--center { text-align: center; align-items: center; }
.hero__content--right { text-align: right; margin-left: auto; align-items: flex-end; }
/* ---------- hero slideshow ----------
   Slides sit side by side in a track that theme.js moves one slide-width at a time via
   --slide-index. Without JS the track stays at 0, so the first slide is an ordinary banner. */
.hero:has(> .hero__track) { height: var(--hero-height, 520px); min-height: 0; }
.hero:has(> .hero__track)::after { display: none; }
.hero__track {
  position: absolute;
  inset: 0;
  display: flex;
  transform: translateX(calc(var(--slide-index, 0) * -100%));
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
/* The overlay belongs to each slide here, so per-slide text is painted above it, not under it. */
.hero__slide::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay, transparent); }
.hero__slide .hero__content { z-index: 1; }

.hero__controls {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}
.hero__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.hero__control:hover, .hero__control:focus-visible { background: rgba(255, 255, 255, 0.18); }
.hero__control .icon { width: 18px; height: 18px; }
.hero__control--pause .icon--play { display: none; }
.hero__control--pause[aria-pressed="true"] .icon--pause { display: none; }
.hero__control--pause[aria-pressed="true"] .icon--play { display: block; }
.hero__dots { display: flex; gap: 2px; }
.hero__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.hero__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  transition: background 0.2s ease;
}
.hero__dot.is-active::before { background: #fff; }

@media (max-width: 700px) {
  .hero:has(> .hero__track) { height: min(var(--hero-height, 520px), 72vh); }
  .hero__controls { bottom: 12px; }
}

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

.hero__heading { font-size: clamp(2rem, 5vw, 3.5rem); }
.hero__subheading { font-size: 1.125rem; margin-bottom: 24px; }

/* ---------- grids ---------- */
.featured, .product-grid, .collection-header, .product, .page-content {
  padding-block: var(--section-padding-y);
}
main > * + * { margin-top: var(--section-gap); }
.featured__title { text-align: center; margin-bottom: 32px; }
.featured__grid, .product-grid__items, .collection-section__items {
  display: grid;
  grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .featured__grid, .product-grid__items, .collection-section__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-nav { display: none; }
}

/* Featured collection (Dawn) — a merchant-picked collection listed anywhere a section can go:
   heading on top, the product grid, then a centred "View all" button. */
.collection-section { padding-block: var(--section-padding-y); }
.collection-section__head { margin-bottom: var(--space-6); }
.collection-section__head--center { text-align: center; }
.collection-section__title {
  margin: 0;
  font-size: var(--h2-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
}
.collection-section__description { margin: var(--space-3) 0 0; color: var(--text-soft); }
.collection-section__footer { display: flex; justify-content: center; margin-top: var(--space-7); }
.collection-section__view-all { min-width: 160px; }
.collection-section__empty { color: var(--brand-muted); margin: 0; }

@media (max-width: 900px) {
  .collection-section .collection-section__items {
    grid-template-columns: repeat(var(--columns-mobile, 2), minmax(0, 1fr));
    gap: 12px;
  }
  .collection-section__head { margin-bottom: var(--space-5); }
  .collection-section__footer { margin-top: var(--space-6); }
}

/* Swipe on mobile: one scrolling row, a card and a peek of the next, snapping per card. The row
   runs edge to edge (out through the page gutter) so the peek reads as "there is more". */
@media (max-width: 700px) {
  .collection-section--slider .collection-section__items {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-gutter, 20px);
    margin-inline: calc(var(--page-gutter, 20px) * -1);
    padding-inline: var(--page-gutter, 20px);
    scrollbar-width: none;
  }
  .collection-section--slider .collection-section__items::-webkit-scrollbar { display: none; }
  .collection-section--slider .collection-section__items > .card {
    flex: 0 0 calc(100% / var(--columns-mobile, 2) - 24px);
    scroll-snap-align: start;
  }
}

/* Dawn's collection list: the photo on a soft panel, the name and an arrow underneath. */
.tile { display: block; color: var(--brand-text); }
.tile__image {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.tile__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  font-family: var(--heading-font);
  font-size: 1.125rem;
  text-underline-offset: 4px;
}
.tile__label::after { content: "→"; transition: transform 0.2s ease; }
.tile:hover .tile__label { text-decoration: underline; }
.tile:hover .tile__label::after { transform: translateX(4px); }

/* ---------- product card (Dawn: soft image panel, pill badge bottom-left, quiet type) ---------- */
/* The storefront app ships Bootstrap, whose own .card (white box, border, rounded corners) would
   otherwise wrap every product card. Reset it so the card stays bare. */
.card { position: relative; display: block; border: 0; border-radius: 0; background: none; color: inherit; }
.card__image { width: 100%; object-fit: cover; box-shadow: var(--card-shadow); }
.card__body { padding: 12px 0 0; }
.card__vendor { color: var(--brand-muted); font-size: 0.8125rem; margin: 0 0 4px; }
.card__title {
  font-family: var(--body-font);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.06rem;
  line-height: 1.5;
  color: var(--brand-text);
  margin: 0 0 6px;
  text-underline-offset: 3px;
}
.card__link:hover .card__title { text-decoration: underline; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 1rem; letter-spacing: 0.1rem; color: var(--brand-text); }
.card__compare { color: var(--text-soft); font-size: 0.8125rem; }

.product__compare { color: var(--brand-muted); font-weight: 400; margin-left: 8px; }
.product__price { color: var(--brand-text); }

.card__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 3px 13px;
  border-radius: 40px;
  background: var(--brand-text);
  color: var(--brand-bg);
  font-size: 0.75rem;
  letter-spacing: 0.1rem;
  line-height: 1.6;
}
.card__badge--sale { background: var(--color-sale); color: #fff; }

/* ---------- product page ---------- */

/* Dawn gives the media the larger share (~60%) and keeps the details column narrow. */
.product__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .product__layout { grid-template-columns: 1fr; gap: 24px; } }
.product__image { width: 100%; background: var(--surface-soft); }

/* Thumbs are fixed squares with the photo cropped to fill — without a height they take each image's
   own proportions, so a tall photo turns the strip into stretched columns. */
.product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 88px)); gap: 10px; margin-top: 10px; }
.product__thumb {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--surface-soft);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.product__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product__thumb:hover { opacity: 1; }
.product__thumb.is-active { opacity: 1; border-color: var(--brand-text); }

.product__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; margin-bottom: 16px; }
.product__pricing { display: flex; align-items: baseline; gap: 10px; font-size: 1.125rem; font-weight: 400; letter-spacing: 0.1rem; }
.product__pricing .product__compare { font-size: 0.875rem; margin-left: 0; }
.product__sku { color: var(--brand-muted); font-size: 0.8125rem; }
.product__description { color: var(--text-soft); line-height: 1.8; }

.product__variants { border: 0; padding: 0; margin: 24px 0; display: grid; gap: 8px; }
.product__variants-legend { font-weight: 600; margin-bottom: 8px; }
.variant {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.variant:has(input:checked) { border-color: var(--brand-primary); }
.variant--unavailable { opacity: 0.5; cursor: not-allowed; }
.variant__price { margin-left: auto; color: var(--brand-muted); }

.product__actions { display: flex; gap: 12px; align-items: stretch; margin-block: 24px; }
.product__qty {
  width: 80px;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font: inherit;
}
.product__add { flex: 1; }

/* ---------- static pages ---------- */

.page-content--narrow .page-width { max-width: 760px; }
.page-content__title { font-size: clamp(1.75rem, 4vw, 2.5rem); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: var(--space-8);
  background: var(--footer-background-color);
  color: var(--footer-foreground-color);
  border-top: 1px solid var(--brand-border);
  font-size: var(--footer-font-size);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding-block: 48px;
}
.site-footer__heading { font-size: 1.125rem; font-weight: 400; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__links a:hover { color: var(--brand-accent); }
.newsletter { display: flex; gap: 8px; }
.newsletter__input {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font: inherit;
}
.site-footer__bar { padding-bottom: 32px; color: var(--brand-muted); font-size: 0.875rem; }
.site-footer__copy { margin: 0; }

/* ---------- mobile header + menu drawer (Dawn) ----------
   Below 900px the inline nav is replaced by a toggle at the far left, the logo is centred, and the
   menu opens as a drawer under the header: one full-width panel per menu level, each sliding in
   over its parent. Above 900px the toggle and drawer are hidden and the inline nav is shown. */
.site-header__nav-toggle { display: none; }
.site-header__nav-toggle .icon--close { display: none; }
.site-header__nav-toggle[aria-expanded="true"] .icon--hamburger { display: none; }
.site-header__nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.menu-drawer { display: none; }

@media (max-width: 900px) {
  .site-header__nav-toggle { display: inline-flex; justify-self: start; margin-inline-start: -6px; }

  /* toggle | logo | icons in Dawn's 1fr 2fr 1fr split. Fixed fractions rather than an `auto`
     middle: a long shop name would otherwise widen the logo column and crush the icons, and equal
     outer columns keep the logo dead centre however many icons sit on the right. */
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
    min-height: 64px;
  }
  .site-header__logo { min-width: 0; max-width: 100%; justify-self: center; text-align: center; }
  .site-header__logo img { max-width: 100%; }
  .site-header__wordmark {
    display: block;
    font-size: 1.25rem;
    letter-spacing: 0.25em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header__actions { gap: 0; margin-inline-end: -6px; }
  .site-header__actions .btn-icon { padding: 6px; }
  /* Dawn moves the account link into the drawer on phones; the header keeps only search + cart. */
  .site-header__actions .site-header__account,
  .site-header__actions .site-header__wishlist { display: none; }
  .site-nav { display: none; }

  .menu-drawer:not([hidden]) {
    display: block;
    position: fixed;
    inset-inline: 0;
    top: var(--menu-drawer-top, 64px);
    bottom: 0;
    z-index: 40;
    overflow: hidden;
    background: var(--menu-background-color);
    color: var(--menu-foreground-color);
    border-top: 1px solid var(--brand-border);
    animation: menu-drawer-in 0.2s ease;
  }
}

@keyframes menu-drawer-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

/* Every level is a full-size panel. The root lays out list + utility footer; sub-panels sit on top
   of their parent, parked off to the right until opened. */
.menu-drawer__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--menu-background-color);
}
.menu-drawer__panel--sub {
  z-index: 1;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.menu-drawer__panel--sub.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s;
}
/* While a child panel covers this one, stop this one scrolling under the shopper's thumb. */
.menu-drawer__panel.has-open-child { overflow: hidden; }

.menu-drawer__list { list-style: none; margin: 0; padding: var(--space-4) 0; flex: 1 0 auto; }
.menu-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: 11px var(--space-6);
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--menu-foreground-color);
  cursor: pointer;
}
.menu-drawer__item:hover,
.menu-drawer__item:focus-visible,
.menu-drawer__item.is-active { background: var(--surface-soft); }
.menu-drawer__item--all { font-size: 1rem; text-decoration: underline; text-underline-offset: 4px; }
.menu-drawer__item .icon--arrow { width: 18px; height: 18px; flex: none; }

.menu-drawer__back {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 14px var(--space-6);
  border: 0;
  border-bottom: 1px solid var(--brand-border);
  background: none;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--menu-foreground-color);
  cursor: pointer;
}
.menu-drawer__back .icon--arrow { width: 18px; height: 18px; flex: none; }

/* Dawn's grey footer block: account link, then social icons. */
.menu-drawer__utility {
  flex: none;
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: color-mix(in srgb, var(--menu-foreground-color) 4%, var(--menu-background-color));
}
.menu-drawer__account {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--menu-foreground-color);
}
.menu-drawer__account .icon { width: 22px; height: 22px; }
.menu-drawer__utility .social-icons { margin-top: var(--space-5); }

/* Page behind the open drawer must not scroll. */
html.menu-drawer-open, html.menu-drawer-open body { overflow: hidden; }

.social-icons { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; margin-inline-start: -8px; }
.social-icons__link { display: inline-flex; padding: 8px; color: var(--menu-foreground-color); }
.social-icons__link svg { width: 20px; height: 20px; display: block; }
.social-icons__link:hover { opacity: 0.7; }

.site-header { position: relative; }
/* Sticky has to go on the section wrapper: the header fills its wrapper exactly, so sticking the
   header itself would have no room to move. */
.site-header-wrapper:has(.site-header--sticky) { position: sticky; top: 0; z-index: 30; }

/* ---------- icons ----------
   Stroked, sized in one place, and coloured from the surrounding text so the header's own
   --menu-foreground-color drives them. A theme recolouring its header recolours these too. */
.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  border-radius: var(--radius);
}
.btn-icon:hover { color: var(--menu-hover-color); }

/* .btn-icon above sets display, which would otherwise show the mobile menu toggle on desktop. */
@media (min-width: 901px) { .btn-icon.site-header__nav-toggle { display: none; } }

/* The label stays in the DOM for screen readers and for the accessibility tree — hidden, not
   removed, because a control whose only content is an SVG announces as nothing. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The badge sits on the cart icon rather than beside it, as it did before. */
.btn-icon--cart { position: relative; }
.btn-icon--cart .cart-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--menu-foreground-color);
  color: var(--menu-background-color);
  letter-spacing: 0;
  min-width: 16px;
  height: 16px;
  margin: 0;
  font-size: 10px;
  line-height: 16px;
}
.btn-icon--cart .cart-count[hidden] { display: none; }

/* =============================================================================
   DAWN RESTYLE — the storefront's own reference/starter theme, rebuilt to match
   Shopify's Dawn: neutral black/white, thin hairlines, swatch-style variant
   pickers, a client-side filter/sort toolbar, and a two-image split hero.
   ============================================================================= */

/* ---------- nav dropdown chevron ---------- */
.site-nav__link { display: inline-flex; align-items: center; gap: 4px; }
.site-nav__chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.15s ease; }
.site-nav__item--has-children:hover .site-nav__chevron,
.site-nav__item--has-children:focus-within .site-nav__chevron { transform: rotate(180deg); }
.site-nav__sublink {
  display: block;
  padding: 6px 20px;
  font-size: var(--menu-font-size);
  color: color-mix(in srgb, var(--menu-foreground-color) 75%, transparent);
  text-underline-offset: 4px;
}
.site-nav__sublink:hover { color: var(--menu-foreground-color); text-decoration: underline; }

/* Third level: listed under its parent inside the same dropdown, a step smaller and indented, so
   the dropdown reads as small groups (Dawn's dropdown with nested links). */
.site-nav__submenu { max-height: calc(100vh - var(--menu-height) - 40px); overflow-y: auto; }
.site-nav__subitem--has-children > .site-nav__sublink { color: var(--menu-foreground-color); }
.site-nav__subitem--has-children + .site-nav__subitem { margin-top: 6px; }
.site-nav__grandchildren { list-style: none; margin: 0 0 6px; padding: 0; }
.site-nav__grandlink {
  display: block;
  padding: 4px 20px 4px 34px;
  font-size: calc(var(--menu-font-size) - 1px);
  color: color-mix(in srgb, var(--menu-foreground-color) 65%, transparent);
  text-underline-offset: 4px;
}
.site-nav__grandlink:hover,
.site-nav__grandlink.is-active,
.site-nav__sublink.is-active { color: var(--menu-foreground-color); text-decoration: underline; }

/* ---------- announcement bar ---------- */
.announcement-bar {
  background: var(--brand-bg);
  border-bottom: 1px solid var(--brand-border);
  overflow: hidden;
  font-size: 13px;
  text-align: center;
}
.announcement-bar__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding-block: 9px; position: relative; }
.announcement-bar__viewport { overflow: hidden; min-width: 0; }
.announcement-bar__track { display: flex; width: max-content; white-space: nowrap; animation: dawn-announce-marquee 22s linear infinite; }
.announcement-bar__track--static { animation: none; width: 100%; justify-content: center; }
.announcement-bar__track:hover { animation-play-state: paused; }
.announcement-bar__text { padding-inline-end: 48px; letter-spacing: 0.01em; }
.announcement-bar__track--static .announcement-bar__text { padding-inline-end: 0; }
.announcement-bar__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--brand-muted); }
.announcement-bar__close:hover { color: var(--brand-text); }
.announcement-bar__close .icon { width: 14px; height: 14px; }
@keyframes dawn-announce-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- product card: uncropped-swap hover, no border/shadow (Dawn's grid is bare) ---------- */
.card__image-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface-soft); }
.card__image { transition: opacity 0.3s ease, transform 0.5s ease; }
@media (hover: hover) {
  .card:hover .card__image { transform: scale(1.03); }
}
.card-ratio-square .card__image-frame { aspect-ratio: 1; }
.card-ratio-portrait .card__image-frame { aspect-ratio: 3 / 4; }
.card-ratio-landscape .card__image-frame { aspect-ratio: 4 / 3; }
.card__image { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.card__image--alt { opacity: 0; transition: opacity 0.25s ease; }
.card:hover .card__image--alt { opacity: 1; }
.card__title { font-weight: 400; }
.card__price { font-weight: 400; }

/* ---------- collection filter/sort toolbar ---------- */
.collection-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: 14px;
}
.collection-toolbar__filters { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.collection-toolbar__label { color: var(--brand-muted); }
.collection-toolbar__sort { display: flex; align-items: center; gap: var(--space-3); color: var(--brand-muted); }
.collection-toolbar__select {
  border: none;
  background: transparent;
  font: inherit;
  color: var(--brand-text);
  padding-block: 4px;
  cursor: pointer;
}
.collection-toolbar__count { white-space: nowrap; }

.filter-dropdown { position: relative; }
.filter-dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  padding: 6px 2px;
}
.filter-dropdown summary::-webkit-details-marker { display: none; }
.filter-dropdown .icon--chevron { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform 0.15s ease; }
.filter-dropdown[open] .icon--chevron { transform: rotate(180deg); }
.filter-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 15;
  display: grid;
  gap: var(--space-3);
  min-width: 200px;
  margin-top: 8px;
  padding: var(--space-4);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  box-shadow: 0 8px 20px var(--shadow-medium);
  font-size: 14px;
}
.filter-dropdown__panel label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.filter-dropdown__panel--price label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: 12px; color: var(--brand-muted); }
.filter-dropdown__panel--price input { padding: 8px; border: 1px solid var(--brand-border); border-radius: var(--radius); font: inherit; color: var(--brand-text); }

/* ---------- product option swatches ---------- */
.product__options { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
.product__option { border: 0; padding: 0; margin: 0; }
/* Dawn labels the group by name only ("Color", "Size") — the filled pill shows the choice. */
.product__option-label { font-size: 13px; font-weight: 400; color: var(--text-soft); margin-bottom: 8px; padding: 0; }
.product__option-current { display: none; }
.product__option-values { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 40px;
  padding-inline: 16px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.swatch input:checked + .swatch__value { background: var(--brand-text); border-color: var(--brand-text); color: var(--brand-bg); }
.swatch input:focus-visible + .swatch__value { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.swatch:hover .swatch__value { border-color: var(--brand-text); }

/* Sizes use the same pill as every other option, as Dawn does. */
.swatch--round .swatch__value { min-width: 56px; padding-inline: 16px; }

/* No available variant for this value given the other choices: still selectable (the shopper then
   sees "Sold out"), but struck through like Dawn. */
.swatch.is-unavailable .swatch__value {
  color: var(--brand-muted);
  background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--brand-border) calc(50% - 0.5px), var(--brand-border) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.swatch.is-unavailable input:checked + .swatch__value {
  color: var(--brand-bg);
  background:
    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--brand-bg) calc(50% - 0.5px), var(--brand-bg) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--brand-muted);
  border-color: var(--brand-muted);
}

/* ---------- quantity stepper ---------- */
.product__qty-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.product__qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.product__qty-btn {
  width: 40px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  color: var(--brand-text);
}
.product__qty-btn:hover { background: var(--surface-alt, #f5f5f5); }
.product__qty-stepper .product__qty {
  width: 48px;
  border: 0;
  border-inline: 1px solid var(--brand-border);
  border-radius: 0;
  text-align: center;
  -moz-appearance: textfield;
}
.product__qty-stepper .product__qty::-webkit-inner-spin-button,
.product__qty-stepper .product__qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.product__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-block: var(--space-5); }
.product__add, .product__buy-now { width: 100%; text-align: center; margin-top: 10px; }

/* ---------- footer: plain, light, three quiet columns ---------- */
.site-footer__heading { font-size: 1.125rem; font-weight: 400; margin-bottom: var(--space-4); }
.site-footer__links a { color: var(--brand-muted); }
.site-footer__links a:hover { color: var(--brand-text); text-decoration: underline; }
.site-footer__text { color: var(--brand-muted); }
.site-footer__bar { border-top: 1px solid var(--brand-border); padding-top: 20px; }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  .collection-toolbar { flex-direction: column; align-items: stretch; }
  .collection-toolbar__sort { justify-content: space-between; }
  .product__options { gap: var(--space-3); }
}

/* ---------- added-to-cart popup (Dawn's cart notification) ---------- */
.cart-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.cart-popup[hidden] { display: none; }
.cart-popup__panel {
  width: 375px;
  max-width: 100%;
  padding: 24px 32px 28px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-top: 0;
  color: var(--brand-text);
  pointer-events: auto;
  animation: cart-popup-in 0.2s ease-out;
}
@keyframes cart-popup-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.cart-popup__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cart-popup__heading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; color: var(--text-soft); }
.cart-popup__heading .icon { width: 14px; height: 14px; stroke-width: 2; }
.cart-popup__close { margin-right: -8px; }
.cart-popup__close .icon { width: 18px; height: 18px; }

.cart-popup__product { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.cart-popup__image { flex: none; width: 70px; height: 70px; object-fit: cover; background: var(--surface-soft); }
.cart-popup__title { margin: 0 0 6px; font-family: var(--heading-font); font-size: 0.9375rem; color: var(--brand-text); }
.cart-popup__options { display: grid; gap: 2px; margin: 0; font-size: 0.8125rem; color: var(--text-soft); }
.cart-popup__options div { display: flex; gap: 4px; }
.cart-popup__options dt, .cart-popup__options dd { margin: 0; }

.cart-popup__actions { display: grid; gap: 10px; }
.cart-popup__actions .btn { width: 100%; }
.cart-popup__continue {
  justify-self: center;
  margin-top: 4px;
  padding: 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.cart-popup__continue:hover { text-decoration-thickness: 2px; }

@media (max-width: 700px) {
  .cart-popup { padding-inline: 0; }
  .cart-popup__panel { width: 100%; padding: 20px; }
}

/* ---------- product page: shopper-facing add-to-cart errors ---------- */
.product__error {
  margin: var(--space-3) 0 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--color-error, #d72c0d) 45%, transparent);
  background: color-mix(in srgb, var(--color-error, #d72c0d) 6%, var(--brand-bg));
  color: var(--brand-text);
  font-size: 0.9375rem;
}
.product__error[hidden] { display: none; }

/* =============================================================================
   LUXE ELITE — IMPULSE DESIGN LAYER
   Everything above is the Base component stylesheet (tested markup contracts for the product page,
   drawer, swatches, cart popup and filters). This layer restyles it as a premium apparel theme in
   the spirit of Shopify's Impulse: confident geometric sans, full-bleed imagery, pill buttons,
   a transparent header over the opening banner, a mega menu and generous whitespace.
   ============================================================================= */

/* ---------- foundations ---------- */
body {
  color: var(--brand-text);
  line-height: var(--line-height-normal);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { line-height: var(--line-height-tight); }
main h1, main h2, main h3 { color: var(--brand-text); }

:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; }

.section-title {
  margin: 0 0 var(--space-6);
  font-size: var(--h2-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
}
.section-title--center { text-align: center; }
/* A section the merchant hasn't set up yet (no collection, no banners) is hidden on the live store
   but stays visible in the theme editor's preview — which injects #bee-design-style — so it can
   be found and filled in. Shoppers never see an editor hint. */
html:not(:has(#bee-design-style)) .is-unconfigured { display: none; }
.section-empty { margin: 0; padding: var(--space-6); text-align: center; color: var(--brand-muted); background: var(--surface-alt); }

/* Every image slot shows a calm placeholder until the merchant fills it. */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--brand-text) 28%, transparent);
}
.placeholder svg { width: min(30%, 120px); height: auto; }

/* ---------- buttons ---------- */
.btn {
  min-height: 44px;
  padding: 0 28px;
  border-radius: var(--btn-radius);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: var(--btn-transform);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn--small { min-height: 38px; padding: 0 22px; font-size: 12px; }
/* The white pill used over photography. */
.btn--light, .btn--outline-light {
  background: #fff;
  border-color: #fff;
  color: #1c1d1d;
}
.btn--light:hover, .btn--outline-light:hover { background: rgba(255, 255, 255, 0.86); color: #1c1d1d; }
.btn--outline { border-color: color-mix(in srgb, var(--brand-text) 35%, transparent); }

/* ---------- announcement bar ---------- */
.announcement-bar {
  background: var(--announcement-bg);
  color: var(--announcement-fg);
  border-bottom: 0;
}
.announcement-bar__inner { padding-block: 9px; }
.announcement-bar__text {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: inherit;
}
.announcement-bar__label {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Rotating messages share one line and cross-fade. */
[data-bee-rotator] .announcement-bar__track { display: grid; width: 100%; }
[data-bee-rotator] .announcement-bar__text {
  grid-area: 1 / 1;
  justify-content: center;
  padding-inline-end: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
[data-bee-rotator] .announcement-bar__text.is-active { opacity: 1; transform: none; pointer-events: auto; }
.announcement-bar__close { color: inherit; opacity: 0.7; }
/* Non-scrolling messages may wrap: on a phone a long one would otherwise be cut off at both ends. */
.announcement-bar__track--static, [data-bee-rotator] .announcement-bar__track { white-space: normal; }
.announcement-bar__track--static .announcement-bar__text,
[data-bee-rotator] .announcement-bar__text { flex-wrap: wrap; justify-content: center; text-align: center; gap: 2px 10px; padding-inline-end: 0; }
@media (max-width: 700px) {
  .announcement-bar__inner { padding-block: 8px; }
  .announcement-bar__text { font-size: 12px; }
  .announcement-bar__label { font-size: 11px; letter-spacing: 0.18em; }
}

/* ---------- header ---------- */
.site-header-wrapper { position: relative; z-index: 30; }
.site-header {
  --utility-h: 0px;
  --header-h: calc(var(--menu-height) + var(--utility-h));
  position: relative;
  z-index: 30;
  background: var(--menu-background-color);
  color: var(--menu-foreground-color);
  border-bottom: 1px solid var(--brand-border);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.site-header--has-utility { --utility-h: 37px; }
/* Scrolled: the sticky header tucks its top bar above the viewport, leaving the compact menu row.
   A negative sticky offset rather than hiding it, so the page underneath never jumps. */
.site-header-wrapper:has(.site-header--sticky.site-header--has-utility.is-scrolled) { top: -37px; }

/* Top utility bar */
.header-utility { font-size: 14px; }
.header-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--utility-h);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.header-utility__links { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.header-utility__links a { opacity: 0.9; }
.header-utility__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.header-utility .social-icons { margin: 0; gap: 2px; }
.header-utility .social-icons__link { color: inherit; padding: 6px; }
.header-utility .social-icons__link svg { width: 16px; height: 16px; }

/* Main row */
.site-header__main { position: relative; }
.site-header .site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  min-height: var(--menu-height);
}
.site-header--split .site-header__search-toggle { justify-self: start; margin-inline-start: -8px; }
.site-header:not(.site-header--split) .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.site-header:not(.site-header--split) .site-header__search-toggle:not(.site-header__search-toggle--mobile) { display: none; }
.site-header--split .site-header__search-toggle--mobile { display: none; }
.site-header__actions { gap: 6px; margin-inline-end: -8px; }
.site-header__mobile-logo { display: none; }

.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo-image { width: var(--logo-width); height: auto; }
.site-header__logo-image--inverse { display: none; }
.site-header__wordmark {
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

.site-nav__list { align-items: center; gap: 30px; font-size: var(--menu-font-size); }
.site-header:not(.site-header--split) .site-nav__list { gap: 26px; margin-inline-start: var(--space-6); }
.site-nav__logo-slot { padding-inline: 18px; }
.site-header .site-nav__link {
  padding: 10px 0;
  font-weight: 500;
  color: inherit;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
}
.site-header .site-nav__link:hover,
.site-nav__item:hover > .site-nav__link,
.site-nav__item:focus-within > .site-nav__link,
.site-nav__item.is-open > .site-nav__link,
.site-nav__link.is-active { color: inherit; text-decoration: underline; }
.site-header .btn-icon { color: inherit; }
.site-header .icon { width: 24px; height: 24px; stroke-width: 1.4; }

/* Simple dropdown */
.site-nav__submenu {
  top: calc(100% + 10px);
  left: -24px;
  min-width: 220px;
  padding: 18px 0;
  border: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  color: var(--menu-foreground-color);
}
.site-nav__item--has-children.is-open .site-nav__submenu { display: flex; }
.site-nav__sublink { padding: 7px 24px; font-size: 15px; color: var(--menu-foreground-color); }

/* Mega menu: full width under the header, columns of links + promo cards. */
.site-nav__item--mega { position: static; }
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 25;
  background: var(--menu-background-color);
  color: var(--menu-foreground-color);
  border-top: 1px solid var(--brand-border);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-nav__item--mega:hover > .mega-menu,
.site-nav__item--mega:focus-within > .mega-menu,
.site-nav__item--mega.is-open > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
/* Bridges the gap between the link and the panel so the pointer can travel down to it. */
.site-nav__item--mega > .site-nav__link { position: relative; }
.site-nav__item--mega:hover > .site-nav__link::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  top: 100%;
  height: calc(var(--menu-height) / 2);
}
.mega-menu__inner { display: flex; gap: var(--space-7); padding-block: 40px 48px; }
.mega-menu__columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-6) var(--space-5);
  align-content: start;
}
.mega-menu__heading {
  display: block;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mega-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mega-menu__link { font-size: 15px; opacity: 0.9; text-underline-offset: 4px; }
.mega-menu__link:hover, .mega-menu__link.is-active, .mega-menu__heading:hover { opacity: 1; text-decoration: underline; }
.mega-menu__promos { display: flex; gap: var(--space-5); flex: none; }
.mega-promo { width: 220px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.mega-promo__media { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--accent-soft); }
.mega-promo__media--arch { border-radius: 999px 999px 0 0; }
.mega-promo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mega-promo:hover .mega-promo__media img { transform: scale(1.04); }
.mega-promo__heading { margin-top: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.mega-promo__text { font-size: 14.5px; line-height: 1.45; opacity: 0.85; }
.mega-promo__button { margin-top: 4px; }

/* Cart badge */
.site-header .btn-icon--cart .cart-count {
  bottom: 0;
  right: 0;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  background: var(--menu-foreground-color);
  color: var(--menu-background-color);
}

/* ---------- transparent header over the opening banner ----------
   Only on the home page, only when it starts with a full-bleed banner that has a real photo or
   video (an empty placeholder is light, and white links would vanish on it), and only while nothing is
   happening: scrolling, hovering, keyboard focus or an open search all bring the solid header back,
   so links are always readable when someone is actually using them. */
body.template-index:has(main > .section-hero:first-child [data-hero-media]) .site-header--transparent {
  margin-bottom: calc(-1 * var(--header-h));
}
body.template-index:has(main > .section-hero:first-child [data-hero-media]) .site-header--transparent:not(.is-scrolled):not(:hover):not(:focus-within):not(.is-search-open) {
  background: transparent;
  color: var(--header-overlay-fg);
  border-color: transparent;
}
body.template-index:has(main > .section-hero:first-child [data-hero-media]) .site-header--transparent:not(.is-scrolled):not(:hover):not(:focus-within):not(.is-search-open) .header-utility__inner {
  border-color: color-mix(in srgb, var(--header-overlay-fg) 30%, transparent);
}
body.template-index:has(main > .section-hero:first-child [data-hero-media]) .site-header--transparent:not(.is-scrolled):not(:hover):not(:focus-within):not(.is-search-open) .cart-count {
  background: var(--header-overlay-fg);
  color: #1c1d1d;
}
body.template-index:has(main > .section-hero:first-child [data-hero-media]) .site-header--transparent.site-header--has-inverse-logo:not(.is-scrolled):not(:hover):not(:focus-within):not(.is-search-open) .site-header__logo-image { display: none; }
body.template-index:has(main > .section-hero:first-child [data-hero-media]) .site-header--transparent.site-header--has-inverse-logo:not(.is-scrolled):not(:hover):not(:focus-within):not(.is-search-open) .site-header__logo-image--inverse { display: block; }
/* No light logo supplied: render the main one in white so it stays legible on the photo. */
body.template-index:has(main > .section-hero:first-child [data-hero-media]) .site-header--transparent:not(.site-header--has-inverse-logo):not(.is-scrolled):not(:hover):not(:focus-within):not(.is-search-open) .site-header__logo-image {
  filter: brightness(0) invert(1);
}
/* Soft scrim behind the transparent header, so light photographs don't swallow white links. */
body.template-index:has(main > .section-hero:first-child [data-hero-media]) main > .section-hero:first-child { position: relative; }
body.template-index:has(.site-header--transparent):has(main > .section-hero:first-child [data-hero-media]) main > .section-hero:first-child:has([data-hero-media])::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--menu-height) + 80px);
  background: linear-gradient(rgba(0, 0, 0, 0.28), transparent);
  z-index: 3;
  pointer-events: none;
}

/* ---------- search bar ---------- */
.header-search {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  background: var(--menu-background-color);
}
.header-search[hidden] { display: none; }
.site-header.is-search-open .site-header__inner { visibility: hidden; }
.header-search__form { display: flex; align-items: center; gap: var(--space-4); width: 100%; justify-content: center; }
.header-search__field { position: relative; flex: 0 1 900px; }
.header-search__input {
  width: 100%;
  height: 46px;
  padding: 0 52px 0 18px;
  border: 1px solid var(--menu-foreground-color);
  border-radius: var(--radius);
  background: var(--brand-bg);
  color: var(--brand-text);
  font: inherit;
  font-size: 16px;
}
.header-search__input::-webkit-search-cancel-button { display: none; }
.header-search__input.is-invalid { animation: search-nudge 0.32s ease; border-color: var(--color-error, #d72c0d); }
@keyframes search-nudge {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.header-search__submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--brand-text);
  cursor: pointer;
}
.header-search__close { color: inherit; }
/* Dims the page under the header. Inside the header's stacking context at -1, so it paints above
   the page but below the header's own background. */
.header-search__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(20, 20, 20, 0.42);
}
.header-search__backdrop[hidden] { display: none; }

/* ---------- mobile header + drawer ---------- */
@media (max-width: 900px) {
  .site-header--has-utility { --utility-h: 0px; }
  .site-header-wrapper:has(.site-header--sticky.site-header--has-utility.is-scrolled) { top: 0; }
  .header-utility { display: none; }
  .site-header .site-header__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); min-height: 64px; }
  .site-header { --header-h: 64px; }
  .site-header--split .site-header__search-toggle:not(.site-header__search-toggle--mobile) { display: none; }
  .site-header .site-header__search-toggle--mobile { display: inline-flex; }
  .site-header__mobile-logo { display: flex; justify-content: center; min-width: 0; }
  .site-header__logo-image { width: var(--logo-width-mobile); max-width: 100%; }
  .site-header__wordmark { font-size: 20px; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; }
  .site-header .icon { width: 22px; height: 22px; }

  .header-search__form { gap: var(--space-2); }
  .header-search__input { height: 42px; }
}
.menu-drawer__item { font-size: 1.0625rem; letter-spacing: 0.01em; }
.menu-drawer__secondary { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 10px; font-size: 15px; }
.menu-drawer__utility { background: var(--surface-alt); }

/* ---------- hero (slideshow / banner) ---------- */
.hero__content { padding: 60px 24px; }
.hero__heading {
  font-size: clamp(2.25rem, 5.2vw, var(--h1-size));
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.18);
}
.hero__subheading { font-size: clamp(1rem, 1.4vw, 1.125rem); margin-bottom: 26px; letter-spacing: 0.01em; }
.hero__controls { background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(6px); }

/* ---------- shoppable image ---------- */
.shoppable {
  position: relative;
  height: var(--shoppable-height, 820px);
  overflow: hidden;
  color: #fff;
  background: var(--accent-soft);
}
/* The section is a size container, so the stage can be sized like a background-size: cover box
   from the photo's proportions (--stage-ratio, set by theme.js; a 16:9 guess until the photo
   loads). No transform on purpose: a transformed ancestor would capture the phone's fixed-position
   hotspot card. */
.shoppable { container-type: size; }
.shoppable__stage {
  --stage-w: max(100cqw, calc(100cqh * var(--stage-ratio, 1.7778)));
  --stage-h: max(100cqh, calc(100cqw / var(--stage-ratio, 1.7778)));
  position: absolute;
  width: var(--stage-w);
  height: var(--stage-h);
  left: calc((100cqw - var(--stage-w)) / 2);
  top: calc((100cqh - var(--stage-h)) / 2);
  /* Intentionally larger than the section (it is cropped like a cover image); the shell's global
     max-width: 100% would otherwise squash it back to the section's width. */
  max-width: none;
  max-height: none;
}
.shoppable__media, .shoppable__media picture { position: absolute; inset: 0; display: block; }
.shoppable__image { width: 100%; height: 100%; object-fit: cover; }
.shoppable__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay, transparent); pointer-events: none; }
.shoppable__content {
  position: absolute;
  z-index: 2;
  max-width: 560px;
  padding: 0 clamp(20px, 4vw, 50px);
}
.shoppable__content--bottom-left { left: 0; bottom: clamp(32px, 6vw, 72px); }
.shoppable__content--bottom-center { left: 50%; bottom: clamp(32px, 6vw, 72px); transform: translateX(-50%); text-align: center; }
.shoppable__content--center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
main .shoppable__heading { color: #fff; margin-bottom: 12px; font-size: clamp(2.25rem, 5vw, var(--h1-size)); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); }
.shoppable__subheading { margin: 0 0 22px; font-size: 1.0625rem; }

/* Centred on its point with margins, not a transform: a transformed element captures
   position: fixed descendants, which squashed the phone's docked card into the 34px dot. */
.hotspot {
  --hotspot-size: 40px;
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  margin: calc(var(--hotspot-size) / -2) 0 0 calc(var(--hotspot-size) / -2);
}
.hotspot.is-open { z-index: 6; }
/* The photo is cropped differently at every width; a hotspot whose product is cropped out of view
   is hidden rather than left half off the edge (theme.js sets this). */
.hotspot.is-offscreen { visibility: hidden; }
.hotspot__button {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hotspot-size, 40px);
  height: var(--hotspot-size, 40px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1c1d1d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.hotspot__button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform 0.25s ease; }
.hotspot__button::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  animation: hotspot-pulse 2.4s ease-out infinite;
}
.hotspot__button:hover { transform: scale(1.08); }
.hotspot.is-open .hotspot__button svg { transform: rotate(45deg); }
@keyframes hotspot-pulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  80%, 100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hotspot__button::before { animation: none; } }
.hotspot__card {
  position: absolute;
  top: 50%;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 250px;
  padding: 12px;
  background: #fff;
  color: #1c1d1d;
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%);
}
/* The card is wider than the 40px hotspot it is positioned from. The storefront shell sets
   `div { max-width: 100% }` globally (src/styles.scss), which would squash it to the button width,
   so the limit is set against the viewport instead. */
.hotspot__card { max-width: min(280px, calc(100vw - 32px)); }
.hotspot__card[hidden] { display: none; }
.hotspot--right .hotspot__card { left: calc(100% + 14px); }
.hotspot--left .hotspot__card { right: calc(100% + 14px); }
.hotspot--below .hotspot__card { top: 0; transform: none; }
.hotspot--above .hotspot__card { top: auto; bottom: 0; transform: none; }
.hotspot__image { flex: none; width: 64px; height: 80px; object-fit: cover; background: var(--accent-soft); }
.hotspot__info { min-width: 0; }
.hotspot__title { margin: 0 0 2px; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.hotspot__price { margin: 0 0 6px; font-size: 14px; color: #555; }
.hotspot__link { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .shoppable { height: min(var(--shoppable-height, 820px), 82vh); }
  .shoppable--hide-hotspots-mobile .hotspot { display: none; }
  .hotspot { --hotspot-size: 34px; }
  /* Phones: the card opens under (or over) its hotspot, centred on it; theme.js then nudges it
     sideways so it never leaves the photo. */
  .shoppable .hotspot__card {
    top: calc(100% + 10px);
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(260px, calc(100vw - 32px));
    transform: translateX(-50%);
  }
  .shoppable .hotspot--above .hotspot__card { top: auto; bottom: calc(100% + 10px); }
}

/* ---------- collection list (tall tiles, name underneath) ---------- */
.featured { padding-block: var(--section-padding-y); }
.collection-tiles { gap: 24px; }
.tile__media { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--accent-soft); }
.collection-tiles--portrait .tile__media { aspect-ratio: 2 / 3; }
.collection-tiles--square .tile__media { aspect-ratio: 1; }
.collection-tiles--landscape .tile__media { aspect-ratio: 4 / 3; }
.tile__media .tile__image { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.tile:hover .tile__image { transform: scale(1.035); }
.tile__label { padding-top: 12px; font-family: var(--body-font); font-size: 17px; font-weight: 400; }
.tile__label::after { content: none; }
.tile:hover .tile__label { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 900px) {
  .collection-tiles { gap: 14px; }
  .tile__label { font-size: 15px; }
}

/* ---------- featured collection ("All New") ---------- */
.collection-section__title { font-size: var(--h2-size); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter-spacing); }
.collection-section__head { margin-bottom: var(--space-6); }
.collection-section .collection-section__items { gap: 32px 22px; }

/* ---------- product card ---------- */
.card { container-type: inline-size; }
.card__image-frame { background: var(--accent-soft); }
.card-ratio-portrait .card__image-frame { aspect-ratio: 2 / 3; }
body:not(.cards-hover-image) .card__image--alt { display: none; }
.card__body { padding-top: 12px; }
.card__title { margin: 0 0 4px; font-family: var(--body-font); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--brand-text); }
.card:hover .card__title { text-decoration: underline; text-underline-offset: 4px; }
.card__price { gap: 4px 8px; font-size: 14.5px; letter-spacing: 0; color: var(--brand-text); }
.card__from { color: var(--brand-muted); font-size: 13px; }
.card__amount--sale { color: var(--color-sale); }
.card__compare { color: var(--brand-muted); font-size: 13.5px; }
.card__badge {
  top: 10px;
  bottom: auto;
  left: 10px;
  padding: 4px 10px;
  border-radius: 0;
  background: #fff;
  color: var(--brand-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.card__badge--sale { background: var(--color-sale); color: #fff; }

/* Quick View sits on the bottom edge of the image. The card is a size container, so the image's
   height is known from its width and the ratio — no measuring script needed. */
.card__quick-view {
  display: none;
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(100cqw * 3 / 2 - 52px);
  z-index: 2;
  height: 42px;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn-primary-bg-color);
  color: var(--btn-primary-text-color);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.card-ratio-square .card__quick-view { top: calc(100cqw - 52px); }
.card-ratio-landscape .card__quick-view { top: calc(100cqw * 3 / 4 - 52px); }
.card__quick-view:hover { background: var(--btn-primary-hover-bg); }
@media (hover: hover) and (min-width: 901px) {
  .cards-quick-view .card__quick-view { display: block; }
  .card:hover .card__quick-view, .card__quick-view:focus-visible { opacity: 1; transform: none; }
}

/* ---------- promo grid ---------- */
.promo-grid { padding-block: var(--section-padding-y); }
.promo-grid--full { padding-block: 0; }
.promo-grid--full .promo-grid__inner { padding: 0; }
.promo-grid__inner > .section-title { margin-bottom: var(--space-5); }
.promo-grid--full .promo-grid__inner > .section-title { padding: var(--section-padding-y) clamp(20px, 4vw, 50px) 0; }
.promo-grid__items { display: grid; gap: var(--promo-gap, 0px); }
.promo-grid__items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-grid__items--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promo-banner {
  position: relative;
  display: flex;
  height: var(--promo-height, 700px);
  overflow: hidden;
  color: #fff;
  border-radius: var(--radius);
}
.promo-grid--full .promo-banner { border-radius: 0; }
.promo-banner__media { position: absolute; inset: 0; display: block; }
.promo-banner__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1); }
a.promo-banner:hover .promo-banner__media img { transform: scale(1.035); }
.promo-banner::after { content: ""; position: absolute; inset: 0; background: var(--promo-overlay, rgba(0, 0, 0, 0.15)); pointer-events: none; }
.promo-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 48px 32px;
  text-align: center;
}
.promo-banner--center .promo-banner__content { justify-content: center; }
.promo-banner--bottom .promo-banner__content { justify-content: flex-end; }
.promo-banner--top .promo-banner__content { justify-content: flex-start; }
.promo-banner__heading {
  font-family: var(--heading-font);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.1;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
}
.promo-banner__text { max-width: 520px; font-size: 16px; }
.promo-banner__button { margin-top: 14px; }
@media (max-width: 900px) {
  .promo-grid__items--2, .promo-grid__items--3 { grid-template-columns: 1fr; }
  .promo-banner { height: min(var(--promo-height, 700px), 70vh); min-height: 380px; }
}

/* ---------- media banner (video / image) ---------- */
.media-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--media-height, 650px);
  overflow: hidden;
  color: #fff;
  background: #1c1d1d;
}
.media-banner__media { position: absolute; inset: 0; }
.media-banner__video, .media-banner__image { width: 100%; height: 100%; object-fit: cover; }
.media-banner__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay, rgba(0, 0, 0, 0.18)); }
.media-banner__content { position: relative; z-index: 1; width: 100%; padding-block: 60px; }
.media-banner--center .media-banner__content { text-align: center; }
main .media-banner__heading { color: #fff; margin: 0 0 14px; font-size: clamp(2.25rem, 5vw, var(--h1-size)); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); }
.media-banner__text { margin: 0 auto 26px; max-width: 640px; font-size: clamp(1rem, 1.5vw, 1.25rem); }
.media-banner--left .media-banner__text { margin-inline: 0; }
@media (max-width: 700px) { .media-banner { min-height: min(var(--media-height, 650px), 70vh); } }

/* ---------- editorial statement ---------- */
.editorial { padding-block: calc(var(--section-padding-y) * 1.25); text-align: center; }
.editorial__rule { display: block; width: 48px; height: 1px; margin: 0 auto var(--space-6); background: var(--rule-color); }
.editorial__rule:last-child { margin: var(--space-6) auto 0; }
.editorial__kicker { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-muted); }
main .editorial__heading { max-width: 860px; margin: 0 auto 18px; font-size: var(--h2-size); }
.editorial__body { max-width: 640px; margin: 0 auto; font-size: 17px; color: color-mix(in srgb, var(--brand-text) 80%, transparent); }
.editorial__cta { display: inline-block; margin-top: 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; }
.editorial__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); max-width: 1000px; margin: var(--space-7) auto 0; }
.editorial__column-title { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.editorial__column-body { margin: 0; color: var(--brand-muted); }

/* ---------- product page ---------- */
.product { padding-block: 40px var(--section-padding-y); }
@media (min-width: 901px) {
  .product__layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
  .product:not(.product--quick-view) .product__details { position: sticky; top: calc(var(--menu-height) + 24px); }
}
.product__image { background: var(--accent-soft); }
main .product__title { font-size: clamp(1.875rem, 3vw, 2.625rem); font-weight: var(--heading-weight); letter-spacing: var(--heading-letter-spacing); margin-bottom: 10px; }
.product__pricing { flex-wrap: wrap; font-size: 1.25rem; letter-spacing: 0; }
.product__option-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-text); }
.product__add, .product__buy-now { width: 100%; }
.product__description { font-size: 15.5px; line-height: 1.75; color: color-mix(in srgb, var(--brand-text) 82%, transparent); }

/* ---------- quick view window ---------- */
.quick-view { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.quick-view[hidden] { display: none; }
.quick-view__backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.5); animation: qv-fade 0.2s ease; }
.quick-view__dialog {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--brand-bg);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  animation: qv-rise 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.quick-view__close {
  position: sticky;
  top: 10px;
  float: right;
  z-index: 2;
  margin: 10px 10px 0 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand-text);
  cursor: pointer;
}
.quick-view__body { padding: 8px 32px 32px; }
.quick-view__status { margin: 60px 0 20px; text-align: center; color: var(--brand-muted); }
.quick-view__body > .btn { display: flex; width: max-content; margin: 0 auto 40px; }
.product--quick-view { padding: 0; }
.product--quick-view .page-width { padding: 0; max-width: none; }
@media (min-width: 701px) { .product--quick-view .product__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } }
.product--quick-view .product__description { display: none; }
.quick-view__details { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
html.quick-view-open, html.quick-view-open body { overflow: hidden; }
@keyframes qv-fade { from { opacity: 0; } }
@keyframes qv-rise { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 700px) {
  .quick-view { padding: 0; align-items: end; }
  .quick-view__dialog { max-height: 92vh; border-radius: 0; }
  .quick-view__body { padding: 0 18px 24px; }
  .product--quick-view .product__layout { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--footer-background-color);
  color: var(--footer-foreground-color);
  border-top: 1px solid var(--brand-border);
  font-size: var(--footer-font-size);
}
.site-footer__inner { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); padding-block: 56px 40px; }
.site-footer__heading { margin-bottom: 16px; font-family: var(--body-font); font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: inherit; }
.site-footer__links { gap: 10px; }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__text { color: color-mix(in srgb, var(--footer-foreground-color) 75%, transparent); }
.site-footer__column--newsletter { grid-column: span 2; max-width: 460px; }
.newsletter { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__input { flex: 1 1 220px; height: 46px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--footer-foreground-color) 35%, transparent); background: transparent; color: inherit; padding: 0 14px; }
.newsletter__message { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; }
.newsletter__message.is-error { color: var(--color-error, #d72c0d); }
.site-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: 18px 28px; color: color-mix(in srgb, var(--footer-foreground-color) 70%, transparent); }
.site-footer__bar .social-icons { margin: 0; }
.site-footer__bar .social-icons__link { color: var(--footer-foreground-color); }
@media (max-width: 700px) {
  .site-footer__column--newsletter { grid-column: auto; }
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .tile__image, .promo-banner__media img, .mega-promo__media img, .card__image { transition: none; }
}

/* =============================================================================
   LUXE ELITE — Impulse product page + cart drawer
   ============================================================================= */

/* ---------- gallery: vertical thumbnail strip beside the photo ---------- */
.product__gallery { display: grid; gap: 14px; align-items: start; }
.product__main-media { position: relative; background: var(--accent-soft); border-radius: var(--radius); overflow: hidden; }
.product__main-media .placeholder { aspect-ratio: 3 / 4; }
.product__image { width: 100%; height: auto; }
.product__thumbs { display: flex; gap: 10px; margin: 0; overflow-x: auto; scrollbar-width: thin; }
.product__thumb {
  flex: 0 0 72px;
  width: 72px;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent-soft);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb:hover { opacity: 1; }
.product__thumb.is-active { opacity: 1; border-color: var(--brand-text); outline: 1px solid var(--brand-text); outline-offset: -2px; }

@media (min-width: 901px) {
  .product--thumbs-left .product__gallery--has-thumbs { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .product--thumbs-left .product__gallery--has-thumbs .product__main-media { grid-column: 2; grid-row: 1; }
  .product--thumbs-left .product__gallery--has-thumbs .product__thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    max-height: calc(100vh - var(--menu-height) - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: calc(var(--menu-height) + 24px);
    scrollbar-width: none;
  }
  .product--thumbs-left .product__thumbs::-webkit-scrollbar { display: none; }
  .product--thumbs-left .product__thumb { flex: none; width: 100%; }
}

/* ---------- details column ---------- */
.product__details { display: flex; flex-direction: column; align-items: stretch; }
.product__vendor { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-muted); }
main .product__title { margin: 0 0 14px; }
.product__highlight { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15px; }
.product__highlight .icon { width: 20px; height: 20px; stroke-width: 1.4; }

.product__pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 18px; font-size: 17px; }
.product__compare { order: 0; margin: 0; color: var(--brand-text); font-weight: 400; }
.product__compare[hidden], .product__saving[hidden] { display: none; }
.product__price { order: 1; color: var(--brand-text); }
.product__saving { order: 2; color: var(--brand-muted); font-size: 15px; }

.product__sku { margin: -8px 0 16px; }
.product__details > .product__description { margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; }
.product__details > .product__description ul { padding-left: 1.25em; }

.product__options { margin: 0 0 18px; }

.product__size-chart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin: 0 0 18px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--brand-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.product__size-chart .icon { width: 22px; height: 22px; stroke-width: 1.3; }
.product__size-chart:hover span { text-decoration: underline; text-underline-offset: 4px; }

.product__stock { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 15px; }
.product__stock-dot { width: 9px; height: 9px; border-radius: 50%; background: #2fa84f; box-shadow: 0 0 0 3px rgba(47, 168, 79, 0.18); }
.product__stock--low .product__stock-dot { background: #e0a100; box-shadow: 0 0 0 3px rgba(224, 161, 0, 0.18); }
.product__stock--out .product__stock-dot { background: var(--brand-muted); box-shadow: none; }

.product__actions { gap: 10px; margin: 0 0 6px; align-items: stretch; }
.product__actions .product__add { min-height: 50px; font-size: 13.5px; }
.product__actions .product__add:not([disabled]) { background: var(--btn-primary-bg-color); color: var(--btn-primary-text-color); border-color: var(--btn-primary-bg-color); }
.product__actions .product__add:not([disabled]):hover { background: var(--btn-primary-hover-bg); }
.product__actions .product__buy-now { min-height: 50px; }

/* Collapsible tabs */
.product__tabs { margin-top: 20px; border: 1px solid var(--brand-border); border-radius: var(--radius); }
.product-tab + .product-tab { border-top: 1px solid var(--brand-border); }
.product-tab__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.product-tab__summary::-webkit-details-marker { display: none; }
.product-tab__summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.product-tab[open] > .product-tab__summary::after { transform: rotate(225deg) translateY(-2px); }
.product-tab__content { padding: 0 16px 18px; font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--brand-text) 85%, transparent); }

/* Share */
.product__share { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 22px 0 0; padding: 0; font-size: 14px; }
.product__share a { display: inline-flex; align-items: center; gap: 7px; }
.product__share a:hover { text-decoration: underline; text-underline-offset: 4px; }
.product__share svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .product { padding-top: 16px; }
  .product__layout { gap: 24px; }
}

/* Quick View uses the same section: keep it compact. */
.product--quick-view .product__tabs,
.product--quick-view .product__share,
.product--quick-view .product__details > .product__description { display: none; }
.product--quick-view .product__thumbs { position: static; max-height: none; }

/* Page window (size chart) */
.quick-view--page .quick-view__dialog { width: min(760px, 100%); }
.quick-view--page .page-content { padding: 8px 0 12px; }
.quick-view--page .page-content .page-width { padding: 0; }
.quick-view--page table { width: 100%; border-collapse: collapse; font-size: 14px; }
.quick-view--page th, .quick-view--page td { padding: 10px 12px; border-bottom: 1px solid var(--brand-border); text-align: left; }

/* ---------- cart drawer ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 110; }
.cart-drawer[hidden] { display: none; }
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  background: var(--brand-bg);
  color: var(--brand-text);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  outline: none;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
html.cart-drawer-open, html.cart-drawer-open body { overflow: hidden; }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 18px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--brand-border);
}
main .cart-drawer__title, .cart-drawer__title { margin: 0; font-size: 30px; font-weight: var(--heading-weight); color: inherit; }
.cart-drawer__close { margin-right: -8px; }

.cart-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px; }
.cart-drawer__items { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--brand-border);
  transition: opacity 0.2s ease;
}
.cart-line.is-busy { opacity: 0.5; pointer-events: none; }
.cart-line__media { display: block; aspect-ratio: 2 / 3; background: var(--accent-soft); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cart-line__title { font-size: 15.5px; line-height: 1.35; }
.cart-line__title:hover { text-decoration: underline; text-underline-offset: 4px; }
.cart-line__variant { margin: 0; font-size: 13.5px; color: var(--brand-muted); }
.cart-line__qty { display: inline-flex; align-items: center; border: 1px solid var(--brand-border); margin-top: 4px; }
.cart-line__qty-btn { width: 30px; height: 30px; padding: 0; border: 0; background: none; color: inherit; font-size: 16px; cursor: pointer; }
.cart-line__qty-input {
  width: 38px;
  height: 30px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--brand-border);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: center;
  -moz-appearance: textfield;
}
.cart-line__qty-input::-webkit-outer-spin-button, .cart-line__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-line__remove { padding: 0; border: 0; background: none; color: var(--brand-muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-line__remove:hover { color: var(--brand-text); }
.cart-line__price { margin: 0; font-size: 15px; white-space: nowrap; }

.cart-drawer__empty { display: grid; justify-items: center; gap: 18px; padding: 72px 0; text-align: center; }
.cart-drawer__empty[hidden] { display: none; }
.cart-drawer__empty p { margin: 0; font-size: 17px; }

.cart-drawer__foot { padding: 18px; border-top: 1px solid var(--brand-border); background: var(--brand-bg); }
.cart-drawer__foot[hidden] { display: none; }
.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cart-drawer__subtotal span:last-child { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cart-drawer__note { margin: 0 0 14px; font-size: 13px; text-align: center; color: var(--brand-muted); }
.cart-drawer__terms { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.cart-drawer__terms a { text-decoration: underline; text-underline-offset: 3px; }
.cart-drawer__terms input { width: 15px; height: 15px; accent-color: var(--brand-text); }
.cart-drawer__error { margin: 0 0 12px; padding: 9px 12px; font-size: 13.5px; border: 1px solid color-mix(in srgb, var(--color-error, #d72c0d) 45%, transparent); background: color-mix(in srgb, var(--color-error, #d72c0d) 6%, var(--brand-bg)); }
.cart-drawer__error[hidden] { display: none; }
.cart-drawer__checkout { width: 100%; min-height: 50px; }
.cart-drawer__view { display: block; margin-top: 12px; text-align: center; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; color: var(--brand-muted); }

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__panel, .cart-drawer__backdrop { transition: none; }
}

/* Hotspot card flipped by theme.js when its preferred side would leave the photo. */
.hotspot--below.hotspot--flip .hotspot__card { top: auto; bottom: 0; }
.hotspot--above.hotspot--flip .hotspot__card { bottom: auto; top: 0; }
@media (max-width: 700px) {
  .shoppable .hotspot--below.hotspot--flip .hotspot__card { top: auto; bottom: calc(100% + 10px); }
  .shoppable .hotspot--above.hotspot--flip .hotspot__card { bottom: auto; top: calc(100% + 10px); }
}

/* Theme-editor hints (e.g. a mega menu promo attached to a menu item that doesn't exist). Hidden on
   the live store; the editor's preview injects #bee-design-style. */
.editor-notice { display: none; }
html:has(#bee-design-style) .editor-notice {
  display: block;
  margin: 8px auto;
  padding: 10px 14px;
  border: 1px dashed #b45309;
  border-radius: 6px;
  background: #fffbeb;
  color: #78350f;
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- mega menu: link columns and promo cards share the row ----------
   Cards used to be a fixed 220px and the columns could not shrink below their natural width, so
   two or more cards pushed the row past the page edge. Now both sides may shrink: the cards take
   at most ~60% of the row and narrow as more are added, and nothing can spill outside the panel. */
.mega-menu { overflow-x: clip; }
.mega-menu__inner { min-width: 0; }
.mega-menu__columns { flex: 1 1 auto; min-width: 0; }
.mega-menu__promos {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 62%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 220px);
  gap: var(--space-5);
}
.mega-promo { width: auto; min-width: 0; }
.mega-promo__heading, .mega-promo__text { overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  .mega-menu__promos { grid-auto-columns: minmax(120px, 180px); gap: var(--space-4); }
  .mega-menu__inner { gap: var(--space-6); }
}

/* Split header with a long menu: tighten spacing as the screen narrows, so the menu never runs into
   the search or account icons on a laptop-width screen. */
@media (max-width: 1500px) {
  .site-header--split .site-nav__list { gap: 20px; }
  .site-header--split .site-nav__logo-slot { padding-inline: 10px; }
}
@media (max-width: 1280px) {
  .site-header--split .site-nav__list { gap: 14px; font-size: calc(var(--menu-font-size) - 1px); }
  .site-header--split .site-header__inner { gap: var(--space-3); }
}
/* Laptop widths: the left-hand search icon moves next to account/cart, giving the menu the room. */
@media (min-width: 901px) and (max-width: 1280px) {
  .site-header--split .site-header__search-toggle:not(.site-header__search-toggle--mobile) { display: none; }
  .site-header.site-header--split .site-header__search-toggle--mobile { display: inline-flex; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  /* Laptop widths: a long menu plus a centred logo will not fit one row, so the split header becomes
     logo-left — the logo moves out of the menu to the left edge and the menu takes the middle. */
  .site-header--split .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav actions";
  }
  .site-header--split .site-nav__logo-slot { display: none; }
  .site-header--split .site-header__mobile-logo { display: flex; grid-area: logo; }
  .site-header--split .site-nav { grid-area: nav; min-width: 0; }
  .site-header--split .site-header__actions { grid-area: actions; }
  .site-header--split .site-nav__list { flex-wrap: wrap; justify-content: center; row-gap: 0; }
}

/* =============================================================================
   LUXE ELITE 2.2 — hotspot mobile positions, quantity stepper, testimonials, text columns
   ============================================================================= */

/* Shoppable image: a hotspot can carry its own position for the phone photo. */
@media (max-width: 700px) {
  .hotspot--mobile-pos { left: var(--x-m, var(--x)); top: var(--y-m, var(--y)); }
  .hotspot--hide-mobile { display: none; }
}

/* Product page: the quantity stepper keeps its own width (the actions column stretches its children). */
.product__actions .product__qty-stepper { align-self: flex-start; width: auto; height: 48px; }
.product__qty-stepper .product__qty-btn { width: 44px; }
.product__qty-stepper .product__qty { width: 52px; padding: 0; }

/* ---------- testimonials ("Hear it from them") ---------- */
.testimonials { padding-block: clamp(56px, 7vw, 96px); background: var(--testimonials-bg, #e8ecef); overflow: hidden; }
.testimonials__title {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-family: var(--heading-font);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 400;
  text-align: center;
}
.testimonials__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(620px, 78vw);
  align-items: center;
  gap: 0;
  padding: 24px calc((100% - min(620px, 78vw)) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonials__track:focus-visible { outline: 2px solid var(--brand-text); outline-offset: -2px; }
.testimonial {
  margin: 0;
  padding: clamp(28px, 3vw, 40px) clamp(22px, 3vw, 44px);
  background: #fff;
  text-align: center;
  scroll-snap-align: center;
  transform: scale(0.94);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease, opacity 0.5s ease;
  opacity: 0.85;
}
.testimonial.is-current { position: relative; z-index: 1; transform: scale(1.04); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.28); opacity: 1; }
.testimonial__stars { margin: 0 0 14px; letter-spacing: 4px; font-size: 15px; }
.testimonial__star { color: rgba(0, 0, 0, 0.18); }
.testimonial__star.is-on { color: var(--brand-text); }
.testimonial__quote { margin: 0 0 16px; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.6; }
.testimonial__who { display: grid; gap: 2px; }
.testimonial__author { font-size: 16px; font-weight: 600; }
.testimonial__place { color: var(--brand-muted); font-size: 14px; }
.testimonials__dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.testimonials__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.25); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; }
.testimonials__dot.is-current { background: var(--brand-text); transform: scale(1.35); }
.testimonials__dot:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .testimonials__track { scroll-behavior: auto; } .testimonial { transition: none; } }

/* ---------- text columns with images ---------- */
.text-columns { padding-block: clamp(48px, 6vw, 88px); }
.text-columns__title {
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  font-family: var(--heading-font);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 400;
  text-align: center;
}
.text-columns__list { display: grid; grid-template-columns: repeat(var(--text-columns, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.text-columns--center .text-column { text-align: center; }
.text-column__media { display: block; margin-bottom: 18px; overflow: hidden; }
.text-column__media--photo { aspect-ratio: 4 / 3; background: var(--surface-alt); }
.text-column__media--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.text-column:hover .text-column__media--photo img { transform: scale(1.04); }
.text-column__media--icon { width: 56px; height: 56px; }
.text-columns--center .text-column__media--icon { margin-inline: auto; }
.text-column__media--icon img { width: 100%; height: 100%; object-fit: contain; }
.text-column__title { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.text-column__text { color: var(--brand-muted); font-size: 15px; line-height: 1.6; }
.text-column__text p { margin: 0; }
.text-column__link { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 749px) {
  .text-columns__list { grid-template-columns: 1fr; }
  .testimonials__track { grid-auto-columns: 84vw; padding-inline: 8vw; }
}