/** Shopify CDN: Minification failed Line 1565:2 Unexpected "{" Line 1565:3 Expected identifier but found "%" Line 1572:2 Unexpected "{" Line 1572:3 Expected identifier but found "%" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:colour-pdp (INDEX:29) */ /* Joel 2026-05-02: tighter top padding so the title sits closer to the page top now that the breadcrumb row is gone. The back link sits in its own header band above the gallery+info grid. */ .gd-colour-pdp { padding-block: var(--gd-sp-3) var(--gd-sp-5); } @media (min-width: 990px) { .gd-colour-pdp { padding-block: var(--gd-sp-4) var(--gd-sp-7); } } .gd-colour-pdp__pageheader { display: flex; align-items: center; margin-bottom: var(--gd-sp-3); } @media (min-width: 990px) { .gd-colour-pdp__pageheader { margin-bottom: var(--gd-sp-4); } } /* Back link — eyebrow-scale uppercase to match the rest of the site's secondary typography (matches the .gd-eyebrow / outline- button family). Consumes existing tokens, no new visual treatment. */ .gd-colour-pdp__back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-ink-secondary); text-decoration: none; padding: 6px 0; transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-colour-pdp__back:hover { color: var(--gd-ink); } .gd-colour-pdp__back:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 4px; border-radius: 2px; } .gd-colour-pdp__back svg { flex-shrink: 0; transition: transform var(--gd-dur-base) var(--gd-ease-out); } .gd-colour-pdp__back:hover svg { transform: translateX(-2px); } .gd-colour-pdp__grid { display: grid; grid-template-columns: 1fr; gap: var(--gd-sp-5); align-items: start; } @media (min-width: 990px) { .gd-colour-pdp__grid { grid-template-columns: 1fr 1fr; gap: var(--gd-sp-7); } } /* ── Gallery: 2×2 grid desktop, horizontal scroll mobile ── */ .gd-colour-pdp__gallery { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (max-width: 749px) { .gd-colour-pdp__gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gd-sp-3) * -1); padding-inline: var(--gd-sp-3); } .gd-colour-pdp__gallery::-webkit-scrollbar { display: none; } .gd-colour-pdp__cell { flex-shrink: 0; width: 80%; scroll-snap-align: center; } } /* Sticky gallery on desktop ≥990 — matches kit-hero behaviour. The gallery 2×2 grid locks below the sticky header stack while the right info column scrolls past. align-items: start on the parent grid (already set) is what allows sticky to function. Mobile (<990, where columns stack to single-column) skips sticky. */ @media (min-width: 990px) { .gd-colour-pdp__gallery { position: sticky; top: calc(var(--gd-sticky-stack-h, 100px) + var(--gd-promo-h, 32px) + 24px); align-self: start; } } .gd-colour-pdp__cell { position: relative; aspect-ratio: 1 / 1; background: var(--gd-surface); border-radius: var(--gd-radius-xs); overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Cell-trigger button — fills cell, transparent, opens lightbox on click. */ .gd-colour-pdp__cell-trigger { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; } /* Joel 2026-04-29: suppress Dawn's *:focus-visible double-ring on post-click; keep keyboard outline via the scoped :focus-visible rule. */ /* :focus-visible only — global :focus:not(:focus-visible){outline:none} handles click. */ .gd-colour-pdp__cell-trigger:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: -2px; box-shadow: none; } .gd-colour-pdp__cell-img { width: 100%; height: 100%; object-fit: cover; display: block; } video.gd-colour-pdp__cell-img { background: var(--gd-surface); } video.gd-colour-pdp__cell-img::-webkit-media-controls, video.gd-colour-pdp__cell-img::-webkit-media-controls-enclosure, video.gd-colour-pdp__cell-img::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; } .gd-colour-pdp__external-video { width: 100%; height: 100%; } .gd-colour-pdp__external-video iframe { width: 100%; height: 100%; border: 0; display: block; } .gd-colour-pdp__swatch-fallback { display: block; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--gd-swatch) 87%, black 0%), var(--gd-swatch)); box-shadow: 0 8px 24px color-mix(in srgb, var(--gd-swatch) 20%, transparent), inset 0 -4px 12px color-mix(in srgb, var(--gd-swatch) 27%, transparent); } /* ── Info column ── */ .gd-colour-pdp__crumbs { display: flex; align-items: center; gap: 6px; font-family: var(--gd-font-body); font-size: 12px; color: var(--gd-ink-secondary); margin-bottom: var(--gd-sp-2); } .gd-colour-pdp__crumbs a { color: var(--gd-ink-secondary); text-decoration: none; transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-colour-pdp__crumbs a:hover { color: var(--gd-ink); } .gd-colour-pdp__crumb-current { color: var(--gd-ink); font-weight: 500; } .gd-colour-pdp__title { font-family: var(--gd-font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--gd-ink); margin: 0; } .gd-colour-pdp__rating-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .gd-colour-pdp__review-count { font-family: var(--gd-font-body); font-size: 13px; color: var(--gd-ink-secondary); } .gd-colour-pdp__price { font-family: var(--gd-font-body); font-size: 20px; font-weight: 500; color: var(--gd-ink); margin: var(--gd-sp-3) 0 0; display: flex; align-items: baseline; gap: 10px; } .gd-colour-pdp__price-was { font-size: 14px; font-weight: 400; color: var(--gd-ink-disabled); text-decoration: line-through; } .gd-colour-pdp__description { font-family: var(--gd-font-body); font-size: 15px; line-height: 1.75; color: var(--gd-ink-secondary); margin-top: var(--gd-sp-3); max-width: var(--gd-max-prose); } /* ── Product attributes (icon + label + value rows) ── */ .gd-colour-pdp__attrs { display: flex; flex-direction: column; margin: var(--gd-sp-4) 0 0; padding: 0; border-top: 1px solid var(--gd-border); } .gd-colour-pdp__attr-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--gd-border); } .gd-colour-pdp__attr-icon { color: var(--gd-ink-secondary); display: inline-flex; align-items: center; justify-content: center; } .gd-colour-pdp__attr-label { font-family: var(--gd-font-body); font-size: 13px; font-weight: 500; color: var(--gd-ink-secondary); margin: 0; } .gd-colour-pdp__attr-value { font-family: var(--gd-font-body); font-size: 13px; font-weight: 500; color: var(--gd-ink); margin: 0; text-align: right; } /* ── Trust signals row (#4) — body content, NOT sticky bar ── */ .gd-colour-pdp__trust-row { list-style: none; margin: var(--gd-sp-3) 0 0; padding: var(--gd-sp-3) 0 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--gd-border); } @media (min-width: 540px) { .gd-colour-pdp__trust-row { flex-direction: row; flex-wrap: wrap; gap: var(--gd-sp-3) var(--gd-sp-4); } } .gd-colour-pdp__trust-item { display: inline-flex; align-items: center; gap: 10px; font-family: var(--gd-font-body); font-size: 13px; color: var(--gd-ink); line-height: 1.4; } .gd-colour-pdp__trust-icon { color: var(--gd-violet); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Stories row (#5) ── */ .gd-colour-pdp__stories-block { margin-top: var(--gd-sp-5); padding-block: var(--gd-sp-5) 0; border-top: 1px solid var(--gd-border); } .gd-colour-pdp__stories-heading { font-family: var(--gd-font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--gd-ink); margin: 0 0 var(--gd-sp-3); } /* ── Colour swatch picker (#3 refactor) — in-column 5×2 grid + expand ── */ .gd-cpdp-swatchgrid-block { margin-top: var(--gd-sp-3); padding-top: var(--gd-sp-3); border-top: 1px solid var(--gd-border); } .gd-cpdp-swatchgrid-block__heading { font-family: var(--gd-font-body); font-size: 13px; line-height: 1.4; color: var(--gd-ink); margin: 0 0 var(--gd-sp-2); letter-spacing: 0; } .gd-cpdp-swatchgrid-block__heading-prefix { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--gd-ink); } .gd-cpdp-swatchgrid-block__heading-name { font-weight: 400; color: var(--gd-ink-secondary); margin-left: 2px; } .gd-cpdp-swatchgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--gd-sg-cols, 5), 1fr); gap: 14px 8px; } .gd-cpdp-swatchgrid__item { display: flex; justify-content: center; } /* Default-collapsed state: hide items beyond the configured visible count (rows × cols). When .is-expanded is set the JS toggle below reveals them with a fade. */ .gd-cpdp-swatchgrid__item:nth-child(n+11) { display: none; } .gd-cpdp-swatchgrid.is-expanded .gd-cpdp-swatchgrid__item:nth-child(n+11) { display: flex; animation: gdCpdpSwatchFadeIn 320ms var(--gd-ease-out, ease-out) both; } /* Row 2 desaturated as the visual cue that more colours exist below the fold. Returns to full opacity when expanded. Joel 2026-05-02 "View more" expand spec — replicates the manucurist screenshot's greyed-lower-row treatment in GLAMRDiP brand styling. */ .gd-cpdp-swatchgrid__item:nth-child(n+6):nth-child(-n+10) { opacity: 0.55; filter: saturate(0.7); transition: opacity 280ms ease-out, filter 280ms ease-out; } .gd-cpdp-swatchgrid.is-expanded .gd-cpdp-swatchgrid__item:nth-child(n+6):nth-child(-n+10) { opacity: 1; filter: none; } @keyframes gdCpdpSwatchFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .gd-cpdp-swatchgrid__swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 72px; text-decoration: none; color: var(--gd-ink); cursor: pointer; user-select: none; -webkit-user-select: none; } .gd-cpdp-swatchgrid__img, .gd-cpdp-swatchgrid__fill, .gd-cpdp-swatchgrid__fallback-tile { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--gd-surface); border: 1.5px solid transparent; transition: border-color 200ms ease-out; display: block; -webkit-user-drag: none; user-drag: none; } .gd-cpdp-swatchgrid__fill { background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--gd-swatch) 87%, black 0%), var(--gd-swatch)); } .gd-cpdp-swatchgrid__fallback-tile { display: inline-flex; align-items: center; justify-content: center; font-family: var(--gd-font-display); font-size: 22px; color: var(--gd-ink-secondary); background: var(--gd-surface); } .gd-cpdp-swatchgrid__swatch:hover .gd-cpdp-swatchgrid__img, .gd-cpdp-swatchgrid__swatch:hover .gd-cpdp-swatchgrid__fill, .gd-cpdp-swatchgrid__swatch:hover .gd-cpdp-swatchgrid__fallback-tile { border-color: var(--gd-ink); } .gd-cpdp-swatchgrid__swatch.is-active .gd-cpdp-swatchgrid__img, .gd-cpdp-swatchgrid__swatch.is-active .gd-cpdp-swatchgrid__fill, .gd-cpdp-swatchgrid__swatch.is-active .gd-cpdp-swatchgrid__fallback-tile { border-color: var(--gd-violet); box-shadow: 0 0 0 2px var(--gd-white), 0 0 0 4px var(--gd-violet); } .gd-cpdp-swatchgrid__label { font-family: var(--gd-font-body); font-size: 11px; font-weight: 500; color: var(--gd-ink-secondary); line-height: 1.2; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-cpdp-swatchgrid__swatch.is-active .gd-cpdp-swatchgrid__label { color: var(--gd-ink); font-weight: 600; } /* View more / fewer toggle — text-link styling matches the rest of the site's underlined secondary affordances. */ .gd-cpdp-swatchgrid-block__toggle { display: inline-block; margin-top: var(--gd-sp-3); padding: 4px 0; background: transparent; border: 0; font-family: var(--gd-font-body); font-size: 13px; font-weight: 500; color: var(--gd-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 200ms ease-out; } .gd-cpdp-swatchgrid-block__toggle:hover { color: var(--gd-violet); } .gd-cpdp-swatchgrid-block__toggle:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 4px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .gd-cpdp-swatchgrid__img, .gd-cpdp-swatchgrid__fill, .gd-cpdp-swatchgrid__fallback-tile, .gd-cpdp-swatchgrid__item { transition: none; animation: none !important; } } .gd-colour-pdp__description p:first-child { margin-top: 0; } /* Variant pill radios */ .gd-colour-pdp__variants { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--gd-sp-3) 0 var(--gd-sp-3); } .gd-colour-pdp__variant { position: relative; cursor: pointer; } .gd-colour-pdp__variant input { position: absolute; opacity: 0; pointer-events: none; } .gd-colour-pdp__variant span { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-pill); font-family: var(--gd-font-body); font-size: 13px; font-weight: 500; color: var(--gd-ink); } .gd-colour-pdp__variant:has(input:checked) span { border-color: var(--gd-ink); background: var(--gd-ink); color: var(--gd-white); } .gd-colour-pdp__variant:has(input:disabled) span { opacity: 0.4; cursor: not-allowed; } /* Primary ATC — violet pill matching site */ /* ATC button consumes the global .gd-button .gd-button--violet .gd-button--full classes so it shares the rest of the site's primary-CTA styling (padding, radius, hover, focus ring). The local class only adds a margin-top for the form gap. Joel 2026-05-02 (Path B colour-pdp refactor). */ .gd-colour-pdp__atc { margin-top: var(--gd-sp-3); } .gd-colour-pdp__dispatch { font-family: var(--gd-font-body); font-size: 13px; color: var(--gd-ink-secondary); text-align: center; margin: 12px 0 0; } .gd-colour-pdp__dispatch-bold { font-weight: 600; color: var(--gd-ink); } /* ── Spec card (Rhode-pattern) ───────────────────────────────────────── Two-column composition: left = headline + label/value pairs in a
, right = lifestyle hero image. Mobile single-col with image on top. Surface is a subtle lilac tint (color-mix on --gd-violet) to slot into the GLAMRDiP palette while differentiating from the rest of the right info column. Replaces the legacy 4-feature flat icon row; the `feature` block schema is retained for backwards compat but no longer rendered (cleanup deferred). */ .gd-colour-pdp__spec-card { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--gd-sp-4); border-radius: var(--gd-radius-md); overflow: hidden; background: color-mix(in srgb, var(--gd-violet) 5%, var(--gd-white)); border: 1px solid color-mix(in srgb, var(--gd-violet) 14%, transparent); } @media (min-width: 750px) { .gd-colour-pdp__spec-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } } .gd-colour-pdp__spec-card-text { display: flex; flex-direction: column; gap: var(--gd-sp-3); padding: var(--gd-sp-4); order: 2; } @media (min-width: 750px) { .gd-colour-pdp__spec-card-text { order: 1; padding: var(--gd-sp-5); justify-content: center; } } .gd-colour-pdp__spec-headline { font-family: var(--gd-font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--gd-ink); margin: 0; } .gd-colour-pdp__spec-list { margin: 0; padding: 0; display: flex; flex-direction: column; } .gd-colour-pdp__spec-row { display: grid; grid-template-columns: minmax(0, 92px) 1fr; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--gd-violet) 18%, transparent); } .gd-colour-pdp__spec-row:first-child { border-top: 0; padding-top: 0; } .gd-colour-pdp__spec-row:last-child { padding-bottom: 0; } .gd-colour-pdp__spec-label { font-family: var(--gd-font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-ink-secondary); margin: 0; } .gd-colour-pdp__spec-value { font-family: var(--gd-font-body); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gd-ink); margin: 0; } .gd-colour-pdp__spec-image { order: 1; position: relative; min-height: 0; } .gd-colour-pdp__spec-image img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } @media (min-width: 750px) { .gd-colour-pdp__spec-image { order: 2; } .gd-colour-pdp__spec-image img { aspect-ratio: auto; min-height: 100%; } } /* Accordion */ .gd-colour-pdp__accordion { margin-top: var(--gd-sp-3); } /* END_SECTION:colour-pdp */ /* START_SECTION:header (INDEX:67) */ /* Sticky on the SHOPIFY-SECTION wrapper — see announcement-bar.liquid for why. */ .shopify-section.gd-section--header { position: sticky; top: var(--gd-announcement-h); z-index: var(--gd-z-header); } /* Mobile (Joel 2026-04-29): announcement bar is only ~44px tall vs the desktop --gd-announcement-h (50px) → 6px gap between the bar and the header when scrolled. Cleanest fix per modern DTC pattern (Rhode/Glossier): unstick the announcement bar on mobile so it scrolls away naturally, header sticks flush at top:0. Saves vertical space + eliminates the gap. Desktop unchanged. */ @media (max-width: 767px) { .shopify-section.gd-section--header { top: 0; } } /* Joel 2026-04-28: scroll-frost. At scroll 0 the header renders solid white with a transparent border. JS adds `.is-scrolled` when scrollY > 40 (gd-header.js, rAF-throttled passive listener) which fades in: rgba bg @ 0.75 + 12px blur + saturate 180% + soft shadow + faint border. Smooth 200ms transition both ways. The .shopify-section.gd-section--header parent owns the sticky positioning — see rule above. */ .gd-header { position: relative; z-index: var(--gd-z-header); background: var(--gd-white); border-bottom: 1px solid transparent; height: 64px; transition: background-color 200ms ease-out, backdrop-filter 200ms ease-out, -webkit-backdrop-filter 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; } .gd-header.is-scrolled { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom-color: var(--gd-border); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04); } /* Backdrop-filter not supported (older Firefox, certain Android chromia) — fall back to a near-opaque white when scrolled so the content behind doesn't bleed through. */ @supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) { .gd-header.is-scrolled { background: rgba(255, 255, 255, 0.96); } } @media (prefers-reduced-motion: reduce) { .gd-header { transition: none; } } /* Joel 2026-04-28: bumped desktop/burger threshold from 990 → 1200. At 990-1199 the centered logo collided with the LIQUIDS / ACCESSORIES / EXPLORE link list (longer link labels overlapped the absolute- positioned logo). The burger drawer is a cleaner affordance through the whole tablet/intermediate range. Below this threshold the mobile drawer renders; above, the full desktop nav. */ .gd-header__desktop, .gd-header__mobile { display: none; align-items: center; height: 100%; } /* Joel 2026-04-28: balanced 3-column grid (1fr auto 1fr) replaces justify-content: space-between. The auto centre column locks the logo to exact viewport horizontal centre regardless of nav widths; the two 1fr nav columns flex equally so left + right groups feel symmetrical. Each nav justify-content hugs the logo (left → end, right → start) so items sit close to the brand mark with the cluster (search/account/cart) flowing to the far right. */ @media (min-width: 1200px) { .gd-header__desktop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 2vw, 32px); } .gd-header__desktop > .gd-header__logo { flex: 0 0 auto; padding-inline: clamp(16px, 2vw, 32px); } } @media (max-width: 1199px) { .gd-header__mobile { display: flex; justify-content: space-between; padding-inline: var(--gd-sp-2); position: relative; } } .gd-header__nav { display: flex; align-items: center; gap: var(--gd-sp-5); min-width: 0; } .gd-header__nav--left { justify-content: flex-end; } .gd-header__nav--right { justify-content: flex-start; } /* Equal gap between items in each nav row (Joel 2026-04-28 rebalance). clamp scales nicely 1024 → 1920. */ .gd-header__list { gap: clamp(16px, 1.8vw, 28px); } /* Actions cluster flows to the far right of the right nav. */ .gd-header__nav--right .gd-header__actions { margin-left: auto; } .gd-header__list { display: flex; align-items: center; gap: var(--gd-sp-4); list-style: none; padding: 0; margin: 0; } .gd-header__link { font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gd-ink); text-decoration: none; background: transparent; border: 0; cursor: pointer; padding: 0; white-space: nowrap; transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-header__link:hover, .gd-header__link:focus-visible, .gd-header__link.is-active { color: var(--gd-violet); } .gd-header__link:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 4px; border-radius: 2px; } .gd-header__link--shop { display: inline-flex; align-items: center; gap: 6px; background: var(--gd-violet); color: var(--gd-white); border-radius: var(--gd-radius-pill); padding: 6px 16px; } .gd-header__link--shop:hover, .gd-header__link--shop[aria-expanded="true"] { background: var(--gd-violet-hover); color: var(--gd-white); } .gd-header__link--shop .gd-header__chevron { transition: transform var(--gd-dur-base) var(--gd-ease-out); } .gd-header__link--shop[aria-expanded="true"] .gd-header__chevron { transform: rotate(180deg); } .gd-header__logo { display: inline-flex; align-items: center; } .gd-header__logo-img { height: 23px; width: auto; display: block; } .gd-header__logo-text { font-size: 18px; font-weight: 500; } .gd-header__actions { display: flex; align-items: center; gap: var(--gd-sp-3); margin-left: var(--gd-sp-3); } .gd-header__icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; color: var(--gd-ink); border: 0; cursor: pointer; border-radius: var(--gd-radius-sm); text-decoration: none; position: relative; transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-header__icon-button:hover, .gd-header__icon-button:focus-visible { color: var(--gd-violet); } .gd-header__icon-button:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 2px; } .gd-header__cart-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; background: var(--gd-violet); color: var(--gd-white); border-radius: var(--gd-radius-pill); font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; } .gd-header__mobile-left, .gd-header__mobile-right { display: flex; align-items: center; gap: 4px; } .gd-header__mobile-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .gd-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--gd-z-mega-menu); background: var(--gd-white); border-bottom: 1px solid var(--gd-border); box-shadow: var(--gd-shadow-md); animation: gd-fade-in var(--gd-dur-base) var(--gd-ease-out); } .gd-mega[hidden] { display: none; } .gd-mega__inner { padding-block: var(--gd-sp-5); } /* 2-column layout: Categories (45%) | Explore cards (55%). Mobile stacks. */ .gd-mega__cols { display: grid; grid-template-columns: 1fr; gap: var(--gd-sp-5); } @media (min-width: 990px) { .gd-mega__cols { grid-template-columns: 45% 1fr; gap: var(--gd-sp-6); } } .gd-mega__col-label { display: block; font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gd-ink-secondary); margin-bottom: var(--gd-sp-3); } /* Categories column — Bolt: 44px round thumb + title/desc + hover-arrow reveal */ .gd-mega__cat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .gd-mega__cat { display: flex; align-items: center; gap: var(--gd-sp-3); padding: 12px; margin-inline: -12px; border-radius: var(--gd-radius-sm); color: var(--gd-ink); text-decoration: none; transition: background var(--gd-dur-base) var(--gd-ease-out); } .gd-mega__cat:hover, .gd-mega__cat:focus-visible { background: var(--gd-surface); } .gd-mega__cat-thumb { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--gd-surface); box-shadow: inset 0 0 0 1px var(--gd-border); display: inline-flex; align-items: center; justify-content: center; color: var(--gd-ink); } .gd-mega__cat-img { width: 100%; height: 100%; object-fit: cover; display: block; } .gd-mega__cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gd-mega__cat-title { font-family: var(--gd-font-body); font-size: 14px; font-weight: 500; color: var(--gd-ink); line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; } .gd-mega__cat:hover .gd-mega__cat-title { color: var(--gd-violet); } .gd-mega__cat-desc { font-family: var(--gd-font-body); font-size: 11px; color: var(--gd-ink-disabled); line-height: 1.35; } .gd-mega__cat-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gd-violet); color: var(--gd-white); padding: 2px 8px; border-radius: var(--gd-radius-pill); } .gd-mega__cat-arrow { flex-shrink: 0; color: var(--gd-ink-disabled); opacity: 0; transform: translateX(-4px); transition: opacity var(--gd-dur-base) var(--gd-ease-out), transform var(--gd-dur-base) var(--gd-ease-out); display: inline-flex; } .gd-mega__cat:hover .gd-mega__cat-arrow, .gd-mega__cat:focus-visible .gd-mega__cat-arrow { opacity: 1; transform: translateX(0); } /* Explore column — Bolt: 3 cards, eyebrow overlaid bottom-left on gradient, title as caption below */ .gd-mega__explore-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gd-sp-4); } .gd-mega__view-all { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gd-ink-secondary); text-decoration: none; transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-mega__view-all:hover { color: var(--gd-violet); } .gd-mega__view-all svg { transition: transform var(--gd-dur-base) var(--gd-ease-out); } .gd-mega__view-all:hover svg { transform: translateX(2px); } .gd-mega__explore-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gd-sp-4); } @media (max-width: 640px) { .gd-mega__explore-cards { grid-template-columns: 1fr; gap: var(--gd-sp-2); } } .gd-mega__explore-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--gd-ink); } .gd-mega__explore-media { position: relative; aspect-ratio: 4 / 5; background: var(--gd-surface); overflow: hidden; border-radius: var(--gd-radius-xs); } .gd-mega__explore-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--gd-ease-out); } .gd-mega__explore-card:hover .gd-mega__explore-img { transform: scale(1.04); } .gd-mega__explore-gradient { position: absolute; inset: auto 0 0 0; height: 96px; background: linear-gradient(to top, rgba(26,24,23,0.4), transparent); pointer-events: none; } .gd-mega__explore-eyebrow { position: absolute; bottom: 12px; left: 12px; font-family: var(--gd-font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-white); } .gd-mega__explore-title { font-family: var(--gd-font-body); font-size: 13px; font-weight: 500; color: var(--gd-ink); transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-mega__explore-card:hover .gd-mega__explore-title { color: var(--gd-violet); } /* Bottom nav row */ .gd-mega__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gd-sp-4); margin-top: var(--gd-sp-5); padding-top: var(--gd-sp-4); border-top: 1px solid var(--gd-border); } .gd-mega__footer-link { font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gd-ink-secondary); text-decoration: none; transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-mega__footer-link:hover { color: var(--gd-ink); } .gd-mobile-drawer { position: fixed; inset: 0; z-index: var(--gd-z-mobile-drawer); } .gd-mobile-drawer[hidden] { display: none; } .gd-mobile-drawer__backdrop { position: absolute; inset: 0; background: rgba(26, 24, 23, 0.3); border: 0; cursor: pointer; animation: gd-fade-in var(--gd-dur-base) var(--gd-ease-out); } /* Joel 2026-04-28: flipped to left-slide. Burger drawer now opens from the LEFT edge (closer to the burger icon, also matches Bolt reference and prevents conflict with the cart drawer which slides from the right). */ .gd-mobile-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); max-width: 420px; background: var(--gd-white); display: flex; flex-direction: column; animation: gd-slide-in-left var(--gd-dur-slow) var(--gd-ease-out); } @keyframes gd-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } .gd-mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--gd-sp-2) var(--gd-sp-3); border-bottom: 1px solid var(--gd-border); height: 64px; } .gd-mobile-drawer__nav { flex: 1; overflow-y: auto; padding: var(--gd-sp-3); } .gd-mobile-drawer__list { list-style: none; padding: 0; margin: 0; } .gd-mobile-drawer__link { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border: 0; border-bottom: 1px solid var(--gd-border); font-family: var(--gd-font-body); font-size: 15px; font-weight: 500; color: var(--gd-ink); text-decoration: none; background: transparent; width: 100%; cursor: pointer; } .gd-mobile-drawer__details > summary { list-style: none; } .gd-mobile-drawer__details > summary::-webkit-details-marker { display: none; } .gd-mobile-drawer__details[open] .gd-mobile-drawer__chevron { transform: rotate(180deg); } .gd-mobile-drawer__chevron { transition: transform var(--gd-dur-base) var(--gd-ease-out); color: var(--gd-ink-disabled); } .gd-mobile-drawer__sublist { list-style: none; padding: var(--gd-sp-2) 0; margin: 0; } .gd-mobile-drawer__sublink { display: flex; align-items: center; gap: 12px; padding: 10px 4px; font-size: 14px; color: var(--gd-ink-secondary); text-decoration: none; } .gd-mobile-drawer__sublink span { flex: 1; } .gd-mobile-drawer__subimage { width: 36px; height: 36px; border-radius: 100px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--gd-border); } .gd-mobile-drawer__arrow { color: var(--gd-ink-disabled); } .gd-mobile-drawer__cta { padding: var(--gd-sp-3); border-top: 1px solid var(--gd-border); } /* ── Mobile drawer body — category cards (top) + info list (bottom) ──── */ .gd-mobile-drawer__body { flex: 1; overflow-y: auto; padding: var(--gd-sp-3); display: flex; flex-direction: column; gap: var(--gd-sp-4); } /* Category cards: cream off-white surface with thin border, title + image + chevron in a 3-col grid. Joel 2026-04-29 refine — out goes the violet-tinted background and overflow image; in comes a calm sibling pattern that visually rhymes with the Explore card grid below (same border-radius, same restraint). Tap reveals violet as accent: border-color flips to brand, bg flips to white. */ .gd-mobile-drawer__cards { display: flex; flex-direction: column; gap: 8px; } .gd-mobile-drawer__card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 16px 20px; min-height: 72px; background: #FCFCFC; border: 1px solid var(--gd-border, #EBEBEA); border-radius: 12px; text-decoration: none; color: var(--gd-ink); transition: border-color var(--gd-dur-base) var(--gd-ease-out), background var(--gd-dur-base) var(--gd-ease-out); } .gd-mobile-drawer__card:hover, .gd-mobile-drawer__card:active { border-color: var(--gd-violet); background: var(--gd-white); } .gd-mobile-drawer__card:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 2px; } .gd-mobile-drawer__card-title { font-family: var(--gd-font-display, var(--gd-font-body)); font-size: clamp(18px, 5vw, 22px); font-weight: 500; color: var(--gd-ink); letter-spacing: -0.01em; line-height: 1.1; min-width: 0; } .gd-mobile-drawer__card-img { flex-shrink: 0; width: 64px; height: 64px; object-fit: contain; pointer-events: none; } .gd-mobile-drawer__card-img--placeholder { display: inline-block; background: var(--gd-surface); border-radius: 10px; } .gd-mobile-drawer__card-chevron { flex-shrink: 0; color: var(--gd-ink-secondary); transition: color var(--gd-dur-base) var(--gd-ease-out), transform var(--gd-dur-base) var(--gd-ease-out); } .gd-mobile-drawer__card:hover .gd-mobile-drawer__card-chevron, .gd-mobile-drawer__card:active .gd-mobile-drawer__card-chevron { color: var(--gd-violet); transform: translateX(2px); } /* Explore section — 2-col card grid that visually echoes the top category cards (sibling pattern, smaller treatment for secondary nav). Tinted surface bg per card, white-pill icon in --gd-violet, title (14px/600) + subtitle (11px/secondary). Joel 2026-04-28 replaced the chevron-list info_link pattern with this richer mobile_info_card grid. */ .gd-mobile-drawer__explore { margin-top: var(--gd-sp-2); padding-top: var(--gd-sp-3); border-top: 1px solid var(--gd-border); } .gd-mobile-drawer__explore-header { font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--gd-ink-secondary); margin: 0 0 12px; padding: 0 4px; } .gd-mobile-drawer__explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gd-mobile-drawer__info-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px 12px; background: var(--gd-surface); border-radius: 12px; text-decoration: none; color: var(--gd-ink); transition: background var(--gd-dur-base) var(--gd-ease-out), transform var(--gd-dur-base) var(--gd-ease-out); } .gd-mobile-drawer__info-card:hover, .gd-mobile-drawer__info-card:active { background: var(--gd-violet-subtle, rgba(91, 45, 142, 0.10)); transform: translateY(-1px); } .gd-mobile-drawer__info-card-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--gd-white); display: inline-flex; align-items: center; justify-content: center; color: var(--gd-violet); } .gd-mobile-drawer__info-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gd-mobile-drawer__info-card-title { font-family: var(--gd-font-body); font-size: 14px; font-weight: 600; color: var(--gd-ink); line-height: 1.2; } .gd-mobile-drawer__info-card-subtitle { font-family: var(--gd-font-body); font-size: 11px; color: var(--gd-ink-secondary); line-height: 1.3; } /* Legacy info-link list — kept as fallback for unmigrated configs. */ .gd-mobile-drawer__info-section { margin-top: var(--gd-sp-2); border-top: 1px solid var(--gd-border); padding-top: var(--gd-sp-2); } .gd-mobile-drawer__info-header { font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gd-ink-secondary); padding: 8px 4px; margin: 0; } .gd-mobile-drawer__info-list { list-style: none; margin: 0; padding: 0; } .gd-mobile-drawer__info-link { display: flex; align-items: center; gap: 14px; padding: 16px 4px; min-height: 56px; border-bottom: 1px solid var(--gd-border); text-decoration: none; color: var(--gd-ink); font-family: var(--gd-font-body); font-size: 15px; } .gd-mobile-drawer__info-list li:last-child .gd-mobile-drawer__info-link { border-bottom: 0; } .gd-mobile-drawer__info-link:hover, .gd-mobile-drawer__info-link:active { color: var(--gd-violet); background: var(--gd-surface); } .gd-mobile-drawer__info-link-label { flex: 1; min-width: 0; } .gd-mobile-drawer__info-link-chevron { flex-shrink: 0; color: var(--gd-ink-secondary); transition: transform var(--gd-dur-base) var(--gd-ease-out); } .gd-mobile-drawer__info-link:hover .gd-mobile-drawer__info-link-chevron { transform: translateX(2px); } /* Social row — pinned to bottom via margin-top: auto on the parent flex-column body. Brand-neutral monochrome icons, hover→violet pill. Joel 2026-04-28: dropped emoji approach in favour of inline SVGs. */ .gd-mobile-drawer__social { margin-top: auto; padding: var(--gd-sp-3) 4px var(--gd-sp-2); border-top: 1px solid var(--gd-border); } .gd-mobile-drawer__social-label { font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gd-ink-secondary); margin: 0 0 var(--gd-sp-2); padding: 0 4px; } .gd-mobile-drawer__social-list { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } .gd-mobile-drawer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gd-surface); color: var(--gd-ink); text-decoration: none; transition: background var(--gd-dur-base) var(--gd-ease-out), color var(--gd-dur-base) var(--gd-ease-out), transform var(--gd-dur-base) var(--gd-ease-out); } .gd-mobile-drawer__social-link:hover, .gd-mobile-drawer__social-link:active { background: var(--gd-violet); color: var(--gd-white); transform: translateY(-1px); } .gd-mobile-drawer__social-link:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 2px; } /* Kits megamenu retired (Joel 2026-04-29). The Kits link in the primary menu is now a plain to the Salon Perfect Kit PDP — no dropdown, no hover panel, no megamenu infrastructure. */ /* END_SECTION:header */ /* START_SECTION:home-hero (INDEX:68) */ /* ========== Bolt-faithful home hero ========== */ .gd-hero { position: relative; overflow: hidden; background: var(--gd-white); } .gd-hero__desktop, .gd-hero__mobile { display: none; } /* Joel 2026-04-29: desktop hero retuned. First pass cut 25% off (600 → 450 floor; ceiling × 0.75) which read too short. Adding 10% back from THAT state — net -17.5% vs original. 450 × 1.10 = 495px floor. 0.75 × 1.10 = 0.825 ceiling multiplier. Mobile rule below is untouched. Joel 2026-04-29 (later): asymmetric centred — narrower image column to do the zoom-out work without touching the image's own properties. • Grid ratio shifted from 5/7 to 5/6: the right column is proportionally narrower at every width, so cover-fitting the same image into a smaller box reads as less aggressive crop. The left column gets slightly more relative width, which keeps the heading/copy/CTAs/trust strip on their original line counts (no squeeze regression). 2026-04-30: padding-inline-end removed. The right gutter it introduced created visible whitespace between the image and the viewport's right edge. With padding-end:0 the image column bleeds back to the viewport right while the 5/6 ratio still keeps it narrower than the original 5/7. */ @media (min-width: 990px) { .gd-hero__desktop { display: grid; grid-template-columns: 5fr 6fr; min-height: 495px; max-height: calc((100vh - 160px) * 0.825); } } @media (max-width: 989px) { .gd-hero__mobile { display: block; } } .gd-hero__text-col { display: flex; align-items: flex-start; padding-top: var(--gd-sp-9); padding-inline: var(--gd-sp-6); } @media (min-width: 1280px) { .gd-hero__text-col { padding-inline: var(--gd-sp-7); } } .gd-hero__text-inner { max-width: 520px; margin-inline: auto; width: 100%; margin-top: 5%; } .gd-hero__eyebrow { display: block; font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gd-ink-secondary); margin-bottom: var(--gd-sp-3); } .gd-hero__heading { font-family: var(--gd-font-display); font-size: clamp(42px, 3.8vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--gd-ink); margin: 0; } /* Richtext heading default wraps content in

which contributes a ~1em top margin (browser default + Dawn base.css). That margin collapses through the

when the h1 has no border/padding, pushing the visible heading box down by ~40px. Joel 2026-04-28: zero out inner

margins so the body padding-top is the only gap above the heading.
is also normalised. */ .gd-hero__heading > p, .gd-hero__heading > p:first-child, .gd-hero__heading > p:last-child { margin: 0; } .gd-hero__heading--mobile { font-size: clamp(40px, 10vw, 52px); } .gd-hero__subheading { font-family: var(--gd-font-body); font-size: clamp(17px, 1.8vw, 20px); font-weight: 300; line-height: 1.65; color: var(--gd-ink-secondary); margin: var(--gd-sp-3) 0 0; max-width: 420px; } .gd-hero__subheading > p { margin: 0; } .gd-hero__subheading > p + p { margin-top: 8px; } .gd-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gd-sp-3); margin-top: var(--gd-sp-5); } .gd-hero__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gd-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-radius: var(--gd-radius-pill); padding: 16px 40px; transition: background-color var(--gd-dur-base) var(--gd-ease-out), border-color var(--gd-dur-base) var(--gd-ease-out), transform var(--gd-dur-base) var(--gd-ease-out), color var(--gd-dur-base) var(--gd-ease-out); } .gd-hero__cta--primary { background: var(--gd-violet); color: var(--gd-white); border: 1px solid var(--gd-violet); } .gd-hero__cta--primary:hover { background: var(--gd-violet-hover); border-color: var(--gd-violet-hover); transform: translateY(-1px); } .gd-hero__cta--secondary { color: var(--gd-ink); border: 1px solid var(--gd-border); padding-block: 15px; } .gd-hero__cta--secondary:hover { border-color: var(--gd-ink); background: var(--gd-surface); } .gd-hero__divider { display: block; width: 100%; height: 1px; background: var(--gd-border); margin-top: var(--gd-sp-7); } .gd-hero__trust { list-style: none; padding: 0; margin: var(--gd-sp-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--gd-sp-4); } .gd-hero__trust--mobile { display: flex; flex-wrap: nowrap; /* never break to a second row — narrow widths shrink type instead (below) */ justify-content: center; gap: var(--gd-sp-3); /* Joel 2026-04-28: drop bottom padding so the trust→heading gap is owned entirely by .gd-hero__mobile-body's padding-top. Otherwise the trust strip's 8px bottom + body's 20px top stacked to 28px, making the top whitespace heavier than the body's own bottom. */ padding: var(--gd-sp-3) var(--gd-sp-2) 0; margin: 0; background: transparent; } .gd-hero__trust-item { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .gd-hero__trust-icon { display: inline-flex; color: var(--gd-ink-secondary); flex-shrink: 0; } .gd-hero__trust-label { font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gd-ink-secondary); } @media (max-width: 989px) { .gd-hero__trust--mobile .gd-hero__trust-label { font-size: 10px; } } /* Narrow phones (iPhone SE / 320-374): shrink type + gaps so all 3 badges stay on one line. Badges flex-wrap nowrap, white-space nowrap, icons flex-shrink 0 — no wrap, no clip. */ @media (max-width: 374px) { .gd-hero__trust--mobile { gap: 10px; padding-inline: 6px; } .gd-hero__trust--mobile .gd-hero__trust-item { gap: 5px; } .gd-hero__trust--mobile .gd-hero__trust-label { font-size: 9px; letter-spacing: 0.04em; } .gd-hero__trust--mobile .gd-hero__trust-icon svg { width: 11px; height: 11px; } } .gd-hero__image-col { position: relative; overflow: hidden; } .gd-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; } /* Joel 2026-05-02: optional click-through wrapper. When section.settings.image_link is set the image is wrapped in so the entire hero media is clickable. The wrapper fills its parent so the click target matches the image bounds — both the desktop split column and the mobile rounded card. inherit border-radius so the focus ring + corner radius match the mobile card treatment. */ .gd-hero__image-link { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; } .gd-hero__image-link:focus-visible { outline: 3px solid var(--gd-violet); outline-offset: 2px; } /* Joel 2026-04-29 (revert + retry): the transform: scale(0.9) approach introduced gaps around the image (right edge no longer bled, top not pinned). Layout structure restored to full column fill / right bleed. The actual ask — slightly less aggressive crop so the model's hairline stays visible — now handled via object-position only, which keeps the image filling the column 100% but shifts which part of the natural image gets shown (no scale, no gaps). 2nd retry: 25% wasn't aggressive enough — hairline still clipped. Pushing to `center top` (50% 0%) so the image's top edge aligns with the container top edge. All cover-overflow now sits at the bottom (model's chest / box bottom loses pixels), and the entire hairline + crown stay in frame. Mobile keeps its own object-position: top override below. */ @media (min-width: 990px) { .gd-hero__image-col .gd-hero__image { object-position: center top; } } /* ── Mobile hero (Joel 2026-04-28) ─────────────────────────────────── User retained one piece of the Rhode-style paste: rounded corners on the hero media + 8/12 white inset margin so the image reads as a card, not full-bleed. Everything else (text-on-image overlay, gradient, transparent nav, hidden subheading + secondary CTA) was reverted because the overlay made the layout worse. Heading + subheading + both CTAs sit in normal flow below the image. */ .gd-hero__mobile { padding: 8px 12px; } .gd-hero__mobile-image { position: relative; aspect-ratio: 3 / 4; max-height: 85vh; border-radius: 20px; overflow: hidden; background: var(--gd-surface); } .gd-hero__mobile-image .gd-hero__image { object-position: top; border-radius: inherit; } /* Mobile body — eyebrow + heading + subheading + CTAs below the card. Joel 2026-04-28: top + bottom padding pinned to the same clamp so the whitespace above the eyebrow matches the whitespace under the CTAs (visual rhythm); horizontal pad clamps tighter (16→24) since the body sits inside the same 12px-margined section as the card. */ .gd-hero__mobile-body { padding: clamp(20px, 5vw, 32px) clamp(16px, 5vw, 24px); } .gd-hero__mobile-body .gd-hero__eyebrow { margin-bottom: var(--gd-sp-2); } .gd-hero__mobile-body .gd-hero__heading--mobile { margin-top: 0; } .gd-hero__mobile-body .gd-hero__subheading { margin-top: var(--gd-sp-2); font-size: clamp(15px, 4vw, 17px); max-width: 56ch; } .gd-hero__mobile-body .gd-hero__ctas { margin-top: var(--gd-sp-4); gap: var(--gd-sp-2); flex-direction: column; align-items: stretch; } .gd-hero__mobile-body .gd-hero__cta { width: 100%; justify-content: center; } @media (min-width: 480px) { .gd-hero__mobile-body .gd-hero__ctas { flex-direction: row; align-items: center; } .gd-hero__mobile-body .gd-hero__cta { width: auto; } } /* Mount-in animation. Joel 2026-05-04: timings tightened to fix the perceived "page-load flash" — original Bolt-faithful 350-900ms stagger delays left the LCP region (hero heading) blank for ~1s after first paint, looking like a flash to users. New timing keeps the staggered rise but compresses to <500ms total reveal so the above-fold text is visible faster. Eyebrow now fires at 0ms (no blank-text moment); each subsequent element offsets by ~80ms. */ [data-gd-hero-eyebrow], [data-gd-hero-heading], [data-gd-hero-sub], [data-gd-hero-ctas], [data-gd-hero-trust] { opacity: 0; animation: gd-hero-rise 350ms cubic-bezier(0.16,1,0.3,1) forwards; } [data-gd-hero-eyebrow] { animation-delay: 0ms; } [data-gd-hero-heading] { animation-delay: 80ms; animation-duration: 400ms; } [data-gd-hero-sub] { animation-delay: 160ms; } [data-gd-hero-ctas] { animation-delay: 240ms; } [data-gd-hero-trust] { animation-delay: 320ms; } @keyframes gd-hero-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Honour reduced-motion — no animation, full opacity from first paint. */ @media (prefers-reduced-motion: reduce) { [data-gd-hero-eyebrow], [data-gd-hero-heading], [data-gd-hero-sub], [data-gd-hero-ctas], [data-gd-hero-trust] { opacity: 1; animation: none; transform: none; } } /* END_SECTION:home-hero */ /* START_SECTION:instant-gel-pdp (INDEX:76) */ .gd-igpdp { padding-block: var(--gd-sp-3) var(--gd-sp-5); } @media (min-width: 990px) { .gd-igpdp { padding-block: var(--gd-sp-4) var(--gd-sp-7); } } .gd-igpdp__pageheader { display: flex; align-items: center; margin-bottom: var(--gd-sp-3); } @media (min-width: 990px) { .gd-igpdp__pageheader { margin-bottom: var(--gd-sp-4); } } .gd-igpdp__back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-ink-secondary); text-decoration: none; padding: 6px 0; transition: color var(--gd-dur-base) var(--gd-ease-out); } .gd-igpdp__back:hover { color: var(--gd-ink); } .gd-igpdp__back:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 4px; border-radius: 2px; } .gd-igpdp__back svg { flex-shrink: 0; transition: transform var(--gd-dur-base) var(--gd-ease-out); } .gd-igpdp__back:hover svg { transform: translateX(-2px); } .gd-igpdp__grid { display: grid; grid-template-columns: 1fr; gap: var(--gd-sp-4); align-items: start; } @media (min-width: 990px) { .gd-igpdp__grid { grid-template-columns: 1fr 1fr; gap: var(--gd-sp-7); } } /* [C1 — Joel 2026-07-19] Grid columns must be able to shrink below their content so the Included-in-Kit track (overflow-x:auto) scrolls INSIDE the rail instead of forcing the column — and the page — wide at 5+ cards. min-width:0 defeats the grid item's auto min-size. */ .gd-igpdp__grid > * { min-width: 0; } .gd-igpdp__included { min-width: 0; } /* ── Gallery (Layout A: 2-col grows rows; sticky desktop; swipe mobile) ── */ .gd-igpdp__gallery-col { position: relative; } .gd-igpdp__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } /* 5-image: 5th tile spans full width so the row fills (no gap) */ .gd-igpdp__gallery[data-count="5"] .gd-igpdp__cell:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 2 / 1; } @media (min-width: 990px) { .gd-igpdp__gallery-col { position: sticky; top: calc(var(--gd-sticky-stack-h, 100px) + var(--gd-promo-h, 32px) + 24px); align-self: start; } } @media (max-width: 989px) { .gd-igpdp__gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gd-sp-3) * -1); padding-inline: var(--gd-sp-3); } .gd-igpdp__gallery::-webkit-scrollbar { display: none; } .gd-igpdp__cell { flex: 0 0 82%; scroll-snap-align: center; } .gd-igpdp__gallery[data-count="5"] .gd-igpdp__cell:nth-child(5) { grid-column: auto; aspect-ratio: 1 / 1; } } .gd-igpdp__cell { position: relative; aspect-ratio: 1 / 1; background: var(--gd-surface); border-radius: var(--gd-radius-xs); overflow: hidden; display: flex; align-items: center; justify-content: center; } .gd-igpdp__cell-trigger { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; } .gd-igpdp__cell-trigger:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: -2px; box-shadow: none; } .gd-igpdp__cell-img { width: 100%; height: 100%; object-fit: cover; display: block; } video.gd-igpdp__cell-img { background: var(--gd-surface); } video.gd-igpdp__cell-img::-webkit-media-controls, video.gd-igpdp__cell-img::-webkit-media-controls-enclosure, video.gd-igpdp__cell-img::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; } .gd-igpdp__external-video { width: 100%; height: 100%; } .gd-igpdp__external-video iframe { width: 100%; height: 100%; border: 0; display: block; } /* ── Info rail ── */ /* Kit-matched header (Joel 2026-07-17): title-left, price block top-right (gd-kit-hero__header idiom); rating (stars + review link) under the title. */ .gd-igpdp__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .gd-igpdp__header-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .gd-igpdp__eyebrow { font-family: var(--gd-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gd-ink-secondary); margin: 0; } .gd-igpdp__title { font-family: var(--gd-font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--gd-ink); margin: 2px 0 0; } /* deviation: title clamp 28–40 matches the live colour-pdp title, not the generic h1 token */ .gd-igpdp__rating-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .gd-igpdp__review-count { font-family: var(--gd-font-body); font-size: 14px; color: inherit; } /* Review link — kit reviews-link idiom (violet, underlined). */ .gd-igpdp__reviews-link { font-family: var(--gd-font-body); font-size: 14px; font-weight: 500; color: var(--gd-violet); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .gd-igpdp__reviews-link:hover { color: var(--gd-violet-hover); } /* Fix 1d (Joel 2026-07-18): empty review count → hide the ENTIRE stars row (stars + link), not just the link — same gate idiom as the bestseller pill. The Junip bridge toggles the count span's [hidden]; :has() on the ROW collapses stars+link at 0 reviews, and re-shows the whole row once live data populates a count. No fabricated/empty social proof ships. */ .gd-igpdp__rating-row:has([data-junip-count][hidden]) { display: none; } /* Price block — top-right (kit price idiom). padding-top drops the price to align with the TITLE (not the eyebrow). compare-at + save render only if set. */ .gd-igpdp__pricing { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; padding-top: 14px; } @media (min-width: 990px) { .gd-igpdp__pricing { padding-top: 20px; } } .gd-igpdp__price-row { display: flex; align-items: baseline; gap: 8px; } .gd-igpdp__price-now { font-family: var(--gd-font-body); font-size: 28px; font-weight: 600; color: var(--gd-violet); line-height: 1; } @media (min-width: 990px) { .gd-igpdp__price-now { font-size: 32px; } } .gd-igpdp__price-was { font-family: var(--gd-font-body); font-size: 17px; font-weight: 400; color: var(--gd-ink-disabled); text-decoration: line-through; } .gd-igpdp__save { font-family: var(--gd-font-body); font-size: 13px; font-weight: 600; color: var(--gd-ink); } /* Value-props — kit SLIM ICON ROW idiom (gd-kit-hero__chips): hairline above + below, icon-left + ink-secondary text (2-line label allowed); 4-across on desktop, stacked on mobile. Replaces the earlier boxy 2×2 cards. */ .gd-igpdp__vps { list-style: none; margin: var(--gd-sp-2) 0 0; padding: 14px 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--gd-border); border-bottom: 1px solid var(--gd-border); } @media (min-width: 990px) { .gd-igpdp__vps { flex-direction: row; gap: 20px; align-items: center; } } .gd-igpdp__vp { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--gd-ink-secondary); } @media (min-width: 990px) { .gd-igpdp__vp { flex: 1 1 0; } } .gd-igpdp__vp-icon { color: var(--gd-ink-secondary); flex-shrink: 0; display: inline-flex; } .gd-igpdp__vp-text { font-family: var(--gd-font-body); font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--gd-ink-secondary); } .gd-igpdp__description { font-family: var(--gd-font-body); font-size: 15px; line-height: 1.75; color: var(--gd-ink-secondary); margin-top: var(--gd-sp-2); max-width: var(--gd-max-prose); } .gd-igpdp__description p:first-child { margin-top: 0; } /* The Details — colour-pdp spec-card idiom (violet-tinted, label/value) */ .gd-igpdp__details { margin-top: var(--gd-sp-2); border-radius: var(--gd-radius-md); background: color-mix(in srgb, var(--gd-violet) 5%, var(--gd-white)); border: 1px solid color-mix(in srgb, var(--gd-violet) 14%, transparent); padding: var(--gd-sp-4); } .gd-igpdp__details-head { font-family: var(--gd-font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--gd-ink); margin: 0 0 var(--gd-sp-2); } .gd-igpdp__details-list { margin: 0; padding: 0; display: flex; flex-direction: column; } .gd-igpdp__details-row { display: grid; grid-template-columns: minmax(0, 96px) 1fr; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--gd-violet) 18%, transparent); } .gd-igpdp__details-row:first-child { border-top: 0; padding-top: 0; } .gd-igpdp__details-row:last-child { padding-bottom: 0; } .gd-igpdp__details-k { font-family: var(--gd-font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-ink-secondary); margin: 0; } .gd-igpdp__details-v { font-family: var(--gd-font-body); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gd-ink); margin: 0; } /* Story icons row — sits directly below the price (high in the rail), no heading, so no divider border; just breathing room above/below. */ .gd-igpdp__stories { margin-top: var(--gd-sp-2); } /* Variant pills (rare on gels; present for parity) */ .gd-igpdp__variants { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--gd-sp-3) 0 0; } .gd-igpdp__variant { position: relative; cursor: pointer; } .gd-igpdp__variant input { position: absolute; opacity: 0; pointer-events: none; } .gd-igpdp__variant span { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-pill); font-family: var(--gd-font-body); font-size: 13px; font-weight: 500; color: var(--gd-ink); } .gd-igpdp__variant:has(input:checked) span { border-color: var(--gd-ink); background: var(--gd-ink); color: var(--gd-white); } .gd-igpdp__variant:has(input:disabled) span { opacity: 0.4; cursor: not-allowed; } /* ATC + kit upsell */ .gd-igpdp__atc { margin-top: var(--gd-sp-2); } /* Joel 2026-07-17: matches The Details panel's minimalist grey style — same fill/border/radius (dropped violet-subtle). Eyebrow ink-secondary caps like the Details row labels; arrow kept. */ .gd-igpdp__set-card { margin-top: var(--gd-sp-2); display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--gd-radius-md); background: color-mix(in srgb, var(--gd-violet) 5%, var(--gd-white)); border: 1px solid color-mix(in srgb, var(--gd-violet) 14%, transparent); text-decoration: none; transition: background var(--gd-dur-base) var(--gd-ease-out); } .gd-igpdp__set-card:hover { background: color-mix(in srgb, var(--gd-violet) 9%, var(--gd-white)); } .gd-igpdp__set-card:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: 2px; } .gd-igpdp__set-stack { display: flex; flex-shrink: 0; } .gd-igpdp__set-chip { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gd-white); margin-left: -12px; box-shadow: var(--gd-shadow-sm); } .gd-igpdp__set-chip:first-child { margin-left: 0; } .gd-igpdp__set-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gd-igpdp__set-eyebrow { font-family: var(--gd-font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gd-ink-secondary); } .gd-igpdp__set-title { font-family: var(--gd-font-body); font-size: 14px; font-weight: 600; color: var(--gd-ink); } .gd-igpdp__set-sub { font-family: var(--gd-font-body); font-size: 12px; color: var(--gd-ink-secondary); } .gd-igpdp__set-arrow { color: var(--gd-violet); flex-shrink: 0; display: inline-flex; } /* Benefit rows */ .gd-igpdp__benefits { list-style: none; margin: var(--gd-sp-2) 0 0; padding: 14px 0 0; border-top: 1px solid var(--gd-border); display: flex; flex-direction: column; gap: 10px; } .gd-igpdp__benefit { display: flex; align-items: center; gap: 12px; font-family: var(--gd-font-body); font-size: 13px; color: var(--gd-ink); line-height: 1.4; } .gd-igpdp__benefit-icon { color: var(--gd-violet); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Item 7a — Included in Kit (in the rail, below the builder card + details; fix 1b) ── */ .gd-igpdp__included { margin-top: var(--gd-sp-4); padding-top: var(--gd-sp-4); border-top: 1px solid var(--gd-border); } .gd-igpdp__included-head { font-family: var(--gd-font-body); font-size: 16px; font-weight: 600; color: var(--gd-ink); margin: 0 0 12px; } .gd-igpdp__included-track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 8px; } .gd-igpdp__included-track::-webkit-scrollbar { display: none; } /* Rail is ~half-width on desktop: cards fill it (one per row on narrow rails, scroll if many). */ .gd-igpdp__included-card { width: 72%; max-width: 280px; scroll-snap-align: start; } @media (min-width: 768px) { .gd-igpdp__included-card { width: 240px; } } .gd-igpdp__included-acc { margin-top: var(--gd-sp-4); border-top: 1px solid var(--gd-border); } /* END_SECTION:instant-gel-pdp */ /* START_SECTION:kit-hero-v2 (INDEX:82) */ /* overflow-x: clip on the outer (not hidden) — clip doesn't establish a scroll container, preserving position: sticky on descendants. min-width:0 guards against grid-track intrinsic-content blowouts when descendants have fixed/min widths (audit issue #1). */ /* Section padding-top sp-3 (24px) matches Bolt SalonKitPage `pt-sp-3` — gives clear breathing room (~24px) between the sticky promo bar ("$35 OFF + UP TO 3 FREE COLOURS") and the eyebrow/title. Earlier mobile-audit override to 8px (commit 44bca7d) was reverted on 2026-04-27 — Joel: 8px reads cramped. */ .gd-kit-hero { padding-top: var(--gd-sp-3); padding-bottom: var(--gd-sp-5); min-width: 0; overflow-x: clip; } @media (min-width: 990px) { .gd-kit-hero { padding-block: var(--gd-sp-7); } } .gd-kit-hero__container { max-width: var(--gd-max-grid); width: 100%; margin-inline: auto; padding-inline: var(--gd-sp-3); overflow-x: clip; } @media (min-width: 1280px) { .gd-kit-hero__container { max-width: 1520px; padding-inline: var(--gd-sp-6); overflow-x: visible; } } /* Mobile DOM order matches Bolt (info-top → gallery → info-bottom). Desktop ≥990px: 2-col grid with grid-template-areas places gallery LEFT (sticky, spans both rows) and info-top + info-bottom in column 2 of rows 1 and 2 — so info-top sits at the same vertical position as the top of gallery, which is the canonical Bolt SalonKitInfo desktop layout. Mobile row-gap = 16px matches Bolt's mobile body root `gap-4` between SalonKitInfo's major blocks (header / gallery / stories / chips). */ .gd-kit-hero__grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "info-top" "gallery" "info-bottom"; row-gap: var(--gd-sp-2); align-items: start; } .gd-kit-hero__grid > * { min-width: 0; } .gd-kit-hero__info-top { grid-area: info-top; } .gd-kit-hero__gallery { grid-area: gallery; } .gd-kit-hero__info-bottom { grid-area: info-bottom; } @media (min-width: 990px) { .gd-kit-hero__grid { grid-template-columns: 7fr 5fr; grid-template-areas: "gallery info-top" "gallery info-bottom"; column-gap: var(--gd-sp-7); row-gap: var(--gd-sp-4); } } /* Gallery layout ────────────── Mobile <990px : flex column with natural DOM order: main carousel (peek pattern, 88vw + 12vw peek) → trust bar → small thumb rail → story circles. Spec from Joel's reference image. Desktop ≥990px: 2-col grid (88px thumb rail | 1fr main + trust). Stories duplicate hidden; info column renders desktop copy. */ /* Joel 2026-04-29: gallery row-gap dropped to 0 so the trust bar ("Salon Quality Nails or 100% Money Back Guarantee") sits flush against the main image bottom — was an 8px (mobile) / 24px (desktop) gap, which read as two stacked sections instead of an image with a caption strip. Border-top on the bar is the divider. */ .gd-kit-hero__gallery { display: flex; flex-direction: column; width: 100%; max-width: 100%; gap: 0; } @media (min-width: 990px) { .gd-kit-hero__gallery { /* Sticky offset = announcement-bar + header + promo-bar + 24px breathing. Joel 2026-04-29: previously locked flush against the promo bar's bottom edge (calc + 16px ignored the promo bar's ~32px height). Now stacks announcement + header + promo, then adds 24px white gap so the gallery breathes away from the bar. Matches colour/liquid/accessory PDPs. */ position: sticky; top: calc(var(--gd-sticky-stack-h, 100px) + var(--gd-promo-h, 32px) + 24px); align-self: start; display: grid; grid-template-columns: 88px 1fr; grid-template-areas: "thumbs main" "thumbs guar"; column-gap: var(--gd-sp-3); row-gap: 0; align-items: flex-start; } .gd-kit-hero__thumbs-wrap { grid-area: thumbs; } .gd-kit-hero__main-wrap { grid-area: main; } .gd-kit-hero__guarantee { grid-area: guar; } .gd-kit-hero__stories-mobile { display: none; } } .gd-kit-hero__main-wrap { display: flex; flex-direction: column; gap: 0; min-width: 0; width: 100%; } /* Main carousel — Bolt-verbatim mobile peek pattern (per Joel 2026-04-27 ref: _reference/bolt-source/src/components/ProductImageGallery.tsx mobileCompact branch). carousel: padding-inline sp-3 + margin-inline -sp-3 (viewport-edge) slide: flex 0 0 calc(85% - 4px), gap 6px (gap-1.5) snap-x snap-mandatory + scroll-snap-align: start At 390 viewport (sp-3 = 24px): carousel content-area = 342, slide-width = 0.85*342 - 4 = 286.7 slide[0] visual = [24, 310.7] slide[1] visual = [316.7, 603.4] peek of slide[1] = 73.3px ≈ 18.8vw Peek lives inside the carousel's padding-box (clip at padding-box edge, 0 to viewport-width), so parent .gd-kit-hero__container's overflow-x setting doesn't matter for peek visibility — only carousel's own overflow does. */ .gd-kit-hero__carousel { display: flex; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; margin-inline: calc(-1 * var(--gd-sp-3)); padding-inline: var(--gd-sp-3); /* No explicit width — rely on flex-stretch in the column-flex parent so the negative margin-inline: -sp-3 expands the carousel's border-box to parent.content-width + 48px (= viewport-edge to viewport-edge at mobile). Bolt's mobileCompact carousel uses the same pattern. With box-sizing: border-box (Shopify default) + an explicit width: 100% the stretch is suppressed and the carousel stays at parent.content-width — peek then gets clipped at the inner-content edge instead of viewport edge. */ } .gd-kit-hero__carousel::-webkit-scrollbar { display: none; } .gd-kit-hero__slide { flex: 0 0 calc(85% - 4px); aspect-ratio: 1 / 1; scroll-snap-align: start; overflow: hidden; background: var(--gd-surface); position: relative; } .gd-kit-hero__slide-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Joel 2026-04-29: video product-media renders inline as an autoplay loop. Hide native UA controls (we don't want a play button — that's the entire point of GIF-style preview). object-fit: cover matches the image-slide aesthetic so swapping images ↔ videos doesn't reflow. */ video.gd-kit-hero__slide-img, .gd-pdp-video { background: var(--gd-surface); } .gd-pdp-video::-webkit-media-controls, .gd-pdp-video::-webkit-media-controls-enclosure, .gd-pdp-video::-webkit-media-controls-panel { display: none !important; } .gd-kit-hero__external-video iframe { width: 100%; height: 100%; border: 0; display: block; } /* Slide button — wraps the slide image, lifts to fullscreen lightbox on click. Pure passthrough on visual: no padding, no border, no background — looks identical to the prior bare render. */ .gd-kit-hero__slide-btn { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; } /* Joel 2026-04-29: explicit outline + box-shadow:none on plain :focus so post-click focus doesn't leave the heavy Dawn double-ring (defined globally as *:focus-visible in base.css). :focus-visible keeps the scoped violet outline for keyboard nav — a11y preserved. */ /* No :focus override here — the global `:focus:not(:focus-visible) { outline: none }` rule in glamrdip-tokens.css.liquid kills the click-focus outline. Joel directive 2026-05-01: section-level :focus rules are FORBIDDEN. Only :focus-visible may have custom section styling. See CLAUDE.md "Focus rings" rule. */ .gd-kit-hero__slide-btn:focus-visible { outline: 2px solid var(--gd-violet); outline-offset: -2px; box-shadow: none; } @media (min-width: 990px) { .gd-kit-hero__carousel { display: block; overflow: visible; gap: 0; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; } .gd-kit-hero__slide { flex: none; max-width: none; width: 100%; aspect-ratio: 1 / 1; scroll-snap-align: none; } /* Desktop: only the .is-active slide shows. Arrow nav + thumb click both toggle .is-active so videos/external videos swap correctly (the prior img.src swap couldn't reach