/* ==========================================================================
   Verified brand tokens — sourced from the active client's canonical logo
   and brand assets, applied as this reusable core's default (deep_navy)
   palette. See AppearancePresets for the full allowlist of alternates.
   ========================================================================== */
:root {
    color-scheme: light;

    --brand-navy: #172949;
    --brand-gold: #d69d2a;
    --brand-mint: #78ccb4;
    --brand-cream: #f9e5c2;

    /* -----------------------------------------------------------------
       Hero coverflow tokens (homepage-only, scoped to .section--hero--
       coverflow) — sourced from the approved "Editorial Navy" Stitch
       concept, not the site-wide brand palette above. Kept separate so
       this self-contained dark section never leaks into the rest of the
       light corporate theme.
       ----------------------------------------------------------------- */
    --hc-bg-start: #030b16;
    --hc-bg-mid: #0a2236;
    --hc-bg-end: #245170;
    /* Supplementary token, same family as the three above: a controlled,
       sparingly-used lightest-navy accent (e.g. small highlight washes).
       Deliberately capped dark enough that it must never be used as the
       dominant fill of a broad surface — .page--dark's main body holds
       --hc-bg-mid instead, precisely to avoid large areas reading as
       plain light blue. --hc-bg-end stays reserved for the hero
       coverflow's own dramatic end-stop and is untouched. */
    --hc-bg-wash: #12344d;
    --hc-ivory: #f2e6d1;
    --hc-gold: var(--brand-gold);

    /* -----------------------------------------------------------------
       Appearance token architecture (Faz 5 extension — basic-admin-cms.md
       §13: "Her palette kod tarafında koyu, ana, orta, açık ve çok açık
       tonları; gradient başlangıç/bitişini; buton ve hover ilişkilerini;
       açık/koyu yüzey kontrastlarını tanımlar"). Every [data-palette="X"]
       block below now additionally redefines all of the "-dark" suffixed
       tokens here, alongside --hc-bg-* / --hc-ivory above — Industrial
       Yellow's former one-off gradient override is just this same
       architecture applied to one more palette, not a special case
       anymore. .page--dark (further down) maps these onto the public
       --surface-* / --border-* / --text-* names below so every dark-route
       consumer (which today is nearly every route — see $darkRouteKeys
       in layouts/app.php) automatically follows the active palette.
       ----------------------------------------------------------------- */
    --surface-muted-dark: #0f2a40;
    --surface-card-dark: #12324d;
    --surface-elevated-dark: #163d5d;
    --border-subtle-dark: rgba(242, 230, 209, 0.14);
    --border-strong-dark: rgba(242, 230, 209, 0.4);
    --text-secondary-dark: rgba(242, 230, 209, 0.72);
    --text-muted-dark: rgba(242, 230, 209, 0.55);

    /* -----------------------------------------------------------------
       Neutral / surface tokens — light-surface defaults. No currently
       live route is light-themed (every real route maps through
       .page--dark below), so these stay inert/unchanged in appearance;
       they exist so the token contract is complete on both surfaces and
       so any future light route/admin-shared usage has a real default
       rather than a gap. Existing safe runtime neutrals kept for the
       untouched page/error templates that already depend on them:
       .runtime-card, .runtime-label, dt, dl div, .runtime-debug.
       ----------------------------------------------------------------- */
    --surface-page: var(--brand-cream);
    --surface-card: #fff;
    --surface-elevated: #fff;
    --surface-muted: #f4efe6;
    --border-subtle: #d7dce4;
    --border-strong: #b7bfcc;
    --text-primary: var(--brand-navy);
    --text-secondary: #3d4b63;
    --text-muted: #596579;
    --text-disabled: #7a8391;

    /* -----------------------------------------------------------------
       Button relationship tokens — alias the existing brand tokens so
       every palette's buttons follow with zero further per-palette
       overrides (this matches the current solid/outline preset
       resolution exactly, so nothing about button rendering changes).
       The preset system further down still layers soft/minimal/rounded
       and the light-vs-dark-surface safety net on top of these.
       ----------------------------------------------------------------- */
    --button-primary-bg: var(--brand-navy);
    --button-primary-text: var(--brand-cream);
    --button-primary-hover: var(--brand-gold);
    --button-secondary-bg: transparent;
    --button-secondary-text: var(--brand-navy);
    --button-secondary-hover: var(--brand-gold);

    /* ----------------------------------------------------------------- */
    /* Typography                                                         */
    /* ----------------------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Manrope", var(--font-sans);
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --line-height-base: 1.5;

    /* ----------------------------------------------------------------- */
    /* Spacing                                                            */
    /* ----------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ----------------------------------------------------------------- */
    /* Borders / radius                                                   */
    /* ----------------------------------------------------------------- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --border-hairline: 1px;
    --border-accent: 2px;

    /* ----------------------------------------------------------------- */
    /* Shadows (minimal, navy-tinted, used sparingly)                     */
    /* ----------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(23, 41, 73, 0.08);
    --shadow-md: 0 4px 12px rgba(23, 41, 73, 0.12);

    /* ----------------------------------------------------------------- */
    /* Layout                                                             */
    /* ----------------------------------------------------------------- */
    --container-max: 75rem;
    --container-padding: var(--space-4);

    font-family: var(--font-body);
    line-height: var(--line-height-base);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--brand-cream);
    color: var(--brand-navy);
    font-family: var(--font-body);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   Headings — Playfair Display sitewide (approved display/headline font),
   matching the existing default browser boldness (700) so this is a pure
   font swap, not a redesign of any heading's visual weight.
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -3rem;
    left: var(--space-3);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--brand-navy);
    color: var(--brand-cream);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: var(--space-3);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: var(--border-accent) solid var(--brand-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   Layout / container
   ========================================================================== */
.site-header__inner,
.main-shell__inner,
.site-footer__inner {
    width: min(100%, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    background: var(--brand-cream);
    border-bottom: var(--border-hairline) solid var(--border-subtle);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-3);
}

/* ==========================================================================
   Home-route dark header — integrates with the Editorial Navy hero instead
   of sitting on top of it as a separate light band. Scoped to the home
   route only (layouts/app.php sets this class when routeKey === 'home');
   every other route keeps the standard cream .site-header untouched.
   ========================================================================== */
.site-header--dark {
    background: linear-gradient(180deg, var(--hc-bg-start, #030b16) 0%, color-mix(in srgb, var(--hc-bg-start) 94%, transparent) 100%);
    border-bottom: 0.5px solid rgba(242, 230, 209, 0.16);
    color: var(--hc-ivory, #f2e6d1);
}

.site-header--dark .site-nav a {
    color: rgba(242, 230, 209, 0.7);
}

.site-header--dark .site-nav a:hover {
    color: var(--hc-ivory, #f2e6d1);
    border-bottom-color: var(--hc-gold, var(--brand-gold));
}

.site-header--dark .site-nav a[aria-current="page"] {
    color: var(--hc-ivory, #f2e6d1);
    border-bottom-color: var(--hc-gold, var(--brand-gold));
}

.site-header--dark .language-switcher__option {
    border-color: rgba(242, 230, 209, 0.22);
    color: rgba(242, 230, 209, 0.75);
}

.site-header--dark a.language-switcher__option[aria-current="page"] {
    border-color: var(--hc-gold, var(--brand-gold));
    color: var(--hc-ivory, #f2e6d1);
}

.site-header--dark .language-switcher__option--disabled {
    color: rgba(242, 230, 209, 0.35);
}

.site-header--dark .mobile-nav__toggle {
    color: var(--hc-ivory, #f2e6d1);
}

.site-header--dark .mobile-nav__panel {
    border-top-color: rgba(242, 230, 209, 0.16);
}

/* ==========================================================================
   Brand lockup (canonical logo)
   ========================================================================== */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.brand-lockup__logo {
    width: auto;
    height: clamp(2rem, 5vw, 2.75rem);
    aspect-ratio: 1425.32 / 633.38;
}

/* Short brand-lockup subtitle next to the logo (site_settings.logo_subtitle,
   admin-set, blank by default) — a compact label (e.g. "AJANS VE PROMOSYON"),
   never the longer site_settings.tagline slogan. Hidden below the 768px
   header breakpoint so it can never crowd the mobile logo/hamburger row;
   shows only the logo mark on narrow viewports. */
.brand-lockup__subtitle {
    display: none;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-gold, var(--brand-gold));
    line-height: 1.3;
    max-width: 11rem;
}

.site-header:not(.site-header--dark) .brand-lockup__subtitle {
    color: var(--brand-gold);
}

@media (min-width: 768px) {
    .brand-lockup__subtitle {
        display: inline-block;
    }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--space-1);
    text-decoration: none;
    white-space: normal;
    border-bottom: var(--border-accent) solid transparent;
}

.site-nav a[aria-current="page"] {
    font-weight: 700;
    border-bottom-color: var(--brand-gold);
}

.site-nav a:hover {
    border-bottom-color: var(--brand-gold);
}

/* ==========================================================================
   Language switcher
   ========================================================================== */
.language-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.language-switcher__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--space-2);
    text-decoration: none;
    border: var(--border-hairline) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

a.language-switcher__option[aria-current="page"] {
    border-color: var(--brand-gold);
    font-weight: 700;
}

.language-switcher__option--disabled {
    color: var(--text-disabled);
    border-style: dashed;
}

/* ==========================================================================
   Desktop navigation (plain, always in the tab order at >=768px only;
   display:none below that keeps it fully out of the tab order and
   accessibility tree in every browser)
   ========================================================================== */
.desktop-nav {
    display: none;
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
        align-items: center;
        gap: var(--space-6);
    }

    .mobile-nav {
        display: none;
    }
}

/* ==========================================================================
   Mobile navigation (details/summary, no JavaScript)

   Note: the disclosure is only ever toggled via its native open/closed
   state (never forced open with CSS while closed) — forcing a closed
   <details> open purely via `display` was verified in a real browser to
   leave its links unreachable by keyboard Tab despite being visible, so
   at the desktop breakpoint this whole element is hidden instead and
   .desktop-nav (a plain, non-details element) takes over.
   ========================================================================== */
.mobile-nav__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 700;
}

.mobile-nav__panel {
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-top: var(--border-hairline) solid var(--border-subtle);
}

.mobile-nav[open] .mobile-nav__panel {
    display: flex;
}

/* ==========================================================================
   Main shell
   ========================================================================== */
.main-shell {
    display: grid;
    min-height: calc(100vh - 5rem);
    place-items: center;
    padding: var(--space-6) var(--container-padding);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--brand-cream);
    border-top: var(--border-accent) solid var(--brand-gold);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-6);
}

.site-footer__logo {
    width: auto;
    height: clamp(1.75rem, 4vw, 2.25rem);
    aspect-ratio: 1425.32 / 633.38;
}

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
}

.site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.site-footer__nav a:hover,
.site-footer__nav a[aria-current="page"] {
    color: var(--brand-navy);
    text-decoration: underline;
    text-decoration-color: var(--brand-gold);
    text-decoration-thickness: 0.15em;
}

.site-footer__meta {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Small, quiet build credit — deliberately below the brand's own wordmark/nav
   in visual weight on both the light and dark footer, never competing with
   the client brand for attention. */
.site-footer__signature {
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.site-footer__signature-line {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.site-footer__signature-line--sub {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ==========================================================================
   Existing runtime content classes (unchanged — still used by
   resources/views/pages/** and resources/views/errors/**)
   ========================================================================== */
.runtime-card {
    width: min(100%, 40rem);
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.runtime-label,
dt {
    color: var(--text-muted);
    font-size: 0.875rem;
}

dl div {
    display: flex;
    gap: 0.75rem;
}

.runtime-debug {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* ==========================================================================
   Full-width page shell (overrides the centered single-card runtime-shell
   grid, which is still used as-is by the untouched public-placeholder
   route; used by every real, fully-composed page: home, product catalog
   and product detail)
   ========================================================================== */
.main-shell--full {
    display: block;
    min-height: 0;
    padding: 0;
    /* .main-shell's place-items:center (a grid-only property) still applies
       CSS Box Alignment to this block container's in-flow child even after
       display switches to block, shrink-wrapping+centering it instead of
       letting it fill 100% width — reset explicitly. Pre-existing bug,
       just never visible before a full-bleed, high-contrast section (the
       Editorial Navy hero) made the ~4% inset against the cream body
       obvious as a visible border. */
    place-items: normal;
}

/* ==========================================================================
   Shared section container (constrains every section's content to the
   same max width/inline padding as the header and footer)
   ========================================================================== */
.section__inner {
    width: min(100%, var(--container-max));
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ==========================================================================
   Section primitives (shared by every home page section partial)
   ========================================================================== */
.section {
    padding-block: var(--space-7);
}

.section__eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--brand-gold);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section__body {
    color: var(--text-muted);
    max-width: 42rem;
}

.section__body--on-navy {
    color: rgba(249, 229, 194, 0.85);
}

.section__body p {
    margin: 0 0 var(--space-4);
}

.section__body p:last-child {
    margin-bottom: 0;
}

.section__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--space-5);
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
    border: var(--border-hairline) solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.button--primary {
    background: var(--brand-navy);
    color: var(--brand-cream);
}

.button--primary:hover {
    border-color: var(--brand-gold);
}

.button--secondary {
    background: transparent;
    color: var(--brand-navy);
    border-color: var(--border-subtle);
}

.button--secondary:hover {
    border-color: var(--brand-gold);
}

.button--on-navy.button--primary {
    background: var(--brand-cream);
    color: var(--brand-navy);
}

.button--on-navy.button--secondary {
    background: transparent;
    color: var(--brand-cream);
    border-color: rgba(249, 229, 194, 0.4);
}

.button--on-navy:hover {
    border-color: var(--brand-gold);
}

/* ==========================================================================
   Hero section
   ========================================================================== */
.section--hero {
    padding-block: var(--space-8) var(--space-7);
}

.section--hero__inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.section--hero__inner--with-media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.section--hero__title {
    margin: 0 0 var(--space-4);
    color: var(--brand-navy);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.15;
}

.section--hero__subtitle {
    margin: 0 0 var(--space-4);
    max-width: 38rem;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
}

.section--hero__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Hero coverflow (homepage only — approved "Editorial Navy" concept from
   the active client's hero design review). Scoped --hc-* tokens
   keep this self-contained dark section from leaking into the rest of the
   light corporate theme, the same way .section--cta already carries its
   own navy background within an otherwise cream page.
   ========================================================================== */
.section--hero--coverflow {
    position: relative;
    padding-block: 0;
    overflow: hidden;
    isolation: isolate;
    /* Weighted, not linear: stays near-black through the header and slider
       (matching the approved Stitch screen, where the lighter marine tone
       only becomes prominent near the headline/curve) rather than reaching
       full #245170 halfway down a much shorter section. */
    background: linear-gradient(
        180deg,
        var(--hc-bg-start, #030b16) 0%,
        var(--hc-bg-start, #030b16) 45%,
        var(--hc-bg-mid, #0a2236) 75%,
        var(--hc-bg-end, #245170) 100%
    );
    color: var(--hc-ivory, #f2e6d1);
}

.section--hero__atmosphere {
    position: absolute;
    top: 8%;
    left: 50%;
    width: min(60vw, 820px);
    height: min(60vw, 820px);
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 50%, rgba(36, 81, 112, 0.32), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.section--hero__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-inline: clamp(0.75rem, 2vw, 2rem);
    padding-block: clamp(5.5rem, 11vw, 7.5rem) var(--space-6);
}

.section--hero__inner--coverflow {
    position: relative;
    z-index: 1;
    padding-block: 0 var(--space-8);
}

.section--hero__content--coverflow {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.section--hero--coverflow .section__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--hc-gold, var(--brand-gold));
}

.section--hero--coverflow .section__eyebrow::before,
.section--hero--coverflow .section__eyebrow::after {
    content: "";
    height: 1px;
    width: 2.5rem;
    background: var(--border-strong);
}

.section--hero--coverflow .section--hero__title {
    color: var(--hc-ivory, #f2e6d1);
}

.section--hero--coverflow .section--hero__title em,
.section--hero--coverflow .section--hero__title i {
    color: var(--hc-gold, var(--brand-gold));
    font-style: italic;
    font-weight: 400;
}

.section--hero--coverflow .section--hero__subtitle {
    margin-inline: auto;
    color: rgba(242, 230, 209, 0.78);
}

.section--hero--coverflow .section__cta-group {
    justify-content: center;
}

/* --------------------------------------------------------------------
   Coverflow component
   -------------------------------------------------------------------- */
.hero-coverflow {
    width: 100%;
    max-width: 100rem;
    margin-inline: auto;
}

/* Pointer-drag hardening (scoped to the slider only — the rest of the page
   keeps normal text selection): no native text selection or element-drag
   ghost inside the slider surface while dragging. */
.hero-coverflow,
.hero-coverflow__viewport,
.hero-coverflow__track,
.hero-coverflow__slide,
.hero-coverflow__card {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.hero-coverflow__image {
    -webkit-user-drag: none;
}

.hero-coverflow__viewport {
    position: relative;
    width: 100%;
    perspective: 1000px;
}

/* Base state (no JS / before enhancement): a real, fully accessible
   horizontally-scrollable list — every slide reachable by Tab, native
   scroll, no 3D transforms. JS adds .hero-coverflow--enhanced to layer
   the circular coverflow on top; this base never disappears, it is only
   visually superseded. */
.hero-coverflow__track {
    display: flex;
    list-style: none;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--container-padding);
    padding-block: var(--space-2) var(--space-4);
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hero-coverflow__track::-webkit-scrollbar {
    display: none;
}

.hero-coverflow__slide {
    flex: 0 0 auto;
    width: min(78vw, 19rem);
    scroll-snap-align: center;
}

.hero-coverflow__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 1px solid rgba(242, 230, 209, 0.1);
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--hc-bg-start, #030b16);
    box-shadow: 0 20px 45px -22px color-mix(in srgb, var(--hc-bg-start) 70%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.hero-coverflow__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-coverflow__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 7, 13, 0.92) 0%, rgba(3, 7, 13, 0.22) 55%, transparent 82%);
}

.hero-coverflow__caption {
    position: absolute;
    left: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: left;
}

.hero-coverflow__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-gold, var(--brand-gold));
}

.hero-coverflow__label {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hc-ivory, #f2e6d1);
}

/* Only the active card grows on hover/focus — neighbours never move,
   spacing never changes, nothing clips (the card's own overflow:hidden
   box simply scales as a whole). */
.hero-coverflow__slide[data-active="true"] .hero-coverflow__card:hover,
.hero-coverflow__slide[data-active="true"] .hero-coverflow__card:focus-visible {
    transform: scale(1.06) translateZ(0);
    box-shadow: 0 30px 60px -18px rgba(3, 7, 13, 0.75);
}

.hero-coverflow__slide:not([data-active="true"]) .hero-coverflow__card:hover,
.hero-coverflow__slide:not([data-active="true"]) .hero-coverflow__card:focus-visible {
    filter: brightness(1.1);
}

/* --------------------------------------------------------------------
   Enhanced (JS) coverflow layout — absolute-positioned circular track.
   Position/depth (transform, opacity, z-index) is applied inline by
   hero-coverflow.js per slide; CSS only supplies the stacking context,
   base geometry and transition timing.
   -------------------------------------------------------------------- */
.hero-coverflow--enhanced .hero-coverflow__track {
    position: relative;
    display: block;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    height: clamp(19rem, 62vw, 24rem);
    transform-style: preserve-3d;
    touch-action: pan-y;
    /* The 3D track sits at z=0 while depth-pushed neighbour cards sit
       behind it; if it caught pointer events it would swallow every
       side-card click. Hits pass through to the frontmost card (or the
       flat .hero-coverflow__viewport container, which owns the drag
       gesture); each in-range slide re-enables pointer events via JS. */
    pointer-events: none;
    /* Smooth snap-back when a below-threshold drag is released; suppressed
       via .is-dragging so the live pointer-follow stays 1:1 during a drag. */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-coverflow--enhanced .hero-coverflow__track.is-dragging {
    transition: none;
}

.hero-coverflow--enhanced .hero-coverflow__viewport {
    cursor: grab;
    touch-action: pan-y;
}

.hero-coverflow--enhanced .hero-coverflow__viewport:active {
    cursor: grabbing;
}

.hero-coverflow--enhanced .hero-coverflow__slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(80vw, 340px);
    scroll-snap-align: none;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.hero-coverflow--enhanced .hero-coverflow__slide:not([data-active="true"]) .hero-coverflow__card {
    cursor: pointer;
}

.hero-coverflow__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-5);
    /* Root cause of "prev/next don't respond": absolutely-positioned slides
       reach z-index 100 and a tall card box can overlap the controls row,
       intercepting the real button click. Lifting the whole controls layer
       above the slide stack keeps the buttons reliably clickable. */
    position: relative;
    z-index: 200;
}

.hero-coverflow__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242, 230, 209, 0.22);
    border-radius: 9999px;
    /* Opaque near-navy fallback first, so browsers without backdrop-filter
       support still get a solid, legible control rather than a transparent
       one; the translucent glass layer + blur below only enhance where
       supported. */
    background: #071019;
    color: var(--hc-ivory, #f2e6d1);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

@supports (backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px)) {
    .hero-coverflow__nav {
        background: rgba(5, 17, 31, 0.58);
        -webkit-backdrop-filter: blur(14px) saturate(120%);
        backdrop-filter: blur(14px) saturate(120%);
    }
}

@media (min-width: 768px) {
    .hero-coverflow__nav {
        width: 54px;
        height: 54px;
    }
}

.hero-coverflow__nav:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: var(--border-strong);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-coverflow__nav:focus-visible {
    border-color: var(--hc-gold, var(--brand-gold));
    outline: var(--border-accent) solid var(--brand-gold);
    outline-offset: 3px;
}

.hero-coverflow__nav:active {
    transform: translateY(0) scale(0.97);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.hero-coverflow__status {
    margin: 0;
    min-width: 6rem;
    text-align: center;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(242, 230, 209, 0.6);
}

/* --------------------------------------------------------------------
   Curved transition out of the hero into the dark product section that
   follows on the home route. Matches the approved Stitch composition:
   the strip's own surface continues the hero's lighter trailing marine
   tone (so its top edge meets the hero seamlessly), and the SVG path —
   filled with the near-black product-section colour — rises as a wave,
   blending straight into the dark section below with no hard break.
   -------------------------------------------------------------------- */
.section--hero__curve {
    position: relative;
    width: 100%;
    height: 3.5rem;
    margin-top: -1px;
    background: var(--hc-bg-end, #245170);
    color: var(--hc-bg-start, #030b16);
}

.section--hero__curve svg {
    display: block;
    width: 100%;
    height: 100%;
}

.section--hero__curve path {
    fill: currentColor;
}

/* ==========================================================================
   Dark routes (home, about, products.index, products.show) — Editorial Navy
   dark theme. .page--dark is the single body-level marker set by the
   layout's $isDarkRoute contract, and now also carries the ONE shared page
   background gradient for every dark route (previously duplicated near-
   identically across .home / .about-page / .products-index / .product-
   detail — those wrapper rules no longer set their own background and let
   this one show through). The rules further below are still scoped under
   each route's own content wrapper for text/card colors, so no other
   route's light corporate theme is touched and no shared section partial
   is changed globally.

   Gradient shape: a short near-black-but-clearly-navy band right under the
   header, blending — smoothly, no hard stop — into --hc-bg-mid within
   roughly the first screenful (vh-based, so it starts early on any page
   regardless of its total length), then HOLDING that same deep navy flat
   for the entire remainder of the page, however long. --hc-bg-mid is a
   controlled, premium deep navy, never a bright/light blue — and because
   it never eases toward the lighter --hc-bg-wash accent here, the visible
   ~70% majority of every dark page stays unambiguously deep navy rather
   than drifting lighter on longer pages.
   ========================================================================== */
.page--dark {
    /* Requirement (Faz 5 extension): .page--dark itself now draws every
       surface/border/text role it exposes to descendants from the active
       palette's own tokens, rather than the fixed deep_navy defaults —
       this is the single rule that makes the whole dark-route system
       (nearly every public route) follow palette selection. */
    --surface-page: var(--hc-bg-mid);
    --surface-card: var(--surface-card-dark);
    --surface-elevated: var(--surface-elevated-dark);
    --surface-muted: var(--surface-muted-dark);
    --border-subtle: var(--border-subtle-dark);
    --border-strong: var(--border-strong-dark);
    --text-primary: var(--hc-ivory);
    --text-secondary: var(--text-secondary-dark);
    --text-muted: var(--text-muted-dark);
    background:
        radial-gradient(120% 60% at 50% 35%, color-mix(in srgb, var(--hc-bg-wash) 12%, transparent), transparent 70%),
        linear-gradient(
            180deg,
            var(--hc-bg-start, #030b16) 0,
            var(--hc-bg-start, #030b16) 8vh,
            var(--hc-bg-mid, #0a2236) 30vh,
            var(--hc-bg-mid, #0a2236) 100%
        );
}

.home {
    /* No background of its own — the shared .page--dark gradient above
       shows through (this div has no background-color/-image set). */
    color: var(--hc-ivory, #f2e6d1);
}

/* Post-hero content sections: transparent so .page--dark's shared gradient
   shows through, with text switched to the ivory system. */
.home .section--product-grid,
.home .section--text,
.home .section--category-list,
.home .section--reference-strip,
.home .section--category-group {
    background: transparent;
    color: var(--hc-ivory, #f2e6d1);
}

.home .section--product-grid__title,
.home .section--text__title,
.home .section--category-list__title,
.home .section--reference-strip__title,
.home .section--category-group__title {
    color: var(--hc-ivory, #f2e6d1);
}

.home .section--product-grid__subtitle,
.home .section--text__subtitle,
.home .section--category-list__subtitle,
.home .section--reference-strip__subtitle,
.home .section--category-group__summary,
.home .section__body {
    color: var(--text-secondary);
}

.home .section__eyebrow {
    color: var(--hc-gold, var(--brand-gold));
}

/* Product cards → dark editorial surfaces (were cream panels). */
.home .product-card__link {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    color: var(--hc-ivory, #f2e6d1);
}

.home .product-card__link:hover {
    border-color: var(--hc-gold, var(--brand-gold));
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

.home .product-card__media {
    background: #0b1620;
}

.home .product-card__category {
    color: var(--text-muted);
}

.home .product-card__title {
    color: var(--hc-ivory, #f2e6d1);
}

.home .product-card__summary {
    color: rgba(242, 230, 209, 0.7);
}

/* Category-list framed panel → dark surface, gold hairline top retained. */
.home .section--category-list__panel {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    border-top-color: var(--hc-gold, var(--brand-gold));
}

/* Reference cards → dark surfaces. */
.home .reference-card__link {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    color: var(--hc-ivory, #f2e6d1);
}

.home a.reference-card__link:hover {
    border-color: var(--hc-gold, var(--brand-gold));
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

.home .reference-card__brand-name {
    color: var(--hc-ivory, #f2e6d1);
}

.home .reference-card__summary {
    color: rgba(242, 230, 209, 0.7);
}

/* Closing CTA band stays on the near-black system (a subtle marine-lit
   panel, not a lighter flat navy block). */
.home .section--cta {
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--hc-bg-wash) 28%, transparent), transparent 70%),
        var(--hc-bg-mid, #0a2236);
}

/* Buttons on the dark home surface use the ivory-on-navy treatment. */
.home .button--primary {
    background: var(--hc-ivory, #f2e6d1);
    color: #1b2436;
}

.home .button--primary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

.home .button--secondary {
    background: transparent;
    color: var(--hc-ivory, #f2e6d1);
    border-color: var(--border-strong);
}

.home .button--secondary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

/* --------------------------------------------------------------------
   Home footer — integrated with the same dark system instead of the
   cream band. Scoped to .site-footer--dark (home route only).
   -------------------------------------------------------------------- */
.site-footer--dark {
    background: var(--hc-bg-start, #030b16);
    border-top: 1px solid rgba(214, 157, 42, 0.42);
    color: var(--hc-ivory, #f2e6d1);
}

.site-footer--dark .site-footer__nav a {
    color: var(--text-secondary);
}

.site-footer--dark .site-footer__nav a:hover,
.site-footer--dark .site-footer__nav a[aria-current="page"] {
    color: var(--hc-ivory, #f2e6d1);
    text-decoration-color: var(--hc-gold, var(--brand-gold));
}

.site-footer--dark .site-footer__meta {
    color: var(--text-muted);
}

.site-footer--dark .site-footer__signature-line {
    color: var(--text-muted);
}

/* ==========================================================================
   Products routes (products.index / products.show) — Editorial Navy dark
   theme. Mirrors the home route's dark treatment above (same tokens, same
   override shape) but scoped to these two routes' own content wrappers, so
   neither route depends on the other and the shared section/card partials
   stay untouched everywhere else (including the home route's own featured
   product grid, which keeps its existing .home-scoped styling unchanged).
   ========================================================================== */
.products-index,
.product-detail {
    /* No background of their own — the shared .page--dark gradient shows
       through (these wrappers have no background-color/-image set). */
    color: var(--hc-ivory, #f2e6d1);
}

.products-index .section--page-intro__title,
.products-index .section--category-group__title,
.product-detail .section--product-detail__title {
    color: var(--hc-ivory, #f2e6d1);
}

.products-index .section--page-intro__subtitle,
.products-index .section--category-group__summary,
.product-detail .section--product-detail__summary,
.product-detail .section__body {
    color: var(--text-secondary);
}

.product-detail .section--product-detail__category {
    color: var(--text-muted);
}

.products-index .products-empty,
.products-index .products-empty__detail {
    color: var(--text-secondary);
}

.product-detail dt {
    color: var(--text-muted);
}

/* Buttons on the dark products surfaces use the same ivory-on-navy treatment
   as the home route. */
.products-index .button--primary,
.product-detail .button--primary {
    background: var(--hc-ivory, #f2e6d1);
    color: #1b2436;
}

.products-index .button--primary:hover,
.product-detail .button--primary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

.products-index .button--secondary,
.product-detail .button--secondary {
    background: transparent;
    color: var(--hc-ivory, #f2e6d1);
    border-color: var(--border-strong);
}

.products-index .button--secondary:hover,
.product-detail .button--secondary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

/* Product cards → dark editorial surfaces (were cream panels). Portrait
   ratio (was square) for a more editorial, less catalog-grid feel. Lift +
   image zoom on hover/focus for a livelier, more premium feel than a flat
   static card — the same easing curve used by the approved hero coverflow,
   kept for a consistent "premium motion" signature across the site. */
.products-index .product-card__link {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    color: var(--hc-ivory, #f2e6d1);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease,
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.products-index .product-card__link:hover,
.products-index .product-card__link:focus-visible {
    transform: translateY(-0.375rem);
    border-color: var(--hc-gold, var(--brand-gold));
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.85);
}

.products-index .product-card__media {
    aspect-ratio: 4 / 5;
    background: #0b1620;
    position: relative;
}

.products-index .product-card__media img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.products-index .product-card__link:hover .product-card__media img,
.products-index .product-card__link:focus-visible .product-card__media img {
    transform: scale(1.06);
}

.products-index .product-card__body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    gap: 0.375rem;
}

.products-index .product-card__category {
    color: var(--text-muted);
}

.products-index .product-card__title {
    color: var(--hc-ivory, #f2e6d1);
}

.products-index .product-card__summary {
    color: rgba(242, 230, 209, 0.7);
}

/* Small text-and-arrow CTA, not a button — the whole card is already the
   real link; this is a visual affordance inside it, not a second control. */
.products-index .product-card__cta {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--hc-gold, var(--brand-gold));
}

.products-index .product-card__link:hover .product-card__cta,
.products-index .product-card__link:focus-visible .product-card__cta {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Small, restrained "featured" flag — gold text on a translucent navy chip
   with a gold hairline, never a ribbon/sticker. Only rendered at all when
   $product['featured'] is true. */
.product-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 0.25rem 0.625rem;
    border: 1px solid rgba(214, 157, 42, 0.6);
    border-radius: var(--radius-sm);
    background: rgba(3, 7, 13, 0.62);
    color: var(--hc-gold, var(--brand-gold));
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
    .product-card__badge {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

/* Asymmetric editorial rhythm: the first card in every real category group
   is deliberately wider than its siblings. Deterministic and independent of
   dataset size (works with any product count, never leaves a broken gap) —
   not tied to the featured flag, which can legitimately mark any number of
   products and would otherwise make the grid mostly-wide instead of varied. */
@media (min-width: 48rem) {
    .products-index .product-grid > .product-card:first-child {
        grid-column: span 2;
    }

    .products-index .product-grid > .product-card:first-child .product-card__media {
        aspect-ratio: 16 / 10;
    }
}

/* Tighter vertical rhythm than the generic .section/.section--category-group
   defaults: the catalog's own intro is not a hero, so it should not cost as
   much whitespace before real products appear. Only the intro's own bottom
   and the first category group's own top are pulled in — the gap *between*
   repeated groups further down the page is untouched. */
.products-index .section--page-intro {
    padding-block: var(--space-6) var(--space-4);
}

.products-index .section--category-group:first-of-type {
    padding-top: var(--space-3);
}

/* Small, honest wayfinding line — real counts already computed server-side
   from the same $categories/$products the grid below renders, never a
   fabricated "in stock"/inventory implication. Gives the page a sense of a
   living, browsable collection instead of a bare heading. */
.products-index__meta {
    /* margin-bottom only — same reasoning as .category-filter below: must
       not override .section__inner's margin-inline:auto centering. */
    margin-bottom: var(--space-5);
    color: var(--hc-gold, var(--brand-gold));
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------
   Category filter row — an editorial tab bar: a full-width hairline
   baseline with each control's own underline sitting on it, the active
   one picked out in gold. Still no pill/tab-panel/glass surface — the
   "tab" feel comes from the shared baseline + typography, not chrome.
   -------------------------------------------------------------------- */
.category-filter {
    /* margin-bottom only — must not touch left/right, or it would override
       .section__inner's own margin-inline:auto centering and misalign the
       filter row against the intro/grid containers again. */
    margin-bottom: var(--space-5);
}

.category-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.category-filter__button {
    appearance: none;
    background: none;
    border: none;
    border-bottom: var(--border-accent) solid transparent;
    margin-bottom: -1px;
    padding: var(--space-2) 0;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(242, 230, 209, 0.6);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-filter__button:hover {
    color: var(--hc-ivory, #f2e6d1);
}

.category-filter__button[aria-pressed="true"] {
    color: var(--hc-ivory, #f2e6d1);
    border-bottom-color: var(--hc-gold, var(--brand-gold));
}

/* --------------------------------------------------------------------
   Products empty state
   -------------------------------------------------------------------- */
.section--products-empty__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 34rem;
}

.products-empty__detail {
    margin: 0;
}

/* --------------------------------------------------------------------
   Product detail — back link (breadcrumb-style, above the media/content
   grid) and image gallery viewer (large stage image + thumbnail strip).
   -------------------------------------------------------------------- */
.product-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.product-detail__back-link:hover,
.product-detail__back-link:focus-visible {
    color: var(--hc-ivory, #f2e6d1);
}

.product-gallery-viewer__stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #0b1620;
}

.product-gallery-viewer__stage img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Zoom is a light CSS enlargement only — no modal, no library. */
.product-gallery-viewer__stage:hover img,
.product-gallery-viewer__stage:focus-within img {
    transform: scale(1.03);
}

.product-gallery-viewer__control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(242, 230, 209, 0.3);
    border-radius: 9999px;
    background: rgba(3, 7, 13, 0.55);
    color: var(--hc-ivory, #f2e6d1);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.product-gallery-viewer__control:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

.product-gallery-viewer__control--prev {
    left: var(--space-3);
}

.product-gallery-viewer__control--next {
    right: var(--space-3);
}

.product-gallery-viewer__thumbs {
    display: flex;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.product-gallery-viewer__thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    padding: 0;
    border: 1px solid rgba(242, 230, 209, 0.16);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.product-gallery-viewer__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.product-gallery-viewer__thumb.is-active,
.product-gallery-viewer__thumb:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

/* ==========================================================================
   About route — Editorial Navy dark theme. Same shape as the .home block
   above (same tokens, same override list), scoped to .about-page so the
   shared section partials' light-theme base rules are untouched everywhere
   else. About uses the *default* (non-coverflow) hero variant — the only
   one of the six section types .home never needs an override for, since
   home always renders the coverflow hero instead.
   ========================================================================== */
.about-page {
    /* No background of its own — the shared .page--dark gradient shows
       through (this div has no background-color/-image set). */
    color: var(--hc-ivory, #f2e6d1);
}

.about-page .section--hero__title,
.about-page .section--product-grid__title,
.about-page .section--text__title,
.about-page .section--category-list__title,
.about-page .section--reference-strip__title,
.about-page .section--category-group__title {
    color: var(--hc-ivory, #f2e6d1);
}

.about-page .section--hero__subtitle,
.about-page .section--product-grid__subtitle,
.about-page .section--text__subtitle,
.about-page .section--category-list__subtitle,
.about-page .section--reference-strip__subtitle,
.about-page .section--category-group__summary,
.about-page .section__body {
    color: var(--text-secondary);
}

.about-page .section__eyebrow {
    color: var(--hc-gold, var(--brand-gold));
}

/* Product cards → dark editorial surfaces, ready for the day a product_grid
   CMS section on this route is wired to real products (not yet the case —
   see PublicViewModelFactory::staticPage(), which has no featured-products
   pass-through today). No fabricated data; this only styles real markup
   if/when it exists, exactly like .home already does for the same case. */
.about-page .product-card__link {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    color: var(--hc-ivory, #f2e6d1);
}

.about-page .product-card__link:hover {
    border-color: var(--hc-gold, var(--brand-gold));
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

.about-page .product-card__media {
    background: #0b1620;
}

.about-page .product-card__category {
    color: var(--text-muted);
}

.about-page .product-card__title {
    color: var(--hc-ivory, #f2e6d1);
}

.about-page .product-card__summary {
    color: rgba(242, 230, 209, 0.7);
}

/* Category-list framed panel → dark surface, gold hairline top retained. */
.about-page .section--category-list__panel {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    border-top-color: var(--hc-gold, var(--brand-gold));
}

/* Reference cards → dark surfaces, same future-readiness note as above:
   sections/reference-strip.php does not render real reference cards today
   (no verified reference data exists yet), only its own editorial framing
   text — this mirrors .home's identical, currently-unused rule. */
.about-page .reference-card__link {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    color: var(--hc-ivory, #f2e6d1);
}

.about-page a.reference-card__link:hover {
    border-color: var(--hc-gold, var(--brand-gold));
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

.about-page .reference-card__brand-name {
    color: var(--hc-ivory, #f2e6d1);
}

.about-page .reference-card__summary {
    color: rgba(242, 230, 209, 0.7);
}

/* Closing CTA band stays on the near-black system (a subtle marine-lit
   panel, not a lighter flat navy block). */
.about-page .section--cta {
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--hc-bg-wash) 28%, transparent), transparent 70%),
        var(--hc-bg-mid, #0a2236);
}

/* Buttons on the dark about surface use the ivory-on-navy treatment. */
.about-page .button--primary {
    background: var(--hc-ivory, #f2e6d1);
    color: #1b2436;
}

.about-page .button--primary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

.about-page .button--secondary {
    background: transparent;
    color: var(--hc-ivory, #f2e6d1);
    border-color: var(--border-strong);
}

.about-page .button--secondary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

/* ==========================================================================
   Works (references) and Contact routes — Editorial Navy dark theme, same
   shape as the .home/.products-index/.about-page blocks above (no shared
   partial touched, no layout change — colors only). Combined into one
   block where the two routes' needs are identical, since neither reuses
   the other's wrapper class.
   ========================================================================== */
.works-page,
.contact-page,
.legal-page {
    /* No background of their own — the shared .page--dark gradient shows
       through (these wrappers have no background-color/-image set). */
    color: var(--hc-ivory, #f2e6d1);
}

.works-page .section--page-intro__title,
.contact-page .section--page-intro__title,
.legal-page .section--page-intro__title,
.works-page .section--references__title {
    color: var(--hc-ivory, #f2e6d1);
}

.works-page .section--page-intro__subtitle,
.contact-page .section--page-intro__subtitle,
.legal-page .section--page-intro__subtitle,
.works-page .section__body,
.contact-page .section__body,
.legal-page .section__body {
    color: var(--text-secondary);
}

.works-page .references-empty,
.contact-page .contact-empty,
.legal-page .legal-empty {
    color: var(--text-secondary);
}

/* Reference cards → dark surfaces, same treatment as .home/.about-page. */
.works-page .reference-card__link {
    background: var(--surface-card);
    border-color: var(--border-subtle);
    color: var(--hc-ivory, #f2e6d1);
}

.works-page a.reference-card__link:hover {
    border-color: var(--hc-gold, var(--brand-gold));
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

.works-page .reference-card__brand-name {
    color: var(--hc-ivory, #f2e6d1);
}

.works-page .reference-card__summary {
    color: rgba(242, 230, 209, 0.7);
}

/* Contact detail rows — dt's muted-label treatment comes from the shared
   .page--dark dt rule below (same value the product detail meta list
   uses); dd/links inherit ivory from the wrapper above via normal cascade
   (no explicit dd rule exists to override). */
.contact-page .contact-details a:hover {
    color: var(--hc-gold, var(--brand-gold));
}

/* Directions card buttons (.button--secondary) — same ivory-on-navy
   treatment already used by .home/.products-index/.about-page's own
   secondary buttons. Without this, the buttons fell through to the base
   light-theme .button--secondary rule (var(--brand-navy) text), which is
   nearly invisible against this dark card surface. */
.contact-page .button--secondary {
    color: var(--hc-ivory, #f2e6d1);
    border-color: var(--border-strong);
}

.contact-page .button--secondary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

/* --------------------------------------------------------------------
   Contact bento grid — premium, asymmetric card rhythm on the same Deep
   Navy surface (no new tokens, no gradient re-tuning). Card sizing note:
   these are the ONLY colors used for the cards — reuses --hc-bg-mid/
   --hc-ivory/--hc-gold exactly as the rest of the dark-route system does.
   -------------------------------------------------------------------- */
.contact-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-5);
}

.contact-card {
    grid-column: span 12;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: 1.25rem;
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(140% 140% at 100% 0%, color-mix(in srgb, var(--hc-bg-wash) 55%, transparent), transparent 62%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.035), transparent 55%),
        var(--hc-bg-mid, #0a2236);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 22px 44px -30px rgba(0, 0, 0, 0.65);
    color: var(--hc-ivory, #f2e6d1);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(214, 157, 42, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 28px 54px -28px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .contact-card {
        transition: none;
    }

    .contact-card:hover {
        transform: none;
    }
}

@media (min-width: 1024px) {
    .contact-card--details,
    .contact-card--map {
        grid-column: span 8;
    }

    .contact-card--whatsapp,
    .contact-card--instagram {
        grid-column: span 4;
    }

    .contact-card--directions {
        grid-column: span 12;
    }
}

.contact-card__title {
    margin: 0;
    color: var(--hc-ivory, #f2e6d1);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.contact-card__body {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.contact-card--details .contact-details {
    margin: 0;
}

.contact-card__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    color: var(--hc-gold, var(--brand-gold));
}

.contact-card__icon svg {
    width: 100%;
    height: 100%;
}

.contact-card__handle {
    margin: 0;
    color: rgba(242, 230, 209, 0.6);
    font-size: var(--font-size-sm);
}

.contact-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--hc-gold, var(--brand-gold));
    font-weight: 600;
    text-decoration: none;
}

.contact-card__cta:hover {
    text-decoration: underline;
}

.contact-card__map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(242, 230, 209, 0.16);
}

.contact-card__map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* --------------------------------------------------------------------
   Contact/quote form — same direct-dark card treatment as .contact-card
   above (no new palette tokens; buttons stay on the code-owned
   .button--primary appearance system so palette/preset changes apply here
   automatically). Fields use a slightly lighter panel fill than the card
   background so their edges read clearly against the dark gradient.
   -------------------------------------------------------------------- */
.contact-form-panel {
    max-width: 44rem;
    padding: var(--space-6);
    border-radius: 1.25rem;
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(140% 140% at 100% 0%, color-mix(in srgb, var(--hc-bg-wash) 55%, transparent), transparent 62%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.035), transparent 55%),
        var(--hc-bg-mid, #0a2236);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 44px -30px rgba(0, 0, 0, 0.65);
}

.contact-form-panel__title {
    margin: 0 0 var(--space-2);
    color: var(--hc-ivory, #f2e6d1);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.contact-form-panel__intro {
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.contact-form-success {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid rgba(214, 157, 42, 0.4);
    background: rgba(214, 157, 42, 0.08);
    color: var(--hc-ivory, #f2e6d1);
}

.contact-form-success__title {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    color: var(--hc-gold, var(--brand-gold));
}

.contact-form-errors {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid rgba(214, 90, 90, 0.5);
    background: rgba(214, 90, 90, 0.1);
    color: var(--hc-ivory, #f2e6d1);
}

.contact-form-errors ul {
    margin: 0;
    padding-left: 1.25rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .contact-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contact-form__field label,
.contact-form__consent {
    font-size: var(--font-size-sm);
    color: rgba(242, 230, 209, 0.85);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(242, 230, 209, 0.22);
    background: rgba(255, 255, 255, 0.04);
    color: var(--hc-ivory, #f2e6d1);
    font: inherit;
    font-size: var(--font-size-base);
}

.contact-form__field textarea {
    resize: vertical;
    min-height: 8rem;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: rgba(242, 230, 209, 0.45);
}

.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
    outline: 2px solid var(--hc-gold, var(--brand-gold));
    outline-offset: 1px;
}

.contact-form__hint {
    margin: calc(var(--space-4) * -1) 0 0;
    font-size: var(--font-size-sm);
    color: rgba(242, 230, 209, 0.6);
}

/* Honeypot: present in the DOM for bots to fill, never visible or reachable
   for a real visitor (off-screen, not in the tab order, aria-hidden). */
.contact-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.contact-form__consent input {
    margin-top: 0.2rem;
}

.contact-form__consent a {
    color: var(--hc-gold, var(--brand-gold));
}

.contact-form__submit {
    align-self: flex-start;
}

/* --------------------------------------------------------------------
   Works index — real work data (works/work_translations/work_media),
   featured showcase + editorial grid. .works-page/.work-detail are
   always-dark routes (never used on a light-theme page), so these are
   written directly with their final ivory/navy colors — same direct-dark
   approach already used by .contact-card and .product-gallery-viewer*
   above, rather than a light-base-then-override split.
   -------------------------------------------------------------------- */
.section--works-empty__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 34rem;
}

.works-empty {
    margin: 0;
    color: var(--text-secondary);
}

.works-empty__detail {
    margin: 0;
    color: var(--text-secondary);
}

/* Same ivory-on-navy fix already applied to .contact-page/.work-detail —
   without this the empty-state "Return to Home" button falls through to
   the base light-theme .button--secondary (near-invisible navy text on
   this dark page background). */
.works-page .button--secondary {
    color: var(--hc-ivory, #f2e6d1);
    border-color: var(--border-strong);
}

.works-page .button--secondary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.work-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--hc-ivory, #f2e6d1);
    border: 1px solid var(--border-subtle);
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--surface-card);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease,
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card:hover,
.work-card:focus-visible {
    transform: translateY(-0.25rem);
    border-color: var(--hc-gold, var(--brand-gold));
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.85);
}

.work-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0b1620;
}

.work-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card:hover .work-card__media img,
.work-card:focus-visible .work-card__media img {
    transform: scale(1.06);
}

.work-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 0.25rem 0.625rem;
    border: 1px solid rgba(214, 157, 42, 0.6);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--hc-bg-start) 72%, transparent);
    color: var(--hc-gold, var(--brand-gold));
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.work-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.375rem;
    padding: var(--space-4);
}

.work-card__sector {
    color: var(--hc-gold, var(--brand-gold));
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.work-card__title {
    color: var(--hc-ivory, #f2e6d1);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.work-card__client {
    color: rgba(242, 230, 209, 0.6);
    font-size: var(--font-size-sm);
}

.work-card__summary {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.work-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--hc-gold, var(--brand-gold));
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* Featured showcase card — same visual family, larger, becomes a two-column
   horizontal layout from 1024px up. Only ever rendered when the real
   is_featured flag on the first (highest-priority) work is true. */
.work-card--featured {
    margin-bottom: var(--space-6);
}

.work-card--featured .work-card__media {
    aspect-ratio: 16 / 9;
}

.work-card--featured .work-card__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.work-card--featured .work-card__summary {
    max-width: 46rem;
    font-size: var(--font-size-lg);
}

@media (min-width: 1024px) {
    .work-card--featured {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .work-card--featured .work-card__media {
        height: 100%;
        aspect-ratio: auto;
    }

    .work-card--featured .work-card__body {
        justify-content: center;
        padding: var(--space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-card {
        transition: none;
    }

    .work-card:hover,
    .work-card:focus-visible {
        transform: none;
    }

    .work-card__media img {
        transition: none;
    }

    .work-card:hover .work-card__media img,
    .work-card:focus-visible .work-card__media img {
        transform: none;
    }
}

/* --------------------------------------------------------------------
   Work detail — reuses .product-gallery-viewer as-is (product-catalog.js
   is purely data-attribute driven, no work-specific JS needed) alongside
   new .section--work-detail__* text styles.
   -------------------------------------------------------------------- */
.work-detail {
    color: var(--hc-ivory, #f2e6d1);
}

.work-detail .section__body {
    color: var(--text-secondary);
}

/* Same ivory-on-navy fix already applied to .contact-page/.products-index/
   .product-detail — without this the "Back to Works" button falls through
   to the base light-theme .button--secondary (near-invisible navy text on
   this dark card/page background). */
.work-detail .button--secondary {
    color: var(--hc-ivory, #f2e6d1);
    border-color: var(--border-strong);
}

.work-detail .button--secondary:hover {
    border-color: var(--hc-gold, var(--brand-gold));
}

.work-detail__back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.work-detail__back-link:hover,
.work-detail__back-link:focus-visible {
    color: var(--hc-ivory, #f2e6d1);
}

.section--work-detail__inner {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
}

.section--work-detail__sector {
    margin: 0 0 var(--space-2);
    color: var(--hc-gold, var(--brand-gold));
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.section--work-detail__title {
    margin: 0 0 var(--space-3);
    color: var(--hc-ivory, #f2e6d1);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.15;
}

.section--work-detail__client {
    margin: 0 0 var(--space-3);
    color: rgba(242, 230, 209, 0.6);
    font-size: var(--font-size-sm);
}

.section--work-detail__summary {
    margin: 0 0 var(--space-4);
    color: rgba(242, 230, 209, 0.85);
    font-size: var(--font-size-lg);
}

.section--work-detail__back {
    margin-top: var(--space-5);
}

@media (max-width: 767.98px) {
    .section--work-detail__inner {
        grid-template-columns: 1fr;
    }
}

/* Shared dt label color for every dark route's definition-list rows (e.g.
   contact-page's contact-details, product-detail's meta list). */
.page--dark dt {
    color: var(--text-muted);
}

/* ==========================================================================
   Text section
   ========================================================================== */
.section--text__inner {
    max-width: 42rem;
}

.section--text__title {
    margin: 0 0 var(--space-4);
    color: var(--brand-navy);
    font-size: clamp(1.375rem, 3vw, 2rem);
}

.section--text__subtitle {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
}

/* Optional supporting image: opt-in whenever a text-type section carries
   content_sections.media_asset_id (about.intro today; generic to every text
   section, never key-specific — see sections/text.php). Absent media, .section
   --text__inner keeps its plain 42rem single-column rule above untouched; this
   only takes effect via the --with-media modifier class. Mobile stacks single
   column; from 768px the text/image split lands at roughly 58/42. */
.section--text__inner--with-media {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--space-6);
    max-width: none;
}

@media (min-width: 768px) {
    .section--text__inner--with-media {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: var(--space-7);
    }
}

.section--text__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Category list section (framed panel, gold accent border)
   ========================================================================== */
.section--category-list__panel {
    padding: var(--space-6);
    border: var(--border-hairline) solid var(--border-subtle);
    border-top: var(--border-accent) solid var(--brand-gold);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    max-width: 46rem;
}

.section--category-list__title {
    margin: 0 0 var(--space-3);
    color: var(--brand-navy);
    font-size: clamp(1.375rem, 3vw, 2rem);
}

.section--category-list__subtitle {
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
}

/* ==========================================================================
   Product grid section
   ========================================================================== */
.section--product-grid__intro {
    max-width: 42rem;
    margin-bottom: var(--space-6);
}

.section--product-grid__title {
    margin: 0 0 var(--space-3);
    color: var(--brand-navy);
    font-size: clamp(1.375rem, 3vw, 2rem);
}

.section--product-grid__subtitle {
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-5);
    margin: 0 0 var(--space-6);
}

/* Admin-selected fixed column count (Görüntüleme ayarları, product-polish
   phase) — an explicit alternative to the default fluid auto-fill above.
   Collapses to fewer columns on narrower viewports so a 3/4-column choice
   never forces cramped cards on mobile. */
.product-grid--columns-2,
.product-grid--columns-3,
.product-grid--columns-4 {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 480px) {
    .product-grid--columns-2,
    .product-grid--columns-3,
    .product-grid--columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .product-grid--columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-grid--columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .product-grid--columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.product-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: var(--border-hairline) solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-card__link:hover {
    border-color: var(--brand-gold);
    box-shadow: var(--shadow-sm);
}

.product-card__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--brand-cream);
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
}

.product-card__category {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-card__title {
    font-weight: 700;
    color: var(--brand-navy);
}

.product-card__summary {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ==========================================================================
   Reference strip section
   ========================================================================== */
.section--reference-strip__inner {
    max-width: 42rem;
    text-align: center;
    margin-inline: auto;
}

.section--reference-strip__title {
    margin: 0 0 var(--space-3);
    color: var(--brand-navy);
    font-size: clamp(1.375rem, 3vw, 2rem);
}

.section--reference-strip__subtitle {
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
}

/* ==========================================================================
   CTA section (navy closing band — the only other section besides the
   header/footer that uses navy as a background; no logo image is ever
   placed on it, only cream text and buttons). An optional low-intensity
   background image may sit behind the navy fill — decorative only (see
   sections/cta.php's alt="" + aria-hidden), never a side card; absent
   media this section is unchanged from a plain navy band.
   ========================================================================== */
.section--cta {
    position: relative;
    background: var(--brand-navy);
    color: var(--brand-cream);
    overflow: hidden;
}

.section--cta__media {
    /* Verified in real Chrome at this exact value against the navy/cream
       brand pair: the real CTA heading/body/button stay fully opaque and
       high-contrast (unaffected, since text renders on its own layer above
       the image) regardless of source image content. 0.14 keeps the image
       genuinely low-intensity/ambient — a bright or busy source photo will
       still show through faintly, which is a content-choice concern for
       whoever picks the image, not something opacity alone can fully hide. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.14;
    z-index: 0;
}

.section--cta__inner {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    text-align: center;
    margin-inline: auto;
}

.section--cta__title {
    margin: 0 0 var(--space-3);
    color: var(--brand-cream);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

.section--cta__subtitle {
    margin: 0 0 var(--space-3);
    color: rgba(249, 229, 194, 0.85);
}

.section--cta .section__cta-group {
    justify-content: center;
}

/* ==========================================================================
   Page intro (products catalog page heading — the page's own <h1>, used
   in place of a CMS-composed hero for real catalog/listing pages)
   ========================================================================== */
.section--page-intro__inner {
    max-width: 46rem;
}

.section--page-intro__title {
    margin: 0 0 var(--space-4);
    color: var(--brand-navy);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
}

.section--page-intro__subtitle {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-size-lg);
}

/* ==========================================================================
   Products empty state
   ========================================================================== */
.products-empty {
    margin: 0;
    color: var(--text-muted);
}

/* ==========================================================================
   Category group (real catalog listing, grouped by category; reuses the
   .product-grid/.product-card component styles defined above)
   ========================================================================== */
.section--category-group {
    padding-block: var(--space-6);
}

.section--category-group__title {
    margin: 0 0 var(--space-2);
    color: var(--brand-navy);
    font-size: clamp(1.375rem, 3vw, 2rem);
}

.section--category-group__summary {
    margin: 0 0 var(--space-5);
    max-width: 42rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Product detail
   ========================================================================== */
.section--product-detail__inner {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
}

.section--product-detail__category {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.section--product-detail__title {
    margin: 0 0 var(--space-3);
    color: var(--brand-navy);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.15;
}

.section--product-detail__summary {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-size-lg);
}

.section--product-detail__back {
    margin-top: var(--space-5);
}

/* ==========================================================================
   Product supplementary meta (usage areas / material / production info —
   reuses the existing generic dt/dl styling already relied on elsewhere)
   ========================================================================== */
.product-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 42rem;
    margin: 0;
}

/* ==========================================================================
   References (real client references — brand name, logo, optional website
   link and short description; empty/graceful states share this section)
   ========================================================================== */
.section--references__title {
    margin: 0 0 var(--space-5);
    color: var(--brand-navy);
    font-size: clamp(1.375rem, 3vw, 2rem);
}

.references-empty {
    margin: 0;
    color: var(--text-muted);
}

.references-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-5);
}

.reference-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5);
    text-align: center;
    text-decoration: none;
    color: inherit;
    border: var(--border-hairline) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.reference-card__link:hover {
    border-color: var(--brand-gold);
    box-shadow: var(--shadow-sm);
}

.reference-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4rem;
}

.reference-card__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.reference-card__brand-name {
    font-weight: 700;
    color: var(--brand-navy);
}

.reference-card__summary {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ==========================================================================
   Contact details (real phone/WhatsApp/email/address/working-hours/map
   link — each rendered only when present and, for links, fail-closed
   validated; the generic dt/dl div rules above provide row layout)
   ========================================================================== */
.contact-empty {
    margin: 0;
    color: var(--text-muted);
}

/* ==========================================================================
   Legal document body (privacy/kvkk/cookies — real long-form plain-text
   copy via PublicPlainTextRenderer, same .section__body reading width as
   every other prose section)
   ========================================================================== */
.legal-empty {
    margin: 0;
    color: var(--text-muted);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 42rem;
    margin: 0;
}

.contact-details dd {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Responsive media queries
   ========================================================================== */
@media (max-width: 767.98px) {
    .section--hero__inner--with-media {
        grid-template-columns: 1fr;
    }

    .section--hero__media {
        order: -1;
    }

    .section--product-detail__inner {
        grid-template-columns: 1fr;
    }

    /* Mobile coverflow: overflow-x:hidden is the hard guarantee against
       page-level horizontal scroll at 320/390px even if a future card
       count pushes the JS math further than tuned for; the base slide
       width above (min(80vw, 340px)) already keeps neighbours to a
       small peeking edge. */
    .hero-coverflow__viewport {
        overflow-x: hidden;
    }
}

@media (max-width: 374.98px) {
    .site-header__inner {
        gap: var(--space-2) var(--space-3);
    }

    .brand-lockup {
        gap: var(--space-2);
    }
}

@media (min-width: 768px) {
    .hero-coverflow--enhanced .hero-coverflow__slide {
        width: clamp(320px, 32vw, 400px);
    }

    .hero-coverflow--enhanced .hero-coverflow__track {
        height: clamp(24rem, 40vw, 31rem);
    }
}

@media (min-width: 1024px) {
    .site-header__inner {
        padding-block: var(--space-4);
    }

    /* Starting direction per visual-fidelity correction: active card
       enlarged versus the previous min(20vw,18rem) cap, while keeping the
       same ~4:5 portrait ratio. Tuned against the approved Stitch render. */
    .hero-coverflow--enhanced .hero-coverflow__slide {
        width: clamp(360px, 29vw, 460px);
    }

    .hero-coverflow--enhanced .hero-coverflow__track {
        height: clamp(26rem, 36vw, 36rem);
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }

    .hero-coverflow__card,
    .hero-coverflow__nav,
    .hero-coverflow--enhanced .hero-coverflow__slide {
        transition: none;
    }
}

/* ==========================================================================
   Appearance: Renk Paleti / Butonlar (basic-admin-cms.md §15). data-palette /
   data-primary-button / data-secondary-button on <html> come only from the
   allowlisted Gbox\Content\AppearancePresets keys (PublicAppearanceReader
   fails closed to the defaults below on anything else). The default preset
   ('deep_navy' / 'solid' / 'outline') intentionally has no override rule
   here — it IS the :root / .button--primary / .button--secondary rules
   above, so an installation with no site_appearance row/table looks
   identical to before this feature existed.

   Every palette below now redefines the FULL token set (§13: "koyu, ana,
   orta, açık ve çok açık tonları; gradient başlangıç/bitişini; buton ve
   hover ilişkilerini; açık/koyu yüzey kontrastlarını"), not just the three
   --brand-* tokens: the --hc-bg-* / --hc-ivory dark-route background+text
   pair (previously only Industrial Yellow had these — now generalized to
   all 11, so it is no longer a special case) and the "-dark" surface,
   border and text tokens .page--dark maps onto the public --surface-*,
   --border-* and --text-* names for every descendant. Each palette's
   four background stops
   follow the same near-black -> saturated-mid -> richer-wash -> lighter-
   end ramp Industrial Yellow already used specifically to avoid a flat
   2-stop blend reading as muddy brown/gray; every stop here was verified
   against its palette's --hc-ivory at >= 4.5:1 (WCAG AA), see
   appearance_contrast_check.php. */
[data-palette="black_silver"] {
    --brand-navy: #1c1c1e;
    --brand-gold: #c7c9d1;
    --brand-cream: #f2f2f4;
    --hc-bg-start: #0a0a0b;
    --hc-bg-mid: #1a1a1e;
    --hc-bg-wash: #2c2c35;
    --hc-bg-end: #464653;
    --hc-ivory: #e9e9ec;
    --surface-muted-dark: #17171b;
    --surface-card-dark: #1d1d22;
    --surface-elevated-dark: #26262d;
    --border-subtle-dark: rgba(233, 233, 236, 0.14);
    --border-strong-dark: rgba(233, 233, 236, 0.4);
    --text-secondary-dark: rgba(233, 233, 236, 0.72);
    --text-muted-dark: rgba(233, 233, 236, 0.55);
}

[data-palette="champagne_gold"] {
    --brand-navy: #4a3b1a;
    --brand-gold: #d4af37;
    --brand-cream: #f7ecd3;
    --hc-bg-start: #0d0b08;
    --hc-bg-mid: #2a210f;
    --hc-bg-wash: #4b3a16;
    --hc-bg-end: #715a28;
    --hc-ivory: #f2ede3;
    --surface-muted-dark: #362a13;
    --surface-card-dark: #423316;
    --surface-elevated-dark: #52401c;
    --border-subtle-dark: rgba(242, 237, 227, 0.14);
    --border-strong-dark: rgba(242, 237, 227, 0.4);
    --text-secondary-dark: rgba(242, 237, 227, 0.72);
    --text-muted-dark: rgba(242, 237, 227, 0.55);
}

[data-palette="burgundy"] {
    --brand-navy: #6b1423;
    --brand-gold: #d4a56a;
    --brand-cream: #f5e3d8;
    --hc-bg-start: #0d0708;
    --hc-bg-mid: #2b0d12;
    --hc-bg-wash: #4f121c;
    --hc-bg-end: #772231;
    --hc-ivory: #f2e9e3;
    --surface-muted-dark: #351218;
    --surface-card-dark: #41161d;
    --surface-elevated-dark: #501b24;
    --border-subtle-dark: rgba(242, 233, 227, 0.14);
    --border-strong-dark: rgba(242, 233, 227, 0.4);
    --text-secondary-dark: rgba(242, 233, 227, 0.72);
    --text-muted-dark: rgba(242, 233, 227, 0.55);
}

[data-palette="forest_green"] {
    --brand-navy: #1f4a30;
    --brand-gold: #c9a44c;
    --brand-cream: #eef3ea;
    --hc-bg-start: #080c0a;
    --hc-bg-mid: #11281a;
    --hc-bg-wash: #1a472c;
    --hc-bg-end: #2d6c46;
    --hc-ivory: #eaf0e5;
    --surface-muted-dark: #173121;
    --surface-card-dark: #1b3b28;
    --surface-elevated-dark: #224931;
    --border-subtle-dark: rgba(234, 240, 229, 0.14);
    --border-strong-dark: rgba(234, 240, 229, 0.4);
    --text-secondary-dark: rgba(234, 240, 229, 0.72);
    --text-muted-dark: rgba(234, 240, 229, 0.55);
}

[data-palette="emerald"] {
    --brand-navy: #0f5c4c;
    --brand-gold: #2fd9ac;
    --brand-cream: #e6f7f1;
    --hc-bg-start: #070d0c;
    --hc-bg-mid: #0d2b25;
    --hc-bg-wash: #124f42;
    --hc-bg-end: #227765;
    --hc-ivory: #e3f2ed;
    --surface-muted-dark: #12352e;
    --surface-card-dark: #164138;
    --surface-elevated-dark: #1b5045;
    --border-subtle-dark: rgba(227, 242, 237, 0.14);
    --border-strong-dark: rgba(227, 242, 237, 0.4);
    --text-secondary-dark: rgba(227, 242, 237, 0.72);
    --text-muted-dark: rgba(227, 242, 237, 0.55);
}

[data-palette="warm_cream"] {
    --brand-navy: #4a3b28;
    --brand-gold: #cbb894;
    --brand-cream: #f8f0e2;
    --hc-bg-start: #0c0a09;
    --hc-bg-mid: #241d14;
    --hc-bg-wash: #413220;
    --hc-bg-end: #634f36;
    --hc-ivory: #f2ede3;
    --surface-muted-dark: #2d251a;
    --surface-card-dark: #372d20;
    --surface-elevated-dark: #443727;
    --border-subtle-dark: rgba(242, 237, 227, 0.14);
    --border-strong-dark: rgba(242, 237, 227, 0.4);
    --text-secondary-dark: rgba(242, 237, 227, 0.72);
    --text-muted-dark: rgba(242, 237, 227, 0.55);
}

[data-palette="ocean_blue"] {
    --brand-navy: #0f5c82;
    --brand-gold: #6fd6e0;
    --brand-cream: #e7f6fa;
    --hc-bg-start: #070b0d;
    --hc-bg-mid: #0d212b;
    --hc-bg-wash: #123b4f;
    --hc-bg-end: #225b77;
    --hc-ivory: #e3eff2;
    --surface-muted-dark: #122a35;
    --surface-card-dark: #163341;
    --surface-elevated-dark: #1b3f50;
    --border-subtle-dark: rgba(227, 239, 242, 0.14);
    --border-strong-dark: rgba(227, 239, 242, 0.4);
    --text-secondary-dark: rgba(227, 239, 242, 0.72);
    --text-muted-dark: rgba(227, 239, 242, 0.55);
}

/* --brand-navy deepened from the original #c1602e (a mid-tone burnt orange
   too light to serve this palette's dual role — button-fill background AND
   standalone text-on-white — unlike every other palette's dark/saturated
   navy-role color): #c1602e only reached 3.73:1 against its own cream and
   4.22:1 against white, both under WCAG AA's 4.5:1. #9c4a20 is the same
   rust/terracotta family at a deeper, more saturated depth (matches how
   e.g. burgundy/forest_green use a deep, not mid-tone, navy-role color). */
[data-palette="terracotta"] {
    --brand-navy: #9c4a20;
    --brand-gold: #e8b23d;
    --brand-cream: #fcefdf;
    --hc-bg-start: #0d0907;
    --hc-bg-mid: #2b170d;
    --hc-bg-wash: #4f2712;
    --hc-bg-end: #773f22;
    --hc-ivory: #f2ebe3;
    --surface-muted-dark: #351e12;
    --surface-card-dark: #412416;
    --surface-elevated-dark: #502d1b;
    --border-subtle-dark: rgba(242, 235, 227, 0.14);
    --border-strong-dark: rgba(242, 235, 227, 0.4);
    --text-secondary-dark: rgba(242, 235, 227, 0.72);
    --text-muted-dark: rgba(242, 235, 227, 0.55);
}

[data-palette="royal_purple"] {
    --brand-navy: #4a1f7a;
    --brand-gold: #c9a6e8;
    --brand-cream: #f3ecf9;
    --hc-bg-start: #0a070d;
    --hc-bg-mid: #1b0d2b;
    --hc-bg-wash: #2f124f;
    --hc-bg-end: #4a2277;
    --hc-ivory: #ebe3f2;
    --surface-muted-dark: #231235;
    --surface-card-dark: #2a1641;
    --surface-elevated-dark: #341b50;
    --border-subtle-dark: rgba(235, 227, 242, 0.14);
    --border-strong-dark: rgba(235, 227, 242, 0.4);
    --text-secondary-dark: rgba(235, 227, 242, 0.72);
    --text-muted-dark: rgba(235, 227, 242, 0.55);
}

/* Industrial Yellow: the yellow-on-black identity that used to be this
   palette's one special case is now just this palette's own instance of
   the same architecture every other palette uses above. The 4-stop black
   #090909 -> #241E00 -> #8A6500 -> #F5C400 ramp (mapped onto the standard
   start/mid/wash/end roles) avoids a flat 2-stop black->yellow blend
   reading as muddy brown through the mid tones. --brand-navy carries the
   yellow so .button--primary actually pops against the dark page
   background instead of blending into it; --brand-cream goes dark so its
   text stays legible. */
[data-palette="industrial_yellow"] {
    --brand-navy: #f5c400;
    --brand-gold: #ffb000;
    --brand-cream: #171717;
    --hc-bg-start: #090909;
    --hc-bg-mid: #241e00;
    --hc-bg-wash: #8a6500;
    --hc-bg-end: #f5c400;
    --hc-ivory: #f7f7f2;
    --surface-muted-dark: #2a2409;
    --surface-card-dark: #362f0c;
    --surface-elevated-dark: #473e10;
    --border-subtle-dark: rgba(247, 247, 242, 0.14);
    --border-strong-dark: rgba(247, 247, 242, 0.4);
    --text-secondary-dark: rgba(247, 247, 242, 0.72);
    --text-muted-dark: rgba(247, 247, 242, 0.55);
}

[data-primary-button="soft"] .button--primary {
    background: rgba(0, 0, 0, 0.06);
    color: var(--brand-navy);
}

[data-primary-button="outline"] .button--primary {
    background: transparent;
    color: var(--brand-navy);
    border-color: var(--border-subtle);
}

[data-primary-button="minimal"] .button--primary {
    background: transparent;
    color: var(--brand-navy);
    border-color: transparent;
    text-decoration: underline;
}

[data-primary-button="rounded"] .button--primary {
    border-radius: 999px;
}

[data-secondary-button="solid"] .button--secondary {
    background: var(--brand-navy);
    color: var(--brand-cream);
    border-color: transparent;
}

[data-secondary-button="soft"] .button--secondary {
    background: rgba(0, 0, 0, 0.06);
    color: var(--brand-navy);
    border-color: transparent;
}

[data-secondary-button="minimal"] .button--secondary {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
}

[data-secondary-button="rounded"] .button--secondary {
    border-radius: 999px;
}

/* --------------------------------------------------------------------
   Dark-surface contrast safety net. The presets above set navy text on a
   transparent or near-transparent fill (primary: soft/outline/minimal;
   secondary: soft) — readable only because that transparency resolves to
   the light page background. On every dark "ivory-on-navy" surface
   (.button--on-navy plus each route's own dark treatment below) the same
   navy text against a dark background fails WCAG AA contrast; this is the
   exact "near-invisible navy text" failure already fixed once for the
   default preset elsewhere in this file (see .contact-page/.work-detail
   comments above) — it resurfaces for these three presets specifically
   because their override rules are equal-specificity and come later in
   the cascade. Each selector below pairs the preset attribute with a dark
   scope, giving it higher specificity (3 compound parts vs 2) so it wins
   regardless of source order, and restores the ivory pairing for text/
   fill only — radius, underline and border weight already set by the
   rules above are left untouched.
   -------------------------------------------------------------------- */
/* Industrial Yellow's --brand-navy role is bright yellow (#f5c400), not a
   dark tone — correct as a button FILL (solid primary: yellow bg / near-
   black text) but unreadable as button TEXT on a light surface (yellow-on-
   white fails WCAG AA badly, ~1.6:1). These three selectors are the only
   button rules that render --brand-navy as light-surface text; a near-black
   override keeps this palette's yellow-on-black identity everywhere it
   already reads correctly (solid/rounded primary, every dark/on-navy
   surface) and only corrects the light-surface text cases. `html[data-
   palette]` adds a type selector so this reliably outranks the button-only
   preset rules below regardless of source order — see the general dark-
   surface note further down for the same specificity technique. */
html[data-palette="industrial_yellow"] .button--secondary {
    color: #171717;
}

html[data-palette="industrial_yellow"][data-primary-button="soft"] .button--primary,
html[data-palette="industrial_yellow"][data-primary-button="outline"] .button--primary,
html[data-palette="industrial_yellow"][data-primary-button="minimal"] .button--primary {
    color: #171717;
}

html[data-palette="industrial_yellow"][data-secondary-button="soft"] .button--secondary {
    color: #171717;
}

/* The base industrial_yellow secondary-text fix above is unconditional (no
   preset attribute required), so it also outranks every dark-surface
   scope's own unprefixed color:hc-ivory rule (.contact-page .button--
   secondary etc. — specificity 2 classes vs this fix's 1 attr + 1 class +
   1 type) for the *default* secondary preset (outline/rounded/minimal, all
   of which inherit color from that base scope rule rather than setting
   their own). Reassert ivory here, matching its specificity via the same
   `html` prefix and coming later in source to win the tie. Harmless no-op
   for every other palette, which already resolves to ivory here anyway. */
html .button--on-navy.button--secondary,
html .home .button--secondary,
html .products-index .button--secondary,
html .product-detail .button--secondary,
html .about-page .button--secondary,
html .contact-page .button--secondary,
html .work-detail .button--secondary,
html .works-page .button--secondary {
    color: var(--hc-ivory, #f2e6d1);
}

/* `html` type-selector prefix matches the Industrial Yellow light-surface
   fix above's specificity exactly (3 classes/attrs + 1 type each) so
   source order — these rules come later — breaks the tie in favor of the
   dark surface here. Without it, that fix's near-black light-surface text
   color would win even inside .button--on-navy/.home/etc, reproducing the
   same invisible-button failure on Industrial Yellow specifically. */
html[data-primary-button="soft"] .button--on-navy.button--primary,
html[data-primary-button="soft"] .home .button--primary,
html[data-primary-button="soft"] .products-index .button--primary,
html[data-primary-button="soft"] .product-detail .button--primary,
html[data-primary-button="soft"] .about-page .button--primary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--hc-ivory, #f2e6d1);
    border-color: transparent;
}

html[data-primary-button="outline"] .button--on-navy.button--primary,
html[data-primary-button="outline"] .home .button--primary,
html[data-primary-button="outline"] .products-index .button--primary,
html[data-primary-button="outline"] .product-detail .button--primary,
html[data-primary-button="outline"] .about-page .button--primary {
    background: transparent;
    color: var(--hc-ivory, #f2e6d1);
    border-color: var(--border-strong);
}

html[data-primary-button="minimal"] .button--on-navy.button--primary,
html[data-primary-button="minimal"] .home .button--primary,
html[data-primary-button="minimal"] .products-index .button--primary,
html[data-primary-button="minimal"] .product-detail .button--primary,
html[data-primary-button="minimal"] .about-page .button--primary {
    background: transparent;
    color: var(--hc-ivory, #f2e6d1);
    border-color: transparent;
}

html[data-secondary-button="soft"] .button--on-navy.button--secondary,
html[data-secondary-button="soft"] .home .button--secondary,
html[data-secondary-button="soft"] .products-index .button--secondary,
html[data-secondary-button="soft"] .product-detail .button--secondary,
html[data-secondary-button="soft"] .about-page .button--secondary,
html[data-secondary-button="soft"] .contact-page .button--secondary,
html[data-secondary-button="soft"] .work-detail .button--secondary,
html[data-secondary-button="soft"] .works-page .button--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--hc-ivory, #f2e6d1);
    border-color: transparent;
}