/* css/section-components.css */
/* Section Components Library — Batch 5C Stage 1 (FAQ) + Stage 1.5 (full design system) */
/* Loaded AFTER css/style.css; all classes prefixed `sc-` to avoid collisions. */
/* Purely additive — does not override or restyle anything that exists today.   */
/* See docs/design-system.md for the canonical written specification.           */

:root {
    /* =================================================== */
    /* === Colour: brand                               === */
    /* =================================================== */
    --sc-brand-red: #B22A1F;
    --sc-brand-red-deep: #8B1F15;
    --sc-brand-red-soft: rgba(178, 42, 31, 0.08);
    --sc-brand-red-glow: rgba(178, 42, 31, 0.18);

    /* =================================================== */
    /* === Colour: neutrals & text                     === */
    /* =================================================== */
    --sc-color-page: #FFFFFF;
    --sc-color-surface-alt: #FAFAF9;
    --sc-color-surface-tint: #F5F5F4;
    --sc-color-border-faint: rgba(0, 0, 0, 0.05);
    --sc-color-border-subtle: #E6E6E6;
    --sc-color-border-strong: #D1D5DB;
    --sc-color-text-strong: #2F2F2F;
    --sc-color-text-default: #3A3A3A;
    --sc-color-text-muted: #666666;
    --sc-color-text-faint: #999999;
    --sc-color-text-on-dark: #FFFFFF;
    --sc-color-text-on-dark-muted: rgba(255, 255, 255, 0.75);

    /* =================================================== */
    /* === Colour: semantic (reserved, not yet in use) === */
    /* =================================================== */
    --sc-color-success: #1E7A3C;
    --sc-color-warning: #B7791F;
    --sc-color-info: #1F5BB7;

    /* =================================================== */
    /* === Legacy aliases (Stage 1 names; keep working)=== */
    /* =================================================== */
    --sc-text-primary: var(--sc-color-text-strong);
    --sc-text-secondary: var(--sc-color-text-muted);
    --sc-bg-page: var(--sc-color-page);
    --sc-bg-section-alt: var(--sc-color-surface-alt);
    --sc-bg-card: var(--sc-color-page);
    --sc-border-subtle: var(--sc-color-border-faint);
    --sc-border-light: var(--sc-color-border-subtle);

    /* =================================================== */
    /* === Typography                                  === */
    /* =================================================== */
    --sc-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sc-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* =================================================== */
    /* === Spacing scale (8px-based)                   === */
    /* =================================================== */
    --sc-space-3xs: 4px;
    --sc-space-2xs: 8px;
    --sc-space-xs: 12px;
    --sc-space-sm: 16px;
    --sc-space-md: 20px;
    --sc-space-lg: 24px;
    --sc-space-xl: 32px;
    --sc-space-2xl: 40px;
    --sc-space-3xl: 48px;
    --sc-space-4xl: 64px;
    --sc-space-5xl: 80px;
    --sc-space-6xl: 96px;
    --sc-space-7xl: 128px;

    /* Spacing — derived component tokens */
    --sc-spacing-section-y: 80px;            /* desktop */
    --sc-spacing-section-y-tablet: 64px;
    --sc-spacing-section-y-mobile: 48px;
    --sc-spacing-card-p: 32px;               /* desktop */
    --sc-spacing-card-p-tablet: 28px;
    --sc-spacing-card-p-mobile: 24px;

    /* =================================================== */
    /* === Layout                                      === */
    /* =================================================== */
    --sc-container-max: 1200px;

    /* =================================================== */
    /* === Border-radius                               === */
    /* =================================================== */
    --sc-radius-xs: 4px;
    --sc-radius-sm: 6px;
    --sc-radius-md: 10px;
    --sc-radius-card: 12px;
    --sc-radius-lg: 20px;
    --sc-radius-pill: 999px;
    --sc-radius-circle: 50%;

    /* =================================================== */
    /* === Shadows                                     === */
    /* =================================================== */
    --sc-shadow-none: none;
    --sc-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.08);
    --sc-shadow-medium: 0 12px 32px rgba(0, 0, 0, 0.12);
    --sc-shadow-strong: 0 20px 48px rgba(0, 0, 0, 0.18);
    --sc-shadow-brand: 0 12px 32px rgba(178, 42, 31, 0.18);
    /* Legacy aliases (Stage 1 names) */
    --sc-shadow-card: var(--sc-shadow-soft);
    --sc-shadow-card-hover: var(--sc-shadow-medium);

    /* =================================================== */
    /* === Motion                                      === */
    /* =================================================== */
    --sc-transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --sc-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --sc-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --sc-transition-reveal: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================================================== */
/* === FAQ Card Grid                                  === */
/* ===================================================== */
/* Prototype component — mirrors the existing FAQ aesthetic
   (centred uppercase-feel title + brand-red underline + card grid).
   Renders question/answer cards in a responsive grid:
   4 cols desktop, 2 cols tablet, 1 col mobile.                       */

.sc-faq-section {
    padding: var(--sc-spacing-section-y) 0;
    background-color: var(--sc-bg-page);
}

.sc-faq-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sc-faq-section__header {
    text-align: center;
    margin-bottom: 60px;
}

.sc-faq-section__title {
    font-family: var(--sc-font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--sc-text-primary);
    margin: 0 0 18px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sc-faq-section__underline {
    display: block;
    width: 80px;
    height: 3px;
    margin: 0 auto 18px;
    background-color: var(--sc-brand-red);
    border: 0;
    border-radius: 2px;
}

.sc-faq-section__subtitle {
    font-family: var(--sc-font-body);
    font-size: 17px;
    color: #4B5563;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.sc-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sc-faq-card {
    background-color: var(--sc-bg-card);
    border: 1px solid var(--sc-border-subtle);
    border-top: 3px solid var(--sc-brand-red);
    border-radius: var(--sc-radius-card);
    padding: var(--sc-spacing-card-p);
    box-shadow: var(--sc-shadow-card);
    transition:
        transform var(--sc-transition-base),
        box-shadow var(--sc-transition-base),
        border-color var(--sc-transition-base);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.sc-faq-card:hover,
.sc-faq-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--sc-shadow-card-hover);
    border-color: rgba(178, 42, 31, 0.18);
    border-top-color: var(--sc-brand-red); /* keep the brand-red signature on hover */
}

.sc-faq-card__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(178, 42, 31, 0.08);
    border-radius: 10px;
    color: var(--sc-brand-red);
    flex: 0 0 auto;
    margin-bottom: 16px;
}

.sc-faq-card__icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-faq-card__question {
    font-family: var(--sc-font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--sc-text-primary);
    line-height: 1.35;
    margin: 0;
}

.sc-faq-card__answer {
    font-family: var(--sc-font-body);
    font-size: 14.5px;
    font-weight: 400;
    color: var(--sc-text-secondary);
    line-height: 1.65;
    margin: 0;
}

.sc-faq-card__answer a {
    color: var(--sc-brand-red);
    text-decoration: none;
    transition: color var(--sc-transition-fast);
}

.sc-faq-card__answer a:hover,
.sc-faq-card__answer a:focus-visible {
    color: var(--sc-brand-red-deep);
    text-decoration: underline;
}

/* Keyboard focus visibility on cards that may become interactive */
.sc-faq-card:focus-visible {
    outline: 2px solid var(--sc-brand-red);
    outline-offset: 3px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .sc-faq-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .sc-faq-section__title {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .sc-faq-section {
        padding: var(--sc-spacing-section-y-mobile) 0;
    }
    .sc-faq-section__header {
        margin-bottom: 40px;
    }
}

@media (max-width: 640px) {
    .sc-faq-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .sc-faq-card {
        padding: 24px;
    }
    .sc-faq-section__title {
        font-size: 28px;
    }
    .sc-faq-section__subtitle {
        font-size: 16px;
    }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .sc-faq-card,
    .sc-faq-card__answer a {
        transition: none;
    }
    .sc-faq-card:hover,
    .sc-faq-card:focus-within {
        transform: none;
    }
}

/* ===================================================== */
/* === Shared: Section Header (Component 6)           === */
/* ===================================================== */
/* Reusable centred title + brand-red underline + subtitle.
   Sits above every other sc-* section. Stage 1 FAQ uses an
   inline header for legacy reasons; new sections compose this. */

.sc-section-header {
    text-align: center;
    margin-bottom: 48px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.sc-section-header__eyebrow {
    display: inline-block;
    font-family: var(--sc-font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-brand-red);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 16px;
}

.sc-section-header__title {
    font-family: var(--sc-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--sc-color-text-strong);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.sc-section-header__underline {
    display: block;
    width: 80px;
    height: 3px;
    margin: 0 auto 20px;
    background-color: var(--sc-brand-red);
    border: 0;
    border-radius: 2px;
}

.sc-section-header__subtitle {
    font-family: var(--sc-font-body);
    font-size: 16px;
    color: var(--sc-color-text-muted);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 640px;
}

/* Variants */
.sc-section-header--start {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.sc-section-header--start .sc-section-header__underline {
    margin-left: 0;
}

.sc-section-header--on-dark .sc-section-header__title {
    color: var(--sc-color-text-on-dark);
}
.sc-section-header--on-dark .sc-section-header__subtitle {
    color: var(--sc-color-text-on-dark-muted);
}
.sc-section-header--on-dark .sc-section-header__eyebrow {
    color: var(--sc-color-text-on-dark);
}

@media (min-width: 640px) {
    .sc-section-header { margin-bottom: 56px; }
    .sc-section-header__title { font-size: 34px; }
    .sc-section-header__subtitle { font-size: 17px; }
}

@media (min-width: 1024px) {
    .sc-section-header { margin-bottom: 60px; }
    .sc-section-header__title { font-size: 40px; }
    .sc-section-header__subtitle { font-size: 18px; }
}

/* ===================================================== */
/* === Shared: Icon Badge (Component 8)               === */
/* ===================================================== */
/* Soft-tinted square wrapper around a Lucide SVG.
   Sizes: sm (32) / default (48) / lg (64).
   Tones: red (default) / neutral / inverse.                */

.sc-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: var(--sc-radius-md);
    background: var(--sc-brand-red-soft);
    color: var(--sc-brand-red);
}

.sc-icon-badge svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Size variants */
.sc-icon-badge--sm { width: 32px; height: 32px; border-radius: var(--sc-radius-sm); }
.sc-icon-badge--sm svg { width: 18px; height: 18px; }

.sc-icon-badge--lg { width: 64px; height: 64px; border-radius: var(--sc-radius-card); }
.sc-icon-badge--lg svg { width: 28px; height: 28px; }

/* Tone variants */
.sc-icon-badge--neutral {
    background: var(--sc-color-surface-tint);
    color: var(--sc-color-text-strong);
}

.sc-icon-badge--inverse {
    background: rgba(255, 255, 255, 0.15);
    color: var(--sc-color-text-on-dark);
}

/* ===================================================== */
/* === Feature Card Grid (Component 2)                === */
/* ===================================================== */
/* Use for "why us" sections, sector breakdowns, value props.
   Icon-prominent, less text than FAQ.                       */

.sc-feature-section {
    padding: var(--sc-spacing-section-y-mobile) 0;
    background-color: var(--sc-color-page);
}

.sc-feature-section__inner {
    max-width: var(--sc-container-max);
    margin: 0 auto;
    padding: 0 var(--sc-space-md);
}

.sc-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sc-space-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sc-feature-card {
    background-color: var(--sc-color-page);
    border: 1px solid var(--sc-color-border-faint);
    border-radius: var(--sc-radius-card);
    padding: var(--sc-spacing-card-p-mobile);
    box-shadow: var(--sc-shadow-soft);
    transition:
        transform var(--sc-transition-base),
        box-shadow var(--sc-transition-base),
        border-color var(--sc-transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-sm);
    height: 100%;
}

.sc-feature-card:hover,
.sc-feature-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--sc-shadow-medium);
    border-color: var(--sc-brand-red-glow);
}

.sc-feature-card:focus-visible {
    outline: 2px solid var(--sc-brand-red);
    outline-offset: 3px;
}

.sc-feature-card__icon {
    /* Inherits sc-icon-badge; default 48 size used inline */
}

.sc-feature-card__title {
    font-family: var(--sc-font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--sc-color-text-strong);
    line-height: 1.35;
    margin: 0;
}

.sc-feature-card__description {
    font-family: var(--sc-font-body);
    font-size: 14.5px;
    font-weight: 400;
    color: var(--sc-color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Variants */
.sc-feature-card--centred {
    text-align: center;
    align-items: center;
}

/* --bare: USED ONLY on index.html + products.html as whole-card-clickable
   navigation cards (home "Lighting Categories" + products indoor/outdoor).
   Upgraded to match the pc-nav-strip navigator: visible border, lift + red
   glow on hover, icon micro-interaction, and a stretched-link overlay so the
   single existing <a> covers the whole card. Scoped to --bare only; the base
   .sc-feature-card content-card rule (used on 25 category pages) is untouched. */
.sc-feature-card--bare {
    position: relative;
    background: var(--sc-color-page);
    border: 1px solid var(--sc-color-border-faint);
    border-radius: var(--sc-radius-card);
    box-shadow: var(--sc-shadow-soft);
    padding: var(--sc-spacing-card-p-mobile);
    cursor: pointer;
}

/* Stretched link: the lone existing title <a> covers the whole card. */
.sc-feature-card--bare .sc-feature-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Lift + red glow + border accent on whole-card hover / keyboard focus,
   echoing .pc-nav-strip li a:hover (set 3). Overrides the old
   --bare:hover{transform:none}. */
.sc-feature-card--bare:hover,
.sc-feature-card--bare:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--sc-shadow-brand);
    border-color: var(--sc-brand-red);
}

/* Icon micro-interaction, echoing .pc-nav-strip li a:hover .pc-nav-ico. */
.sc-feature-card--bare:hover .sc-icon-badge,
.sc-feature-card--bare:focus-within .sc-icon-badge {
    transform: scale(1.08);
}
.sc-feature-card--bare .sc-icon-badge {
    transition: transform var(--sc-transition-base);
}

@media (min-width: 640px) {
    .sc-feature-section { padding: var(--sc-spacing-section-y-tablet) 0; }
    .sc-feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sc-space-md); }
    .sc-feature-card { padding: var(--sc-spacing-card-p-tablet); }
    .sc-feature-card__title { font-size: 18px; }
}

@media (min-width: 1024px) {
    .sc-feature-section { padding: var(--sc-spacing-section-y) 0; }
    .sc-feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sc-space-lg); }
    .sc-feature-card { padding: var(--sc-spacing-card-p); }
    .sc-feature-card__title { font-size: 20px; }
    .sc-feature-card__description { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-feature-card { transition: none; }
    .sc-feature-card:hover,
    .sc-feature-card:focus-within { transform: none; }
    /* --bare nav cards: keep border/colour feedback, drop all movement. */
    .sc-feature-card--bare .sc-icon-badge { transition: none; }
    .sc-feature-card--bare:hover,
    .sc-feature-card--bare:focus-within { transform: none; }
    .sc-feature-card--bare:hover .sc-icon-badge,
    .sc-feature-card--bare:focus-within .sc-icon-badge { transform: none; }
}

/* ===================================================== */
/* === Process Steps (Component 3)                    === */
/* ===================================================== */
/* Numbered phases of a service. Horizontal on desktop with
   a decorative connecting line; vertical stack on mobile.    */

.sc-process-section {
    padding: var(--sc-spacing-section-y-mobile) 0;
    background-color: var(--sc-color-surface-alt);
}

.sc-process-section__inner {
    max-width: var(--sc-container-max);
    margin: 0 auto;
    padding: 0 var(--sc-space-md);
}

.sc-process-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-lg);
    position: relative;
}

.sc-process-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--sc-space-md);
    align-items: start;
    position: relative;
}

.sc-process-step__number {
    width: 48px;
    height: 48px;
    border-radius: var(--sc-radius-circle);
    background: var(--sc-brand-red);
    color: var(--sc-color-text-on-dark);
    font-family: var(--sc-font-heading);
    font-size: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: var(--sc-shadow-brand);
}

.sc-process-step__body {
    /* default flow */
}

.sc-process-step__title {
    font-family: var(--sc-font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--sc-color-text-strong);
    margin: 4px 0 8px;
    line-height: 1.3;
}

.sc-process-step__description {
    font-family: var(--sc-font-body);
    font-size: 14.5px;
    color: var(--sc-color-text-muted);
    line-height: 1.65;
    margin: 0;
}

@media (min-width: 640px) {
    .sc-process-section { padding: var(--sc-spacing-section-y-tablet) 0; }
    .sc-process-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--sc-space-xl);
    }
    .sc-process-step {
        flex: 1 1 calc(50% - var(--sc-space-xl));
        grid-template-columns: 56px 1fr;
    }
}

@media (min-width: 1024px) {
    .sc-process-section { padding: var(--sc-spacing-section-y) 0; }
    .sc-process-list {
        flex-wrap: nowrap;
        gap: var(--sc-space-2xl);
        padding-top: var(--sc-space-md);
    }
    /* Decorative connector line on desktop */
    .sc-process-list::before {
        content: "";
        position: absolute;
        top: calc(var(--sc-space-md) + 24px); /* aligns with badge centre */
        left: 24px;
        right: 24px;
        height: 1px;
        background: var(--sc-color-border-subtle);
        z-index: 0;
    }
    .sc-process-step {
        flex: 1 1 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: start; /* don't let the badge row stretch to fill equal-height columns — keeps titles on one line */
        gap: var(--sc-space-md);
        text-align: center;
        position: relative;
        z-index: 1;
    }
    .sc-process-step__number {
        margin: 0 auto;
        background: var(--sc-brand-red);
        outline: 6px solid var(--sc-color-surface-alt); /* matches section bg so the line appears to break */
    }
    .sc-process-step__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-process-step { transition: none; }
}

/* ===================================================== */
/* === Stat Block (Component 4)                       === */
/* ===================================================== */
/* Big proof-point numbers with restrained labels.
   No card chrome; the number does the talking.            */

.sc-stat-section {
    padding: var(--sc-spacing-section-y-mobile) 0;
    background-color: var(--sc-color-surface-alt);
}

.sc-stat-section__inner {
    max-width: var(--sc-container-max);
    margin: 0 auto;
    padding: 0 var(--sc-space-md);
}

.sc-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.sc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sc-space-2xs);
}

.sc-stat__number {
    font-family: var(--sc-font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--sc-brand-red);
    display: inline-flex;
    align-items: baseline;
}

.sc-stat__suffix {
    font-size: 0.6em;
    font-weight: 700;
    margin-left: 0.05em;
}

.sc-stat__label {
    font-family: var(--sc-font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0;
}

/* Variants */
.sc-stat-section--on-dark {
    background-color: var(--sc-color-text-strong);
}
.sc-stat-section--on-dark .sc-stat__label {
    color: var(--sc-color-text-on-dark-muted);
}

@media (min-width: 640px) {
    .sc-stat-section { padding: var(--sc-spacing-section-y-tablet) 0; }
    .sc-stat-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sc-space-xl); }
}

@media (min-width: 1024px) {
    .sc-stat-section { padding: var(--sc-spacing-section-y) 0; }
    .sc-stat-grid { gap: var(--sc-space-2xl); }
    .sc-stat__label { font-size: 13px; }
}

/* ===================================================== */
/* === Specification List (Component 5)               === */
/* ===================================================== */
/* Icon-left rows with title + description per row.
   For category page technical-considerations sections.     */

.sc-spec-section {
    padding: var(--sc-spacing-section-y-mobile) 0;
    background-color: var(--sc-color-page);
}

.sc-spec-section__inner {
    max-width: var(--sc-container-max);
    margin: 0 auto;
    padding: 0 var(--sc-space-md);
}

.sc-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sc-spec-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--sc-space-md);
    align-items: start;
    padding: var(--sc-space-md) 0;
    border-bottom: 1px solid var(--sc-color-border-subtle);
}

.sc-spec-item:first-child { padding-top: 0; }
.sc-spec-item:last-child  { border-bottom: 0; padding-bottom: 0; }

.sc-spec-item__icon {
    /* Inherits sc-icon-badge — typically with --sm size in markup */
}

.sc-spec-item__body {
    /* text column */
}

.sc-spec-item__title {
    font-family: var(--sc-font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--sc-color-text-strong);
    margin: 4px 0 6px;
    line-height: 1.3;
}

.sc-spec-item__description {
    font-family: var(--sc-font-body);
    font-size: 14.5px;
    color: var(--sc-color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Variants */
.sc-spec-list--two-col {
    /* default: single column on mobile, two cols on desktop (set below) */
}

@media (min-width: 640px) {
    .sc-spec-section { padding: var(--sc-spacing-section-y-tablet) 0; }
    .sc-spec-item { grid-template-columns: 56px 1fr; padding: var(--sc-space-lg) 0; }
}

@media (min-width: 1024px) {
    .sc-spec-section { padding: var(--sc-spacing-section-y) 0; }
    .sc-spec-list--two-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--sc-space-2xl);
    }
    .sc-spec-list--two-col .sc-spec-item {
        border-bottom: 1px solid var(--sc-color-border-subtle);
    }
    .sc-spec-list--two-col .sc-spec-item:nth-last-child(2) { border-bottom: 0; }
    .sc-spec-item__title { font-size: 18px; }
    .sc-spec-item__description { font-size: 15px; }
}

/* ===================================================== */
/* === Spec Table (Component 5b)                      === */
/* ===================================================== */
/* At-a-glance two-column specification table for product
   detail pages (Phase C). Label/value rows built from
   js/product-specs.json. Uses existing tokens only — no new
   colours. Responsive: side-by-side label/value on wider
   viewports, stacked label-over-value on narrow phones.      */

.sc-spec-table {
    margin: 0 0 var(--sc-space-lg);
}

.sc-spec-table__title {
    font-family: var(--sc-font-heading);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sc-color-text-strong);
    margin: 0 0 var(--sc-space-sm);
    padding-bottom: var(--sc-space-2xs);
    border-bottom: 2px solid var(--sc-brand-red);
}

.sc-spec-table__grid {
    border: 1px solid var(--sc-color-border-subtle);
    border-radius: var(--sc-radius-sm);
    overflow: hidden;
}

.sc-spec-table__row {
    display: grid;
    grid-template-columns: minmax(120px, 0.5fr) 1fr;
    border-top: 1px solid var(--sc-color-border-subtle);
}

.sc-spec-table__row:first-child {
    border-top: 0;
}

.sc-spec-table__row:nth-child(even) {
    background: var(--sc-color-surface-alt);
}

.sc-spec-table__label {
    font-family: var(--sc-font-heading);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sc-color-text-muted);
    padding: var(--sc-space-2xs) var(--sc-space-sm);
}

.sc-spec-table__value {
    font-family: var(--sc-font-body);
    font-size: 13.5px;
    color: var(--sc-color-text-strong);
    padding: var(--sc-space-2xs) var(--sc-space-sm);
    border-left: 1px solid var(--sc-color-border-subtle);
}

.sc-spec-table__datasheet {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space-3xs);
    margin-top: var(--sc-space-sm);
    font-family: var(--sc-font-heading);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sc-brand-red);
    text-decoration: none;
    transition: color var(--sc-transition-fast);
}

.sc-spec-table__datasheet:hover,
.sc-spec-table__datasheet:focus-visible {
    color: var(--sc-brand-red-deep);
    text-decoration: underline;
}

/* Stacked label-over-value on narrow phones for readability. */
@media (max-width: 420px) {
    .sc-spec-table__row {
        grid-template-columns: 1fr;
    }
    .sc-spec-table__value {
        border-left: 0;
        padding-top: 0;
    }
    .sc-spec-table__label {
        padding-bottom: 0;
    }
}

/* ===================================================== */
/* === Product Detail Card Layout (Component 5c)      === */
/* ===================================================== */
/* Two-column image/details layout for product detail pages.
   Moved out of the template's inline style so it can be made
   responsive: side-by-side on desktop/wide tablet, single
   column on portrait tablet + phone (<=768px) — the inline
   grid's minmax(280px,…) columns could not collapse and forced
   ~600px min width, causing horizontal overflow on phones.
   Product-page-only class — not used on home/category pages. */

.product-detail-card {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.1fr);
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .product-detail-card {
        grid-template-columns: 1fr;   /* single column on tablet/phone */
        gap: 1.5rem;
    }
}

/* ===================================================== */
/* === CTA Block (Component 7)                        === */
/* ===================================================== */
/* End-of-page conversion. Brand-red background, white text,
   prominent button + optional ghost button.                  */

.sc-cta {
    padding: var(--sc-spacing-section-y-mobile) var(--sc-space-md);
    background-color: var(--sc-brand-red);
    color: var(--sc-color-text-on-dark);
    text-align: center;
}

.sc-cta__inner {
    max-width: 720px;
    margin: 0 auto;
}

.sc-cta__eyebrow {
    display: inline-block;
    font-family: var(--sc-font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-color-text-on-dark);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 16px;
    opacity: 0.85;
}

.sc-cta__title {
    font-family: var(--sc-font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--sc-color-text-on-dark);
    margin: 0 0 16px;
}

.sc-cta__description {
    font-family: var(--sc-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--sc-color-text-on-dark);
    opacity: 0.92;
    margin: 0 0 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.sc-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sc-space-sm);
}

.sc-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2xs);
    padding: 14px 28px;
    font-family: var(--sc-font-heading);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-page);
    color: var(--sc-brand-red);
    border: 2px solid var(--sc-color-page);
    transition:
        background var(--sc-transition-fast),
        color var(--sc-transition-fast),
        transform var(--sc-transition-base),
        box-shadow var(--sc-transition-base);
    min-height: 44px;
}

.sc-cta__button:hover,
.sc-cta__button:focus-visible {
    background: transparent;
    color: var(--sc-color-page);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.sc-cta__button:focus-visible {
    outline: 2px solid var(--sc-color-page);
    outline-offset: 3px;
}

.sc-cta__button--ghost {
    background: transparent;
    color: var(--sc-color-page);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.sc-cta__button--ghost:hover,
.sc-cta__button--ghost:focus-visible {
    background: var(--sc-color-page);
    color: var(--sc-brand-red);
    border-color: var(--sc-color-page);
}

/* Variants */
.sc-cta--dark {
    background-color: var(--sc-color-text-strong);
}
.sc-cta--dark .sc-cta__button {
    background: var(--sc-brand-red);
    color: var(--sc-color-text-on-dark);
    border-color: var(--sc-brand-red);
}
.sc-cta--dark .sc-cta__button:hover,
.sc-cta--dark .sc-cta__button:focus-visible {
    background: var(--sc-brand-red-deep);
    color: var(--sc-color-text-on-dark);
    border-color: var(--sc-brand-red-deep);
}

@media (min-width: 640px) {
    .sc-cta { padding: var(--sc-spacing-section-y-tablet) var(--sc-space-lg); }
    .sc-cta__title { font-size: 34px; }
    .sc-cta__description { font-size: 17px; }
    .sc-cta__actions { flex-direction: row; justify-content: center; align-items: center; gap: var(--sc-space-md); }
    .sc-cta__button { padding: 16px 32px; }
}

@media (min-width: 1024px) {
    .sc-cta { padding: var(--sc-spacing-section-y) var(--sc-space-lg); }
    .sc-cta__title { font-size: 40px; }
    .sc-cta__description { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-cta__button { transition: background var(--sc-transition-fast), color var(--sc-transition-fast); }
    .sc-cta__button:hover,
    .sc-cta__button:focus-visible { transform: none; box-shadow: none; }
}

/* ===================================================== */
/* === Scroll-reveal animation                        === */
/* ===================================================== */
/* CSS scaffolding for IntersectionObserver-driven reveals.
   Stage 1.5 ships the classes only; Stage 2 wires the JS.    */

.sc-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--sc-transition-reveal),
        transform var(--sc-transition-reveal);
    will-change: opacity, transform;
}

.sc-reveal--in {
    opacity: 1;
    transform: translateY(0);
}

.sc-reveal--delay-1 { transition-delay: 80ms; }
.sc-reveal--delay-2 { transition-delay: 160ms; }
.sc-reveal--delay-3 { transition-delay: 240ms; }
.sc-reveal--delay-4 { transition-delay: 320ms; }
.sc-reveal--delay-5 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .sc-reveal {
        transform: none;
        transition: opacity 150ms ease-out;
    }
    .sc-reveal--in {
        transform: none;
    }
}