/* =====================================================================
   BakeryEasy storefront
   Single stylesheet, no build step — edited directly, served with a
   far-future cache header and a ?v=<mtime> query from Url::asset().
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */

:root {
    /* Kluaynamthai Kitchen Brand CI Palette (derived from official logo):
       - Primary Flame Orange (#e95325): Logo Block 3, represents ovens, baking, cooking heat & energy.
       - Royal / Gas Flame Blue (#0062d0): Logo Block 2 & 'i' gas flame dots, represents gas flame & refrigeration.
       - Stainless Steel Gray (#7d7d7d): Logo Double-K & Blocks 1 & 4, represents commercial kitchen stainless steel.
       - Deep Industrial Slate (#1e293b / #0f172a): Represents structural engineering authority.
    */
    --ink:            #101418;
    --ink-soft:       #334155;
    --ink-muted:      #64748b;
    --ink-faint:      #94a3b8;

    --navy:           #1e293b;
    --navy-700:       #0f172a;
    --navy-600:       #334155;

    --amber:          #e95325;
    --amber-600:      #cc3f14;
    --amber-500:      #e95325;
    --amber-50:       #fff3ee;

    --knt-orange:     #e95325;
    --knt-orange-dark:#cc3f14;
    --knt-orange-soft:#fff3ee;
    --knt-blue:       #0062d0;
    --knt-blue-dark:  #0050aa;
    --knt-blue-soft:  #edf4fc;
    --knt-steel:      #7d7d7d;
    --knt-steel-light:#f1f5f9;
    --knt-charcoal:   #101418;
    --knt-ci-stripe:  linear-gradient(90deg, #7d7d7d 0 25%, #0062d0 25% 50%, #e95325 50% 75%, #7d7d7d 75% 100%);

    --surface:        #ffffff;
    --surface-muted:  #f8fafc;
    --surface-sunken: #f1f5f9;
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;

    --green:          #16a34a;
    --green-50:       #f0fdf4;
    --red:            #dc2626;
    --red-50:         #fef2f2;
    --blue:           #0062d0;
    --blue-50:        #edf4fc;
    --amber-warn:     #c2410c;

    /* Type. One family covers Thai and Latin so a mixed
       "เตาอบไฟฟ้า GL-2A" string keeps one baseline and weight. */
    --font: 'IBM Plex Sans Thai', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
            'Segoe UI', 'Noto Sans Thai', 'Sarabun', Tahoma, sans-serif;

    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-0:  clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
    --step-1:  clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
    --step-2:  clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
    --step-3:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
    --step-4:  clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);

    /* Thai script sits taller than Latin and needs more leading to stay
       legible, especially with stacked vowels and tone marks. */
    --leading-body: 1.7;
    --leading-tight: 1.35;

    --radius:    10px;
    --radius-sm: 6px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(16, 20, 24, .06), 0 1px 3px rgba(16, 20, 24, .04);
    --shadow:    0 2px 6px rgba(16, 20, 24, .07), 0 8px 24px rgba(16, 20, 24, .06);
    --shadow-lg: 0 8px 20px rgba(16, 20, 24, .1), 0 24px 56px rgba(16, 20, 24, .12);

    --wrap:   1280px;
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

    --header-h: 72px;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sticky header must not cover an anchored heading. */
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: var(--leading-tight);
    font-weight: 600;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

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

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

button { font: inherit; color: inherit; cursor: pointer; }

input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

s { color: var(--ink-faint); }

/* Inline SVG icons are drawn as strokes throughout. */
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
    outline: 2px solid var(--amber-500);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */

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

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

.skip-link {
    position: absolute;
    top: -3rem; left: 1rem;
    z-index: 200;
    padding: .625rem 1rem;
    background: var(--navy);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top .15s;
}
.skip-link:focus { top: 0; text-decoration: none; }

.section { padding-block: clamp(2.5rem, 4vw, 4rem); }
.section--tint { background: var(--surface-muted); }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.section-heading {
    margin: 0;
    font-size: var(--step-2);
    font-weight: 600;
}

.section__link {
    font-size: var(--step--1);
    font-weight: 500;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
    --btn-bg: var(--navy);
    --btn-fg: #fff;
    --btn-bd: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6875rem 1.25rem;
    min-height: 44px;                 /* comfortable tap target */
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius-sm);
    transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn--primary { --btn-bg: var(--amber); --btn-fg: #fff; }
.btn--ghost   { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--border-strong); }
.btn--ghost:hover { --btn-bg: var(--surface-muted); filter: none; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--border-strong); }
.btn--outline:hover { --btn-bg: var(--surface-muted); filter: none; }
.btn--subtle  { --btn-bg: var(--surface-muted); --btn-fg: var(--ink-soft); --btn-bd: var(--border); }
.btn--danger  { --btn-bg: var(--red); --btn-fg: #fff; }

.btn--sm { padding: .5rem .875rem; min-height: 38px; font-size: var(--step--1); }
.btn--lg { padding: .875rem 1.75rem; min-height: 52px; font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn__meta {
    font-size: var(--step--1);
    font-weight: 400;
    opacity: .8;
    padding-left: .5rem;
    border-left: 1px solid rgba(255,255,255,.3);
}
.btn--outline .btn__meta { border-left-color: var(--border-strong); }

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    min-width: 44px; min-height: 44px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: inherit;
}
.icon-btn:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.icon-btn svg { width: 22px; height: 22px; flex: none; }
.icon-btn__label { display: none; font-size: var(--step--1); font-weight: 500; }

.icon-btn--badge { position: relative; }

.badge {
    position: absolute;
    top: 2px; right: 0;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600; line-height: 1;
    background: var(--amber-500);
    color: #fff;
    border-radius: 999px;
}
.badge.is-empty { display: none; }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: var(--header-stick, 0px);
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.utility-bar {
    background: #0f172a;
    font-size: var(--step--1);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 36px;
}
.utility-bar__claim {
    margin: 0;
    color: rgba(255,255,255,.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.utility-bar__links { display: flex; align-items: center; gap: 1rem; flex: none; }

.utility-link { color: rgba(255,255,255,.82); }
.utility-link:hover { color: #fff; }

.lang-switch { display: flex; gap: 2px; padding-left: .75rem; border-left: 1px solid rgba(255,255,255,.15); }
.lang-switch__item {
    padding: .125rem .5rem;
    color: rgba(255,255,255,.6);
    font-weight: 500;
    border-radius: var(--radius-sm);
}
.lang-switch__item:hover { color: #fff; text-decoration: none; }
.lang-switch__item.is-current { color: #0f172a; background: #fff; }

.header-main {
    background: #ffffff;
    color: var(--ink);
    border-bottom: 1px solid #e2e8f0;
}

.header-main__inner {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.5rem);
    min-height: var(--header-h);
}

.header-main__burger {
    display: inline-flex;
    color: var(--ink);
}
.header-main__burger:hover {
    background: #f1f5f9;
}

.brand { display: flex; align-items: center; gap: .625rem; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand__mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--amber); border-radius: var(--radius-sm); color: #fff; }
.brand__mark svg { width: 24px; height: 24px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.brand__tagline {
    font-size: 11px;
    color: var(--ink-muted);
    max-width: 22ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand__logo {
    height: 48px;
    width: auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
    object-fit: contain;
    display: block;
}

/* Search ------------------------------------------------------------- */

.search { position: relative; flex: 1 1 auto; max-width: 620px; }

.search__input {
    width: 100%;
    padding: .6875rem 3rem .6875rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: var(--radius-sm);
    color: var(--ink);
    min-height: 44px;
    transition: all .15s ease;
}
.search__input::placeholder { color: #94a3b8; }
.search__input:focus {
    background: #fff;
    color: var(--ink);
    border-color: var(--blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 98, 208, .12);
}
.search__input:focus::placeholder { color: var(--ink-faint); }

.search__submit {
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 38px; height: 38px;
    background: none; border: 0;
    color: #64748b;
    border-radius: var(--radius-sm);
}
.search__input:focus ~ .search__submit { color: var(--blue); }
.search__submit svg { width: 20px; height: 20px; }

.search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 120;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.suggest__group { padding: .5rem; }
.suggest__group + .suggest__group { border-top: 1px solid var(--border); }
.suggest__label {
    padding: .25rem .5rem;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-faint);
}
.suggest__item {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
}
.suggest__item:hover, .suggest__item.is-active { background: var(--surface-muted); text-decoration: none; }
.suggest__item img { width: 44px; height: 44px; object-fit: contain; flex: none; background: var(--surface-muted); border-radius: var(--radius-sm); }
.suggest__body { min-width: 0; flex: 1; }
.suggest__name { display: block; font-size: var(--step--1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__meta { font-size: 12px; color: var(--ink-muted); }
.suggest__price { font-size: var(--step--1); font-weight: 600; flex: none; }
.suggest__empty { padding: 1rem; text-align: center; color: var(--ink-muted); font-size: var(--step--1); }

/* Header actions ----------------------------------------------------- */

.header-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; flex: none; }

.header-phone { display: none; align-items: center; gap: .5rem; padding: .375rem .75rem; color: var(--ink); border-radius: var(--radius-sm); }
.header-phone:hover { text-decoration: none; background: #f8fafc; }
.header-phone svg { width: 22px; height: 22px; color: var(--amber); flex: none; }
.header-phone__text { display: flex; flex-direction: column; line-height: 1.25; }
.header-phone__text small { font-size: 11px; color: var(--ink-muted); }
.header-phone__text strong { font-size: var(--step-0); font-weight: 600; color: var(--ink); }

.header-actions .icon-btn {
    color: #334155;
}
.header-actions .icon-btn:hover {
    background: #f1f5f9;
    color: var(--blue);
}

/* =====================================================================
   Corporate Identity (CI) Navbar & Modern Subnavs
   Matches official Kluaynamthai Kitchen Logo:
   - Base: Executive Deep Slate (#1e293b)
   - Signature Stripe: [Steel Gray #7d7d7d] [Royal Blue #0062d0] [Flame Orange #e95325] [Steel Gray #7d7d7d]
   - Accent & Active: Flame Orange (#e95325)
   ===================================================================== */

.site-nav {
    background: #1e293b;
    border-bottom: 1px solid #0f172a;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
    position: relative;
    z-index: 105;
}

/* 4-Color Signature CI Accent Stripe derived from Logo Blocks */
.site-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #7d7d7d 0% 25%, #0062d0 25% 50%, #e95325 50% 75%, #7d7d7d 75% 100%);
    z-index: 2;
}

.site-nav__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.site-nav__list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
}

.site-nav__item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.16s ease;
    border-bottom: 3px solid transparent;
}

.site-nav__link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

/* Active State (matches Flame Orange CI block) */
.site-nav__link.is-active {
    color: #ffffff !important;
    font-weight: 700;
    border-bottom: 3px solid var(--amber);
    background: rgba(233, 83, 37, 0.22);
}

.site-nav__arrow {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    opacity: 0.7;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex: none;
}

.site-nav__item:hover .site-nav__arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* ---------------------------------------------------------------------
   Subnav Dropdown Panels
   --------------------------------------------------------------------- */

.site-subnav {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 300;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--amber);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 30px -4px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    padding: 0.65rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Reveal on hover & focus-within */
.site-nav__item:hover > .site-subnav,
.site-nav__item:focus-within > .site-subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.site-subnav--sm {
    min-width: 290px;
}

.site-subnav--md {
    min-width: 370px;
}

.site-subnav--xs {
    min-width: 190px;
}

.site-subnav--right {
    left: auto;
    right: 0;
}

.site-subnav--mega {
    min-width: min(1060px, 94vw);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 1.25rem 1.25rem 0.85rem;
}

.site-nav__item:hover > .site-subnav--mega,
.site-nav__item:focus-within > .site-subnav--mega {
    transform: translateX(-50%) translateY(0);
}

.site-subnav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-subnav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    color: #1e293b;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.site-subnav__link:hover {
    background: #f8fafc;
    color: #ea580c;
    text-decoration: none;
}

.site-subnav__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 1.15rem;
    flex: none;
    transition: transform 0.15s, background 0.15s;
}

.site-subnav__link:hover .site-subnav__icon {
    transform: scale(1.08);
    background: #fff3ee;
}

.site-subnav__flag {
    font-size: 1.4rem;
    line-height: 1;
    flex: none;
}

.site-subnav__text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.site-subnav__text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.site-subnav__link:hover .site-subnav__text strong {
    color: var(--amber);
}

.site-subnav__text small {
    display: block;
    font-size: 11.5px;
    color: #64748b;
    margin-top: 1px;
}

.site-subnav__check {
    color: #16a34a;
    font-weight: 700;
    font-size: 12px;
    margin-left: auto;
}

.site-subnav__link.is-active-lang {
    background: #f0fdf4;
}

/* ---------------------------------------------------------------------
   Mega Menu Columns & Highlights
   --------------------------------------------------------------------- */

.mega-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.mega-col__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.65rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #fdba74;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mega-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mega-col__list li a {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    font-size: 13px;
    color: #334155;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s;
}

.mega-col__list li a:hover {
    background: #edf4fc;
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;
    transform: translateX(3px);
}

.mega-bottom-bar {
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 13px;
}

.mega-bottom-bar__left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.mega-bottom-bar__link {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s;
}

.mega-bottom-bar__link:hover {
    color: #ea580c;
    text-decoration: none;
}

.mega-bottom-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    background: #ea580c;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}

.mega-bottom-bar__cta:hover {
    background: #c2410c;
    transform: translateY(-1px);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------------- */

.flash-stack { display: grid; gap: .5rem; padding-top: 1rem; }

.flash {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
}
.flash__icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.flash__text { margin: 0; flex: 1; }
.flash__list { margin: .375rem 0 0; padding-left: 1.125rem; list-style: disc; }
.flash__close { background: none; border: 0; font-size: 1.25rem; line-height: 1; color: inherit; opacity: .6; padding: 0 .25rem; }
.flash__close:hover { opacity: 1; }

.flash--success { background: var(--green-50); border-color: #b5e0cb; color: #0c5c39; }
.flash--error   { background: var(--red-50);   border-color: #f1c2bf; color: #8e1b16; }
.flash--warning { background: var(--amber-50); border-color: #f2d8b0; color: var(--amber-warn); }
.flash--info    { background: var(--blue-50);  border-color: #c2d8f6; color: #14488a; }

/* ---------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------- */

.breadcrumbs { background: var(--surface-muted); border-bottom: 1px solid var(--border); font-size: var(--step--1); }

.breadcrumbs__list {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .25rem;
    padding-block: .625rem;
}
.breadcrumbs__item { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.breadcrumbs__link { color: var(--ink-muted); }
.breadcrumbs__link:hover { color: var(--amber); }
.breadcrumbs__sep { width: 14px; height: 14px; color: var(--ink-faint); flex: none; }
.breadcrumbs__current { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */

.hero {
    background:
        radial-gradient(120% 140% at 85% 0%, rgba(217,119,6,.10), transparent 60%),
        var(--surface-muted);
    border-bottom: 1px solid var(--border);
}

.hero__inner {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding-block: clamp(2rem, 5vw, 4rem);
}

.hero__eyebrow {
    margin: 0 0 .5rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--amber);
    letter-spacing: .02em;
}

.hero__title { margin: 0 0 .75rem; font-size: var(--step-4); font-weight: 700; max-width: 22ch; }
.hero__lead { max-width: 56ch; color: var(--ink-soft); font-size: var(--step-1); }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.hero__trust {
    display: grid; gap: .625rem;
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border-strong);
    font-size: var(--step--1);
    color: var(--ink-soft);
}
.hero__trust li { display: flex; align-items: flex-start; gap: .625rem; }
.hero__trust svg { width: 20px; height: 20px; color: var(--amber); flex: none; margin-top: 2px; }

.hero__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------------------
   Category tiles
   --------------------------------------------------------------------- */

.cat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.cat-tile {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cat-tile:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    text-decoration: none;
}
.cat-tile__media { display: block; background: var(--surface-muted); aspect-ratio: 4 / 3; }
.cat-tile__media img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.cat-tile__body { display: flex; flex-direction: column; gap: .125rem; padding: .75rem; }
.cat-tile__name { font-size: var(--step--1); font-weight: 500; line-height: 1.4; }
.cat-tile__count { color: var(--ink-faint); font-size: 12px; }

/* ---------------------------------------------------------------------
   Product grid & card
   --------------------------------------------------------------------- */

.product-grid { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Rails scroll horizontally on small screens instead of wrapping to a
   very tall column. */
@media (max-width: 640px) {
    .product-grid--rail {
        grid-auto-flow: column;
        grid-auto-columns: 74%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }
    .product-grid--rail > li { scroll-snap-align: start; }
}

.card {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.card__media { position: relative; background: var(--surface-muted); }
.card__image-link { display: block; aspect-ratio: 1; }
.card__image { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }

.card__flags { position: absolute; top: .5rem; left: .5rem; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }

.flag {
    padding: .1875rem .4375rem;
    font-size: 11px; font-weight: 600; line-height: 1.3;
    border-radius: 4px;
    color: #fff;
}
.flag--sale { background: var(--red); }
.flag--new  { background: var(--green); }
.flag--best { background: var(--amber); }
.flag--oos  { background: var(--ink-muted); }

.card__body { display: flex; flex-direction: column; gap: .375rem; padding: .875rem; flex: 1; }

.card__brand { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }

.card__title { margin: 0; font-size: var(--step--1); font-weight: 500; line-height: 1.45; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--amber); }

.card__sku { margin: 0; font-size: 12px; color: var(--ink-faint); }

.card__rating { display: flex; align-items: center; gap: .375rem; margin: 0; }
.card__rating small { color: var(--ink-faint); font-size: 11px; }

/* Star bar driven by a --rating custom property (0–5). */
.stars {
    --pct: calc(var(--rating, 0) / 5 * 100%);
    display: inline-block;
    width: 74px; height: 14px;
    background:
        linear-gradient(90deg, var(--amber-500) var(--pct), var(--border-strong) var(--pct));
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 14.8px);
            mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 14.8px);
}

.card__price { margin-top: auto; padding-top: .25rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

.price { font-size: var(--step-1); font-weight: 700; color: var(--ink); }
.price--was { font-size: var(--step--1); font-weight: 400; }
/* Quote-only price reads as a label, not a number, so it is never mistaken
   for a free or zero-cost item. */
.price--request { font-size: var(--step-0); font-weight: 600; color: var(--amber); }

.card__actions { display: flex; gap: .375rem; padding-top: .5rem; }
.card__form { flex: 1; display: contents; }
.card__actions .btn { flex: 1; }

/* ---------------------------------------------------------------------
   Quote CTA
   --------------------------------------------------------------------- */

.quote-cta { display: grid; gap: 2rem; align-items: start; }
.quote-cta__body p { color: var(--ink-soft); max-width: 62ch; }
.quote-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.quote-steps { display: grid; gap: .75rem; counter-reset: step; }
.quote-steps li {
    display: flex; align-items: center; gap: .75rem;
    padding: .875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
}
.quote-steps__n {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: none;
    background: var(--navy); color: #fff;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
}

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */

.faq { padding-block: clamp(2rem, 4vw, 3.5rem); }
.faq__list { display: grid; gap: .5rem; max-width: 76ch; }

.faq__item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.faq__item[open] { border-color: var(--border-strong); }

.faq__question {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .875rem 1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__chevron { width: 18px; height: 18px; flex: none; color: var(--ink-muted); transition: transform .15s; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__answer { padding: 0 1rem 1rem; color: var(--ink-soft); font-size: var(--step--1); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.site-footer { margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--navy); color: rgba(255,255,255,.78); font-size: var(--step--1); }

.footer-grid { display: grid; gap: 2rem; padding-block: clamp(2rem, 4vw, 3rem); }

.footer-heading { margin: 0 0 1rem; font-size: var(--step-0); font-weight: 600; color: #fff; }

.footer-address { font-style: normal; display: grid; gap: .1875rem; margin-bottom: 1.25rem; line-height: 1.6; }
.footer-address strong { color: #fff; }

.footer-contact { display: grid; gap: .625rem; }
.footer-contact li { display: grid; gap: .0625rem; }
.footer-contact__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.footer-contact a { color: #fff; }
.footer-contact small { color: rgba(255,255,255,.55); }

.footer-social { margin-top: 1.25rem; }
.footer-social__links { display: flex; gap: 1rem; margin-top: .375rem; }
.footer-social__links a { color: #fff; }

.footer-links { display: grid; gap: .5rem; }
.footer-links a { color: rgba(255,255,255,.78); }
.footer-links a:hover { color: #fff; }
.footer-links--inline { display: flex; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); }

.footer-note { color: rgba(255,255,255,.62); margin-bottom: 1rem; }

.newsletter { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter__input {
    flex: 1 1 180px;
    padding: .625rem .875rem;
    min-height: 44px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-sm);
    color: #fff;
}
.newsletter__input::placeholder { color: rgba(255,255,255,.5); }
.newsletter__input:focus { background: #fff; color: var(--ink); outline: none; border-color: var(--amber-500); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom__inner { padding-block: 1rem; }
.footer-copy { margin: 0; color: rgba(255,255,255,.55); display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------------------------------------------------------------------
   Floating contact menu (every page) and back-to-top
   --------------------------------------------------------------------- */

.floating {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    pointer-events: none;
}
.floating > * { pointer-events: auto; }
.has-drawer .floating { display: none; }

.floating__top {
    width: 44px;
    height: 44px;
    margin-right: 6px;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--navy);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, opacity .2s ease;
}
.floating__top[hidden] { display: none; }
.floating__top:hover { color: var(--amber); transform: translateY(-2px); }
.floating__top svg { width: 22px; height: 22px; stroke-width: 2.2; }
/* Out of the way while the contact panel is open. */
.floating:has(.fab[open]) .floating__top { opacity: 0; pointer-events: none; }

.fab { position: relative; }
.fab__toggle {
    position: relative;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 56px;
    height: 56px;
    padding: 0 1.25rem 0 1.05rem;
    background: var(--amber);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(233, 83, 37, .38);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.fab__toggle::-webkit-details-marker { display: none; }
.fab__toggle::marker { content: ""; }
.fab__toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(233, 83, 37, .45); }
.fab__toggle:focus-visible { outline: 3px solid rgba(233, 83, 37, .45); outline-offset: 3px; }
/* A soft pulse so first-time visitors notice it; stops once opened. */
.fab:not([open]) .fab__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: fab-pulse 2.6s ease-out infinite;
}
@keyframes fab-pulse {
    0%        { box-shadow: 0 0 0 0 rgba(233, 83, 37, .5); }
    70%, 100% { box-shadow: 0 0 0 16px rgba(233, 83, 37, 0); }
}
.fab__icon { width: 24px; height: 24px; flex: none; stroke-width: 2; }
.fab__icon--close { display: none; }
.fab[open] .fab__icon--open { display: none; }
.fab[open] .fab__icon--close { display: block; }
.fab[open] .fab__toggle { background: var(--navy); box-shadow: 0 8px 24px rgba(15, 23, 42, .35); }

.fab__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + .75rem);
    width: min(320px, calc(100vw - 2rem));
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    padding: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
    transform-origin: bottom right;
    animation: fab-in .18s ease-out;
}
@keyframes fab-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
}
.fab__head {
    display: grid;
    gap: .125rem;
    margin: 0 0 .5rem;
    padding: .25rem .5rem .625rem;
    border-bottom: 1px solid var(--border);
}
.fab__head strong { font-size: 1rem; color: var(--ink); }
.fab__head small { font-size: .8125rem; color: var(--ink-muted); }
.fab__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.fab__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    color: var(--ink);
    border-radius: 12px;
    text-decoration: none !important;
    transition: background-color .15s ease;
}
.fab__item:hover, .fab__item:focus-visible { background: var(--surface-muted); }
.fab__item-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    border-radius: 50%;
}
.fab__item-icon svg { width: 21px; height: 21px; stroke-width: 2; }
.fab__item--line .fab__item-icon { background: #06c755; }
.fab__item--line .fab__item-icon svg { fill: currentColor; stroke: none; }
.fab__item--messenger .fab__item-icon { background: linear-gradient(45deg, #0a7cff, #a033ff 60%, #ff5c87); }
.fab__item--phone .fab__item-icon { background: var(--amber); }
.fab__item--mobile .fab__item-icon { background: #f59e0b; }
.fab__item--enquiry .fab__item-icon { background: var(--blue); }
.fab__item--map .fab__item-icon { background: #ea4335; }
.fab__item-text { display: grid; min-width: 0; line-height: 1.3; }
.fab__item-text strong { font-size: .9375rem; font-weight: 600; }
.fab__item-text small {
    font-size: .8125rem;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phones: a round button without the label. */
@media (max-width: 767px) {
    .floating { right: max(.875rem, env(safe-area-inset-right)); bottom: max(.875rem, env(safe-area-inset-bottom)); }
    .fab__label { display: none; }
    .fab__toggle { width: 56px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fab:not([open]) .fab__toggle::after { animation: none; }
    .fab__panel { animation: none; }
}

/* ---------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------- */

.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: .5rem; flex-wrap: wrap;
    margin-top: 2.5rem;
}
.pagination__list { display: flex; align-items: center; gap: .25rem; }
.pagination__page, .pagination__step {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    min-width: 40px; min-height: 40px;
    padding: 0 .625rem;
    color: var(--ink-soft);
    font-size: var(--step--1); font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.pagination__page:hover, .pagination__step:hover { border-color: var(--border-strong); background: var(--surface-muted); text-decoration: none; }
.pagination__page.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination__step svg { width: 16px; height: 16px; }
.pagination__gap { padding: 0 .25rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (min-width: 640px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .quote-cta { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
}

@media (min-width: 900px) {
    .hero__inner { grid-template-columns: 1.15fr 1fr; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
    .icon-btn__label { display: inline; }
    .header-phone { display: inline-flex; }
}

@media (min-width: 1024px) {
    .header-main__burger { display: none; }
}

@media (max-width: 1023px) {
    .utility-bar__claim { display: none; }
    .site-nav { display: none; }
    .site-nav.is-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
        background: #1e293b;
        border-top: 3px solid var(--amber);
    }
    .site-nav.is-open .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0;
    }
    .site-nav.is-open .site-nav__item {
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .site-nav.is-open .site-nav__link {
        justify-content: space-between;
        padding: 0.75rem 1.25rem;
        border-bottom: 0;
        font-size: 15px;
        color: #ffffff;
    }
    .site-nav.is-open .site-subnav {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        background: #0f172a;
        padding: 0.5rem 1rem 0.75rem;
        pointer-events: auto;
    }
    .site-nav.is-open .site-subnav__link {
        color: #e2e8f0;
    }
    .site-nav.is-open .site-subnav__link:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--amber);
    }
    .site-nav.is-open .site-subnav__text strong {
        color: #f8fafc;
    }
    .site-nav.is-open .site-subnav__text small {
        color: #94a3b8;
    }
    .site-nav.is-open .site-subnav--mega {
        min-width: 0;
        padding: 0.5rem 1rem 0.75rem;
    }
    .site-nav.is-open .mega-cols {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .site-nav.is-open .mega-col__title {
        color: #f8fafc;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    .site-nav.is-open .mega-col__list li a {
        color: #cbd5e1;
    }
    .site-nav.is-open .mega-col__list li a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }
    .site-nav.is-open .mega-bottom-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .site-nav.is-open .mega-bottom-bar__link {
        color: #cbd5e1;
    }
}

@media print {
    .site-header, .site-footer, .floating, .pagination, .card__actions { display: none !important; }
    body { color: #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* ---------------------------------------------------------------------
   Toasts (async cart / quote feedback)
   --------------------------------------------------------------------- */

.toast-host {
    position: fixed;
    bottom: calc(88px + env(safe-area-inset-bottom));
    right: 1rem;
    z-index: 150;
    display: grid;
    gap: .5rem;
    max-width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

@media (min-width: 1024px) {
    .toast-host { bottom: 96px; right: 1.5rem; }
}

.toast {
    padding: .75rem 1rem;
    background: var(--navy);
    color: #fff;
    font-size: var(--step--1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s;
}
.toast.is-in { opacity: 1; transform: none; }
.toast--error { background: var(--red); }

/* ---------------------------------------------------------------------
   Listing layout: sidebar filters + results
   --------------------------------------------------------------------- */

.listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.listing__head { margin-bottom: 1.5rem; }
.listing__title { margin: 0 0 .375rem; font-size: var(--step-3); }
.listing__intro { color: var(--ink-soft); max-width: 72ch; }
.listing__count { color: var(--ink-muted); font-size: var(--step--1); margin: 0; }

.listing__toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
    padding: .75rem 0 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.listing__sort { display: flex; align-items: center; gap: .5rem; font-size: var(--step--1); }
.listing__sort select, .field select {
    padding: .5rem 2rem .5rem .75rem;
    min-height: 40px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6875' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .5rem center / 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    appearance: none;
}

/* Subcategory chips — a fast way into a deeper level without the sidebar. */
.subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.subcat-chip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .4375rem .75rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: var(--step--1);
}
.subcat-chip:hover { background: var(--surface); border-color: var(--border-strong); color: var(--ink); text-decoration: none; }
.subcat-chip small { color: var(--ink-faint); font-size: 11px; }

/* Filter panel ------------------------------------------------------- */

.filters { display: grid; gap: 1.25rem; }

.filter-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.filter-group__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem;
    font-size: var(--step--1); font-weight: 600;
    cursor: pointer; list-style: none;
}
.filter-group__head::-webkit-details-marker { display: none; }
.filter-group__body { padding: 0 1rem 1rem; display: grid; gap: .5rem; max-height: 280px; overflow-y: auto; }

.check {
    display: flex; align-items: center; gap: .5rem;
    font-size: var(--step--1); color: var(--ink-soft);
    cursor: pointer;
}
.check input { width: 17px; height: 17px; accent-color: var(--amber); flex: none; }
.check__count { margin-left: auto; color: var(--ink-faint); font-size: 11px; }

.price-range { display: flex; align-items: center; gap: .5rem; }
.price-range input {
    width: 100%; min-width: 0;
    padding: .5rem .625rem; min-height: 40px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}

.filters__actions { display: flex; gap: .5rem; }

.filter-toggle { display: inline-flex; }

@media (min-width: 900px) {
    .listing { grid-template-columns: 264px minmax(0, 1fr); gap: 2.5rem; }
    .filter-toggle { display: none; }
    .filters-drawer { display: block !important; }
}

@media (max-width: 899px) {
    .filters-drawer {
        position: fixed;
        inset: 0;
        z-index: 140;
        display: none;
        background: var(--surface);
        overflow-y: auto;
        padding: 1rem;
    }
    .filters-drawer.is-open { display: block; }
    .filters-drawer__head {
        display: flex; align-items: center; justify-content: space-between;
        padding-bottom: 1rem; margin-bottom: 1rem;
        border-bottom: 1px solid var(--border);
    }
    body.has-drawer { overflow: hidden; }
}

.filters-drawer__head { display: none; }
@media (max-width: 899px) { .filters-drawer__head { display: flex; } }

/* Empty state -------------------------------------------------------- */

.empty-state { text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; }
.empty-state__icon { width: 56px; height: 56px; margin: 0 auto 1rem; color: var(--ink-faint); }
.empty-state h2 { font-size: var(--step-2); }
.empty-state p { color: var(--ink-muted); max-width: 48ch; margin-inline: auto; }
.empty-state__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------------------------------------------------------------------
   Product detail
   --------------------------------------------------------------------- */

.product {
    display: grid;
    /* minmax(0, …) so a wide spec table or long model name cannot stretch
       the single phone column past the screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.gallery-main {
    margin: 0;
    position: relative;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.gallery-main img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: clamp(.75rem, 2vw, 1.5rem); }
.gallery-main__flag { position: absolute; top: .75rem; left: .75rem; }

.gallery-thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; padding-bottom: .25rem; }
.gallery-thumb {
    display: block; flex: none;
    width: 72px; height: 72px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.gallery-thumb.is-active { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

.product__brand { margin: 0 0 .375rem; font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.product__title { margin: 0 0 1rem; font-size: var(--step-3); }

.product__meta { display: grid; gap: .5rem 1.5rem; margin: 0 0 1rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.product__meta > div { display: grid; gap: .0625rem; }
.product__meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.product__meta dd { margin: 0; font-size: var(--step--1); font-weight: 500; }
.product__meta .is-instock { color: var(--green); }
.product__meta .is-oos { color: var(--red); }

.product__rating { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: var(--step--1); }

.product__price-box {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.product__price { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; margin: 0; }
.product__price .price { font-size: var(--step-3); }
.product__price-note, .product__quote-note { margin: .375rem 0 0; font-size: var(--step--1); color: var(--ink-muted); }
.product__price-box .price--request { margin: 0; font-size: var(--step-2); }

.product__axes { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.axis { border: 0; padding: 0; margin: 0; }
.axis__legend { padding: 0; margin-bottom: .5rem; font-size: var(--step--1); font-weight: 600; }
.axis__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.axis__option { position: relative; }

/* The native radio is hidden but still focusable, so the visible chip picks
   up :checked and :focus-visible from its sibling input. */
.axis__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.axis__option span {
    display: inline-block;
    padding: .5rem .875rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.axis__option input:checked + span { border-color: var(--amber); background: var(--amber-50); color: var(--amber); font-weight: 600; }
.axis__option input:focus-visible + span { outline: 2px solid var(--amber-500); outline-offset: 2px; }

.product__actions { display: grid; gap: .625rem; }
.product__buy { display: flex; gap: .625rem; align-items: stretch; }
.product__buy .btn { flex: 1; }

.qty { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.qty__step { width: 40px; background: var(--surface-muted); border: 0; font-size: 1.125rem; color: var(--ink-soft); }
.qty__step:hover { background: var(--surface-sunken); }
.qty__input {
    width: 56px; text-align: center;
    border: 0; border-inline: 1px solid var(--border);
    -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product__shipping-note {
    display: flex; align-items: flex-start; gap: .625rem;
    margin: 1.25rem 0 0; padding: .875rem 1rem;
    background: var(--blue-50);
    border: 1px solid #c2d8f6;
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    color: #14488a;
}
.product__shipping-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.product__details { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); }

/* Long-form imported content ------------------------------------------- */

.prose { max-width: 76ch; color: var(--ink-soft); }
.prose h2, .prose h3, .prose h4 { color: var(--ink); margin-top: 1.75em; }
.prose h3 { font-size: var(--step-1); }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.375rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .375em; }
.prose img { border-radius: var(--radius-sm); margin-block: 1em; }
/* Imported tables are arbitrary width; scroll them rather than letting one
   break the page layout. */
.prose table { margin-block: 1.25em; font-size: var(--step--1); display: block; overflow-x: auto; }
.prose th, .prose td { padding: .5rem .75rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { background: var(--surface-muted); font-weight: 600; }
.prose blockquote { margin: 1.25em 0; padding-left: 1rem; border-left: 3px solid var(--amber); color: var(--ink-muted); }
.prose iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); }

.spec-table { font-size: var(--step--1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.spec-table th, .spec-table td { padding: .6875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 38%; background: var(--surface-muted); font-weight: 500; color: var(--ink-soft); }

/* Q&A and reviews ------------------------------------------------------ */

.qa__list, .review-list { display: grid; gap: 1rem; max-width: 76ch; }
.qa__item, .review { padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); }
.qa__q { margin: 0 0 .5rem; font-weight: 600; }
.qa__a { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.qa__date { margin: .5rem 0 0; font-size: 12px; color: var(--ink-faint); }

.review__head { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; margin-bottom: .5rem; }
.review__author { font-size: var(--step--1); }
.review__verified { padding: .0625rem .375rem; background: var(--green-50); color: var(--green); font-size: 11px; font-weight: 600; border-radius: 4px; }
.review__date { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.review__title { margin: 0 0 .25rem; font-weight: 600; font-size: var(--step--1); }
.review__body { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

.ask__hint { color: var(--ink-muted); font-size: var(--step--1); max-width: 62ch; }

.muted { color: var(--ink-muted); }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.form { display: grid; gap: 1rem; max-width: 640px; }
.form--inline { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form--wide { max-width: none; }

.field { display: grid; gap: .3125rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 500; }
.field label .req { color: var(--red); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field input[type="number"], .field input[type="search"],
.field input[type="date"], .field input[type="file"],
.field textarea, .field select {
    width: 100%;
    padding: .625rem .75rem;
    min-height: 44px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.field textarea { min-height: 90px; resize: vertical; line-height: var(--leading-body); }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .15);
}
.field__error { font-size: 12px; color: var(--red); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--red); }
.field__hint { font-size: 12px; color: var(--ink-muted); }

.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------------
   Search page
   --------------------------------------------------------------------- */

.search-page { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.search-page__form { display: flex; gap: .5rem; margin-bottom: 2rem; max-width: 640px; }
.search-page__input {
    flex: 1; min-width: 0;
    padding: .75rem 1rem; min-height: 48px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.search-page__input:focus { outline: none; border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(217, 119, 6, .15); }

.suggest-list { display: grid; gap: .25rem; max-width: 560px; margin-inline: auto; text-align: left; }
.suggest-list .suggest__item { border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ---------------------------------------------------------------------
   CMS page
   --------------------------------------------------------------------- */

.cms { padding-block: clamp(1.5rem, 3vw, 3rem); max-width: 80ch; }
.cms__title { font-size: var(--step-3); margin-bottom: .5rem; }
.cms__lead { font-size: var(--step-1); color: var(--ink-soft); margin-bottom: 2rem; }
.cms__foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: var(--step--1); }

/* ---------------------------------------------------------------------
   Error pages
   --------------------------------------------------------------------- */

.error-page { text-align: center; padding-block: clamp(2.5rem, 6vw, 5rem); max-width: 720px; margin-inline: auto; }
.error-page__code { margin: 0; font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700; line-height: 1; color: var(--amber); letter-spacing: -0.04em; }
.error-page__title { margin: .5rem 0; font-size: var(--step-2); }
.error-page__detail { color: var(--ink-muted); max-width: 52ch; margin-inline: auto; }
.error-page__search { justify-content: center; margin: 2rem auto; }
.error-page__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.error-page__contact { margin-top: 2rem; font-size: var(--step--1); color: var(--ink-muted); }
.error-page__suggestions, .error-page__categories { margin-top: 3rem; text-align: left; }
.error-page__suggestions .section-heading, .error-page__categories .section-heading { text-align: center; }
.error-page__categories .subcats { justify-content: center; }

/* ---------------------------------------------------------------------
   Product page: two columns from 900px
   --------------------------------------------------------------------- */

@media (min-width: 900px) {
    .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .product__details { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
    .product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------------------------------------------------------------------
   Cart and quote list
   --------------------------------------------------------------------- */

.cart-page__title, .quote-head { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.quote-head { margin-bottom: 1.5rem; }

.cart-layout, .quote-layout { display: grid; gap: 2rem; align-items: start; padding-bottom: clamp(2rem, 4vw, 3rem); }

.cart-list { display: grid; gap: .75rem; }

.cart-line {
    display: grid;
    grid-template-areas:
        "media body   remove"
        "media price  price"
        "media qty    total";
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: .5rem .875rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.cart-line.is-unavailable { background: var(--red-50); border-color: #f1c2bf; }

.cart-line__media  { grid-area: media; display: block; width: 88px; height: 88px; background: var(--surface-muted); border-radius: var(--radius-sm); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.cart-line__body   { grid-area: body; min-width: 0; }
.cart-line__title  { margin: 0 0 .25rem; font-size: var(--step-0); font-weight: 500; line-height: 1.45; }
.cart-line__title a { color: var(--ink); }
.cart-line__title a:hover { color: var(--amber); }
.cart-line__sku    { margin: 0; font-size: 12px; color: var(--ink-faint); }
.cart-line__options { margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: 12px; color: var(--ink-muted); }
.cart-line__warning { margin: .375rem 0 0; font-size: 12px; font-weight: 600; color: var(--red); }

.cart-line__note {
    width: 100%;
    margin-top: .5rem;
    padding: .4375rem .625rem;
    font-size: var(--step--1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.cart-line__note:focus { outline: none; background: var(--surface); border-style: solid; border-color: var(--amber-500); }

.cart-line__price  { grid-area: price; font-size: var(--step--1); }
.cart-line__price .price { font-size: var(--step-0); }
.cart-line__price .price--request { font-size: var(--step--1); }

.cart-line__qty    { grid-area: qty; }
.cart-line__total  { grid-area: total; text-align: right; font-weight: 700; align-self: center; }
.cart-line__remove { grid-area: remove; align-self: start; justify-self: end; }
.cart-line__remove .icon-btn { color: var(--ink-faint); min-width: 36px; min-height: 36px; }
.cart-line__remove .icon-btn:hover { color: var(--red); background: var(--red-50); }

.cart-lines__actions { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

/* Summary panel -------------------------------------------------------- */

.cart-summary {
    padding: 1.25rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 1rem;
}
.cart-summary .section-heading { font-size: var(--step-1); }
.cart-summary__note { margin: 0; padding: .75rem .875rem; background: var(--amber-50); border: 1px solid #f2d8b0; border-radius: var(--radius-sm); font-size: var(--step--1); color: var(--amber-warn); }
.cart-summary__note a { display: inline-block; margin-top: .25rem; font-weight: 600; }
.cart-summary__progress { margin: 0; font-size: var(--step--1); color: var(--green); font-weight: 500; }
.cart-summary__checkout { margin-top: .25rem; }

.totals { display: grid; gap: .5rem; margin: 0; }
.totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--step--1); }
.totals dt { color: var(--ink-muted); }
.totals dd { margin: 0; font-weight: 500; }
.totals__discount dd { color: var(--green); }
.totals__grand { padding-top: .625rem; border-top: 1px solid var(--border-strong); }
.totals__grand dt { color: var(--ink); font-weight: 600; font-size: var(--step-0); }
.totals__grand dd { font-size: var(--step-2); font-weight: 700; }
/* VAT is included in Thai retail prices, so it is shown as information
   rather than as a line that adds to the total. */
.totals__vat { font-size: 12px; color: var(--ink-faint); }
.totals__vat dd { font-weight: 400; }

.coupon { display: flex; gap: .5rem; }
.coupon input {
    flex: 1; min-width: 0;
    padding: .5rem .75rem; min-height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* Quote list ----------------------------------------------------------- */

.quote-items__subtotal {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    margin: 1rem 0 0; padding: .875rem 1rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
}
.quote-items__subtotal strong { font-size: var(--step-1); margin-left: auto; }
.quote-items__subtotal small { color: var(--ink-faint); width: 100%; }

.quote-contact {
    padding: 1.25rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.quote-contact .section-heading { font-size: var(--step-1); margin-bottom: 1rem; }
.quote-contact .form { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.quote-form__promise { text-align: center; margin-top: .625rem; }

/* ---------------------------------------------------------------------
   Confirmation pages (quote received, order placed)
   --------------------------------------------------------------------- */

.confirmation { max-width: 760px; margin-inline: auto; padding-block: clamp(2rem, 5vw, 3.5rem); text-align: center; }

.confirmation__icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.25rem;
    display: grid; place-items: center;
    background: var(--green-50);
    color: var(--green);
    border-radius: 999px;
}
.confirmation__icon svg { width: 32px; height: 32px; stroke-width: 2.4; }

.confirmation__title { margin: 0 0 .5rem; font-size: var(--step-3); }
.confirmation__detail { color: var(--ink-soft); max-width: 56ch; margin-inline: auto; }

.confirmation__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.25rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
}
.confirmation__meta > div { display: grid; gap: .125rem; }
.confirmation__meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.confirmation__meta dd { margin: 0; font-size: var(--step--1); }
.confirmation__meta strong { font-size: var(--step-1); color: var(--amber); letter-spacing: .02em; }

.confirmation__items, .confirmation__next { text-align: left; margin-top: 2.5rem; }
.confirmation__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }

.summary-table { font-size: var(--step--1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.summary-table th, .summary-table td { padding: .6875rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.summary-table thead th { background: var(--surface-muted); font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.summary-table tr:last-child td { border-bottom: 0; }
.summary-table .num { text-align: right; white-space: nowrap; }
.summary-table__note { display: block; margin-top: .25rem; color: var(--ink-faint); font-size: 12px; }

/* ---------------------------------------------------------------------
   Checkout
   --------------------------------------------------------------------- */

.checkout { display: grid; gap: 2rem; align-items: start; padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.checkout__section {
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.checkout__section .section-heading { font-size: var(--step-1); margin-bottom: 1rem; }

.method-list { display: grid; gap: .625rem; }

.method {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.method:hover { background: var(--surface-muted); }
.method input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--amber); flex: none; }
.method:has(input:checked) { border-color: var(--amber); background: var(--amber-50); }
.method__body { flex: 1; min-width: 0; }
.method__name { display: block; font-weight: 600; font-size: var(--step--1); }
.method__desc { display: block; margin-top: .125rem; font-size: 12px; color: var(--ink-muted); line-height: 1.55; }
.method__price { font-weight: 700; font-size: var(--step--1); white-space: nowrap; }
.method__price--quoted { color: var(--amber); font-weight: 600; font-size: 12px; }

.checkout-lines { display: grid; gap: .625rem; margin-bottom: 1rem; }
.checkout-line { display: flex; align-items: center; gap: .75rem; font-size: var(--step--1); }
.checkout-line__media { width: 48px; height: 48px; flex: none; background: var(--surface-muted); border-radius: var(--radius-sm); overflow: hidden; }
.checkout-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.checkout-line__body { flex: 1; min-width: 0; }
.checkout-line__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-line__meta { font-size: 11px; color: var(--ink-faint); }
.checkout-line__total { font-weight: 600; white-space: nowrap; }

.payment-instructions {
    margin-top: .75rem; padding: .875rem 1rem;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    color: var(--ink-soft);
}
.payment-instructions table { font-size: var(--step--1); }
.payment-instructions td, .payment-instructions th { padding: .25rem .5rem; }

/* Slip upload ---------------------------------------------------------- */

.slip-upload { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); text-align: left; }
.slip-upload .section-heading { font-size: var(--step-1); }

@media (min-width: 900px) {
    .cart-layout   { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; }
    .quote-layout  { grid-template-columns: minmax(0, 1fr) 400px; gap: 2.5rem; }
    .checkout      { grid-template-columns: minmax(0, 1fr) 360px; gap: 2.5rem; }
    .cart-summary  { position: sticky; top: calc(var(--header-h) + 1rem); }
}

@media (max-width: 599px) {
    /* Stack the line so the name is never squeezed into a narrow column. */
    .cart-line {
        grid-template-areas:
            "media body   remove"
            "media price  price"
            "qty   qty    total";
        grid-template-columns: 64px minmax(0, 1fr) auto;
    }
    .cart-line__media { width: 64px; height: 64px; }
}

/* ---------------------------------------------------------------------
   Status pills
   --------------------------------------------------------------------- */

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Colour carries meaning here, so each state also keeps its label — the pill
   is never the only signal. */
.status-pill--paid,
.status-pill--completed,
.status-pill--accepted   { background: var(--green-50); color: var(--green); }

.status-pill--pending,
.status-pill--awaiting_payment,
.status-pill--new,
.status-pill--reviewing  { background: var(--amber-50); color: var(--amber-warn); }

.status-pill--processing,
.status-pill--shipped,
.status-pill--quoted     { background: var(--blue-50); color: #14488a; }

.status-pill--cancelled,
.status-pill--failed,
.status-pill--rejected,
.status-pill--refunded,
.status-pill--expired    { background: var(--red-50); color: var(--red); }

/* ---------------------------------------------------------------------
   Auth cards
   --------------------------------------------------------------------- */

.auth-card {
    max-width: 420px;
    margin: clamp(2rem, 5vw, 3.5rem) auto;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.auth-card--wide { max-width: 640px; }
.auth-card__title { margin: 0 0 1.25rem; font-size: var(--step-2); text-align: center; }
.auth-card__lead { margin: -0.75rem 0 1.25rem; text-align: center; color: var(--ink-muted); font-size: var(--step--1); }
.auth-card__links { margin: 1rem 0 0; text-align: center; font-size: var(--step--1); display: flex; gap: .5rem; justify-content: center; }
.auth-card__links span { color: var(--ink-faint); }
.auth-card__guest {
    margin: 1.5rem 0 0; padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center; font-size: var(--step--1); color: var(--ink-muted);
}

/* ---------------------------------------------------------------------
   Account area
   --------------------------------------------------------------------- */

.account { display: grid; gap: 2rem; align-items: start; padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.account-nav {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
}
.account-nav__list { display: grid; gap: .125rem; }
.account-nav__link {
    display: flex; align-items: center; gap: .625rem;
    padding: .625rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 500;
}
.account-nav__link:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.account-nav__link.is-active { background: var(--navy); color: #fff; }
.account-nav__link svg { width: 18px; height: 18px; flex: none; }
.account-nav__logout { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }

.account__main { min-width: 0; }
.account__section { margin-top: 2.5rem; }
.account__section:first-child { margin-top: 1.5rem; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.stat {
    padding: 1rem 1.25rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stat__value { display: block; font-size: var(--step-3); font-weight: 700; line-height: 1.1; color: var(--ink); }
.stat__label { display: block; margin-top: .25rem; font-size: var(--step--1); color: var(--ink-muted); }

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.address-card {
    position: relative;
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.address-card .flag { position: absolute; top: .75rem; right: .75rem; }
.address-card address { font-style: normal; display: grid; gap: .1875rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
.address-card address strong { color: var(--ink); }
.address-card form { margin-top: auto; }

/* ---------------------------------------------------------------------
   Timeline (order status history)
   --------------------------------------------------------------------- */

.timeline { display: grid; gap: 0; margin-top: 1rem; }

.timeline__item {
    position: relative;
    display: flex; gap: 1rem;
    padding: 0 0 1.25rem 0;
}
/* The connecting line is drawn on the item, not between items, so the last
   entry does not trail off into nothing. */
.timeline__item::before {
    content: "";
    position: absolute;
    left: 5px; top: 14px; bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }

.timeline__dot {
    position: relative;
    flex: none;
    width: 12px; height: 12px;
    margin-top: 5px;
    background: var(--amber);
    border-radius: 999px;
    box-shadow: 0 0 0 3px var(--amber-50);
}
.timeline__item:not(:first-child) .timeline__dot { background: var(--border-strong); box-shadow: 0 0 0 3px var(--surface); }

.timeline__item strong { display: block; font-size: var(--step--1); }
.timeline__item time { display: block; font-size: 12px; color: var(--ink-faint); }
.timeline__item p { margin: .25rem 0 0; font-size: var(--step--1); color: var(--ink-muted); }

/* ---------------------------------------------------------------------
   Tracking
   --------------------------------------------------------------------- */

.track-page { max-width: 760px; margin-inline: auto; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.track-form { margin-top: 1.5rem; max-width: none; }
.track-result {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.track-result .confirmation__meta { background: var(--surface); margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------- */

.contact-layout { display: grid; gap: 2.5rem; align-items: start; padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.contact-details { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; }
.contact-details > div { display: grid; gap: .25rem; }
.contact-details dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.contact-details dd { margin: 0; font-size: var(--step-0); }
.contact-details address { font-style: normal; line-height: 1.7; color: var(--ink-soft); }
.contact-details__big { font-size: var(--step-2); font-weight: 700; }
.contact-details small { display: block; color: var(--ink-muted); font-size: var(--step--1); }

.contact-directions, .contact-map { margin-top: 2rem; }
.contact-directions .section-heading, .contact-map .section-heading { font-size: var(--step-1); }
.contact-directions p { color: var(--ink-soft); }
.contact-map iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius); }

.contact-form-wrap {
    padding: 1.5rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.contact-form-wrap .section-heading { font-size: var(--step-1); margin-bottom: 1.25rem; }
.contact-form-wrap .form { max-width: none; }

/* ---------------------------------------------------------------------
   Blog
   --------------------------------------------------------------------- */

.blog-index { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }

.post-card {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.post-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.post-card__media { display: block; background: var(--surface-muted); aspect-ratio: 16 / 10; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1rem 1.125rem 1.25rem; display: grid; gap: .375rem; }
.post-card__date { font-size: 12px; color: var(--ink-faint); }
.post-card__title { margin: 0; font-size: var(--step-1); line-height: 1.4; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--amber); }
.post-card__excerpt { margin: 0; font-size: var(--step--1); color: var(--ink-muted); }

.article { max-width: 76ch; margin-inline: auto; padding-block: clamp(1.5rem, 3vw, 3rem); }
.article__head { margin-bottom: 1.5rem; }
.article__title { font-size: var(--step-3); margin-bottom: .5rem; }
.article__meta { display: flex; gap: .5rem; font-size: var(--step--1); color: var(--ink-faint); margin-bottom: 1rem; }
/* Referenced by the Article schema's speakable selector. */
.article-lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.65; }
.article__cover { margin: 0 0 2rem; }
.article__cover img { width: 100%; border-radius: var(--radius); }

/* ---------------------------------------------------------------------
   Layout breakpoints for the sections above
   --------------------------------------------------------------------- */

@media (min-width: 900px) {
    .account        { grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; }
    .contact-layout { grid-template-columns: minmax(0, 1fr) 420px; }
    .track-form     { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Modern E-Commerce Storefront Extensions (Advice-Inspired Design)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Announcement Bar & Utility
   --------------------------------------------------------------------- */
.promo-announce {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 45%, #0062d0 100%);
    color: #ffffff;
    font-size: 13px;
    padding-block: .4rem;
    text-align: center;
}
.promo-announce__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.promo-announce__badge {
    background: var(--amber);
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.promo-announce__text {
    margin: 0;
    color: rgba(255, 255, 255, .95);
}
.promo-announce__link {
    color: #93c5fd;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.promo-announce__link:hover {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
   Hero Section (Main Carousel + Promo Cards)
   --------------------------------------------------------------------- */
.hero-ecom {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    background: #f8fafc;
}
.hero-ecom__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 992px) {
    .hero-ecom__grid {
        grid-template-columns: 1fr 340px;
    }
}

.hero-carousel {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    min-height: 380px;
}
.hero-carousel__track {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    color: #ffffff;
    z-index: 1;
}
.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Slide themes */
.hero-slide--theme-blue {
    background: linear-gradient(135deg, #0f172a 0%, #0062d0 60%, #0284c7 100%);
}
.hero-slide--theme-amber {
    background: linear-gradient(135deg, #1e293b 0%, #c2410c 50%, #e95325 100%);
}
.hero-slide--theme-dark {
    background: linear-gradient(135deg, #090d16 0%, #1e293b 50%, #334155 100%);
}

.hero-slide__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    margin-bottom: 1rem;
    color: #ffffff;
}
.hero-slide__title {
    font-size: clamp(1.6rem, 2.5vw + 1rem, 2.75rem);
    line-height: 1.2;
    margin-bottom: .85rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
    max-width: 22ch;
}
.hero-slide__subtitle {
    font-size: clamp(.95rem, 1vw + .75rem, 1.15rem);
    line-height: 1.6;
    margin-bottom: 1.75rem;
    color: rgba(255, 255, 255, .9);
    max-width: 48ch;
}
.hero-slide__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.hero-slide__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hero-slide__btn--primary {
    background: var(--amber);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(233, 83, 37, .4);
}
.hero-slide__btn--primary:hover {
    background: var(--amber-600);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(233, 83, 37, .5);
}
.hero-slide__btn--ghost {
    background: rgba(255, 255, 255, .15);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .4);
    backdrop-filter: blur(6px);
}
.hero-slide__btn--ghost:hover {
    background: rgba(255, 255, 255, .25);
    transform: translateY(-2px);
}

.hero-carousel__nav {
    position: absolute;
    bottom: 1.25rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    z-index: 10;
}
.hero-carousel__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .15s;
    backdrop-filter: blur(4px);
}
.hero-carousel__arrow:hover {
    background: rgba(0, 0, 0, .65);
    transform: scale(1.08);
}
.hero-carousel__dots {
    display: flex;
    gap: .4rem;
    margin-right: .5rem;
}
.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all .25s ease;
}
.hero-dot.is-active {
    width: 24px;
    background: var(--amber);
}

/* Hero Mini Promo Cards */
.hero-mini-promo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mini-promo-card {
    flex: 1;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mini-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.mini-promo-card--quote {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1.5px solid #86efac;
    color: #14532d;
}
.mini-promo-card--package {
    background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
    border: 1.5px solid #93c5fd;
    color: #1e3a8a;
}
.mini-promo-card__tag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}
.mini-promo-card--quote .mini-promo-card__tag {
    background: #16a34a;
    color: #ffffff;
}
.mini-promo-card--package .mini-promo-card__tag {
    background: #2563eb;
    color: #ffffff;
}
.mini-promo-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .35rem;
    color: inherit;
}
.mini-promo-card__desc {
    font-size: .875rem;
    line-height: 1.45;
    margin-bottom: .85rem;
    opacity: .9;
    color: inherit;
}
.mini-promo-card__cta {
    font-size: .875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.mini-promo-card--quote .mini-promo-card__cta { color: #15803d; }
.mini-promo-card--package .mini-promo-card__cta { color: #1d4ed8; }

/* ---------------------------------------------------------------------
   Quick Perks / Service Badges Strip
   --------------------------------------------------------------------- */
.perks-strip {
    margin-top: -1rem;
    position: relative;
    z-index: 10;
    margin-bottom: 2rem;
}
.perks-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
    border: 1px solid rgba(226, 232, 240, .8);
    padding: 1.25rem 1.75rem;
}
.perks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .perks-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .perks-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
.perk-item {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.perk-item__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #1e3a8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.perk-item:hover .perk-item__icon {
    background: #dbeafe;
    color: #1d4ed8;
    transform: scale(1.05);
}
.perk-item__icon svg {
    width: 22px;
    height: 22px;
}
.perk-item__text {
    display: flex;
    flex-direction: column;
}
.perk-item__title {
    font-size: .875rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}
.perk-item__desc {
    font-size: .75rem;
    color: #64748b;
    line-height: 1.35;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------
   Official Brands Thumbnail Slider
   --------------------------------------------------------------------- */
.brands-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.75rem;
    margin-bottom: 2.75rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .04);
}
.brands-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #f1f5f9;
}
.brands-section__title-group {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.brands-section__badge {
    font-size: 11px;
    font-weight: 800;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.brands-section__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.brands-section__nav {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.brands-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}
.brands-nav-btn:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: scale(1.08);
}
.brands-slider-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.brands-slider {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: .35rem;
}
.brands-slider::-webkit-scrollbar {
    display: none;
}
.brand-card {
    flex: 0 0 160px;
    min-width: 160px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: var(--radius);
    padding: .85rem .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all .2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.brand-card:hover {
    border-color: #3b82f6;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, .15);
}
.brand-card__media {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
}
.brand-card__media img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .2s ease;
}
.brand-card:hover .brand-card__media img {
    transform: scale(1.08);
}
.brand-card__name {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color .15s ease;
}
.brand-card:hover .brand-card__name {
    color: #1e3a8a;
}


/* ---------------------------------------------------------------------
   ⭐ Recommended Themed Banner (Advice Curved Blue Showcase)
   --------------------------------------------------------------------- */
.recommended-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 3rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.recommended-banner {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #0284c7 100%);
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    color: #ffffff;
}
.recommended-banner__left {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.recommended-banner__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fde047;
}
.recommended-banner__title {
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}
.recommended-tabs {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.rec-tab-btn {
    background: rgba(255, 255, 255, .15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .3);
    padding: .45rem .95rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    backdrop-filter: blur(4px);
}
.rec-tab-btn:hover {
    background: rgba(255, 255, 255, .3);
}
.rec-tab-btn.is-active {
    background: #ffffff;
    color: #1e3a8a;
    border-color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.recommended-body {
    padding: 1.5rem;
}
.rec-tab-content {
    display: none;
}
.rec-tab-content.is-active {
    display: block;
}

/* ---------------------------------------------------------------------
   Category Rails Styling
   --------------------------------------------------------------------- */
.cat-rail-section {
    margin-bottom: 2.75rem;
}
.cat-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid #e2e8f0;
}
.cat-rail-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.cat-rail-title__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e0f2fe;
    color: #0369a1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cat-rail-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    transition: color .15s, transform .15s;
}
.cat-rail-link:hover {
    color: #1d4ed8;
    transform: translateX(3px);
}

/* ---------------------------------------------------------------------
   Two-Column Promo Split Grid
   --------------------------------------------------------------------- */
.promo-split {
    margin-bottom: 3rem;
}
.promo-split__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .promo-split__grid {
        grid-template-columns: 1fr 1fr;
    }
}
.promo-split-card {
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.promo-split-card--fabrication {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}
.promo-split-card--starter {
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 60%, #ea580c 100%);
}
.promo-split-card__badge {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .85rem;
}
.promo-split-card__title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: .6rem;
    color: #ffffff;
}
.promo-split-card__desc {
    font-size: .925rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 1.5rem;
    max-width: 42ch;
}
.promo-split-card__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .875rem;
    background: #ffffff;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: transform .15s, box-shadow .15s;
}
.promo-split-card__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* ---------------------------------------------------------------------
   RFQ / Custom Kitchen 3-Step Section
   --------------------------------------------------------------------- */
.rfq-box {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 3rem;
}
.rfq-box__head {
    text-align: center;
    max-width: 65ch;
    margin-inline: auto;
    margin-bottom: 2rem;
}
.rfq-box__title {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: .5rem;
}
.rfq-box__desc {
    font-size: .95rem;
    color: #475569;
    line-height: 1.6;
}
.rfq-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .rfq-steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.rfq-step-card {
    background: #ffffff;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    border: 1px solid #e2e8f0;
    position: relative;
    transition: transform .2s ease;
}
.rfq-step-card:hover {
    transform: translateY(-3px);
}
.rfq-step-card__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.rfq-step-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .4rem;
}
.rfq-step-card__desc {
    font-size: .875rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}
.rfq-box__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Articles & Buying Guides (Advice Layout)
   --------------------------------------------------------------------- */
.articles-section {
    margin-bottom: 3rem;
}
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.article-ecom-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.article-ecom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: #cbd5e1;
}
.article-ecom-card__badge {
    background: #f1f5f9;
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 700;
    padding: .35rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-bottom: 1px solid #e2e8f0;
}
.article-ecom-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.article-ecom-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
    margin-bottom: .5rem;
}
.article-ecom-card__excerpt {
    font-size: .8125rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}
.article-ecom-card__more {
    font-size: .8125rem;
    font-weight: 700;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* ---------------------------------------------------------------------
   LINE OA & Showroom Assurance Banner
   --------------------------------------------------------------------- */
.trust-line-strip {
    background: linear-gradient(135deg, #06c755 0%, #05a044 100%);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 8px 30px rgba(6, 199, 85, .25);
}
.trust-line-strip__info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.trust-line-strip__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffffff;
    color: #06c755;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 900;
    flex-shrink: 0;
}
.trust-line-strip__title {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800;
    margin-bottom: .25rem;
    color: #ffffff;
}
.trust-line-strip__desc {
    font-size: .9rem;
    color: rgba(255, 255, 255, .92);
    margin: 0;
}
.trust-line-strip__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #ffffff;
    color: #05a044 !important;
    font-weight: 800;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    font-size: .95rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    transition: transform .15s;
}
.trust-line-strip__btn:hover {
    transform: scale(1.05);
}

/* ---------------------------------------------------------------------
   Footer E-Commerce Enhancements
   --------------------------------------------------------------------- */
.footer-trust-strip {
    background: #111827;
    border-top: 1px solid #1f2937;
    padding-block: 1.5rem;
}
.footer-badges-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.footer-badge-group {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.footer-badge-group__title {
    font-size: .75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.badge-pill {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* =====================================================================
   About Us Page (Company Profile & Heritage Storytelling)
   ===================================================================== */

.about-page {
    color: #1e293b;
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.about-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
    color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.about-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}

.about-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
    letter-spacing: 0.05em;
}

.about-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}

.about-hero__lead {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.7;
    color: #cbd5e1;
    max-width: 72ch;
    margin: 0 auto;
    font-weight: 400;
}

/* Key Stats Strip */
.about-stats-wrap {
    margin-top: -2.5rem;
    position: relative;
    z-index: 10;
    margin-bottom: 2.5rem;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.about-stat-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

.about-stat-card__num {
    display: block;
    font-size: clamp(2.2rem, 3.5vw, 2.85rem);
    font-weight: 800;
    color: #ea580c;
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.about-stat-card__num small {
    font-size: 0.6em;
    color: #d97706;
    margin-left: 2px;
}

.about-stat-card__label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.about-stat-card__desc {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

/* Story Blocks */
.about-story {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.about-story__grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

.about-story--reverse .about-story__grid {
    grid-template-columns: 1.08fr 1fr;
}

.about-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
    border: 1px solid #cbd5e1;
    background: #0f172a;
}

.about-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.about-frame:hover img {
    transform: scale(1.03);
}

.about-frame__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(251, 191, 36, 0.35);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.about-frame__caption {
    font-size: 13.5px;
    color: #64748b;
    font-style: italic;
    margin-top: 0.85rem;
    line-height: 1.5;
    padding-inline: 0.5rem;
    text-align: center;
}

.about-story__tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #ea580c;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #ffedd5;
    padding: 4px 14px;
    border-radius: 9999px;
    margin-bottom: 0.85rem;
}

.about-story__title {
    font-size: clamp(1.45rem, 2.5vw, 2.1rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.about-story__prose {
    font-size: 15.5px;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 1.5rem;
}

.about-story__prose p {
    margin-bottom: 1rem;
}

.about-story__prose strong {
    color: #0f172a;
    font-weight: 700;
}

.about-highlight-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f8fafc;
    border-left: 4px solid #ea580c;
    padding: 1.1rem 1.35rem;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.about-highlight-box svg {
    color: #ea580c;
    flex: none;
    margin-top: 3px;
}

.about-highlight-box strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    margin-bottom: 0.25rem;
}

.about-highlight-box p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.about-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.about-feature-list li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.about-feature-list__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
    font-size: 14px;
    flex: none;
    margin-top: 2px;
}

.about-feature-list strong {
    display: block;
    font-size: 15px;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.about-feature-list small {
    display: block;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.45;
}

/* Philosophy Quote Banner */
.about-quote-section {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%);
    border-top: 1px solid #fde68a;
    border-bottom: 1px solid #fde68a;
    padding: clamp(3.5rem, 6vw, 5rem) 0;
    margin: 2.5rem 0;
}

.about-quote-card {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-inline: 1rem;
}

.about-quote-card__mark {
    font-size: 7rem;
    line-height: 1;
    font-family: Georgia, serif;
    color: #f59e0b;
    opacity: 0.3;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.about-quote-card__quote {
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.7;
    color: #78350f;
    margin: 0 0 1.75rem;
    position: relative;
    z-index: 2;
}

.about-quote-card__author strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #451a03;
    margin-bottom: 0.25rem;
}

.about-quote-card__author span {
    font-size: 13.5px;
    color: #92400e;
}

/* 4 Pillars of Excellence */
.about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.about-pillar-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.85rem 1.35rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.about-pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px -6px rgba(0, 0, 0, 0.1);
    border-color: #f59e0b;
}

.about-pillar-card__icon {
    font-size: 2.5rem;
    margin-bottom: 1.1rem;
    line-height: 1;
}

.about-pillar-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.65rem;
    line-height: 1.35;
}

.about-pillar-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 1.35rem;
    flex: 1;
}

.about-pillar-card__link {
    font-size: 13.5px;
    font-weight: 700;
    color: #ea580c;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}

.about-pillar-card__link:hover {
    color: #c2410c;
    text-decoration: underline;
}

/* Official Company Contact & Showroom Card */
.about-contact-section {
    padding-top: 1rem;
}

.about-contact-card {
    background: #0f172a;
    border-radius: 20px;
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 3.75rem);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
    border: 1px solid #1e293b;
}

.about-contact-card__name {
    font-size: clamp(1.45rem, 2.5vw, 1.95rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.about-contact-card__desc {
    font-size: 15px;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 1.75rem;
}

.about-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin: 0;
}

.about-contact-item dt {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.about-contact-item dd {
    margin: 0;
    font-size: 15px;
    color: #f8fafc;
    font-weight: 500;
    line-height: 1.5;
}

.about-contact-item dd a {
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.about-contact-item dd a:hover {
    text-decoration: underline;
    color: #7dd3fc;
}

.about-contact-card__actions {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: clamp(1.75rem, 3vw, 2.35rem);
}

.about-contact-card__actions-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.about-contact-card__actions-sub {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.about-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.btn--amber {
    background: var(--amber);
    color: #ffffff;
    border: 1px solid var(--amber-600);
    font-weight: 700;
    transition: background 0.15s, transform 0.15s;
}

.btn--amber:hover {
    background: var(--amber-600);
    color: #ffffff;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-contact-card {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .about-story__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-story--reverse .about-story__media {
        order: -1;
    }
    .about-stats-wrap {
        margin-top: 1.5rem;
    }
    .about-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .about-pillars-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Quotation System Overhaul (RFQ & Instant Download & History)
   ===================================================================== */

/* Tabs Navigation */
.quote-header-tabs {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.quote-tabs {
    display: inline-flex;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 999px;
    gap: 4px;
}

.quote-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.quote-tabs__item:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.quote-tabs__item--active {
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

/* Instant Download Banner in Quote Form */
.quote-instant-download-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 12px;
}

.quote-instant-download-badge svg {
    flex-shrink: 0;
    color: #059669;
}

/* Received Confirmation Download Box */
.confirmation__download-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1.5px solid #86efac;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin: 1.75rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.08);
}

@media (min-width: 768px) {
    .confirmation__download-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.confirmation__download-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #14532d;
    margin: 0 0 0.35rem;
}

.confirmation__download-desc {
    font-size: 14px;
    color: #166534;
    margin: 0;
    line-height: 1.5;
}

.confirmation__download-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* History Page Styles */
.history-hero {
    margin-bottom: 2rem;
}

.history-search-form {
    margin-top: 1.25rem;
    max-width: 650px;
}

.history-search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.history-search-input {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
}

.history-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.history-query-notice {
    font-size: 14px;
    color: #475569;
    margin-bottom: 1rem;
}

.history-table-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius);
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.history-table th {
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
}

.history-quote-link {
    color: #1e3a8a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.history-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* =====================================================================
   Official Quotation Printable Document (A4 format) - Premium Corporate
   ===================================================================== */

.qdoc-top-bar {
    background: #0f172a;
    color: #ffffff;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.qdoc-top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.qdoc-top-bar__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qdoc-top-bar__title {
    font-size: 13px;
    color: #94a3b8;
}

.qdoc-top-bar__no {
    font-size: 15px;
    font-weight: 800;
    font-family: monospace, sans-serif;
    color: #38bdf8;
    letter-spacing: 0.03em;
}

.qdoc-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #334155;
    color: #f8fafc;
}

.qdoc-top-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qdoc-btn-print {
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 7px 16px !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

.qdoc-btn-print:hover {
    background: #1d4ed8 !important;
}

.qdoc-top-bar .btn--outline {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.qdoc-top-bar .btn--outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.qdoc-top-bar .btn--ghost {
    color: #cbd5e1 !important;
}

.qdoc-top-bar .btn--ghost:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1);
}

.qdoc-page-wrap {
    padding-block: 2rem 4rem;
    background: #f1f5f9;
}

/* A4 Sheet Proportions on Screen */
.qdoc-paper {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.12);
    position: relative;
    padding: 32px 42px 40px;
    font-family: var(--font-sans, "Prompt", "Sarabun", system-ui, -apple-system, sans-serif);
    color: #1e293b;
    line-height: 1.5;
}

.qdoc-stripe {
    height: 6px;
    background: linear-gradient(90deg, #7d7d7d 0% 25%, #0062d0 25% 50%, #e95325 50% 75%, #7d7d7d 75% 100%);
    margin: -32px -42px 26px;
    border-radius: 4px 4px 0 0;
}

.qdoc-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #0f2744;
    margin-bottom: 18px;
}

.qdoc-header-v2__company {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    max-width: 65%;
}

.qdoc-header-v2__logo-wrap {
    flex-shrink: 0;
    width: 140px;
}

.qdoc-header-v2__logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.qdoc-cname-th {
    font-size: 17px;
    font-weight: 800;
    color: #0f2744;
    margin: 0 0 2px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.qdoc-cname-en {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
}

.qdoc-caddr {
    font-size: 11px;
    color: #475569;
    line-height: 1.5;
}

.qdoc-header-v2__docinfo {
    text-align: right;
    flex-shrink: 0;
}

.qdoc-headline-th {
    font-size: 26px;
    font-weight: 900;
    color: #1e3a8a;
    margin: 0;
    line-height: 1.1;
    letter-spacing: 1px;
}

.qdoc-headline-en {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.qdoc-doc-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 12px;
}

.qdoc-doc-badge__label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qdoc-doc-badge__val {
    font-size: 16px;
    font-weight: 800;
    color: #0f2744;
    font-family: monospace, sans-serif;
}

/* Customer & Doc Meta Panel */
.qdoc-meta-panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    margin-bottom: 18px;
    overflow: hidden;
    background: #ffffff;
}

.qdoc-meta-col--customer {
    border-right: 1px solid #cbd5e1;
}

.qdoc-meta-col__head {
    background: #f1f5f9;
    padding: 6px 12px;
    border-bottom: 1px solid #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.03em;
}

.qdoc-meta-col__body {
    padding: 10px 14px;
}

.qdoc-field-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}

.qdoc-field-lbl {
    width: 105px;
    color: #64748b;
    font-weight: 600;
    padding: 3px 0;
    vertical-align: top;
    white-space: nowrap;
}

.qdoc-field-val {
    color: #0f172a;
    padding: 3px 0;
    vertical-align: top;
}

.qdoc-accent-blue {
    color: var(--blue);
    font-family: monospace, sans-serif;
    font-size: 13.5px;
}

.qdoc-accent-amber {
    color: var(--amber);
}

.qdoc-pill-mini {
    display: inline-block;
    background: #fff3ee;
    color: var(--amber-600);
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
}

.qdoc-status-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #edf4fc;
    color: var(--blue);
}

.qdoc-status-tag--new {
    background: #fff3ee;
    color: var(--amber-600);
}

/* Items Table */
.qdoc-table-section {
    margin-bottom: 16px;
}

.qdoc-main-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid #cbd5e1;
}

.qdoc-main-table th {
    background: var(--blue);
    color: #ffffff;
    font-weight: 700;
    padding: 8px 8px;
    border: 1px solid var(--blue);
    vertical-align: middle;
    line-height: 1.25;
    font-size: 11.5px;
}

.qdoc-main-table th .en-sub {
    display: block;
    font-size: 9.5px;
    font-weight: 500;
    opacity: 0.85;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

.qdoc-main-table td {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    vertical-align: middle;
    color: #1e293b;
}

.qdoc-row:nth-child(even) {
    background: #f8fafc;
}

.col-num { width: 45px; text-align: center !important; }
.col-sku { width: 95px; text-align: center !important; font-family: monospace; font-size: 11.5px; }
.col-desc { text-align: left; }
.col-qty { width: 60px; text-align: center !important; font-weight: 700; }
.col-unit { width: 115px; text-align: right !important; font-variant-numeric: tabular-nums; }
.col-amt { width: 135px; text-align: right !important; font-weight: 700; font-variant-numeric: tabular-nums; }

.qdoc-item-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.35;
}

.qdoc-item-specs {
    margin-top: 3px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.qdoc-spec-pill {
    display: inline-block;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    color: #475569;
}

.qdoc-item-remark {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--amber-600);
    font-size: 11px;
    margin-top: 3px;
}

.qdoc-request-badge {
    display: inline-block;
    background: #fff3ee;
    color: var(--amber-600);
    border: 1px solid #fed7aa;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11.5px;
    white-space: nowrap;
}

/* Bottom Split: Left Notes, Right Totals */
.qdoc-bottom-section {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
    margin-bottom: 16px;
    align-items: start;
}

.qdoc-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qdoc-notice-card {
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 11.5px;
    line-height: 1.45;
}

.qdoc-notice-card--amber {
    background: #fff3ee;
    border: 1px solid #fed7aa;
    color: var(--amber-600);
}

.qdoc-notice-card--blue {
    background: #edf4fc;
    border: 1px solid #bfdbfe;
    color: var(--blue);
}

.qdoc-notice-card__head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.qdoc-notice-card p {
    margin: 0;
}

.qdoc-bank-box {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}

.qdoc-bank-box__title {
    background: #f8fafc;
    border-bottom: 1px solid #cbd5e1;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 800;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qdoc-bank-box__body {
    padding: 8px 12px;
    font-size: 11.5px;
    color: #334155;
    line-height: 1.45;
}

.qdoc-bank-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qdoc-bank-logo-scb {
    background: #4e2a84;
    color: #ffffff;
    font-weight: 900;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.qdoc-bank-acc {
    font-family: monospace, sans-serif;
    font-size: 13.5px;
    color: #0f172a;
}

.qdoc-bottom-right {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}

.qdoc-totals-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.qdoc-totals-row th {
    text-align: left;
    padding: 7px 12px;
    color: #475569;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    width: 55%;
}

.qdoc-totals-row td {
    text-align: right;
    padding: 7px 12px;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    font-variant-numeric: tabular-nums;
    width: 45%;
    white-space: nowrap;
}

.qdoc-totals-row--grand th {
    background: #f1f5f9;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    border-top: 1.5px solid #0f2744;
    border-bottom: 3px double #0f2744;
}

.qdoc-totals-row--grand th .en-sub {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}

.qdoc-totals-row--grand td {
    background: #f1f5f9;
    border-top: 1.5px solid #0f2744;
    border-bottom: 3px double #0f2744;
}

.qdoc-grand-val {
    font-size: 16px;
    font-weight: 900;
    color: #1e3a8a;
}

.qdoc-nowrap-text {
    white-space: nowrap !important;
    display: inline-block;
}

.qdoc-baht-text-card {
    background: #f8fafc;
    padding: 6px 12px;
    font-size: 11.5px;
    color: #475569;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 6px;
}

.qdoc-baht-lbl {
    font-weight: 700;
    color: #334155;
}

.qdoc-baht-val {
    font-weight: 600;
    color: #1e3a8a;
}

/* Terms */
.qdoc-terms-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 8px 14px;
    margin-bottom: 22px;
    font-size: 11px;
}

.qdoc-terms-panel__head {
    font-size: 11.5px;
    font-weight: 800;
    color: #0f2744;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.qdoc-terms-panel__list {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    line-height: 1.45;
}

/* Signatures */
.qdoc-sig-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-top: 10px;
}

.qdoc-sig-col {
    text-align: center;
    position: relative;
}

.qdoc-stamp-circle {
    width: 90px;
    height: 90px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 9.5px;
    color: #94a3b8;
    line-height: 1.25;
    background: #fafafa;
}

.qdoc-stamp-circle--cust {
    border-color: #e2e8f0;
}

.qdoc-sig-line {
    border-bottom: 1px dotted #475569;
    width: 75%;
    margin: 10px auto 8px;
}

.qdoc-sig-name {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.qdoc-sig-role {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.qdoc-sig-date {
    font-size: 10.5px;
    color: #94a3b8;
}

/* =====================================================================
   PRINT STYLESHEET (@media print)
   ===================================================================== */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm 10mm;
    }

    /* Hide standard chrome */
    .header,
    .nav-bar,
    .footer,
    .promo-announce,
    .breadcrumbs,
    .qdoc-top-bar,
    .print-hide {
        display: none !important;
    }

    body,
    html {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 10.5pt !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wrap,
    .qdoc-page-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    .qdoc-paper {
        max-width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .qdoc-stripe {
        display: none !important;
    }

    .qdoc-main-table th {
        background: #1e3a8a !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .qdoc-main-table td,
    .qdoc-meta-panel,
    .qdoc-totals-grid th,
    .qdoc-totals-grid td {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .qdoc-sig-panel,
    .qdoc-bottom-section,
    .qdoc-terms-panel {
        page-break-inside: avoid;
    }
}

/* =====================================================================
   Commercial Stainless Steel Kitchen Page (GUI Upgrade)
   ===================================================================== */

.ck-page {
    color: var(--ink);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

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

/* 1. Hero Section */
.ck-hero {
    background: linear-gradient(135deg, #090d16 0%, #1e293b 50%, #0062d0 120%);
    color: #ffffff;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem);
    position: relative;
    overflow: hidden;
}

.ck-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(233, 83, 37, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(0, 98, 208, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.ck-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.ck-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

.ck-hero__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px var(--amber);
    animation: ckPulse 2s infinite ease-in-out;
}

@keyframes ckPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.6; }
}

.ck-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.22;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.ck-hero__lead {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    max-width: 76ch;
    margin: 0 auto 2rem;
}

.ck-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.btn--outline-light {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
}
.btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.btn--line {
    background: #06c755;
    color: #ffffff !important;
    border: 1px solid #05a044;
}
.btn--line:hover {
    background: #05a044;
    color: #ffffff;
}

.ck-hero__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 2rem);
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ck-trust-tag {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}
.ck-trust-tag svg {
    color: var(--amber);
    flex: none;
}

/* 2. Metrics Counter Cards */
.ck-metrics-wrap {
    margin-top: -3rem;
    position: relative;
    z-index: 10;
    margin-bottom: 2.5rem;
}

.ck-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.ck-metric-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ck-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--amber);
}

.ck-metric-card__val {
    display: block;
    font-size: clamp(2.2rem, 3.5vw, 2.85rem);
    font-weight: 800;
    color: var(--amber);
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.ck-metric-card__val small {
    font-size: 0.6em;
    color: var(--blue);
    margin-left: 2px;
}

.ck-metric-card__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.ck-metric-card__sub {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

/* Common Section Header */
.ck-section-head {
    max-width: 800px;
    margin: 0 auto 3rem;
}

.ck-section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--amber);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #fff3ee;
    padding: 4px 14px;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}
.ck-section-tag--white {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.ck-section-title {
    font-size: clamp(1.6rem, 2.8vw, 2.35rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 0.85rem;
}

.ck-section-subtitle {
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
}

/* 3. Services Grid */
.ck-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.ck-service-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ck-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px -6px rgba(15, 23, 42, 0.12);
    border-color: var(--blue);
}

.ck-service-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #edf4fc;
    display: grid;
    place-items: center;
    font-size: 1.65rem;
    margin-bottom: 1.25rem;
    flex: none;
}

.ck-service-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.ck-service-card__desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 1.25rem;
    flex: 1;
}

.ck-service-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
}

.ck-service-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}
.ck-service-card__list li::before {
    content: "✓";
    color: var(--green);
    font-weight: 700;
}

/* 4. Portfolio Tabs & Client Grid */
.ck-tabs-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 2.25rem;
}

.ck-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
}
.ck-tab-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.ck-tab-btn.is-active {
    background: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.ck-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ck-client-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ck-client-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-color: var(--amber);
}

.ck-client-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    font-size: 11.5px;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.ck-client-card__name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin: 0 0 0.25rem;
}

.ck-client-card__sub {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 0.75rem;
    display: block;
}

.ck-client-card__loc {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    color: #94a3b8;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px dashed #f1f5f9;
}
.ck-client-card__loc svg {
    color: var(--amber);
    flex: none;
}

/* 5. 4-Step Workflow */
.ck-workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.ck-step {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.85rem 1.35rem;
    position: relative;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.ck-step__marker {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue) 0%, #1e3a8a 100%);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    margin-bottom: 1.15rem;
    box-shadow: 0 4px 10px rgba(0, 98, 208, 0.25);
}

.ck-step__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.65rem;
    line-height: 1.35;
}

.ck-step__desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* 6. Consultation & Inquiry Block */
.ck-cta-card {
    background: #0f172a;
    border-radius: 20px;
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 3.75rem);
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
    border: 1px solid #1e293b;
}

.ck-cta-card__title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1.25;
}

.ck-cta-card__lead {
    font-size: 15px;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 2rem;
}

.ck-cta-details {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.ck-cta-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.ck-cta-icon {
    font-size: 1.35rem;
    line-height: 1;
    margin-top: 2px;
}

.ck-cta-contact-row strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.ck-cta-contact-row span,
.ck-cta-contact-row a {
    font-size: 14.5px;
    color: #f8fafc;
}
.ck-cta-contact-row a {
    color: #38bdf8;
    font-weight: 600;
}
.ck-cta-contact-row a:hover {
    text-decoration: underline;
}

.ck-inquiry-box {
    background: #ffffff;
    border-radius: 16px;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--ink);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.ck-inquiry-box__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}

.ck-inquiry-box__sub {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 1.25rem;
}

.form-group {
    margin-bottom: 0.95rem;
}
.form-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.3rem;
}
.form-input {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    color: var(--ink);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.form-input:focus {
    background: #ffffff;
    border-color: var(--blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 98, 208, 0.12);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .ck-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ck-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ck-workflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .ck-cta-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ck-metrics-grid {
        grid-template-columns: 1fr;
    }
    .ck-services-grid {
        grid-template-columns: 1fr;
    }
    .ck-workflow-steps {
        grid-template-columns: 1fr;
    }
    .ck-portfolio-grid {
        grid-template-columns: 1fr;
    }
}




/* =====================================================================
   Catalogue mode — enquiry box instead of a buy box
   ===================================================================== */
.product__lead { margin: 0 0 1rem; color: var(--ink-soft); }
.product__lead p { margin: 0 0 .5rem; }
.product__options { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: .875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.product__options > div { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: .75rem; }
.product__options dt { font-size: var(--step--1); color: var(--ink-muted); }
.product__options dd { margin: 0; font-size: var(--step--1); font-weight: 500; }
.product__enquiry {
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.product__enquiry-title { margin: 0 0 .25rem; font-size: var(--step-1); line-height: var(--leading-tight); }
.product__enquiry-text { margin: 0 0 1rem; font-size: var(--step--1); color: var(--ink-muted); }
.product__enquiry-hours { margin: .75rem 0 0; font-size: var(--step--1); color: var(--ink-muted); text-align: center; }
.card__actions .btn { width: 100%; justify-content: center; }
.contact-product {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    background: var(--surface-muted);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
}

/* =====================================================================
   Downloads page
   ===================================================================== */
.download-list { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.download-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.download-card__cover { display: block; background: var(--surface-muted); }
.download-card__cover img { display: block; width: 100%; height: auto; aspect-ratio: 680 / 265; object-fit: cover; }
.download-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.125rem 1.25rem; flex: 1; }
.download-card__title { margin: 0; font-size: var(--step-0); line-height: var(--leading-tight); }
.download-card__desc { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.download-card__meta { margin: 0; font-size: var(--step--1); color: var(--ink-muted); }
.download-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.download-help { margin: 0 0 2rem; padding: 1.25rem 1.5rem; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); }
.download-help h2 { margin: 0 0 .375rem; font-size: var(--step-1); }
.download-help p { margin: 0 0 .75rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   Home: picture banners carried over from the old site
   --------------------------------------------------------------------- */
/* Hero made of images: full width at the picture's own proportions (the
   old slides have text baked in, so they must not be cropped); the two
   promo cards sit in a row underneath. */
@media (min-width: 992px) {
    .hero-ecom__grid--wide { grid-template-columns: 1fr; }
}
.hero-ecom__grid--wide .hero-mini-promo { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
    .hero-ecom__grid--wide .hero-mini-promo { grid-template-columns: 1fr 1fr; }
}
.hero-carousel--images {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1139 / 402;
    background: #eef1f4;
}
.hero-carousel--images .hero-carousel__track {
    position: absolute;
    inset: 0;
    min-height: 0;
}
.hero-slide--image {
    padding: 0;
    display: block;
    color: inherit;
    text-decoration: none;
}
.hero-slide--image picture,
.hero-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-slide__img {
    object-fit: cover;
    object-position: center;
}
/* Translated headline laid over the picture's own (Thai) text. */
.hero-slide__caption {
    position: absolute;
    inset: 0 auto 0 0;
    width: 72%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1rem, 4vw, 3rem);
    background: linear-gradient(90deg, #f8fafc 0%, #f8fafc 88%, rgba(248, 250, 252, 0) 100%);
}
.hero-slide__caption .hero-slide__title {
    color: var(--navy, #0f172a);
    text-shadow: none;
    font-size: clamp(1.05rem, 1.5vw + .6rem, 2rem);
    margin-bottom: .5rem;
    max-width: 24ch;
}
.hero-slide__caption .hero-slide__subtitle {
    color: #334155;
    font-size: clamp(.85rem, .4vw + .7rem, 1rem);
    margin-bottom: 1rem;
    max-width: 44ch;
}
.hero-carousel--images .hero-dot { background: rgba(15, 23, 42, .3); }
.hero-carousel--images .hero-dot.is-active { background: var(--amber); }
@media (max-width: 640px) {
    .hero-carousel--images .hero-carousel__nav { bottom: .5rem; right: .75rem; }
    .hero-carousel--images .hero-carousel__arrow { display: none; }
    .hero-slide__caption .hero-slide__subtitle,
    .hero-slide__caption .hero-slide__btn { display: none; }
}

/* Product promo banners: all share the 2.25 : 1 shape of the originals. */
.promo-banners { margin-block: 2rem; }
.promo-banners__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}
.promo-banner {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.promo-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.promo-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 585 / 260;
    object-fit: cover;
}
.promo-banner__caption {
    padding: .6rem .85rem;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Stainless card with a photo of a finished kitchen behind the text. */
.promo-split-card--photo {
    isolation: isolate;
    background: #1e293b;
}
.promo-split-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.promo-split-card--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(15, 23, 42, .93) 0%, rgba(15, 23, 42, .8) 50%, rgba(15, 23, 42, .45) 100%);
}

/* =====================================================================
   Responsive refinements (phones and tablets)
   ===================================================================== */

#main:focus { outline: none; }

/* Header on phones: burger, logo and enquiry on one row, a full-width
   search box underneath (it was squeezed to a few pixels next to the logo). */
@media (max-width: 767px) {
    .promo-announce { padding-block: .3rem; font-size: 12px; }
    .promo-announce__badge,
    .promo-announce__link { display: none; }
    .promo-announce__inner { flex-wrap: nowrap; }
    .promo-announce__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .utility-bar__inner { min-height: 34px; justify-content: flex-end; }
    .utility-link,
    .lang-switch__item { display: inline-flex; align-items: center; min-height: 30px; }
    .lang-switch__item { padding-inline: .625rem; }

    .header-main__inner { flex-wrap: wrap; column-gap: .5rem; row-gap: 0; min-height: 0; padding-block: .5rem; }
    .brand__logo { height: 40px; }
    .search { order: 5; flex: 1 1 100%; max-width: none; margin-top: .5rem; }
    .search__input { min-height: 42px; font-size: 16px; } /* 16px stops iOS zooming in on focus */
}

/* Uppercase labels and "read time" notes used <small> inside 11px badges,
   which came out at 9px. */
.article-ecom-card__badge small,
.ck-client-card__badge small { font-size: 1em; }

/* Hero dots: a bigger touch area without a bigger dot. */
.hero-dot { position: relative; }
.hero-dot::before { content: ""; position: absolute; inset: -10px -4px; }

/* Service badges: a swipeable row on phones instead of two cramped columns. */
@media (max-width: 639px) {
    .perks-card { padding: .875rem 0; }
    .perks-grid {
        display: flex;
        gap: .75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
        padding-inline: 1rem;
        scrollbar-width: none;
    }
    .perks-grid::-webkit-scrollbar { display: none; }
    .perk-item { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Product listings: two columns on phones (one per row meant ~380px of
   scrolling per product). Rails keep their own swipeable layout. */
@media (max-width: 640px) {
    .product-grid:not(.product-grid--rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
    .product-grid:not(.product-grid--rail) .card__image { padding: .5rem; }
    .product-grid:not(.product-grid--rail) .card__body { padding: .625rem .625rem .75rem; gap: .25rem; }
    .product-grid:not(.product-grid--rail) .card__title { font-size: .875rem; line-height: 1.4; }
    .product-grid:not(.product-grid--rail) .card__actions .btn { min-height: 38px; padding-inline: .5rem; font-size: .8125rem; }

    /* Sub-category chips: one swipeable row instead of eight wrapped rows. */
    .subcats {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: .25rem;
        scrollbar-width: none;
        /* centred rows would cut off the first chips once they scroll */
        justify-content: flex-start !important;
    }
    .subcats::-webkit-scrollbar { display: none; }
    .subcats > li { flex: none; }
    .subcat-chip { white-space: nowrap; }
}

/* Home page on phones */
@media (max-width: 639px) {
    /* The two hero cards side by side, headline and link only. */
    .hero-ecom__grid--wide .hero-mini-promo { grid-template-columns: 1fr 1fr; gap: .625rem; }
    .hero-ecom__grid--wide .mini-promo-card { padding: .875rem; }
    .hero-ecom__grid--wide .mini-promo-card__title { font-size: .9375rem; }
    .hero-ecom__grid--wide .mini-promo-card__desc { display: none; }
    .hero-ecom__grid--wide .mini-promo-card__cta { font-size: .8125rem; }

    /* Recommended-product tabs: one swipeable row. */
    .recommended-banner { padding: 1rem; }
    .recommended-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: calc(100% + 2rem);
        margin-inline: -1rem;
        padding-inline: 1rem;
        scrollbar-width: none;
    }
    .recommended-tabs::-webkit-scrollbar { display: none; }
    .rec-tab-btn { flex: none; white-space: nowrap; min-height: 36px; }

    /* Product picture banners: a swipeable row like the product rails. */
    .promo-banners__grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 86%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: .5rem;
        scroll-padding-inline: var(--gutter);
    }
    .promo-banners__grid > li { scroll-snap-align: start; }
}
@media (max-width: 639px) {
    /* "View all" is enough next to the rail's own heading. */
    .cat-rail-link__name { display: none; }
    .cat-rail-link { flex: none; white-space: nowrap; }
}

/* About page on phones */
@media (max-width: 768px) {
    /* The reversed story block had a more specific two-column rule that
       beat the one-column mobile rule. */
    .about-story--reverse .about-story__grid { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
    .about-contact-card { padding: 1.25rem; }
    .about-contact-card__actions { padding: 1rem; }
    .about-action-buttons .btn { padding-inline: 1rem; white-space: normal; text-align: center; }
}

/* Stainless-kitchen portfolio on phones: two small cards per row for the
   figures and the 41 client references (one per row was ~4,500px). */
@media (max-width: 640px) {
    .ck-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .ck-metric-card { padding: 1rem .75rem; }
    .ck-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
    .ck-client-card { padding: .75rem; }
    .ck-client-card__name { font-size: 14px; }
    .ck-client-card__sub { margin-bottom: .5rem; }
}

/* Product page: photo and summary side by side from tablet width. */
@media (min-width: 768px) and (max-width: 899px) {
    .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .product__details { grid-column: 1 / -1; }
}

/* Desktop mega-menu: centre it on the page, not on its menu item (centred
   on the item it hung 50px off the left edge at 1366px wide). */
@media (min-width: 1024px) {
    .site-nav__inner { position: relative; }
    .site-nav__item:has(> .site-subnav--mega) { position: static; }
    .site-subnav--mega { left: 50%; max-width: calc(100vw - 2rem); }
}