/* ============================================================
   Excell AI IT Solution — Design System
   Phase 4: Design System
   Direction: Clean Tech Premium

   Structure (single cached stylesheet):
     1.  Tokens
     2.  Reset & Base
     3.  Typography
     4.  Layout & Containers
     5.  Global Website Shell
     6.  Home Hero
     7.  Brand & Category Navigation
     8.  Catalogue Discovery Controls
     9.  Buttons
     10. Badges / Pills
     11. Chips
     12. Forms
     13. Cards
     14. Product Card
     15. Product Grid + Load More
     16. Modal Foundation
     17. Desktop Product Modal Content
     18. Tabs
     19. Enquiry List + Toast
     20. Empty / Loading / Error States
     21. Utilities
     22. Home Trust Section
     23. Home Final CTA Banner
     24. Internal Page Hero
     25. About Page
     26. Contact Page
     27. Responsive (global)
     28. Reduced Motion
    ============================================================ */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
    /* --- Brand palette (DESIGN_SYSTEM.md) ---
       Locked to the Excell AI IT logo reference. Primary/Deep blue and the
       olive accent are the exact supplied hex values; -050/-100/-800/-900
       are tints/shades derived from them for surfaces and hover/active
       states, centralized here rather than duplicated per component. */
    --color-brand-050: #F3F8FC;
    --color-brand-100: #DCEEF9;
    --color-brand-500: #1176BC;
    --color-brand-700: #07477C;
    --color-brand-800: #063D69;
    --color-brand-900: #052E4F;

    /* --- Olive/Gold accent (logo accent — a premium signature detail,
       used sparingly: dividers, tiny badges, eyebrow details. Never a
       primary-button or large-background color.) --- */
    --color-accent-100: #F1F1DF;
    --color-accent-600: #AEAD56;
    /* Darker derived shade for accessible text on light tints. Also the
       source of --brand-green below (4.82:1 on white — WCAG AA). */
    --color-accent-700: #76752F;
    /* One step deeper still, same hue/saturation — hover state for
       --brand-green (6.74:1 on white). */
    --color-accent-800: #5F5E26;

    /* --- Brand semantic aliases (Excell blue = dominant action color,
       Excell green = WhatsApp/positive-action accent) ---
       Both are derived directly from the two recognizable logo colors
       (pixel-sampled from the approved logo asset), not a new invented
       palette: blue reuses the existing brand-700/800 scale as-is; green
       promotes the existing logo-accurate olive-lime accent-700/800/100
       scale above from "sparingly used decorative accent" to the site's
       one WhatsApp/positive-action green — see --color-whatsapp* below,
       which now aliases these instead of an unrelated dark teal. */
    --brand-blue: var(--color-brand-700);
    --brand-blue-hover: var(--color-brand-800);
    --brand-green: var(--color-accent-700);
    --brand-green-hover: var(--color-accent-800);
    --brand-green-soft: var(--color-accent-100);
    --brand-ink: var(--text-primary);
    --brand-border: var(--border-soft);
    --brand-surface: var(--surface-white);

    /* --- Neutrals --- */
    --color-white: #FFFFFF;
    --color-gray-050: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-900: #0F172A;

    /* --- Premium surface levels (section differentiation only — the site
       must still read as primarily white). --- */
    --surface-white: #FFFFFF;
    --surface-subtle: #FAFBFC;
    --surface-soft: #F7F9FB;
    --surface-blue-tint: #F3F7FA;

    /* --- Status --- */
    --color-success: #168447;
    --color-success-700: #0F6A38;
    --color-success-100: #D0E6DA;
    --color-success-050: #E6F3EC;
    --color-warning: #B56A13;
    --color-warning-700: #8A5210;
    --color-warning-100: #F0DFC0;
    --color-warning-050: #FBF4E6;
    --color-danger: #B42318;
    --color-danger-700: #931A12;
    --color-danger-100: #F0D4D2;
    --color-danger-050: #F9EAE9;

    /* --- WhatsApp (functional only — WhatsApp CTAs/icons exclusively,
       never a general success or decorative color). Aliases the brand
       green above (the logo's own lighter/lime-olive accent) rather than
       an unrelated dark teal, so the WhatsApp button reads as genuinely
       on-brand instead of a generic messaging-app color. --- */
    --color-whatsapp: var(--brand-green);
    --color-whatsapp-600: var(--brand-green);
    --color-whatsapp-700: var(--brand-green-hover);

    /* --- Semantic aliases ---
       A sophisticated dark navy rather than harsh black, and softer
       borders than the raw gray scale — every component below already
       reads through these aliases, so the values here are the single
       source of truth for the whole site's text/border language. */
    --text-primary: #102033;
    --text-secondary: #536273;
    --text-muted: #778493;
    --border-soft: #E4EBF1;
    --border-medium: #D5E0E9;

    --color-text: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-border: var(--border-soft);
    --color-bg: var(--color-white);
    --color-bg-secondary: var(--surface-subtle);
    --color-primary: var(--color-brand-700);
    --color-primary-hover: var(--color-brand-800);
    --color-primary-active: var(--color-brand-900);
    --color-primary-soft: var(--color-brand-050);
    --color-link: var(--color-brand-500);
    --color-link-hover: var(--color-brand-700);

    /* --- Typography --- */
    --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --text-display: clamp(2.25rem, 5vw, 4.5rem);
    --text-h1: clamp(2rem, 4vw, 3.5rem);
    --text-h2: clamp(1.65rem, 3vw, 2.5rem);
    --text-h3: clamp(1.25rem, 2vw, 1.5rem);
    --text-h4: 1.125rem;
    --text-lg: 1.125rem;
    --text-md: 1rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;

    --leading-tight: 1.25;
    --leading-normal: 1.6;

    /* --- Spacing (4..96) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* --- Layout --- */
    --container-max: 1280px;
    --container-max-narrow: 900px;
    --page-gutter: 1.25rem;
    --section-padding: var(--space-12);

    /* --- Radius --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    /* New premium surfaces only (hero visual, discovery panel, CTA banner) —
       kept separate from --radius-2xl so already-approved components that
       already use it (product modal, generic .card) keep their proportions. */
    --radius-3xl: 32px;
    --radius-pill: 999px;

    /* --- Shadows ---
       Tinted toward Deep Excell Blue rather than neutral gray/black — a
       restrained, cohesive touch instead of heavy gray box-shadows. */
    --shadow-xs: 0 1px 2px rgba(7, 71, 124, 0.04);
    --shadow-sm: 0 4px 14px rgba(7, 71, 124, 0.06);
    --shadow-md: 0 12px 32px rgba(7, 71, 124, 0.09);
    --shadow-lg: 0 22px 60px rgba(7, 71, 124, 0.12);

    /* --- Motion --- */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 250ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Z-index scale --- */
    --z-base: 1;
    --z-header: 100;
    --z-modal: 1000;
    --z-toast: 1100;
}

@media (min-width: 768px) {
    :root {
        --page-gutter: 2rem;
        --section-padding: var(--space-16);
    }
}

/* ============================================================
   2. Reset & Base
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

#main-content {
    scroll-margin-top: 5rem;
}

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

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-sans);
    color: var(--color-text);
    line-height: var(--leading-tight);
    font-weight: var(--font-weight-bold);
}

p {
    max-width: 65ch;
}

button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

fieldset {
    border: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

::selection {
    background-color: var(--color-brand-100);
    color: var(--color-brand-700);
}

[hidden] {
    display: none !important;
}

/* --- Focus --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

/* ============================================================
   3. Typography
   ============================================================ */

.display {
    font-size: var(--text-display);
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--font-weight-semibold); }

.text-lg { font-size: var(--text-lg); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-brand { color: var(--color-brand-700); }
.text-accent { color: var(--color-accent-600); }
.text-success { color: var(--color-success-700); }
.text-warning { color: var(--color-warning-700); }
.text-danger { color: var(--color-danger); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ============================================================
   4. Layout & Containers
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.container--narrow {
    max-width: var(--container-max-narrow);
}

.section {
    padding-block: var(--section-padding);
}

.section--subtle {
    background-color: var(--color-bg-secondary);
}

.section--brand {
    background-color: var(--color-primary-soft);
}

.section__header {
    margin-bottom: var(--space-8);
}

.section__title {
    font-size: var(--text-h2);
    color: var(--color-brand-700);
    margin-bottom: var(--space-3);
}

.section__subtitle {
    color: var(--color-text-secondary);
    max-width: 60ch;
}

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

.stack--sm { gap: var(--space-3); }
.stack--lg { gap: var(--space-8); }

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid--auto {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

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

.page-content {
    padding: var(--section-padding) 0;
}

.page-content h1 {
    font-size: var(--text-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-700);
    margin-bottom: var(--space-6);
    line-height: var(--leading-tight);
}

.page-content p {
    color: var(--color-text-secondary);
    max-width: 65ch;
    margin-bottom: var(--space-4);
}

.page-content--centered {
    text-align: center;
    padding: var(--space-20) 0;
}

.page-content--centered p {
    margin-inline: auto;
}

.contact-details {
    margin-top: var(--space-6);
}

.contact-details li {
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
}

.contact-details a {
    color: var(--color-brand-700);
    font-weight: var(--font-weight-medium);
}

.contact-details a:hover {
    color: var(--color-brand-800);
}

/* ============================================================
   5. Global Website Shell
   ============================================================ */

/* --- Skip Link --- */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background-color: var(--color-brand-700);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
    top: 0;
    color: var(--color-white);
    text-decoration: none;
}

/* --- Header --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 0 rgba(7, 71, 124, 0.03), var(--shadow-xs);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 76px;
}

/* Approved final logo asset (public/assets/images/Branding/). Desktop
   renders ~190px wide, tapering down at tablet/mobile — see the "Header
   responsive behaviour" section below. object-fit: contain + height:
   auto preserves the source aspect ratio at every size; width/height
   attributes on the <img> itself carry the true intrinsic pixel size so
   the browser reserves the correct box before CSS loads (no CLS). */
.site-header__logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.site-header__logo-img {
    display: block;
    width: 190px;
    height: auto;
    object-fit: contain;
}

.site-header__logo:hover {
    opacity: 0.85;
}

.site-header__nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.site-header__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

.site-header__nav a:hover {
    color: var(--color-brand-700);
    text-decoration: none;
}

.site-header__nav a[aria-current="page"] {
    color: var(--color-brand-700);
    font-weight: var(--font-weight-semibold);
}

.site-header__nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--space-1);
    right: var(--space-1);
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-brand-700);
}

.site-header__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-3);
}

.site-header__enquiry {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.site-header__enquiry:hover {
    background-color: var(--color-primary-soft);
    border-color: var(--color-brand-500);
    color: var(--color-brand-700);
}

.site-header__enquiry svg {
    flex: none;
}

.site-header__enquiry-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-700);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.site-header__enquiry-count[hidden] {
    display: none;
}

.site-header__whatsapp {
    min-height: 44px;
}

.site-header__menu {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.site-header__menu:hover {
    border-color: var(--color-gray-300);
    color: var(--color-brand-700);
}

.site-header__menu[aria-expanded="true"] {
    background-color: var(--color-primary-soft);
    border-color: var(--color-brand-500);
    color: var(--color-brand-700);
}

.site-header__close-icon {
    display: none;
}

.site-header__menu[aria-expanded="true"] .site-header__menu-icon {
    display: none;
}

.site-header__menu[aria-expanded="true"] .site-header__close-icon {
    display: block;
}

/* --- Mobile navigation drawer (mobile-first optimization pass) — an
   off-canvas right-side panel, replacing the previous below-header
   dropdown. Desktop/tablet (>=768px) never renders it (see the
   min-width:768px rule at the end of this block). --- */

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background-color: rgba(7, 32, 51, 0.5);
}

.mobile-nav-backdrop[hidden] {
    display: none;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-modal) + 1);
    display: flex;
    flex-direction: column;
    width: 88vw;
    max-width: 380px;
    background-color: var(--surface-white);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer[hidden] {
    display: none;
}

.mobile-nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}

.mobile-nav-drawer__brand {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-700);
}

.mobile-nav-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.mobile-nav-drawer__close:hover {
    border-color: var(--color-brand-500);
    color: var(--color-brand-700);
}

.mobile-nav-drawer__nav ul {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-2);
}

.mobile-nav-drawer__nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
}

.mobile-nav-drawer__nav a:hover {
    background-color: var(--surface-subtle);
    text-decoration: none;
}

.mobile-nav-drawer__nav a[aria-current="page"] {
    background-color: var(--color-brand-050);
    color: var(--color-brand-700);
    font-weight: var(--font-weight-semibold);
}

.mobile-nav-drawer__divider {
    height: 1px;
    margin: var(--space-2) var(--space-5);
    background-color: var(--border-soft);
}

.mobile-nav-drawer__enquiry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - var(--space-8));
    min-height: 52px;
    margin: 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard);
}

.mobile-nav-drawer__enquiry:hover {
    background-color: var(--surface-subtle);
}

.mobile-nav-drawer__enquiry-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.mobile-nav-drawer__enquiry-label svg {
    flex: none;
    color: var(--color-brand-500);
}

.mobile-nav-drawer__enquiry-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-700);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.mobile-nav-drawer__enquiry-count[hidden] {
    display: none;
}

.mobile-nav-drawer__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-6);
    margin-top: auto;
}

.mobile-nav-drawer__actions .btn {
    min-height: 50px;
}

@media (min-width: 768px) {
    .mobile-nav-backdrop,
    .mobile-nav-drawer {
        display: none !important;
    }
}

/* --- Header responsive behaviour --- */

@media (max-width: 1023px) {
    .site-header__logo-img {
        width: 125px;
    }
}

@media (max-width: 767px) {
    .site-header__inner {
        min-height: 60px;
    }

    .site-header__logo-img {
        width: 115px;
    }

    .site-header__nav {
        display: none;
    }

    .site-header__actions .site-header__whatsapp,
    .site-header__actions .site-header__enquiry {
        display: none;
    }

    .site-header__menu {
        display: inline-flex;
    }
}

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

    .site-header__actions {
        gap: var(--space-2);
    }

    .site-header__menu {
        padding: var(--space-2);
    }
}

/* --- Floating Actions --- */

.floating-actions {
    position: fixed;
    right: calc(var(--space-4) + env(safe-area-inset-right));
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.floating-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-700);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition:
        transform var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.floating-action:hover {
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.floating-action svg {
    width: 24px;
    height: 24px;
    flex: none;
}

/* Text labels exist in the DOM on every breakpoint (real accessible
   content), but only render visually inside the mobile dock below —
   desktop/tablet stay icon-only circular buttons. */
.floating-action__label {
    display: none;
}

.floating-action--whatsapp {
    background-color: var(--color-whatsapp-600);
}

.floating-action--whatsapp:hover {
    background-color: var(--color-whatsapp-700);
}

.floating-action--call {
    background-color: var(--color-brand-700);
}

.floating-action--call:hover {
    background-color: var(--color-brand-800);
}

/* Mobile (<640px): the same two links become a full-width bottom contact
   dock instead of circular corner buttons — replaces the narrower
   collision-prone treatment entirely (see initFloatingActions() in app.js
   for the scroll-reveal / IntersectionObserver hide-near-footer-or-CTA
   behavior shared by both the desktop and mobile presentations). */
@media (max-width: 639px) {
    .floating-actions {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        gap: 1px;
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
        background-color: var(--border-soft);
        box-shadow: 0 -6px 20px rgba(7, 71, 124, 0.14);
    }

    .floating-actions.is-hidden {
        transform: translateY(100%);
        pointer-events: none;
    }

    .floating-action {
        flex: 1 1 50%;
        width: auto;
        height: 58px;
        border-radius: 0;
        gap: var(--space-2);
    }

    .floating-action svg {
        width: 20px;
        height: 20px;
    }

    .floating-action__label {
        display: inline;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
    }

    .floating-action:hover {
        transform: none;
    }
}

/* --- Footer --- */

.site-footer {
    position: relative;
    background-color: var(--color-brand-700);
    color: var(--color-gray-200);
    margin-top: auto;
}

/* Tiny olive signature line closing the page — a restrained brand detail,
   not a decorative band. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 2px;
    background-color: var(--color-accent-600);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-8);
    padding: var(--space-10) 0 var(--space-6);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.site-footer__logo {
    display: inline-flex;
    text-decoration: none;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

/* Approved final logo asset (public/assets/images/Branding/) — a full
   white SVG wordmark drawn for direct use on the dark footer (var(
   --color-brand-700) above), so it needs no background/card/filter
   treatment; it sits natively on the surface like real footer content.
   Sized as a horizontal brand mark (width-controlled, height: auto) and
   tapered down at tablet/mobile — see the max-width overrides below. */
.site-footer__logo-img {
    display: block;
    width: 100%;
    max-width: 165px;
    height: auto;
    object-fit: contain;
}

.site-footer__logo:hover {
    opacity: 0.9;
}

.site-footer__tagline {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    max-width: 28ch;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.site-footer__heading {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-400);
    margin-bottom: var(--space-1);
}

/* Quick Links / Categories accordion. Server-rendered with the native
   [open] attribute present, so desktop/tablet needs no CSS at all to show
   the content — it's just how an open <details> already renders. (An
   earlier version of this tried to force content visible via CSS while
   [open] was absent; closed-<details> content turned out to have a
   browser-internal 0-intrinsic-size behavior that no author `display`/
   `width` override — even inline !important — could reach. Starting
   genuinely open and only ever toggling the real [open] attribute
   sidesteps that entirely, at the cost of one small JS snippet — see
   initFooterAccordion() in app.js — that collapses it once at load on
   narrow viewports; every open/close after that is the browser's own
   native <details> behavior.) This block only styles <summary> itself. */
.site-footer__accordion > summary {
    list-style: none;
    cursor: default;
    pointer-events: none;
}

.site-footer__accordion > summary::-webkit-details-marker {
    display: none;
}

.site-footer__accordion > summary::marker {
    content: "";
}

@media (max-width: 639px) {
    .site-footer__accordion {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-block: var(--space-4);
    }

    .site-footer__accordion > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        cursor: pointer;
        pointer-events: auto;
        margin-bottom: 0;
    }

    .site-footer__accordion > summary::after {
        content: "+";
        flex: none;
        font-size: 1.125rem;
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-400);
    }

    .site-footer__accordion[open] > summary::after {
        content: "\2212"; /* minus sign */
    }

    .site-footer__accordion > *:not(summary) {
        margin-top: var(--space-4);
    }
}

.site-footer__links,
.site-footer__categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__links li,
.site-footer__category {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.site-footer__links li svg {
    flex: none;
    color: var(--color-brand-100);
    opacity: 0.8;
}

.site-footer__category::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent-600);
}

.site-footer__links a {
    color: var(--color-gray-200);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--color-white);
    text-decoration: none;
}

.site-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: var(--space-6) 0;
}

.site-footer__legal p {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    max-width: none;
}

@media (max-width: 1023px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__logo-img {
        max-width: 150px;
    }
}

@media (max-width: 639px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .site-footer__logo-img {
        max-width: 135px;
    }

    .site-footer__legal {
        padding-bottom: 4.5rem;
    }
}

/* ============================================================
   6. Home Hero
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 900px 500px at 15% 0%, var(--color-brand-050) 0%, transparent 60%),
        radial-gradient(ellipse 700px 500px at 100% 20%, var(--surface-blue-tint) 0%, transparent 55%),
        var(--color-white);
    border-bottom: 1px solid var(--border-soft);
}

/* Extremely subtle diagonal line motif referencing the Excell logo's
   angular geometry — decorative only, never a busy background. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        118deg,
        transparent 0,
        transparent 140px,
        rgba(7, 71, 124, 0.035) 140px,
        rgba(7, 71, 124, 0.035) 141px
    );
    pointer-events: none;
}

/* Signature Excell brand rail — a large angular blue line with a thinner
   parallel companion stroke and a single olive accent block, echoing the
   logo's diagonal geometry. Used sparingly (hero background + the Final
   CTA banner's own diagonal pattern) rather than repeated at every section
   seam. Purely decorative. */
.hero__rail {
    position: absolute;
    top: -20%;
    right: 6%;
    width: 2px;
    height: 145%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(17, 118, 188, 0.22) 14%,
        rgba(7, 71, 124, 0.3) 50%,
        rgba(17, 118, 188, 0.18) 86%,
        transparent 100%);
    transform: rotate(16deg);
    pointer-events: none;
    z-index: 0;
}

.hero__rail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 38px;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(17, 118, 188, 0.12) 22%,
        rgba(17, 118, 188, 0.12) 78%,
        transparent 100%);
}

.hero__rail::after {
    content: "";
    position: absolute;
    top: 24%;
    left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background-color: var(--color-accent-600);
    opacity: 0.85;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--space-10);
    padding-block: var(--space-12);
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: 560px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-brand-100);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    box-shadow: var(--shadow-xs);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.hero__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent-600);
    flex: none;
}

.hero h1 {
    font-size: clamp(2.25rem, 3.4vw, 3.25rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    max-width: 15ch;
}

.hero h1 em {
    font-style: normal;
    color: var(--color-brand-500);
}

.hero__lead {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    max-width: 46ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.hero__actions .btn {
    min-width: 178px;
}

.hero__actions .btn--primary {
    box-shadow: 0 10px 24px -8px rgba(17, 118, 188, 0.5);
}

.hero__actions .btn--primary:hover {
    box-shadow: 0 12px 28px -8px rgba(17, 118, 188, 0.55);
    transform: translateY(-1px);
}

.hero__actions .btn--primary svg {
    transition: transform var(--duration-fast) var(--ease-standard);
}

.hero__actions .btn--primary:hover svg {
    transform: translateX(3px);
}

/* Compact inline trust marks — support the hero, not a second content
   section inside it: one wrapping row, small icons, tight spacing. */
.hero__points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    width: 100%;
}

.hero__points li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    white-space: nowrap;
}

.hero__points .hero__point-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-050);
    color: var(--color-brand-700);
}

.hero__points svg {
    flex: none;
}

/* --- Hero visual: the approved product-composition photograph (see
   PROJECT_CORE.md's asset integration task) — a real <img>, not CSS
   background, so it stays a meaningful, indexable, accessible visual.
   The container is no longer aria-hidden (it holds real content now);
   the soft blue glow behind it is the only remaining decoration, purely
   presentational. Sized by width with height: auto + object-fit: contain
   so the source's own aspect ratio is never stretched or cropped. --- */
.hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.hero__visual-glow {
    position: absolute;
    inset: 4% 0 6% 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(17, 118, 188, 0.18) 0%, rgba(17, 118, 188, 0) 68%);
}

.hero__visual-image {
    position: relative;
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
}

/* Catalogue anchor target; catalogue grid arrives in Phase 10. */
#products {
    scroll-margin-top: calc(76px + var(--space-6));
}

#products:focus {
    outline: none;
}

@media (max-width: 1023px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: var(--space-8);
    }

    .hero h1 {
        font-size: clamp(2.1rem, 4.4vw, 2.75rem);
    }

    .hero__visual-image {
        max-width: 360px;
    }
}

@media (max-width: 767px) {
    .hero__inner {
        grid-template-columns: 1fr;
        padding-block: var(--space-8) var(--space-8);
        gap: var(--space-5);
    }

    .hero__content {
        max-width: none;
    }

    /* Image leads on mobile (hero asset integration task): the product
       photo is the visual introduction, appearing above the eyebrow/
       headline/copy/CTAs. order: -1 is a real layout reorder, not
       absolute-position faking; DOM order (content first) is unchanged,
       so keyboard/reading order is unaffected — only paint order moves.
       A responsive percentage width with a sensible max-width (not a
       fixed px value) keeps it proportionate at every phone size without
       becoming excessively tall. */
    .hero__visual {
        order: -1;
        padding: var(--space-2) var(--space-6);
    }

    .hero__visual-image {
        width: 78%;
        max-width: 300px;
    }

    .hero h1 {
        font-size: clamp(2rem, 8vw, 2.5rem);
        max-width: none;
    }

    .hero__actions {
        width: 100%;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .hero__rail {
        right: -4%;
    }
}

/* ============================================================
   7. Brand & Category Navigation
   ============================================================ */

/* Compact editorial split: brand and category browsing sit side by side
   as two open columns with a hairline divider — a support section, not a
   visually dominant chapter, so its footprint stays small (~130-160px). */
.discovery {
    padding-block: var(--space-5);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    background-color: var(--surface-subtle);
}

.discovery__grid {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr: an implicit 1fr track's minimum is
       "auto" (its content's min-content size) by default. .browse-group
       switches to flex-wrap: nowrap at mobile, so its un-shrinkable chip
       row has a huge min-content width — a bare 1fr track would grow to
       fit that and blow out past the viewport, defeating browse-group's
       own overflow-x: auto before it ever gets a chance to clip/scroll. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

@media (min-width: 900px) {
    .discovery__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-10);
    }

    .discovery__grid--single {
        grid-template-columns: 1fr;
    }

    .discovery__grid:not(.discovery__grid--single) .discovery__group + .discovery__group {
        margin-top: 0;
        padding-top: 0;
        padding-left: var(--space-10);
        border-top: none;
        border-left: 1px solid var(--border-soft);
    }
}

.discovery__group + .discovery__group {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-soft);
}

.browse-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.browse-section__title {
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-700);
}

.browse-section__clear {
    appearance: none;
    border: 0;
    background: none;
    padding: var(--space-1) var(--space-2);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-link);
    text-decoration: underline;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
}

.browse-section__clear:hover {
    color: var(--color-link-hover);
}

.browse-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Mobile: a horizontal-scroll strip instead of several wrapped rows — the
   document itself never scrolls horizontally (only this internal strip
   does), and every chip's label stays fully visible/readable, never
   truncated. */
@media (max-width: 639px) {
    .browse-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: var(--space-2);
        margin-inline: calc(var(--page-gutter) * -1);
        padding-inline: var(--page-gutter);
        padding-bottom: var(--space-1);
    }

    .browse-group .browse-chip {
        flex: none;
        scroll-snap-align: start;
    }
}

.browse-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.browse-chip:hover {
    border-color: var(--color-brand-500);
    color: var(--color-brand-700);
    box-shadow: var(--shadow-xs);
    transform: translateY(-1px);
}

/* Active: blue-tinted surface, blue border, deep blue text — a restrained
   selected state, not a solid filled pill. */
.browse-chip[aria-pressed="true"] {
    background-color: var(--color-brand-100);
    border-color: var(--color-brand-500);
    color: var(--color-brand-700);
    font-weight: var(--font-weight-semibold);
}

.browse-chip[aria-pressed="true"]:hover {
    background-color: var(--color-brand-100);
    border-color: var(--color-brand-700);
    color: var(--color-brand-700);
}

/* Category chips carry a stronger identity than brand chips: a small line
   icon, a taller elevated surface and a squarer radius. */
.browse-chip--category {
    min-height: 42px;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    box-shadow: var(--shadow-xs);
    font-weight: var(--font-weight-semibold);
}

.browse-chip--category svg {
    flex: none;
    color: var(--color-brand-500);
}

.browse-chip--category:hover {
    background-color: var(--color-brand-050);
    color: var(--color-brand-700);
    box-shadow: var(--shadow-sm);
}

.browse-chip--category[aria-pressed="true"] {
    background-color: var(--color-brand-100);
    border-color: var(--color-brand-500);
    color: var(--color-brand-700);
}

.browse-chip--category[aria-pressed="true"] svg {
    color: var(--color-brand-700);
}

.browse-chip--category[aria-pressed="true"]:hover {
    background-color: var(--color-brand-800);
    border-color: var(--color-brand-800);
    color: var(--color-white);
}

.browse-chip--category[aria-pressed="true"]:hover svg {
    color: var(--color-white);
}

/* ============================================================
   8. Catalogue Discovery Controls
   ============================================================ */

.catalogue {
    padding-block: var(--section-padding);
    border-top: 1px solid var(--border-soft);
}

.catalogue__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.catalogue__title {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.catalogue__subtitle {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.catalogue__count-badge {
    flex: none;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background-color: var(--surface-subtle);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-700);
    white-space: nowrap;
}

.catalogue-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    background-color: var(--surface-white);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.catalogue-form__search-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.catalogue-search {
    position: relative;
    flex: 1 1 auto;
}

.catalogue-search__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    display: flex;
    color: var(--text-muted);
    pointer-events: none;
}

.catalogue-search .form-control {
    height: 48px;
    padding-left: 44px;
    padding-right: 44px;
    border-color: var(--border-soft);
    background-color: var(--surface-subtle);
}

.catalogue-search .form-control:focus {
    background-color: var(--color-white);
}

.catalogue-search__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-gray-500);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.catalogue-search__clear:hover {
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
}

.catalogue-form__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}

.catalogue-field {
    flex: 1 1 180px;
    min-width: 180px;
}

.catalogue-field .form-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.catalogue-form__search-row .btn--primary {
    border-radius: var(--radius-pill);
    padding-inline: var(--space-6);
}

/* --- Mobile filter/sort: compact "[ Filters ] [ Sort ]" trigger row plus
   two bottom sheets, replacing the desktop 3-select row at <=639px so the
   toolbar never becomes several stacked full-width form rows. Desktop is
   untouched: .catalogue-filter-fields is display:contents there, so Stock/
   Condition remain plain inline selects exactly as before; the trigger row
   and both sheets are mobile-only (hidden at >=640px). --- */
.catalogue-form__mobile-triggers {
    display: none;
}

.catalogue-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0;
    min-height: 46px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalogue-filter-trigger svg {
    flex: none;
    color: var(--color-brand-500);
}

.catalogue-filter-trigger[aria-expanded="true"] {
    border-color: var(--color-brand-500);
    background-color: var(--color-primary-soft);
    color: var(--color-brand-700);
}

.catalogue-filter-trigger__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-700);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
}

.catalogue-filter-trigger__count[hidden] {
    display: none;
}

.catalogue-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background-color: rgba(7, 32, 51, 0.5);
}

.catalogue-sheet-backdrop[hidden] {
    display: none;
}

/* Desktop/tablet: .catalogue-filter-fields is a transparent wrapper —
   display:contents makes its Stock/Condition fields direct flex items of
   .catalogue-form__controls, laid out exactly as before this pass, with
   the sheet-only header/actions chrome hidden — at this width the sheet
   has no closed state; it simply isn't a sheet. Open/closed state is a
   JS-toggled class (.is-open, see the mobile block below), not the HTML
   [hidden] attribute — [hidden] would need to be present in the
   server-rendered markup for the sheet to start closed, but the UA
   stylesheet's [hidden] rule outranks a plain author `display` value in
   the cascade, which fights the desktop display:contents override above.
   The sort sheet has no desktop role at all (Sort stays a plain inline
   select there), so it's fully hidden. */
.catalogue-filter-fields {
    display: contents;
}

.catalogue-filter-fields__header,
.catalogue-filter-fields__actions {
    display: none;
}

.catalogue-sort-sheet {
    display: none;
}

@media (max-width: 639px) {
    .catalogue-filter-fields,
    .catalogue-sort-sheet {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--z-modal) + 1);
        max-height: 80vh;
        overflow-y: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        background-color: var(--surface-white);
        box-shadow: var(--shadow-lg);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .catalogue-filter-fields.is-open,
    .catalogue-sort-sheet.is-open {
        display: block;
    }

    .catalogue-filter-fields__header,
    .catalogue-filter-fields__actions {
        display: flex;
    }
}

.catalogue-filter-fields__header {
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-700);
}

.catalogue-filter-fields__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    color: var(--text-secondary);
    cursor: pointer;
}

.catalogue-filter-fields__actions {
    gap: var(--space-3);
    padding: var(--space-5);
}

.catalogue-sort-sheet__list {
    padding: var(--space-2);
}

.catalogue-sort-sheet__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    cursor: pointer;
}

.catalogue-sort-sheet__option svg {
    color: var(--color-brand-500);
    opacity: 0;
}

.catalogue-sort-sheet__option[aria-pressed="true"] {
    background-color: var(--color-brand-050);
    color: var(--color-brand-700);
    font-weight: var(--font-weight-semibold);
}

.catalogue-sort-sheet__option[aria-pressed="true"] svg {
    opacity: 1;
}

@media (max-width: 639px) {
    .catalogue-form__mobile-triggers {
        display: flex;
        gap: var(--space-3);
    }

    /* .catalogue-filter-fields stays a child here so it can still render
       when JS clears [hidden] (it's position:fixed, so it doesn't
       contribute to this container's own flow/height either way) — only
       the container's own visible chrome and its one remaining in-flow
       child (Sort) are removed, not the whole subtree. */
    .catalogue-form__controls {
        padding-top: 0;
        border-top: 0;
        gap: 0;
    }

    .catalogue-field--sort {
        display: none;
    }
}

.catalogue-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.catalogue-active__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.catalogue-active__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalogue-active__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.catalogue-active__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    color: var(--color-gray-500);
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.catalogue-active__remove:hover {
    color: var(--color-danger);
    background-color: var(--color-gray-100);
}

.catalogue-active__clear-all {
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

.catalogue-active__clear-all:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.catalogue-status {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.catalogue-status__empty {
    padding: var(--space-6);
    text-align: center;
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.catalogue-status__empty a {
    color: var(--color-link);
}

/* ============================================================
   9. Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.btn:hover {
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

.btn--primary:active {
    background-color: var(--color-primary-active);
}

.btn--secondary {
    background-color: var(--color-bg);
    color: var(--color-brand-700);
    border-color: var(--color-brand-500);
}

.btn--secondary:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-brand-700);
}

.btn--ghost {
    background-color: transparent;
    color: var(--color-brand-700);
}

.btn--ghost:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-brand-800);
}

.btn--whatsapp {
    background-color: var(--color-whatsapp-600);
    color: var(--color-white);
}

.btn--whatsapp:hover {
    background-color: var(--color-whatsapp-700);
    color: var(--color-white);
}

.btn--destructive {
    background-color: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn--destructive:hover {
    background-color: var(--color-danger-050);
    color: var(--color-danger-700);
    border-color: var(--color-danger-700);
}

/* Secondary action on a dark/gradient surface (final CTA banner) — an
   outlined control, never a second solid-filled button competing with the
   primary WhatsApp CTA. */
.btn--outline-white {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline-white:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--color-white);
}

.btn--sm {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}

.btn--lg {
    min-height: 52px;
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-md);
}

.btn--block {
    width: 100%;
}

.btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
}

.btn.is-loading {
    position: relative;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: sp-spin 600ms linear infinite;
    vertical-align: -0.125em;
}

/* ============================================================
   10. Badges / Pills
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--success {
    background-color: var(--color-success-050);
    color: var(--color-success-700);
}

.badge--warning {
    background-color: var(--color-warning-050);
    color: var(--color-warning-700);
}

.badge--danger {
    background-color: var(--color-danger-050);
    color: var(--color-danger-700);
}

.badge--neutral {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
}

.badge--brand {
    background-color: var(--color-brand-100);
    color: var(--color-brand-700);
}

.badge--accent {
    background-color: var(--color-accent-100);
    color: var(--color-accent-700);
}

.badge--outline {
    background-color: transparent;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
}

/* ============================================================
   11. Chips
   ============================================================ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}

button.chip {
    min-height: 36px;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

button.chip:hover {
    background-color: var(--color-brand-100);
    color: var(--color-brand-700);
}

.chip--outline {
    background-color: transparent;
    border-color: var(--color-gray-200);
}

.chip--brand {
    background-color: var(--color-brand-050);
    color: var(--color-brand-700);
}

.chip--accent {
    background-color: var(--color-accent-100);
    color: var(--color-accent-700);
}

.chip--active {
    background-color: var(--color-brand-700);
    color: var(--color-white);
}

button.chip--active:hover {
    background-color: var(--color-brand-800);
    color: var(--color-white);
}

/* ============================================================
   12. Forms
   ============================================================ */

.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
}

.form-required {
    color: var(--color-danger);
}

.form-control {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-md);
    color: var(--color-gray-900);
    background-color: var(--color-bg);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.form-control::placeholder {
    color: var(--color-gray-400);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px rgba(30, 102, 166, 0.18);
}

.form-control:disabled {
    background-color: var(--color-gray-050);
    color: var(--color-gray-500);
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 1rem;
    padding-right: 2.75rem;
}

.form-hint {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.form-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-danger);
    margin-top: var(--space-2);
}

.form-group--invalid .form-label {
    color: var(--color-danger);
}

.form-group--invalid .form-control {
    border-color: var(--color-danger);
}

.form-group--invalid .form-control:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
}

.form-error-summary {
    background-color: var(--color-danger-050);
    border: 1px solid var(--color-danger-100);
    color: var(--color-danger-700);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.form-error-summary ul {
    list-style: disc;
    padding-left: var(--space-5);
    margin-top: var(--space-2);
}

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

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    flex: none;
    accent-color: var(--color-brand-700);
}

.form-check label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-6);
}

/* ============================================================
   13. Cards
   ============================================================ */

.card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.card--flat {
    box-shadow: none;
}

.card--hoverable {
    transition:
        box-shadow var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.card--hoverable:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card--clickable {
    position: relative;
}

.card__image {
    background-color: var(--color-gray-050);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-6);
}

.card__image--fallback {
    color: var(--color-gray-400);
}

.card__body {
    padding: var(--space-5);
}

.card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

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

.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
}

.stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ============================================================
   14. Product Card
   ============================================================ */

.product-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition:
        box-shadow var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.product-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-brand-100);
    transform: translateY(-3px);
}

.product-card:hover .product-card__image {
    transform: scale(1.015);
}

.product-card:focus-within {
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px rgba(17, 118, 188, 0.18);
}

.product-card__media {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 40%, var(--color-brand-050) 0%, transparent 65%),
        var(--surface-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.product-card__badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 248px;
    object-fit: contain;
    padding: var(--space-6);
    transition: transform var(--duration-slow) var(--ease-standard);
}

.product-card__image--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 248px;
    color: var(--color-gray-400);
}

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

.product-card__brand {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-brand-500);
}

.product-card__title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.005em;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-card__sku {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.product-card__highlights {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Mini spec blocks: value first (larger, dark) with its label underneath
   (small, muted, uppercase) rather than a single flat line of text — reads
   as a spec sheet, not a generic tag/pill. */
.product-card__chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--surface-subtle);
}

.product-card__spec-value {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--text-primary);
    /* Wrap long values (e.g. "RTX A2000") at word boundaries instead of
       clipping them with ellipsis — the chip's own minmax(0, 1fr) grid
       track (below) keeps this safe from ever overflowing the card. */
    overflow-wrap: break-word;
    word-break: normal;
}

.product-card__spec-label {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.product-card__warranty {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-success-700);
}

.product-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
}

/* Grid, not flex: auto sizes the WhatsApp button to its own compact
   content, minmax(0, 1fr) gives Add to Enquiry the rest of the row with
   an explicit safe minimum (0) — this is what actually prevents the row
   from ever overflowing the card, regardless of label length, instead of
   flex's shrink behavior clipping it under pressure. */
.product-card__actions-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
}

.product-card__action-cta {
    min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.product-card .btn--secondary.product-card__action-cta {
    border-color: var(--border-medium);
    color: var(--color-brand-700);
}

.product-card .btn--secondary.product-card__action-cta:hover {
    border-color: var(--color-brand-500);
    background-color: var(--color-primary-soft);
}

/* --- Mobile Compact Product Card ---
   At <=639px the grid is one card per row (see "15. Product Grid + Load
   More"), so this is a lightly-condensed version of the desktop card —
   not the cramped 2-column preview from an earlier pass — with the full
   content width to work with. Every zone (badges, image, brand/title,
   spec chips, warranty, View Details, WhatsApp + Add to Enquiry) stays a
   structured region so every card renders identically regardless of
   product data; nothing here is a per-product or per-SKU override, and
   desktop/tablet markup and behavior are completely unaffected. */
@media (max-width: 639px) {
    .product-card__image,
    .product-card__image--fallback {
        min-height: 200px;
        padding: var(--space-5);
    }

    .product-card__badges {
        top: var(--space-3);
        left: var(--space-3);
        right: var(--space-3);
    }

    .product-card__body {
        gap: var(--space-2);
        padding: var(--space-4) var(--space-4) var(--space-3);
    }

    /* Reserves room for a typical 2-line title so cards with short vs.
       long titles still align — not a fixed card height, just a sensible
       minimum for this one region. */
    .product-card__title {
        min-height: calc(1.125rem * var(--leading-tight) * 2);
    }

    .product-card__sku {
        display: none;
    }

    /* Explicit 2-column grid (not the desktop auto-fill) — a full-width
       mobile card is wide enough for 3-4 of the base rule's 70px auto-fill
       columns, which would pack specs too tightly; minmax(0, 1fr) keeps
       each column safely shrinkable so a wide value never overflows. */
    .product-card__highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .product-card__warranty {
        padding-top: var(--space-3);
    }

    .product-card__actions {
        gap: var(--space-2);
        padding: 0 var(--space-4) var(--space-4);
    }

    /* WhatsApp stays a compact square icon action (its accessible name
       still comes from the dynamic aria-label initWhatsAppLinks() already
       sets in app.js — hiding the visible <span> text doesn't touch
       that); Add to Enquiry keeps its full label at a normal reading
       size, safely filling the grid's minmax(0, 1fr) column above. */
    .product-card__action-cta.btn--whatsapp {
        width: 44px;
        padding: 0;
    }

    .product-card__action-cta.btn--whatsapp span {
        display: none;
    }
}

/* ============================================================
   15. Product Grid + Load More
   ============================================================ */

.product-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.product-grid__item {
    display: contents;
}

/* Load More */
.catalogue-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-10);
    text-align: center;
}

.catalogue-load-more .btn {
    min-width: 220px;
    border-radius: var(--radius-pill);
    border-color: var(--border-medium);
}

.catalogue-load-more .btn:hover:not(:disabled) {
    border-color: var(--color-brand-500);
    background-color: var(--color-primary-soft);
    color: var(--color-brand-700);
}

.load-more__loading .spinner {
    animation: sp-spin 600ms linear infinite;
}

@keyframes sp-spin {
    to { transform: rotate(360deg); }
}

/* Responsive grid adjustments */
/* Mobile: one card per row (brand-color/mobile-refinement pass). A prior
   phase used 2 columns down to 360px; that forced every mobile card into
   ~170px, which is the direct cause of the badge/chip/CTA overflow and
   clipping problems this pass corrects. One column gives each card its
   full content width back, so the fixes below are structural rather than
   per-product patches. Readability/conversion over density. */
@media (max-width: 639px) {
    .product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 3 columns at every standard desktop width (container caps at 1280px, so
   a wider 4-column breakpoint would never earn genuinely premium card
   width anyway) — a hard requirement: perceived product value over grid
   density. */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================================
   16. Modal Foundation (behaviour added in Phase 11)
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background-color: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: fade-in var(--duration-base) var(--ease-out);
}

/*
 * Background scroll lock while any modal is open. JS pins the body at its
 * current scroll offset via an inline `top` value and restores it on close;
 * this rule only needs to hold the body still and prevent it from scrolling.
 */
body.modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background-color: var(--color-bg);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-in var(--duration-slow) var(--ease-out);
}

.modal--lg {
    max-width: 1160px;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.modal__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.modal__body {
    padding: var(--space-6);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Stop scrolling past the top/bottom of the modal's own content from
       chaining into (scrolling) the locked background page behind it. */
    overscroll-behavior: contain;
}

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
}

.modal__close {
    flex: none;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ============================================================
   17. Desktop Product Modal Content
   ============================================================ */

.product-modal__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-8);
    align-items: start;
}

.product-modal__media {
    position: relative;
    background-color: var(--color-gray-050);
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.product-modal__badges {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-modal__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-8);
}

.product-modal__image--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-gray-400);
}

/* ---- Image Gallery (Phase 12) ---- */

.product-modal__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.product-modal__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    /* Let the browser keep handling vertical scroll/pan natively; JS only
       ever preventDefault()s once a horizontal swipe is confirmed. */
    touch-action: pan-y;
}

.product-modal__gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-brand-700);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.product-modal__gallery-nav:hover:not(:disabled) {
    background-color: var(--color-white);
    transform: translateY(-50%) scale(1.05);
}

.product-modal__gallery-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.product-modal__gallery-nav:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

.product-modal__gallery-nav--prev {
    left: var(--space-3);
}

.product-modal__gallery-nav--next {
    right: var(--space-3);
}

.product-modal__gallery-indicator {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: rgba(15, 23, 42, 0.68);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}

.product-modal__gallery-thumbs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--space-1);
    scroll-behavior: smooth;
    max-width: 100%;
}

.product-modal__gallery-thumb {
    flex: none;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--color-gray-050);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out);
}

.product-modal__gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-modal__gallery-thumb--broken {
    background-color: var(--color-gray-100);
}

.product-modal__gallery-thumb:hover {
    border-color: var(--color-gray-300);
}

.product-modal__gallery-thumb[aria-current="true"] {
    border-color: var(--color-brand-500);
}

.product-modal__gallery-thumb:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
}

.product-modal__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* Without this, this grid item's automatic minimum width is based on
       its content's min-content size (CSS Grid default for overflow:visible
       items) — and the Phase 13 tablist's nowrap row is wide enough to
       balloon this whole column past the grid track, clipped invisibly by
       .modal's overflow:hidden. Matches the same fix already applied to
       the sibling .product-modal__gallery column in Phase 12. */
    min-width: 0;
}

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

.product-modal__brand {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-700);
}

.product-modal__title {
    font-size: var(--text-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin: 0;
}

.product-modal__sku {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.product-modal__description {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.product-modal__highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-modal__chip {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
}

.product-modal__section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-700);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-brand-100);
}

.product-modal__specifications,
.product-modal__warranty,
.product-modal__box-contents {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.product-modal__specs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.product-modal__spec-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.product-modal__spec-group-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-700);
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.product-modal__spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-2) 0;
}

.product-modal__spec-label {
    flex: 0 0 40%;
    min-width: 120px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.product-modal__spec-value {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
    word-break: break-word;
}

.product-modal__warranty-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-success-700);
    margin: 0;
}

.product-modal__box-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

.product-modal__box-list li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-md);
    color: var(--color-text);
}

.product-modal__box-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-brand-500);
}

/* ---- Detail tabs (Phase 13) ---- */
/*
 * One set of markup for both layouts. Below the mobile breakpoint this is a
 * real tablist showing one panel at a time (see styles further down and the
 * JS in app.js). At and above the mobile breakpoint the tablist is hidden
 * and every panel is forced visible, reproducing the exact Phase 11/12
 * stacked desktop layout — see the min-width override below.
 */
.product-modal__detail-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.product-modal__tablist {
    margin: 0;
}

.product-modal__tabpanel[hidden] {
    display: none;
}

.product-modal__tab-empty {
    margin: 0;
    padding: var(--space-2) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@media (min-width: 768px) and (min-height: 501px) {
    /* Desktop/tablet: no tabs, everything stacked — the Phase 11/12 layout.
       (min-height excludes short landscape phones — e.g. 844x390 — which
       must still get the mobile tabbed layout despite being >=768px wide;
       see the matching (max-height: 500px) and (orientation: landscape)
       condition on the mobile full-screen rule further down.)

       Both overrides below need extra specificity/!important to win:
       - ".tabs { display: flex }" (the reused base component) has equal
         specificity to ".product-modal__tablist" alone, so the compound
         selector is required to reliably beat it regardless of source order.
       - "[hidden] { display: none !important; }" is a global reset (see
         section 2), so forcing a [hidden] panel visible here must also use
         !important or the reset always wins. */
    .product-modal__tablist.tabs {
        display: none;
    }

    .product-modal__tabpanel[hidden] {
        display: block !important;
    }

    /* Desktop already omits an empty section entirely (unchanged from
       Phase 11); the mobile-only empty-state message stays mobile-only. */
    .product-modal__tab-empty {
        display: none;
    }
}

.product-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.product-modal__actions .btn {
    flex: 1;
    min-width: 160px;
}

/* Responsive adjustments for modal */
@media (max-width: 1023px) {
    .product-modal__grid {
        grid-template-columns: 1fr;
    }

    .product-modal__media {
        max-height: 40vh;
        aspect-ratio: 16 / 10;
    }

    .product-modal__spec-label {
        flex: 0 0 35%;
        min-width: 100px;
    }
}

@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
    /* Mobile product detail (Phase 13). The second condition covers short
       landscape phones (e.g. 844x390, 800x360): they're >=768px wide, but
       clearly a phone, not a tablet/desktop — they need this same layout,
       not the two-column stacked one. (Kept in sync with the matching
       (min-width: 768px) and (min-height: 501px) desktop override above.)

       100vh is a safe fallback for browsers without dvh support; 100dvh
       (dynamic viewport height) follows the real visible area as mobile
       browser chrome shows/hides, avoiding the classic 100vh clipping/
       overscroll problem. The dvh line is simply ignored by browsers that
       don't understand it, leaving the vh fallback in effect. */
    .modal-backdrop {
        /* True edge-to-edge surface on mobile — no backdrop margin. */
        padding: 0;
    }

    .modal--lg {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    /* Remove desktop modal chrome/spacing that doesn't belong on a
       near-full-screen mobile surface, and clear notches/home indicators. */
    .modal__header {
        padding: var(--space-4) var(--space-5);
        padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
        padding-left: calc(var(--space-5) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--space-5) + env(safe-area-inset-right, 0px));
    }

    .modal__body {
        padding: var(--space-5);
    }

    .modal__footer {
        padding: var(--space-4) var(--space-5);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        padding-left: calc(var(--space-5) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--space-5) + env(safe-area-inset-right, 0px));
    }

    .product-modal__grid {
        gap: var(--space-5);
    }

    .product-modal__details {
        gap: var(--space-4);
    }

    .product-modal__detail-tabs {
        /* Tighter than the desktop stacked-panel rhythm: mobile only ever
           shows the tablist plus one panel at a time. */
        gap: var(--space-3);
    }

    .product-modal__media {
        max-height: 50vh;
    }

    .product-modal__title {
        font-size: var(--text-lg);
    }

    .product-modal__spec-row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .product-modal__spec-label {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Tabs stay a single scrollable row rather than wrapping/clipping
       labels at narrow widths (down to 360px). */
    .product-modal__tablist {
        flex-wrap: nowrap;
    }

    .product-modal__tab {
        flex: none;
    }

    .product-modal__actions {
        flex-direction: column;
        /* Sticky mobile action area: this footer already sits outside
           .modal__body's own scroll container (a flex sibling, not an
           overlay), so it never covers panel content — it just needs a
           bottom safe-area clearance for notched/gesture-bar devices. */
    }

    .product-modal__actions .btn {
        width: 100%;
    }

    /* Meet the ~44px touch-target guideline on touch-first widths. */
    .product-modal__gallery-nav {
        width: 44px;
        height: 44px;
    }

    .product-modal__gallery-thumb {
        width: 52px;
        height: 52px;
    }
}

/* Focus styles within modal */
.modal:focus-within .modal__close {
    outline: none;
}

.modal__close:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   18. Tabs
   ============================================================ */

.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
}

.tab:hover {
    color: var(--color-brand-700);
}

.tab:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: -2px;
}

.tab--active {
    color: var(--color-brand-700);
    border-bottom-color: var(--color-brand-700);
}

.tab-panel:focus {
    outline: none;
}

/* ============================================================
   19. Enquiry List + Toast
   ============================================================ */

/* Add to Enquiry button, once the product is already in the list. Restrained
   — a border/text tint, not a full color swap — so it reads as "confirmed"
   without looking like a different action (this is never a Remove button;
   removal happens from the Enquiry panel, per PROJECT_CORE.md). */
.btn.is-added {
    border-color: var(--color-success);
    color: var(--color-success-700);
}

.btn.is-added:hover {
    background-color: var(--color-success-050);
    color: var(--color-success-700);
}

.enquiry-panel__storage-notice {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-warning-050);
    color: var(--color-warning-700);
    font-size: var(--text-sm);
}

.enquiry-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    color: var(--color-text-muted);
}

.enquiry-panel__empty svg {
    color: var(--color-gray-300);
}

.enquiry-panel__empty-text {
    margin: 0;
    max-width: 40ch;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.enquiry-panel__empty-text strong {
    color: var(--color-text);
}

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

.enquiry-panel__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.enquiry-panel__item:first-child {
    padding-top: 0;
}

.enquiry-panel__item-info {
    min-width: 0;
    flex: 1;
}

.enquiry-panel__item-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.enquiry-panel__item-sku {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.enquiry-panel__item-remove {
    flex: none;
    color: var(--color-text-muted);
}

.enquiry-panel__item-remove:hover {
    background-color: var(--color-danger-050);
    color: var(--color-danger-700);
}

.enquiry-panel__confirm {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--color-danger-050);
}

.enquiry-panel__confirm-text {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

.enquiry-panel__confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Non-blocking status toast. Fixed near the top so it never overlaps the
   product modal's/mobile detail's sticky action bar at the bottom, and sits
   above every overlay (--z-modal) so it's visible even while a dialog is
   open — e.g. adding a product from inside the product modal. */
.app-toast {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: calc(var(--z-modal) + 1);
    max-width: calc(100% - var(--space-8));
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    background-color: var(--color-gray-900);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
    pointer-events: none;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   20. Empty / Loading / Error States
   ============================================================ */

.state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
}

.state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
}

.state__icon svg {
    width: 2.5rem;
    height: 2.5rem;
}

.state__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.state__text {
    color: var(--color-text-secondary);
    max-width: 40ch;
}

.state__action {
    margin-top: var(--space-2);
}

.loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.spinner {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-brand-500);
    border-radius: var(--radius-pill);
    animation: sp-spin 600ms linear infinite;
}

.spinner--lg {
    width: 2rem;
    height: 2rem;
}

@keyframes sp-spin {
    to { transform: rotate(360deg); }
}

.skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-050) 50%, var(--color-gray-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton--title {
    height: 1.25rem;
    width: 60%;
    max-width: 20rem;
}

.skeleton--text {
    height: 0.875rem;
    width: 100%;
    max-width: 28rem;
}

.skeleton--image {
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: var(--radius-lg);
}

@keyframes skeleton-shimmer {
    to { background-position: -200% 0; }
}

/* ============================================================
   21. Utilities
   ============================================================ */

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.m-0 { margin: 0; }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }

/* ============================================================
   22. Home Trust Section
   ============================================================ */

/* One compact horizontal strip — a support section, not a full chapter.
   Six equal items in a single row where space allows, no oversized ghost
   numerals; the value here is the six short claims themselves. */
.trust {
    padding-block: var(--space-10);
    background-color: var(--surface-subtle);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.trust__header {
    max-width: 560px;
    margin: 0 auto var(--space-6);
    text-align: center;
}

.trust__title {
    font-size: 1.625rem;
    color: var(--color-brand-700);
}

.trust__lead {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.trust__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
}

.trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.trust__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background-color: var(--color-brand-100);
    color: var(--color-brand-700);
}

.trust__item-icon svg {
    width: 17px;
    height: 17px;
}

.trust__item-title {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.trust__item-text {
    font-size: 0.8125rem;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    max-width: 24ch;
}

@media (min-width: 900px) {
    .trust__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

@media (max-width: 639px) {
    /* A compact 2x3 grid, not six stacked full-width rows — each item
       keeps its centered icon-above-title-above-text layout (unchanged
       from the base rule), just narrower. */
    .trust__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5) var(--space-3);
    }

    .trust__item-text {
        max-width: none;
    }

    .trust__item-icon {
        flex: none;
    }
}

/* ============================================================
   23. Home Final CTA Banner
   ============================================================ */

.final-cta {
    padding-block: var(--space-8);
}

.final-cta__panel {
    position: relative;
    overflow: hidden;
    padding: var(--space-6) var(--space-8);
    border-radius: 26px;
    background: linear-gradient(110deg, var(--color-brand-700) 0%, var(--color-brand-500) 100%);
    box-shadow: var(--shadow-lg);
}

/* Subtle oversized diagonal line pattern referencing the logo geometry, at
   very low opacity — never a busy background. */
.final-cta__pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        124deg,
        transparent 0,
        transparent 46px,
        rgba(255, 255, 255, 0.05) 46px,
        rgba(255, 255, 255, 0.05) 47px
    );
    pointer-events: none;
}

.final-cta__content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-10);
    text-align: left;
}

.final-cta__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--color-white);
    margin-bottom: var(--space-1);
}

.final-cta__text {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.82);
    max-width: 46ch;
}

.final-cta__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: none;
    gap: var(--space-3);
}

.final-cta__actions .btn {
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 899px) {
    .final-cta__content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .final-cta__title,
    .final-cta__text {
        max-width: none;
        margin-inline: auto;
    }

    .final-cta__actions {
        justify-content: center;
        margin-top: var(--space-4);
    }
}

@media (max-width: 639px) {
    .final-cta__panel {
        padding: var(--space-8) var(--space-5);
    }

    .final-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .final-cta__actions .btn {
        width: 100%;
    }
}

/* ============================================================
   24. Internal Page Hero
   ============================================================ */

/* Shared compact hero for internal pages (About, Contact) — quieter than
   the Home hero: no split/illustration, no CTA, centered single column. */

.internal-hero {
    padding-block: var(--space-12) var(--space-10);
    background-color: var(--color-brand-050);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.internal-hero h1 {
    margin-top: var(--space-4);
    color: var(--color-brand-700);
}

.internal-hero__lead {
    margin: var(--space-4) auto 0;
    max-width: 56ch;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

@media (max-width: 639px) {
    .internal-hero {
        padding-block: var(--space-10) var(--space-8);
    }
}

/* ============================================================
   25. About Page
   ============================================================ */

/* --- About Hero: a dedicated split hero (distinct from the shared
   .internal-hero Contact still uses) — quieter/more symmetrical than the
   Home hero, target ~500-600px tall. Reuses .hero__eyebrow/.hero__lead/
   .hero__actions verbatim for typographic consistency with Home. --- */
.about-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 800px 480px at 10% 0%, var(--color-brand-050) 0%, transparent 60%),
        var(--color-white);
    border-bottom: 1px solid var(--border-soft);
}

.about-hero__rail {
    position: absolute;
    top: -15%;
    right: 8%;
    width: 2px;
    height: 130%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(17, 118, 188, 0.2) 16%,
        rgba(7, 71, 124, 0.26) 50%,
        rgba(17, 118, 188, 0.16) 84%,
        transparent 100%);
    transform: rotate(14deg);
    pointer-events: none;
}

.about-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
    padding-block: var(--space-12);
}

.about-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: 540px;
}

.about-hero h1 {
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.about-hero h1 em {
    font-style: normal;
    color: var(--color-brand-500);
}

.about-hero__lead {
    max-width: 48ch;
}

/* Real product-composition photograph (see PROJECT_CORE.md's asset
   integration task) — a genuine <img>, not CSS background. The container
   is no longer aria-hidden (it holds real, meaningful content now); the
   soft blue glow remains the only decoration. */
.about-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.about-hero__visual-glow {
    position: absolute;
    inset: 6% 4% 8% 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(17, 118, 188, 0.16) 0%, rgba(17, 118, 188, 0) 68%);
}

.about-hero__visual-image {
    position: relative;
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    margin-inline: auto;
}

@media (max-width: 1023px) {
    .about-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: var(--space-8);
    }

    .about-hero__visual-image {
        max-width: 340px;
    }
}

@media (max-width: 767px) {
    .about-hero__inner {
        grid-template-columns: 1fr;
        padding-block: var(--space-10) var(--space-8);
        gap: var(--space-6);
    }

    .about-hero__content {
        max-width: none;
    }

    /* Image leads on mobile (hero asset integration task): the product
       photo is the visual introduction, appearing above the eyebrow/
       headline/copy. order: -1 is a real layout reorder (not absolute-
       position faking); DOM order (content first) is unchanged, so
       keyboard/reading order is unaffected — only paint order moves. A
       responsive percentage width with a sensible max-width keeps it
       proportionate at every phone size without becoming excessively
       tall or pushing the heading too far down. */
    .about-hero__inner {
        padding-block: var(--space-8) var(--space-8);
    }

    .about-hero__visual {
        order: -1;
        padding: var(--space-2) var(--space-6);
    }

    .about-hero__visual-image {
        width: 78%;
        max-width: 300px;
    }

    .about-hero .hero__actions {
        width: 100%;
    }

    .about-hero .hero__actions .btn {
        width: 100%;
    }
}

/* --- Company Story ("Who We Are"): editorial statement left, supporting
   copy right — not a plain label/paragraph row. --- */
.about-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
}

.about-story__label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-500);
    margin-bottom: var(--space-3);
}

.about-story__statement {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-brand-700);
}

.about-story__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 60ch;
    padding-top: var(--space-2);
    border-left: 2px solid var(--border-soft);
    padding-left: var(--space-6);
}

.about-story__content p {
    color: var(--color-text-secondary);
}

@media (max-width: 767px) {
    .about-story__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .about-story__content {
        border-left: none;
        padding-left: 0;
    }
}

/* --- Technology Focus: one editorial surface with hairline dividers
   between items (border-collapse trick via negative margins) — informational
   brand content, not filter chips/buttons. Compact section: it supports
   the page, it doesn't compete with the Like-New signature moment below
   it. --- */
.about-focus {
    padding-block: var(--space-10);
}

.about-focus__title {
    text-align: center;
}

.about-focus__intro {
    max-width: 60ch;
    margin: var(--space-3) auto 0;
    text-align: center;
    color: var(--color-text-secondary);
}

.about-focus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--space-8);
    border-top: 1px solid var(--border-soft);
    border-left: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-white);
}

.about-focus-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.about-focus-tile:hover {
    background-color: var(--surface-blue-tint);
    color: var(--color-brand-700);
}

.about-focus-tile:hover .about-focus-tile__icon {
    color: var(--color-brand-700);
}

.about-focus-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--color-brand-500);
    transition: color var(--duration-fast) var(--ease-standard);
}

@media (max-width: 1023px) {
    .about-focus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .about-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-focus-tile {
        padding: var(--space-4) var(--space-3);
        font-size: var(--text-sm);
    }
}

/* --- "What Like-New Means": the About page's signature section (after the
   hero) — largest heading outside the hero, most generous padding, a
   connected 4-stage process with a real progress rail rather than four
   unrelated text blocks. Gradient background (blue-tint fading to white)
   both gives the section a distinctive identity and transitions smoothly
   into the white "Clear Information" section that follows it. --- */
.about-process {
    position: relative;
    padding-block: var(--space-20) var(--space-16);
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-blue-tint) 0%, var(--color-white) 100%);
}

.about-process::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        118deg,
        transparent 0,
        transparent 120px,
        rgba(7, 71, 124, 0.035) 120px,
        rgba(7, 71, 124, 0.035) 121px
    );
    pointer-events: none;
}

.about-process .container {
    position: relative;
}

.about-process__intro-wrap {
    max-width: 720px;
    margin-inline: auto;
}

.about-process__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-500);
}

.about-process__eyebrow::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-accent-600);
}

.about-process__title {
    font-size: clamp(1.875rem, 3.6vw, 2.75rem);
    text-align: center;
}

.about-process__intro {
    max-width: 62ch;
    margin: var(--space-3) auto 0;
    text-align: center;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

.about-process__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-14);
}

.about-process__steps::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-brand-100) 100%);
}

.about-process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.about-process__step-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    border: 2px solid var(--color-brand-500);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-700);
}

.about-process__step:last-child .about-process__step-number {
    border-color: var(--color-accent-600);
    color: var(--color-accent-700);
}

.about-process__step-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.about-process__step-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .about-process {
        padding-block: var(--space-14) var(--space-12);
    }

    .about-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10) var(--space-6);
        margin-top: var(--space-10);
    }

    .about-process__steps::before {
        display: none;
    }
}

/* Single column becomes a real vertical timeline (mobile-first
   optimization pass) — a connecting rail down the left edge through each
   numbered marker, not just four stacked blocks with no visual link
   between them. */
@media (max-width: 480px) {
    .about-process__steps {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        position: relative;
    }

    .about-process__steps::before {
        display: block;
        top: 0;
        bottom: 22px;
        left: 21px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--color-brand-500) 0%, var(--color-accent-600) 100%);
    }

    .about-process__step {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .about-process__step-number {
        flex: none;
    }
}

/* --- Clear Information Before You Enquire: spec-card visual left, points
   right — connects About back to the actual catalogue experience. The
   spec card reuses the real .badge--success/.badge--accent classes from
   the product card system, so this genuinely resembles the catalogue's
   own information architecture rather than a fabricated dashboard. --- */
.about-clarity {
    padding-block: var(--space-12);
}

.about-clarity__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
}

.about-clarity__spec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(ellipse at 20% 0%, var(--color-brand-050) 0%, transparent 60%),
        var(--surface-subtle);
    box-shadow: var(--shadow-sm);
}

.about-clarity__spec-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-6);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background-color: var(--color-accent-600);
}

.about-clarity__spec-card-badges {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.about-clarity__spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--border-soft);
}

.about-clarity__spec-row:last-child {
    border-bottom: none;
}

.about-clarity__spec-row em {
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.about-clarity__spec-row b {
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand-700);
}

.about-clarity__title {
    font-size: var(--text-h2);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin-bottom: var(--space-5);
    max-width: 16ch;
}

.about-clarity__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.about-clarity__points li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.about-clarity__points svg {
    flex: none;
    color: var(--color-brand-500);
}

@media (max-width: 767px) {
    .about-clarity__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* --- Why Excell AI IT: an open editorial value grid — large faint number,
   title, copy and a single hairline divider (no icon/border/shadow/card
   stacking). The semantic <ol> stays a real ordered list; only its visual
   presentation changes here. Simplicity over card chrome, deliberately. --- */
.about-principles-section {
    padding-block: var(--space-12);
}

.about-principles__title {
    text-align: center;
}

.about-principles__intro {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-10);
}

.about-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-soft);
    border-left: 1px solid var(--border-soft);
}

.about-principles__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-8);
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.about-principles__number {
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-brand-100);
    margin-bottom: var(--space-1);
}

.about-principles__heading {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.about-principles__item p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    max-width: 42ch;
}

@media (max-width: 639px) {
    .about-principles {
        grid-template-columns: 1fr;
    }

    .about-principles__item {
        padding: var(--space-6);
    }
}

/* --- Vision / Mission: one joined split card, not plain text columns.
   Wider (up to ~1040px) and with generous internal padding so it reads as
   an intentional, integrated visual block rather than a small card
   floating in a large empty field. Compact outer section (support tier)
   so the emphasis stays on the panel itself, not the whitespace around
   it. --- */
.about-vm-section {
    padding-block: var(--space-10);
}

.about-vision-mission {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    max-width: 1040px;
    margin-inline: auto;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.about-vision-mission__item {
    padding: var(--space-12) var(--space-10);
}

.about-vision-mission__item--vision {
    background-color: var(--surface-blue-tint);
}

.about-vision-mission__item--vision .about-vision-mission__title {
    color: var(--color-brand-700);
}

.about-vision-mission__item--vision p {
    color: var(--color-text-secondary);
}

.about-vision-mission__item--mission {
    background: linear-gradient(120deg, var(--color-brand-700) 0%, var(--color-brand-500) 100%);
}

.about-vision-mission__item--mission .about-vision-mission__title {
    color: var(--color-white);
}

.about-vision-mission__item--mission p {
    color: rgba(255, 255, 255, 0.85);
}

.about-vision-mission__divider {
    position: relative;
    width: 1px;
    background-color: var(--border-soft);
}

.about-vision-mission__divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent-600);
    transform: translate(-50%, -50%);
}

.about-vision-mission__title {
    font-size: var(--text-h3);
    margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
    .about-vision-mission {
        grid-template-columns: 1fr;
    }

    .about-vision-mission__divider {
        width: 100%;
        height: 1px;
    }
}

@media (max-width: 639px) {
    .about-vision-mission__item {
        padding: var(--space-6) var(--space-5);
    }
}

/* Final CTA: reuses Home's .final-cta* classes verbatim (section 23, "Home
   Final CTA Banner") so About's closing moment shares Home's exact brand
   system rather than approximating it with parallel CSS. Two scoped
   overrides for About specifically: the panel gets more internal padding
   and a larger headline — this is the page's final, strongest brand
   moment, immediately before the footer, so it should read as bigger than
   Home's version — and the outer spacing is asymmetric (generous above,
   minimal below) so the banner visually leads straight into the footer
   instead of floating above it with a large white gap. */
.about-cta {
    padding-block: var(--space-12) var(--space-4);
}

.about-cta .final-cta__panel {
    padding: var(--space-10);
}

.about-cta .final-cta__title {
    font-size: 1.875rem;
}

.about-cta .final-cta__text {
    font-size: var(--text-lg);
}

/* ============================================================
   26. Contact Page
   ============================================================ */

/* Mobile-only quick contact block — hidden at desktop/tablet widths,
   where the contact-methods column already leads with the same actions
   (see .contact-quick usage in contact.php for the full rationale). */
.contact-quick {
    display: none;
}

@media (max-width: 639px) {
    .contact-quick {
        display: block;
        padding-block: var(--space-8) var(--space-6);
        background-color: var(--surface-blue-tint);
        border-bottom: 1px solid var(--border-soft);
    }

    .contact-quick__title {
        margin-bottom: var(--space-4);
        font-size: 1.125rem;
        font-weight: var(--font-weight-semibold);
        color: var(--text-primary);
    }

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

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
}

.contact-col__title {
    font-size: var(--text-h3);
    color: var(--color-brand-700);
    margin-bottom: var(--space-5);
}

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

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

.contact-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background-color: var(--color-brand-100);
    color: var(--color-brand-700);
}

.contact-method__icon svg {
    width: 20px;
    height: 20px;
}

.contact-method__label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.contact-method__value {
    font-size: var(--text-md);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.contact-method__value a {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.contact-method__value a:hover {
    color: var(--color-link-hover);
}

.contact-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.contact-notice svg {
    flex: none;
    margin-top: 0.125rem;
}

.contact-notice--success {
    background-color: var(--color-success-050);
    border: 1px solid var(--color-success-100);
    color: var(--color-success-700);
}

.contact-notice--error {
    background-color: var(--color-danger-050);
    border: 1px solid var(--color-danger-100);
    color: var(--color-danger-700);
}

@media (max-width: 1023px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
}

/* ============================================================
   27. Responsive (global)
   ============================================================ */

@media (max-width: 639px) {
    .stack--collapse-sm,
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   28. Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .product-modal__gallery-thumbs {
        scroll-behavior: auto;
    }
}