/* ==========================================================================
   AC Generators — acgenerators.co.za
   A sister company of IEP Power Products.

   Industrial red / graphite / white. The angled slash is the motif: it comes
   from the logo's underline and repeats as section markers, image corners and
   button hovers, which is what keeps the pages feeling like one thing.

   No pricing appears anywhere on this site, by design. Everything routes to a
   quote request.
   ========================================================================== */

:root {
    --red:        #e01b22;
    --red-dark:   #b0141a;
    --red-ink:    #8d1015;
    --ink:        #15181d;
    --ink-2:      #1e232b;
    --ink-3:      #2a313b;
    --steel:      #5c6672;
    --mute:       #8c96a3;
    --line:       #e3e7ec;
    --paper:      #f4f6f8;
    --white:      #ffffff;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --head: 'Barlow Condensed', 'Inter', sans-serif;

    --wrap: 1280px;
    --r: 4px;
    --shadow: 0 2px 10px rgba(14, 18, 24, .07);
    --shadow-lg: 0 18px 44px rgba(14, 18, 24, .16);
    --t: .22s cubic-bezier(.4, 0, .2, 1);
}

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

/* The browser hides [hidden] with its own `display: none`, which sits at the
   same specificity as any class of ours and therefore loses on source order.
   `.noparts { display: flex }` beat it, so the "no parts added yet" notice
   stayed on screen with a full basket underneath it. Every element the JS
   toggles with .hidden depends on this holding, so it is stated once, here,
   rather than guessed at per component. */
[hidden] { display: none !important; }

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

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--red-dark); }

h1, h2, h3, h4 {
    font-family: var(--head);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .005em;
    text-transform: uppercase;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* Focus — visible, and not only as a colour change. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; color: #fff; }

/* ── The slash motif ─────────────────────────────────────────────── */

.slash::before {
    content: '';
    display: inline-block;
    width: 6px; height: 1.05em;
    margin-right: 14px;
    background: var(--red);
    transform: skewX(-16deg);
    vertical-align: -.12em;
}

/* ── Top strip ───────────────────────────────────────────────────── */

.topbar {
    background: var(--ink);
    color: #cfd6de;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: #cfd6de; }
.topbar a:hover { color: #fff; }
.topbar__left { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { width: 14px; height: 14px; stroke: var(--red); flex-shrink: 0; }
.topbar__addr { color: var(--mute); display: inline-flex; align-items: center; gap: 7px; }
.topbar__addr svg { width: 14px; height: 14px; stroke: var(--red); flex-shrink: 0; }
.topbar__addr a { text-decoration: underline; text-underline-offset: 2px; }

/* Catch-all. An inline SVG with no width or height falls back to 300x150, and
   that has now bitten three separate times on this site. Anything inside the
   page chrome gets a sane default; components above override it. */
.topbar svg, .ftr svg, .crumbs svg, .card svg, .post svg, .empty svg,
.noprice svg, .toast svg, .sheet svg { width: 1em; height: 1em; }

/* ── Header ──────────────────────────────────────────────────────── */

.hdr { background: #fff; position: sticky; top: 0; z-index: 90; box-shadow: var(--shadow); }
.hdr .wrap { display: flex; align-items: center; gap: 26px; min-height: 78px; }

.logo { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.logo__mark {
    font-family: var(--head); font-size: 40px; font-weight: 700;
    color: var(--red); line-height: .9; letter-spacing: -.02em;
}
.logo__text { display: flex; flex-direction: column; line-height: .92; }
.logo__name { font-family: var(--head); font-size: 25px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.logo__rule { height: 5px; background: var(--red); margin-top: 3px; }

.nav { margin-left: auto; }
/* Phone-only furniture; the desktop bar has no drawer to close. */
.nav__head { display: none; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav__list > li { position: relative; }
.nav__list > li > a {
    display: block; padding: 12px 15px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink);
}
.nav__list > li > a:hover, .nav__list > li.is-active > a { color: var(--red); }
.nav__list > li.is-active > a { box-shadow: inset 0 -3px 0 var(--red); }

.nav__caret { width: 9px; height: 7px; margin-left: 5px; vertical-align: 1px; transition: transform var(--t); }
.nav__list > li.has-mega:hover .nav__caret { transform: rotate(180deg); }

/* ── Mega menu ───────────────────────────────────────────────────
   One panel holding every category, so somebody scanning for a part never
   has to click through to find out what is stocked.
   ───────────────────────────────────────────────────────────────── */

.mega {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 3px solid var(--red);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
    z-index: 95;
}
/* The panel is full-bleed, so it is positioned against the sticky header
   rather than the menu item it hangs from. */
.hdr { position: sticky; }
.nav__list > li.has-mega { position: static; }

/* Opened by JS rather than by :hover. A bare :hover rule fired the moment the
   cursor crossed the link, and because the panel is full-width and tall it then
   sat under the cursor and refused to go away — you could not scroll past it.
   initMega() adds an intent delay and closes it on scroll, Escape and
   click-away. :focus-within stays so keyboard users can still reach it. */
.nav__list > li.has-mega.is-mega-open .mega,
.nav__list > li.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__inner {
    max-width: var(--wrap); margin: 0 auto; padding: 30px 22px 26px;
    display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 38px;
}
.mega__title {
    font-size: 17px; letter-spacing: .07em; color: var(--ink);
    margin-bottom: 16px; padding-bottom: 9px;
    border-bottom: 2px solid var(--red); display: inline-block; line-height: 1.25;
}
.mega__cats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px 20px; align-content: start;
}
.mega__item {
    display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: start; gap: 2px 8px;
    padding: 7px 9px; border-radius: var(--r);
    color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.32;
    transition: background var(--t), color var(--t);
}
.mega__item:hover { background: var(--paper); color: var(--red); }
.mega__arrow { color: var(--red); font-size: 17px; line-height: 1.15; font-weight: 700; }

/* Wraps rather than truncates. Half the category names are long enough to be
   cut, and "Automatic Changeover Swit..." is not a useful menu entry. */
.mega__name { min-width: 0; }
.mega__n {
    color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums;
    background: var(--paper); border-radius: 9px; padding: 1px 7px; min-width: 26px; text-align: center;
}
.mega__item:hover .mega__n { background: #fff; color: var(--red); }

.mega__col--help {
    background: var(--paper); border-radius: var(--r); padding: 22px;
    align-self: start;
}
.mega__help { font-size: 13.5px; color: var(--steel); margin-bottom: 16px; line-height: 1.55; }
.mega__btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 11px 15px; margin-bottom: 8px; border-radius: var(--r);
    font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
    transition: all var(--t);
}
.mega__btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.mega__btn--wa { background: #25d366; color: #fff; }
.mega__btn--wa:hover { background: #1db955; color: #fff; }
.mega__btn--quote { background: var(--red); color: #fff; }
.mega__btn--quote:hover { background: var(--red-dark); color: #fff; }
.mega__btn--plain { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.mega__btn--plain:hover { border-color: var(--red); color: var(--red); }

.mega__usps { list-style: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.mega__usps li { display: flex; gap: 10px; margin-bottom: 11px; font-size: 13px; }
.mega__usps li:last-child { margin-bottom: 0; }
.mega__usps svg { width: 16px; height: 16px; stroke: var(--red); flex-shrink: 0; margin-top: 2px; }
.mega__usps strong { display: block; color: var(--ink); font-size: 13.5px; }
.mega__usps em { font-style: normal; color: var(--steel); }

.mega__all {
    grid-column: 1 / -1; text-align: center; padding: 13px;
    background: var(--ink); color: #fff; border-radius: var(--r);
    font-size: 13.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.mega__all:hover { background: var(--red); color: #fff; }

/* The ten featured categories get photo tiles; everything else lives behind
   one button through to the catalogue, where the filter holds all 31. */
.cats__cta { text-align: center; margin-top: 32px; }

.hdr__cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.burger {
    display: none; background: none; border: 0; cursor: pointer;
    padding: 9px; color: var(--ink);
}
.burger svg { width: 26px; height: 26px; }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border: 0; cursor: pointer;
    font-family: var(--font); font-size: 13.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    border-radius: var(--r); transition: all var(--t);
    position: relative; overflow: hidden;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(224, 27, 34, .3); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55); }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.btn--outline:hover { border-color: var(--red); color: var(--red); }
.btn--sm { padding: 10px 17px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
    position: relative; background: var(--ink); color: #fff;
    overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, var(--ink) 0%, rgba(21, 24, 29, .93) 38%, rgba(21, 24, 29, .45) 68%, rgba(21, 24, 29, .72) 100%);
}
.hero__inner { padding: 96px 0 104px; max-width: 680px; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: #fff; margin-bottom: 22px;
}
.hero__eyebrow::before { content: ''; width: 34px; height: 3px; background: var(--red); transform: skewX(-16deg); }
.hero h1 { font-size: clamp(2.9rem, 7vw, 5.1rem); margin-bottom: 20px; }
.hero h1 .l2 { color: var(--red); display: block; }
.hero h1 .l3 { display: block; -webkit-text-stroke: 1.5px rgba(255,255,255,.72); color: transparent; }
.hero__kicker {
    font-family: var(--head); font-size: 20px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: #d6dde5; margin-bottom: 14px;
}
.hero__lead { font-size: 17.5px; color: #c3ccd6; max-width: 540px; margin-bottom: 32px; }
.hero__btns { display: flex; gap: 13px; flex-wrap: wrap; }

.hero__rail {
    position: absolute; right: 0; top: 0; bottom: 0; width: 210px;
    background: rgba(21, 24, 29, .72); backdrop-filter: blur(3px);
    border-left: 3px solid var(--red);
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 20px 0;
}
.hero__rail a {
    display: flex; align-items: center; gap: 13px; padding: 13px 24px;
    color: #fff; font-family: var(--head); font-size: 17px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; transition: all var(--t);
}
.hero__rail a:hover { background: var(--red); color: #fff; padding-left: 30px; }
.hero__rail svg { width: 21px; height: 21px; stroke: var(--red); flex-shrink: 0; transition: stroke var(--t); }
.hero__rail a:hover svg { stroke: #fff; }

/* ── Assurance strip ─────────────────────────────────────────────── */

.strip { background: var(--ink-2); color: #fff; }
.strip__grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.strip__item {
    display: flex; align-items: center; gap: 15px; padding: 26px 24px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}
.strip__item:last-child { border-right: 0; }
.strip__item svg { width: 33px; height: 33px; stroke: var(--red); flex-shrink: 0; }
.strip__item b { display: block; font-family: var(--head); font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.strip__item span { font-size: 13.5px; color: #aab4c0; }

/* ── Sections ────────────────────────────────────────────────────── */

.sec { padding: 78px 0; }
.sec--paper { background: var(--paper); }
.sec--ink { background: var(--ink); color: #fff; }
.sec--ink p { color: #b9c2cd; }

.sec__head { margin-bottom: 38px; }
.sec__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.sec__head h2 { font-size: clamp(1.95rem, 4vw, 2.85rem); }
.sec__head p { color: var(--steel); margin-top: 9px; max-width: 620px; }
.sec--ink .sec__head p { color: #aab4c0; }

/* ── Category tiles ──────────────────────────────────────────────── */

.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 17px; }
.cat {
    position: relative; display: block; overflow: hidden;
    background: var(--ink); border-radius: var(--r); aspect-ratio: 4 / 3.3;
}
.cat img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: all .45s ease; }
.cat:hover img { opacity: .4; transform: scale(1.07); }
.cat__body {
    position: absolute; inset: auto 0 0 0; padding: 17px 16px;
    background: linear-gradient(transparent, rgba(21, 24, 29, .93) 45%);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cat__name { font-family: var(--head); font-size: 17.5px; font-weight: 700; color: #fff; text-transform: uppercase; line-height: 1.12; }
.cat__n { font-size: 12px; color: #9aa5b2; display: block; text-transform: none; font-family: var(--font); font-weight: 500; letter-spacing: 0; }
.cat__go {
    width: 29px; height: 29px; flex-shrink: 0; border-radius: 50%;
    background: var(--red); display: grid; place-items: center; transition: all var(--t);
}
.cat__go svg { width: 15px; height: 15px; stroke: #fff; }
.cat:hover .cat__go { transform: translateX(4px); background: #fff; }
.cat:hover .cat__go svg { stroke: var(--red); }

/* ── Product cards ───────────────────────────────────────────────── */

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

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    display: flex; flex-direction: column; overflow: hidden; transition: all var(--t);
    position: relative;
}
.card:hover { border-color: #cdd4dc; box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card__media {
    position: relative; aspect-ratio: 4 / 3; background: var(--paper);
    display: grid; place-items: center; overflow: hidden; padding: 12px;
}
.card__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__brand {
    position: absolute; top: 9px; left: 9px; z-index: 2;
    background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px;
}
.card__body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.card__sku {
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--red); font-variant-numeric: tabular-nums;
}
.card__title {
    font-family: var(--font); font-size: 14.5px; font-weight: 600; line-height: 1.38;
    text-transform: none; letter-spacing: 0; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card a.card__title:hover { color: var(--red); }
.card__desc {
    font-size: 13px; color: var(--steel); line-height: 1.52; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__foot { display: flex; gap: 8px; margin-top: 3px; }
.card__foot .btn { flex: 1; }

/* ── Catalogue toolbar ───────────────────────────────────────────── */

.toolbar {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 11px; margin-bottom: 26px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 13px; box-shadow: var(--shadow);
}
.field {
    display: flex; align-items: center; gap: 9px; position: relative;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r); padding: 0 13px; transition: all var(--t); min-width: 0;
}
.field:hover { border-color: #cdd4dc; }
/* align-self so the icon stays level with the text even if the row is set to
   stretch for some other reason. */
.field > svg { width: 17px; height: 17px; stroke: var(--steel); flex-shrink: 0; align-self: center; }
.field input, .field select {
    border: 0; outline: 0; background: none; padding: 12px 0; width: 100%; min-width: 0;
    font-family: var(--font); font-size: 14.5px; font-weight: 500; color: var(--ink);
}
.field input::placeholder { color: var(--mute); font-weight: 400; }

/* Native selects render as grey system widgets, and their option list is
   drawn by the operating system where no stylesheet can reach it. JS replaces
   them with .pick below; these rules cover the moment before that runs and
   the case where JS never does. */
.field select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer; padding-right: 26px; text-overflow: ellipsis;
}
.field--select::after {
    content: ''; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.field select::-ms-expand { display: none; }

/* Once enhanced, the chevron belongs to the button instead. */
.field--pick::after { display: none; }

/* ── Custom dropdown ─────────────────────────────────────────────── */

.pick { position: relative; width: 100%; min-width: 0; }
.pick select {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    pointer-events: none; clip: rect(0 0 0 0);
}
.pick__btn {
    width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; padding: 12px 24px 12px 0;
    font-family: var(--font); font-size: 14.5px; font-weight: 500; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick__btn::after {
    content: ''; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
    transform: translateY(-70%) rotate(45deg); transition: transform var(--t);
}
.pick.is-open .pick__btn::after { transform: translateY(-20%) rotate(225deg); }

.pick__list {
    position: absolute; z-index: 60; top: calc(100% + 9px); left: -14px; right: -14px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    max-height: 332px; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px;
}
.pick__opt {
    padding: 10px 12px; border-radius: var(--r); cursor: pointer;
    font-size: 14.5px; color: var(--ink-2); line-height: 1.35;
}
.pick__opt.is-act { background: var(--paper); color: var(--ink); }
.pick__opt.is-sel { color: var(--red); font-weight: 700; }
.pick__opt.is-sel.is-act { background: #fff4f4; }

/* The list is 332px tall against a 54px row, so the scrollbar is always in
   play and worth making look deliberate. */
.pick__list::-webkit-scrollbar { width: 10px; }
.pick__list::-webkit-scrollbar-thumb { background: #d4dae1; border-radius: 6px; border: 3px solid #fff; }
.pick__list::-webkit-scrollbar-thumb:hover { background: #b9c1cb; }

/* Near the right edge of the viewport the list would otherwise run off. */
@media (max-width: 720px) {
    .pick__list { left: -13px; right: -13px; max-height: 60vh; }
}

/* Inside the filter sheet the list expands in place rather than floating.
   The sheet panel scrolls, and a scroll container clips anything absolutely
   positioned inside it — which left two options visible out of thirty-one. */
/* Only the dropdown fields stretch, so their list can span the full width of
   the box. Applying it to every .field pushed the search magnifier to the top
   of its row instead of sitting level with the text. */
.sheet .field--select { align-items: stretch; }
.sheet .pick { display: flex; flex-direction: column; }
.sheet .pick__list {
    position: static; margin: 0 -13px -1px; left: auto; right: auto;
    border: 0; border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: none; max-height: 300px;
}
.sheet .pick__btn::after { top: 23px; }

.field:focus-within {
    border-color: var(--red); background: #fff;
    box-shadow: 0 0 0 3px rgba(224, 27, 34, .12);
}

/* Any filter that is actually doing something reads as active. */
.field.is-set { border-color: var(--red); background: #fff; }
.field.is-set::after { border-color: var(--red); }
.field.is-set select { color: var(--red); font-weight: 600; }

.count { font-size: 14px; color: var(--steel); white-space: nowrap; }
.count b { color: var(--ink); }

.empty { text-align: center; padding: 72px 20px; color: var(--steel); }
.empty svg { width: 46px; height: 46px; stroke: var(--mute); margin: 0 auto 16px; }
.empty h3 { font-size: 23px; margin-bottom: 7px; color: var(--ink); }

.pager { display: flex; justify-content: center; gap: 7px; margin-top: 38px; flex-wrap: wrap; }
.pager button, .pager a {
    min-width: 42px; padding: 10px 13px; border: 1px solid var(--line); background: #fff;
    font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--ink);
    border-radius: var(--r); cursor: pointer; transition: all var(--t);
}
.pager button:hover:not([disabled]), .pager a:hover { border-color: var(--red); color: var(--red); }
.pager .is-on { background: var(--red); border-color: var(--red); color: #fff; }
.pager button[disabled] { opacity: .4; cursor: not-allowed; }

/* ── Page header ─────────────────────────────────────────────────── */

.phead {
    background: var(--ink); color: #fff; padding: 52px 0 46px;
    position: relative; overflow: hidden;
}
.phead::before {
    content: ''; position: absolute; top: 0; right: -90px; bottom: 0; width: 320px;
    background: var(--red); opacity: .13; transform: skewX(-16deg);
}
.phead h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); position: relative; }
.phead p { color: #b3bcc7; margin-top: 10px; max-width: 640px; position: relative; }
.crumbs { font-size: 13px; color: var(--mute); margin-bottom: 14px; position: relative; }
.crumbs a { color: #c6ced8; }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ── Product detail ──────────────────────────────────────────────── */

.pdp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 46px; align-items: start; }
.pdp__media {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
    padding: 30px; display: grid; place-items: center; aspect-ratio: 1 / .88;
}
.pdp__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.pdp__brand {
    display: inline-block; background: var(--ink); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 2px; margin-bottom: 13px;
}
.pdp h1 { font-family: var(--font); font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; text-transform: none; letter-spacing: -.01em; line-height: 1.22; margin-bottom: 16px; }
.pdp__lead { font-size: 16.5px; color: var(--steel); margin-bottom: 26px; }

.specs { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 26px; }
.specs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-bottom: 1px solid var(--line); }
.specs__row:last-child { border-bottom: 0; }
.specs__row dt { padding: 12px 16px; background: var(--paper); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.specs__row dd { padding: 12px 16px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.noprice {
    display: flex; gap: 13px; align-items: flex-start;
    background: #fff6f6; border-left: 3px solid var(--red);
    padding: 15px 17px; border-radius: 0 var(--r) var(--r) 0; margin-bottom: 22px;
}
.noprice svg { width: 20px; height: 20px; stroke: var(--red); flex-shrink: 0; margin-top: 2px; }
.noprice p { font-size: 14px; color: var(--ink-2); }
.noprice b { display: block; margin-bottom: 2px; }

/* Quantity, Add to Quote and WhatsApp share one row. The two buttons split the
   space left after the stepper, and wrap onto their own line on a phone rather
   than squeezing to nothing. */
.qtyrow { display: flex; gap: 11px; align-items: stretch; margin-bottom: 15px; flex-wrap: wrap; }
.qtyrow .btn { flex: 1 1 190px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qty button {
    width: 42px; border: 0; background: var(--paper); cursor: pointer;
    font-size: 19px; font-weight: 700; color: var(--ink); transition: background var(--t);
}
.qty button:hover { background: var(--line); }
.qty input {
    width: 58px; border: 0; outline: 0; text-align: center;
    font-family: var(--font); font-size: 15px; font-weight: 700; padding: 12px 0;
    font-variant-numeric: tabular-nums;
}
/* ── Quote basket ────────────────────────────────────────────────── */

/* .btn sets overflow:hidden for its hover effect, which was clipping the
   count badge in half. The basket button does not need that clipping. */
.basket-btn { position: relative; overflow: visible; }
.basket-btn .pip {
    position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px;
    background: var(--red); color: #fff; border-radius: 10px;
    font-size: 11px; font-weight: 700; display: grid; place-items: center;
    padding: 0 5px; border: 2px solid #fff; font-variant-numeric: tabular-nums;
}
.basket-btn.is-empty .pip { display: none; }

.qlist { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 15px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.qrow:last-child { border-bottom: 0; }
.qrow__img { width: 72px; height: 58px; background: var(--paper); border-radius: 3px; display: grid; place-items: center; padding: 5px; }
.qrow__img img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.qrow__sku { font-size: 11.5px; font-weight: 700; color: var(--red); letter-spacing: .07em; }
.qrow__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.qrow__brand { font-size: 12.5px; color: var(--mute); }
.qrow__rm { background: none; border: 0; cursor: pointer; color: var(--mute); padding: 7px; border-radius: 3px; transition: all var(--t); }
.qrow__rm:hover { color: var(--red); background: #fff1f1; }
.qrow__rm svg { width: 17px; height: 17px; }

/* ── Forms ───────────────────────────────────────────────────────── */

.form { display: grid; gap: 15px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.lab { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--steel); margin-bottom: 6px; }
.lab .req { color: var(--red); }
.inp {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
    font-family: var(--font); font-size: 15px; color: var(--ink); background: #fff;
    transition: all var(--t);
}
.inp:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px rgba(224, 27, 34, .1); }
textarea.inp { min-height: 118px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hint { font-size: 13.5px; color: var(--steel); margin-top: 7px; line-height: 1.55; }

/* Shown on the quote page when the basket is empty. Deliberately an
   invitation rather than the dead-end "your basket is empty" panel. */
.noparts {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--paper); border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    padding: 18px 20px; border-radius: 0 var(--r) var(--r) 0; margin-bottom: 8px;
}
.noparts > svg { width: 21px; height: 21px; stroke: var(--red); flex-shrink: 0; margin-top: 2px; }
.noparts b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.noparts p { font-size: 14.5px; color: var(--steel); margin-bottom: 14px; }

.note { padding: 14px 16px; border-radius: var(--r); font-size: 14.5px; font-weight: 500; }
.note--ok { background: #eaf7ee; color: #16653a; border-left: 3px solid #1a9a52; }
.note--bad { background: #fdeeee; color: #8d1015; border-left: 3px solid var(--red); }

/* ── People (directors on the contact page) ──────────────────────── */

.people { list-style: none; display: grid; gap: 9px; }
.person {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 15px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r);
    transition: border-color var(--t);
}
.person:hover { border-color: #cdd4dc; }
.person__avatar {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    background: var(--ink); color: #fff;
    display: grid; place-items: center;
    font-family: var(--head); font-size: 16px; font-weight: 700; letter-spacing: .04em;
}
.person__body { display: flex; flex-direction: column; min-width: 0; }
.person__name { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.person__mail {
    font-size: 14px; color: var(--red); word-break: break-all;
}
.person__mail:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Three across on their own band, rather than stacked under a short column. */
.people--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.people--row .person { padding: 18px; }
@media (max-width: 860px) { .people--row { grid-template-columns: minmax(0, 1fr); } }

/* ── Map ─────────────────────────────────────────────────────────── */

.mapsec { background: var(--ink); }
.mapsec__facade {
    position: relative; min-height: 340px;
    display: grid; place-items: center; text-align: center;
    padding: 56px 22px; overflow: hidden;
}
/* The slash motif, so the panel is not a plain dark box before the map loads. */
.mapsec__facade::before {
    content: ''; position: absolute; inset: 0;
    background:
        repeating-linear-gradient(106deg, rgba(255,255,255,.035) 0 2px, transparent 2px 92px),
        radial-gradient(60% 120% at 70% 20%, rgba(224,27,34,.22), transparent 60%);
}
.mapsec__body { position: relative; max-width: 560px; }
.mapsec__body > svg { width: 34px; height: 34px; stroke: var(--red); margin: 0 auto 14px; }
.mapsec__body h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: #fff; margin-bottom: 10px; }
.mapsec__body p { color: #aab4c0; font-size: 15px; margin-bottom: 22px; }
.mapsec__btns { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

.mapsec iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ── Articles ────────────────────────────────────────────────────── */

.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.post { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: all var(--t); position: relative; }

/* "Read article" is a span, so only the heading used to be clickable. Rather
   than add a second link to the same article, the heading's link is stretched
   over the whole card: image, excerpt and "Read article" all open it, and
   screen readers still announce one link, not two. */
.post__body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.post__img { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: all .45s ease; }
.post:hover .post__img img { transform: scale(1.06); opacity: 1; }
.post__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__tag { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.post__body h3 { font-family: var(--font); font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: -.005em; line-height: 1.32; }
.post__body h3 a { color: var(--ink); }
.post__body h3 a:hover { color: var(--red); }
.post__body p { font-size: 14.5px; color: var(--steel); flex: 1; }
/* The arrow only had a size when it sat inside .btn. On its own it inherited
   the SVG default of 300x150 and rendered enormous underneath the card. */
.post__more {
    font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 7px; color: var(--red);
}
.post__more svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--t); }
.post { cursor: pointer; }
.post:hover .post__more { color: var(--red-dark); }
.post:hover .post__more svg { transform: translateX(4px); }

/* Same trap anywhere else an icon sits outside a button. */
.sec__head svg, .article__cta svg { width: 17px; height: 17px; }

/* ── Prose + sidebar ─────────────────────────────────────────────
   A reading column caps at about 760px for legibility. On its own inside a
   1280px container that left half the page empty and the page looking
   unfinished, so the space carries a sidebar instead of nothing.
   ───────────────────────────────────────────────────────────────── */

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 54px;
    align-items: start;
}

.article { max-width: 760px; margin: 0; }

.side { display: grid; gap: 16px; position: sticky; top: 98px; }
.side__card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 22px;
}
.side__card--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.side__card--dark p { color: #aab4c0; font-size: 14.5px; margin-bottom: 16px; }
.side__title {
    font-size: 16px; letter-spacing: .06em; margin-bottom: 14px;
    padding-bottom: 9px; border-bottom: 2px solid var(--red);
    display: inline-block; line-height: 1.25;
}
.side__card--dark .side__title { color: #fff; }

.side__stats { display: grid; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.side__stats > div { background: #fff; padding: 11px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.side__stats dt { font-size: 13px; color: var(--steel); }
.side__stats dd { font-family: var(--head); font-size: 20px; font-weight: 700; color: var(--ink); }

.side__list { list-style: none; display: grid; gap: 11px; margin-bottom: 14px; }
.side__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.side__list svg { width: 16px; height: 16px; stroke: var(--red); flex-shrink: 0; margin-top: 3px; }
.side__list--plain li { display: block; }
.side__list--plain a { color: var(--ink-2); font-weight: 500; }
.side__list--plain a:hover { color: var(--red); }
.side__hours { font-size: 13.5px; color: var(--steel); margin-bottom: 16px; }

.side__posts { list-style: none; display: grid; gap: 2px; }
.side__posts a { display: block; padding: 10px 11px; margin: 0 -11px; border-radius: var(--r); transition: background var(--t); }
.side__posts a:hover { background: var(--paper); }
.side__posts-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
.side__posts-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.38; }

@media (max-width: 1040px) {
    .layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .article { max-width: none; }
    .side { position: static; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
}
.article__meta { font-size: 13.5px; color: var(--mute); margin-bottom: 26px; }
.article h2 { font-family: var(--font); font-size: 26px; font-weight: 700; text-transform: none; letter-spacing: -.01em; margin: 38px 0 13px; }
.article h3 { font-family: var(--font); font-size: 19.5px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 28px 0 10px; }
.article p { margin-bottom: 17px; font-size: 16.5px; line-height: 1.78; }
.article ul, .article ol { margin: 0 0 17px 22px; }
.article li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.7; }
.article__lead { font-size: 19px; color: var(--steel); line-height: 1.7; margin-bottom: 26px; }
.article blockquote {
    border-left: 3px solid var(--red); padding: 4px 0 4px 20px; margin: 26px 0;
    font-size: 18px; color: var(--ink-2); font-style: italic;
}
.article__cta { background: var(--paper); border-radius: var(--r); padding: 28px; margin: 38px 0 0; text-align: center; }
.article__cta h3 { margin-top: 0; }
.article__cta p { color: var(--steel); }

/* ── Split CTA ───────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split__half { padding: 62px 46px; position: relative; overflow: hidden; }
.split__half--red { background: var(--red); color: #fff; }
.split__half--red::before {
    content: ''; position: absolute; top: 0; right: -70px; bottom: 0; width: 170px;
    background: rgba(255, 255, 255, .09); transform: skewX(-16deg);
}
.split__half--ink { background: var(--ink-2); color: #fff; }
.split__half h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 12px; position: relative; }
.split__half p { margin-bottom: 22px; position: relative; max-width: 440px; }
.split__half--red p { color: rgba(255, 255, 255, .9); }
.split__half--ink p { color: #b3bcc7; }
.split__half .btn { position: relative; }

/* ── Footer ──────────────────────────────────────────────────────── */

.ftr { background: var(--ink); color: #9aa5b2; padding: 56px 0 0; font-size: 14.5px; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 38px; padding-bottom: 42px; }
.ftr h4 { font-size: 15.5px; color: #fff; letter-spacing: .09em; margin-bottom: 17px; padding-bottom: 9px; border-bottom: 2px solid var(--red); display: inline-block; }
.ftr ul { list-style: none; }
.ftr li { margin-bottom: 9px; }
.ftr a { color: #9aa5b2; }
.ftr a:hover { color: #fff; }
.ftr__logo { margin-bottom: 15px; }
.ftr__logo .logo__name { color: #fff; }
.ftr__contact li { display: flex; gap: 10px; align-items: flex-start; }
.ftr__contact svg { width: 16px; height: 16px; stroke: var(--red); flex-shrink: 0; margin-top: 4px; }
.ftr__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08); padding: 19px 0;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px;
}
.ftr__legal { display: flex; gap: 18px; }
.ftr__legal a { color: inherit; }
.ftr__legal a:hover { color: var(--red); }

/* ── Floating WhatsApp ───────────────────────────────────────────── */

.wa {
    position: fixed; right: 20px; bottom: 20px; z-index: 80;
    width: 54px; height: 54px; border-radius: 50%; background: #25d366;
    display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .26);
    transition: transform var(--t);
}
.wa:hover { transform: scale(1.08); }
.wa svg { width: 29px; height: 29px; fill: #fff; }

/* ── Floating filter pill ────────────────────────────────────────
   On a long catalogue the search box scrolls away within one screen. This
   appears once it has, sitting directly above the WhatsApp button, and opens
   the same controls in a sheet.
   ───────────────────────────────────────────────────────────────── */

/* Same circle as the WhatsApp button it sits above. */
.filterfab {
    position: fixed; right: 20px; bottom: 86px; z-index: 81;
    width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
    cursor: pointer; background: var(--ink); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .26);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t);
}
.filterfab.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.filterfab:hover { background: var(--red); transform: scale(1.08); }
.filterfab svg { width: 23px; height: 23px; }

/* The label is for screen readers only — the button is an icon now. */
.filterfab__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.filterfab .pip {
    position: absolute; top: -3px; right: -3px;
    min-width: 21px; height: 21px; border-radius: 11px; background: var(--red);
    border: 2px solid #fff;
    display: none; place-items: center; font-size: 11px; font-weight: 700; padding: 0 4px;
}
.filterfab.has-filters .pip { display: grid; }

.sheet {
    position: fixed; inset: 0; z-index: 130;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; visibility: hidden; transition: all var(--t);
}
.sheet.is-on { opacity: 1; visibility: visible; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(10, 12, 15, .55); }
.sheet__panel {
    position: relative; width: min(560px, 100%);
    background: #fff; border-radius: 14px 14px 0 0;
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-lg);
    transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .3, 1);
    max-height: 86vh; overflow-y: auto;
}
.sheet.is-on .sheet__panel { transform: translateY(0); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sheet__head h3 { font-size: 22px; }
.sheet__close {
    background: var(--paper); border: 0; cursor: pointer; width: 34px; height: 34px;
    border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: all var(--t);
}
.sheet__close:hover { background: var(--line); }
.sheet__close svg { width: 17px; height: 17px; }
/* The real toolbar is moved in here rather than duplicated, so it arrives
   wearing its horizontal grid. In a sheet it wants to be a stack. */
.sheet .toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px; margin: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
}
.sheet .toolbar .field { background: #fff; }
.sheet .toolbar .count {
    padding-top: 2px; font-size: 15px; white-space: normal;
}

.sheet__foot { display: flex; gap: 10px; margin-top: 20px; }
.sheet__foot .btn { flex: 1; }

@media (min-width: 721px) {
    .sheet { align-items: center; }
    .sheet__panel { border-radius: var(--r); max-height: 82vh; }
}

/* ── Toast ───────────────────────────────────────────────────────── */

.toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%);
    background: var(--ink); color: #fff; padding: 14px 22px; border-radius: var(--r);
    box-shadow: var(--shadow-lg); z-index: 120; display: flex; align-items: center; gap: 11px;
    font-size: 14.5px; font-weight: 600; transition: transform .3s cubic-bezier(.2, .8, .3, 1);

    /* width:max-content is doing real work. With only `left: 50%` set, the
       available width for shrink-to-fit runs from the midpoint to the right
       edge — half the screen — so on a phone the message wrapped onto four
       lines inside a 195px box. max-content sizes it to the text instead, and
       max-width still keeps it on screen. */
    width: max-content;
    max-width: calc(100vw - 32px);
}
.toast span { min-width: 0; }
.toast.is-up { transform: translate(-50%, 0); }
.toast svg { width: 19px; height: 19px; stroke: #4ade80; flex-shrink: 0; }
.toast a { color: #fff; text-decoration: underline; white-space: nowrap; }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1120px) {
    .hero__rail { display: none; }
    .hero__inner { padding: 76px 0 84px; }
}

@media (max-width: 980px) {
    .strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strip__item:nth-child(2) { border-right: 0; }
    .strip__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .pdp { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
    .split { grid-template-columns: minmax(0, 1fr); }
    .split__half { padding: 46px 28px; }
    .toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .toolbar .count { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    /* The strip duplicates what is in the footer and eats 81px of a phone
       screen before anything useful appears. */
    .topbar { display: none; }

    .burger { display: block; margin-left: auto; }

    /* Pushes the buttons to the right edge. On desktop that job is done by
       .nav { margin-left: auto }, but here the nav is position:fixed and so
       out of the flex flow — leaving the logo and buttons bunched on the left
       with the row ending around 60% of the screen. */
    .hdr__cta { margin-left: auto; }

    /* Clear of the WhatsApp and filter buttons in the bottom-right corner. */
    .toast { bottom: 92px; }

    /* :not(.pip) matters. The counter is itself a <span>, so hiding every span
       in these buttons hid the number of parts in the basket along with the
       labels. */
    .hdr__cta .btn span:not(.pip) { display: none; }
    .hdr__cta .btn { padding: 11px 13px; }

    /* The duplicate. Both buttons go to /quote.html; with labels hidden they
       were two icons doing one job. */
    .hdr__quote { display: none; }

    /* Left as the only quote control, it takes the emphasis. */
    .basket-btn { background: var(--red); border-color: var(--red); color: #fff; }
    .basket-btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
    .basket-btn .pip { background: #fff; color: var(--red); border-color: var(--red); }

    /* Full width. A 330px drawer left a strip of page beside it and read as
       half-finished on a narrow screen. */
    .nav {
        position: fixed; inset: 0; width: 100%;
        background: #fff; box-shadow: var(--shadow-lg); z-index: 110;
        transform: translateX(100%);
        overflow-y: auto; padding: 0 0 24px; margin-left: 0;
        overscroll-behavior: contain;

        /* Parked off-screen it was still visible, so iOS Safari let you pan
           the page sideways to reach it. A fixed element is not clipped by
           body{overflow-x:hidden}, so the drawer has to take itself out of
           play. visibility flips only after the slide-out finishes, which
           keeps the animation and stops the panning. It also keeps the
           closed menu's links out of the tab order. */
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }
    .nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s ease, visibility 0s linear 0s;
    }

    /* The panel now covers the burger that opened it, so it carries its own
       way out. */
    .nav__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 22px; border-bottom: 1px solid var(--line);
        position: sticky; top: 0; background: #fff; z-index: 2;
    }
    .nav__head-title {
        font-family: var(--head); font-size: 20px; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
    }
    .nav__close {
        width: 40px; height: 40px; border: 0; border-radius: 50%;
        background: var(--paper); color: var(--ink); cursor: pointer;
        display: grid; place-items: center;
    }
    .nav__close:hover { background: var(--line); }
    .nav__close svg { width: 19px; height: 19px; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__list > li > a { padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 15px; }

    /* On a phone the mega panel becomes a plain accordion list. The help
       column and its buttons are dropped: the header already carries Request
       a Quote, and the WhatsApp button floats on every screen. */
    .mega {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border-top: 0; background: var(--paper); display: none;
    }
    .nav__list > li.is-open .mega { display: block; }
    .mega__inner { display: block; padding: 0; max-width: none; }
    .mega__col--help, .mega__title { display: none; }
    .mega__cats { display: block; }
    .mega__item { border-radius: 0; padding: 12px 22px 12px 30px; border-bottom: 1px solid var(--line); }
    .mega__all { display: block; margin: 10px 22px 16px; border-radius: var(--r); }
    /* Below .hdr's z-index, not above it. .hdr is sticky with z-index 90, which
       makes it a stacking context, so the nav's z-index 110 only competes
       inside the header. A scrim at 100 was therefore compared against 90 and
       painted over the whole menu — the links looked fine and swallowed every
       tap. elementFromPoint on a menu link returned the scrim, not the link. */
    .navscrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 85; opacity: 0; visibility: hidden; transition: all var(--t); }
    .navscrim.is-on { opacity: 1; visibility: visible; }
}

@media (max-width: 720px) {
    .sec { padding: 54px 0; }
    .hero__inner { padding: 60px 0 64px; }
    .row2 { grid-template-columns: minmax(0, 1fr); }
    .grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 13px; }
    .cats { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }
    .toolbar { grid-template-columns: minmax(0, 1fr); }
    .qrow { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 11px; }
    .qrow__img { width: 56px; height: 48px; }
    .specs__row { grid-template-columns: minmax(0, 1fr); }
    .specs__row dt { padding-bottom: 2px; }
    .ftr__grid { grid-template-columns: minmax(0, 1fr); }
    .card__body { padding: 13px 13px 14px; }

    /* One full-width row each: in a 2-up grid the icon eats the gutter and
       leaves the copy about 120px, which wraps every line to three words. */
    .strip__grid { grid-template-columns: minmax(0, 1fr); }
    .strip__item {
        gap: 14px; padding: 16px 2px;
        border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .strip__item:last-child { border-bottom: 0; }
    .strip__item svg { width: 28px; height: 28px; }
    .strip__item b { font-size: 16px; }
    .strip__item span { font-size: 13px; }
}

@media (max-width: 420px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
    .logo__mark { font-size: 34px; }
    .logo__name { font-size: 21px; }
}

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

@media print {
    .topbar, .hdr, .ftr, .wa, .hero__rail, .btn { display: none !important; }
}