/* ============================================================
styles.css — Julea Jewelry (Jewellery MVP)
Source of truth: .opencode/docs/design-spec.md §1 (tokens) + §2 (components)
Mobile-first. Breakpoints: ≥768px (tablet), ≥1024px (desktop).
NOTE ON FONTS:
Every HTML page must also include these tags in
(the @import below is a fallback for direct stylesheet use):
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* ---- Colour palette (raw hexes) ---- */
--color-ivory: #F9F9F7; /* warm ivory / soft off-white page background */
--color-warm-white: #F0EFEA; /* soft taupe section/card surface */
--color-soft-taupe: #E5DED4; /* hairline borders, subtle fills, dividers */
--color-taupe: var(--color-soft-taupe); /* alias */
--color-platinum-gray: #C7CDD1; /* meta borders, disabled, light hairline on dark */
--color-white: #FFFFFF; /* text on photo overlays, card images */
/* Text */
--color-charcoal: #2C2C2C; /* primary text (soft charcoal, NOT pure black) */
--color-charcoal-soft: #6B6B6B; /* secondary/muted text */
--color-ink-on-dark: #F7F4EF; /* text on deep-green & charcoal surfaces */
/* Accent */
--color-deep-green: #1E3A2F; /* primary CTA bg, eyebrow labels, links, active nav */
--color-accent: var(--color-deep-green); /* alias */
--color-deep-green-hover: #152A22; /* primary CTA hover */
--color-champagne-gold: #D4AF37; /* DECORATIVE ONLY — hairlines, icons, numerals,
price diamond glyph. NEVER for text < 24px. */
--color-gold: var(--color-champagne-gold); /* alias */
/* Semantic role map (apply roles, not raw hexes) */
--bg-page: var(--color-ivory);
--bg-surface: var(--color-warm-white);
--bg-primary: #F9F9F7;
--bg-secondary: #F0EFEA;
--bg-inverse: var(--color-charcoal);
--text-primary: var(--color-charcoal);
--text-secondary: var(--color-charcoal-soft);
--text-muted: #6B6B6B;
--text-on-dark: var(--color-ink-on-dark);
--border-hair: var(--color-soft-taupe);
--cta-primary-bg: var(--color-deep-green);
--cta-primary-text: var(--color-ink-on-dark);
--accent: var(--color-champagne-gold);
--gold: var(--color-champagne-gold);
/* ---- Typography ---- */
--font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
--fs-h1: clamp(2.5rem, 5vw, 3.5rem); /* 40px → 56px */
--fs-h2: clamp(2rem, 3.5vw, 2.5rem); /* 32px → 40px */
--fs-h3: 1.75rem; /* 28px */
--fs-h4: 1.25rem; /* 20px */
--fs-body: 1rem; /* 16px */
--fs-lead: 1.1875rem; /* 19px */
--fs-small: 0.875rem; /* 14px */
--fs-caption: 0.75rem; /* 12px */
--fs-eyebrow: 0.75rem; /* 12px, uppercase, tracked */
--lh-tight: 1.15;
--lh-body: 1.6;
/* ---- Spacing (8px base scale) ---- */
--space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
--space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px;
/* Extended scale (design-spec §1.3) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
--sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px;
--sp-11: 96px; --sp-12: 128px;
/* ---- Layout ---- */
--container: 1200px;
--container-narrow: 720px; /* forms, thank-you, education text columns */
--gutter: clamp(20px, 4vw, 48px); /* page side padding */
/* ---- Radius ---- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-btn: 999px; /* pill CTAs (ring motif) */
--radius-card: 12px;
--radius-media: 8px;
/* ---- Shadows (soft, warm-tinted) ---- */
--shadow-sm: 0 1px 2px rgba(46, 42, 38, 0.06), 0 1px 3px rgba(46, 42, 38, 0.08);
--shadow-md: 0 4px 12px rgba(46, 42, 38, 0.08), 0 2px 4px rgba(46, 42, 38, 0.05);
--shadow-lg: 0 12px 32px rgba(46, 42, 38, 0.12), 0 4px 8px rgba(46, 42, 38, 0.06);
/* ---- Motion ---- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 180ms;
--dur-med: 320ms;
--dur-slow: 700ms;
}
/* ============================================================
2. RESET + BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
ul,
ol {
list-style: none;
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
color: var(--color-deep-green-hover);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
/* Visible focus ring for keyboard users (a11y) */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
::selection {
background-color: var(--color-deep-green);
color: var(--color-ink-on-dark);
}
/* ============================================================
3. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 500;
color: var(--text-primary);
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
p { text-wrap: pretty; }
.lead {
font-family: var(--font-sans);
font-size: var(--fs-lead);
font-weight: 300;
line-height: 1.6;
letter-spacing: 0.005em;
color: var(--text-secondary);
}
.small { font-size: var(--fs-small); line-height: 1.5; }
.caption { font-size: var(--fs-caption); line-height: 1.5; }
/* ============================================================
4. LAYOUT
============================================================ */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container-narrow {
width: 100%;
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Section rhythm: 48px mobile → 96px desktop (§2.7) */
.section {
padding-block: var(--sp-8); /* 48px */
}
.section--surface { background-color: var(--bg-surface); }
.section--inverse {
background-color: var(--bg-inverse);
color: var(--text-on-dark);
}
.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 { color: var(--text-on-dark); }
.section-lede {
max-width: 640px;
margin-top: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-lead);
font-weight: 300;
line-height: 1.6;
color: var(--text-secondary);
}
.section--inverse .section-lede { color: rgba(247, 244, 239, 0.8); }
/* ============================================================
5. BUTTONS (§2.1)
Primary naming: .btn--* (BEM). Design-spec aliases
(.btn-primary, .btn-secondary, .btn-primary--on-dark,
.link-underline, .sticky-cta) resolve to identical styles.
============================================================ */
.btn,
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 48px;
padding: 14px 28px;
border: none;
border-radius: var(--radius-btn);
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: 600;
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
appearance: none;
transition:
background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.btn:focus-visible,
.btn-primary:focus-visible {
outline: 2px solid var(--color-ink-on-dark);
outline-offset: 2px;
}
/* Primary — deep green */
.btn--primary,
.btn-primary {
background-color: var(--cta-primary-bg);
color: var(--cta-primary-text);
}
.btn--primary:hover,
.btn-primary:hover {
background-color: var(--color-deep-green-hover);
color: var(--cta-primary-text);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn--primary:active,
.btn-primary:active { transform: translateY(0); box-shadow: none; }
/* Secondary — transparent outline */
.btn--secondary,
.btn-secondary {
background-color: transparent;
border: 1px solid var(--color-charcoal-soft);
color: var(--text-primary);
}
.btn--secondary:hover,
.btn-secondary:hover {
background-color: var(--color-charcoal);
border-color: var(--color-charcoal);
color: var(--color-ink-on-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn--secondary:focus-visible,
.btn-secondary:focus-visible { outline-color: var(--color-charcoal); }
/* On-dark primary — ivory on dark surfaces */
.btn--on-dark,
.btn-primary--on-dark {
background-color: var(--color-ivory);
color: var(--color-charcoal);
}
.btn--on-dark:hover,
.btn-primary--on-dark:hover {
background-color: var(--color-warm-white);
color: var(--color-charcoal);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Text link button */
.btn--link {
min-height: auto;
padding: 4px 0;
background-color: transparent;
color: var(--accent);
border: none;
border-radius: 0;
font-weight: 500;
box-shadow: none;
}
.btn--link:hover {
background-color: transparent;
color: var(--color-deep-green-hover);
transform: none;
box-shadow: none;
text-decoration: underline;
text-underline-offset: 4px;
}
/* Inline text link (design-spec) — deep green + gold underline */
.link-underline {
color: var(--accent);
text-decoration: underline;
text-decoration-color: var(--gold);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.link-underline:hover {
color: var(--color-deep-green-hover);
text-decoration-color: var(--color-deep-green);
}
/* Full-width block button */
.btn--block { width: 100%; }
/* Compact button (nav "Start Your Custom Piece", trust chips) */
.btn--compact {
min-height: 44px;
padding: 10px 20px;
font-size: 0.9375rem;
}
/* Disabled state */
.btn:disabled,
.btn[disabled],
.btn--primary:disabled,
.btn--secondary:disabled,
.btn--on-dark:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ============================================================
6. EYEBROW (§2.7)
Uppercase sans, deep green, gold hairline rule to the left
(desktop) / on top (mobile).
============================================================ */
.eyebrow {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.eyebrow__rule {
flex: 0 0 auto;
width: 24px;
height: 2px;
background-color: var(--gold); /* decorative — gold is never text */
}
/* On inverse (dark) bands */
.eyebrow--on-dark { color: var(--text-on-dark); }
.eyebrow--on-dark .eyebrow__rule { background-color: var(--gold); }
/* ============================================================
7. SITE HEADER + NAV (§2.3)
Sticky. Transparent over the hero on pages marked
data-overlay="true"; solid warm-white everywhere else.
main.js toggles .is-scrolled on scroll.
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
/* Default: solid (inner pages) */
background-color: rgba(252, 250, 246, 0.95);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-hair);
box-shadow: var(--shadow-sm);
transition:
background-color var(--dur-med) var(--ease-out),
box-shadow var(--dur-med) var(--ease-out),
border-color var(--dur-med) var(--ease-out);
}
/* Over the hero: transparent, ivory text */
.site-header[data-overlay="true"] {
background-color: transparent;
border-bottom-color: transparent;
box-shadow: none;
}
.site-header[data-overlay="true"]:not(.is-scrolled) {
color: var(--text-on-dark);
}
/* On scroll (or any non-hero page): solid warm-white, charcoal text */
.site-header.is-scrolled,
.site-header:not([data-overlay="true"]) {
background-color: rgba(252, 250, 246, 0.95);
border-bottom-color: var(--border-hair);
box-shadow: var(--shadow-sm);
color: var(--text-primary);
}
.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
min-height: 72px;
}
/* Wordmark — serif, h4 size */
.wordmark {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.02em;
color: inherit;
white-space: nowrap;
}
.wordmark:hover { color: inherit; opacity: 0.85; }
.wordmark__image {
display: block;
width: clamp(112px, 14vw, 156px);
height: auto;
}
/* Desktop nav (hidden on mobile — hamburger instead) */
.site-nav { display: none; }
.nav-list {
display: flex;
align-items: center;
gap: var(--sp-1);
}
.nav-item { position: relative; }
.nav-link {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 44px;
padding: 10px 14px;
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
color: inherit;
position: relative;
}
.nav-link:hover { color: inherit; opacity: 0.85; }
/* Active / hover underline (deep green) */
.nav-link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 6px;
height: 2px;
background-color: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-fast) var(--ease-out);
}
.nav-item.is-current .nav-link::after,
.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.site-header[data-overlay="true"]:not(.is-scrolled) .nav-link::after {
background-color: var(--color-ink-on-dark);
}
.nav-caret { font-size: 0.7em; opacity: 0.7; }
/* Collections dropdown (desktop) */
.dropdown {
position: absolute;
top: calc(100% - 2px);
left: 8px;
min-width: 220px;
padding: var(--sp-2);
background-color: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--radius-card);
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
visibility var(--dur-fast) var(--ease-out);
}
.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown,
.has-dropdown:focus-within .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown li + li { border-top: 1px solid var(--border-hair); }
.dropdown a {
display: block;
padding: 12px 14px;
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 400;
color: var(--text-primary);
border-radius: var(--radius-sm);
}
.dropdown a:hover {
color: var(--accent);
background-color: rgba(46, 42, 38, 0.04);
}
/* Right actions: Ask a Question + primary CTA */
.nav-actions {
display: none;
align-items: center;
gap: var(--sp-4);
}
.nav-question {
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 500;
color: inherit;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
white-space: nowrap;
}
.site-header[data-overlay="true"]:not(.is-scrolled) .nav-question { color: var(--text-on-dark); }
/* Hamburger (mobile only) */
.nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 48px;
height: 48px;
background-color: transparent;
border: none;
cursor: pointer;
color: inherit;
}
.nav-toggle__bar {
display: block;
width: 22px;
height: 2px;
background-color: currentColor;
border-radius: 2px;
transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile slide-in panel */
.nav-panel {
position: fixed;
inset: 0 0 0 auto;
width: min(340px, 88vw);
height: 100dvh;
background-color: var(--bg-surface);
box-shadow: var(--shadow-lg);
transform: translateX(102%);
transition: transform var(--dur-med) var(--ease-out);
z-index: 200;
overflow-y: auto;
}
.nav-panel:not([hidden]) { transform: translateX(0); }
/* Dimmed backdrop (body.nav-open is set by main.js) */
body.nav-open::before {
content: "";
position: fixed;
inset: 0;
background-color: rgba(46, 42, 38, 0.45);
z-index: 150;
}
body.nav-open { overflow: hidden; }
.nav-panel__inner {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--sp-6) var(--sp-5) var(--sp-8);
}
.nav-panel__close {
align-self: flex-end;
width: 48px;
height: 48px;
margin-bottom: var(--sp-4);
background-color: transparent;
border: none;
font-size: 1.75rem;
line-height: 1;
color: var(--text-primary);
cursor: pointer;
}
.nav-panel__list { flex: 1 1 auto; }
.nav-panel__list a {
display: flex;
align-items: center;
min-height: 56px;
font-family: var(--font-serif);
font-size: 1.375rem;
font-weight: 500;
color: var(--text-primary);
border-bottom: 1px solid var(--border-hair);
}
.nav-panel__list a:hover { color: var(--accent); }
/* ============================================================
8. FOOTER (§2.4)
Charcoal inverse band, 4 columns desktop / stacked mobile.
============================================================ */
.site-footer {
background-color: var(--bg-inverse);
color: var(--text-on-dark);
padding-top: var(--sp-9); /* 64px */
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-8) var(--sp-6);
padding-bottom: var(--sp-8);
}
.footer-wordmark {
display: inline-block;
font-family: var(--font-serif);
font-size: 1.375rem;
font-weight: 600;
color: var(--text-on-dark);
margin-bottom: var(--sp-4);
}
.footer-wordmark:hover { color: var(--text-on-dark); opacity: 0.85; }
.footer-wordmark__image {
display: block;
width: 168px;
height: auto;
}
.product-grid--single {
grid-template-columns: minmax(0, 1fr);
max-width: 640px;
}
.footer-tagline {
max-width: 30ch;
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: 1.6;
color: rgba(247, 244, 239, 0.72);
margin-bottom: var(--sp-5);
}
.footer-heading {
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(247, 244, 239, 0.85);
margin-bottom: var(--sp-4);
}
.footer-col ul { display: grid; gap: var(--sp-3); }
.footer-col a {
font-family: var(--font-sans);
font-size: var(--fs-small);
color: rgba(247, 244, 239, 0.72);
}
.footer-col a:hover { color: var(--color-ivory); }
.footer-link {
display: inline-block;
margin-top: var(--sp-3);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.footer-hours {
margin-top: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-caption);
color: rgba(247, 244, 239, 0.6);
}
/* Newsletter stub */
.footer-note {
font-family: var(--font-sans);
font-size: var(--fs-small);
color: rgba(247, 244, 239, 0.72);
margin-bottom: var(--sp-4);
}
.newsletter-form {
display: flex;
align-items: center;
gap: var(--sp-3);
padding-bottom: 4px;
border-bottom: 1px solid rgba(247, 244, 239, 0.4);
}
.newsletter-form input {
flex: 1 1 auto;
min-width: 0;
padding: 10px 0;
background-color: transparent;
border: none;
color: var(--text-on-dark);
font-family: var(--font-sans);
font-size: 0.9375rem;
}
.newsletter-form input::placeholder { color: rgba(247, 244, 239, 0.55); }
.newsletter-form input:focus-visible { outline: none; }
.newsletter-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 auto;
background-color: transparent;
border: none;
border-radius: 50%;
color: var(--gold); /* decorative gold icon */
cursor: pointer;
}
.newsletter-submit:hover { color: var(--color-ivory); }
.newsletter-msg {
margin-top: var(--sp-3);
font-family: var(--font-sans);
font-size: var(--fs-small);
color: rgba(247, 244, 239, 0.85);
}
/* Bottom bar */
.footer-bottom {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding-block: var(--sp-5);
border-top: 1px solid rgba(247, 244, 239, 0.18);
font-family: var(--font-sans);
font-size: var(--fs-caption);
color: rgba(247, 244, 239, 0.7);
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
}
.footer-legal a { color: rgba(247, 244, 239, 0.7); }
.footer-legal a:hover { color: var(--color-ivory); }
/* ============================================================
9. PRODUCT CARD + GRID (§2.2)
============================================================ */
.product-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-5);
}
.product-card {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--bg-surface);
border: 1px solid var(--border-hair);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
overflow: hidden;
color: var(--text-primary);
transition:
box-shadow var(--dur-med) var(--ease-out),
transform var(--dur-med) var(--ease-out);
}
.product-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
color: var(--text-primary);
}
.product-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background-color: var(--color-soft-taupe);
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__img,
.product-card:focus-within .product-card__img { transform: scale(1.05); }
/* "✦ From $X" glass chip — gold glyph decorative only */
.product-card__chip {
position: absolute;
left: var(--sp-3);
bottom: var(--sp-3);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background-color: rgba(252, 250, 246, 0.92);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: var(--radius-btn);
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.product-card__chip .chip-glyph { color: var(--gold); font-size: 0.8em; }
.product-card__body {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-4) var(--sp-5);
}
.product-card__name {
font-family: var(--font-serif);
font-size: var(--fs-h4);
font-weight: 500;
color: var(--text-primary);
}
.product-card__meta {
font-family: var(--font-sans);
font-size: var(--fs-caption);
color: var(--text-secondary);
}
.product-card__price {
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: 600;
color: var(--text-primary);
}
.product-card__cta { margin-top: var(--sp-2); }
/* Whole-card keyboard focus (entire card links to PDP) */
.product-card:focus-within {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ============================================================
10. GALLERY + SPEC TABLE (§2.5)
============================================================ */
.gallery__main {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--radius-media);
background-color: var(--color-soft-taupe);
}
.gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery__thumbs {
display: flex;
gap: var(--sp-2);
margin-top: var(--sp-3);
overflow-x: auto;
}
.gallery__thumb {
flex: 0 0 auto;
width: 72px;
height: 72px;
padding: 0;
border: 2px solid transparent;
border-radius: var(--radius-media);
overflow: hidden;
cursor: pointer;
background-color: var(--color-soft-taupe);
}
.gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery__thumb.is-active { border-color: var(--accent); }
/* Spec table — two columns, hairline rows */
.spec-table {
width: 100%;
border-collapse: collapse;
}
.spec-table td {
padding: 14px 0;
border-bottom: 1px solid var(--border-hair);
vertical-align: top;
}
.spec-table tr:last-child td { border-bottom: none; }
.spec-table__label {
font-family: var(--font-sans);
font-size: var(--fs-small);
color: var(--text-secondary);
}
.spec-table__value {
font-family: var(--font-sans);
font-size: var(--fs-body);
color: var(--text-primary);
text-align: right;
}
/* ============================================================
11. STICKY CTA BAR (§2.6)
Fixed bottom bar (mobile + desktop). main.js adds .is-visible
once the user scrolls past the in-page primary CTA.
============================================================ */
.sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
background-color: rgba(252, 250, 246, 0.97);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-top: 1px solid var(--border-hair);
transform: translateY(110%);
transition: transform var(--dur-med) var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.btn--sticky {
width: 100%;
height: 56px;
}
/* ============================================================
13. HERO (shared base — homepage worker builds on this)
Full-bleed, charcoal scrim for text contrast.
============================================================ */
.hero {
position: relative;
display: grid;
place-items: center;
min-height: min(78vh, 720px);
padding-block: var(--sp-12);
overflow: hidden;
color: var(--text-on-dark);
text-align: center;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Scrim: dark charcoal gradient left→right, ~45% opacity */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, rgba(46, 42, 38, 0.55), rgba(46, 42, 38, 0.25) 55%, rgba(46, 42, 38, 0.35));
}
.hero h1,
.hero .lead { color: var(--text-on-dark); }
.hero .lead { max-width: 560px; margin-inline: auto; }
.hero__ctas {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-6);
}
.hero__trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3) var(--sp-5);
margin-top: var(--sp-6);
padding-top: var(--sp-5);
border-top: 1px solid rgba(247, 244, 239, 0.25);
font-family: var(--font-sans);
font-size: var(--fs-small);
color: rgba(247, 244, 239, 0.85);
}
/* ============================================================
14. REVEAL-ON-SCROLL (main.js IntersectionObserver)
============================================================ */
.reveal {
opacity: 0;
transform: translateY(16px);
transition:
opacity 600ms var(--ease-out),
transform 600ms var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/*
Hash navigation must remain usable if a browser defers or drops the
IntersectionObserver callback while it performs a smooth scroll. The home
page's “View the Collection” CTA targets this section directly, so the
target state is an explicit progressive-enhancement escape hatch.
*/
#collections:target .reveal,
#signature-collection:target .reveal {
opacity: 1;
transform: none;
}
/* ============================================================
15. UTILITIES + A11Y
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 300;
padding: 12px 20px;
background-color: var(--color-deep-green);
color: var(--color-ink-on-dark);
border-radius: var(--radius-btn);
font-family: var(--font-sans);
font-weight: 600;
transform: translateY(-200%);
transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--color-ink-on-dark); }
/* ============================================================
16. BREAKPOINTS
============================================================ */
/* ---- Tablet ≥768px ---- */
@media (min-width: 768px) {
.product-grid { grid-template-columns: repeat(2, 1fr); }
.hero__ctas { flex-direction: row; }
.footer-bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.spec-table__value { text-align: right; }
}
/* ---- Desktop ≥1024px ---- */
@media (min-width: 1024px) {
.section { padding-block: var(--sp-11); } /* 96px */
.site-nav { display: block; }
.nav-toggle { display: none; }
.nav-actions { display: flex; }
.footer-grid {
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--sp-10);
}
/* Product-led surfaces stay editorial and legible at two columns. */
.product-grid { grid-template-columns: repeat(2, 1fr); }
/* Gallery: 58/42 split — main left, thumb rail right */
.gallery {
display: grid;
grid-template-columns: 58% 1fr;
gap: var(--sp-4);
align-items: start;
}
.gallery__thumbs {
flex-direction: column;
margin-top: 0;
overflow: visible;
}
.gallery__thumb { width: 84px; height: 84px; }
/* Sticky CTA becomes a floating pill bottom-right */
.sticky-cta {
left: auto;
right: 24px;
bottom: 24px;
width: 100%;
max-width: 320px;
border: 1px solid var(--border-hair);
border-radius: var(--radius-card);
box-shadow: var(--shadow-md);
padding: 12px;
}
}
/* ============================================================
17. REDUCED MOTION (a11y — design-spec §6)
Kill zoom / fade / transforms; keep functional transitions.
============================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1;
transform: none;
}
.product-card__img,
.hero__media img { transform: none !important; }
}
/* ============================================================
18. WAVE 1 HOMEPAGE SECTIONS (index.html)
Added by Wave 1 worker on top of the shared refactor.
Additive only — does not override shared components above.
============================================================ */
/* --- Section headers --- */
.section-head { margin-bottom: var(--sp-7); }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-lede { margin-inline: auto; }
.section-actions { margin-top: var(--sp-7); text-align: center; }
.section-actions--left { text-align: left; margin-top: var(--sp-6); }
/* --- Hero over the transparent header (home) --- */
.hero--bleed { margin-top: -72px; }
.hero__content {
position: relative;
width: 100%;
max-width: 720px;
margin-inline: auto;
}
.hero__content .eyebrow { justify-content: center; }
.hero__content .lead { color: rgba(247, 244, 239, 0.92); }
/* --- Featured category tiles (home §2) --- */
.category-grid { display: grid; gap: var(--sp-5); }
.category-tile {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius-card);
background-color: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.category-tile img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.category-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.category-tile:hover img { transform: scale(1.06); }
.category-tile__caption {
position: absolute;
inset-inline: 0; bottom: 0;
padding: var(--sp-7) var(--sp-5) var(--sp-5);
background: linear-gradient(to top, rgba(46, 42, 38, 0.72), transparent);
color: var(--text-on-dark);
}
.category-tile__caption h3 { color: var(--text-on-dark); margin-bottom: var(--sp-2); }
.arrow-link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-body);
color: var(--color-deep-green);
}
.arrow-link::after { content: "\2192"; color: var(--gold); font-weight: 400; }
.category-tile__caption .arrow-link { color: var(--color-warm-white); }
/* --- Custom process steps (home §4) --- */
.steps-grid { display: grid; gap: var(--sp-6); counter-reset: step; }
.step { position: relative; padding-left: var(--sp-10); }
.step::before {
counter-increment: step;
content: "0" counter(step);
position: absolute; left: 0; top: 0;
font-family: var(--font-serif);
font-size: 2.25rem;
font-weight: 500;
line-height: 1;
color: var(--gold);
}
.step:not(:last-child)::after {
content: "";
position: absolute; left: 7px; top: 3.25rem; bottom: -2rem;
width: 1px;
background-color: var(--border-hair);
}
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.step p { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-secondary); margin: 0; }
/* --- Split bands (home §5 education teaser, §8 about) --- */
.split { display: grid; gap: var(--sp-6); align-items: center; }
.split__media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-md); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__highlights { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.highlight {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
font-family: var(--font-sans);
font-size: var(--fs-small);
color: var(--text-secondary);
}
.highlight::before { content: "\2726"; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
/* --- Testimonials (home §7) --- */
.testimonial-grid { display: grid; gap: var(--sp-7); }
.testimonial { display: flex; flex-direction: column; gap: var(--sp-4); }
.testimonial blockquote {
margin: 0;
position: relative;
font-family: var(--font-serif);
font-size: 1.375rem;
font-weight: 400;
line-height: 1.45;
color: var(--text-on-dark);
}
.testimonial blockquote::before {
content: "\201C";
display: block;
font-family: var(--font-serif);
font-size: 3.5rem;
line-height: 0.6;
color: var(--gold);
margin-bottom: var(--sp-3);
}
.testimonial figcaption {
font-family: var(--font-sans);
font-size: var(--fs-small);
color: rgba(247, 244, 239, 0.7);
}
/* --- Final CTA band (home §9) --- */
.final-cta { text-align: center; }
.final-cta__rule {
width: 24px; height: 1px;
margin: 0 auto var(--sp-5);
background-color: var(--gold);
}
.final-cta .section-lede { margin-inline: auto; color: rgba(247, 244, 239, 0.85); }
.final-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-4);
margin-top: var(--sp-6);
}
/* --- Product card name link stays charcoal (name is not a link colour) --- */
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { color: var(--color-deep-green); }
/* --- Homepage responsive additions --- */
@media (min-width: 768px) {
.category-grid { grid-template-columns: repeat(3, 1fr); }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.testimonial-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
.split { grid-template-columns: 1fr 1fr; }
.steps-grid { grid-template-columns: repeat(4, 1fr); }
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-9); }
.footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* ============================================================
19. WAVE 1 COMPLETION — classes referenced by index.html
that were missing from the shared sheet. Additive only.
============================================================ */
/* Custom process (home §4) — */
.process-steps {
display: grid;
gap: var(--sp-6);
margin-top: var(--sp-6);
}
.process-step {
position: relative;
padding-left: var(--sp-10);
}
.process-step__num {
position: absolute;
left: 0; top: 0;
font-family: var(--font-serif);
font-size: 2.25rem;
font-weight: 500;
line-height: 1;
color: var(--gold);
}
.process-step:not(:last-child)::after {
content: "";
position: absolute;
left: 7px; top: 3.25rem; bottom: -2rem;
width: 1px;
background-color: var(--border-hair);
}
.process-step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.process-step p { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--text-secondary); margin: 0; }
/* CTA under a grid (home §3/§4) */
.grid-cta { margin-top: var(--sp-7); text-align: center; }
/* Testimonials grid (home §7) — alias of .testimonial-grid */
.testimonials-grid,
.testimonial-grid {
display: grid;
gap: var(--sp-7);
}
/* Split-band content column (home §5/§6/§8) */
.split__content { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Education highlight list (home §5) */
.highlight-list {
display: grid;
gap: var(--sp-3);
margin: var(--sp-5) 0;
}
.highlight-list li {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
font-family: var(--font-sans);
font-size: var(--fs-small);
color: var(--text-secondary);
}
.highlight-list li::before { content: "\2726"; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
/* Hero eyebrow centers with the centered hero (home §1) */
.hero .eyebrow { justify-content: center; }
/* Final CTA (home §9) */
.final-cta__inner { padding-block: var(--sp-4); }
.final-cta__hairline {
display: flex;
justify-content: center;
margin: var(--sp-5) 0 var(--sp-6);
}
/* Transparent header sits OVER the full-bleed hero on the homepage */
.site-header[data-overlay="true"] ~ main .hero {
margin-top: -72px;
}
/* Responsive additions for the completion block */
@media (min-width: 768px) {
.testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.process-steps { grid-template-columns: repeat(4, 1fr); }
}
/* ============================================================
20. WAVE 1 FINAL — last class set from index.html v3 (15:32)
Additive only. Covers: category-card, process-list,
footer-brand, section--final, split--reverse, split__body,
testimonial cite.
============================================================ */
/* Featured category cards (home §2) */
.category-card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius-card);
background-color: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.category-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.category-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.category-card:hover img { transform: scale(1.06); }
.category-card__label {
position: absolute;
inset-inline: 0; bottom: 0;
margin: 0;
padding: var(--sp-7) var(--sp-5) var(--sp-5);
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: 500;
color: var(--color-white);
background: linear-gradient(to top, rgba(46, 42, 38, 0.72), transparent);
}
/* Custom process list (home §4) — */
.process-list {
display: grid;
gap: var(--sp-6);
margin-top: var(--sp-6);
}
.process-list .process-step { padding-left: var(--sp-10); }
/* Footer brand column */
.footer-brand { display: block; }
.footer-brand .footer-tagline { max-width: 34ch; }
/* Final CTA band (home §9) — centered on inverse */
.section--final { text-align: center; }
.section--final .container { max-width: var(--container-narrow); }
.section--final .eyebrow { justify-content: center; }
.section--final .lead { margin-inline: auto; color: rgba(247, 244, 239, 0.85); }
/* Split band — reversed image/text on desktop (home §6) */
.split__body { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Testimonial blockquote + cite (home §7) */
blockquote.testimonial {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
blockquote.testimonial p {
font-family: var(--font-serif);
font-size: 1.375rem;
font-weight: 400;
line-height: 1.45;
color: var(--text-on-dark);
margin: 0;
}
blockquote.testimonial::before {
content: "\201C";
display: block;
font-family: var(--font-serif);
font-size: 3.5rem;
line-height: 0.6;
color: var(--gold);
}
blockquote.testimonial cite {
font-family: var(--font-sans);
font-style: normal;
font-size: var(--fs-small);
color: rgba(247, 244, 239, 0.7);
}
@media (min-width: 768px) {
.process-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.process-list { grid-template-columns: repeat(4, 1fr); }
.split--reverse .split__media { order: 2; }
}
/* ============================================================
21. SITE REVIEW — PRODUCT-FIRST HOMEPAGE
Shared contracts for catalogue-rendered cards live here so the
authored fallback and the released catalogue have the same rhythm.
The segmentation dialog itself is owned by lead-segmentation.css.
============================================================ */
/* Compact hero keeps the first product surface within the opening view. */
.hero--compact {
min-height: min(62vh, 560px);
padding-block: clamp(var(--sp-9), 10vw, var(--sp-12));
}
.hero--compact .hero__content {
max-width: 760px;
}
.hero--compact .lead {
max-width: 600px;
}
/* Thin service ribbon directly below the hero. */
.trust-ribbon {
background-color: var(--bg-surface);
border-block: 1px solid var(--border-hair);
}
.trust-ribbon__inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--sp-3);
padding-block: var(--sp-3);
}
.trust-ribbon__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2) var(--sp-5);
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.4;
text-align: center;
text-transform: uppercase;
color: var(--text-secondary);
}
.trust-ribbon__list li {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.trust-ribbon__list li:not(:first-child)::before {
content: "";
width: 3px;
height: 3px;
flex: 0 0 auto;
border-radius: 50%;
background-color: var(--gold);
}
/* Persistent, reversible entry point for the segmentation flow. */
.lead-segmentation-trigger {
align-self: center;
min-height: 40px;
padding: 8px 16px;
border: 1px solid var(--color-deep-green);
border-radius: var(--radius-btn);
background: transparent;
color: var(--color-deep-green);
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.lead-segmentation-trigger:hover {
background-color: var(--color-deep-green);
color: var(--color-ink-on-dark);
box-shadow: var(--shadow-sm);
}
.lead-segmentation-trigger:focus-visible {
outline: 2px solid var(--color-deep-green);
outline-offset: 3px;
}
/* Two-column desktop / one-column mobile product presentation. */
.product-grid {
gap: clamp(var(--sp-6), 4vw, var(--sp-8));
}
.product-card {
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.product-card:hover {
box-shadow: none;
transform: translateY(-2px);
}
.product-card__media {
border-radius: var(--radius-media);
box-shadow: var(--shadow-sm);
}
.product-card__body {
gap: var(--sp-2);
padding: var(--sp-5) var(--sp-2) var(--sp-2);
}
.product-card__name {
font-size: clamp(1.35rem, 2vw, var(--fs-h4));
}
/* Catalogue metadata contracts: badge, approved specification subtitle,
approved price/quote line, and optional evidence-backed social proof. */
.product-card__badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
max-width: 100%;
margin-bottom: var(--sp-1);
padding: 5px 10px;
border: 1px solid var(--border-hair);
border-radius: var(--radius-btn);
background-color: var(--bg-surface);
color: var(--color-deep-green);
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.2;
}
.product-card__media > .product-card__badge {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
z-index: 1;
}
.product-card__spec,
.product-card__subtitle,
.product-card__meta {
font-family: var(--font-sans);
font-size: var(--fs-caption);
line-height: 1.5;
color: var(--text-secondary);
}
.product-card__subtitle {
max-width: 42ch;
}
.product-card__price {
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.4;
color: var(--text-primary);
}
.product-card__price:not(.product-card__chip) {
margin-top: var(--sp-1);
}
.product-card__social-proof {
font-family: var(--font-sans);
font-size: var(--fs-caption);
line-height: 1.45;
color: var(--text-secondary);
}
.category-grid {
gap: var(--sp-5);
}
@media (min-width: 768px) {
.trust-ribbon__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.trust-ribbon__list {
justify-content: flex-start;
}
.lead-segmentation-trigger {
flex: 0 0 auto;
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ── SYNC-14/15 fixes (2026-08-26): undefined classes used in pages ─── */
/* SYNC-14: form-optional hint labels in inquiry.html */
.form-optional {
font-weight: 400;
color: var(--text-secondary, #6b7280);
font-size: var(--fs-small, 0.875rem);
}
/* SYNC-15: pdp-gallery wrapper in product.html (defensive grid overflow) */
.pdp-gallery {
min-width: 0;
}
/* Dynamic catalogue surfaces use the native hidden attribute for state. */
[hidden] {
display: none !important;
}