/* Base theme — reference stylesheet.
   All design tokens arrive as CSS custom properties emitted by layout/theme.liquid
   from config/settings_data.json, so a merchant restyle needs no CSS edit. */

*, *::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.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.25s 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-light { background: transparent; border-color: #fff; color: #fff; }
.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;
}
/* max-content: an absolute box is otherwise limited by its parent <li>, which wraps long titles.
   Hidden with visibility rather than display so closing can wait: the delays give a pointer 200ms
   to reach the panel, even on a diagonal path that briefly leaves the menu. */
.site-nav__submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: -20px;
  width: max-content;
  min-width: 200px;
  max-width: min(360px, 90vw);
  display: flex;
  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;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease 0.2s, visibility 0s linear 0.35s;
}
/* Bridges the gap under the link so the menu stays hovered on the way down. It hangs off the link
   because the panel scrolls (overflow-y), which would clip anything placed outside the panel. */
.site-nav__item--has-children > .site-nav__link { position: relative; }
.site-nav__item--has-children:hover > .site-nav__link::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: max(40px, calc(var(--menu-height) / 2));
  z-index: 19;
}
.site-nav__item--has-children:hover .site-nav__submenu,
.site-nav__item--has-children:focus-within .site-nav__submenu {
  visibility: visible;
  opacity: 1;
  z-index: 21;
  transition: opacity 0.15s ease, visibility 0s;
}

.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. */
/* One height variable drives every rule below; it switches to the mobile value on phones. */
/* Desktop: the merchant's height is for a 1440px-wide screen and scales with the width, so the banner
   keeps one shape and crops identically at any desktop width, including the designer preview. */
/* The banner's own width (cqw), not the screen's, so a page-width banner scales correctly too. */
:has(> .hero) { container-type: inline-size; }
.hero { --hero-height: max(240px, calc(var(--hero-height-at-1440, 640) / 1440 * 100cqw)); }
@media (max-width: 749px) { .hero { --hero-height: var(--hero-height-mobile, 400px); } }
.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; object-position: var(--hero-focal, center); }
@media (max-width: 749px) { .hero__image { object-position: var(--hero-focal-mobile, var(--hero-focal, center)); } }
.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: var(--hero-height, 520px); }
  .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; }

/* ---------- slideshow: "Adapt to first image" ----------
   The first image stays in normal flow at its natural shape, so it decides the height and is never
   cropped. Every other image covers that same height (cropped around the focal point). Text shares
   the image's grid cell instead of floating over it, so on a small phone a long heading grows the
   banner rather than being cut off. */
.hero--adapt { min-height: 0; }
.hero--adapt > .hero__image, .hero--adapt > .hero__content { grid-area: 1 / 1; }
.hero--adapt > .hero__image:first-of-type { position: static; height: auto; min-height: 100%; }
.hero--adapt .hero__content { position: relative; inset: auto; width: 100%; }
/* Two images side by side: the second fills whatever height the first sets. */
.hero--split.hero--adapt .hero__image { height: auto; }
.hero--split.hero--adapt .hero__image--two { position: static; height: 0; min-height: 100%; }
.hero--split.hero--adapt > .hero__content { grid-row: 1; grid-column: 1 / span 2; }
/* Slides: the track is in flow and every slide stretches to the tallest, which is the first. */
.hero--adapt:has(> .hero__track) { height: auto; }
/* grid-area keeps the track in the same cell as the heading/text that sits beside it when the
   section's own two images slide; without it the track drops to a second row under the text. */
.hero--adapt > .hero__track { position: relative; inset: auto; align-items: stretch; grid-area: 1 / 1; }
.hero--adapt .hero__slide { height: auto; display: grid; }
.hero--adapt .hero__slide > .hero__image, .hero--adapt .hero__slide > .hero__content { grid-area: 1 / 1; }
.hero--adapt .hero__slide:first-child > .hero__image { position: static; height: auto; min-height: 100%; }
/* The image is at least as tall as the text over it: when a long heading outgrows a short phone
   image, the image stretches (cropping a little) instead of leaving a bare band under it. */
.hero--slideshow.hero--adapt .hero__content { padding-bottom: 72px; }
@media (max-width: 700px) {
  .hero--adapt:has(> .hero__track) { height: auto; }
  .hero--split.hero--adapt .hero__image, .hero--split.hero--adapt .hero__image--two { height: auto; min-height: 0; }
  .hero--split.hero--adapt > .hero__content { grid-column: 1; grid-row: 1 / span 2; }
}

/* ---------- grids ---------- */
.featured, .product-grid, .collection-header, .product, .page-content {
  padding-block: var(--section-padding-y);
}
main > * + * { margin-top: var(--section-gap); }
/* A collection title and its product grid read as one block (as in Dawn): without this their
   paddings stack, leaving roughly two sections of empty space between the title and the filters.
   Still driven by Section rhythm: half the section padding, plus the section gap. */
.section-collection-header:has(+ .section-product-grid) .collection-header { padding-bottom: calc(var(--section-padding-y) / 2); }
.section-collection-header:has(+ .section-product-grid) .collection-header .page-width > :last-child { margin-bottom: 0; }
.section-collection-header + .section-product-grid .product-grid { padding-top: 0; }
.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 alone turns overflow-x to auto too, and the sub-panels parked off to the right then
     count as content to scroll to: the whole menu could be dragged sideways. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  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); }
.site-footer .social-icons__link { color: var(--footer-foreground-color); }
.site-footer__bar .social-icons { margin-bottom: var(--space-3); }
.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; }

.site-nav__submenu { max-height: calc(100vh - var(--menu-height) - 40px); overflow-y: auto; }

/* Mega menu: any menu with a third level. Spans the header (.site-header is the positioned
   ancestor once the <li> goes static), with its columns lined up on the page width. */
.site-nav__item--mega { position: static; }
.site-nav__submenu--mega {
  --mega-gutter: clamp(20px, 4vw, 50px);
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-5) var(--space-6);
  padding: 28px max(var(--mega-gutter), calc((100% - var(--page-width)) / 2 + var(--mega-gutter)));
  border-inline: 0;
}
.site-nav__submenu--mega .site-nav__sublink {
  padding: 0 0 8px;
  font-weight: 600;
  color: var(--menu-foreground-color);
}
.site-nav__grandchildren { list-style: none; margin: 0; padding: 0; }
.site-nav__grandlink {
  display: block;
  padding: 5px 0;
  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; }

.collection-section--slider .collection-section__items,.promo-cards__list,.category-cards__list,.testimonials__list,.tabbed-collection__tabs,.logo-list--marquee .logo-list__viewport{max-width:none}
.collection-section__items,.promo-cards__list,.category-cards__list,.testimonials__list,.tabbed-collection__tabs,.rail__track,.collection-feature__scroll,.feature-cards__list,.numbered-cards__list,.testimonials__track,.cart-upsell__list,.product__thumbs{overscroll-behavior-x:contain}

/* ---------- pay in instalments ---------- */
.installments { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; font-size: 0.8125rem; letter-spacing: normal; color: var(--brand-muted); }
.installments__logo { height: 14px; width: auto; }
.installments__provider { color: var(--brand-text); font-weight: 600; }
.product__pricing + .installments { margin: 8px 0 0; }
.product__pricing ~ .installments { font-size: 0.875rem; }
.installments + .installments { margin-top: 2px; }

/* ---------- floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 35;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.38);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(37, 211, 102, 0.45); }
html.menu-drawer-open .whatsapp-float { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; } }

/* ---------- button hover ----------
   Tokens from layout/theme.liquid, so the "Animate buttons on hover" setting turns all of it off.
   Touch screens skip the hover states: a tap would leave the button lifted. */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  opacity: var(--btn-sheen-opacity, 0);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn-icon svg { transition: transform 0.2s ease; }
.product__qty-btn { transition: transform 0.15s ease; }
.product__qty-btn:active { transform: scale(var(--btn-press-scale, 1)); }
@media (hover: hover) {
  .btn:not([disabled]):hover { transform: translateY(var(--btn-hover-lift, 0)); box-shadow: var(--btn-hover-shadow, none); }
  .btn:not([disabled]):hover::after { transform: translateX(110%); transition: transform 0.6s ease; }
  .btn-icon:hover svg { transform: scale(var(--icon-hover-scale, 1)); }
}
.btn:not([disabled]):active { transform: scale(var(--btn-press-scale, 1)); box-shadow: none; }

/* ---------- scroll reveals (theme.js) ----------
   Only ever hides content once the script is running (html.reveal-ready), so server-rendered pages
   without JS show everything. */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease var(--reveal-delay, 0ms), transform 0.7s ease var(--reveal-delay, 0ms);
}
html.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
html:has(#bee-design-style) [data-reveal] { opacity: 1 !important; transform: none !important; }
@media print { html.reveal-ready [data-reveal] { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .btn::after, .btn-icon svg, .product__qty-btn { transition: none; }
  .btn:not([disabled]):hover, .btn:not([disabled]):active, .product__qty-btn:active { transform: none; }
  .btn:not([disabled]):hover::after { transform: translateX(-110%); transition: none; }
  .btn-icon:hover svg { transform: none; }
}

/* ---------- image banner (Dawn image banner) ----------
   One grid cell holds both the media and the content, so text sits over the image without absolute
   positioning, and a tall text block grows the banner instead of spilling out of it.

   Height: "adapt" keeps the FIRST image in normal flow (width 100%, natural height), so the banner is
   exactly that image's shape and nothing is cropped at any width. Fixed heights put every image
   absolutely over its cell with object-fit: cover, cropped around the focal point. */
.banner {
  --banner-h: 560px; --banner-h-mobile: 340px;
  position: relative; display: grid; overflow: hidden;
  color: var(--banner-fg); background: var(--banner-bg);
}
.banner > * { grid-area: 1 / 1; }
.banner--small { --banner-h: 420px; --banner-h-mobile: 280px; }
.banner--medium, .banner--no-image { --banner-h: 560px; --banner-h-mobile: 340px; }
.banner--large { --banner-h: 720px; --banner-h-mobile: 390px; }
.banner:not(.banner--adapt) { min-height: var(--banner-h); }

/* Colour schemes: --banner-fg is text over the image; the box pair colours the optional container on
   desktop and the text area below the image on phones. */
.banner--scheme-1 { --banner-fg: #fff; --banner-bg: var(--brand-text); --banner-box-bg: var(--brand-bg); --banner-box-fg: var(--brand-text); }
.banner--scheme-2 { --banner-fg: var(--brand-text); --banner-bg: var(--surface-soft); --banner-box-bg: var(--brand-bg); --banner-box-fg: var(--brand-text); }
.banner--scheme-3 { --banner-fg: #fff; --banner-bg: #121212; --banner-box-bg: #121212; --banner-box-fg: #fff; }
.banner--scheme-4 { --banner-fg: #fff; --banner-bg: var(--brand-primary); --banner-box-bg: var(--brand-primary); --banner-box-fg: #fff; }
.banner--scheme-5 { --banner-fg: #fff; --banner-bg: var(--brand-accent); --banner-box-bg: var(--brand-accent); --banner-box-fg: #fff; }

.banner__media-wrap { position: relative; display: grid; grid-template-columns: 1fr; min-width: 0; }
.banner--split .banner__media-wrap { grid-template-columns: 1fr 1fr; }
.banner__media { position: relative; overflow: hidden; min-width: 0; background: inherit; }
.banner__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--banner-focal, center);
}
.banner--adapt .banner__media:first-child img { position: static; height: auto; }
.banner__media--placeholder { background: linear-gradient(135deg, color-mix(in srgb, var(--banner-bg) 85%, #fff), var(--banner-bg)); }
.banner__media-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgb(0 0 0 / var(--banner-overlay, 0%));
}

/* Content: placed on a 3x3 grid of positions, constrained to the page width. */
.banner__content {
  position: relative; z-index: 1; display: flex; width: 100%; max-width: none;
  justify-self: center; padding: clamp(24px, 3.5vw, 56px);
  align-items: var(--banner-v, center); justify-content: var(--banner-h-pos, center);
}
.banner--pos-top-left, .banner--pos-top-center, .banner--pos-top-right { --banner-v: flex-start; }
.banner--pos-middle-left, .banner--pos-middle-center, .banner--pos-middle-right { --banner-v: center; }
.banner--pos-bottom-left, .banner--pos-bottom-center, .banner--pos-bottom-right { --banner-v: flex-end; }
.banner--pos-top-left, .banner--pos-middle-left, .banner--pos-bottom-left { --banner-h-pos: flex-start; }
.banner--pos-top-center, .banner--pos-middle-center, .banner--pos-bottom-center { --banner-h-pos: center; }
.banner--pos-top-right, .banner--pos-middle-right, .banner--pos-bottom-right { --banner-h-pos: flex-end; }
.banner__box { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.banner--align-left .banner__box { text-align: left; align-items: flex-start; }
.banner--align-center .banner__box { text-align: center; align-items: center; }
.banner--align-right .banner__box { text-align: right; align-items: flex-end; }
.banner--boxed .banner__box {
  background: var(--banner-box-bg); color: var(--banner-box-fg);
  padding: 40px 48px; border-radius: var(--radius);
}

main .banner h1, main .banner h2, main .banner h3 { color: inherit; }
.banner__heading { margin: 0; line-height: 1.15; }
.banner__heading--small { font-size: clamp(1.5rem, 3vw, 2rem); }
.banner__heading--medium { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.banner__heading--large { font-size: clamp(2.25rem, 5.5vw, 4rem); }
.banner__text { margin: 0; font-size: 1.0625rem; }
.banner__text > :last-child { margin-bottom: 0; }
.banner__text--subtitle { font-size: 1.25rem; }
.banner__text--caption { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.banner__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.banner--align-left .banner__buttons { justify-content: flex-start; }
.banner--align-center .banner__buttons { justify-content: center; }
.banner--align-right .banner__buttons { justify-content: flex-end; }
/* Primary button: the theme button, except on the dark / brand / accent schemes where it would
   vanish into a box of the same colour, so it inverts to white there. */
.banner__btn--primary {
  background: var(--banner-btn-bg, var(--btn-primary-bg-color)); color: var(--banner-btn-fg, var(--btn-primary-text-color));
  border-color: var(--banner-btn-bg, var(--btn-primary-bg-color));
}
.banner__btn--primary:hover { background: var(--banner-btn-hover, var(--btn-primary-hover-bg)); border-color: var(--banner-btn-hover, var(--btn-primary-hover-bg)); }
.banner--scheme-3 { --banner-btn-bg: #fff; --banner-btn-fg: #121212; --banner-btn-hover: #e6e6e6; }
.banner--scheme-4 { --banner-btn-bg: #fff; --banner-btn-fg: var(--brand-primary); --banner-btn-hover: #e6e6e6; }
.banner--scheme-5 { --banner-btn-bg: #fff; --banner-btn-fg: var(--brand-accent); --banner-btn-hover: #e6e6e6; }
.banner__btn--secondary { background: transparent; color: inherit; border-color: currentColor; }

/* Image behaviour. */
.banner--anim-ambient .banner__media img { animation: banner-ambient 30s linear infinite alternate; }
@keyframes banner-ambient {
  from { transform: scale(1.15) translateX(-4%); }
  to { transform: scale(1.15) translateX(4%); }
}
.banner--anim-fixed .banner__media {
  background-size: cover; background-position: var(--banner-focal, center);
  background-attachment: fixed; background-repeat: no-repeat;
}
/* The image stays in place (invisible) so "adapt" still sizes the banner from it. */
.banner--anim-fixed .banner__media img { opacity: 0; }
.banner--anim-zoom-in .banner__media img { transform: scale(var(--banner-zoom, 1)); transition: transform 0.1s linear; will-change: transform; }

/* "Page width": content lines up with the header instead of the banner edges. */
.banner--content-page .banner__content { max-width: var(--page-width); padding-inline: clamp(20px, 4vw, 50px); }

@media (max-width: 749px) {
  .banner:not(.banner--adapt) { min-height: var(--banner-h-mobile); }
  .banner__media img { object-position: var(--banner-focal-mobile, var(--banner-focal, center)); }
  .banner--anim-fixed .banner__media { background-position: var(--banner-focal-mobile, center); background-attachment: scroll; }
  .banner__content { padding: 32px 20px; }
  .banner--boxed .banner__box { padding: 28px 24px; }
  .banner--m-align-left .banner__box { text-align: left; align-items: flex-start; }
  .banner--m-align-center .banner__box { text-align: center; align-items: center; }
  .banner--m-align-right .banner__box { text-align: right; align-items: flex-end; }
  .banner--m-align-left .banner__buttons { justify-content: flex-start; }
  .banner--m-align-center .banner__buttons { justify-content: center; }
  .banner--m-align-right .banner__buttons { justify-content: flex-end; }

  /* Two images, stacked: each is its own row. In adapt mode both keep their natural shape. */
  .banner--stack-mobile .banner__media-wrap { grid-template-columns: 1fr; }
  .banner--stack-mobile:not(.banner--adapt) { min-height: 0; }
  .banner--stack-mobile:not(.banner--adapt) .banner__media { min-height: var(--banner-h-mobile); }
  .banner--adapt.banner--stack-mobile .banner__media img { position: static; height: auto; }

  /* Text below the image: the image gets the full width and height to itself. */
  .banner--mobile-below { display: block; min-height: 0; }
  .banner--mobile-below:not(.banner--adapt) .banner__media-wrap { min-height: var(--banner-h-mobile); }
  .banner--mobile-below.banner--stack-mobile:not(.banner--adapt) .banner__media-wrap { min-height: 0; }
  .banner--mobile-below .banner__content { background: var(--banner-box-bg); color: var(--banner-box-fg); }
  .banner--mobile-below.banner--boxed .banner__box { padding: 0; background: none; }
}

@media (prefers-reduced-motion: reduce) {
  .banner--anim-ambient .banner__media img, .banner--anim-zoom-in .banner__media img { animation: none; transform: none; transition: none; }
  .banner--anim-fixed .banner__media { background-attachment: scroll; }
}

/* ---------- button hover effect (Theme settings > Animations > Button hover effect) ----------
   One body class picks the effect for every button. Outline buttons (border in their text colour)
   and solid buttons (filled) each get a version that suits them; --btn-edge is the colour a solid
   button's ring is drawn in. */
.btn--primary { --btn-edge: var(--btn-primary-bg-color); }
.banner__btn--primary { --btn-edge: var(--banner-btn-bg, var(--btn-primary-bg-color)); }
.btn--outline, .btn--outline-light, .banner__btn--secondary { --btn-edge: currentColor; }
/* The storefront app ships Bootstrap, whose .btn:hover swaps every button's border, text and
   background for its own (transparent) colours. That is what made borders vanish on hover. Each style
   states its own hover colours here, after Bootstrap, so the effect below starts from the real button. */
.btn--primary:hover { color: var(--btn-primary-text-color); background: var(--btn-primary-hover-bg); border-color: transparent; }
.btn--outline:hover { color: var(--brand-text); background: transparent; border-color: var(--brand-text); }
.btn--outline-light:hover { color: #fff; background: transparent; border-color: #fff; }
.banner__btn--primary:hover { color: var(--banner-btn-fg, var(--btn-primary-text-color)); }
.banner__btn--secondary:hover { color: inherit; background: transparent; border-color: currentColor; }

@media (hover: hover) {
  /* Bold border: the edge gets heavier; nothing moves and nothing fills, so the border never vanishes. */
  .btn-hover--bold .btn--outline:not([disabled]):hover,
  .btn-hover--bold .btn--outline-light:not([disabled]):hover,
  .btn-hover--bold .banner__btn--secondary:not([disabled]):hover { box-shadow: inset 0 0 0 1px currentColor; }
  .btn-hover--bold .btn--primary:not([disabled]):hover,
  .btn-hover--bold .banner__btn--primary:not([disabled]):hover { outline: 2px solid var(--btn-edge); outline-offset: 3px; }

  /* Soft tint: a wash of the button's own colour behind the text, border kept. */
  .btn-hover--tint .btn--outline:not([disabled]):hover,
  .btn-hover--tint .btn--outline-light:not([disabled]):hover,
  .btn-hover--tint .banner__btn--secondary:not([disabled]):hover { background: color-mix(in srgb, currentColor 14%, transparent); }

  /* Solid fill: outline buttons flip to a filled button. */
  .btn-hover--fill .btn--outline:not([disabled]):hover { background: var(--brand-text); border-color: var(--brand-text); color: var(--brand-bg); }
  .btn-hover--fill .btn--outline-light:not([disabled]):hover { background: #fff; border-color: #fff; color: var(--brand-text); }
  .btn-hover--fill .banner__btn--secondary:not([disabled]):hover { background: color-mix(in srgb, currentColor 28%, transparent); }

  /* Lift & shadow, and Shine sweep: the motion effects, now chosen instead of always on. */
  .btn-hover--lift .btn:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 8px 18px var(--shadow-medium, rgb(0 0 0 / 0.18)); }
  .btn-hover--sheen .btn::after { opacity: 1; }

  /* None: no hover change at all, not even the primary button's darker background. */
  .btn-hover--none .btn--primary:not([disabled]):hover { background: var(--btn-primary-bg-color); }
  .btn-hover--none .banner__btn--primary:not([disabled]):hover { background: var(--banner-btn-bg, var(--btn-primary-bg-color)); border-color: var(--banner-btn-bg, var(--btn-primary-bg-color)); }
}
.btn:focus-visible { outline: 2px solid var(--btn-edge, currentColor); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn-hover--lift .btn:not([disabled]):hover { transform: none; }
}