/** Shopify CDN: Minification failed

Line 2586:27 Unexpected "*"

**/
/* =============================================================================
   GIRLY POP HORROR — CUSTOM STYLES v6
   Horror elements on light luxury base | Shopify Dawn Theme
   White bg for shirt contrast + blood drips, fog, grain, scan lines
   ============================================================================= */


/* ─── 1. DESIGN TOKENS ──────────────────────────────────────────────────────── */

:root {
  --color-gph-bg: 255, 255, 255;
  --color-gph-surface: 245, 245, 245;
  --color-gph-primary: 0, 0, 0;
  --color-gph-muted: 118, 118, 118;
  --color-gph-accent: 139, 26, 26;
  --color-gph-white: 255, 255, 255;
  --font-gph: 'Plus Jakarta Sans', sans-serif;
  --transition-base: 0.3s ease;

  /* Tight grid gaps */
  --grid-desktop-horizontal-spacing: 8px !important;
  --grid-desktop-vertical-spacing: 12px !important;
  --grid-mobile-horizontal-spacing: 6px !important;
  --grid-mobile-vertical-spacing: 10px !important;

  --page-width: 100%;
}


/* ─── 2. GLOBAL RESETS ──────────────────────────────────────────────────────── */

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

body {
  font-family: var(--font-gph) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff !important;
  color: #000 !important;
  margin: 0;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, select, textarea, label, li {
  font-family: var(--font-gph) !important;
}

a { color: inherit; text-decoration: none; }

/* Prevent Flash of Unstyled Text — Plus Jakarta Sans preload hint */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-display: swap;
}

/* Override Dawn's color scheme everywhere */
.color-scheme-1, .color-scheme-2, .color-background-1,
[class*="color-scheme-"], [class*="color-background-"] {
  --color-background: 255, 255, 255 !important;
  --color-foreground: 0, 0, 0 !important;
  --gradient-background: #fff !important;
}


/* ─── 3. PAGE LAYOUT ────────────────────────────────────────────────────────── */

.page-width {
  max-width: 100% !important;
  margin: 0 auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.spaced-section { margin-top: 0 !important; }
.spaced-section--full-width { margin-top: 0 !important; }


/* ─── 4. ANNOUNCEMENT BAR ──────────────────────────────────────────────────── */

.announcement-bar-section {
  position: sticky;
  top: 0;
  z-index: 200;
}

.utility-bar,
.announcement-bar {
  background-color: #f1f0ed !important;
  border-bottom: none !important;
  min-height: 40px;
}

.announcement-bar__message,
.announcement-bar__message.h5 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #67645e !important;
  padding: 10px 16px;
}


/* ─── 5. HEADER & NAV ──────────────────────────────────────────────────────── */

/* Override Dawn's .gradient and color-scheme backgrounds on header — DARK GLASS */
.header-wrapper,
.header-wrapper.gradient,
.header-wrapper[class*="color-"],
.header-wrapper.color-scheme-1,
.header-wrapper.color-scheme-2 {
  background: rgba(255, 255, 255, 0.65) !important;
  background-image: none !important;
  background-attachment: initial !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: none !important;
}

.section-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.65) !important;
  background-image: none !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: none !important;
}

/* Smooth slide-in on scroll-up (enhances Dawn's built-in sticky behavior) */
.shopify-section-header-sticky.animate {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Header — light frosted glass on all pages, compact */
.header {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Header wrapper and sticky-header — also light frosted glass */
.header-wrapper,
sticky-header,
.shopify-section-header-sticky {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

/* Kill ALL underlines in header — Dawn's .link class adds them */
.header-wrapper a,
.header-wrapper .link,
.header-wrapper a.link,
.header__heading-link,
.header__menu-item,
.header__menu-item.link,
.header__menu-item .header__active-menu-item,
.header__active-menu-item,
.header__icon,
.header__icon--search,
.gph-nav-label {
  text-decoration: none !important;
  text-underline-offset: unset !important;
}

/* Nav links — NOTE: Dawn uses html { font-size: 62.5% } so 1rem = 10px */
.header__menu-item,
.header__menu-item span,
.header__menu-item .header__active-menu-item {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #67645e !important;
}

/* Logo text (when no image uploaded) */
.header__heading-link,
.header__heading-link .h2 {
  color: #67645e !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* header__menu-item hover opacity removed — slash effect handles feedback */
.header__icon { color: #67645e !important; }

/* Hide country/language selector — clutters header */
.desktop-localization-wrapper { display: none !important; }

/* ── GPH utility link text labels ──────────────────────────────────────────── */

/* Hidden by default — !important ensures Dawn's flex/span styles don't leak through */
.gph-nav-label { display: none !important; }

@media screen and (min-width: 990px) {
  /* Show text labels on desktop */
  .gph-nav-label {
    display: inline !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--gph-smoke) !important;
    font-family: var(--font-gph) !important;
    text-decoration: none !important;
  }

  /* Hide icon SVGs on desktop */
  .header__icons .gph-icon,
  .header__icon--search .gph-icon {
    display: none !important;
  }

  /* Remove icon-button sizing on desktop — behave as text links */
  .header__icons .header__icon,
  .header__icon--search {
    padding: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
    width: auto !important;
    height: auto !important;
  }

  /* More breathing room between SEARCH / ACCOUNT / CART */
  .header__icons {
    gap: 28px !important;
  }

  /* Hide cart bubble on desktop — count shown in text label */
  .header__icon--cart .cart-count-bubble {
    display: none !important;
  }
}

/* Mobile: keep icon styling as-is */
.cart-count-bubble {
  background: rgb(var(--color-gph-accent)) !important;
  color: #fff !important;
  font-size: 1.0rem !important;
  font-weight: 800 !important;
}


/* ─── 5b. SEARCH — RHODE-STYLE RIGHT PANEL ─────────────────────────────────── */
/*
   Rhode pattern: right-side slide-in drawer. Dark overlay covers the rest of
   the page; the warm-beige panel animates in from the right edge.

   Dawn structure (header-search.liquid):
     <details>
       <summary class="modal__toggle"> ... SEARCH ... </summary>
       <div class="search-modal modal__content">       ← 1. full-viewport wrapper
         <div class="modal-overlay"></div>             ← 2. dark dim
         <div class="search-modal__content">           ← 3. right panel
           <form>...</form>
           <button class="search-modal__close-button">✕</button>
         </div>
       </div>
     </details>

   <details> hides children when closed — position:fixed only activates when open.
*/

/* 1. Full-viewport transparent wrapper ─────────────────────────────────────── */
.search-modal.modal__content {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9999 !important;
  background: transparent !important;
  overflow: visible !important;
  /* Kill Dawn's gradient color-scheme background */
  --gradient-background: transparent !important;
  --color-background: transparent !important;
  /* Prevent any layout shift */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Full-page dark overlay ─────────────────────────────────────────────────── */
.search-modal .modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  z-index: 9999 !important;
}

/* Remove the old ::after trick */
details[open] .search-modal .modal-overlay::after {
  display: none !important;
  content: none !important;
}

/* 3. Right-side panel ──────────────────────────────────────────────────────── */
.search-modal__content,
.search-modal__content-bottom,
.search-modal__content-top {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: min(540px, 90vw) !important;
  height: 100vh !important;
  background: #f1f0ed !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 40px 40px !important;
  z-index: 10000 !important;
  box-shadow: -10px 0 60px rgba(0, 0, 0, 0.08) !important;
  /* Override Dawn's centering — content must flow from top */
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  /* Slide in from right */
  animation: gph-panel-slide-in 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
}

@keyframes gph-panel-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* "search" heading at top of panel (matches Rhode's h3 label) */
.search-modal__content::before {
  content: "search";
  display: block !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: lowercase !important;
  color: #000 !important;
  font-family: var(--font-gph) !important;
  margin-bottom: 28px !important;
}

/* Close button — top right of panel */
.search-modal__close-button.modal__close-button {
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  left: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  cursor: pointer !important;
  min-width: unset !important;
  min-height: unset !important;
  box-shadow: none !important;
  color: #000 !important;
  line-height: 1 !important;
}

.search-modal__close-button svg,
.search-modal__close-button .icon {
  width: 16px !important;
  height: 16px !important;
  color: #000 !important;
  stroke: #000 !important;
  fill: none !important;
}

/* Search input — Rhode style: no border box, just bottom line */
.search-modal__content .search-modal__form,
.search-modal__content form.search {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.search-modal__content .field {
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.search-modal__content .field__input,
.search-modal__content .search__input.field__input {
  background: transparent !important;
  border: none !important;
  font-size: 1.6rem !important;
  color: #000 !important;
  padding: 12px 80px 12px 0 !important;
  width: 100% !important;
  box-shadow: none !important;
}

.search-modal__content .field__input::placeholder {
  color: var(--gph-muted) !important;
}

/* Hide Dawn's floating label — it duplicates our ::before "search" heading */
.search-modal__content .field__label {
  display: none !important;
}

/* Search + reset icon buttons */
.search-modal__content .search__button,
.search-modal__content .reset__button {
  background: transparent !important;
  border: none !important;
  color: var(--gph-smoke) !important;
  box-shadow: none !important;
}

.search-modal__content .search__button svg,
.search-modal__content .reset__button svg {
  fill: var(--gph-smoke) !important;
  stroke: none !important;
}

/* Predictive search results — stay inside the panel, not a floating dropdown */
.predictive-search.predictive-search--header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 20px !important;
  overflow: visible !important;
}

.predictive-search__result-group-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
  letter-spacing: 0.04em !important;
  color: #000 !important;
  margin: 20px 0 8px !important;
  padding: 0 !important;
}

.predictive-search__list-item {
  border-bottom: none !important;
  padding: 0 !important;
}

.predictive-search__list-item a,
.predictive-search__list-item button {
  font-size: 1.4rem !important;
  color: #000 !important;
  padding: 9px 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
}

.predictive-search__list-item:hover a,
.predictive-search__list-item:hover button {
  color: #000 !important;
}

.predictive-search__image {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: #e8e5e0 !important;
}

.predictive-search-status {
  display: none !important;
}

/* Loading spinner */
.predictive-search__loading-state {
  color: var(--gph-smoke) !important;
}

/* Mobile: full width panel */
@media screen and (max-width: 749px) {
  .search-modal__content,
  .search-modal__content-bottom,
  .search-modal__content-top {
    width: 100% !important;
    padding: 24px 24px 32px !important;
  }
}


/* ==========================================================================
   6. PRODUCT CARD — FROSTED GLASS LAYOUT
   ==========================================================================
   Redesigned from dark overlay-on-image to light frosted glass card.

   New structure:
   ┌─────────────────────────────────────┐
   │ [badge]           top-right badge   │
   │                                     │
   │    [PNG product image — no bg]      │  ← transparent PNG floats on glass
   │                                     │
   ├─────────────────────────────────────┤  ← subtle separator
   │ PRODUCT TITLE            €26.95     │  ← dark text on frosted glass
   └─────────────────────────────────────┘

   The card IS the background. Transparent PNGs let the frosted glass show
   through. Dark text reads cleanly on the light glass surface.
   ========================================================================== */

.card-wrapper {
  position: relative;
  overflow: visible;
}

/* THE CARD — light frosted glass (horror-luxury glassmorphism)
   backdrop-filter removed — it caused dark rectangular flashes at
   card edges when the GPU compositor failed to re-composite the
   blur. On a white page background the visual difference is
   negligible; the semi-opaque white + shadows carry the effect. */
.card,
.card--standard,
.card--card,
.card--media,
.card--text {
  --card-corner-radius: 0 !important;
  --card-border-width: 0 !important;
  --card-border-opacity: 0 !important;
  --card-shadow-opacity: 0 !important;
  --card-padding: 0 !important;
  position: relative !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.5s ease !important;
}

/* ─── CARD INNER — image fills the entire card ─── */

.card__inner {
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  z-index: 1 !important;
}

/* Transparent — light glass card shows through transparent PNG areas */
.card__inner.color-scheme-2,
.card__inner[class*="color-"] {
  background: transparent !important;
  --color-background: 255, 255, 255 !important;
  --gradient-background: transparent !important;
}

/* Portrait aspect ratio on the image container */
.card__inner.ratio,
.card--media .card__inner .ratio,
.card .ratio {
  --ratio-percent: 133.33% !important;
}

.card__media {
  overflow: hidden;
  background: transparent !important;
}

.card__media,
.card__inner {
  aspect-ratio: 3 / 4 !important;
  padding-bottom: 0 !important;
  border-radius: 16px !important;
}

.card .media {
  aspect-ratio: 3 / 4 !important;
  padding-bottom: 0 !important;
  height: 100% !important;
}

.card .media img,
.card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 16px !important;
}

/* Hover image swap */
.card .media img + img {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

.card-wrapper:hover .media img + img {
  opacity: 1 !important;
}


/* ─── CARD CONTENT OVERLAY — text ON the card ─── */

/* Hide Dawn's inner card__content (duplicate) */
.card__inner > .card__content { display: none !important; }

/* Card content — overlaid at bottom of card image */
.card > .card__content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  padding: 14px 16px 16px 16px !important;
  margin: 0 !important;
  border-radius: 0 0 16px 16px !important;
  border: none !important;
  background: transparent !important;
}

/* Gradient for text readability over product images */
.card > .card__content::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: 0 0 16px 16px !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.08) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

.card__information {
  padding: 0 !important;
}

/* Stacked layout: title above price */
.card > .card__content > .card__information {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-start !important;
}

/* ─── Card text shadow — readable on any background ─── */
.card > .card__content {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

/* ─── Product title — WHITE with drop shadow ─── */
.card > .card__content .card__heading,
.card > .card__content .card__heading.h5 {
  font-size: clamp(1.4rem, 1.4vw, 1.8rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.card__heading a,
.card__heading .full-unstyled-link {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ── Full-card click target ──────────────────────────────────────────
   The heading link's ::after covers the entire card as a click target.
   .card__content is position:absolute at the bottom, so inset:0 would
   only cover the text overlay. We use a huge negative top to extend
   the click area upward over the product image. .card has overflow:hidden
   so the hit-area clips cleanly at the card boundary.
   ──────────────────────────────────────────────────────────────────── */
.card-wrapper {
  position: relative !important;
  cursor: pointer !important;
}

.card__heading a::after,
.card__heading .full-unstyled-link::after {
  content: '' !important;
  position: absolute !important;
  top: -9999px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10 !important;
}

/* Keep quick-add button clickable above the link overlay */
.card .quick-add,
.card .quick-add__submit {
  position: relative !important;
  z-index: 12 !important;
}

.card__heading a:hover { opacity: 0.75; }

/* ─── Price — WHITE, left-aligned below title ─── */
.card > .card__content .card-information {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* ─── Product subtitle — semi-transparent white, row 2 ─── */
.gph-card__subtitle {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  font-size: clamp(1.2rem, 1.0vw, 1.4rem) !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 4px 0 0 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* ─── Price styling — WHITE on gradient overlay ─── */
.price {
  font-size: clamp(1.4rem, 1.3vw, 1.7rem) !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.price .price-item {
  font-size: clamp(1.4rem, 1.3vw, 1.7rem) !important;
  color: #ffffff !important;
}

.price__container { gap: 4px; }

.price--on-sale .price-item--regular {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: line-through;
}

/* Hide Dawn's default badges — we use GPH badges */
.card__badge { display: none !important; }


/* ─── 7. GPH BADGE SYSTEM ──────────────────────────────────────────────────── */

.gph-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  pointer-events: none;
}

.gph-badge__label {
  display: inline-block;
  font-size: 1.0rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: lowercase;
  padding: 5px 12px;
  border-radius: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gph-badge__label--new { background: rgba(0, 0, 0, 0.7); }
.gph-badge__label--coming-soon { background: rgba(100, 100, 100, 0.7); }
.gph-badge__label--best-seller { background: rgb(var(--color-gph-accent)); color: #000; }
.gph-badge__label--exclusive { background: rgb(var(--color-gph-accent)); color: #000; }


/* ─── 7b. SECTION LAYOUT FOR PRODUCT GRIDS ───────────────────────────────────
   Fog pseudo-elements removed — blood splatters provide the horror
   atmosphere. Sections keep relative positioning + overflow-x:clip
   so splatter images can bleed vertically but not inflate body
   scrollWidth (which previously caused a 210px layout shift when
   search toggled overflow:hidden).
   ─────────────────────────────────────────────────────────────────────────── */
.featured-collection,
.shopify-section:has(#product-grid),
.main-collection-product-grid {
  position: relative;
  overflow-x: clip !important;
  overflow-y: visible !important;
}


/* ─── 8. PRODUCT GRID ──────────────────────────────────────────────────────── */

/*
   CSS Grid approach — eliminates flex-basis/gap math mismatches.
   Works on both collection pages and homepage featured collections.
*/

/* Mobile: 2 columns */
#product-grid,
ul.product-grid,
.featured-collection ul.grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tablet: 2 columns with slightly more gap */
@media screen and (min-width: 750px) {
  #product-grid,
  ul.product-grid,
  .featured-collection ul.grid {
    gap: 14px !important;
  }
}

/* Desktop: 3 columns */
@media screen and (min-width: 990px) {
  #product-grid,
  ul.product-grid,
  .featured-collection ul.grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
  }
}

/* Reset grid item sizing — CSS Grid handles it */
#product-grid .grid__item,
ul.product-grid .grid__item,
.featured-collection .grid .grid__item {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
  flex-grow: unset !important;
  flex-shrink: unset !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Collection section — tight padding */
.collection {
  padding-top: 0 !important;
  padding-bottom: 40px !important;
}

[class*="main-collection"] {
  padding-top: 8px !important;
  padding-bottom: 40px !important;
}

/* Collection hero banner — enforce horizontal breathing room */
.collection-hero__inner,
.collection-hero .page-width {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Filter + sort bar — ensure it has the same horizontal padding */
.facets-container,
.facets-container .page-width,
.facets-horizontal .facets__wrapper,
.facets__wrapper,
.facet-filters {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Product count (32 products) */
.product-count {
  padding-right: 24px !important;
}


/* ─── 9. COLLECTION FILTER / SORT BAR ──────────────────────────────────────── */

.facets-container {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.facets-wrapper,
.facets-horizontal .facets__wrapper {
  gap: 8px;
  padding: 10px 0 !important;
  border-bottom: none !important;
}

.facet-filters__sort .select__select {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
  padding: 6px 24px 6px 0 !important;
  background: transparent !important;
  color: #000 !important;
}

.product-count__text {
  font-size: 1.2rem !important;
  color: #767676 !important;
}

.facet-filters__summary,
.facets__summary,
details.facets-disclosure summary {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #767676 !important;
  background: transparent !important;
  border: 1px solid #ccc !important;
  border-radius: 50px !important;
  padding: 7px 14px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.facet-filters__summary:hover,
details.facets-disclosure summary:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

details[open] > summary {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}


/* ─── 10. QUICK ADD BUTTON ─────────────────────────────────────────────────── */

.quick-add__submit {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0 !important;
}

.quick-add__submit:hover {
  background: transparent !important;
  color: #000 !important;
  border-color: #000 !important;
}

.quick-add__submit.button--secondary {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

.quick-add__submit.button--secondary:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}


/* ─── 11. FOOTER ────────────────────────────────────────────────────────────── */

.footer {
  background: #f5f5f5 !important;
  color: #000 !important;
  border-top: none !important;
}

.footer-block__heading {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #000 !important;
  margin: 0 0 16px 0 !important;
}

.footer-block__details-content a,
.footer-block__details-content .link {
  font-size: 1.3rem !important;
  color: #767676 !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.footer-block__details-content a:hover { color: #000 !important; }

.newsletter-form .field {
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: #fff !important;
}

.newsletter-form .field__input {
  font-size: 1.3rem !important;
  border: none !important;
  padding: 12px 16px !important;
  color: #000 !important;
  background: transparent !important;
}

.newsletter-form__button {
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 20px !important;
}

.footer__content-bottom {
  border-top: 1px solid #ddd !important;
  padding: 16px 0 !important;
}

.copyright__content { font-size: 1.1rem !important; color: #767676 !important; }

.footer__list-social .list-social__link {
  color: #000 !important;
  opacity: 0.6;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.footer__list-social .list-social__link:hover { opacity: 1; }


/* ─── 12. BUTTONS ───────────────────────────────────────────────────────────── */

.button, .btn {
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button--primary {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}

.button--primary:hover {
  background: transparent !important;
  color: #000 !important;
  border-color: #000 !important;
}


/* ─── 13. HOMEPAGE ──────────────────────────────────────────────────────────── */

.section-header__title,
h2.title {
  font-size: clamp(1.9rem, 2.5vw, 2.8rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #000 !important;
}

/* Collection title — h1.collection-hero__title is the actual Dawn class */
h1.collection-hero__title,
.collection-hero__title,
h1.collection-title {
  font-size: clamp(2.2rem, 2.5vw, 3.0rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #000 !important;
  font-family: var(--font-gph) !important;
  margin: 16px 0 !important;
}

.collection__view-all a,
.button--tertiary {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--gph-ink) !important;
}


/* ─── 14. MEGA MENU ────────────────────────────────────────────────────────── */

.mega-menu {
  background: #fff !important;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.mega-menu__content {
  display: flex;
  gap: 16px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}


/* ─── 15. MOBILE REFINEMENTS ───────────────────────────────────────────────── */

@media screen and (max-width: 749px) {

  /* ── Card content overlay — compact on mobile ────────────────────── */
  .card > .card__content {
    padding: 10px 10px 12px 10px !important;
  }

  /* ── Stacked layout: title on top, price below ─────────────────────
     Side-by-side grid was squeezing the title to near-zero width on
     narrow mobile cards. Stacking avoids the problem entirely.
     ──────────────────────────────────────────────────────────────────── */
  .card > .card__content > .card__information {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: flex-start !important;
  }

  .card > .card__content .card__heading,
  .card > .card__content .card__heading.h5,
  .card > .card__content .card__information .card__heading,
  .card > .card__content .card__information .card__heading a {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
  }

  .card > .card__content .card-information {
    justify-content: flex-start !important;
  }

  .price,
  .price .price-item {
    font-size: 1.0rem !important;
    color: #ffffff !important;
  }

  /* Subtitle — hidden on mobile to save space */
  .gph-card__subtitle {
    display: none !important;
  }

  /* ── Section headings — tighter on small screens ── */
  .featured-collection .title-wrapper .title,
  h2.collection-title,
  .section-header h2,
  .section-header__title,
  h2.title {
    font-size: clamp(1.6rem, 4.5vw, 2.2rem) !important;
    letter-spacing: 0.08em !important;
  }

  /* ── Page horizontal padding ── */
  .page-width {
    padding-left: clamp(12px, 4vw, 20px) !important;
    padding-right: clamp(12px, 4vw, 20px) !important;
  }

  /* ── Product grid gap ── */
  #product-grid,
  ul.product-grid,
  .featured-collection ul.grid {
    gap: 8px !important;
  }

  /* ── Header — compact and clean on mobile ──────────────────────────────
     1. Reduce vertical padding so the header doesn't dominate the screen
     2. Shrink logo font so "GIRLY•POP HORROR" stays on one line
     3. Prevent logo from wrapping via white-space: nowrap
     4. Tighten icon touch targets slightly so icons column doesn't overflow
     Desktop is unaffected — all rules inside this max-width: 749px block.
     ──────────────────────────────────────────────────────────────────── */
  .header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Logo text — smaller so it fits on one line at ~190px column width */
  .header__heading-link,
  .header__heading-link .h2 {
    font-size: 1.3rem !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
  }

  /* Icons — tighten sizing so search + cart fit the 1fr column */
  .header__icon,
  .header__icon--cart .icon {
    width: 3.6rem !important;
    height: 3.6rem !important;
  }

  .header__icon .svg-wrapper {
    width: 3.6rem !important;
    height: 3.6rem !important;
  }

  /* Bring icons slightly closer together */
  .header__icons {
    gap: 0 !important;
  }
}


/* ─── 16. UTILITY ───────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}

/* ── Layout shift prevention ──────────────────────────────────────────
   Splatter containers extend ±60px past section edges. §48 clips them
   horizontally (overflow-x:clip) so they never inflate scrollWidth.
   When search/cart toggles overflow:hidden on <html>, there's nothing
   extra-wide to cause a shift.                                          */

body {
  overflow-x: hidden !important;
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid rgb(var(--color-gph-accent));
  outline-offset: 2px;
}

/* Hide "Powered by Shopify" */
.copyright__content a[href*="shopify.com"] {
  display: none !important;
}


/* ─── 17. TRANSPARENT HERO HEADER ──────────────────────────────────────────
   When body has .gph-at-top (set by gph-transparent-header.js on homepage
   when scrollY < 60px), the announcement bar and header become transparent
   and all text/icons switch to white so they read over the hero image.
   On scroll, the class is removed and everything transitions back to solid.
   ─────────────────────────────────────────────────────────────────────────── */

/* Smooth transition on ALL header elements — always active */
.announcement-bar-section,
.utility-bar,
.announcement-bar,
.section-header,
.header-wrapper,
.header {
  transition:
    background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease !important;
}

.announcement-bar__message,
.announcement-bar__message.h5,
.header__menu-item,
.header__menu-item span,
.header__menu-item .header__active-menu-item,
.gph-nav-label,
.header__heading-link,
.header__heading-link .h2,
.header__icon,
.header__icon svg {
  transition:
    color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.4s ease !important;
}

/* ── AT-TOP STATE: fully transparent, LIGHT text on dark bg ──
   On the dark horror-luxury page, at-top header blends seamlessly
   into the void background. Text stays light.
── */

body.gph-at-top .section-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.gph-at-top .announcement-bar-section {
  background: transparent !important;
}

body.gph-at-top .utility-bar,
body.gph-at-top .announcement-bar {
  background: transparent !important;
  border-bottom: none !important;
}

body.gph-at-top .announcement-bar__message,
body.gph-at-top .announcement-bar__message.h5 {
  color: #0a0a0a !important;
}

body.gph-at-top .header-wrapper {
  background: transparent !important;
}

body.gph-at-top .header {
  background: transparent !important;
}

/* Nav links → dark */
body.gph-at-top .header__menu-item,
body.gph-at-top .header__menu-item span,
body.gph-at-top .header__menu-item .header__active-menu-item,
body.gph-at-top .gph-nav-label {
  color: #0a0a0a !important;
}

/* Logo text → dark */
body.gph-at-top .header__heading-link,
body.gph-at-top .header__heading-link .h2 {
  color: #0a0a0a !important;
}

/* Icons → dark */
body.gph-at-top .header__icon {
  color: #0a0a0a !important;
}

body.gph-at-top .header__icon svg {
  fill: #0a0a0a !important;
  stroke: #0a0a0a !important;
  color: #0a0a0a !important;
}

/* Cart count bubble stays accent */
body.gph-at-top .cart-count-bubble {
  background: rgb(var(--color-gph-accent)) !important;
  color: #000 !important;
}

/* Sticky-header wrapper also transparent at top */
body.gph-at-top sticky-header,
body.gph-at-top .shopify-section-header-sticky {
  background: transparent !important;
}

/* Hover: slight opacity fade */
body.gph-at-top .header__menu-item:hover {
  opacity: 0.6 !important;
}

/* ── Z-INDEX: ensure header stays above the hero ── */
.shopify-section-group-header-group {
  position: relative;
  z-index: 200;
}

/* ── Homepage: first section has z-index below header ── */
.template-index #MainContent > .shopify-section:first-child {
  position: relative;
  z-index: 1;
}

/* ============================================================
   § 18 — TYPOGRAPHY SYSTEM
   Plus Jakarta Sans — sole typeface, weight-driven hierarchy (200–800).
   Geometric sans-serif chosen as closest Google Fonts match to Avenir.
   Scale: Major Third (×1.25) — body:1 / subhead:1.25 / heading:1.5+
   Dawn uses html{font-size:62.5%} → 1rem = 10px
   ============================================================ */

:root {
  /* Header offset default — JS (gph-luxury.js) will overwrite with measured value */
  --gph-header-offset: 100px;

  /* Dual typeface — geometric sans for both display and UI */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-ui:      'Plus Jakarta Sans', sans-serif;

  /* ── MODULAR TYPE SCALE (Major Third × 1.25) ──────────────
     xs:       1.1rem  = 11px  — badges, labels, micro-text
     sm:       1.3rem  = 13px  — captions, meta, secondary UI
     base:     1.5rem  = 15px  — body copy  ← scale root (1 unit)
     md:       1.875rem = 18.75px — subheadings, large UI (×1.25)
     lg:       2.35rem  = 23.5px  — card titles, h4 (×1.25²)
     xl:       2.93rem  = 29.3px  — section headings, h3 (×1.25³)
     2xl:      3.66rem  = 36.6px  — page headings, h2 (×1.25⁴)
     3xl:      4.575rem = 45.75px — display headings, h1 (×1.25⁵)
     hero:     fluid 5–9.6rem     — hero / full-bleed banners
  ─────────────────────────────────────────────────────────── */
  --text-xs:      1.1rem;
  --text-sm:      1.3rem;
  --text-base:    1.5rem;
  --text-md:      clamp(1.7rem,  1.8vw, 1.875rem);
  --text-lg:      clamp(1.875rem, 2.2vw, 2.35rem);
  --text-xl:      clamp(2.2rem,  2.8vw, 2.93rem);
  --text-2xl:     clamp(2.8rem,  3.6vw, 3.66rem);
  --text-3xl:     clamp(3.2rem,  4.5vw, 4.8rem);
  --text-hero:    clamp(4.8rem,  7.5vw, 9.6rem);

  /* ── WEIGHT SCALE ─────────────────────────────────────────
     200 extralight  — decorative accents
     300 light       — body copy, long-form
     400 regular     — UI body, paragraph
     500 medium      — price, meta labels
     600 semibold    — nav items, filter labels, CTAs
     700 bold        — card titles, h4–h5
     800 extrabold   — h1–h3, hero headings
  ─────────────────────────────────────────────────────────── */
  --weight-body:    300;
  --weight-ui:      400;
  --weight-label:   600;
  --weight-heading: 700;
  --weight-display: 800;

  /* ── LETTER SPACING ───────────────────────────────────────
     Large headings: tight/negative — creates luxury density
     UI/nav: wide — clarity at small sizes + premium feel
  ─────────────────────────────────────────────────────────── */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.16em;

  /* ── SPACING RHYTHM ───────────────────────────────────────── */
  --space-xs:  0.4rem;
  --space-sm:  0.8rem;
  --space-md:  1.6rem;
  --space-lg:  3.2rem;
  --space-xl:  6.4rem;
  --space-2xl: 12.8rem;

  /* ── LIGHT COLOUR PALETTE ────────────────────────── */
  --gph-ink:     #0a0a0a;
  --gph-smoke:   #3a3a3a;
  --gph-muted:   #767676;
  --gph-rule:    #e0e0e0;
  --gph-surface: #f9f8f6;
  --gph-blood:   #8B1A1A;
  --gph-white:   #ffffff;
}

/* ── Global font reset — Plus Jakarta Sans on everything ── */
body {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--gph-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.gph-display,
.section__heading,
.collection-hero__title,
.banner__heading,
.hero__heading {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-display);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
}

h4, h5, h6 {
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
}

/* Nav + UI elements */
.header__menu-item,
.button,
.gph-filter-pill,
.facet-filters__label,
.price,
.badge,
.announcement-bar__message {
  font-family: var(--font-ui) !important;
}

/* ============================================================
   § 19 — PRODUCT CARD — LUXURY HOVER SYSTEM
   ============================================================ */

/* Card wrapper: rounded + visible overflow so box-shadow isn't clipped */
.card-wrapper {
  border-radius: 16px;
  overflow: visible;
}

/* .card background + glassmorphism is set in §6 — no overrides here */
.card {
  cursor: pointer;
}

/* Image zoom on hover */
.card .card__inner .media img,
.card .card__inner .media > * {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  transform-origin: center center;
}

.card-wrapper:hover .card .card__inner .media img,
.card-wrapper:hover .card .card__inner .media > * {
  transform: scale(1.06);
}

/* Card content — normal document flow below image (§6 handles this, no overrides here) */
/* Position is set to relative in §6. DO NOT set position: absolute here. */

/* Quick-add reveal — slides up from below */
.card > .card__content .quick-add {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s ease 0.05s;
  margin-top: 0;
}

@media screen and (min-width: 750px) {
  .card-wrapper:hover .card > .card__content .quick-add {
    max-height: 60px;
    opacity: 1;
  }
}

/* Quick-add button — minimal, editorial */
.card > .card__content .quick-add .quick-add__submit,
.card > .card__content .quick-add button {
  width: 100%;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--gph-ink);
  font-family: var(--font-ui) !important;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.card > .card__content .quick-add .quick-add__submit:hover,
.card > .card__content .quick-add button:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.25);
}

/* ============================================================
   § 20 — BADGE SYSTEM — REFINED
   Plus Jakarta Sans — weight 700, wide tracking, sharp corners
   ============================================================ */

.gph-badge,
.badge {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-display);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  padding: 3px 8px;
  border-radius: 0;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  line-height: 1.4;
}

.gph-badge--new,
.badge--new {
  background: var(--gph-ink);
  color: #fff;
}

.gph-badge--coming-soon,
.badge--coming-soon {
  background: var(--gph-smoke);
  color: var(--gph-white);
}

.gph-badge--best-seller,
.badge--best-seller {
  background: var(--gph-blood);
  color: var(--gph-white);
}

.gph-badge--exclusive,
.badge--exclusive {
  background: transparent;
  color: var(--gph-white);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ============================================================
   § 21 — FILTER BAR — EDITORIAL STYLE
   Plus Jakarta Sans — weight 600, wide tracking, square corners
   ============================================================ */

/* Filter bar container */
.facets-container,
.facets__wrapper {
  border-top: 1px solid var(--gph-rule);
  border-bottom: 1px solid var(--gph-rule);
  padding: 12px 0;
  background: transparent;
}

/* Filter pill labels */
.facet-filters__label,
.mobile-facets__open,
.facet-filters__sort label {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gph-smoke);
}

/* Filter details/summary — square, minimal */
.facets__summary,
.facets-mobile .facets__summary {
  border: 1px solid var(--gph-rule);
  border-radius: 0;
  padding: 8px 16px;
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  color: var(--gph-ink);
}

.facets__summary:hover,
details[open] > .facets__summary {
  border-color: var(--gph-ink);
  background: var(--gph-ink);
  color: #fff;
}

/* Sort select */
.facet-filters__sort .select__select {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--gph-rule);
  border-radius: 0;
  padding: 8px 32px 8px 14px;
  background: transparent;
  color: var(--gph-ink);
  transition: border-color 0.2s ease;
}

.facet-filters__sort .select__select:hover {
  border-color: var(--gph-ink);
  color: var(--gph-ink);
}

/* Active filter chip */
.active-facets__button {
  border-radius: 0;
  border: 1px solid var(--gph-ink);
  background: var(--gph-ink);
  color: #fff;
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 5px 12px;
  transition: background 0.2s ease;
}

/* ============================================================
   § 22 — NAVIGATION — UNDERLINE DRAW ANIMATION
   Plus Jakarta Sans — weight 600, uppercase, wide tracking
   ============================================================ */

.header__menu-item {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

/* ── Old underline hover removed — replaced by GPH blood drip ────
   See gph-animations.js § BLOOD DRIP HOVER for the GSAP-driven
   drop animation. On hover: text floods blood red, single drop
   forms at last letter baseline, falls with gravity. Pristine.   */

.header__menu-item::after {
  display: none !important;
}

/* Prevent the old opacity override from conflicting */
body.gph-at-top .header__menu-item:hover {
  opacity: 1 !important;
}

/* Blood drip active state — JS adds/removes .gph-drip-active on hover.
   Two-class specificity beats Dawn's single-class !important rules.
   When two !important rules conflict, highest specificity wins, so
   .header__icon.gph-drip-active beats .header__icon alone.          */
.header__menu-item.gph-drip-active,
.header__menu-item.gph-drip-active a,
.header__menu-item.gph-drip-active span,
.header__menu-item.gph-drip-active .gph-nav-label,
.header__icon.gph-drip-active,
.header__icon.gph-drip-active span,
.header__icon.gph-drip-active .gph-nav-label {
  color: var(--gph-blood, #8B1A1A) !important;
  transition: color 0.18s ease !important;
}

/* Reduced motion: fall back to a simple subtle color shift */
@media (prefers-reduced-motion: reduce) {
  .header__menu-item:hover,
  .header__icon:hover .gph-nav-label {
    color: var(--gph-blood, #8B1A1A) !important;
    transition: color 0.2s ease !important;
  }
}

/* Header logo — Plus Jakarta Sans, extrabold */
.header__heading-link,
.header__heading-link .h2 {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-snug);
}

/* ============================================================
   § 23 — BUTTONS — LETTER-SPACING EXPAND HOVER
   Plus Jakarta Sans — weight 600, uppercase, tracked
   ============================================================ */

.button,
.shopify-payment-button__button,
button[type="submit"].button {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: 0;
  transition: letter-spacing 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
}

.button:hover,
.shopify-payment-button__button:hover,
button[type="submit"].button:hover {
  letter-spacing: calc(var(--tracking-widest) + 0.06em);
}

/* Primary button */
.button--primary {
  background: var(--gph-ink) !important;
  color: #fff !important;
  border: 1px solid var(--gph-ink) !important;
}

.button--primary:hover {
  background: var(--gph-smoke) !important;
  color: #fff !important;
  border-color: var(--gph-smoke) !important;
}

/* Secondary / outlined */
.button--secondary {
  background: transparent !important;
  color: var(--gph-ink) !important;
  border: 1px solid var(--gph-ink) !important;
}

.button--secondary:hover {
  background: var(--gph-ink) !important;
  color: #fff !important;
  border-color: var(--gph-ink) !important;
}

/* ============================================================
   § 24 — ANNOUNCEMENT BAR — REFINED
   Plus Jakarta Sans — weight 600, ultra-wide tracking, uppercase
   ============================================================ */

.announcement-bar {
  background: var(--gph-ink) !important;
  border-bottom: none !important;
}

.utility-bar,
.announcement-bar-section {
  background: var(--gph-ink) !important;
}

.announcement-bar__message,
.announcement-bar__message.h5 {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--gph-white) !important;
}

.announcement-bar__message a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.5);
}

/* § 25 — Custom cursor removed per user preference */

/* ============================================================
   § 26 — FOOTER — LIGHT
   Light bg, dark accents, Plus Jakarta Sans hierarchy
   ============================================================ */

.footer {
  background: var(--gph-ink) !important;
  color: rgba(255, 255, 255, 0.65);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-top: none !important;
}

/* Footer headings — extrabold, tight tracking */
.footer__heading,
.footer-block__heading {
  font-family: var(--font-ui) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-snug);
  line-height: 1.1;
  color: #000 !important;
  margin-bottom: var(--space-md) !important;
  text-transform: uppercase;
}

/* Footer nav links — light weight, wide tracking */
.footer-block__list a,
.footer__list a,
.footer-block__details-content a,
.footer-block__details-content .link {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-body) !important;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.footer-block__list a:hover,
.footer__list a:hover,
.footer-block__details-content a:hover {
  color: var(--gph-white) !important;
}

/* Copyright bar */
.footer__copyright,
.copyright__content {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: var(--space-md);
  margin-top: var(--space-lg);
}

/* Newsletter input */
.footer .newsletter-form__field-wrapper input,
.footer .newsletter-form .field__input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  color: var(--gph-white) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-wide);
  padding: 14px 0 !important;
  transition: border-color 0.2s ease;
}

.footer .newsletter-form__field-wrapper input:focus,
.footer .newsletter-form .field__input:focus {
  border-color: rgba(255, 255, 255, 0.7) !important;
  outline: none;
}

.footer .newsletter-form__field-wrapper input::placeholder,
.footer .newsletter-form .field__input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs) !important;
}

.footer .newsletter-form__button,
.footer .newsletter-form__button.button {
  border-radius: 0 !important;
  background: var(--gph-white) !important;
  color: var(--gph-ink) !important;
  border: 1px solid var(--gph-white) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease, letter-spacing 0.3s ease;
}

.footer .newsletter-form__button:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--gph-ink) !important;
  border-color: rgba(255,255,255,0.88) !important;
  letter-spacing: calc(var(--tracking-widest) + 0.06em) !important;
}

/* Social icons */
.footer__list-social .list-social__link {
  color: rgba(255, 255, 255, 0.45) !important;
  transition: color 0.2s ease;
}

.footer__list-social .list-social__link:hover {
  color: var(--gph-blood) !important;
}

/* ============================================================
   § 27 — SCROLL REVEAL INITIAL STATES + ACCESSIBILITY
   ============================================================ */

/* Elements GSAP will animate in — start invisible */
.gph-reveal {
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
}

/* Clip-path reveal — images slide up from bottom */
.gph-clip-reveal {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

/* Heading split-lines start hidden */
.gph-line-reveal {
  overflow: hidden;
}

.gph-line-reveal__inner {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

/* Page load fade */
body.gph-loading {
  opacity: 0;
}

/* Reduce motion — disable all custom animations */
@media (prefers-reduced-motion: reduce) {
  .gph-reveal,
  .gph-line-reveal__inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gph-clip-reveal {
    clip-path: inset(0 0 0 0) !important;
  }

  .card .card__inner .media img,
  .card .card__inner .media > * {
    transition: none !important;
  }

  body.gph-loading {
    opacity: 1 !important;
  }
}

/* ============================================================
   § 28 — COLLECTION PAGE HERO TYPOGRAPHY
   Plus Jakarta Sans — extrabold display size, tight tracking
   ============================================================ */

.collection-hero .collection-hero__title,
.section-header .title,
h1.collection-hero__title,
h1.collection-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-3xl) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: 1.0 !important;
  text-transform: uppercase !important;
  color: var(--gph-ink) !important;
  margin: 16px 0 !important;
}

.collection-hero .collection-hero__description,
.section-header .subtitle {
  font-family: var(--font-ui) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-body) !important;
  color: var(--gph-muted) !important;
  letter-spacing: var(--tracking-normal);
  line-height: 1.7;
  margin-top: 1.6rem;
}

/* Section headings — h2.title throughout the theme */
.section-header__title,
h2.title,
.section__heading {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: 1.0 !important;
  text-transform: uppercase !important;
  color: var(--gph-ink) !important;
}

/* Collection grid spacing — handled by §8 CSS Grid rules */

/* ============================================================
   § 29 — PRODUCT GRID COUNT / RESULT LABEL
   ============================================================ */

.product-count,
.product-count__text {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gph-muted) !important;
}

/* ============================================================
   § 30 — MISC REFINEMENTS — PRICE / PAGINATION / RULES
   ============================================================ */

/* Price — white on gradient overlay (matches card text) */
.price,
.price .price-item,
.price .price__regular .price-item,
.price .price__sale .price-item {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
}

.price--on-sale .price-item--regular {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: line-through;
}

/* Pagination */
.pagination__list .pagination__item a,
.pagination__list .pagination__item span {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-wide);
  border-radius: 0;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.pagination__list .pagination__item a:hover {
  border-color: var(--gph-ink);
}

.pagination__item--current span {
  border-color: var(--gph-ink);
  background: var(--gph-ink);
  color: #fff;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--gph-rule);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   § 31 — CARD TEXT — WHITE ON GRADIENT OVERLAY + PLUS JAKARTA SANS
   White text over dark gradient on product images.
   ============================================================ */

/* Title — white, overlaid on gradient */
.card > .card__content .card__information .card__heading,
.card > .card__content .card__information .card__heading a {
  font-family: var(--font-ui) !important;
  font-size: clamp(1.4rem, 1.4vw, 1.8rem);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0 0 2px;
  line-height: 1.2;
}

/* Subtitle — semi-transparent white */
.card > .card__content .gph-card__subtitle {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-body);
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Quick-add button in overlay */
.card > .card__content .quick-add .quick-add__submit,
.card > .card__content .quick-add button {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ============================================================
   § 32 — SEARCH PANEL — TYPOGRAPHY UPDATE
   ============================================================ */

/* "search" label at top of panel */
.search-modal__content::before {
  font-family: var(--font-ui) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-tight) !important;
  text-transform: uppercase !important;
  color: var(--gph-ink) !important;
}

.search-modal__content .field__input,
.search-modal__content .search__input.field__input {
  font-family: var(--font-ui) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-body) !important;
  letter-spacing: var(--tracking-normal);
}

.predictive-search__result-group-title {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
}

.predictive-search__list-item a,
.predictive-search__list-item button {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-ui) !important;
  letter-spacing: var(--tracking-normal);
}

/* ============================================================
   § 33 — NAV LABEL OVERRIDES (desktop text labels)
   ============================================================ */

@media screen and (min-width: 990px) {
  .gph-nav-label {
    font-family: var(--font-ui) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-label) !important;
    letter-spacing: var(--tracking-wider) !important;
    text-transform: uppercase !important;
    color: var(--gph-smoke) !important;
    text-decoration: none !important;
  }
}

/* ============================================================
   § 34 — ACCESSIBILITY
   ============================================================ */

:focus:not(:focus-visible) { outline: none; }

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

/* ============================================================
   § 35 — HIDE POWERED BY SHOPIFY
   ============================================================ */

.copyright__content a[href*="shopify.com"] {
  display: none !important;
}


/* ============================================================
   § 36 — GRAIN / NOISE TEXTURE OVERLAY
   SVG fractal noise at 5.5% opacity + mix-blend-mode:overlay.
   Boosted for dark background — adds gritty film-stock texture.
   Zero performance cost — fixed pseudo-element, no repaints.
   ============================================================ */

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  /* Animation removed — the 0.3s grain-shift caused constant GPU
     repaints that triggered backdrop-filter flicker on product cards.
     Static grain still provides the film-stock texture. */
}


/* ============================================================
   § 37 — ANNOUNCEMENT BAR (HIDDEN)
   Removed scrolling marquee per user preference.
   ============================================================ */

.announcement-bar-section,
.shopify-section-group-announcement-bar-group {
  display: none !important;
}


/* ============================================================
   § 38 — FROSTED GLASS STICKY FILTER BAR
   Sticks just below the header. Backdrop blur + semi-transparent
   background means products are visible scrolling under it.
   ============================================================ */

.facets-container,
.facets__wrapper-container {
  position: sticky !important;
  top: var(--gph-header-offset, 100px) !important;
  z-index: 49 !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.3s ease, background 0.35s ease !important;
}

.facets-container.gph-scrolled {
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

/* Override border already set in §21 so frosted bg shows through */
.facets-container {
  border-top: none !important;
}


/* ============================================================
   § 39 — VIEW TRANSITIONS API
   Native browser page-to-page fade — Chrome 126+ / Safari 18+.
   Progressive enhancement: ignored by unsupporting browsers.
   ============================================================ */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: gph-vt-out 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  ::view-transition-new(root) {
    animation: gph-vt-in 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

@keyframes gph-vt-out {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(-6px); }
}

@keyframes gph-vt-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ============================================================
   § 40 — IMAGE BLUR-UP (progressive lazy-load reveal)
   JS adds .gph-img-loading on unloaded images, removes on load.
   The CSS transition creates a smooth sharpen as images arrive.
   ============================================================ */

.card__media img,
.card .media img {
  transition:
    filter 0.6s ease,
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  /* Removed will-change: filter, transform — it promoted each image to
     a separate compositor layer, conflicting with the card's own
     backdrop-filter layer and causing rendering flicker. The browser
     handles these transitions fine without the hint. */
}

.card__media img.gph-img-loading,
.card .media img.gph-img-loading {
  filter: blur(12px) !important;
}


/* ============================================================
   § 41 — SPLIT-TEXT WORD ANIMATION
   JS wraps each word in .gph-word-wrap > .gph-word.
   GSAP animates .gph-word from translateY(115%) → 0.
   ============================================================ */

.gph-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.gph-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Natural spacing between word-wraps */
.gph-word-wrap + .gph-word-wrap {
  margin-left: 0.28em;
}


/* ============================================================
   § 42 — COMING SOON / SOLD OUT CARD STATE
   Subtle desaturation for unavailable products.
   Uses :has() — Chrome 105+ / Safari 15.4+ / Firefox 121+.
   Falls back gracefully (no desaturation) in older browsers.
   ============================================================ */

.card-wrapper:has(.gph-badge__label--coming-soon) .card__media,
.card-wrapper:has(.gph-badge__label--coming-soon) .card .media {
  filter: grayscale(0.45) brightness(0.97);
  transition: filter 0.5s ease;
}

.card-wrapper:has(.gph-badge__label--coming-soon):hover .card__media,
.card-wrapper:has(.gph-badge__label--coming-soon):hover .card .media {
  filter: grayscale(0.2) brightness(0.99);
}


/* ============================================================
   § 43 — SCROLL PROGRESS INDICATOR
   1px ink line at viewport top. Fills left→right as user scrolls.
   JS (gph-luxury.js) creates the element + drives the width.
   ============================================================ */

.gph-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 1.5px;
  background: var(--gph-ink);
  z-index: 10002;
  pointer-events: none;
  transition: width 0.08s linear;
}


/* ============================================================
   § 44 — LUXURY VISUAL POLISH
   High-impact visual refinements for elevated brand feel.
   ============================================================ */

/* ── Light glass hover elevation ── */
.card-wrapper:hover .card {
  transform: translateY(-8px) !important;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 16px 32px rgba(0, 0, 0, 0.12),
    0 40px 72px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

/* ── Collection page title — editorial display ── */
.collection__title h1,
h1.collection__title,
.main-collection-banner .banner__heading,
.collection-hero__title {
  font-family: var(--font-ui) !important;
  font-size: clamp(3.6rem, 5vw, 7.2rem) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  color: #000 !important;
}

/* ── Styled filter / sort bar ── */
.facets-container {
  border-top: 1px solid var(--gph-rule) !important;
  border-bottom: 1px solid var(--gph-rule) !important;
  padding: 14px 0 !important;
  margin-bottom: clamp(20px, 3vw, 36px) !important;
}

/* ── Filter dropdown fix ──────────────────────────────────────────────
   Dawn base.css sets dropdown z-index to just 2 on desktop, which
   lets product cards overlap. We boost the entire disclosure system:
   1. The invisible click-outside overlay (summary::before) — closes
      the open dropdown when you click anywhere else, preventing two
      dropdowns from being open at once.
   2. The dropdown panel itself (summary + *) — must sit above cards.
   ──────────────────────────────────────────────────────────────────── */

/* Invisible full-screen overlay that closes dropdown on outside click */
.facets .disclosure-has-popup[open] > summary::before {
  z-index: 90 !important;
}

/* The dropdown panel — above the overlay AND above product cards */
.facets .disclosure-has-popup[open] > summary + *,
.disclosure-has-popup[open] > summary + * {
  z-index: 100 !important;
  position: absolute !important;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 4px !important;
}

.facets__label,
.facet-filters__label {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--gph-ink) !important;
}

.facet-filters__sort select,
.facets__form select {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-wide) !important;
  color: var(--gph-ink) !important;
  border: none !important;
  background: transparent !important;
}

/* ── Edge-to-edge layout (Rhode-style full bleed) ── */
.page-width {
  max-width: 100% !important;
  padding-left: clamp(16px, 2.5vw, 40px) !important;
  padding-right: clamp(16px, 2.5vw, 40px) !important;
}

/* Header runs full width with tighter padding */
.header.page-width,
.header-wrapper .page-width {
  max-width: 100% !important;
  padding-left: clamp(16px, 2.5vw, 40px) !important;
  padding-right: clamp(16px, 2.5vw, 40px) !important;
}

/* Collection + featured section containers full bleed */
.collection .page-width,
.featured-collection .page-width,
.main-collection-product-grid .page-width,
#shopify-section-template--* .page-width {
  max-width: 100% !important;
  padding-left: clamp(16px, 2.5vw, 40px) !important;
  padding-right: clamp(16px, 2.5vw, 40px) !important;
}

/* ── Product count styling ── */
.product-count {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--gph-muted) !important;
}

/* ── Breadcrumb styling ── */
.breadcrumbs,
.breadcrumbs a {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color: var(--gph-muted) !important;
  text-decoration: none !important;
}
.breadcrumbs a:hover { color: var(--gph-ink) !important; }

/* ── Header refinement ── */
.header {
  font-family: var(--font-ui) !important;
  letter-spacing: var(--tracking-wider) !important;
}

.header__menu-item {
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
}

.header__heading-link {
  font-family: var(--font-ui) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-tight) !important;
}

/* ── Announcement bar — hidden (§37) ── */

/* ── Homepage hero CTA button ── */
.banner__buttons .button,
.slideshow__buttons .button,
.banner__content .button {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  border: 1px solid var(--gph-ink) !important;
  background: transparent !important;
  color: var(--gph-ink) !important;
  padding: 14px 40px !important;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.banner__buttons .button:hover,
.slideshow__buttons .button:hover {
  background: var(--gph-ink) !important;
  color: var(--gph-white) !important;
  border-color: var(--gph-ink) !important;
}

/* ── Footer luxury styling ── */
.footer {
  font-family: var(--font-ui) !important;
  letter-spacing: var(--tracking-wide) !important;
}

.footer-block__heading {
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-heading) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
}

/* ── Smooth page transitions ── */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  position: relative !important;
}

/* ── "View all" button — editorial style ── */
.collection-product-grid .view-all a,
.view-all a,
a.full-unstyled-link[href*="collections"] {
  font-family: var(--font-ui) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-label) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  color: var(--gph-ink) !important;
  transition: opacity 0.3s ease !important;
}

.view-all a:hover { opacity: 0.6 !important; }

/* ── Section headings ── */
.featured-collection .title-wrapper .title,
h2.collection-title,
.section-header h2 {
  font-family: var(--font-ui) !important;
  font-size: clamp(2.4rem, 3vw, 3.6rem) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--gph-ink) !important;
}


/* ============================================================
   § 45 — SCAN LINES OVERLAY
   Repeating horizontal lines at 6px intervals, ultra-subtle.
   Uses body::before (body::after is taken by grain §36).
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9996;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0, 0, 0, 0.012) 3px, rgba(0, 0, 0, 0.012) 6px
  );
}


/* ============================================================
   § 46 — ANIMATED FILM GRAIN SHIFT
   Enhances the grain from §36 with micro-jitter animation.
   Merges with §36 rather than overriding — preserves the SVG
   background-image while adding position shift + animation.
   ============================================================ */

@keyframes gph-grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2px, 1px); }
  66%  { transform: translate(1px, -2px); }
}


/* ============================================================
   § 47 — PLASTIC WRAP OVERLAY ON PRODUCT CARDS
   Cellophane texture sits on top of card at 35% opacity.
   Fades on hover so product image is clearer.
   ============================================================ */

.gph-plastic-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 8 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: opacity 0.5s ease !important;
}

.gph-plastic-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.55 !important;
  mix-blend-mode: screen !important;
}

/* Hover: plastic wrap fades — "unwrapping" the product */
.card-wrapper:hover .gph-plastic-wrap {
  opacity: 0.2 !important;
}

/* Coming-soon cards: plastic wrap stays stronger (product is still wrapped) */
.card-wrapper:has(.gph-badge__label--coming-soon) .gph-plastic-wrap {
  opacity: 1 !important;
}
.card-wrapper:has(.gph-badge__label--coming-soon) .gph-plastic-wrap img {
  opacity: 0.55 !important;
}
.card-wrapper:has(.gph-badge__label--coming-soon):hover .gph-plastic-wrap {
  opacity: 0.85 !important;
}


/* ============================================================
   § 48 — BLOOD SPLATTER SYSTEM
   Splatters positioned behind product grids and scattered
   between sections. Visible through glassmorphism cards.
   ============================================================ */

/* ── Splatter container — BEHIND the product grid ──
   The container sits inside the same wrapper as the product grid
   but with a negative z-index so cards float above it.
   Splatters are deliberately large and extend beyond grid edges
   to peek out from under the cards' glassmorphism. */
.gph-splatter-container {
  position: absolute !important;
  top: -80px !important;
  left: -60px !important;
  right: -60px !important;
  bottom: -80px !important;
  pointer-events: none !important;
  z-index: -1 !important;
  overflow: visible !important;
}

/* Individual splatter images */
.gph-splatter {
  position: absolute !important;
  pointer-events: none !important;
  object-fit: contain !important;
}

/* Page-level scroll-triggered splatters —
   These also sit BEHIND content using negative z-index */
.gph-page-splatter {
  position: absolute !important;
  pointer-events: none !important;
  z-index: -1 !important;
  object-fit: contain !important;
  /* Initial state for GSAP — hidden until scroll trigger */
  opacity: 0;
  transform: scale(0.7);
}

/* Sections that contain product grids need relative positioning
   and NO isolation so splatters can layer behind cards correctly.
   overflow-x MUST stay clipped (set in §7b) — splatters extend
   ±60px past edges and would inflate scrollWidth, causing a
   layout shift whenever search/cart toggles overflow:hidden.
   overflow-y stays visible so splatters bleed vertically. */
.featured-collection,
.shopify-section:has(#product-grid),
.main-collection-product-grid {
  position: relative !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* The grid wrapper that directly contains the splatter-container
   needs position:relative for the splatters to anchor to.
   Clip horizontally to contain splatters within viewport. */
.collection,
.featured-collection .slider-component,
.featured-collection slider-component {
  position: relative !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Product grid — sits above splatters naturally (no forced z-index) */
#product-grid,
ul.product-grid,
.featured-collection .grid {
  position: relative !important;
}


/* § 49 — FOG KEYFRAMES: removed (fog layer deleted) */


/* ============================================================
   § 50 — MOBILE SPLATTER CONTAINMENT
   Tighten splatter container on mobile so it doesn't extend
   past viewport edges.
   ============================================================ */

@media screen and (max-width: 749px) {
  .gph-splatter-container {
    left: -20px !important;
    right: -20px !important;
    top: -40px !important;
    bottom: -40px !important;
  }
}


/* ============================================================
   § 51 — MOBILE MENU DRAWER — FROSTED GLASS
   Dawn's menu-drawer slides in from the left on mobile.
   Apply frosted glass background so menu text is readable
   over page content. Matches the GPH glassmorphism language.
   ============================================================ */

.menu-drawer {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(32px) saturate(140%) !important;
  backdrop-filter: blur(32px) saturate(140%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Menu items — dark text on frosted glass */
.menu-drawer__menu-item {
  color: var(--gph-ink, #0a0a0a) !important;
  font-family: var(--font-gph, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:focus {
  color: var(--gph-blood, #8B1A1A) !important;
  background: rgba(139, 26, 26, 0.04) !important;
}

/* Submenu panels also get frosted glass */
.js .menu-drawer__submenu {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(32px) saturate(140%) !important;
  backdrop-filter: blur(32px) saturate(140%) !important;
}

/* Utility links area at bottom of drawer */
.menu-drawer__utility-links {
  background: rgba(255, 255, 255, 0.5) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Close / back button styling */
.menu-drawer__close-button {
  color: var(--gph-ink, #0a0a0a) !important;
  font-family: var(--font-gph, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 1.2rem !important;
}

.menu-drawer__close-button:hover {
  color: var(--gph-blood, #8B1A1A) !important;
}

/* Dark overlay behind drawer — slightly darker for contrast */
.js menu-drawer > details[open] > summary::before {
  background: rgba(0, 0, 0, 0.5) !important;
}