/* Theme Name: Incredible Peptides Theme URI: https://incrediblepeptides.com Author: KML Meridian Enterprises LLC Description: Custom WooCommerce theme for Incredible Peptides, a research-peptide storefront. Version: 1.0.0 Requires at least: 6.4 Requires PHP: 8.0 Text Domain: incredible-peptides */ /* ========================================================================== Design tokens ========================================================================== */ :root { /* Color — Forest Lime: two-tone hierarchy, not one-accent. Dark is the default appearance; :root[data-theme="light"] below overrides it when a visitor explicitly picks light. */ --color-ink: #EDF3EF; /* bold structural surfaces + headline/body text */ --color-ink-press: #FFFFFF; --color-ink-mute: #93AFA5; /* captions, metadata, secondary text */ --color-primary: #D1F843; /* THE interactive accent — lime. Small pops only. */ --color-primary-press: #E8FF7A; --color-primary-tint: #26330F; --color-on-primary: #FFFFFF; /* text on ink-dark fills */ --color-on-accent: #262626; /* text/icons on lime fills — dark neutral grey for readability, never white */ --color-on-accent-mute: #B9D6C9; /* muted text on ink-dark fills */ --color-canvas: #0B1613; --color-canvas-warm: #142420; /* cool dark-neutral section backgrounds */ --color-canvas-tint: #1D2C13; /* pale lime tint — secondary button, soft bands */ --color-surface-dark: #005840; /* always-dark accent surface (bands/cards with fixed light text) — does NOT flip between themes */ --color-surface-accent: var(--color-surface-dark); /* featured/bold surfaces use ink, NOT lime */ --color-hairline: #24352F; --color-error: #A5472E; --color-success: #D1F843; /* Back-compat aliases (existing markup references these names) */ --color-bg: var(--color-canvas); --color-body: var(--color-ink); --color-muted: var(--color-ink-mute); --color-brand: var(--color-ink); --color-tertiary: var(--color-primary); --color-secondary: var(--color-ink-mute); --color-surface: var(--color-canvas); --color-neutral: var(--color-canvas-warm); --color-lime: var(--color-primary); --color-lime-ink: var(--color-on-accent); /* text-safe accent tone — NOT the raw lime fill */ --color-lime-tint: var(--color-canvas-tint); --color-coral: var(--color-primary); --color-coral-dark: var(--color-primary-press); /* hover-darken of a lime FILL — for text use, see color-on-accent */ --color-coral-tint: var(--color-canvas-tint); --color-sage-tint: var(--color-canvas-tint); --color-line: var(--color-hairline); --color-line-strong: color-mix(in srgb, var(--color-ink-mute) 55%, transparent); /* Type */ --font-heading: 'General Sans', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --fs-hero: clamp(38px, 4.6vw, 64px); --fs-h1: clamp(30px, 3.4vw, 48px); --fs-h2: clamp(24px, 2.2vw, 32px); --fs-h3: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-nav: 16px; --fs-label: 12px; --fs-price: clamp(24px, 2vw, 28px); --fs-stat: clamp(32px, 3vw, 48px); /* Layout */ --container: 1440px; --pad-x: clamp(20px, 4.5vw, 72px); --pad-y-sm: clamp(44px, 9vw, 88px); --pad-y-lg: clamp(52px, 10.5vw, 104px); --gap-sm: 8px; --gap-md: 16px; --gap-lg: 32px; --gap-xl: clamp(28px, 5vw, 72px); /* Radius & shadow */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 90px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 1px rgba(0, 0, 0, .24); --shadow-md: 0 12px 28px rgba(0, 0, 0, .4); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .5); } /* Light mode — dark is the default appearance (above); this overrides it when a visitor explicitly picks light via the header toggle (persisted to localStorage as data-theme="light" on ). --color-surface-dark, --color-on-primary, --color-on-accent and --color-on-accent-mute are deliberately absent here: those pair with the always-dark accent surface (bands/cards) and must stay constant in both themes, or their fixed light text breaks. */ :root[data-theme="light"] { --color-ink: #005840; --color-ink-press: #003D2C; --color-ink-mute: #4F7568; --color-primary-press: #B8DE2E; --color-primary-tint: #E6F79A; --color-canvas: #FFFFFF; --color-canvas-warm: #ECF0EF; --color-canvas-tint: #EAF7C7; --color-hairline: #DDE6E2; --shadow-sm: 0 1px 2px rgba(34, 32, 27, .05), 0 1px 1px rgba(34, 32, 27, .04); --shadow-md: 0 12px 28px rgba(34, 32, 27, .08); --shadow-lg: 0 30px 70px rgba(34, 32, 27, .18); } /* ========================================================================== Fonts (self-hosted) ========================================================================== */ @font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/general-sans-variable.woff2') format('woff2-variations'), url('assets/fonts/general-sans-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/inter-variable.woff2') format('woff2-variations'), url('assets/fonts/inter-variable.woff2') format('woff2'); } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--color-canvas); color: var(--color-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; overflow-x: hidden; position: relative; } img, svg { max-width: 100%; display: block; } button { font-family: inherit; } ul { margin: 0; padding: 0; list-style: none; } a { color: var(--color-ink); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--color-ink-press); } a:hover { text-decoration-color: currentColor; } ::selection { background: var(--color-canvas-tint); color: var(--color-ink); } *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-ink); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .5em; line-height: 1.15; } h2, h3 { font-weight: 600; letter-spacing: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 1em; } .label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* ========================================================================== Layout ========================================================================== */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .section { padding-top: var(--pad-y-sm); padding-bottom: var(--pad-y-sm); } .section--lg { padding-top: var(--pad-y-lg); padding-bottom: var(--pad-y-lg); } .section--tight { padding-top: clamp(43px, 5.4vw, 62px); padding-bottom: clamp(43px, 5.4vw, 62px); } .grid { display: grid; gap: var(--gap-lg); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-pill); border: 1.5px solid transparent; font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn:hover { transform: translateY(-1px); } /* Primary — the one filled accent action per screen */ .btn--coral { background: var(--color-primary); color: var(--color-on-accent); } .btn--coral:hover { background: var(--color-primary-press); box-shadow: var(--shadow-md); color: var(--color-on-accent); } /* Outline — accent-colored border/text, never filled */ .btn--outline { background: var(--color-canvas); border-color: var(--color-ink); color: var(--color-ink); } .btn--outline:hover { background: var(--color-canvas-tint); box-shadow: var(--shadow-sm); } /* Secondary pill — soft neutral tint, no accent spent */ .btn--ghost { background: var(--color-canvas-tint); border-color: transparent; color: var(--color-ink); } .btn--ghost:hover { background: color-mix(in srgb, var(--color-canvas-tint) 80%, var(--color-ink-mute)); } /* Solid ink alternative — for secondary emphasis without spending the accent */ .btn--brand { background: var(--color-surface-dark); border-color: var(--color-surface-dark); color: var(--color-on-primary); } .btn--brand:hover { background: color-mix(in srgb, var(--color-surface-dark) 85%, black); border-color: color-mix(in srgb, var(--color-surface-dark) 85%, black); color: var(--color-on-primary); } .btn--sm { padding: 10px 26px; font-size: 14.4px; } .btn--icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; } .btn-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; color: var(--color-ink); background: none; border: none; padding: 8px 4px; cursor: pointer; text-decoration: none; } .btn-link:hover { text-decoration: none; } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; } .card-feature { background: var(--color-canvas-warm); border-radius: var(--radius-xl); padding: 32px; } .card-feature h3 { color: var(--color-ink); } .card-feature p { color: var(--color-ink-mute); } .card-accent { background: var(--color-surface-accent); color: var(--color-on-primary); border-radius: var(--radius-xl); padding: 32px; } .card-accent h3, .card-accent h2 { color: var(--color-on-primary); } .card-accent p { color: var(--color-on-accent-mute); } .band-accent { background: linear-gradient(135deg, var(--color-surface-dark) 0%, color-mix(in srgb, var(--color-surface-dark) 45%, white) 100%); color: var(--color-on-primary); border-radius: var(--radius-xl); padding: 48px; } .band-accent h2 { color: var(--color-on-primary); } .band-accent p { color: var(--color-on-accent-mute); } .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "feat feat b c" "feat feat d e"; gap: var(--gap-md); } .bento-tile { display: flex; flex-direction: column; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); padding: 26px; } .bento-tile--feat { grid-area: feat; justify-content: flex-end; background: var(--color-surface-dark); border: none; padding: 36px; } .bento-tile__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-canvas-warm); color: var(--color-ink); margin-bottom: 16px; } .bento-tile--feat .bento-tile__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-on-accent); margin-bottom: 22px; } .bento-tile__title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; line-height: 1.3; margin-bottom: 8px; color: var(--color-ink); } .bento-tile--feat .bento-tile__title { font-size: 22px; color: var(--color-on-primary); } .bento-tile__body { font-size: 14px; line-height: 1.7; color: var(--color-ink-mute); margin: 0; } .bento-tile--feat .bento-tile__body { font-size: 15px; max-width: 34ch; color: var(--color-on-accent-mute); } @media (max-width: 980px) and (min-width: 761px) { .bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "feat feat" "b c" "d e"; } } @media (max-width: 760px) { .bento-grid { grid-template-columns: 1fr; grid-template-areas: "feat" "b" "c" "d" "e"; } .bento-tile--feat { padding: 28px; } } [data-hoverlift] { transition: transform .2s ease, box-shadow .2s ease; } [data-hoverlift]:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* ========================================================================== Marquee ========================================================================== */ @keyframes ip-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { background: var(--color-sage-tint); border-bottom: 1px solid var(--color-line); overflow: hidden; padding: 9px 0; } .marquee__track { display: flex; width: max-content; animation: ip-marquee 44s linear infinite; } .marquee__set { flex: none; display: flex; gap: 10px; padding-right: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand); font-weight: 700; white-space: nowrap; } .marquee__set span.dot { opacity: .4; } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } [data-hoverlift]:hover { transform: none; } .about-tabs__panel.is-active, .account-auth-tabpanel.is-active, .ip-gate-tabpanel.is-active, .pdp-panel.is-active { animation: none; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* Sitewide image reveal target — see assets/js/motion.js. Starting state is set here (not inline) so a no-JS/no-GSAP visit still shows the image. */ [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* ========================================================================== Utility ========================================================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--color-canvas-warm); border-radius: var(--radius-pill); padding: 4px 12px; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-line); } .site-header__row { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 14px var(--pad-x); } .site-header__logo { margin-right: auto; display: flex; align-items: center; } .site-header__logo img { height: 48px; width: auto; } .site-header__logo-light { display: none; } :root[data-theme="light"] .site-header__logo-light { display: block; } :root[data-theme="light"] .site-header__logo-dark { display: none; } /* Toggle UI hidden sitewide for now — dark is the only visible state. Keep this rule (rather than removing the button/JS) so the toggle can be brought back later just by deleting this line. */ .theme-toggle { display: none !important; } .theme-toggle__icon--sun { display: none; } :root[data-theme="light"] .theme-toggle__icon--sun { display: inline-flex; } :root[data-theme="light"] .theme-toggle__icon--moon { display: none; } .primary-nav { display: flex; flex-wrap: wrap; gap: 30px; font-size: 13px; font-weight: 600; color: var(--color-ink); } .primary-nav a, .primary-nav button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .primary-nav a:hover, .primary-nav button:hover { color: var(--color-brand); } .cat-menu { position: relative; } .cat-menu__toggle svg { transition: transform .15s ease; } .cat-menu.is-open .cat-menu__toggle svg { transform: rotate(180deg); } .cat-menu__panel { position: absolute; top: 100%; left: 0; padding-top: 14px; z-index: 40; display: none; } .cat-menu.is-open .cat-menu__panel { display: block; } .cat-menu__list { width: 240px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 10px; display: flex; flex-direction: column; gap: 2px; } .cat-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--color-ink); } .cat-menu__list a:hover { background: var(--color-sage-tint); color: var(--color-brand); } .cat-menu__count { font-size: 12px; font-weight: 600; color: var(--color-muted); } .header-actions { display: flex; align-items: center; gap: 18px; } .header-search { position: relative; display: flex; align-items: center; } .header-search__icon { position: absolute; left: 13px; color: var(--color-muted); pointer-events: none; display: inline-flex; } .header-search input { width: clamp(150px, 16vw, 224px); height: 37px; padding: 0 13px 0 34px; border-radius: 999px; border: 1.5px solid var(--color-line); background: var(--color-surface); font-family: var(--font-body); font-size: 12px; color: var(--color-ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .header-search input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(40, 83, 55, .09); } .pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 37px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--color-line); background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--color-ink); transition: background .2s ease, border-color .2s ease, color .2s ease; } .pill-btn:hover { background: var(--color-sage-tint); border-color: var(--color-brand); color: var(--color-brand); } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; border-radius: 999px; border: 1.5px solid var(--color-line); background: transparent; color: var(--color-ink); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .icon-btn:hover { background: var(--color-sage-tint); border-color: var(--color-brand); color: var(--color-brand); } .header-signup-cta { padding: 8px 18px; font-size: 12.8px; } .icon-btn__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--color-coral); color: var(--color-on-accent); font-size: 11px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-bg); } .nav-toggle { display: none; } a.primary-nav__mobile-only { display: none; } div.primary-nav__mobile-only { display: none; } a.primary-nav__signup-mobile { display: none; } .nav-scrim { display: none; } @media (max-width: 860px) { .site-header__row { position: relative; gap: 8px; } .primary-nav { display: none; } .header-search { display: none; } .header-actions .pill-btn, .header-signup-cta, .header-signin-icon { display: none; } .header-actions { gap: 8px; } .nav-toggle { display: inline-flex; } a.primary-nav__mobile-only { display: inline-flex; } div.primary-nav__mobile-only { display: flex; } .primary-nav__signin-mobile { align-items: center; color: var(--color-brand); } .primary-nav__auth-row { gap: 10px; margin-top: 14px; } body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 39; } body.nav-open .primary-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow-md); padding: 10px var(--pad-x) 16px; z-index: 45; } body.nav-open .primary-nav a, body.nav-open .primary-nav button { width: 100%; padding: 12px 4px; justify-content: space-between; border-bottom: 1px solid var(--color-line); } body.nav-open .cat-menu { width: 100%; } body.nav-open .cat-menu__panel { position: static; padding-top: 6px; width: 100%; } body.nav-open .cat-menu__list { width: 100%; box-shadow: none; border: none; padding: 0 0 0 12px; } a.primary-nav__signup-mobile { display: inline-flex; } body.nav-open a.primary-nav__signup-mobile { width: auto; flex: 1 1 0; justify-content: center; border-bottom: none; height: 48px; background: var(--color-surface-dark); color: var(--color-on-primary); border-radius: 999px; padding: 0 16px; font-weight: 700; } body.nav-open a.primary-nav__signup-mobile:hover { background: var(--color-ink-press); color: var(--color-on-primary); } body.nav-open a.primary-nav__signin-mobile { width: auto; flex: 1 1 0; justify-content: center; border-bottom: none; height: 48px; border: 1.5px solid var(--color-brand); border-radius: 999px; padding: 0 16px; } body.nav-open a.primary-nav__signin-mobile:hover { background: var(--color-canvas-warm); } } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; background: var(--color-canvas); color: var(--color-ink-mute); } .site-footer__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); } .footer-col--newsletter form { display: flex; flex-direction: column; gap: 8px; } .footer-col--newsletter .footer-newsletter__field { display: flex; flex-direction: column; } .footer-col--newsletter .footer-newsletter__field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .footer-col--newsletter .footer-newsletter__field input { width: 100%; padding: 9px 14px; min-height: 38px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-hairline); background: var(--color-canvas); font-family: var(--font-body); font-size: 13.5px; color: var(--color-ink); outline: none; transition: border-color .18s ease; } .footer-col--newsletter .footer-newsletter__field input::placeholder { color: var(--color-ink-mute); } .footer-col--newsletter .footer-newsletter__field input:focus { border-color: var(--color-primary); } .footer-newsletter__submit { font-family: var(--font-body); font-weight: 700; font-size: 13.5px; padding: 9px 18px; min-height: 38px; border-radius: var(--radius-pill); border: none; background: var(--color-primary); color: var(--color-on-accent); cursor: pointer; transition: background .18s ease, transform .12s ease; } .footer-newsletter__submit:hover { background: var(--color-primary-press); } .footer-newsletter__submit:active { transform: scale(.97); } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); padding: clamp(28px, 3.5vw, 40px) 0; border-bottom: 1px solid var(--color-hairline); } .footer-col__title { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 12px; } .footer-col__list { display: flex; flex-direction: column; gap: 2px; } .footer-col__list a { font-size: 14px; color: var(--color-ink-mute); padding: 6px 0; min-height: 34px; display: flex; align-items: center; text-decoration: none; transition: color .15s ease; } .footer-col__list a:hover, .footer-col__list a:focus-visible { color: var(--color-ink); } .footer-contact { display: flex; flex-direction: column; gap: 12px; } .footer-contact a { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-ink-mute); min-height: 34px; word-break: break-word; text-decoration: none; } .footer-contact a:hover, .footer-contact a:focus-visible { color: var(--color-ink); } .footer-contact svg { flex: none; color: var(--color-ink-mute); } .footer-contact__address { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--color-ink-mute); line-height: 1.5; } .footer-contact__address svg { margin-top: 2px; } .footer-legal { padding: 18px 0; border-bottom: 1px solid var(--color-hairline); } .footer-legal__title { font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 10px; } .footer-legal p { font-size: 12px; line-height: 1.6; color: var(--color-ink-mute); margin: 0 0 12px; } .footer-legal p:last-child { margin-bottom: 0; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 12px; color: var(--color-ink-mute); } .footer-bottom__links { display: flex; flex-wrap: wrap; gap: 10px 22px; } .footer-bottom__links a { color: var(--color-ink-mute); text-decoration: none; } .footer-bottom__links a:hover, .footer-bottom__links a:focus-visible { color: var(--color-ink); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; background: radial-gradient(55% 65% at 85% 15%, color-mix(in srgb, var(--color-primary-tint) 38%, transparent) 0%, transparent 65%), radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--color-canvas-warm) 90%, transparent) 0%, transparent 62%), radial-gradient(60% 70% at 30% 10%, color-mix(in srgb, var(--color-canvas-tint) 85%, transparent) 0%, transparent 65%), var(--color-canvas); } .hero__row { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap-lg); align-items: center; padding: clamp(34px, 4.2vw, 53px) var(--pad-x); max-width: var(--container); margin: 0 auto; } @media (max-width: 860px) { .hero__row { grid-template-columns: 1fr; } } .hero h1 { font-size: var(--fs-hero); line-height: 1.06; max-width: 16ch; margin-bottom: 17px; color: var(--color-ink); } .hero__lede { font-size: var(--fs-body-lg); line-height: 1.55; max-width: 46ch; margin-bottom: 22px; color: var(--color-ink-mute); } .hero__ruo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-mute); padding: 0; margin-top: 22px; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0; } .hero__ctas .btn--coral:hover { box-shadow: 0 14px 28px rgba(90,116,82,.26); } .hero__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 20px; padding-top: 20px; border-top: 1px solid var(--color-line); } @media (max-width: 480px) { .hero__feats { grid-template-columns: 1fr; } } .hero__feat { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; min-width: 0; } .hero__feat-icon { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--color-ink); } .hero__feat-title { font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink); } .hero__feat-copy { flex-basis: 100%; font-size: 13.5px; line-height: 1.55; color: var(--color-ink-mute); } .hero__art { position: relative; z-index: 1; } .hero__art-ring, .hero__art-glow, .hero__art-blob, .hero__art-shadow { display: none; } .hero__art-image { position: relative; z-index: 1; aspect-ratio: 1/1; background: #FFFFFF; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .hero__art-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero__art-stamp { position: absolute; top: 20px; right: -14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: var(--color-canvas); box-shadow: var(--shadow-md); border-radius: var(--radius-pill); padding: 8px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--color-ink); } /* ========================================================================== Section headers + product grid (shared: home preview + shop) ========================================================================== */ .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-md); margin-bottom: 32px; } .section-head h2 { margin: 0; } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); } @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } } .product-card { /* Product photography and its label colors are shot/designed for a white card — pin the tokens this subtree reads (including the per-category badge's inline var() colors) to their light values so the card always renders the same regardless of site theme. */ --color-ink: #005840; --color-ink-mute: #4F7568; --color-primary-press: #B8DE2E; --color-canvas: #FFFFFF; --color-canvas-warm: #ECF0EF; --color-canvas-tint: #EAF7C7; --color-hairline: #DDE6E2; display: flex; flex-direction: column; position: relative; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); padding: 14px 14px 16px; color: inherit; transition: transform .2s ease, border-color .2s ease; } .product-card:hover { transform: translateY(-2px); border-color: var(--color-ink-mute); color: inherit; } .product-card__media { position: relative; width: 100%; height: 0; padding-top: 78%; flex: 0 0 auto; } .product-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; } .product-card__badges { position: absolute; top: 14px; left: 14px; z-index: 1; display: flex; gap: 6px; } .badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; } .product-card__badges .badge { background: rgba(0, 88, 64, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF; } .product-card__body { display: flex; flex-direction: column; gap: 3px; padding-top: 10px; padding-right: 40px; } .product-card__name { font-family: var(--font-heading); font-weight: 600; font-size: 19.5px; line-height: 1.25; color: var(--color-ink); } .product-card__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .product-card__variants { display: flex; flex-wrap: wrap; gap: 4px; } .chip { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; border: none; background: var(--color-canvas-warm); color: var(--color-ink-mute); } .product-card__more { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px; font-size: 10.5px; font-weight: 600; color: var(--color-muted); } .product-card__price { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--color-ink); margin-top: 4px; } .product-card__price del { font-size: 12px; color: var(--color-muted); font-weight: 400; margin-right: 6px; } .product-card__price ins { text-decoration: none; } .product-card__cta { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-accent); box-shadow: var(--shadow-md); transition: background .18s ease, transform .18s ease; } .product-card:hover .product-card__cta { background: var(--color-primary-press); transform: scale(1.06); } /* ========================================================================== COA teaser ========================================================================== */ .coa-teaser { background: var(--color-sage-tint); padding: var(--pad-y-lg) 0; } .coa-teaser__row { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--gap-xl); align-items: center; } .coa-teaser__copy p { max-width: 46ch; } .coa-teaser__note { font-size: 14.5px; color: var(--color-muted); max-width: 44ch; } .coa-teaser__ctas { display: flex; flex-wrap: wrap; gap: 12px; } .coa-panel { background: var(--color-surface); border-radius: var(--radius-lg); padding: clamp(18px, 2.5vw, 26px); box-shadow: var(--shadow-md); } .coa-panel__label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 10px; } .coa-panel__search { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .coa-panel__search-field { position: relative; flex: 1 1 200px; min-width: 0; } .coa-panel__search-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-muted); } .coa-panel__search-field input { width: 100%; min-height: 46px; padding: 0 14px 0 40px; border-radius: 12px; border: 1.5px solid var(--color-line); background: var(--color-canvas); font-family: var(--font-body); font-size: 14px; color: var(--color-ink); outline: none; } .coa-panel__search-field input:focus { border-color: var(--color-brand); } .coa-panel__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .coa-panel__cats a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; padding: 9px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); } .coa-panel__cats a:hover { border-color: var(--color-brand); transform: translateY(-2px); color: var(--color-ink); } .coa-panel__cats .dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; } .coa-panel__rows { display: flex; flex-direction: column; gap: 8px; } .coa-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--color-canvas); border: 1px solid var(--color-line); border-left: 3px solid var(--color-brand); border-radius: 12px; padding: 11px 14px; } .coa-row__lot { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--color-ink); } .coa-row__status { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--color-lime-tint); color: var(--color-lime-ink); } .coa-row__meta { font-size: 12px; color: var(--color-muted); } .coa-row__btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--color-line); background: var(--color-surface); color: var(--color-brand); } .coa-row__btn:hover { border-color: var(--color-brand); background: var(--color-sage-tint); color: var(--color-brand); } /* ========================================================================== Standards 3-up ========================================================================== */ .standards { position: relative; overflow: hidden; background: var(--color-canvas); } .standards__inner { position: relative; padding: var(--pad-y-lg) var(--pad-x); max-width: var(--container); margin: 0 auto; } .standards__head { max-width: 58ch; margin-bottom: 32px; } .standards__head h2 { max-width: 24ch; } .standards__rule { height: 1px; background: var(--color-line-strong); margin-bottom: var(--gap-lg); } .standards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); } @media (max-width: 900px) { .standards__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .standards__grid { grid-template-columns: 1fr; } } .ledger { border-top: 1px solid var(--color-line-strong); } .ledger-row { display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--color-line); } @media (max-width: 640px) { .ledger-row { grid-template-columns: 48px 1fr; } } .ledger-row__num { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 1; color: var(--color-secondary); } .ledger-row__body h3 { margin-bottom: 8px; } .ledger-row__body p { font-size: 14.5px; line-height: 1.75; max-width: 62ch; margin: 0 0 10px; color: var(--color-primary); } .ledger-row__body a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--color-primary); text-decoration: none; transition: gap .22s ease; } .ledger-row__body a:hover { gap: 12px; text-decoration-color: currentColor; } .standard-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 32px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); box-shadow: none; transition: transform .2s ease, border-color .2s ease; } .standard-card:hover { transform: translateY(-3px); border-color: var(--color-ink-mute); } .standard-card__icon { display: inline-flex; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-canvas-warm); color: var(--color-ink); align-items: center; justify-content: center; margin-bottom: 16px; } .standard-card h3 { font-size: 17px; margin-bottom: 2px; } .standard-card p { font-size: 14.5px; line-height: 1.7; color: var(--color-ink-mute); margin: 0; } .standard-card__points { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-hairline); display: flex; flex-direction: column; gap: 8px; } .standard-card__point { display: flex; gap: 9px; font-size: 13px; line-height: 1.55; color: var(--color-ink-mute); } .standard-card__point span { flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--color-ink-mute); } /* ========================================================================== FAQ accordion ========================================================================== */ .faq-section { padding: 0 var(--pad-x) clamp(36px, 4.5vw, 52px); max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--gap-lg); } .faq-item { border-bottom: 1px solid var(--color-hairline); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 4px; cursor: pointer; list-style: none; transition: background-color .15s ease; } .faq-item summary:hover { background-color: color-mix(in srgb, var(--color-canvas-warm) 70%, transparent); } .faq-item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item__q { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--color-ink); } .faq-item__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-hairline); color: var(--color-ink-mute); transition: transform .2s ease, border-color .2s ease, color .2s ease; } .faq-item summary:hover .faq-item__icon { border-color: var(--color-ink-mute); } .faq-item[open] .faq-item__icon { transform: rotate(45deg); border-color: var(--color-ink); color: var(--color-ink); } .faq-item p { margin: 0 0 17px; padding-right: 52px; font-size: var(--fs-body-lg); line-height: 1.7; max-width: 70ch; color: var(--color-ink-mute); } /* ========================================================================== Breadcrumb ========================================================================== */ .breadcrumb { font-size: 13px; color: var(--color-muted); margin-bottom: 24px; } .breadcrumb a { color: var(--color-muted); } .breadcrumb a:hover { color: var(--color-brand); } /* ========================================================================== Product detail ========================================================================== */ .pdp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--gap-xl); align-items: start; } .pdp__gallery-main { position: relative; width: 100%; aspect-ratio: 1/1; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; } .pdp__gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; } .pdp__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 10px; margin-top: 10px; } .pdp__thumb { cursor: pointer; position: relative; width: 100%; aspect-ratio: 1/1; background: #fff; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; padding: 0; } .pdp__thumb.is-active { border-color: var(--color-brand); } .pdp__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .pdp__badges { display: flex; gap: 8px; margin-bottom: 16px; } .badge--outline { background: transparent; border: 1px solid var(--color-line-strong); color: var(--color-muted); } .pdp h1 { font-size: var(--fs-h1); margin-bottom: 12px; } .pdp__desc { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--color-body); max-width: 52ch; margin-bottom: 26px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--color-line); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; } .stat-grid__cell { background: var(--color-surface); padding: 15px 17px; } .stat-grid__value { font-family: var(--font-heading); font-weight: 600; font-size: 22px; color: var(--color-ink); } .stat-grid__value--mono { font-size: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; white-space: nowrap; } .stat-grid__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-top: 4px; } .pdp__field-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 10px; } .size-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .size-pill { cursor: pointer; padding: 12px 17px; border-radius: var(--radius-md); border: 1.5px solid var(--color-line); background: var(--color-surface); min-width: 112px; font: inherit; text-align: left; } .size-pill.is-active { border-color: var(--color-brand); background: var(--color-sage-tint); } .size-pill__label { font-size: 14px; font-weight: 600; color: var(--color-ink); } .size-pill__price { font-size: 13px; color: var(--color-muted); margin-top: 2px; } .pdp__price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .pdp__price { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-price); letter-spacing: -.01em; color: var(--color-ink); } .pdp__price del { font-size: 16px; color: var(--color-muted); font-weight: 400; } .pdp__price ins { text-decoration: none; } .coa-callout { background: var(--color-sage-tint); border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .coa-callout__copy { max-width: 34ch; } .coa-callout__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 5px; } .coa-callout p { font-size: 13px; line-height: 1.6; color: var(--color-body); margin: 0; } .coa-callout .btn { flex: none; border-color: var(--color-lime-ink); color: var(--color-lime-ink); } .coa-callout .btn:hover { background: #fff; color: var(--color-lime-ink); } .pdp__buy-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; } .qty-stepper button { width: 42px; height: 46px; border: none; background: transparent; color: var(--color-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .qty-stepper button:hover { background: var(--color-sage-tint); } .qty-stepper input { width: 40px; text-align: center; font-size: 16px; font-weight: 600; color: var(--color-ink); border: none; background: transparent; } .pdp__buy-row .btn { flex: 1; min-width: 180px; height: 46px; border-radius: var(--radius-md); } .pdp__meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--color-muted); margin-bottom: 8px; } .pdp__meta a { color: var(--color-brand); font-weight: 600; } .pdp-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--color-line); margin-top: 30px; margin-bottom: 22px; } .pdp-tabs button { cursor: pointer; padding-bottom: 12px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-muted); border: none; border-bottom: 2px solid transparent; background: none; } .pdp-tabs button.is-active { color: var(--color-ink); border-bottom-color: var(--color-brand); } .pdp-panel { display: none; } .pdp-panel.is-active { display: block; animation: ip-fade-in .18s ease; } .pdp-panel h4 { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-ink); margin-bottom: 8px; } .pdp-panel p { font-size: 14px; line-height: 1.75; color: var(--color-body); margin: 0 0 22px; } .pdp-panel ul { margin: -8px 0 22px; padding-left: 20px; } .pdp-panel ul li { font-size: 14px; line-height: 1.75; color: var(--color-body); margin-bottom: 6px; } .related-products { margin-top: 64px; } .related-products h2 { margin-bottom: 22px; } /* ========================================================================== Shop / archive ========================================================================== */ .shop-layout { display: flex; flex-wrap: wrap; gap: var(--gap-xl); } .shop-sidebar { flex: 1 1 200px; max-width: 260px; position: sticky; top: 100px; display: flex; flex-direction: column; gap: 28px; align-self: flex-start; } .shop-sidebar__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 12px; } .shop-sidebar__cats { display: flex; flex-direction: column; gap: 2px; } .shop-sidebar__cats a { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; padding: 8px 10px; border-radius: 10px; color: var(--color-ink); } .shop-sidebar__cats a:hover { background: var(--color-sage-tint); } .shop-sidebar__cats a.is-active { color: var(--color-brand); } .shop-sidebar__cats span.count { opacity: .5; font-weight: 500; } .shop-sidebar__avail { display: flex; flex-direction: column; gap: 10px; } .shop-sidebar__avail label { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--color-ink); } .shop-sidebar__avail input { accent-color: var(--color-brand); width: 16px; height: 16px; } .shop-sidebar__rule { height: 1px; background: var(--color-line); } .shop-sidebar__note { font-size: 13px; line-height: 1.6; color: var(--color-muted); margin: 0; } .shop-main { flex: 3 1 480px; min-width: 0; } .shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-md); justify-content: space-between; margin-bottom: 20px; } .sort-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--color-sage-tint); padding: 5px; border-radius: 999px; } .sort-tabs a { font-size: 13px; padding: 8px 16px; border-radius: 999px; font-weight: 600; color: var(--color-body); } .sort-tabs a.is-active { background: var(--color-surface); color: var(--color-ink); font-weight: 700; box-shadow: var(--shadow-sm); } .shop-toolbar__count { font-size: 13px; color: var(--color-muted); } .shop-empty { grid-column: 1/-1; background: var(--color-surface); border: 1px dashed var(--color-line); border-radius: var(--radius-lg); padding: 56px 32px; text-align: center; } .shop-empty h3 { margin-bottom: 8px; } .shop-empty p { font-size: var(--fs-body); line-height: 1.7; color: var(--color-muted); max-width: 52ch; margin: 0 auto 22px; } .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-line); font-size: 14px; font-weight: 600; color: var(--color-ink); padding: 0 10px; } .pagination a:hover { border-color: var(--color-brand); color: var(--color-brand); } .pagination .current { background: var(--color-surface-dark); border-color: var(--color-surface-dark); color: #fff; } @media (max-width: 860px) { .shop-sidebar { position: static; max-width: none; } } /* ========================================================================== WooCommerce notices (shared: cart, checkout, my-account, single-product) ========================================================================== */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { list-style: none; margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--color-sage-tint); border: 1px solid var(--color-line); color: var(--color-ink); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .woocommerce-error { background: color-mix(in srgb, var(--color-error) 12%, var(--color-canvas)); border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-canvas)); color: var(--color-error); } .woocommerce-message .button, .woocommerce-notice .button { order: 2; background: var(--color-surface-dark); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; } .woocommerce-error ul, .woocommerce-message ul, .woocommerce-notice ul { list-style: disc; padding-left: 18px; margin: 0; } /* ========================================================================== Cart (classic WooCommerce markup, restyled) ========================================================================== */ .woocommerce-cart-form table.cart, table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 0; } .woocommerce-cart-form table.cart thead { display: none; } .woocommerce-cart-form table.cart tr.cart_item { display: grid; grid-template-columns: 32px 92px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--color-line); } .woocommerce-cart-form table.cart td { border: none; padding: 0; } .product-remove { grid-row: 1; } .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--color-muted); font-size: 18px; line-height: 1; text-decoration: none; } .product-remove a.remove:hover { background: var(--color-coral-tint); color: var(--color-coral-dark); } .product-thumbnail img { width: 92px; height: 92px; object-fit: contain; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--color-line); padding: 6px; } .product-name { min-width: 0; } .product-name a { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-ink); } .product-name .variation { font-size: 13px; color: var(--color-muted); margin: 4px 0 10px; display: block; } .product-name dl.variation { display: block; margin: 4px 0 10px; } .product-name dl.variation dt, .product-name dl.variation dd { display: inline; font-size: 13px; color: var(--color-muted); margin: 0; } .product-name dl.variation dt::after { content: ': '; } .product-name dl.variation dd p { margin: 0; display: inline; } .product-price { display: none; } .product-quantity { grid-column: 3; grid-row: 2; margin-top: -6px; } .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; } .quantity .qty { width: 50px; height: 34px; text-align: center; border: none; font-size: 13px; color: var(--color-ink); background: transparent; } .product-subtotal { grid-column: 4; grid-row: 1 / span 2; font-size: 16px; font-weight: 700; color: var(--color-ink); align-self: center; text-align: right; } tr:has(td.actions) { display: block; border: none; padding: 24px 0 0; } td.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .coupon { display: flex; gap: 8px; flex-wrap: wrap; } #coupon_code { height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--color-line); font-size: 14px; } td.actions .button, button[name="update_cart"], button[name="apply_coupon"] { height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--color-brand); background: transparent; color: var(--color-brand); font-weight: 700; font-size: 13px; cursor: pointer; } td.actions .button:hover { background: var(--color-sage-tint); } .cart-collaterals { display: flex; flex-wrap: wrap; gap: var(--gap-xl); margin-top: 32px; } .cart-collaterals .cross-sells { flex: 2 1 460px; min-width: 0; } .cart-collaterals .cross-sells h2 { font-size: var(--fs-h3); } .cart-collaterals .cross-sells ul.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-md); list-style: none; padding: 0; } .cart-collaterals .cross-sells .product { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 16px; text-align: center; } .cart-collaterals .cross-sells img { border-radius: var(--radius-sm); margin-bottom: 10px; } .cart_totals { flex: 1 1 300px; max-width: 360px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 100px; align-self: flex-start; } .cart_totals h2 { font-size: 18px; margin-bottom: 18px; } .cart_totals table { width: 100%; border-collapse: collapse; } .cart_totals table th, .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: 14px; text-align: left; } .cart_totals table th { color: var(--color-muted); font-weight: 400; } .cart_totals table tr:last-child th, .cart_totals table tr:last-child td { border-bottom: none; font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--color-ink); } .wc-proceed-to-checkout { margin-top: 18px; } .wc-proceed-to-checkout .checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border-radius: 999px; border: 1.5px solid var(--color-coral); background: var(--color-coral); color: var(--color-on-accent); font-weight: 700; font-size: 14px; text-decoration: none; } .wc-proceed-to-checkout .checkout-button:hover { background: var(--color-coral-dark); border-color: var(--color-coral-dark); } .cart-empty { font-size: 14px; color: var(--color-muted); } .return-to-shop .button { display: inline-flex; margin-top: 14px; height: 46px; padding: 0 22px; align-items: center; border-radius: 999px; border: 1.5px solid var(--color-coral); background: var(--color-coral); color: var(--color-on-accent); font-weight: 700; font-size: 14px; } @media (max-width: 700px) { .woocommerce-cart-form table.cart tr.cart_item { grid-template-columns: 24px 70px 1fr; } .product-subtotal { grid-column: 1/-1; grid-row: 3; text-align: left; margin-top: 6px; } } /* ========================================================================== Checkout (classic WooCommerce markup, restyled) ========================================================================== */ .woocommerce-checkout .col2-set, .woocommerce-checkout form.checkout { display: flex; flex-wrap: wrap; gap: var(--gap-xl); align-items: flex-start; } .woocommerce-checkout #customer_details { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: 100%; } .checkout h3 { font-size: 18px; margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid var(--color-line); } .checkout > h3:first-of-type, #customer_details > h3:first-child { border-top: none; padding-top: 0; margin-top: 0; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .form-row { margin: 0 0 4px; } .form-row.form-row-wide, .form-row-first.address-field, .form-row.notes { grid-column: 1/-1; } .form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--color-muted); margin-bottom: 6px; } .form-row .required { color: var(--color-error); text-decoration: none; } .form-row input.input-text, .form-row select, .form-row textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--color-line); background: #fff; font-family: var(--font-body); font-size: 14px; color: #1B2A22; outline: none; } .form-row input.input-text:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--color-brand); } .select2-container .select2-selection--single { height: 48px; border-radius: 12px; border: 1.5px solid var(--color-line); display: flex; align-items: center; padding: 0 14px; } .select2-container .select2-selection__arrow { height: 46px; } #ship-to-different-address { margin: 8px 0 16px; } #ship-to-different-address label { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--color-ink); cursor: pointer; } .woocommerce-shipping-fields__field-wrapper { margin-top: 14px; } .woocommerce-checkout #order_review_heading { font-size: 18px; margin-bottom: 16px; } .woocommerce-checkout-review-order { flex: 1 1 300px; max-width: 380px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 100px; align-self: flex-start; } table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; } table.woocommerce-checkout-review-order-table thead { display: none; } table.woocommerce-checkout-review-order-table td, table.woocommerce-checkout-review-order-table th { padding: 9px 0; border-bottom: 1px solid var(--color-line); font-size: 13px; color: var(--color-ink); text-align: left; } table.woocommerce-checkout-review-order-table .product-name { font-size: 13px; } table.woocommerce-checkout-review-order-table .product-total { text-align: right; } table.woocommerce-checkout-review-order-table tfoot th, table.woocommerce-checkout-review-order-table tfoot td { text-align: left; } table.woocommerce-checkout-review-order-table .order-total th, table.woocommerce-checkout-review-order-table .order-total td { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--color-ink); border-bottom: none; } ul.wc_payment_methods { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; } ul.wc_payment_methods li.payment_method { border: 1.5px solid var(--color-line); border-radius: var(--radius-md); padding: 14px 16px; } ul.wc_payment_methods li.payment_method label { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--color-ink); cursor: pointer; } ul.wc_payment_methods li.payment_method input[type="radio"] { accent-color: var(--color-brand); width: 16px; height: 16px; } ul.wc_payment_methods li.payment_method:has(input:checked) { border-color: var(--color-brand); background: var(--color-sage-tint); } .payment_box { padding: 14px 2px 2px; font-size: 13px; color: var(--color-body); line-height: 1.6; } .payment_box p { margin: 0; } .woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; font-size: 13px; color: var(--color-body); } .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; } .woocommerce-form__input-checkbox { margin-top: 3px; accent-color: var(--color-brand); width: 16px; height: 16px; } #place_order { width: 100%; height: 46px; font-family: var(--font-body); font-weight: 700; font-size: 16px; border-radius: 999px; border: 1.5px solid var(--color-coral); background: var(--color-coral); color: var(--color-on-accent); cursor: pointer; } #place_order:hover { background: var(--color-coral-dark); border-color: var(--color-coral-dark); } .woocommerce-checkout-payment { margin-top: 8px; } /* ========================================================================== My Account ========================================================================== */ .woocommerce-account .u-columns, .woocommerce-MyAccount-content, .woocommerce-account-fields { max-width: 100%; } .woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; gap: var(--gap-xl); } .woocommerce-form-row--first, .woocommerce-form-row--last {} .woocommerce-account form .woocommerce-form__label-for-checkbox { font-size: 13px; color: var(--color-body); margin: 10px 0 16px; } .woocommerce-account .button { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--color-brand); background: var(--color-surface-dark); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; } .woocommerce-account .button:hover { background: var(--color-coral); border-color: var(--color-coral); } .woocommerce-account .lost_password { margin-top: 4px; font-size: 13px; } .woocommerce-account .lost_password a { color: var(--color-brand); font-weight: 600; } /* ========================================================================== Login / Register (account-auth) ========================================================================== */ .account-auth { max-width: 980px; margin: 0 auto; } .account-auth__intro { text-align: center; max-width: 56ch; margin: 0 auto 44px; } .account-auth__intro h1 { font-size: var(--fs-h1); margin: 10px 0 12px; } .account-auth__intro p { color: var(--color-body); font-size: var(--fs-body-lg); margin: 0; } /* Mirrors the gate popup's own responsive width exactly, so the two feel like the same component: full-width on mobile, a fixed proportion of the viewport on desktop, never narrower than 600px. */ .account-auth--tabbed { width: 100%; max-width: none; margin: 0 auto; } @media (min-width: 861px) { .account-auth--tabbed { width: 50%; min-width: 600px; } } .account-auth-tabs { display: flex; gap: 4px; background: var(--color-line); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 20px; } .account-auth-tabs button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: transparent; cursor: pointer; font-family: var(--font-heading); font-size: 13.5px; font-weight: 600; color: var(--color-muted); padding: 10px 12px; border-radius: 7px; transition: background .15s, color .15s; } .account-auth-tabs button.is-active { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); } .account-auth-tabpanel { display: none; } .account-auth-tabpanel.is-active { display: block; animation: ip-fade-in .18s ease; } @keyframes ip-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } .account-auth__panel { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(28px, 3vw, 40px); } .account-auth__panel h2 { font-size: var(--fs-h3); margin-bottom: 6px; } .account-auth__sub { color: var(--color-muted); font-size: 14px; margin: 0 0 26px; } .account-auth__panel form.login, .account-auth__panel form.register { display: flex; flex-direction: column; gap: 4px; } .account-auth__panel .form-row { margin-bottom: 16px; } .account-auth__panel .form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; } .account-auth__panel .form-row .required { color: var(--color-error); text-decoration: none; } .account-auth__panel input.input-text, .account-auth__panel select.input-text { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--color-line); background: #fff; font-family: var(--font-body); font-size: 15px; color: #1B2A22; outline: none; transition: border-color .2s ease; } .account-auth__panel input.input-text:focus, .account-auth__panel select.input-text:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(40, 83, 55, .09); } .account-auth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 480px) { .account-auth-row2 { grid-template-columns: 1fr; } } .password-field { position: relative; display: block; } .password-field input.input-text { padding-right: 48px; } /* We ship our own show/hide toggle, so suppress every browser's native password-reveal control (Chromium's injected "show-password-input" button, Edge's ::-ms-reveal, Safari/Chrome's credential-fill icons) — otherwise two overlapping toggles render on top of each other. */ .password-field .show-password-input, input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; } input[type="password"]::-webkit-textfield-decoration-container, input[type="password"]::-webkit-credentials-auto-fill-button, input[type="password"]::-webkit-strong-password-auto-fill-button { display: none !important; visibility: hidden !important; } .password-field__toggle { position: absolute; top: 0; right: 0; height: 48px; width: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--color-muted); cursor: pointer; } .password-field__toggle:hover { color: var(--color-brand); } .password-field__icon-hide { display: none; } .password-field__toggle.is-visible .password-field__icon-show { display: none; } .password-field__toggle.is-visible .password-field__icon-hide { display: inline-flex; } .account-auth__submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; } .account-auth__submit-row .woocommerce-form__label-for-checkbox { margin: 0; font-size: 13px; } .account-auth__panel .btn { width: 100%; margin-top: 4px; } .account-auth__submit-row .btn { width: auto; margin-top: 0; } .account-auth__panel .btn.btn--coral { background: var(--color-coral); border-color: var(--color-coral); color: var(--color-on-accent); } .account-auth__panel .btn.btn--coral:hover { background: var(--color-coral-dark); border-color: var(--color-coral-dark); } .account-auth__panel .btn.btn--outline { background: transparent; border-color: var(--color-brand); color: var(--color-ink); } .account-auth__panel .btn.btn--outline:hover { background: var(--color-canvas-warm); } .account-auth__panel .lost_password { text-align: center; margin-top: 18px; } .account-auth__note { font-size: 13px; color: var(--color-muted); line-height: 1.6; margin: 0 0 18px; } .account-auth__panel .woocommerce-privacy-policy-text { margin-top: 14px; } .account-auth__panel .woocommerce-privacy-policy-text p { font-size: 9px; color: #b3b3b3; line-height: 1.5; margin: 0; } .account-auth__panel .woocommerce-privacy-policy-text a { color: inherit; text-decoration: none; } .account-auth__divider { display: flex; align-items: center; justify-content: center; position: relative; } .account-auth__divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-line); } .account-auth__divider span { position: relative; background: var(--color-canvas); color: var(--color-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 8px 0; z-index: 1; } @media (max-width: 860px) { .account-auth__grid { grid-template-columns: 1fr; } .account-auth__divider { padding: 8px 0; } .account-auth__divider::before { top: 50%; bottom: auto; left: 0; right: 0; width: 100%; height: 1px; } .account-auth__divider span { padding: 0 14px; } } .woocommerce-MyAccount-navigation { flex: 1 1 160px; max-width: 220px; position: sticky; top: 100px; align-self: flex-start; } .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; } .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-MyAccount-navigation a { display: block; font-size: 14px; padding: 10px 14px; border-radius: 10px; color: var(--color-ink); font-weight: 600; } .woocommerce-MyAccount-navigation a:hover { background: var(--color-sage-tint); } .woocommerce-MyAccount-navigation li.is-active a { color: var(--color-brand); background: var(--color-sage-tint); } .woocommerce-MyAccount-content { flex: 3 1 480px; min-width: 0; } .woocommerce-MyAccount-content > p:first-child { color: var(--color-muted); font-size: 14px; } table.woocommerce-orders-table, table.shop_table_responsive { width: 100%; border-collapse: collapse; } table.woocommerce-orders-table thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); padding: 0 12px 10px; border-bottom: 2px solid var(--color-line); } table.woocommerce-orders-table td { padding: 13px 12px; font-size: 13px; color: var(--color-ink); border-bottom: 1px solid var(--color-line); } table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-ink); } .woocommerce-orders-table__cell-order-status mark { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--color-lime-tint); color: var(--color-lime-ink); } .woocommerce-orders-table__cell-order-actions .button { display: inline-flex; align-items: center; font-weight: 700; font-size: 13px; color: var(--color-brand); background: none; border: none; padding: 0; } .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-md); } .woocommerce-Address { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 20px; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .woocommerce-Address-title h3 { font-size: 16px; margin: 0; } .woocommerce-Address-title .edit { font-size: 13px; font-weight: 700; color: var(--color-brand); } .woocommerce-Address address { font-size: 14px; line-height: 1.7; color: var(--color-body); } .woocommerce-EditAccountForm, .woocommerce-address-fields { max-width: 480px; } .woocommerce-EditAccountForm .form-row, .woocommerce-address-fields .form-row { margin-bottom: 14px; } .woocommerce-EditAccountForm fieldset { border: none; padding: 0; margin: 24px 0 0; } .woocommerce-EditAccountForm legend { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-ink); margin-bottom: 12px; } .woocommerce-EditAccountForm button, .woocommerce-address-fields button, .woocommerce-Address-title .button { height: 46px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--color-brand); background: var(--color-surface-dark); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 8px; } .account-certificates__intro { font-size: 13px; color: var(--color-muted); margin-bottom: 20px; max-width: 60ch; } .account-certificates__actions { margin-bottom: 18px; } .account-certificates__empty { font-size: 14px; color: var(--color-muted); } .coa-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .coa-card { display: flex; flex-direction: column; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 20px; } .coa-card__head { display: flex; align-items: center; gap: 14px; } .coa-card__file { width: 34px; height: 42px; flex: none; border-radius: 4px; border: 1px solid var(--color-line-strong); display: grid; place-items: center; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--color-brand); } .coa-card__title { flex: 1; min-width: 0; } .coa-card__name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-ink); } .coa-card__meta { font-size: 12px; color: var(--color-muted); margin-top: 2px; } .account-wholesale { max-width: 60ch; } .account-wholesale p { color: var(--color-body); line-height: 1.7; margin-bottom: 20px; } @media (max-width: 860px) { .woocommerce-MyAccount-navigation { position: static; max-width: none; } } /* ========================================================================== Static page hero band (About, Wholesale, Quality, FAQ, RUO, Refunds, Shipping, Contact) — one component, a few background modifiers ========================================================================== */ .page-hero { position: relative; overflow: hidden; background: var(--color-sage-tint); border-bottom: 1px solid var(--color-line); padding: clamp(46px, 6vw, 84px) 0; } .policy-split { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; background: var(--color-canvas); } @media (max-width: 860px) { .policy-split { grid-template-columns: 1fr; } } .policy-split__hero { display: flex; align-items: center; padding: clamp(48px, 6vw, 84px) 0; } .policy-split__hero-inner { max-width: 460px; } .contact-direct { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-hairline); } .contact-direct__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-canvas-warm); color: var(--color-ink); } .contact-direct a { font-weight: 700; font-size: 14.5px; color: var(--color-ink); } .contact-direct__note { font-size: 12.5px; color: var(--color-ink-mute); margin-top: 3px; } .policy-split__content { padding: clamp(48px, 6vw, 84px) 0; } .page-hero--dark { background: linear-gradient(160deg, var(--color-surface-dark) 0%, var(--color-surface-dark) 100%); border-bottom: none; } .page-hero--wholesale { background: linear-gradient(165deg, #1F2A22 0%, #22302A 45%, #285337 100%); border-bottom: none; } .page-hero--brand { background: var(--color-surface-dark); border-bottom: none; } .page-hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); } .page-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-brand); margin-bottom: 14px; } .page-hero__eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--color-lime); display: inline-block; } .page-hero--dark .page-hero__eyebrow, .page-hero--wholesale .page-hero__eyebrow, .page-hero--brand .page-hero__eyebrow { color: rgba(255,255,255,.65); } .page-hero h1 { max-width: 22ch; letter-spacing: -.02em; } .page-hero--dark h1, .page-hero--wholesale h1, .page-hero--brand h1 { color: #fff; } .page-hero__lede { font-size: var(--fs-body-lg); line-height: 1.8; max-width: 60ch; color: var(--color-body); margin: 0 0 26px; } .page-hero--dark .page-hero__lede, .page-hero--wholesale .page-hero__lede, .page-hero--brand .page-hero__lede { color: rgba(255,255,255,.78); } .page-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; } .page-hero__updated { font-size: 12.5px; font-weight: 600; color: var(--color-muted); margin-top: 8px; } .page-hero--dark .page-hero__updated { color: rgba(255,255,255,.5); } /* ========================================================================== Notice banners (form success/error, empty states) ========================================================================== */ .notice-banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 28px; background: var(--color-canvas-tint); border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-canvas)); color: var(--color-ink); } .notice-banner svg { flex: none; color: var(--color-on-accent); margin-top: 1px; } .notice-banner--error { background: color-mix(in srgb, var(--color-error) 12%, var(--color-canvas)); border-color: color-mix(in srgb, var(--color-error) 40%, var(--color-canvas)); } .notice-banner--error svg { color: var(--color-error); } .notice-banner--warn { background: color-mix(in srgb, var(--color-error) 12%, var(--color-canvas)); border: 1px solid color-mix(in srgb, var(--color-error) 40%, var(--color-canvas)); border-left: 5px solid var(--color-error); } .notice-banner--warn svg { color: var(--color-error); } .notice-banner p { margin: 0; font-size: 15px; line-height: 1.7; } .notice-banner__title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; margin-bottom: 4px; } /* ========================================================================== Simple application/contact forms (Wholesale, Contact) ========================================================================== */ .app-form { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-md); } .app-form__title { font-size: 20px; margin-bottom: 6px; } .app-form__lede { font-size: 13.5px; line-height: 1.6; color: var(--color-muted); margin: 0 0 22px; } .app-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 4px; } .app-form .form-row textarea { min-height: 90px; font-family: var(--font-body); resize: vertical; } .app-form__consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.55; color: var(--color-body); margin: 14px 0 20px; } .app-form__consent input { accent-color: var(--color-brand); width: 16px; height: 16px; margin-top: 2px; flex: none; } .app-form__submit { width: 100%; } .topic-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .topic-pill { cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--color-line); background: var(--color-canvas); color: var(--color-body); } .topic-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .topic-pill:has(input:checked) { border-color: var(--color-brand); background: var(--color-sage-tint); color: var(--color-ink); } /* ========================================================================== Policy accordions (Terms, Privacy, Shipping, Refunds, RUO) — shared by ip_render_policy_sections() in inc/template-helpers.php ========================================================================== */ .policy-accordion { padding: 6px clamp(18px, 2.4vw, 28px); } .policy-accordion__item summary { font-size: 16.5px; } .policy-accordion__eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; } .policy-accordion__bullets { margin: 0 0 20px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 74ch; } .policy-accordion__bullets li { font-size: 15px; line-height: 1.7; color: var(--color-body); } /* Flat legal document layout (Privacy, Terms) — plain heading-then-paragraph flow, no accordion, matching the handoff HTML exactly. */ .policy-flat h2 { font-family: var(--font-heading); font-size: 19px; color: var(--color-ink); margin: 28px 0 10px; font-weight: 700; } .policy-flat > h2:first-child { margin-top: 0; } .policy-flat p { margin: 0 0 10px; color: var(--color-body); line-height: 1.65; } .policy-flat ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; } .policy-flat ul li { margin-bottom: 6px; color: var(--color-body); line-height: 1.65; } .policy-flat + .card { padding: 20px; margin-top: 36px; border-radius: var(--radius-md); } .policy-flat + .card strong { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--color-ink); display: block; } .policy-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; } .policy-toc { position: sticky; top: 100px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 14px; max-height: min(64vh, 620px); overflow: auto; } .policy-toc__label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); padding: 0 8px 10px; } .policy-toc a { display: block; padding: 9px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--color-body); } .policy-toc a:hover { background: var(--color-sage-tint); color: var(--color-brand); } .policy-side-card { background: var(--color-surface-dark); border-radius: var(--radius-lg); padding: 18px 20px; margin-top: 16px; } .policy-side-card__label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 8px; } .policy-side-card a { color: #fff; font-weight: 700; font-size: 14px; word-break: break-word; } .policy-side-links { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .policy-side-links__label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; } .policy-side-links a { font-size: 13.5px; font-weight: 600; color: var(--color-brand); } @media (max-width: 860px) { .policy-layout { grid-template-columns: 1fr; } .policy-toc { position: static; max-height: none; } } /* ========================================================================== FAQ page (category sidebar + searchable list) ========================================================================== */ .faq-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; } @media (max-width: 780px) { .faq-layout { grid-template-columns: 1fr; } } .faq-sidebar { position: sticky; top: 100px; align-self: flex-start; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); box-shadow: none; padding: 10px; } .faq-sidebar__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-mute); padding: 10px 12px 10px; } .faq-cat-btn { display: flex; align-items: center; width: 100%; text-align: left; font-weight: 600; font-size: 14px; padding: 12px 14px; min-height: 44px; border-radius: var(--radius-md); border: none; background: transparent; color: var(--color-ink-mute); cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .faq-cat-btn:hover { background: var(--color-canvas-warm); color: var(--color-ink); } .faq-cat-btn.is-active { background: var(--color-surface-dark); color: var(--color-on-primary); font-weight: 700; } .faq-main { min-width: 0; } .faq-cat-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; } .faq-cat-head__rail { flex: none; width: 6px; align-self: stretch; min-height: 52px; border-radius: 999px; } .faq-cat-head h2 { font-size: var(--fs-h3); margin: 0 0 6px; } .faq-cat-head p { font-size: 14.5px; line-height: 1.65; color: var(--color-muted); margin: 0; max-width: 60ch; } .faq-list { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .faq-list .faq-item { border-bottom: none; border-top: 1px solid var(--color-line); } .faq-list .faq-item:first-child { border-top: none; } .faq-list .faq-item summary { padding: 20px 24px; font-size: 16.5px; } .faq-list .faq-item p { padding: 0 24px 22px 24px; margin: 0; max-width: 74ch; } .faq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(26px, 3vw, 38px); background: var(--color-sage-tint); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px); } .faq-cta h3 { font-size: 19px; margin-bottom: 5px; } .faq-cta p { font-size: 14px; line-height: 1.65; color: var(--color-body); margin: 0; max-width: 46ch; } @media (max-width: 860px) { .faq-sidebar { position: static; max-width: none; } } /* ========================================================================== Reusable content blocks: numbered steps, tier cards, check-mark lists, media grids, pull quotes, dark info tiles (About, Wholesale, Quality, Refunds pages) ========================================================================== */ .step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--gap-md); } .step-card { border-top: 2px solid var(--color-ink); padding: 20px 0 0; } .step-card__num { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--color-ink-mute); margin-bottom: 12px; } .step-card h3 { font-size: 17px; margin-bottom: 8px; } .step-card p { font-size: 14px; line-height: 1.7; color: var(--color-ink-mute); margin: 0; } .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--gap-md); } .tier-card { display: flex; flex-direction: column; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); padding: 28px; } .tier-card__level { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-mute); margin-bottom: 14px; } .tier-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--color-ink); margin-bottom: 9px; } .tier-card p { font-size: 14.5px; line-height: 1.7; color: var(--color-ink-mute); margin: 0 0 18px; } .tier-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-hairline); font-size: 13.5px; line-height: 1.6; color: var(--color-ink-mute); } .check-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; } .check-item { display: flex; gap: 14px; align-items: flex-start; background: var(--color-surface); padding: 20px 22px; } .check-item__icon { flex: none; display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: var(--color-lime-tint); color: var(--color-lime-ink); align-items: center; justify-content: center; } .check-item__title { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; color: var(--color-ink); margin-bottom: 5px; } .check-item p { font-size: 13.5px; line-height: 1.7; color: var(--color-body); margin: 0; } .split-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 4vw, 64px); align-items: center; } @media (max-width: 860px) { .split-hero { grid-template-columns: 1fr; } } .about-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; } .about-split__blurb { font-style: italic; font-size: 15px; line-height: 1.6; color: var(--color-ink-mute); border-left: 2px solid var(--color-primary); padding-left: 14px; margin: 20px 0 0; max-width: 48ch; } .about-tabs__list { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 32px; border-bottom: 1px solid var(--color-hairline); } .about-tabs__btn { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--color-ink-mute); background: none; border: none; cursor: pointer; padding: 10px 2px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .about-tabs__btn:hover { color: var(--color-ink); } .about-tabs__btn.is-active { color: var(--color-ink); border-bottom-color: var(--color-primary); } .about-tabs__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .about-tabs__panel { display: none; } .about-tabs__panel.is-active { display: block; animation: ip-fade-in .18s ease; } .about-tabs__panel + .about-tabs__panel { margin-top: 32px; } .about-tabs__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-canvas-warm); color: var(--color-ink); margin-bottom: 16px; } .about-tabs__panel h3 { font-size: var(--fs-h3); margin: 0 0 10px; } .about-tabs__panel > p { font-size: var(--fs-body-lg); line-height: 1.75; max-width: 60ch; color: var(--color-ink-mute); margin: 0 0 20px; } .about-tabs__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 52ch; } .about-tabs__points li { position: relative; padding-left: 22px; font-size: 14px; color: var(--color-ink); } .about-tabs__points li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .media-grid { display: flex; flex-direction: column; gap: var(--gap-md); } .media-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); } .media-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; } .pull-quote { border-left: 3px solid var(--color-lime); background: var(--color-sage-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 22px 24px; } .pull-quote p { font-family: var(--font-heading); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--color-ink); margin: 0; } .tile-band { background: var(--color-surface-dark); color: #fff; padding: var(--pad-y-sm) 0; } .tile-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md); overflow: hidden; } .tile-band__cell { background: var(--color-surface-dark); padding: 20px 18px; } .tile-band__icon { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; background: rgba(180,227,63,.14); color: var(--color-lime); align-items: center; justify-content: center; margin-bottom: 12px; } .tile-band__title { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; color: #fff; margin-bottom: 6px; } .tile-band__cell p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0; } .cta-band { position: relative; overflow: hidden; background: var(--color-surface-dark); color: #fff; border-radius: var(--radius-lg); padding: clamp(30px, 4vw, 50px); } .cta-band__row { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(22px, 3vw, 44px); align-items: center; } .cta-band h2 { color: #fff; margin-bottom: 12px; } .cta-band p { color: rgba(255,255,255,.8); margin: 0; max-width: 52ch; } /* ========================================================================== COA Lookup page ========================================================================== */ .coa-lookup-hero__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--gap-md); max-width: 760px; margin-top: 24px; } .coa-lookup-hero__option { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); } .coa-lookup-hero__option:hover { border-color: var(--color-brand); transform: translateY(-4px); } .coa-lookup-hero__option-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); } .coa-lookup-hero__option-title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--color-ink); } .coa-lookup-hero__option-copy { font-size: 13.5px; line-height: 1.6; color: var(--color-muted); } .coa-search-band { background: var(--color-surface-dark); padding: clamp(34px, 4vw, 52px) 0; } .coa-search-band__row { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(22px, 3vw, 48px); align-items: center; } .coa-search-band h2 { color: #fff; margin-bottom: 10px; } .coa-search-band p { color: rgba(255,255,255,.76); margin: 0; max-width: 44ch; } .coa-search-band form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; } .coa-search-band__field { position: relative; flex: 1 1 220px; min-width: 0; } .coa-search-band__field svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--color-muted); } .coa-search-band__field input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px 0 42px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.28); background: #fff; font-family: var(--font-body); font-size: 15px; color: #1B2A22; outline: none; } .coa-search-band__note { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 10px; } .coa-search-band__note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,.8); } .coa-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--gap-sm); } .coa-cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 15px 16px; min-height: 78px; border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-surface); } .coa-cat-card__label { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; color: var(--color-ink); } .coa-cat-card__dot { flex: none; width: 9px; height: 9px; border-radius: 3px; } .coa-cat-card__count { font-size: 12.5px; color: var(--color-muted); } .coa-missing { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--color-muted); } .coa-missing svg { flex: none; } /* ========================================================================== Sitemap ========================================================================== */ .sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-lg); } .sitemap-col__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); } .sitemap-col__list { display: flex; flex-direction: column; gap: 12px; } .sitemap-col__list a { font-size: 14.5px; color: var(--color-ink); } .sitemap-col__list a:hover { color: var(--color-brand); } .sitemap-col__note { font-size: 12.5px; color: var(--color-muted); margin-top: 4px; } /* ========================================================================== Search overlay ========================================================================== */ [data-search-trigger] { cursor: pointer; } .search-overlay { display: none; position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--color-surface-dark) 45%, transparent); backdrop-filter: blur(3px); justify-content: center; align-items: flex-start; padding: clamp(16px, 8vh, 120px) var(--pad-x) 24px; } .search-overlay.is-open { display: flex; } .search-overlay__dialog { width: min(720px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .search-overlay__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--color-line); } .search-overlay__icon { color: var(--color-muted); display: inline-flex; } .search-overlay__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 18px; color: var(--color-ink); } .search-overlay__esc { flex: none; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--color-line); background: transparent; color: var(--color-muted); cursor: pointer; } .search-overlay__esc:hover { border-color: var(--color-brand); color: var(--color-brand); } .search-overlay__body { flex: 1; overflow-y: auto; padding: 8px 0 12px; } .search-overlay__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); padding: 14px 20px 10px; } .search-overlay__loading { padding: 40px 20px; text-align: center; color: var(--color-muted); font-size: 14px; } .search-overlay__row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; text-decoration: none; color: inherit; } .search-overlay__row:hover { background: var(--color-sage-tint); } .search-overlay__thumb { position: relative; width: 52px; height: 52px; flex: none; border-radius: 10px; border: 1px solid var(--color-line); background: #fff; overflow: hidden; } .search-overlay__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .search-overlay__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .search-overlay__row-name { font-size: 16px; font-weight: 600; color: var(--color-ink); line-height: 1.3; } .search-overlay__row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); } .search-overlay__row-meta .dot { color: var(--color-line-strong); } .search-overlay__row-arrow { flex: none; color: var(--color-muted); } .search-overlay__empty { padding: 44px 24px 40px; text-align: center; } .search-overlay__empty-icon { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 999px; background: var(--color-coral-tint); display: grid; place-items: center; color: var(--color-coral-dark); } .search-overlay__empty-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--color-ink); margin-bottom: 8px; } .search-overlay__empty p { font-size: 14px; line-height: 1.7; color: var(--color-body); margin: 0 auto; max-width: 44ch; } .search-overlay__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-line); background: var(--color-canvas); font-size: 11px; color: var(--color-muted); } .search-overlay__foot a { font-size: 13px; font-weight: 700; color: var(--color-brand); } body.search-open { overflow: hidden; } /* ========================================================================== WooCommerce Checkout block (production's Checkout page uses the block, not the [woocommerce_checkout] shortcode). Its floating labels sit inside fixed-white input fields, but were inheriting the dark-mode "ink" token meant for dark surfaces — nearly invisible on white. Pin them to a plain grey regardless of site theme, same fix pattern as .product-card. ========================================================================== */ .wp-block-woocommerce-checkout label, .wc-block-checkout label, .wc-block-components-text-input label, .wc-block-components-combobox label, .wc-block-components-address-form label, .wc-block-components-radio-control label { color: #6b7280 !important; }