/* =========================================================================
   Opt2Deal design layer
   -------------------------------------------------------------------------
   Loaded AFTER the template's style.css so it wins the cascade without
   editing 28k lines of grocery theme.

   House style: a component distributor, not a supermarket. Dense, data-first,
   quiet surfaces, part numbers in mono, one accent colour used sparingly for
   action rather than decoration.

   Everything here is namespaced `o2d-` so it can never collide with the theme.
   ========================================================================= */

:root {
    /* ---- brand ------------------------------------------------------- */
    /* Cold-start defaults only. The brand colour is owned by the admin panel
       and arrives with the document -- see components/common/brand.ts, which
       inlines it into <head> on the server. These values are what gets painted
       in the one case that pipeline cannot cover: the API being unreachable.

       They must therefore MATCH what admin serves, or an unreachable API is a
       visible colour change rather than a silent fallback. Admin is set to the
       design's orange:

           colors.primary       #fc8a35
           colors.primary_light #fef4e8

       primary_light matters. brandVars() derives the wash by lightening the
       primary 85%, which on an already-light orange clips the red and green
       channels and lands on a sickly yellow (#ffff62). The design's own wash
       is #fef4e8, so admin carries it explicitly and the derivation is never
       used. Everything else below is derived from #fc8a35 exactly as
       brandVars() does, so nothing is left to swap once the config arrives. */
    --o2d-accent: #fc8a35;
    --o2d-accent-hover: #de792f;
    --o2d-accent-ink: #bd6828;
    --o2d-accent-wash: #fef4e8;
    --o2d-accent-ring: rgba(252, 138, 53, .22);
    --o2d-secondary: #232321;

    /* The bundled theme reads this one throughout. Restating it here -- this
       file loads after style.css -- keeps theme-owned components on brand. */
    --color-primary: #fc8a35;

    /* ---- design palette ---------------------------------------------- */
    /* Fixed colours from the Figma that are NOT the brand colour and must not
       follow it: card chrome, the dark footer, and the pastel tints behind
       product imagery. Changing the accent in admin leaves these alone, which
       is the intent -- they are the neutral furniture the accent sits on. */
    --o2d-card: #fefdff;
    --o2d-card-line: #eef2f5;
    --o2d-strip: #f3f3f1;
    --o2d-dark: #232321;
    --o2d-gold: #fbbc01;

    /* Product-tile backdrops, cycled per card so a grid of near-identical
       black chips still reads as separate items. */
    --o2d-tint-1: #fef4e8;
    --o2d-tint-2: #d9edfd;
    --o2d-tint-3: #f2f2fc;
    --o2d-tint-4: #f3f7ee;
    --o2d-tint-5: #cae5fd;

    /* ---- ink / surface ----------------------------------------------- */
    --o2d-ink: #10151b;
    --o2d-ink-2: #41505e;
    --o2d-ink-3: #6b7a89;
    --o2d-surface: #ffffff;
    --o2d-surface-2: #f6f8fa;
    --o2d-surface-3: #eef2f6;
    --o2d-line: #e3e8ee;
    --o2d-line-2: #d7dee6;
    --o2d-line-strong: #c7d0da;

    /* ---- status ------------------------------------------------------ */
    --o2d-ok: #12805c;
    --o2d-ok-wash: #e8f6f0;
    --o2d-warn: #b45309;
    --o2d-warn-wash: #fdf3e7;
    --o2d-danger: #c2321f;
    --o2d-danger-wash: #fdeeec;

    /* ---- spacing scale (4px base) ------------------------------------ */
    --o2d-1: 4px;
    --o2d-2: 8px;
    --o2d-3: 12px;
    --o2d-4: 16px;
    --o2d-5: 24px;
    --o2d-6: 32px;
    --o2d-7: 48px;
    --o2d-8: 64px;

    /* ---- type -------------------------------------------------------- */
    /* The families are loaded by next/font in app/layout.tsx, which defines
       --o2d-font-display and --o2d-font-body on <body>. The fallbacks here are
       what applies if that ever fails to mount. */
    --o2d-display: var(--o2d-font-display), "Bricolage Grotesque", system-ui, sans-serif;
    --o2d-body: var(--o2d-font-body), "Hanken Grotesk", system-ui, sans-serif;
    --o2d-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --o2d-fs-xs: 12px;
    --o2d-fs-sm: 13px;
    --o2d-fs-base: 14px;
    --o2d-fs-md: 16px;
    --o2d-fs-lg: 20px;
    --o2d-fs-xl: 26px;
    --o2d-fs-2xl: 32px;

    /* ---- shape ------------------------------------------------------- */
    --o2d-r-sm: 4px;
    --o2d-r: 6px;
    --o2d-r-lg: 10px;
    --o2d-shadow: 0 1px 2px rgba(16, 21, 27, .06), 0 1px 3px rgba(16, 21, 27, .04);
    --o2d-shadow-lg: 0 4px 12px rgba(16, 21, 27, .08);
}

/* =========================================================================
   Page frame and typography
   -------------------------------------------------------------------------
   The theme is drawn in Barlow at a 1696px container. The design is drawn in
   Bricolage Grotesque / Hanken Grotesk at 1140. Both are global, so they are
   reset here once rather than fought per component.

   These override style.css by load order, not by weight: every selector below
   matches the theme's own specificity exactly, and this file is linked after
   it. That is deliberate -- an !important here would be unanswerable by the
   component rules further down this same file.
   ========================================================================= */

/* The design's content column -- 1355px, matching the Figma frame (Nav and
   the hero banners both measure 1355 wide there). The theme's 1696/1140 both
   made every measurement in the Figma wrong, so it is replaced outright
   rather than scaled. Left as a max-width so narrow viewports still get the
   full width minus the mobile gutter set further down this file. */
.container {
    max-width: 1355px;
}

/* The theme hardcodes "Barlow" on body and on the heading group rather than
   reading its own --font-primary, so redefining that variable alone would
   miss both. They are restated here, and the variable is updated too for the
   handful of components that do read it. */
:root {
    --font-primary: var(--o2d-body);
    --font-secondary: var(--o2d-display);
}

body {
    font-family: var(--o2d-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--o2d-display);
}

/* Form controls do not inherit the document font on their own, and the design
   sets them in the body face -- placeholder text in a heading face reads as a
   label rather than an invitation to type. */
input, select, textarea {
    font-family: var(--o2d-body);
}

/* Buttons and nav are display-face in the design: short, set tight, and
   carrying the UI rather than prose. */
button,
.rts-btn,
a.rts-btn {
    font-family: var(--o2d-display);
}

/* =========================================================================
   Primitives
   ========================================================================= */

.o2d-mono {
    font-family: var(--o2d-mono);
    font-variant-ligatures: none;
    letter-spacing: -.01em;
}

/* Vertical rhythm without per-element margins. */
.o2d-stack > * + * { margin-top: var(--o2d-4); }
.o2d-stack-sm > * + * { margin-top: var(--o2d-2); }
.o2d-stack-lg > * + * { margin-top: var(--o2d-6); }

/* Horizontal group that wraps instead of overflowing. */
.o2d-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o2d-3);
}
.o2d-cluster-sm { gap: var(--o2d-2); }
.o2d-spacer { margin-left: auto; }

.o2d-muted { color: var(--o2d-ink-3); }
.o2d-strong { color: var(--o2d-ink); font-weight: 600; }

/* Clamp long part numbers / descriptions to a fixed number of lines. */
.o2d-clamp-1,
.o2d-clamp-2,
.o2d-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.o2d-clamp-1 { -webkit-line-clamp: 1; }
.o2d-clamp-2 { -webkit-line-clamp: 2; }
.o2d-clamp-3 { -webkit-line-clamp: 3; }

/* =========================================================================
   Page shell
   ========================================================================= */

.o2d-page {
    background: var(--o2d-surface-2);
    padding-block: var(--o2d-6) var(--o2d-8);
    min-height: 60vh;
}

.o2d-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--o2d-3);
    margin-bottom: var(--o2d-5);
}

.o2d-page__title {
    margin: 0;
    font-size: var(--o2d-fs-xl);
    line-height: 1.2;
    font-weight: 700;
    color: var(--o2d-ink);
}

.o2d-page__sub {
    margin: var(--o2d-1) 0 0;
    font-size: var(--o2d-fs-base);
    color: var(--o2d-ink-3);
}

.o2d-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o2d-2);
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-3);
    margin-bottom: var(--o2d-3);
}
.o2d-crumb a { color: var(--o2d-ink-3); }
.o2d-crumb a:hover { color: var(--o2d-accent); }
.o2d-crumb [aria-current] { color: var(--o2d-ink); font-weight: 500; }

/* Shop page's "Home / Shop / <category>" trail -- the theme's own component
   (`.navigator-breadcrumb-wrapper`, not `.o2d-crumb` above), with no font
   size of its own, so it ran at the body's default. */
.navigator-breadcrumb-wrapper {
    gap: var(--o2d-4);
    padding: var(--o2d-3) 0;
    font-size: var(--o2d-fs-base);
}

/* =========================================================================
   Surfaces
   ========================================================================= */

.o2d-card {
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    padding: var(--o2d-5);
}
.o2d-card--flush { padding: 0; overflow: hidden; }
.o2d-card--raised { box-shadow: var(--o2d-shadow); }

.o2d-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o2d-3);
    padding: var(--o2d-4) var(--o2d-5);
    border-bottom: 1px solid var(--o2d-line);
    font-weight: 600;
    color: var(--o2d-ink);
}
.o2d-card__body { padding: var(--o2d-5); }

/* =========================================================================
   Product grid + card
   -------------------------------------------------------------------------
   The column count is pinned to 1, 2, 4 or 5 — never 3, 6 or 7.

   It used to be `auto-fill minmax(220px, 1fr)`, which fits as many columns as
   the width allows. That reflows nicely but makes the count unpredictable, and
   a listing only ends on a full row when the column count divides the page
   size — with 20 products, any count other than 1, 2, 4, 5 or 10 leaves a
   part-filled last row.

   The thresholds below are measured against the 1140px container the design
   uses. They were previously measured against the theme's 1696 one; if the
   container width changes again, re-measure them rather than scaling them.

   Restricting the count to divisors of 20 removes the stray row at every size,
   so long as each grid renders a multiple of 20 cards — see the page-size
   constants. The short bands carry a `--cols-N` class instead, which sets the
   widest step to a number their own item count divides; `--4up`/`--3up`/
   `--2up` are fixed-count rows that keep their own breakpoints, so they opt
   out of all of this.

   The steps are container queries, not media queries, because the same
   viewport gives different widths depending on whether the page has a sidebar:
   the shop grid loses 284px to filters, the homepage bands lose nothing.
   Measuring the grid's own box gets both right from one set of rules.
   Browsers without container-query support fall through to the `auto-fill`
   declaration, which is the old behaviour rather than a broken one.
   ========================================================================= */

.o2d-grid {
    display: grid;
    gap: var(--o2d-4);
    /* Fallback, and the sub-300px case: a single column. */
    grid-template-columns: repeat(auto-fill, minmax(var(--o2d-col, 220px), 1fr));
}
/* Weekly Best Selling Components only -- `.o2d-grid`'s 16px gap is shared by
   every product grid on the site (shop, related products, excess inventory),
   so a wider gap here is scoped to this section rather than changed
   globally. */
.o2d-bestselling .o2d-grid {
    gap: var(--o2d-5);
}
.o2d-grid--wide { --o2d-col: 280px; }
.o2d-grid--narrow { --o2d-col: 170px; }

/* How many columns the widest step uses. Carried as a custom property rather
   than as its own rule per variant: the step below this one matches on
   `.o2d-grid:not(...):not(...):not(...)`, which outweighs a plain
   `.o2d-grid--cols-6` however late it is declared, so a variant written as its
   own rule silently lost and the band stayed at 4 across on every screen. A
   property is read by the one rule that sets the columns, so there is nothing
   to outweigh. */
.o2d-grid { --o2d-cols-mid: 5; --o2d-cols-wide: 5; }
.o2d-grid--cols-4 { --o2d-cols-mid: 4; --o2d-cols-wide: 4; }
/* The band holds 12, which 5 does not divide, so it stays at 4 through the
   middle step and goes straight to 6 once there is room for it. */
.o2d-grid--cols-6 { --o2d-cols-mid: 4; --o2d-cols-wide: 6; }

/* Marks the element the steps below measure. It goes on the grid's parent,
   since an element cannot query its own size. */
.o2d-gridwrap { container-type: inline-size; }

/* The `:not()`s keep the fixed-count band grids out of this. They are declared
   after these rules, so without the guard these would override them. */
@container (min-width: 300px) {
    .o2d-grid:not(.o2d-grid--4up):not(.o2d-grid--3up):not(.o2d-grid--2up) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Below the 5-column step: phones and small tablets. */
@container (min-width: 600px) {
    .o2d-grid:not(.o2d-grid--4up):not(.o2d-grid--3up):not(.o2d-grid--2up) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* The widest step. Capped rather than left to fit as many as it can: a 4K
   container holds 7 columns, and seven 220px cards read as a denser, smaller
   grid than the same page at 1440 rather than as a wider one.

   The count has to divide the number of cards the grid is given, so each band
   sets `--o2d-cols-mid` / `--o2d-cols-wide` to the counts its own supply can
   fill:
     (default) 5, 5 -- the listings, which render 20 a page
     --cols-4  4, 4 -- related products, trimmed to 8
     --cols-6  4, 6 -- weekly best sellers, 12
   Below these steps everything is 4 across, which all three counts divide too.
   Changing a count without changing its column class (or the reverse) is what
   brings the part-filled last row back. */
/* 760px. The shop grid measures 882px beside the 210px sidebar at the full
   1140 container (1140 - 24px of .container padding - 210 - 24px gap), and
   ~944px once the sidebar drops away below 991px. Both clear 760 comfortably,
   which is the point -- the previous 1000px threshold was measured against the
   old 1696 container and left the shop grid one step down at every width. */
@container (min-width: 760px) {
    .o2d-grid:not(.o2d-grid--4up):not(.o2d-grid--3up):not(.o2d-grid--2up) {
        /* Plain value first: it stands if a browser ever rejects the count
           below, leaving the listings right and a band one column out rather
           than collapsing the whole grid to a single column. */
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(var(--o2d-cols-mid, 5), minmax(0, 1fr));
    }
}
/* 1060px. The homepage bands measure 1116px (1140 less .container's padding),
   so the old 1120 threshold missed by four pixels and every band silently
   stayed one column short of the design. */
@container (min-width: 1060px) {
    .o2d-grid:not(.o2d-grid--4up):not(.o2d-grid--3up):not(.o2d-grid--2up) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(var(--o2d-cols-wide, 5), minmax(0, 1fr));
    }
}

/* Fixed-column rows (the four homepage list panels). `auto-fill` is wrong for a
   known, small number of items: it keeps creating empty tracks to fill the row,
   so four panels in a wide container leave three phantom columns of dead space.
   An explicit count stretches them edge to edge instead. */
.o2d-grid--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.o2d-grid--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.o2d-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1199px) {
    .o2d-grid--4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .o2d-grid--3up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .o2d-grid--4up,
    .o2d-grid--3up,
    .o2d-grid--2up { grid-template-columns: minmax(0, 1fr); }
}

.o2d-prod {
    position: relative; /* containing block for .o2d-prod__quick */
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.o2d-prod:hover {
    border-color: var(--o2d-line-strong);
    box-shadow: var(--o2d-shadow);
}

.o2d-prod__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    /* Content must never grow the box: `aspect-ratio` only wins while the
       box's height is otherwise auto, and an in-flow img with height:100%
       of an auto-height parent resolves to its intrinsic height instead. */
    overflow: hidden;
    min-height: 0;
    background: #fff;
    border-bottom: 1px solid var(--o2d-line);
}
.o2d-prod__media img {
    /* Absolutely positioned so the image is out of flow and cannot affect
       the box's computed height, whatever its intrinsic dimensions. */
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: cover;
    padding: 0;
    display: block !important;
}

.o2d-prod__body {
    display: flex;
    flex-direction: column;
    gap: var(--o2d-2);
    padding: var(--o2d-4);
    flex: 1;
}

/* The part number is the primary identifier — mono, tight, prominent. */
.o2d-prod__pn {
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-base);
    font-weight: 700;
    color: var(--o2d-ink);
    line-height: 1;
    letter-spacing: 0;
    word-break: break-word;
}
a.o2d-prod__pn:hover { color: var(--o2d-accent); }

.o2d-prod__brand {
    font-size: var(--o2d-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--o2d-ink-3);
}

.o2d-prod__price {
    font-size: var(--o2d-fs-md);
    font-weight: 700;
    color: var(--o2d-ink);
}
.o2d-prod__price small {
    font-size: var(--o2d-fs-xs);
    font-weight: 500;
    color: var(--o2d-ink-3);
}
.o2d-prod__was {
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-3);
    text-decoration: line-through;
}

.o2d-prod__foot {
    margin-top: auto;
    padding-top: var(--o2d-3);
}

/* =========================================================================
   Status badges — stock, lead time, RFQ state
   ========================================================================= */

.o2d-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--o2d-1);
    padding: 2px var(--o2d-2);
    border-radius: var(--o2d-r-sm);
    font-size: var(--o2d-fs-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background: var(--o2d-surface-3);
    color: var(--o2d-ink-2);
}
.o2d-badge--ok { background: var(--o2d-ok-wash); color: var(--o2d-ok); }
.o2d-badge--warn { background: var(--o2d-warn-wash); color: var(--o2d-warn); }
.o2d-badge--danger { background: var(--o2d-danger-wash); color: var(--o2d-danger); }
.o2d-badge--accent { background: var(--o2d-accent-wash); color: var(--o2d-accent-ink); }

.o2d-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.o2d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--o2d-2);
    /* The theme's form reset is `input, button, select, textarea { width: 100% }`
       (style.css). That is a type selector, so it loses to any class -- but only
       for properties the class actually declares. Leaving `width` out meant every
       <button class="o2d-btn"> silently stretched to its container while the same
       markup as an <a> sat at its natural size. `--block` still overrides this:
       equal specificity, later in the file. */
    width: auto;
    min-height: 40px;
    padding: 0 var(--o2d-4);
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface);
    color: var(--o2d-ink);
    font-size: var(--o2d-fs-base);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.o2d-btn:hover { border-color: var(--o2d-ink-3); color: var(--o2d-ink); }

.o2d-btn--primary {
    background: var(--o2d-accent);
    border-color: var(--o2d-accent);
    color: #fff;
}
.o2d-btn--primary:hover { background: var(--o2d-accent-hover); border-color: var(--o2d-accent-hover); color: #fff; }

.o2d-btn--ghost { background: transparent; border-color: transparent; color: var(--o2d-ink-2); }
.o2d-btn--ghost:hover { background: var(--o2d-surface-3); }

.o2d-btn--sm { min-height: 32px; padding: 0 var(--o2d-3); font-size: var(--o2d-fs-sm); }
.o2d-btn--block { width: 100%; }
.o2d-btn:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================================
   Forms
   ========================================================================= */

.o2d-field { display: block; }
.o2d-label {
    display: block;
    margin-bottom: var(--o2d-1);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    color: var(--o2d-ink-2);
}

.o2d-input,
.o2d-select,
.o2d-textarea {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: var(--o2d-2) var(--o2d-3);
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface);
    color: var(--o2d-ink);
    font-size: var(--o2d-fs-base);
    font-family: inherit;
}
.o2d-textarea { min-height: 110px; resize: vertical; }

.o2d-input:focus,
.o2d-select:focus,
.o2d-textarea:focus {
    outline: none;
    border-color: var(--o2d-accent);
    box-shadow: 0 0 0 3px var(--o2d-accent-ring);
}
.o2d-input::placeholder, .o2d-textarea::placeholder { color: var(--o2d-ink-3); }

.o2d-help { margin-top: var(--o2d-1); font-size: var(--o2d-fs-xs); color: var(--o2d-ink-3); }
.o2d-error { margin-top: var(--o2d-1); font-size: var(--o2d-fs-xs); color: var(--o2d-danger); }
.o2d-input--invalid { border-color: var(--o2d-danger); }

/* =========================================================================
   Data tables — specs, cart lines, order history
   -------------------------------------------------------------------------
   Always inside .o2d-table-wrap so a wide table scrolls itself instead of
   pushing the page sideways on a phone.
   ========================================================================= */

.o2d-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.o2d-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--o2d-fs-base);
}
.o2d-table th,
.o2d-table td {
    padding: var(--o2d-3) var(--o2d-4);
    text-align: left;
    border-bottom: 1px solid var(--o2d-line);
    vertical-align: middle;
}
.o2d-table th {
    font-size: var(--o2d-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--o2d-ink-3);
    font-weight: 600;
    white-space: nowrap;
    background: var(--o2d-surface-2);
}
.o2d-table tbody tr:last-child td { border-bottom: 0; }
.o2d-table--rows tbody tr:hover { background: var(--o2d-surface-2); }
.o2d-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Two-column spec sheet (attribute / value). */
.o2d-specs { width: 100%; border-collapse: collapse; font-size: var(--o2d-fs-base); }
.o2d-specs th,
.o2d-specs td { padding: var(--o2d-3) 0; border-bottom: 1px solid var(--o2d-line); vertical-align: top; }
.o2d-specs th { width: 40%; text-align: left; font-weight: 500; color: var(--o2d-ink-3); }
.o2d-specs td { color: var(--o2d-ink); }

/* =========================================================================
   Filters — sidebar on desktop, drawer on mobile
   ========================================================================= */

/* 240px, down from 260. The container is now 1140 rather than 1696, so the
   sidebar's share of it effectively doubled -- at 260 the grid beside it held
   832px and fitted only 4 columns, where the design draws 5.

   The design's own filter column measures ~190px, but its categories are
   named "Amplifiers" and "RF Shields"; this catalogue has
   "RFI and EMI - Shielding and Absorbing Materials", which at 210px wrapped
   to four lines and made the sidebar taller than the grid. 240 leaves the
   grid 852px, comfortably past the 760px five-column step. */
.o2d-layout {
    display: grid;
    gap: var(--o2d-5);
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
}

.o2d-filters {
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    padding: var(--o2d-4);
    position: sticky;
    top: var(--o2d-4);
    max-height: calc(100vh - var(--o2d-7));
    overflow-y: auto;
    scrollbar-width: thin;
}
.o2d-filters::-webkit-scrollbar { width: 6px; }
.o2d-filters::-webkit-scrollbar-track { background: transparent; }
.o2d-filters::-webkit-scrollbar-thumb { background: var(--o2d-line-strong); border-radius: 3px; }
.o2d-filters__group + .o2d-filters__group {
    margin-top: var(--o2d-4);
    padding-top: var(--o2d-4);
    border-top: 1px solid var(--o2d-line);
}
.o2d-filters__title {
    margin: 0 0 var(--o2d-2);
    font-size: var(--o2d-fs-sm);
    font-weight: 700;
    color: var(--o2d-ink);
}

.o2d-check {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    padding: var(--o2d-1) 0;
    font-size: var(--o2d-fs-base);
    color: var(--o2d-ink-2);
    cursor: pointer;
}
.o2d-check input { width: 15px; height: 15px; accent-color: var(--o2d-accent); flex: none; }
.o2d-check span:not(.count) {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.o2d-check .count {
    flex: none;
    margin-left: var(--o2d-2);
    font-size: var(--o2d-fs-xs);
    color: var(--o2d-ink-3);
}

/* Toolbar above results: count, sort, view toggle, mobile filter button. */
.o2d-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o2d-3);
    padding: var(--o2d-3) var(--o2d-4);
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    margin-bottom: var(--o2d-4);
}
.o2d-filter-toggle { display: none; }

/* =========================================================================
   States — empty, error, loading skeleton
   ========================================================================= */

.o2d-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--o2d-3);
    padding: var(--o2d-8) var(--o2d-4);
    text-align: center;
    color: var(--o2d-ink-3);
}
.o2d-empty__icon { font-size: 34px; color: var(--o2d-line-strong); }
.o2d-empty__title { margin: 0; font-size: var(--o2d-fs-md); font-weight: 600; color: var(--o2d-ink); }

.o2d-skel {
    background: linear-gradient(90deg, var(--o2d-surface-3) 25%, #e6ebf1 37%, var(--o2d-surface-3) 63%);
    background-size: 400% 100%;
    animation: o2d-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--o2d-r-sm);
}
.o2d-skel--card { aspect-ratio: 3 / 4; border-radius: var(--o2d-r); }
.o2d-skel--line { height: 12px; }
.o2d-skel--line.short { width: 55%; }

@keyframes o2d-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .o2d-skel { animation: none; }
}

/* =========================================================================
   Pagination
   ========================================================================= */

.o2d-pager {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--o2d-2);
    margin-top: var(--o2d-6);
    width: 100%;
}
/* `flex: 0 0 auto` + an explicit auto width so nothing upstream can stretch a
   page button to the full row — the theme and Bootstrap both ship rules that
   make buttons block-level inside various wrappers. */
.o2d-pager > .o2d-pager__btn,
.o2d-pager__btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none;
    min-width: 26px;
    min-height: 26px;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface);
    color: var(--o2d-ink-2);
    font-size: var(--o2d-fs-xs);
    font-weight: 600;
    cursor: pointer;
}
.o2d-pager__btn[aria-current="page"] {
    background: var(--o2d-accent);
    border-color: var(--o2d-accent);
    color: #fff;
}
.o2d-pager__btn:disabled { opacity: .45; cursor: not-allowed; }

/* =========================================================================
   Sidebar filter boxes ("Find a category" / "Find a brand", ListSearchBox)
   ========================================================================= */
.single-filter-box .title {
    padding: var(--o2d-3) var(--o2d-3) var(--o2d-2);
    font-size: var(--o2d-fs-md);
}
.single-filter-box .filterbox-body {
    padding: var(--o2d-3);
}
.single-filter-box .filterbox-body .price-input-area input {
    height: 26px;
    padding: 0 30px 0 var(--o2d-2);
    font-size: var(--o2d-fs-xs);
}

/* Price Range box: Min/Max fields, slider and Apply button, scaled down to match the
   compact sidebar controls above rather than the theme's larger defaults. */
.single-filter-box .filterbox-body .price-input-area .half-input-wrapper {
    gap: var(--o2d-4);
}
.single-filter-box .filterbox-body .price-input-area .half-input-wrapper .single label {
    margin-bottom: var(--o2d-1);
    font-size: var(--o2d-fs-xs);
    color: var(--o2d-ink-3);
}
.single-filter-box .filterbox-body .price-input-area .half-input-wrapper .single input {
    height: 30px;
    padding: 0 var(--o2d-2);
    font-size: var(--o2d-fs-sm);
    border-color: var(--o2d-line-strong);
}
.single-filter-box .filterbox-body .price-input-area .filter-value-min-max {
    margin-top: var(--o2d-3);
    gap: var(--o2d-3);
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-2);
}
.single-filter-box .filterbox-body .price-input-area .filter-value-min-max .rts-btn {
    min-height: 32px;
    padding: 0 var(--o2d-4);
    border-radius: var(--o2d-r);
    background: var(--o2d-accent);
    border: 1px solid var(--o2d-accent);
    color: #fff;
    font-size: var(--o2d-fs-sm);
}
.single-filter-box .filterbox-body .price-input-area .filter-value-min-max .rts-btn:hover {
    background: var(--o2d-accent-hover);
    border-color: var(--o2d-accent-hover);
}

/* Collapsible sidebar boxes (Availability / Manufacturer): the `.title` is a <button> here
   instead of an <h5>, so it needs its own flex/reset on top of the shared `.single-filter-box
   .title` padding above. */
.o2d-filterbox--collapsible .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--o2d-line);
    font-family: var(--o2d-display);
    font-weight: 600;
    color: var(--o2d-ink);
    cursor: pointer;
}
.o2d-filterbox--collapsible .title i {
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-3);
}
.o2d-filterbox__viewall {
    display: flex !important;
    width: fit-content !important;
    min-height: 26px !important;
    margin: var(--o2d-2) auto 0;
    padding: 0 var(--o2d-4) !important;
    background: var(--o2d-accent);
    border-color: var(--o2d-accent);
    color: #fff;
}
.o2d-filterbox__viewall:hover {
    background: var(--o2d-accent-hover);
    border-color: var(--o2d-accent-hover);
    color: #fff;
}

/* Product categories list rows (sidebar) */
.o2d-catlist__row {
    border-radius: var(--o2d-r-sm);
}
.o2d-catlist__row a {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    padding: var(--o2d-1) var(--o2d-2);
    border-radius: var(--o2d-r-sm);
    color: var(--o2d-ink-2);
    font-size: var(--o2d-fs-sm);
}
.o2d-catlist__row a:hover {
    background: var(--o2d-surface-3);
}
.o2d-catlist__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o2d-catlist__count {
    color: var(--o2d-ink-3);
    font-size: var(--o2d-fs-xs);
}
.o2d-catlist__row.is-active a {
    background: var(--o2d-accent-wash);
    color: var(--o2d-accent-hover);
    font-weight: 700;
}
.o2d-catlist__row.is-active .o2d-catlist__count {
    color: var(--o2d-accent-hover);
}
.o2d-catlist__chevron {
    font-size: var(--o2d-fs-xs);
}

/* =========================================================================
   Product detail page
   -------------------------------------------------------------------------
   The gallery/title/price column here is still the theme's legacy "quick
   view popup" markup repurposed for a full page (see `.product-details-
   popup-wrapper`), so most of it is styled from style.css, not opt2deal.css.
   These rules only touch the pieces that were previously unstyled.
   ========================================================================= */

/* The column that used to hold this page is now full-width (the "Why buy" / "Guaranteed Safe
   Checkout" sidebar was removed to match the Figma two-column layout), so the info column needs
   its own cap or the text stretches edge-to-edge instead of sitting beside a fixed 450px image. */
.o2d-pdp .contents {
    max-width: 480px;
}

.o2d-pdp__gallery .product-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 387 / 444;
    max-height: 444px;
    background: linear-gradient(180deg, #eaf1fb 0%, #f4f7fc 100%);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r-lg);
    overflow: hidden;
}
.o2d-pdp__gallery .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--o2d-5);
}
.o2d-pdp__gallery .product-thumb-filter-group .thumb-filter {
    width: 72px;
    height: 72px;
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    overflow: hidden;
    background: #f4f7fc;
}
.o2d-pdp__gallery .product-thumb-filter-group .thumb-filter.active {
    border-color: var(--o2d-accent);
}
.o2d-pdp__gallery .product-thumb-filter-group .thumb-filter img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.o2d-pdp .product-status {
    gap: var(--o2d-3);
}
.o2d-pdp .product-catagory {
    background: var(--o2d-surface-3) !important;
    color: var(--o2d-ink-2) !important;
    font-weight: 600;
    font-size: var(--o2d-fs-xs) !important;
}

.o2d-pdp__stock {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
}
.o2d-pdp__stock .o2d-badge { font-size: var(--o2d-fs-sm); padding: var(--o2d-1) var(--o2d-2); }
.o2d-pdp__stock-count { color: var(--o2d-ink-3); font-size: var(--o2d-fs-sm); }

.o2d-pdp__disc {
    color: var(--o2d-ink-2);
    font-size: var(--o2d-fs-base);
    line-height: 1.6;
}
.o2d-pdp__note {
    color: var(--o2d-ink-3);
    font-size: var(--o2d-fs-sm);
    line-height: 1.6;
}
.o2d-pdp__note span {
    color: var(--o2d-ink);
    font-weight: 700;
}

.o2d-page__head--split {
    justify-content: space-between;
    align-items: center;
}

.o2d-pdp__spec-card {
    border-color: var(--o2d-accent);
    border-radius: var(--o2d-r-sm);
}

.o2d-pdp__addreview {
    margin-left: var(--o2d-2);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    color: var(--o2d-accent);
    text-decoration: underline;
}
.o2d-pdp__divider {
    margin: var(--o2d-4) 0;
    border: none;
    border-top: 1px solid var(--o2d-line);
}
.o2d-pdp__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--o2d-3);
}
.o2d-pdp__actions-main {
    display: flex;
    align-items: center;
    gap: var(--o2d-3);
    flex-wrap: wrap;
}
.o2d-pdp__actions-main .rts-btn {
    min-height: 30px !important;
    height: 30px;
    padding: 0 var(--o2d-3) !important;
    gap: var(--o2d-1);
    font-size: 12px;
}
.o2d-pdp__actions-main .rts-btn .arrow-icon {
    width: auto;
    height: auto;
    font-size: 12px;
}
.o2d-pdp__actions-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--o2d-2);
    flex-wrap: wrap;
}
.o2d-pdp__actions-side .rfq-add-btn.inline {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: var(--o2d-1) var(--o2d-2);
    border-radius: var(--o2d-r-sm);
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
}
.o2d-pdp__sidebtn {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: var(--o2d-1);
    padding: var(--o2d-1) var(--o2d-2);
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r-sm);
    background: var(--o2d-surface);
    color: var(--o2d-ink-2);
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
}
.o2d-pdp__sidebtn:hover {
    background: var(--o2d-surface-3);
}

.o2d-pdp__spectable {
    margin-bottom: 0;
}
.o2d-pdp__spectable td:first-child {
    width: 220px;
    background: var(--o2d-surface-3);
    font-weight: 700;
    color: var(--o2d-ink);
}
.o2d-pdp__spectable td:last-child {
    background: var(--o2d-surface);
    color: var(--o2d-ink-2);
    font-weight: 400;
}
.o2d-pdp__spectable-head {
    color: var(--o2d-accent) !important;
}

.o2d-accent-text {
    color: var(--o2d-accent);
}

/* Figma measurements for this column's text (category chip, review link, stock line, SKU,
   price, description, return/delivery notes) and the compact quantity stepper. */
.o2d-pdp .product-catagory {
    font-family: var(--o2d-display);
    font-weight: 400;
    font-size: 12px;
    line-height: 19.2px;
    letter-spacing: 0;
}
.o2d-pdp .rating-stars-group span {
    font-family: var(--o2d-display);
    font-weight: 400;
    font-size: 8px;
    line-height: 17.45px;
    letter-spacing: .0078em;
}
.o2d-pdp__addreview {
    font-family: var(--o2d-display);
    font-weight: 400;
    font-size: 8px;
    line-height: 17.45px;
    letter-spacing: .0078em;
}
.o2d-pdp__stock .o2d-badge {
    font-family: var(--o2d-display);
    font-weight: 400;
    font-size: 12px;
    line-height: 19.2px;
    letter-spacing: 0;
}
.o2d-pdp__sku-label {
    font-weight: 600;
    font-size: 11px;
    line-height: 17.45px;
    letter-spacing: .0078em;
}
.o2d-pdp__sku-value {
    font-weight: 400;
    font-size: 11px;
    line-height: 17.45px;
    letter-spacing: .0078em;
}
.o2d-pdp .product-price {
    font-family: var(--o2d-body);
    font-weight: 700;
    font-size: 17.45px;
    line-height: 17.45px;
    letter-spacing: .0078em;
}
.o2d-pdp .contents > p.mt--10 {
    font-family: var(--o2d-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 17.45px;
    letter-spacing: .0078em;
}
.o2d-pdp__note {
    font-family: var(--o2d-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 17.45px;
    letter-spacing: .0078em;
}
.o2d-pdp__qtylabel {
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    color: var(--o2d-ink-2);
}

.o2d-pdp .rating-stars-group > span {
    padding-right: var(--o2d-2);
    border-right: 1px solid var(--o2d-line);
}
.o2d-pdp__addreview {
    text-decoration: underline;
}

.o2d-pdp__stock {
    background: none;
    padding: 0;
}
.o2d-pdp__stock .o2d-badge {
    background: none;
    padding: 0;
    color: var(--o2d-ink);
}
.o2d-pdp__stock .o2d-badge i {
    color: var(--o2d-accent);
}

/* =========================================================================
   Responsive
   -------------------------------------------------------------------------
   Single breakpoint at 991px (tablet/below) and 575px (phone), matching the
   template's own breakpoints so the two layers agree.
   ========================================================================= */

@media (max-width: 991px) {
    .o2d-layout { grid-template-columns: minmax(0, 1fr); }

    /* Filters become an off-canvas drawer, opened by .o2d-filter-toggle. */
    .o2d-filter-toggle {
        display: inline-flex;
    }
    .o2d-filters {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1200;
        width: min(86vw, 330px);
        max-height: none;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform .22s ease;
        overflow-y: auto;
    }
    .o2d-filters.is-open { transform: translateX(0); box-shadow: var(--o2d-shadow-lg); }

    .o2d-scrim {
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: rgba(16, 21, 27, .45);
        border: 0;
    }
}

@media (max-width: 575px) {
    .o2d-page { padding-block: var(--o2d-5) var(--o2d-7); }
    .o2d-page__title { font-size: var(--o2d-fs-lg); }
    .o2d-card, .o2d-card__body { padding: var(--o2d-4); }
    .o2d-grid { --o2d-col: 150px; gap: var(--o2d-3); }
    .o2d-table th, .o2d-table td { padding: var(--o2d-2) var(--o2d-3); }

    /* Comfortable touch targets on phones. */
    .o2d-btn { min-height: 44px; }
    .o2d-check { padding: var(--o2d-2) 0; }
}

/* Never let a stray wide child scroll the whole page sideways. */
.o2d-page img,
.o2d-card img { max-width: 100%; }

/* =========================================================================
   Product card internals
   -------------------------------------------------------------------------
   The three things that made cards look ragged:
     1. images at their natural size   -> fixed aspect-ratio box + contain
     2. cards of unequal height        -> flex column, h-100, footer auto
     3. action buttons out of step     -> one grid, equal columns, same height
   ========================================================================= */

/* Discount flag, top-left of the media box. */
.o2d-prod__flag {
    position: absolute;
    top: var(--o2d-2);
    left: var(--o2d-2);
    z-index: 2;
    padding: 2px var(--o2d-2);
    border-radius: var(--o2d-r-sm);
    background: var(--o2d-accent);
    color: #fff;
    font-size: var(--o2d-fs-xs);
    font-weight: 700;
    line-height: 1.6;
}

/* Wishlist / compare / quick-view. Always visible on touch, hover-in on pointer. */
.o2d-prod__quick {
    position: absolute;
    top: var(--o2d-2);
    right: var(--o2d-2);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--o2d-1);
}

.o2d-prod__quick button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r-sm);
    background: rgba(255, 255, 255, .95);
    color: var(--o2d-ink-2);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}
.o2d-prod__quick button:hover {
    border-color: var(--o2d-accent);
    color: var(--o2d-accent);
}

@media (hover: hover) and (pointer: fine) {
    .o2d-prod__quick { opacity: 0; transition: opacity .15s ease; }
    .o2d-prod:hover .o2d-prod__quick,
    .o2d-prod:focus-within .o2d-prod__quick { opacity: 1; }
}

/* Meta line: unit / stock. Fixed min-height so a missing value doesn't shorten
   the card and knock the footer out of line with its neighbours. */
.o2d-prod__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o2d-2);
    min-height: 22px;
    font-size: var(--o2d-fs-xs);
    color: var(--o2d-ink-3);
}

/* Equal-width, equal-height actions. `.rfq-add-btn` is normalised here so the
   RFQ button matches Add to Cart instead of carrying its own look. */
.o2d-prod__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--o2d-2);
}
.o2d-prod__actions--single { grid-template-columns: 1fr; }

.o2d-prod__actions > *,
.o2d-prod__actions .rfq-add-btn {
    width: 100%;
    min-height: 38px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--o2d-1);
    padding: 0 var(--o2d-2);
    border-radius: var(--o2d-r);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

/* Keep the label from wrapping the button taller than its twin. */
.o2d-prod__actions span {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575px) {
    .o2d-prod__actions > *,
    .o2d-prod__actions .rfq-add-btn { min-height: 42px; }
    .o2d-prod__quick button { width: 34px; height: 34px; }
}

/* Horizontal (list view) variant — same card, row layout. */
.o2d-prod--row { flex-direction: row; }
.o2d-prod--row .o2d-prod__media {
    flex: none;
    width: 180px;
    aspect-ratio: 1;
    border-bottom: 0;
    border-right: 1px solid var(--o2d-line);
}
@media (max-width: 575px) {
    .o2d-prod--row { flex-direction: column; }
    .o2d-prod--row .o2d-prod__media {
        width: 100%;
        aspect-ratio: 4 / 3;
        border-right: 0;
        border-bottom: 1px solid var(--o2d-line);
    }
}

/* =========================================================================
   Compact product list — the "Recently Added / Top Rated" column panels.
   Same tokens as the card, denser shape for a 4-up list.
   ========================================================================= */

.o2d-panel {
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    padding: var(--o2d-4);
    height: 100%;
}
.o2d-panel__title {
    margin: 0 0 var(--o2d-2);
    padding-bottom: var(--o2d-2);
    border-bottom: 1px solid var(--o2d-line);
    font-size: var(--o2d-fs-md);
    font-weight: 700;
    color: var(--o2d-ink);
}

.o2d-plist { display: block; }
.o2d-plist__item {
    display: flex;
    gap: var(--o2d-3);
    padding: var(--o2d-3) 0;
    border-bottom: 1px solid var(--o2d-line);
}
.o2d-plist__item:last-child { border-bottom: 0; padding-bottom: 0; }

.o2d-plist__media {
    flex: none;
    width: 56px;
    height: 56px;
    background: var(--o2d-surface-2);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r-sm);
    overflow: hidden;
}
.o2d-plist__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}

.o2d-plist__body {
    min-width: 0;
    /* Takes the slack so the availability column is pushed to the right edge
       instead of sitting against the product name. */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--o2d-1);
}

/* Availability column. `flex: none` keeps it at its natural width so a long
   part number wraps instead of squeezing the badge. */
.o2d-plist__aside {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--o2d-1);
    text-align: right;
}

.o2d-plist__unit {
    font-size: var(--o2d-fs-xs);
    color: var(--o2d-ink-3, var(--o2d-ink-2));
}

/* The availability column stays on the right at every width. Below 480px it is
   tightened rather than wrapped underneath: a narrow screen is exactly where a
   full-width second line costs the most vertical space, and the part number can
   wrap instead. */
@media (max-width: 480px) {
    .o2d-plist__media {
        width: 48px;
        height: 48px;
    }

    .o2d-plist__aside {
        gap: 2px;
    }

    .o2d-plist__aside .o2d-badge {
        padding: 2px var(--o2d-1);
        /* Keeps "In stock · 990" on one line in the narrow column. */
        white-space: nowrap;
    }
}
.o2d-plist__pn {
    font-family: var(--o2d-mono);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--o2d-ink);
    word-break: break-word;
}
a.o2d-plist__pn:hover { color: var(--o2d-accent); }
.o2d-plist__price { font-size: var(--o2d-fs-base); font-weight: 700; color: var(--o2d-ink); }

/* =========================================================================
   Thumbnails — the one way an image is sized anywhere on the site.
   -------------------------------------------------------------------------
   The theme sizes images with max-width/max-height/min-height, which lets a
   square icon and a wide photo render at different sizes and knocks whatever
   grid they sit in out of alignment. `.o2d-thumb` is a fixed box; the image
   fills it with object-fit: cover, so every tile matches regardless of the
   source file's dimensions (off-ratio sources are cropped, not letterboxed).
   ========================================================================= */

.o2d-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--o2d-thumb-ratio, 1);
    min-height: 0;
    background: var(--o2d-surface-2);
    border-radius: var(--o2d-r-sm);
    overflow: hidden;
    flex: none;
}

/* `!important` only here: the theme's own `.single-category-one img`,
   `.thumbnail img` etc. are more specific than any sane selector we could
   write against markup we don't control. */
.o2d-thumb > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: cover;
    padding: 0;
    display: block !important;
}

.o2d-thumb--4x3 { --o2d-thumb-ratio: 4 / 3; }

/* Fixed-size variants for list rows and line items. */
.o2d-thumb--xs { width: 48px; }
.o2d-thumb--sm { width: 64px; }
.o2d-thumb--md { width: 88px; }
.o2d-thumb--lg { width: 120px; }

/* Category tile: square media box above the label so every tile is identical. */
.o2d-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--o2d-2);
    height: 100%;
    padding: var(--o2d-4) var(--o2d-3);
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.o2d-cat:hover { border-color: var(--o2d-line-strong); box-shadow: var(--o2d-shadow); }

.o2d-cat .o2d-thumb { width: 72px; }

.o2d-cat__name {
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--o2d-ink);
    /* Two lines for every tile, so names of different length can't change
       the tile height and stagger the row. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.7em;
}
.o2d-cat__count { font-size: var(--o2d-fs-xs); color: var(--o2d-ink-3); margin-top: auto; }

/* =========================================================================
   Trust list — the sidebar reassurance block on the product page.
   ========================================================================= */

.o2d-trust {
    list-style: none;
    margin: 0;
    padding: 0;
}
.o2d-trust__item {
    display: flex;
    gap: var(--o2d-3);
    padding: var(--o2d-3) 0;
    border-bottom: 1px solid var(--o2d-line);
}
.o2d-trust__item:last-child { border-bottom: 0; padding-bottom: 0; }
.o2d-trust__item:first-child { padding-top: 0; }

.o2d-trust__icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--o2d-r-sm);
    background: var(--o2d-accent-wash);
    color: var(--o2d-accent-ink);
    font-size: 14px;
}
.o2d-trust__body { min-width: 0; }
.o2d-trust__title {
    display: block;
    font-size: var(--o2d-fs-base);
    font-weight: 600;
    color: var(--o2d-ink);
    line-height: 1.35;
}
.o2d-trust__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--o2d-fs-xs);
    color: var(--o2d-ink-3);
    line-height: 1.5;
}

/* =========================================================================
   Page hero artwork
   -------------------------------------------------------------------------
   The About and Contact heroes are already driven by `--o2d-hero-image` in
   globals.css (selector `.bg_image.about-banner-area-bg`, 0,2,0) — change the
   artwork there, not here. This block only covers what that system misses:
   the Store banner, and readability on narrow screens.
   ========================================================================= */

.bg_image.bg_store-banner {
    background-image: var(--o2d-hero-image);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* The artwork leaves its left third empty for exactly this: a left-aligned
   column, not the theme's centred one. */
.bg_image.about-banner-area-bg .inner-content-about-area,
.bg_image.rts-contact-main-wrapper-banner .contact-banner-content {
    max-width: 560px;
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

/* The theme sets this copy white because its original artwork was dark. The
   new hero is light, so the text has to invert or it disappears. */
.bg_image.about-banner-area-bg .inner-content-about-area .title,
.bg_image.about-banner-area-bg .inner-content-about-area p.disc,
.bg_image.rts-contact-main-wrapper-banner .contact-banner-content .title,
.bg_image.rts-contact-main-wrapper-banner .contact-banner-content p.disc,
.bg_image.bg_store-banner .title,
.bg_image.bg_store-banner p.disc {
    color: var(--o2d-ink);
}

.bg_image.about-banner-area-bg .inner-content-about-area p.disc,
.bg_image.rts-contact-main-wrapper-banner .contact-banner-content p.disc,
.bg_image.bg_store-banner p.disc {
    color: var(--o2d-ink-2);
    max-width: 100%;
}

/* The theme centres the hero CTA with `margin: auto`, which `text-align`
   cannot override on a block. Pin it to the left edge of the text column. */
.bg_image.about-banner-area-bg .inner-content-about-area .rts-btn,
.bg_image.rts-contact-main-wrapper-banner .contact-banner-content .rts-btn,
.bg_image.bg_store-banner .rts-btn {
    margin-left: 0;
    margin-right: auto;
}

/* On narrow screens the subject sits off-canvas, so pull the crop back toward
   the middle and lay a scrim under the text to keep it readable. */
@media (max-width: 991px) {
    .bg_image.about-banner-area-bg,
    .bg_image.rts-contact-main-wrapper-banner,
    .bg_image.bg_store-banner {
        background-position: center center;
        position: relative;
    }
    .bg_image.about-banner-area-bg::before,
    .bg_image.rts-contact-main-wrapper-banner::before,
    .bg_image.bg_store-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 60%, rgba(255, 255, 255, .45) 100%);
    }
    .bg_image.about-banner-area-bg .container,
    .bg_image.rts-contact-main-wrapper-banner .container,
    .bg_image.bg_store-banner .container {
        position: relative;
        z-index: 1;
    }
    .bg_image.about-banner-area-bg .inner-content-about-area,
    .bg_image.rts-contact-main-wrapper-banner .contact-banner-content {
        max-width: 100%;
    }
}

/* Section figures on the About page. */
.o2d-figure {
    display: block;
    margin: 0;
    border-radius: var(--o2d-r);
    overflow: hidden;
    background: var(--o2d-surface-2);
}
.o2d-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================================
   Global mobile pass
   -------------------------------------------------------------------------
   Applies to the whole site, including the template components that have not
   been migrated yet — so every page improves without rewriting each one.

   The theme declares `.rts-section-gap: 60px 0` and repeats the same 60px in
   its 991px and 767px media queries, so vertical rhythm never adapts: two
   stacked sections put 120px of empty space between blocks on a phone.
   ========================================================================= */

@media (max-width: 767px) {
    .rts-section-gap { padding: 36px 0 !important; }
    .rts-section-gap2 { padding: 36px 0 !important; }
    .rts-section-gapTop { padding-top: 36px !important; }
    .rts-section-gapBottom { padding-bottom: 36px !important; }

    /* The theme's utility spacers are tuned for desktop. */
    .mt--60, .mt--50, .mt--40 { margin-top: 24px !important; }
    .mb--60, .mb--50, .mb--40 { margin-bottom: 24px !important; }
    .pt--60, .pt--50 { padding-top: 24px !important; }
    .pb--60, .pb--50 { padding-bottom: 24px !important; }

    /* Guarantee a side gutter so nothing sits flush against the screen. */
    .container, .container-2, .container-3 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Comfortable tap targets. */
    .rts-btn,
    button.rts-btn,
    a.rts-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea { min-height: 44px; font-size: 16px; }

    /* Body copy at 1.3 is tight to read on a small screen. */
    p, li { line-height: 1.55; }
}

@media (max-width: 575px) {
    .rts-section-gap { padding: 28px 0 !important; }
    .rts-section-gap2 { padding: 28px 0 !important; }
    .rts-section-gapTop { padding-top: 28px !important; }
    .rts-section-gapBottom { padding-bottom: 28px !important; }
}

/* -------------------------------------------------------------------------
   Overflow guards. A single wide child can make the whole page scroll
   sideways, which is the most common way a responsive layout "feels broken".
   ------------------------------------------------------------------------- */

img, svg, video, canvas, iframe { max-width: 100%; }

table { max-width: 100%; }

/* Long part numbers and emails have no break opportunity and will push a
   container wider than the viewport. */
/* `anywhere` also collapses an element's min-content width, which lets a
   table shrink until every cell wraps one character per line instead of
   scrolling. Restrict it to the part-number labels that genuinely need it,
   and use `break-word` elsewhere, which does not affect intrinsic sizing. */
.o2d-prod__pn,
.o2d-plist__pn { overflow-wrap: anywhere; }

td, th,
.title, .disc { overflow-wrap: break-word; }

/* Data tables scroll rather than crush. `table-responsive` only scrolls when
   the table is actually wider than its container, so give it a floor. */
.table-responsive > table,
.o2d-table-wrap > table { min-width: 680px; }

@media (max-width: 575px) {
    .table-responsive > table,
    .o2d-table-wrap > table { min-width: 560px; }
}

/* =========================================================================
   Site header
   -------------------------------------------------------------------------
   One structure for every width. Rows collapse as the viewport narrows:

     >1199px  top bar · logo+search+hotline+actions · categories+nav
     <1199px  hotline drops, nav row hides, burger appears
      <767px  top bar hides, search moves to its own row below the logo
   ========================================================================= */

/* The header is what sticks — a sticky *child* only stays pinned while its
   parent is still in view, and .o2d-header ends just below the nav row, so a
   child-level rule would unstick almost immediately.
   A negative `top` lets the rows above scroll away while the rest stays put. */
.o2d-header {
    position: sticky;
    top: 0;
    z-index: 150;
    background: var(--o2d-surface);
    border-bottom: 1px solid var(--o2d-line);
}

/* ---- utility bar ---- */
/* Near-black in the design, not the accent. That matters now the accent is
   itself orange: an orange promo bar directly above an orange Search button
   and an orange cart badge leaves nothing for the eye to land on. */
.o2d-header__top {
    background: var(--o2d-dark);
    color: #fff;
    font-size: var(--o2d-fs-sm);
}
/* Three tracks so the promo stays centred on the bar itself rather than on the space left over
   beside the seller link. The empty first track is what balances it; without it the promo shifts
   left by half the link's width. */
.o2d-header__top-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--o2d-4);
    min-height: 38px;
}
.o2d-header__top-inner > .o2d-header__promo { grid-column: 2; }
.o2d-header__sellerlink {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.o2d-header__sellerlink:hover { color: var(--o2d-accent); }
.o2d-header__sellerlink i { font-size: 14px; }

/* No mobile rule here on purpose: the whole utility bar is display:none below 767px (see the
   breakpoint further down), so a seller on a phone reaches this through the drawer instead. */

.o2d-header__promo {
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: var(--o2d-display);
    font-weight: 600;
    letter-spacing: .01em;
}
.o2d-header__promo a {
    color: var(--o2d-accent);
    text-decoration: none;
    font-weight: 700;
}
.o2d-header__promo a:hover { text-decoration: underline; }
.o2d-header__toplinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--o2d-4);
}
.o2d-header__toplinks a,
.o2d-header__social a,
.o2d-header__social span {
    color: rgba(255, 255, 255, .92);
}
.o2d-header__toplinks a:hover,
.o2d-header__social a:hover { color: #fff; text-decoration: underline; }

.o2d-header__welcome {
    margin: 0 auto;
    white-space: nowrap;
    color: rgba(255, 255, 255, .92);
}
.o2d-header__social {
    display: flex;
    align-items: center;
    gap: var(--o2d-3);
}

/* Currency picker. It sits in the actions row, not the top bar: that bar is
   `display: none` below 768px, so the control disappeared entirely on phones.
   Sized to match the `.btn-border-only` pills beside it. */
.o2d-header__currency { display: inline-flex; align-items: center; flex: none; }
.o2d-header__currency select {
    /* The theme sets a global `select { width: 100% }`, which stretched this
       into a slab across the header -- hence the explicit auto. */
    width: auto;
    height: 44px;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid var(--o2d-line);
    border-radius: 6px;
    color: var(--o2d-ink);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0 26px 0 var(--o2d-3);
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}
.o2d-header__currency select:hover {
    border-color: var(--o2d-accent);
    background-color: var(--o2d-accent-wash);
    color: var(--o2d-accent-ink);
}
.o2d-header__currency select:focus-visible { outline: 2px solid var(--o2d-accent); outline-offset: 1px; }
/* The open list renders on the OS surface, not on the header. */
.o2d-header__currency option { color: #111; background: #fff; }

/* The control reads on its own in the header; the label is only for screen readers. */
.o2d-header__currency-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* Sits on the first row now, after the logo and before the action icons
       (its natural source position), so the search field below it can take
       the full second row on its own instead of sharing it. */
    .o2d-header__currency--bar { order: 1; flex: 0 0 auto; }

    /* `min-height` is what matters: the mobile tap-target rule in this file sets a
       bare `select { min-height: 44px }`, and min-height beats height. Matched to
       the search field's own height so the row reads as one band. */
    .o2d-header__currency--bar select {
        height: 38px;
        min-height: 38px;
        font-size: 12px;
        padding: 0 20px 0 8px;
        background-position: right 6px center;
    }
}

/* ---- main row ---- */
.o2d-header__main { padding: 18px 0; }
.o2d-header__main-inner {
    display: flex;
    align-items: center;
    gap: var(--o2d-4);
}

.o2d-header__burger {
    display: none;
    width: 42px;
    height: 42px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface);
    color: var(--o2d-ink);
    font-size: 17px;
    cursor: pointer;
    padding: 0;
}

.o2d-header__logo { flex: none; display: block; }
/* The design's mark is stacked (55x77), so it is given real height rather than
   the wide-wordmark box the theme assumed. Capped by max-width as well, because
   the logo is admin-managed: upload a horizontal wordmark and it is the width
   that would otherwise eat the search field. */
.o2d-header__logo img {
    height: 62px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Centred in the row and capped at the design's 619px rather than greedily
   taking the slack -- `auto` margins centre it between logo and actions even
   though those two are different widths. */
.o2d-header__search {
    flex: 0 1 619px;
    min-width: 0;
    margin-inline: auto;
}

/* The button is positioned inside the field rather than being a flex sibling:
   with flex, the input's final width depended on the button's content width,
   which made the layout fragile. This pins the button and lets the input own
   the full row. */
.o2d-header__search form {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
}
/* The leading magnifier is decorative and drawn from the bundled Font Awesome
   rather than added to the markup: ProductSearchBar is shared with the mobile
   drawer, and this icon only belongs in the header's pill. */
.o2d-header__search form::before {
    content: "\f002";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    position: absolute;
    left: var(--o2d-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--o2d-ink-3);
    pointer-events: none;
    z-index: 1;
}

.o2d-header__search input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 112px 0 42px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--o2d-strip);
    color: var(--o2d-ink);
    font-size: var(--o2d-fs-base);
}
.o2d-header__search input:focus {
    outline: none;
    border-color: var(--o2d-accent);
    box-shadow: 0 0 0 3px var(--o2d-accent-ring);
}
.o2d-header__search input::placeholder { color: var(--o2d-ink-3); }

/* Inset pill, 96x28 against the 46px field as drawn. The magnifier that used
   to sit in here has moved to the leading edge, so this is label-only on
   desktop and icon-only once the field narrows (see the 767px block). */
.o2d-header__search-btn {
    position: absolute;
    top: 9px;
    right: 9px;
    bottom: 9px;
    width: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--o2d-2);
    border: 0;
    border-radius: 999px;
    background: var(--o2d-accent);
    color: #fff;
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-sm);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
/* The button carries its own magnifier for the narrow case; on desktop the
   leading one already states the field's purpose, so showing both is noise. */
.o2d-header__search-btn > i { display: none; }
.o2d-header__search-btn:hover { background: var(--o2d-accent-hover); }

.o2d-header__hotline {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    color: var(--o2d-ink);
}
.o2d-header__hotline i { font-size: 19px; color: var(--o2d-accent); }
.o2d-header__hotline small { display: block; font-size: var(--o2d-fs-xs); color: var(--o2d-ink-3); }
.o2d-header__hotline strong { display: block; font-size: var(--o2d-fs-base); white-space: nowrap; }

.o2d-header__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
}

/* Two-line account block: muted greeting over the action. Set apart from the
   circular icon buttons beside it, so it carries no border or background. */
.o2d-header__account {
    display: inline-flex;
    align-items: center;
    gap: var(--o2d-2);
    padding-left: var(--o2d-2);
    color: var(--o2d-ink);
    text-decoration: none;
    white-space: nowrap;
}
.o2d-header__account i { font-size: 18px; }
.o2d-header__account small {
    display: block;
    font-size: var(--o2d-fs-xs);
    line-height: 1.2;
    color: var(--o2d-ink-3);
}
.o2d-header__account strong {
    display: block;
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-base);
    line-height: 1.2;
    font-weight: 700;
}
.o2d-header__account:hover strong { color: var(--o2d-accent); }

/* ---- nav row ---- */
.o2d-header__nav {
    border-top: 1px solid var(--o2d-line);
    background: var(--o2d-surface);
}

/* Flattened on purpose: the categories pill and every nav link need to sit in
   ONE `space-between` row so the links spread across the full row width,
   from right after the pill to the container's right edge (there is no
   longer a trailing hours block to anchor to). The nav markup nests the
   links three levels deep (menu div > nav > ul > li), so each of those
   wrapper levels is collapsed with `display: contents`, promoting the <li>s
   to be direct flex children of this row, siblings of the pill. */
.o2d-header__nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
}
.o2d-header__menu,
.o2d-header__menu > div,
.o2d-header__menu nav {
    display: contents;
}
/* Matches the theme's own selector (and specificity) exactly so this wins by
   load order, the same convention the rest of this file uses -- a lower-
   specificity override here would lose to style.css's `display: flex` on
   this same element and leave the <li>s bunched with no gap at all. */
.rts-header-nav-area-one .nav-area ul {
    display: contents;
}

/* 236x33 pill in the design. A min-width rather than a fixed one so a longer
   translation of the label grows it instead of truncating. Nudged left of
   the container's own gutter so it sits closer to the page edge. */
.o2d-header__cats {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    flex: none;
    min-width: 236px;
    height: 33px;
    margin-left: -10px;
    padding: 0 var(--o2d-4);
    border-radius: 999px;
    background: var(--o2d-strip);
    font-family: var(--o2d-display);
    font-weight: 600;
    font-size: var(--o2d-fs-md);
    color: var(--o2d-ink);
    cursor: pointer;
}
.o2d-header__cta { flex: none; }
.rts-header-nav-area-one .nav-area ul li a {
    padding: 22px 0;
    font-size: var(--o2d-fs-md);
    font-weight: 600;
}


/* -------------------------------------------------------------------------
   Breakpoints
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .o2d-header__nav { display: none; }       /* nav lives in the drawer */
    .o2d-header__burger { display: inline-flex; }
    .o2d-header__welcome { display: none; }
    /* The greeting's text drops before its icon does, matching how the action
       pills beside it degrade; the icon stays as the tap target. */
    .o2d-header__account span { display: none; }
    .o2d-header__search { flex: 1 1 280px; }
}

@media (max-width: 767px) {
    .o2d-header__top { display: none; }
    .o2d-header__main { padding: var(--o2d-3) 0; }

    /* Logo + burger + actions on one line; search and the currency picker on the next. Scoped to
       the header's own row (not just `.o2d-header__search`) -- that class is reused by the
       sidebar drawer's search box, which has no `order` siblings of its own and was getting
       pushed to the very bottom of the drawer by this `order: 10`. */
    .o2d-header__main-inner { flex-wrap: wrap; gap: var(--o2d-3); }
    .o2d-header__main-inner .o2d-header__search { order: 10; flex: 1 1 100%; min-width: 0; }
    .o2d-header__actions { margin-left: auto; }
    .o2d-header__logo img { height: 34px; }
    .o2d-header__search-label { display: none; }
    .o2d-header__search-btn { width: 38px; top: 4px; right: 4px; bottom: 4px; }
    .o2d-header__search-btn > i { display: inline; }
    .o2d-header__search input { padding-right: 48px; }
}

/* -------------------------------------------------------------------------
   Header action buttons (Account / Wishlist / RFQ / Cart)
   The theme sizes `.btn-border-only` at 50px tall with 26px of side padding.
   Four of those plus labels will not fit beside a search field, so inside the
   header they are compacted, and the labels drop before the icons do.
   ------------------------------------------------------------------------- */

.o2d-header__actions .btn-border-only {
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    border-color: var(--o2d-line);
    color: var(--o2d-ink);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    position: relative;
}
.o2d-header__actions .btn-border-only i { font-size: 17px; }

/* The design labels these with icons alone. The text is hidden from sight but
   left in the accessibility tree -- `display: none` would strip the only
   accessible name these buttons have and leave a screen reader three unlabelled
   circles. */
.o2d-header__actions .btn-border-only > .text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Count badge, pinned to the upper-right of the circle as drawn. */
.o2d-header__actions .btn-border-only > .number {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--o2d-accent);
    color: #fff;
    font-family: var(--o2d-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.o2d-header__actions .btn-border-only:hover {
    border-color: var(--o2d-accent);
    background: var(--o2d-accent-wash);
    color: var(--o2d-accent-ink);
}
.o2d-header__actions .btn-border-only i { font-size: 17px; }

/* The count sits as a badge on the icon rather than as a third inline word. */
.o2d-header__actions .btn-border-only .number {
    position: absolute;
    top: 4px;
    left: 26px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--o2d-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 1399px) {
    /* Labels go first — the icons stay recognisable on their own. */
    .o2d-header__actions .btn-border-only .text,
    .o2d-header__actions .btn-border-only > span:not(.number) { display: none; }
    .o2d-header__actions .btn-border-only { padding: 0 var(--o2d-3); width: 46px; justify-content: center; }
    .o2d-header__actions .btn-border-only .number { left: auto; right: 4px; }
}

@media (max-width: 767px) {
    .o2d-header__actions { gap: var(--o2d-1); }
    .o2d-header__actions .btn-border-only { width: 42px; height: 42px; padding: 0; }
}

/* =========================================================================
   Site footer
   ========================================================================= */

.o2d-footer {
    background: var(--o2d-dark);
    color: rgba(255, 255, 255, .72);
    font-size: var(--o2d-fs-base);
    padding-top: var(--o2d-7);
    /* Figma: 351 tall. A min-height rather than a fixed one -- the column
       content (address, hours, link lists) is real data and can run longer
       than the design's placeholder copy, and a fixed height would clip it. */
    min-height: 351px;
}

/* Figma: 1346 wide, narrower than the page's standard 1355 container. */
.o2d-footer .container {
    max-width: 1346px;
}

.o2d-footer__grid {
    display: grid;
    gap: var(--o2d-6);
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    padding-bottom: var(--o2d-6);
}

.o2d-footer__logo { display: inline-block; margin-bottom: var(--o2d-3); }
.o2d-footer__logo img {
    height: 40px;
    width: auto;
    /* The logo artwork is dark ink; invert it for the dark footer. */
    filter: brightness(0) invert(1);
}

.o2d-footer__tagline {
    margin: 0 0 var(--o2d-4);
    max-width: 38ch;
    line-height: 1.6;
}

/* Display-face, letterspaced and uppercase in the design -- that treatment is
   what separates a column heading from the links beneath it at a similar size. */
.o2d-footer__title {
    margin: 0 0 var(--o2d-3);
    color: #fff;
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-base);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.o2d-footer__links,
.o2d-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.o2d-footer__links li + li { margin-top: var(--o2d-2); }
.o2d-footer__links a { color: rgba(255, 255, 255, .72); }
.o2d-footer__links a:hover { color: var(--o2d-accent); }

.o2d-footer__contact li {
    display: flex;
    gap: var(--o2d-2);
    line-height: 1.6;
}
.o2d-footer__contact li + li { margin-top: var(--o2d-2); }
.o2d-footer__contact i { color: var(--o2d-accent); margin-top: 4px; flex: none; }
.o2d-footer__contact a { color: rgba(255, 255, 255, .72); }
.o2d-footer__contact a:hover { color: var(--o2d-accent); }

.o2d-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: var(--o2d-4) 0;
}
.o2d-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--o2d-3);
}
.o2d-footer__bar p { margin: 0; font-size: var(--o2d-fs-sm); }

.o2d-footer__social { display: flex; gap: var(--o2d-2); }
.o2d-footer__social a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--o2d-r-sm);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
}
.o2d-footer__social a:hover { background: var(--o2d-accent); color: #fff; }

@media (max-width: 991px) {
    .o2d-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--o2d-5); }
    .o2d-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .o2d-footer { padding-top: var(--o2d-6); }
    /* Brand column (logo + tagline) still spans the full width above; Company
       and Shop sit side by side in one row, with Policies on the row below. */
    .o2d-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--o2d-5); }
    .o2d-footer__brand { grid-column: 1 / -1; order: 0; }
    /* Shop on the left, Company on the right (DOM order is brand, Company,
       Shop, Policies, so this swaps the middle two). */
    .o2d-footer__grid > div:nth-child(2) { order: 2; }
    .o2d-footer__grid > div:nth-child(3) { order: 1; }
    .o2d-footer__grid > div:nth-child(4) { order: 3; }
    .o2d-footer__bar-inner { justify-content: center; text-align: center; }
}

/* -------------------------------------------------------------------------
   Shop toolbar + filter drawer
   ------------------------------------------------------------------------- */

.o2d-filters__head {
    display: none;                     /* drawer-only chrome */
    align-items: center;
    justify-content: space-between;
    gap: var(--o2d-3);
    padding-bottom: var(--o2d-3);
    margin-bottom: var(--o2d-3);
    border-bottom: 1px solid var(--o2d-line);
}

.o2d-toolbar__search {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
    max-width: 340px;
}
.o2d-toolbar__search .o2d-input {
    min-height: 30px;
    padding: 0 34px 0 var(--o2d-2);
    font-size: var(--o2d-fs-sm);
}
.o2d-toolbar__clear {
    position: absolute;
    right: var(--o2d-2);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--o2d-surface-3);
    color: var(--o2d-ink-2);
    cursor: pointer;
    padding: 0;
    font-size: 11px;
}
.o2d-toolbar__clear:hover { background: var(--o2d-line-strong); }

.o2d-viewtoggle { display: flex; gap: var(--o2d-1); flex: none; }
.o2d-viewtoggle button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface);
    color: var(--o2d-ink-3);
    cursor: pointer;
    padding: 0;
}
.o2d-viewtoggle button.is-active {
    border-color: var(--o2d-accent);
    background: var(--o2d-accent-wash);
    color: var(--o2d-accent-ink);
}

@media (max-width: 991px) {
    .o2d-filters__head { display: flex; }
    /* The drawer needs its own padding since it is no longer a page column. */
    .o2d-filters { padding: var(--o2d-4); }
    .o2d-viewtoggle { display: none; }   /* list view is the grid on one column anyway */
}

@media (max-width: 575px) {
    .o2d-toolbar { gap: var(--o2d-2); padding: var(--o2d-3); }
    .o2d-toolbar__search { flex: 1 0 100%; max-width: none; order: 10; }
}

/* -------------------------------------------------------------------------
   Cart list on small screens
   The theme stacks each row vertically under 767px but leaves the
   "Products / Price / Quantity / SubTotal" header row on screen, where it no
   longer aligns to anything. Hide it and label the cells inline instead.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .single-cart-area-list.head { display: none; }

    .single-cart-area-list.main {
        position: relative;
        padding: var(--o2d-4);
        border: 1px solid var(--o2d-line);
        border-radius: var(--o2d-r);
        background: var(--o2d-surface);
        gap: var(--o2d-3) !important;
    }
    .rts-cart-list-area .single-cart-area-list.main + .single-cart-area-list.main {
        margin-top: var(--o2d-3);
    }

    /* The theme stacks every cell, so Price / Qty / Subtotal each became a
       full-width block and a single line ran ~600px tall. Lay the product on
       one row and group the figures into a right-aligned strip beneath it. */
    .single-cart-area-list.main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
    .single-cart-area-list.main .product-main-cart {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--o2d-3) !important;
    }

    .single-cart-area-list.main .price,
    .single-cart-area-list.main .quantity,
    .single-cart-area-list.main .subtotal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--o2d-3);
        flex-basis: auto !important;
        padding-top: var(--o2d-2);
        border-top: 1px dashed var(--o2d-line);
    }
    .single-cart-area-list.main .price p,
    .single-cart-area-list.main .subtotal p {
        margin: 0;
        text-align: right;
        font-weight: 700;
        color: var(--o2d-ink);
        font-variant-numeric: tabular-nums;
    }
    .single-cart-area-list.main .quantity .quantity-edit { margin-left: auto; }

    /* Name the value, since the column header is gone. */
    .single-cart-area-list.main .price::before { content: "Price"; }
    .single-cart-area-list.main .quantity::before { content: "Quantity"; }
    .single-cart-area-list.main .subtotal::before { content: "Subtotal"; }
    .single-cart-area-list.main .price::before,
    .single-cart-area-list.main .quantity::before,
    .single-cart-area-list.main .subtotal::before {
        color: var(--o2d-ink-3);
        font-size: var(--o2d-fs-sm);
        font-weight: 500;
        white-space: nowrap;
    }

    /* The theme pins this with NEGATIVE offsets (right:-13px; top:-14px) at
       `.single-cart-area-list.main .product-main-cart .close` — 0,3,1 — so it
       escapes the card and lands over the row above. Matched here to win. */
    .single-cart-area-list.main .product-main-cart .close {
        position: absolute;
        top: var(--o2d-2);
        right: var(--o2d-2);
        left: auto;
        bottom: auto;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    /* A solid #FF0000 circle is far louder than a remove control needs to be. */
    .single-cart-area-list.main .product-main-cart .close i {
        width: 30px;
        height: 30px;
        background: var(--o2d-surface-3);
        color: var(--o2d-ink-3);
        font-size: 12px;
    }
    .single-cart-area-list.main .product-main-cart .close:hover i {
        background: var(--o2d-danger-wash);
        color: var(--o2d-danger);
    }
}

/* Two-up form fields that stack on narrow screens. */
.o2d-formgrid {
    display: grid;
    gap: var(--o2d-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 575px) {
    .o2d-formgrid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Header mini-cart / mini-wishlist dropdown
   ========================================================================= */

.category-hover-header .o2d-minicart {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 200;
    width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
    box-shadow: var(--o2d-shadow-lg);
    text-align: left;
    color: var(--o2d-ink);
    cursor: default;
}

.o2d-minicart__head {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    padding: var(--o2d-3) var(--o2d-4);
    border-bottom: 1px solid var(--o2d-line);
    font-size: var(--o2d-fs-md);
}

.o2d-minicart__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.o2d-minicart__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: var(--o2d-3);
    padding: var(--o2d-3) var(--o2d-4);
    border-bottom: 1px solid var(--o2d-line);
}
.o2d-minicart__item:last-child { border-bottom: 0; }

.o2d-minicart__media { width: 48px; }

.o2d-minicart__body { min-width: 0; }
.o2d-minicart__pn {
    display: block;
    font-family: var(--o2d-mono);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    /* Part numbers have no natural break point. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o2d-minicart__meta {
    display: block;
    margin-top: 2px;
    font-size: var(--o2d-fs-xs);
    color: var(--o2d-ink-3);
}

.o2d-minicart__line {
    font-size: var(--o2d-fs-sm);
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.o2d-minicart__remove {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--o2d-surface-3);
    color: var(--o2d-ink-3);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}
.o2d-minicart__remove:hover { background: var(--o2d-danger-wash); color: var(--o2d-danger); }

.o2d-minicart__foot {
    padding: var(--o2d-3) var(--o2d-4);
    border-top: 1px solid var(--o2d-line);
    background: var(--o2d-surface-2);
}
.o2d-minicart__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--o2d-3);
    font-size: var(--o2d-fs-base);
}
.o2d-minicart__total strong { font-size: var(--o2d-fs-md); }
.o2d-minicart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--o2d-2); }

.o2d-minicart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--o2d-2);
    padding: var(--o2d-6) var(--o2d-4);
    text-align: center;
    color: var(--o2d-ink-3);
}
.o2d-minicart__empty i { font-size: 26px; color: var(--o2d-line-strong); }
.o2d-minicart__empty p { margin: 0; }

/* The dropdown is anchored to the action button, which must therefore be a
   containing block, and must not clip it. */
.o2d-header__actions .btn-border-only.category-hover-header { overflow: visible; }

@media (max-width: 575px) {
    /* Anchor to the viewport edge instead of the button, which sits near it. */
    .category-hover-header .o2d-minicart {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: 70vh;
    }
    .o2d-minicart__item { grid-template-columns: 44px minmax(0, 1fr) auto 26px; gap: var(--o2d-2); }
}

/* -------------------------------------------------------------------------
   Service band on small screens
   The theme keeps its 70px icon circles and desktop type at every width, so
   four cards consume most of a phone screen. Tighten to a compact row.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .single-short-service-area-start {
        display: flex;
        align-items: center;
        gap: var(--o2d-3);
        text-align: left;
    }

    .single-short-service-area-start .icon-area {
        min-width: 48px !important;
        width: 48px;
        height: 48px !important;
        flex: none;
    }
    .single-short-service-area-start .icon-area img,
    .single-short-service-area-start .icon-area svg { width: 26px; height: 26px; }
    .single-short-service-area-start .title { font-size: var(--o2d-fs-md); margin-bottom: 2px; }
    .single-short-service-area-start .disc { font-size: var(--o2d-fs-sm); margin: 0; }
}

/* The theme stacks these tiles into a column below 575px (style.css). Combined
   with the `align-items: center` above, that centred the icon while the copy
   stayed left-aligned, so each tile read as lopsided. Once stacked, centre the
   text to match the icon. */
@media (max-width: 575px) {
    .single-short-service-area-start {
        flex-direction: column;
        text-align: center;
    }

    .single-short-service-area-start .information {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   Cart list on desktop — right-align the numeric columns so Price, Quantity
   and Subtotal form clean vertical rails instead of drifting left.
   ------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .single-cart-area-list.head .price,
    .single-cart-area-list.head .quantity,
    .single-cart-area-list.head .subtotal,
    .single-cart-area-list.main .price,
    .single-cart-area-list.main .subtotal { text-align: right; }

    .single-cart-area-list.main .price p,
    .single-cart-area-list.main .subtotal p {
        margin: 0;
        font-weight: 700;
        color: var(--o2d-ink);
        font-variant-numeric: tabular-nums;
    }
    .single-cart-area-list.main .quantity { display: flex; justify-content: flex-end; }
    .single-cart-area-list.head .quantity { text-align: right; }
}

/* -------------------------------------------------------------------------
   Sticky header on tablet/mobile
   The nav row is hidden below 1199px, so the row worth pinning is the main
   one — logo, menu, search and cart stay reachable while scrolling.
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .o2d-header__main {
        background: var(--o2d-surface);
        border-bottom: 1px solid var(--o2d-line);
    }
}

/* The drawer and its scrim must sit above the pinned header. */
.o2d-filters.is-open { z-index: 1200; }
.o2d-scrim { z-index: 1199; }

/* Checkout summary follows the form on tall checkouts. */
@media (min-width: 1200px) {
    .o2d-checkout__aside > * {
        position: sticky;
        top: var(--o2d-4);
    }
}

/* -------------------------------------------------------------------------
   Auth pages (login / register / OTP)
   The theme pads this card 100px/150px, leaving ~500px of usable width inside
   an 800px box and pushing the form well below the fold.
   ------------------------------------------------------------------------- */

.registration-wrapper-1 {
    max-width: 480px !important;
    padding: var(--o2d-7) var(--o2d-6) !important;
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r-lg);
    box-shadow: var(--o2d-shadow);
}

.registration-wrapper-1 .title {
    font-size: var(--o2d-fs-xl);
    margin-bottom: var(--o2d-5);
}

.registration-form .input-wrapper + .input-wrapper { margin-top: var(--o2d-4); }

.registration-form label {
    display: block;
    margin-bottom: var(--o2d-1);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    color: var(--o2d-ink-2);
}

.registration-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    height: 46px;
    padding: 0 var(--o2d-3);
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface);
    font-size: var(--o2d-fs-base);
}
.registration-form input:focus {
    outline: none;
    border-color: var(--o2d-accent);
    box-shadow: 0 0 0 3px var(--o2d-accent-ring);
}

.registration-form .rts-btn,
.registration-form button[type="submit"] { width: 100%; min-height: 46px; }

@media (max-width: 575px) {
    .registration-wrapper-1 {
        padding: var(--o2d-5) var(--o2d-4) !important;
        border-radius: var(--o2d-r);
    }
}

/* The wishlist row carries an extra "Add" action, so it needs a fifth column. */
.o2d-minicart__item:has(> .o2d-btn) {
    grid-template-columns: 48px minmax(0, 1fr) auto 28px;
}
.o2d-minicart__item > .o2d-btn { white-space: nowrap; }

@media (max-width: 575px) {
    .o2d-minicart__item > .o2d-btn { padding: 0 var(--o2d-2); font-size: var(--o2d-fs-xs); }
}

/* Pagination: the ellipsis gap and the compact "3 / 12" counter variant. */
.o2d-pager__gap {
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--o2d-ink-3);
    user-select: none;
}
.o2d-pager__count {
    padding: 0 var(--o2d-3);
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-2);
    white-space: nowrap;
}

@media (max-width: 575px) {
    .o2d-pager { gap: var(--o2d-1); }
    .o2d-pager__btn { min-width: 36px; min-height: 36px; font-size: var(--o2d-fs-xs); }
}

/* -------------------------------------------------------------------------
   Mobile drawer
   The theme hangs the close button outside the panel (`margin-left: -53px`),
   so it floats over the page behind — and now over the sticky header too.
   Move it inside, top-right, where a close control is expected.
   ------------------------------------------------------------------------- */

.side-bar { z-index: 1300; }

.side-bar button.close-icon-menu {
    position: absolute !important;
    top: var(--o2d-3) !important;
    right: var(--o2d-3) !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 2;
}
.side-bar button.close-icon-menu i {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--o2d-r) !important;
    background: var(--o2d-surface-3);
    color: var(--o2d-ink-2) !important;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.side-bar button.close-icon-menu:hover i {
    background: var(--o2d-danger-wash);
    color: var(--o2d-danger) !important;
}

/* The close control sits on its own row above the search field (the field gets
   its own margin-top below), so no horizontal allowance is needed here -- the
   48px this used to reserve just shortened the input for no reason. */

/* -------------------------------------------------------------------------
   Wishlist table
   The theme's row is a flex bar sized for 4 columns (64/12/12/12). The
   wishlist adds a fifth — Add to Cart — which previously borrowed `.subtotal`
   and so inherited a 12% width, overlapping the price beside it.
   ------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .rts-cart-list-area .single-cart-area-list.head,
    .rts-cart-list-area .single-cart-area-list.main:has(.addtocart) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 110px 150px 110px 190px;
        align-items: center;
        gap: var(--o2d-3);
    }
    .single-cart-area-list .addtocart { text-align: right; }
    .single-cart-area-list .addtocart .rts-btn { width: 100%; justify-content: center; }
    .single-cart-area-list.head .addtocart p { margin: 0; }
}

/* The remove control is a solid #FF0000 disc by default — far louder than a
   secondary action needs to be, on every row. */
.rts-cart-list-area .single-cart-area-list .close i {
    background: var(--o2d-surface-3) !important;
    color: var(--o2d-ink-3) !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 11px;
}
.rts-cart-list-area .single-cart-area-list .close:hover i {
    background: var(--o2d-danger-wash) !important;
    color: var(--o2d-danger) !important;
}

@media (max-width: 767px) {
    .single-cart-area-list.main .addtocart {
        display: block;
        padding-top: var(--o2d-3);
        border-top: 1px dashed var(--o2d-line);
    }
    .single-cart-area-list.main .addtocart .rts-btn { width: 100%; justify-content: center; }
}

/* The detail page's wishlist action is a <button> now, not a <div>. */
button.single-share-option {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
}
button.single-share-option:hover { color: var(--o2d-accent); }

/* =========================================================================
   Banner bands
   -------------------------------------------------------------------------
   The theme wrapped these in `.rts-section-gap` (60px top AND bottom). On the
   hero that put 60px of dead space directly under the header, and the promo
   row below added another 60px on top of the categories' own spacing.
   ========================================================================= */

.o2d-hero-band {
    padding-top: var(--o2d-5);
    padding-bottom: var(--o2d-3);
}

/* "Buy & Sell Industrial" banner, per Figma: 771x406. The left column is
   pinned to that exact width (the right one stays fluid until it gets its
   own measurement) and the row height is fixed with `object-fit: cover` so
   the source art crops to fit instead of stretching out of its own aspect
   ratio. */
.o2d-banner-grid--hero {
    grid-template-columns: 771px 1fr;
}
.o2d-banner-grid--hero img {
    height: 406px;
    object-fit: cover;
}

.o2d-promo-band {
    padding-top: var(--o2d-3);
    padding-bottom: var(--o2d-3);
}

/* Same content width as the hero banner row above it -- the page's standard
   1355 container, not a narrower one of its own -- and a bit taller than the
   bare file aspect ratio gives it, cropped to fit with `object-fit: cover`
   so the art doesn't stretch. */
.o2d-promo-band .o2d-banner-grid img {
    aspect-ratio: 12 / 5;
    object-fit: cover;
}

@media (max-width: 991px) {
    .o2d-hero-band { padding-top: var(--o2d-4); padding-bottom: var(--o2d-4); }
    .o2d-promo-band { padding-bottom: var(--o2d-5); }
}

@media (max-width: 767px) {
    .o2d-hero-band { padding-top: var(--o2d-3); padding-bottom: var(--o2d-3); }
    .o2d-promo-band { padding-bottom: var(--o2d-4); }

    /* Only the lead banner on a phone. The second is a tall portrait panel that
       would sit under the hero as another full-width block of scrolling. */
    .o2d-banner-grid--hero > a:nth-child(n + 2) { display: none; }
    .o2d-banner-grid--hero { grid-template-columns: minmax(0, 1fr) !important; }
}

/* -------------------------------------------------------------------------
   Sticky header offsets
   The utility bar has a declared 38px min-height, so pulling the header up by
   exactly that scrolls it out of view and leaves the logo/search/cart row and
   the nav pinned — the two rows worth keeping reachable.
   Below 1199px the utility bar is hidden, so the offset goes back to 0.
   ------------------------------------------------------------------------- */

/* The whole header pins, utility bar included — `top: 0` at every width.
   (A negative offset here would scroll the top rows away and pin only the
   nav; that is the other common pattern, but not what this site wants.) */

.o2d-header__main { background: var(--o2d-surface); }
.o2d-header__nav { background: var(--o2d-surface); }

/* Anything that overlays the page must clear the pinned header. */
.side-bar { z-index: 1300; }
.o2d-filters.is-open { z-index: 1200; }
.o2d-scrim { z-index: 1199; }
.category-hover-header .o2d-minicart { z-index: 200; }

/* =========================================================================
   Restore viewport scrolling so `position: sticky` works
   -------------------------------------------------------------------------
   style.css sets `html { overflow: hidden; overflow-y: auto }` and
   `body { overflow: hidden }`. That makes <html> the scroll container rather
   than the viewport, and a sticky descendant then has nothing to stick to —
   which is why the header would not pin no matter how it was positioned.

   Both axes must be `visible`: if either is hidden/clip/auto the element
   becomes a scroll container again (a `visible` paired with a clipped axis
   computes to `auto`). Horizontal overflow is instead prevented per-element
   above — images capped, tables wrapped, long part numbers broken.
   ========================================================================= */

html {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
}

body {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
}

/* =========================================================================
   Service strip icons
   -------------------------------------------------------------------------
   The theme's icons were inline SVGs with the grocery green baked into every
   `fill` attribute, so they stayed green no matter what colour admin set. The
   fills are `currentColor` now and the glyph follows the brand accent; the
   white disc behind it is still a literal white so the icon reads against the
   accent-coloured band it sits on.
   ========================================================================= */
.single-short-service-area-start .icon-area svg {
    color: var(--o2d-accent);
}

/* ------------------------------------------------------------------ *
 * CMS page content
 *
 * Rich text authored in the admin panel (business_pages.description) arrives
 * as raw HTML with no classes of its own, so the bare tags need styling to
 * match the rest of the site rather than falling back to browser defaults.
 * ------------------------------------------------------------------ */
.o2d-cms-content {
    color: var(--color-body, #5d6c7b);
    font-size: 16px;
    line-height: 1.7;
}

.o2d-cms-content > *:first-child { margin-top: 0; }
.o2d-cms-content > *:last-child { margin-bottom: 0; }

.o2d-cms-content h1,
.o2d-cms-content h2,
.o2d-cms-content h3,
.o2d-cms-content h4 {
    color: var(--color-heading-1, #1a2634);
    margin: 32px 0 12px;
    line-height: 1.3;
}

.o2d-cms-content h1 { font-size: 28px; }
.o2d-cms-content h2 { font-size: 24px; }
.o2d-cms-content h3 { font-size: 20px; }
.o2d-cms-content h4 { font-size: 18px; }

.o2d-cms-content p { margin-bottom: 16px; }

.o2d-cms-content ul,
.o2d-cms-content ol {
    margin: 0 0 16px;
    padding-left: 22px;
    list-style: revert;
}

.o2d-cms-content li { margin-bottom: 8px; }

.o2d-cms-content a {
    color: var(--o2d-accent, var(--color-primary, #0f4c81));
    text-decoration: underline;
}

.o2d-cms-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.o2d-cms-content table {
    width: 100%;
    margin-bottom: 16px;
    border-collapse: collapse;
}

.o2d-cms-content th,
.o2d-cms-content td {
    border: 1px solid var(--color-border, #e4e8ec);
    padding: 10px 12px;
    text-align: left;
}

.o2d-cms-content blockquote {
    margin: 0 0 16px;
    padding: 12px 18px;
    border-left: 3px solid var(--o2d-accent, var(--color-primary, #0f4c81));
    background: var(--o2d-accent-wash, #f4f7fa);
}

/* ------------------------------------------------------------------ *
 * Product reviews
 * ------------------------------------------------------------------ */
.o2d-review__stars { color: #f5a623; display: inline-flex; gap: 2px; font-size: 13px; }

.o2d-review__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    padding: 18px 0 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border, #e4e8ec);
}

.o2d-review__average { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.o2d-review__average > strong { font-size: 34px; line-height: 1; color: var(--color-heading-1, #1a2634); }
.o2d-review__count { font-size: 13px; color: var(--color-body, #5d6c7b); }

.o2d-review__breakdown { flex: 1; min-width: 220px; margin: 0; padding: 0; list-style: none; }
.o2d-review__breakdown li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.o2d-review__breakdown-label { font-size: 12px; width: 32px; flex-shrink: 0; color: var(--color-body, #5d6c7b); }
.o2d-review__breakdown-count { font-size: 12px; width: 28px; text-align: right; flex-shrink: 0; color: var(--color-body, #5d6c7b); }

.o2d-review__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--color-border, #e4e8ec); overflow: hidden; }
.o2d-review__bar-fill { display: block; height: 100%; background: var(--o2d-accent, var(--color-primary, #0f4c81)); }

.o2d-review__list { margin: 0; padding: 0; list-style: none; }
.o2d-review__item { padding: 16px 0; border-bottom: 1px solid var(--color-border, #e4e8ec); }
.o2d-review__item:last-child { border-bottom: 0; }
.o2d-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.o2d-review__date { font-size: 12px; color: var(--color-body, #5d6c7b); margin-left: auto; }
.o2d-review__more { font-size: 13px; margin-top: 12px; }

/* Review form on the order detail page */
.o2d-review-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.o2d-review-form__stars { display: inline-flex; gap: 4px; font-size: 18px; color: #f5a623; }
.o2d-review-form__stars button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}

/* Inline text button that reads as a link but behaves as a control. */
.o2d-link-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--o2d-accent, var(--color-primary, #0f4c81));
    text-decoration: underline;
}

/* =========================================================================
   Blog
   -------------------------------------------------------------------------
   The theme's blog card sized itself from whatever artwork the author
   uploaded: `.thumbnail img` was `width: 100%` with no height, so a portrait
   photo made one card three times the height of its neighbours and a post with
   no image left a short stub. Everything below gives the card a fixed media box
   and a flex body, so a row of cards is one height with its buttons on one
   baseline, however ragged the source data is.
   ========================================================================= */

/* ---- listing: filter bar ---- */
.o2d-blog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o2d-3);
    margin-bottom: var(--o2d-6);
}
.o2d-blog-filters__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--o2d-2);
    min-width: 0;
}
.o2d-blog-filters__search {
    /* Shrinkable rather than a hard min-width: a 240px floor plus a row of
       category pills is wider than a phone, which pushed the page sideways. */
    flex: 0 1 280px;
    min-width: 0;
    margin-left: auto;
    height: 44px;
    padding: 0 var(--o2d-3);
    /* 16px — anything smaller makes iOS Safari zoom the page on focus. */
    font-size: var(--o2d-fs-md);
    color: var(--o2d-ink);
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r);
}
.o2d-blog-filters__search:focus {
    outline: none;
    border-color: var(--o2d-accent);
    box-shadow: 0 0 0 3px var(--o2d-accent-ring);
}

.o2d-pill {
    display: inline-flex;
    align-items: center;
    /* See the note on .o2d-btn -- without this the theme's `button { width: 100% }`
       gives every pill the full row, so the filter bar stacks one per line. */
    width: auto;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 var(--o2d-3);
    font-size: var(--o2d-fs-base);
    font-weight: 500;
    color: var(--o2d-ink-2);
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: 999px;
    cursor: pointer;
    transition: .2s;
}
.o2d-pill:hover { border-color: var(--o2d-line-strong); color: var(--o2d-ink); }
.o2d-pill.is-active {
    color: #fff;
    background: var(--o2d-accent);
    border-color: var(--o2d-accent);
}

/* ---- listing: card ---- */
.o2d-blogcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--o2d-surface);
    border: 1px solid var(--o2d-line);
    border-radius: var(--o2d-r-lg);
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}
.o2d-blogcard:hover {
    border-color: var(--o2d-line-strong);
    box-shadow: var(--o2d-shadow-lg);
}

/* Fixed 16:10 box. The image is absolutely positioned because an in-flow child
   with `height: 100%` collapses the parent's `aspect-ratio` to nothing. */
.o2d-blogcard__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--o2d-surface-2);
    overflow: hidden;
}
.o2d-blogcard__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.o2d-blogcard:hover .o2d-blogcard__media img { transform: scale(1.05); }

.o2d-blogcard__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--o2d-line-strong);
    background: var(--o2d-surface-2);
}

.o2d-blogcard__body {
    display: flex;
    flex-direction: column;
    /* `gap` guarantees the minimum spacing between rows; the CTA's `margin-top:
       auto` then absorbs whatever is left over, which is what lines the buttons
       up across cards whose excerpts ran to different lengths. An auto margin
       alone collapses to zero on a full card, so both are needed. */
    gap: var(--o2d-2);
    flex: 1;
    padding: var(--o2d-4);
}

.o2d-blogcard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--o2d-2) var(--o2d-4);
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-3);
}
.o2d-blogcard__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Two lines, then ellipsis — a long headline must not change the card's height. */
.o2d-blogcard__title {
    margin: var(--o2d-1) 0 0;
    font-size: var(--o2d-fs-md);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.o2d-blogcard__title a { color: var(--o2d-ink); transition: color .2s; }
.o2d-blogcard__title a:hover { color: var(--o2d-accent); }

.o2d-blogcard__excerpt {
    margin: 0;
    font-size: var(--o2d-fs-base);
    line-height: 1.6;
    color: var(--o2d-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* `auto` margin pins the button to the bottom, so every card's CTA lines up
   however short the excerpt above it turned out to be. */
.o2d-blogcard__cta {
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--o2d-2);
    padding-bottom: var(--o2d-2);
}
.o2d-blogcard__cta i { margin-left: var(--o2d-2); }

.o2d-blogcard--skeleton {
    min-height: 380px;
    border-color: transparent;
}
.o2d-skeleton,
.o2d-blogcard--skeleton {
    background: var(--o2d-surface-2);
    border-radius: var(--o2d-r-lg);
}

/* ---- article ---- */
.o2d-article { min-width: 0; }

/* Same fixed-box treatment as the card. The raw image was dropped in at
   `width: 100%` with its own aspect ratio, so a tall source filled most of a
   screen before the headline appeared. */
.o2d-article__hero {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--o2d-5);
    background: var(--o2d-surface-2);
    border-radius: var(--o2d-r-lg);
    overflow: hidden;
}
.o2d-article__hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.o2d-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--o2d-2) var(--o2d-5);
    font-size: var(--o2d-fs-base);
    color: var(--o2d-ink-3);
}
.o2d-article__meta i { margin-right: 6px; }

.o2d-article__title {
    margin: var(--o2d-3) 0 var(--o2d-5);
    font-size: 32px;
    line-height: 1.25;
    color: var(--o2d-ink);
}

.o2d-article__body {
    font-size: var(--o2d-fs-md);
    line-height: 1.8;
    color: var(--o2d-ink-2);
    /* The body is admin-authored HTML, so it can contain anything. Nothing in
       it is allowed to make the page wider than this column. */
    min-width: 0;
    overflow-wrap: break-word;
}
.o2d-article__body > * { max-width: 100%; }
.o2d-article__body p { margin: 0 0 var(--o2d-4); }
.o2d-article__body h2,
.o2d-article__body h3,
.o2d-article__body h4,
.o2d-article__body h5,
.o2d-article__body h6 {
    margin: var(--o2d-6) 0 var(--o2d-3);
    line-height: 1.35;
    color: var(--o2d-ink);
}
.o2d-article__body h2 { font-size: 26px; }
.o2d-article__body h3 { font-size: 22px; }
.o2d-article__body h4 { font-size: 19px; }
.o2d-article__body h5 { font-size: 17px; }
.o2d-article__body h6 { font-size: var(--o2d-fs-md); }
.o2d-article__body ul,
.o2d-article__body ol { margin: 0 0 var(--o2d-4); padding-left: var(--o2d-5); }
.o2d-article__body li { margin-bottom: var(--o2d-2); }
.o2d-article__body a { color: var(--o2d-accent); text-decoration: underline; }
.o2d-article__body img {
    height: auto;
    border-radius: var(--o2d-r);
}
.o2d-article__body iframe,
.o2d-article__body video { max-width: 100%; }
.o2d-article__body blockquote {
    margin: 0 0 var(--o2d-4);
    padding: var(--o2d-2) var(--o2d-4);
    border-left: 3px solid var(--o2d-accent);
    color: var(--o2d-ink);
}
.o2d-article__body pre {
    max-width: 100%;
    overflow-x: auto;
    padding: var(--o2d-3);
    font-family: var(--o2d-mono);
    font-size: var(--o2d-fs-base);
    background: var(--o2d-surface-2);
    border-radius: var(--o2d-r);
}
/* A pasted table is the other thing that can outgrow the column. Let it scroll
   inside the article instead of widening the document. */
.o2d-article__body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.o2d-article__body th,
.o2d-article__body td {
    padding: var(--o2d-2) var(--o2d-3);
    border: 1px solid var(--o2d-line);
}

.o2d-article__related { margin-top: var(--o2d-7); }
.o2d-article__related-title { margin-bottom: var(--o2d-5); font-size: var(--o2d-fs-lg); }

.o2d-related { display: block; }
.o2d-related__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: var(--o2d-2);
    background: var(--o2d-surface-2);
    border-radius: var(--o2d-r);
    overflow: hidden;
}
.o2d-related__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.o2d-related strong {
    display: block;
    font-size: var(--o2d-fs-base);
    line-height: 1.45;
    color: var(--o2d-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.o2d-related:hover strong { color: var(--o2d-accent); }

/* ---- article sidebar ---- */
.o2d-aside { margin-bottom: var(--o2d-6); }
.o2d-aside__title { margin-bottom: var(--o2d-4); font-size: var(--o2d-fs-md); }
.o2d-aside__list { list-style: none; padding: 0; margin: 0; }
.o2d-aside__list li { border-top: 1px solid var(--o2d-line); }
.o2d-aside__list li:last-child { border-bottom: 1px solid var(--o2d-line); }
.o2d-aside__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--o2d-3);
    padding: 11px 0;
    font-size: var(--o2d-fs-base);
    color: var(--o2d-ink-2);
}
.o2d-aside__list a:hover { color: var(--o2d-accent); }
.o2d-aside__count { color: var(--o2d-ink-3); font-size: var(--o2d-fs-sm); }

.o2d-aside__post {
    display: flex;
    gap: var(--o2d-3);
    margin-bottom: var(--o2d-4);
}
.o2d-aside__post-media {
    position: relative;
    flex: 0 0 72px;
    width: 72px;
    height: 56px;
    background: var(--o2d-surface-2);
    border-radius: var(--o2d-r);
    overflow: hidden;
}
.o2d-aside__post-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.o2d-aside__post-media .o2d-blogcard__placeholder { font-size: 16px; }
.o2d-aside__post-text { min-width: 0; }
.o2d-aside__post-text strong {
    display: block;
    font-size: var(--o2d-fs-base);
    line-height: 1.35;
    color: var(--o2d-ink);
}
.o2d-aside__post:hover .o2d-aside__post-text strong { color: var(--o2d-accent); }
.o2d-aside__post-text small { font-size: var(--o2d-fs-sm); color: var(--o2d-ink-3); }

@media (max-width: 991px) {
    .o2d-article__title { font-size: 26px; }
    .o2d-article__hero { aspect-ratio: 16 / 10; }
}
@media (max-width: 575px) {
    .o2d-blog-filters__search { flex-basis: 100%; margin-left: 0; }
    .o2d-article__title { font-size: 22px; }
}

/* =========================================================================
   Mobile drawer
   =========================================================================
   The theme's .side-bar ships three structural problems:

     1. It ends on `overflow: visible`, which cancels the `overflow-y: auto`
        set four lines above it — so anything below the fold was unreachable.
        A menu you cannot scroll is the whole drawer on a short screen.
     2. Width is a fixed 465px, dropping to a fixed 320px at 575px. 320px is
        narrower than every current phone, so the drawer looked like a strip
        with a wide dead gap beside it.
     3. `.contact-area` and `.buton-area-bottom` have no rules at all, so the
        footer was unstyled inline flow — the icons, phone number and the two
        auth buttons simply ran together.

   opt2deal.css is linked after style.css, so plain selectors win the tie.
   ------------------------------------------------------------------------- */

.side-bar.header-two {
    /* Tracks the viewport instead of two hardcoded widths, with a cap so it
       stays a drawer rather than a full-screen takeover on a tablet. */
    width: min(92vw, 400px);
    padding: var(--o2d-5) var(--o2d-4);
    /* Re-assert scrolling: the theme's trailing `overflow: visible` wins
       otherwise, and `-y: auto` alone is not enough once that lands. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Clears the home indicator on notched phones. */
    padding-bottom: calc(var(--o2d-5) + env(safe-area-inset-bottom, 0px));
    gap: var(--o2d-4);
}

@media only screen and (max-width: 575px) {
    /* Overrides the theme's fixed 320px. */
    .side-bar.header-two { width: min(92vw, 360px); }
}

/* The close control is absolutely positioned, so the search field needs the
   first row to itself rather than sharing it. */
.side-bar.header-two > .o2d-header__search { margin-top: var(--o2d-5); }

/* Opens from the left instead of the theme's default right edge. The close
   button is repositioned to a plain top-right inset rather than the theme's
   `margin-left: -53px` (which pokes it out past the drawer's *left* edge --
   correct when the drawer itself opens from the right, wrong here). */
.side-bar.header-two {
    left: -100%;
    right: auto;
}
.side-bar.header-two.show {
    left: 0;
    right: auto;
}
.side-bar.header-two button.close-icon-menu {
    position: absolute;
    top: var(--o2d-4);
    right: var(--o2d-4);
    left: auto;
    margin: 0;
}
.side-bar.header-two button.close-icon-menu i {
    margin: 0;
    height: auto;
    width: auto;
    font-size: 22px;
    color: var(--o2d-ink, #2C3C28);
}

/* --- Menu / Category tabs ------------------------------------------------ */

.side-bar .mobile-menu-nav-area .nav-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--o2d-2);
    border: 0;
    margin-bottom: var(--o2d-3);
}

.side-bar .mobile-menu-nav-area .nav-link {
    border: 1px solid var(--o2d-line-strong);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface);
    color: var(--o2d-ink-2);
    font-size: var(--o2d-fs-sm);
    font-weight: 600;
    padding: var(--o2d-2) var(--o2d-3);
    text-align: center;
}

.side-bar .mobile-menu-nav-area .nav-link.active {
    background: var(--o2d-accent);
    border-color: var(--o2d-accent);
    color: #fff;
}

/* --- Menu list ------------------------------------------------------------ */

.side-bar .mainmenu,
.side-bar .mainmenu .submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-bar .mainmenu > li { border-bottom: 1px solid var(--o2d-line); }
.side-bar .mainmenu > li:last-child { border-bottom: 0; }

.side-bar .mainmenu a.main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--o2d-3) 0;
    font-size: var(--o2d-fs-base);
    font-weight: 600;
    color: var(--o2d-ink);
}

.side-bar .mainmenu a.main:hover { color: var(--o2d-accent); }

.side-bar .mainmenu .submenu {
    padding-inline-start: var(--o2d-3);
    padding-bottom: var(--o2d-2);
    border-inline-start: 2px solid var(--o2d-line);
    margin-inline-start: var(--o2d-1);
}

.side-bar .mainmenu .submenu a {
    display: block;
    padding: var(--o2d-2) 0;
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-2);
}

.side-bar .mainmenu .submenu a:hover { color: var(--o2d-accent); }

/* --- Footer: contact details and auth buttons ----------------------------- */

.side-bar .button-area-main-wrapper-menuy-sidebar {
    /* Was `margin-top: auto`, pinning the footer to the bottom of the
       full-height drawer. With a short menu that opened a dead gap between the
       tabs and the footer, so the panel read as empty and the tabs sat below a
       screenful of nothing. Content flows top-down now. */
    margin-top: var(--o2d-5) !important;
    gap: var(--o2d-3);
    width: 100%;
}

.side-bar .contact-area {
    display: flex;
    flex-direction: column;
    gap: var(--o2d-2);
    width: 100%;
}

.side-bar .contact-area .phone {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    font-size: var(--o2d-fs-sm);
    min-width: 0;
}

.side-bar .contact-area .phone i {
    flex: none;
    width: 18px;
    font-size: var(--o2d-fs-sm);
    text-align: center;
    color: var(--o2d-accent);
}

.side-bar .contact-area .phone a {
    /* style.css's .button-area-main-wrapper-menuy-sidebar .contact-area>div a sets 22px directly
       on the anchor, which otherwise wins over .phone's own 13px (inheritance loses to a rule
       that targets the element itself). */
    font-size: var(--o2d-fs-xs);
    color: var(--o2d-ink-2);
    /* Email addresses are long enough to force a sideways scroll otherwise. */
    overflow-wrap: anywhere;
}

.side-bar .contact-area .phone a:hover { color: var(--o2d-accent); }

.side-bar .buton-area-bottom {
    display: grid;
    gap: var(--o2d-2);
    width: 100%;
}

/* Two buttons sit side by side; one (Sign Out) spans the row on its own. */
.side-bar .buton-area-bottom:has(> * + *) { grid-template-columns: 1fr 1fr; }

.side-bar .buton-area-bottom .rts-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 10px 18px;
    font-size: var(--o2d-fs-sm);
}

/* Drawer backdrop. Sits immediately after .side-bar in the DOM so it can be
   revealed by the adjacent-sibling selector below — the drawer's open state is
   a class toggled directly on it, not React state, so there is nothing else to
   key off. */
.o2d-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1299; /* under .side-bar (1300), over everything else */
    background: rgb(0 0 0 / 45%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.side-bar.show + .o2d-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* In the drawer the button carries only the magnifier, so the header's 110px
   labelled pill is far too heavy for a 360px panel. Same 46px/56px pair the
   header itself drops to below 767px -- repeated here because the drawer is
   also open between 768px and 1199px, where that media block does not apply. */
.side-bar .o2d-header__search-btn {
    width: 46px;
    gap: 0;
}

.side-bar .o2d-header__search input {
    padding-right: 56px;
}

/* =========================================================================
   Category marquee
   -------------------------------------------------------------------------
   The strip above the footer, in the slot the design fills with brand logos.
   See components/category/SubcategoryMarquee.tsx for why it carries
   categories instead.

   The loop is two identical halves translated -50%: at the end of the cycle
   the clone sits exactly where the original began, so the restart is
   invisible. Duration scales with nothing -- it is a constant, so a longer
   list simply moves past at the same speed rather than racing.
   ========================================================================= */

.o2d-catmarquee {
    border-top: 1px solid var(--o2d-line);
    border-bottom: 1px solid var(--o2d-line);
    background: var(--o2d-surface);
    padding: var(--o2d-3) 0;
}

/* Figma: 1309x112 -- its own narrower, shorter container than the page's
   standard one, directly above the footer. */
.o2d-catmarquee .container {
    max-width: 1309px;
}
.o2d-catmarquee__viewport {
    height: 112px;
    display: flex;
    align-items: center;
}

/* Homepage-only: the theme's `.rts-section-gapBottom` (bottom-only, 60px) is
   shared with other pages, so it is overridden scoped to the home layout
   rather than globally -- the best-selling and recently-added sections get
   the same 12px top/bottom as every other home section instead of a lone
   60px gap with nothing above it. */
.index-five .rts-section-gapBottom {
    padding-top: var(--o2d-3);
    padding-bottom: var(--o2d-3);
}

/* The fade tells the reader the row continues past the edge, which is the one
   thing a marquee loses by having no arrows. */
.o2d-catmarquee__viewport {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.o2d-catmarquee__track {
    display: flex;
    width: max-content;
    animation: o2d-catmarquee 48s linear infinite;
}

.o2d-catmarquee__group {
    display: flex;
    align-items: stretch;
}

/* Pausing on hover is what makes the row usable: without it a link slides out
   from under the pointer between deciding to click and clicking. */
.o2d-catmarquee:hover .o2d-catmarquee__track,
.o2d-catmarquee__track:focus-within {
    animation-play-state: paused;
}

@keyframes o2d-catmarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.o2d-catmarquee__item {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    padding: var(--o2d-2) var(--o2d-5);
    border-right: 1px solid var(--o2d-line);
    color: var(--o2d-ink);
    text-decoration: none;
    white-space: nowrap;
}
.o2d-catmarquee__item:hover { color: var(--o2d-accent); }
/* Image-only items. The design runs brand logos at roughly 150x44 in this
   strip; these are 600px-square product photographs on white, so they are
   given real height to be recognisable at a glance -- a 28px thumbnail of an
   SMD crystal is an indistinguishable grey speck. Stacked as image-over-name
   rather than the plain row the text-only items use, since the image is
   already the full width of the item. */
.o2d-catmarquee__item--image {
    flex-direction: column;
    gap: var(--o2d-1);
    padding: var(--o2d-2) var(--o2d-6);
}
.o2d-catmarquee__item--image .o2d-catmarquee__name {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.o2d-catmarquee__item--image img {
    height: 80px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    flex: none;
    /* The photographs are shot on white and vary in crop; a little scaling on
       hover is an extra affordance beside the name underneath. Shorter than a
       bare image would need, so the name fits below it within the row's
       fixed 112px height. */
    transition: transform .25s ease;
}
.o2d-catmarquee__item--image:hover img {
    transform: scale(1.06);
}

.o2d-catmarquee__name {
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-sm);
    font-weight: 500;
    color: #000;
}

.o2d-catmarquee__count {
    font-size: var(--o2d-fs-xs);
    font-weight: 700;
    color: var(--o2d-ink-3);
    background: var(--o2d-strip);
    border-radius: 999px;
    padding: 2px 8px;
}

/* A row that never stops moving is a problem for anyone who gets motion sick
   and for anyone trying to read it. Stopped, it stays a usable scrollable row. */
@media (prefers-reduced-motion: reduce) {
    .o2d-catmarquee__track { animation: none; }
    .o2d-catmarquee__viewport { overflow-x: auto; }
    .o2d-catmarquee__group:nth-child(2) { display: none; }
}

@media (max-width: 767px) {
    .o2d-catmarquee { padding: var(--o2d-4) 0; }
    .o2d-catmarquee__item { padding: var(--o2d-2) var(--o2d-4); }
    .o2d-catmarquee__item--image { padding: 0 var(--o2d-5); }
    .o2d-catmarquee__item--image img { height: 68px; max-width: 120px; }
}

/* =========================================================================
   Reassurance strip (ShortService)
   -------------------------------------------------------------------------
   Four equal cards. Replaces the theme's `.rts-shorts-service-area`, which
   painted the whole band in the brand colour -- now that the brand colour is
   orange that would have put a second full-width orange block directly under
   the orange hero.
   ========================================================================= */

.o2d-services {
    padding: var(--o2d-3) 0;
}

.o2d-services__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--o2d-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.o2d-services__item {
    display: flex;
    align-items: center;
    gap: var(--o2d-3);
    padding: var(--o2d-4);
    border: 1px solid var(--o2d-card-line);
    border-radius: var(--o2d-r);
    background: var(--o2d-strip);
}

/* The design tints one card per strip, to stop four identical boxes reading
   as a single grey band. Which one is passed in rather than fixed here. */
.o2d-services__item.is-featured {
    background: var(--o2d-accent-wash);
    border-color: var(--o2d-accent-wash);
}

.o2d-services__item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: none;
}

.o2d-services__item strong {
    display: block;
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-base);
    font-weight: 700;
    line-height: 1.3;
    color: var(--o2d-ink);
}

.o2d-services__item span {
    display: block;
    font-size: var(--o2d-fs-sm);
    line-height: 1.35;
    color: var(--o2d-ink-3);
}

@media (max-width: 991px) {
    .o2d-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stays two-up on a phone, compacted rather than stacked.
   One column would make this four full-width rows -- roughly a third of a
   phone screen spent on four lines of reassurance copy before any product is
   visible. Two columns of compact cards is two rows instead, and the
   supporting line drops out because at this size the title already says it
   ("Secure Payment" / "Your money is safe"). */
@media (max-width: 575px) {
    .o2d-services { padding: var(--o2d-4) 0; }
    .o2d-services__grid { gap: var(--o2d-2); }
    .o2d-services__item {
        gap: var(--o2d-2);
        padding: var(--o2d-3) var(--o2d-2);
    }
    .o2d-services__item img { width: 26px; height: 26px; }
    .o2d-services__item strong { font-size: var(--o2d-fs-sm); line-height: 1.2; }
    .o2d-services__item span { display: none; }
}

/* =========================================================================
   Shop category hero
   -------------------------------------------------------------------------
   Full-bleed artwork with the heading over it. The image is a real <img>
   rather than a background so it is fetched at the right priority and
   participates in layout; the band's height is fixed and the picture is
   cropped to it, because the source is 2125x740 and letting it set its own
   height would push the whole grid below the fold.
   ========================================================================= */

.o2d-cathero {
    position: relative;
    overflow: hidden;
    background: var(--o2d-dark);
    min-height: 240px;
    display: flex;
    align-items: center;
}

.o2d-cathero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;   /* the artwork's subject sits right of centre */
}

/* The shop/brand/category page body right after this banner is wrapped in
   the theme's `.rts-section-gap` (60px top AND bottom), shared with other
   uses of that class elsewhere, so the reduced gap here is scoped to
   directly following this banner rather than changed globally. */
.o2d-cathero + .rts-section-gap {
    padding-top: var(--o2d-5);
}

/* The scrim is what makes the heading legible: the artwork is bright orange
   on the left at some crops, and white-on-orange alone is not enough contrast. */
.o2d-cathero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 8, 6, .82) 0%, rgba(10, 8, 6, .45) 48%, transparent 78%);
}

.o2d-cathero__inner {
    position: relative;
    z-index: 1;
    color: #fff;
    padding-top: var(--o2d-5);
    padding-bottom: var(--o2d-5);
}

.o2d-cathero__kicker {
    display: block;
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .85;
}

.o2d-cathero__title {
    margin: var(--o2d-2) 0 var(--o2d-1);
    color: #fff;
    font-family: var(--o2d-display);
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(26px, 3.4vw, 44px);
}
/* The design sets the final word of the category name in the accent. */
.o2d-cathero__title em {
    font-style: normal;
    color: var(--o2d-accent);
}

.o2d-cathero__sub {
    margin: 0;
    max-width: 46ch;
    font-size: var(--o2d-fs-md);
    color: rgba(255, 255, 255, .88);
}

.o2d-cathero__stats {
    list-style: none;
    margin: var(--o2d-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.o2d-cathero__stats li {
    display: flex;
    align-items: center;
    gap: var(--o2d-3);
}
/* Vertical divider between stats, Figma-style -- not on the last item. */
.o2d-cathero__stats li:not(:last-child) {
    padding-right: var(--o2d-5);
    margin-right: var(--o2d-5);
    border-right: 1px solid rgba(255, 255, 255, .35);
}
.o2d-cathero__stats > li > i {
    font-size: 34px;
    color: #fff;
}
.o2d-cathero__stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.o2d-cathero__stats strong {
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-lg);
    font-weight: 800;
    color: #fff;
}
.o2d-cathero__stats span span {
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-lg);
    font-weight: 700;
    color: #fff;
}

@media (max-width: 767px) {
    .o2d-cathero { min-height: 180px; }
    /* Nearly opaque: at this width the heading sits over the artwork's subject
       rather than beside it, so a directional scrim no longer clears a space. */
    .o2d-cathero::after {
        background: linear-gradient(90deg, rgba(10, 8, 6, .86) 0%, rgba(10, 8, 6, .66) 100%);
    }
    .o2d-cathero__stats { gap: var(--o2d-4); margin-top: var(--o2d-3); }
}

/* =========================================================================
   Featured categories band
   -------------------------------------------------------------------------
   Quarter-width intro panel, three-quarter card rail, inside one rounded
   surface — the design's layout. The cards carry no border of their own; they
   are separated by a hairline so the rail reads as one continuous strip
   rather than four floating boxes.
   ========================================================================= */

.o2d-featcat {
    padding: var(--o2d-3) 0;
}

.o2d-featcat__inner {
    display: grid;
    /* 300px, not 270: "Professionalism" is 15 characters of ExtraBold and the
       narrower column could not fit it on one line at any readable size. */
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    background: var(--o2d-card);
    border: 1px solid var(--o2d-card-line);
    border-radius: var(--o2d-r-lg);
    overflow: hidden;
}

/* ---- intro panel ---- */
.o2d-featcat__intro {
    position: relative;
    padding: var(--o2d-6);
    border-right: 1px solid var(--o2d-card-line);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--o2d-3);
}

/* The design's orange arc and dot pattern, bottom-left. Decorative, so it is
   a background rather than an <img> — nothing here needs describing. */
.o2d-featcat__intro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    height: 90px;
    background: url("/assets/images/o2d/deco-arc.png") left bottom / contain no-repeat;
    opacity: .9;
    pointer-events: none;
}

.o2d-featcat__kicker {
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-sm);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--o2d-ink);
}
.o2d-featcat__kicker em,
.o2d-featcat__title em {
    font-style: normal;
    color: var(--o2d-accent);
}

.o2d-featcat__title {
    margin: 0;
    font-family: var(--o2d-display);
    font-weight: 800;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.12;
    color: var(--o2d-ink);

    /* The theme sets `word-break: break-word` on every heading, which split
       this one straight down the middle of a word -- "Professionali / sm".
       Normal wrapping is restored, and if a long word ever does have to break
       it hyphenates at a syllable instead (the document carries lang="en"). */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

.o2d-featcat__copy {
    margin: 0;
    font-size: var(--o2d-fs-base);
    line-height: 1.5;
    color: var(--o2d-ink-2);
}

/* Outlined, as drawn — the filled accent button belongs to the banners. */
.o2d-featcat__cta {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--o2d-5);
    border: 1px solid var(--o2d-ink);
    border-radius: var(--o2d-r-sm);
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-sm);
    font-weight: 700;
    color: var(--o2d-ink);
    text-decoration: none;
}
.o2d-featcat__cta:hover {
    background: var(--o2d-accent);
    border-color: var(--o2d-accent);
    color: #fff;
}

/* ---- card rail ---- */
.o2d-featcat__rail {
    position: relative;
    min-width: 0;
}

/* Swiper sizes itself (and each slide) to its content's own height by
   default, so `.o2d-featcat__card`'s `height: 100%` was only ever 100% of
   that shorter content box -- the divider between cards stopped wherever
   that card's own text ended, short of the taller intro panel beside it.
   Stretching the Swiper chain to the rail's own full height (set by the
   grid row it shares with the intro panel) makes every card, and so every
   divider, reach the same bottom edge. */
.o2d-featcat__rail,
.o2d-featcat__rail .swiper,
.o2d-featcat__rail .swiper-wrapper,
.o2d-featcat__rail .swiper-slide {
    height: 100%;
}

.o2d-featcat__card {
    display: flex;
    flex-direction: column;
    gap: var(--o2d-2);
    height: 100%;
    padding: var(--o2d-5) var(--o2d-4);
    border-right: 1px solid var(--o2d-card-line);
    color: var(--o2d-ink);
    text-decoration: none;
}
.o2d-featcat__card:hover .o2d-featcat__name { color: var(--o2d-accent); }

.o2d-featcat__thumb {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--o2d-strip);
    border-radius: var(--o2d-r);
    overflow: hidden;
}
.o2d-featcat__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;   /* the photographs are shot on white */
}

.o2d-featcat__name {
    font-family: var(--o2d-display);
    font-size: var(--o2d-fs-base);
    font-weight: 700;
    line-height: 1.25;
}
.o2d-featcat__count {
    font-size: var(--o2d-fs-sm);
    color: var(--o2d-ink-3);
}

/* Arrows sit on the rail's edges, as drawn. */
.o2d-featcat__prev,
.o2d-featcat__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--o2d-line);
    border-radius: 50%;
    background: var(--o2d-surface);
    color: var(--o2d-ink);
    cursor: pointer;
    padding: 0;
}
/* Both set the same way, inset from inside the rail's own edges -- a
   negative offset on the right one used to push it past the card's own
   right edge, where `.o2d-featcat__inner`'s `overflow: hidden` clipped it,
   so only the left arrow ever looked like a complete circle. */
.o2d-featcat__prev { left: var(--o2d-3); }
.o2d-featcat__next { right: var(--o2d-3); }
.o2d-featcat__prev:hover,
.o2d-featcat__next:hover { background: var(--o2d-accent); border-color: var(--o2d-accent); color: #fff; }

.o2d-featcat__state { padding: var(--o2d-7) var(--o2d-5); text-align: center; }

.o2d-featcat__skeleton {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--o2d-4);
    padding: var(--o2d-5) var(--o2d-4);
}
.o2d-featcat__skeleton > div {
    min-height: 190px;
    background: var(--o2d-strip);
    border-radius: var(--o2d-r);
}

@media (max-width: 991px) {
    /* The panel stacks above the rail; its border moves with it. */
    .o2d-featcat__inner { grid-template-columns: minmax(0, 1fr); }
    .o2d-featcat__intro {
        border-right: 0;
        border-bottom: 1px solid var(--o2d-card-line);
        padding: var(--o2d-5);
        gap: var(--o2d-2);
    }
    .o2d-featcat__intro::after { width: 120px; height: 60px; opacity: .6; }
    .o2d-featcat__cta { margin-top: var(--o2d-2); }
    /* Inside the card now, where there is room, rather than hanging off an
       edge that is flush with the viewport. */
    .o2d-featcat__prev { left: 4px; }
    .o2d-featcat__next { right: 4px; }
    .o2d-featcat__skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .o2d-featcat { padding: var(--o2d-5) 0; }
}