/* ============================================================
   Glyhaven — Apple-inspired design refinements
   Layered on top of the Shopify (Dawn) theme.
   Overrides the theme's design tokens + adds refined touches.
   ============================================================ */

/* ---- 1. Global design tokens: kill the boxiness ---------- */
:root,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5 {
  /* rounded corners everywhere */
  --buttons-radius: 980px !important;          /* Apple's signature pill */
  --buttons-radius-outset: 980px !important;
  --inputs-radius: 12px !important;
  --inputs-radius-outset: 12px !important;
  --text-boxes-radius: 14px !important;
  --media-radius: 18px !important;
  --popup-corner-radius: 18px !important;
  --variant-pills-radius: 980px !important;
  --product-card-corner-radius: 18px !important;
  --badge-corner-radius: 980px !important;
  --drawer-shadow-blur-radius: 40px !important;

  /* softer, more diffuse shadows */
  --popup-shadow-opacity: 0.10 !important;
  --popup-shadow-blur-radius: 40px !important;
  --popup-shadow-vertical-offset: 12px !important;
}

/* ---- 2. Typography: crisp, Apple-like rendering ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  letter-spacing: -0.01em;
}
h1, h2, .h1, .h2 {
  letter-spacing: -0.022em;
  line-height: 1.06;
}

/* ---- 3. Buttons: pill shape, smooth spring hover --------- */
.button,
.shopify-payment-button__button--unbranded,
button.button,
.product-form__submit,
.cart__checkout-button,
.customer button {
  border-radius: 980px !important;
  padding-inline: 2.4rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: transform .25s cubic-bezier(.2,.7,.3,1),
              box-shadow .25s ease,
              background-color .25s ease,
              opacity .2s ease !important;
  will-change: transform;
}
.button:not([disabled]):hover,
.product-form__submit:not([disabled]):hover,
.shopify-payment-button__button--unbranded:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.button:not([disabled]):active,
.product-form__submit:not([disabled]):active {
  transform: translateY(0) scale(.99);
}
/* Secondary/outline buttons keep the pill but stay light */
.button--secondary,
.button--tertiary {
  border-radius: 980px !important;
}

/* ---- 4. Frosted-glass sticky header (Apple hallmark) ----- */
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent !important;
  border-bottom: none !important;
}
.header-wrapper > .header,
.section-header .header {
  background: rgba(255,255,255,0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background .3s ease;
}
/* nav links: subtle Apple hover */
.header__menu-item span,
.header__menu-item {
  transition: opacity .2s ease;
}
.header__menu-item:hover span {
  opacity: .55;
}

/* ---- 5. Product cards: rounded, lift on hover ----------- */
.card-wrapper,
.card,
.grid__item .card {
  border-radius: 18px;
  overflow: hidden;
}
.card--standard .card__inner,
.card__media,
.card .media {
  border-radius: 18px !important;
  overflow: hidden;
}
.card-wrapper {
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.card-wrapper:hover {
  transform: translateY(-4px);
}
.card-wrapper:hover .card__media img,
.card-wrapper:hover .media img {
  transform: scale(1.04);
}
.card__media img,
.media img {
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}

/* rounded media everywhere (banners, galleries, image-with-text) */
.media--hover-effect,
.banner__media,
.image-with-text__media,
.slideshow__media,
.product__media,
.product-media-modal__content img,
.global-media-settings {
  border-radius: 18px !important;
  overflow: hidden;
}
/* keep full-bleed hero banners edge-to-edge */
.banner--stacked .banner__media,
.slideshow .banner__media {
  border-radius: 0 !important;
}

/* ---- 6. Inputs, selects, variant pills ------------------ */
.field__input,
.select__select,
.customer input,
.localization-form__select,
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  border-radius: 12px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.field__input:focus,
input:focus,
textarea:focus {
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.variant-pills fieldset .product-form__input input[type="radio"] + label,
.product-form__input--pill label {
  border-radius: 980px !important;
  transition: all .2s ease !important;
}
/* Quantity selector rounding */
.quantity {
  border-radius: 980px !important;
  overflow: hidden;
}

/* ---- 7. Badges (Sold out, Sale) ------------------------- */
.badge {
  border-radius: 980px !important;
  padding: .5rem 1.1rem !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  backdrop-filter: blur(6px);
}

/* ---- 8. Cart / drawers / popups: soft rounded ----------- */
.cart-notification,
.menu-drawer,
.cart-drawer,
.search-modal__content,
predictive-search .predictive-search {
  border-radius: 20px !important;
}
.menu-drawer {
  border-radius: 0 !important; /* full-height side drawer stays square edge */
}

/* ---- 9. Smoother global transitions & focus ------------- */
a, .link {
  transition: color .2s ease, opacity .2s ease;
}
:focus-visible {
  outline: 2px solid rgba(0,0,0,.4);
  outline-offset: 2px;
}

/* ---- 10. Announcement bar: refined ---------------------- */
.announcement-bar,
.utility-bar {
  letter-spacing: -0.01em;
}

/* ============================================================
   11. Customer reviews ("Let customers speak for us")
   Custom app block — restyled to Apple standard.
   Suffix-independent selectors + !important to beat the
   block's own inline <style> that follows in the body.
   ============================================================ */

/* Section: soft Apple-grey backdrop, generous rhythm */
[class*="ai-reviews-container-"] {
  padding: 72px 0 !important;
  background-color: #f5f5f7 !important;
}
[class*="ai-reviews-header-"] {
  margin-bottom: 44px !important;
  padding-inline: 22px;
}
[class*="ai-reviews-title-"] {
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.08 !important;
  color: #1d1d1f !important;
}
[class*="ai-reviews-subtitle-"] {
  font-size: 19px !important;
  color: #6e6e73 !important;
  letter-spacing: -0.01em !important;
  margin-top: 6px !important;
}

/* Horizontal scroller: hide scrollbar, add snap + edge padding */
[class*="ai-reviews-scroll-container-"] {
  scrollbar-width: none !important;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
}
[class*="ai-reviews-scroll-container-"]::-webkit-scrollbar {
  height: 0 !important;
  display: none !important;
}
[class*="ai-reviews-grid-"] {
  gap: 20px !important;
  padding: 6px 24px 28px !important;
  /* Center the row when the cards don't fill the width;
     'safe' falls back to left-aligned when they overflow so
     nothing gets clipped/unscrollable. */
  justify-content: safe center !important;
}

/* Card: white, soft rounded, diffuse shadow, hover lift */
[class*="ai-review-card-"] {
  flex: 0 0 340px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-radius: 22px !important;
  padding: 26px 26px 28px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04),
              0 12px 34px rgba(0,0,0,0.06) !important;
  scroll-snap-align: start;
  transition: transform .35s cubic-bezier(.2,.7,.3,1),
              box-shadow .35s ease !important;
}
[class*="ai-review-card-"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06),
              0 22px 50px rgba(0,0,0,0.10) !important;
}

/* Header row + avatar */
[class*="ai-review-header-"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}
[class*="ai-review-info-"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
[class*="ai-review-name-wrapper-"] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
[class*="ai-review-avatar-"] { flex: 0 0 auto !important; }
[class*="ai-review-avatar-"] {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #efe7df, #e4d8cc) !important;
  color: #7a6a58 !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
}
[class*="ai-review-name-wrapper-"] {
  gap: 8px !important;
  align-items: center !important;
}
[class*="ai-review-name-"] {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #1d1d1f !important;
}

/* Verified badge: quiet, refined pill (Apple system green) */
[class*="ai-review-verified-"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(52,199,89,0.12) !important;
  color: #248a3d !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 3px 9px 3px 6px !important;
  border-radius: 980px !important;
  text-transform: none !important;
}
[class*="ai-review-verified-icon-"] {
  width: 13px !important;
  height: 13px !important;
}
[class*="ai-review-date-"] {
  font-size: 12.5px !important;
  color: #86868b !important;
  margin-top: 3px !important;
  letter-spacing: -0.005em !important;
}

/* Product tag: subtle grey pill */
[class*="ai-review-product-"] {
  display: inline-block !important;
  background: #f5f5f7 !important;
  color: #4b4b4f !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  border-radius: 980px !important;
  margin: 4px 0 14px !important;
  letter-spacing: -0.005em !important;
}

/* Stars: refined amber, tidy spacing */
[class*="ai-review-stars-"] {
  gap: 2px !important;
  margin-bottom: 12px !important;
}
[class*="ai-review-star-"] {
  color: #ffb400 !important;
}

/* Review body copy */
[class*="ai-review-text-"] {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #3a3a3c !important;
  letter-spacing: -0.01em !important;
}

/* Attached review photos: rounded, subtle */
[class*="ai-review-images-"] {
  gap: 8px !important;
  margin-top: 16px !important;
}
[class*="ai-review-image-"] {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  object-fit: cover !important;
}

/* Mobile: comfortable card width + snappy carousel */
@media (max-width: 749px) {
  [class*="ai-reviews-container-"] { padding: 52px 0 !important; }
  [class*="ai-reviews-grid-"] { padding: 6px 20px 24px !important; gap: 16px !important; }
  [class*="ai-review-card-"] {
    flex: 0 0 82vw !important;
    max-width: 340px;
    padding: 22px 22px 24px !important;
    border-radius: 20px !important;
  }
  [class*="ai-reviews-subtitle-"] { font-size: 16px !important; }
}

/* ============================================================
   12. Theme toggle button (in header) + smooth theme fade
   ============================================================ */
.gh-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  color: rgb(var(--color-foreground, 18 18 18));
  border-radius: 980px;
  transition: background-color .2s ease, transform .15s ease;
  -webkit-appearance: none; appearance: none;
}
.gh-theme-toggle:hover { background: rgba(127,127,127,0.14); }
.gh-theme-toggle:active { transform: scale(0.9); }
.gh-theme-toggle svg { width: 2rem; height: 2rem; display: block; }
.gh-theme-toggle .gh-sun { display: none; }
html.gh-dark .gh-theme-toggle .gh-sun { display: block; }
html.gh-dark .gh-theme-toggle .gh-moon { display: none; }

/* Gentle cross-fade when switching themes */
html.gh-theme-ready body,
html.gh-theme-ready body * {
  transition: background-color .35s ease, color .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}

/* ============================================================
   13. DARK MODE — Apple-style palette (html.gh-dark)
   Flips Dawn's colour tokens to one consistent dark scheme and
   tunes custom components for pleasing text contrast.
   ============================================================ */
html.gh-dark { background: #111113; color-scheme: dark; }
html.gh-dark body { background: #111113; }

/* Flip every Dawn colour scheme to the same dark palette */
html.gh-dark .color-scheme-1,
html.gh-dark .color-scheme-2,
html.gh-dark .color-scheme-3,
html.gh-dark .color-scheme-4,
html.gh-dark .color-scheme-5 {
  --color-background: 17,17,19;
  --gradient-background: #111113;
  --color-foreground: 245,245,247;
  --color-background-contrast: 70,70,74;
  --color-shadow: 0,0,0;
  --color-button: 245,245,247;
  --color-button-text: 17,17,19;
  --color-secondary-button: 44,44,46;
  --color-secondary-button-text: 245,245,247;
  --color-link: 235,235,240;
  --color-badge-foreground: 245,245,247;
  --color-badge-background: 44,44,46;
  --color-badge-border: 90,90,94;
  --payment-terms-background-color: rgb(28 28 30);
}

/* Lift cards/media surfaces above the page for depth */
html.gh-dark .card,
html.gh-dark .card-wrapper,
html.gh-dark .card__inner,
html.gh-dark .card__content { --color-background: 28,28,30; }

/* Muted secondary text — comfortable, not stark white */
html.gh-dark .rte,
html.gh-dark .caption,
html.gh-dark .caption-with-letter-spacing,
html.gh-dark .card__information .caption,
html.gh-dark .product__text.caption-with-letter-spacing,
html.gh-dark .footer-block__details-content,
html.gh-dark .footer__content-bottom small,
html.gh-dark .disclosure__link { color: #a1a1a6 !important; }

/* Frosted header + footer → dark glass */
html.gh-dark .header-wrapper > .header,
html.gh-dark .section-header .header {
  background: rgba(20,20,22,0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
html.gh-dark .footer { background: #1c1c1e !important; }
html.gh-dark .announcement-bar,
html.gh-dark .utility-bar {
  background: #000 !important;
  color: #f5f5f7 !important;
}
html.gh-dark .announcement-bar__message,
html.gh-dark .announcement-bar a { color: #f5f5f7 !important; }

/* Buttons: primary = light pill / dark text, secondary = outline */
html.gh-dark .button:not(.button--secondary):not(.button--tertiary),
html.gh-dark .product-form__submit,
html.gh-dark .shopify-payment-button__button--unbranded,
html.gh-dark .cart__checkout-button {
  background-color: #f5f5f7 !important;
  color: #111113 !important;
}
html.gh-dark .button--secondary,
html.gh-dark .button--tertiary {
  color: #f5f5f7 !important;
  border-color: rgba(255,255,255,0.28) !important;
  background: transparent !important;
}

/* Inputs, selects, textareas */
html.gh-dark .field__input,
html.gh-dark .select__select,
html.gh-dark .customer input,
html.gh-dark input[type="text"],
html.gh-dark input[type="email"],
html.gh-dark input[type="search"],
html.gh-dark input[type="tel"],
html.gh-dark input[type="number"],
html.gh-dark textarea {
  background: #1c1c1e !important;
  color: #f5f5f7 !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html.gh-dark ::placeholder { color: #8a8a8e !important; }
html.gh-dark .field__label { color: #a1a1a6 !important; }

/* Drawers, cart, search, popups */
html.gh-dark .menu-drawer,
html.gh-dark .cart-drawer,
html.gh-dark .cart-notification,
html.gh-dark .search-modal__content,
html.gh-dark .predictive-search,
html.gh-dark .facets__disclosure-vertical,
html.gh-dark .menu-drawer__submenu {
  background: #1c1c1e !important;
  color: #f5f5f7 !important;
}
html.gh-dark .menu-drawer__menu-item,
html.gh-dark .menu-drawer__menu-item:hover { color: #f5f5f7 !important; }

/* Quantity selector / variant pills borders */
html.gh-dark .quantity__input,
html.gh-dark .quantity { color: #f5f5f7 !important; }

/* The theme toggle icon colour in dark */
html.gh-dark .gh-theme-toggle { color: #f5f5f7; }

/* Reviews section → dark (overrides the light values in §11) */
html.gh-dark [class*="ai-reviews-container-"] { background-color: #000 !important; }
html.gh-dark [class*="ai-review-card-"] {
  background: #1c1c1e !important;
  color: #d1d1d6 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 16px 40px rgba(0,0,0,0.55) !important;
}
html.gh-dark [class*="ai-reviews-title-"] { color: #f5f5f7 !important; }
html.gh-dark [class*="ai-reviews-subtitle-"] { color: #a1a1a6 !important; }
html.gh-dark [class*="ai-review-name-"] { color: #f5f5f7 !important; }
html.gh-dark [class*="ai-review-text-"] { color: #d1d1d6 !important; }
html.gh-dark [class*="ai-review-date-"] { color: #8a8a8e !important; }
html.gh-dark [class*="ai-review-product-"] { background: #2c2c2e !important; color: #d1d1d6 !important; }
html.gh-dark [class*="ai-review-verified-"] {
  background: rgba(48,209,88,0.18) !important; color: #4ee07a !important;
}
html.gh-dark [class*="ai-review-avatar-"] {
  background: linear-gradient(145deg,#3a3a3c,#2c2c2e) !important;
  color: #e5e5ea !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* SVG icons (search, cart, account, arrows) follow foreground */
html.gh-dark .header .icon,
html.gh-dark .header__icon .svg-wrapper,
html.gh-dark .slider-button .icon { color: #f5f5f7 !important; }

/* Logo is a black wordmark — force it to clean white in dark mode */
html.gh-dark .header__heading-logo,
html.gh-dark .header__heading-link .header__heading-logo {
  filter: brightness(0) invert(1) !important;
}

/* Any payment-icon / social SVGs in footer stay legible */
html.gh-dark .footer .list-social__link .icon,
html.gh-dark .footer__list-social .icon { color: #f5f5f7 !important; }

/* ============================================================
   14. TYPOGRAPHY — "Soft Luxe"
   Headers: Cormorant Garamond (elegant high-contrast serif)
   Body:    Manrope (clean, legible geometric-humanist sans)
   ============================================================ */
:root,
body,
.color-scheme-1, .color-scheme-2, .color-scheme-3,
.color-scheme-4, .color-scheme-5 {
  --font-body-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --font-body-style: normal !important;
  --font-body-weight: 400 !important;
  --font-heading-family: "Cormorant Garamond", "Times New Roman", Georgia, serif !important;
  --font-heading-weight: 600 !important;
  --font-heading-style: normal !important;
}

/* Body / UI text → Manrope */
body,
.rte, input, textarea, select, button,
.button, .price, .card__information, .product__text,
.header__menu-item, .list-menu__item, .announcement-bar__message,
.facets, .cart-item, .totals {
  font-family: var(--font-body-family);
}

/* Headings / display → Cormorant Garamond */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5,
.banner__heading, .title, .title-wrapper h2,
.product__title, .product__title h1, .product__title h2,
.card__heading, .card__heading a,
.collection__title, .collection-hero__title,
.rich-text__heading, .section-header__title,
.customer h1, .main-page-title,
[class*="ai-reviews-title-"] {
  font-family: var(--font-heading-family) !important;
}

/* Big display (hero tagline etc.): tighter, weightier so it reads
   luxe rather than fragile */
.banner__heading, .h0, .h1,
.collection-hero__title, .main-page-title {
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.04 !important;
}

/* Section titles */
h2, .h2, .title, .section-header__title,
.rich-text__heading, [class*="ai-reviews-title-"] {
  font-weight: 600 !important;
  letter-spacing: 0.004em !important;
}

/* Product & card titles are often UPPERCASE + small — Cormorant caps
   need a touch of tracking and a heavier weight to hold up */
.card__heading, .card__heading a,
.product__title, .product__title h1 {
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* Review author names should stay in the sans (small serif names read
   awkwardly) */
[class*="ai-review-name-"] { font-family: var(--font-body-family) !important; }

/* Manrope has a solid x-height; ease global tracking a hair */
body { letter-spacing: -0.006em; }

/* ============================================================
   15. Product imagery: always white-backed
   Some products (Bloom collection) use transparent PNG cutouts,
   which otherwise float on the page/dark background. Backing all
   product media in white gives a clean studio look; opaque JPG
   shots are unaffected. Applies in light AND dark mode.
   ============================================================ */
.card__media,
.card__media .media,
.card__inner .media,
.card-wrapper .media,
.product__media,
.product__media .media,
.product__media-item,
.product__modal .media,
.product-media-modal__content,
media-gallery .media,
.thumbnail .media,
.product-media-gallery .media {
  background-color: #ffffff !important;
}
.card__media img,
.product__media img,
.product-media-modal__content img,
.thumbnail img {
  background-color: #ffffff;
}

/* ============================================================
   16. Uniform product-card image ratio
   The theme uses "adapt to image", so cards inherit each photo's
   own proportions (some tall, some short) and the grid looks
   uneven. Lock every product card to one 4:5 portrait ratio and
   cover-fill so the grid is perfectly even.
   ============================================================ */
.card-wrapper .card__inner.ratio,
.card .card__inner.ratio,
.grid__item .card__inner.ratio {
  --ratio-percent: 125% !important;   /* 4:5 portrait */
}
.card__media img,
.card__media .media img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ============================================================
   17. Hero slideshow → Apple-style auto crossfade
   Stacks the slides and cross-dissolves them on a timer (driven
   by apple-theme.js), hides the manual arrows/counter, tunes the
   image framing, and adds a legibility scrim. Desktop + mobile.
   ============================================================ */

/* The slider element itself becomes a fixed-height stage */
.slideshow.banner {
  position: relative !important;
  display: block !important;
  height: min(82svh, 760px);
  min-height: 480px;
  overflow: hidden !important;
  scroll-snap-type: none !important;
}

/* Every slide is stacked and hidden; the active one fades in */
.slideshow.banner .slideshow__slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.4s;
  z-index: 1;
}
.slideshow.banner .slideshow__slide.gh-slide-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
  z-index: 2;
}

/* Media fills the stage; subtle slow zoom on the active slide */
.slideshow.banner .slideshow__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}
/* Blurred fill of the same image behind it (var set by JS) so the
   FULL image is always visible (contain) with no ugly bars */
.slideshow.banner .slideshow__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gh-hero-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(.5) saturate(1.15);
  transform: scale(1.2);
  z-index: 0;
}
.slideshow.banner .slideshow__media img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* show the whole image */
  object-position: center !important;
}
.slideshow.banner .slideshow__slide.gh-slide-active .slideshow__media img {
  animation: gh-kenburns 9s ease-out both;
}
@keyframes gh-kenburns {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* Legibility scrim so overlaid text always reads */
.slideshow.banner .slideshow__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.46) 0%, rgba(0,0,0,.14) 32%, rgba(0,0,0,0) 58%),
    linear-gradient(to right, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
  z-index: 1;
}

/* Hide the manual arrows + slide counter */
.slideshow__controls,
.slideshow.banner .slider-buttons,
.slider-counter,
.slideshow__control-wrapper { display: none !important; }

/* Instagram-style dot indicators (tappable / swipeable) */
.slideshow.banner .gh-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.slideshow.banner .gh-hero-dot {
  pointer-events: auto;
  width: 7px;
  height: 7px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background-color .3s ease, width .3s ease, transform .3s ease;
}
.slideshow.banner .gh-hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.slideshow.banner .gh-hero-dot.gh-dot-active {
  background: #ffffff;
  width: 20px;
}

/* Overlay wrapper fills the stage; content anchored bottom-centre */
.slideshow.banner .slideshow__text-wrapper.banner__content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: center !important;
  padding: clamp(1.5rem, 5vw, 4.5rem) !important;
}

/* No solid card — clean white text directly over the image + scrim
   (kills the theme's full-width-mobile dark box that covered the image) */
.slideshow.banner .slideshow__text.banner__box {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  max-width: 44rem;
  color: #fff !important;
}
.slideshow.banner .slideshow__text.banner__box,
.slideshow.banner .slideshow__text.banner__box .banner__heading,
.slideshow.banner .slideshow__text.banner__box .banner__text,
.slideshow.banner .slideshow__text.banner__box p {
  color: #fff !important;
}
.slideshow.banner .banner__heading {
  letter-spacing: .01em !important;
  line-height: 1.04 !important;
  text-shadow: 0 2px 26px rgba(0,0,0,.6);
}
.slideshow.banner .banner__text { text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.slideshow.banner .banner__buttons { margin-top: 1.6rem; }

/* Mobile: comfortable height + framing */
@media (max-width: 749px) {
  .slideshow.banner { height: 76svh; min-height: 500px; }
  /* Full-height flex column pushes the text to the BOTTOM (off the subject).
     The box must be natural height — the theme forces height:100% otherwise,
     which is what kept the text vertically centred. */
  .slideshow.banner .slideshow__text-wrapper.banner__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 1.4rem 9% !important;
  }
  .slideshow.banner .slideshow__text.banner__box {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    padding: 0 !important;
    align-self: center !important;
  }
  .slideshow.banner .slideshow__media img { object-position: center !important; }
  /* Second image on mobile: fill the frame (no letterbox grey gaps) and
     hold still (no zoom). Its content is centred, so only plain edges trim. */
  .slideshow.banner .gh-slide-idx-1 .slideshow__media img,
  .slideshow.banner .gh-slide-idx-1.gh-slide-active .slideshow__media img {
    object-fit: cover !important;
    object-position: center !important;
    animation: none !important;
    transform: none !important;
  }
  .slideshow.banner .gh-slide-idx-1 .slideshow__media::before { display: none !important; }
}

/* ============================================================
   18. Rich-text section ("Sweet Strength Collection")
   Clear Apple hierarchy + a legible feature line.
   ============================================================ */
.rich-text__blocks {
  max-width: 44rem;
  margin-inline: auto;
}
.rich-text__heading {
  margin-bottom: 1.5rem !important;
  letter-spacing: 0.008em;
  line-height: 1.06;
}
.rich-text__text {
  font-size: clamp(18px, 4.9vw, 21px);
  line-height: 1.6;
  letter-spacing: -0.006em;
}
.rich-text__text p { margin: 0 0 1.15rem; }
.rich-text__text p:last-of-type { margin-bottom: 0; }

/* Feature line → its own tier: hairline divider above, tracked, legible */
.rich-text__text em {
  display: block;
  max-width: 34rem;
  margin: 2.2rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-style: italic;
  font-size: clamp(16px, 4.3vw, 19px);
  letter-spacing: 0.02em;
  line-height: 1.75;
}
.rich-text__buttons {
  margin-top: 2.2rem !important;
  /* Breathing room after "Just In" before the product grid below */
  margin-bottom: clamp(24px, 6vw, 52px) !important;
}
/* Extra gap between the rich-text block and the section that follows it */
.shopify-section:has(.rich-text) + .shopify-section {
  margin-top: clamp(12px, 3.5vw, 36px);
}

/* ============================================================
   19. Product page gallery — round every image corner
   The inner .product__media is rounded, but Dawn's wrapper
   (.product-media-container) draws the visible border/background
   with square corners and overflow:visible. Round + clip them all.
   ============================================================ */
.product-media-container,
.product__modal-opener,
.product__media-item,
.product-media-container.media-fit-contain,
.product-media-container.constrain-height,
media-gallery .product__media-wrapper,
.thumbnail-list__item,
.thumbnail {
  border-radius: 18px !important;
  overflow: hidden !important;
}
.product-media-container::before,
.product-media-container::after { border-radius: 18px !important; }

/* Higher-specificity pass — Dawn's own rules keep overflow visible
   and leave the <li> square, which shows square edges on the gallery */
.product__media-list .product__media-item,
.product__media-list li.product__media-item,
media-gallery .product__media-item {
  border-radius: 18px !important;
  overflow: hidden !important;
}
.product__media-list .product-media-container,
media-gallery .product-media-container,
.product-media-container.media-fit-contain,
.product-media-container.media-fit-cover {
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Thumbnails a touch tighter */
.thumbnail-list__item,
.thumbnail,
.thumbnail img { border-radius: 12px !important; }

/* Lightbox / zoom modal images */
.product-media-modal__content > *,
.product-media-modal__content img { border-radius: 16px !important; }

/* The visible tile IS the media container: white, rounded, subtle border —
   consistent in light AND dark. The item WRAPPER must stay transparent, or
   its background shows around the tile as odd white borders. */
.product__media-item,
.product__media-list .product__media-item { background: transparent !important; }
.product-media-container,
.product__media-list .product-media-container {
  background-color: #ffffff !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
html.gh-dark .product-media-container { border-color: rgba(0, 0, 0, 0.12) !important; }

/* Mobile: one centered image per view, sized to the column (no viewport
   overflow, no adjacent-slide peek, perfectly centred) */
@media (max-width: 749px) {
  media-gallery .product__media-list,
  .product__media-list {
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
  }
  .product__media-list .product__media-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: center !important;
  }
}

/* ============================================================
   20. Quantity stepper — clean unified pill (Apple-style)
   The middle input had picked up the dark input styling, so it
   looked like a floating dark box between the − and + buttons.
   ============================================================ */
.quantity {
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 980px !important;
  overflow: hidden !important;
  background: transparent !important;
  height: 46px !important;
  width: auto !important;
  min-width: 132px;
}
html.gh-dark .quantity { border-color: rgba(255, 255, 255, 0.2) !important; }

.quantity .quantity__input,
html.gh-dark .quantity .quantity__input,
html.gh-dark input[type="number"].quantity__input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: center !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
}
.quantity__input:focus,
.quantity__input:focus-visible { box-shadow: none !important; outline: 0 !important; }

.quantity__button {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  border-radius: 0 !important;
  transition: background-color .2s ease !important;
}
.quantity__button:not([disabled]):hover { background: rgba(127, 127, 127, 0.14) !important; }
.quantity__button[disabled] { opacity: .35; }
.quantity__button .svg-wrapper svg,
.quantity__button svg { width: 1.3rem; height: 1.3rem; }

/* ============================================================
   21. Policy & content (.rte) pages — readable width, clean lists
   Fixes: full-width unreadable text, detached bullets (p-in-li),
   and pasted double <br> gaps. Scoped away from the homepage
   rich-text block (.rich-text__text) which is styled separately.
   ============================================================ */
.shopify-policy__container {
  max-width: 74rem !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 5vw, 24px) !important;
}
.shopify-policy__title { text-align: left !important; }

/* Comfortable body rhythm */
.rte:not(.rich-text__text) { line-height: 1.66 !important; }
.rte:not(.rich-text__text) p { margin: 0 0 1.1rem !important; }
.rte:not(.rich-text__text) h1 { line-height: 1.1 !important; }
.rte:not(.rich-text__text) h2 { margin: 2.6rem 0 1rem !important; line-height: 1.15 !important; }
.rte:not(.rich-text__text) h3,
.rte:not(.rich-text__text) h4 { margin: 1.9rem 0 0.6rem !important; line-height: 1.2 !important; }

/* Lists — bullet sits next to its text; sane spacing */
.rte:not(.rich-text__text) ul,
.rte:not(.rich-text__text) ol {
  margin: 1.1rem 0 1.5rem !important;
  padding-left: 2.2rem !important;
}
.rte:not(.rich-text__text) li { margin-bottom: 0.5rem !important; padding-left: 0.2rem; }
.rte:not(.rich-text__text) li > p { display: inline !important; margin: 0 !important; }

/* Collapse pasted double line-breaks that created big empty gaps */
.rte:not(.rich-text__text) br + br { display: none !important; }

/* ============================================================
   22. Hide non-functional commerce icons (static showcase)
   No working account/login or search backend on the static site.
   (Cart icon is kept but repointed to a contact-to-order email.)
   ============================================================ */
.header__icon--account,
.menu-drawer__account,
.header__search,
.header__icon--search { display: none !important; }

/* Contrast — light mode */
.rich-text__text { color: #3a3a3c; }
.rich-text__text em { color: #57575c; }

/* Contrast — dark mode (fixes the dim/greyed hierarchy) */
html.gh-dark .rich-text__heading,
html.gh-dark .rich-text__heading strong { color: #f5f5f7 !important; }
html.gh-dark .rich-text__text { color: #d6d6db !important; }
html.gh-dark .rich-text__text strong { color: #ffffff !important; }
html.gh-dark .rich-text__text em {
  color: #d0d0d6 !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
}