/* =========================================================================
   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 ------------------------------------------------------- */
    /* These are only the cold-start defaults -- the brand colour is owned by
       the admin panel (GET /web-config) and applied at runtime by BrandTheme,
       which also caches it so a returning visitor's first paint is already
       correct. Keep them in step with admin anyway: they are what a first-ever
       visitor sees for the few hundred ms before the request lands. */
    --o2d-accent: #fc8a35;
    --o2d-accent-hover: #de792f;
    --o2d-accent-ink: #bd6828;
    --o2d-accent-wash: #fff1e6;
    --o2d-accent-ring: rgba(252, 138, 53, .22);
    --o2d-secondary: #000000;

    /* ---- 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 -------------------------------------------------------- */
    --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);
}

/* =========================================================================
   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; }

/* =========================================================================
   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
   -------------------------------------------------------------------------
   Auto-fill so the grid reflows by available width rather than fixed
   breakpoints — no column class juggling, and it never overflows.
   ========================================================================= */

.o2d-grid {
    display: grid;
    gap: var(--o2d-4);
    grid-template-columns: repeat(auto-fill, minmax(var(--o2d-col, 220px), 1fr));
}
.o2d-grid--wide { --o2d-col: 280px; }
.o2d-grid--narrow { --o2d-col: 170px; }

/* 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-mono);
    font-size: var(--o2d-fs-base);
    font-weight: 600;
    color: var(--o2d-ink);
    line-height: 1.35;
    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
   ========================================================================= */

.o2d-layout {
    display: grid;
    gap: var(--o2d-5);
    grid-template-columns: 260px 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;
}
.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 { min-width: 0; overflow-wrap: anywhere; }
.o2d-check .count { margin-left: auto; 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: 38px;
    min-height: 38px;
    padding: 0 var(--o2d-2);
    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-sm);
    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; }

/* =========================================================================
   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 ---- */
.o2d-header__top {
    background: var(--o2d-accent);
    color: #fff;
    font-size: var(--o2d-fs-sm);
}
.o2d-header__top-inner {
    display: flex;
    align-items: center;
    gap: var(--o2d-4);
    min-height: 38px;
}
.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);
}

/* ---- main row ---- */
.o2d-header__main { padding: var(--o2d-4) 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; }
.o2d-header__logo img { height: 42px; width: auto; display: block; }

/* The search bar takes the slack so the row never wraps awkwardly. */
.o2d-header__search { flex: 1 1 280px; min-width: 0; }

/* 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%;
}
.o2d-header__search input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 118px 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);
}
.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); }

.o2d-header__search-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--o2d-2);
    border: 0;
    border-radius: var(--o2d-r-sm);
    background: var(--o2d-accent);
    color: #fff;
    font-size: var(--o2d-fs-base);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.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);
}

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

.o2d-header__nav-inner {
    display: flex;
    align-items: center;
    gap: var(--o2d-5);
    min-height: 54px;
}

.o2d-header__cats {
    display: flex;
    align-items: center;
    gap: var(--o2d-2);
    flex: none;
    padding: var(--o2d-2) var(--o2d-3);
    border-radius: var(--o2d-r);
    background: var(--o2d-surface-2);
    font-weight: 600;
    color: var(--o2d-ink);
    cursor: pointer;
}
.o2d-header__menu { flex: 1; min-width: 0; }
.o2d-header__cta { flex: none; }

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

@media (max-width: 1199px) {
    .o2d-header__hotline { display: none; }
    .o2d-header__nav { display: none; }       /* nav lives in the drawer */
    .o2d-header__burger { display: inline-flex; }
    .o2d-header__welcome { display: none; }
}

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

    /* Logo + burger + actions on one line, search on its own below. */
    .o2d-header__main-inner { flex-wrap: wrap; gap: var(--o2d-3); }
    .o2d-header__search { order: 10; flex: 1 0 100%; }
    .o2d-header__actions { margin-left: auto; }
    .o2d-header__logo img { height: 34px; }
    .o2d-header__search-label { display: none; }
    .o2d-header__search-btn { width: 46px; }
    .o2d-header__search input { padding-right: 56px; }
}

/* -------------------------------------------------------------------------
   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 {
    height: 44px;
    padding: 0 var(--o2d-3);
    gap: var(--o2d-2);
    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: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: #15191f;
    color: rgba(255, 255, 255, .72);
    font-size: var(--o2d-fs-base);
    padding-top: var(--o2d-7);
}

.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;
}

.o2d-footer__title {
    margin: 0 0 var(--o2d-3);
    color: #fff;
    font-size: var(--o2d-fs-md);
    font-weight: 600;
}

.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); }
    .o2d-footer__grid { grid-template-columns: 1fr; gap: var(--o2d-5); }
    .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 { padding-right: 34px; }
.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-5);
}

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

@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); }

/* --- 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-md);
    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 {
    /* The theme sets this to margin-top: 50px via a utility class; pushing it
       to the bottom instead keeps the footer pinned when the menu is short and
       flows naturally when it is long. */
    margin-top: auto !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;
    text-align: center;
    color: var(--o2d-accent);
}

.side-bar .contact-area .phone a {
    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;
}

/* 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;
}