/* ================================================================
   OFFSHORE ELECTRICS — style.css
   Loads AFTER ectcart.css and ectstyle.css — our rules win by cascade
================================================================ */

/* 1. Custom Properties */
:root {
    /* OSE light performance-theme palette — electric blue accent on a
       white/light-gray canvas. Never hardcode these hexes in component
       rules; always go through the custom properties below. */
    --color-primary:  #0057B8;   /* ose-dark-blue — links, primary accent */
    --color-primary-dk: #003E82; /* darker still — link hover */
    /* Text-only alias for --color-primary, used everywhere it colors TEXT
       sitting on --color-page-bg (inline links, discount amounts, etc).
       Equals --color-primary in light mode (no visual change) but gets its
       own lighter dark-mode value below — --color-primary itself can't be
       lightened globally because it also backs solid buttons/badges with
       white text, which already pass AA at the current value. */
    --color-link:     #0057B8;
    --color-dark:     #070D12;   /* ink-black — header, footer */
    --color-navy:     #14365A;   /* oxford-navy — dark bands */
    --color-surface:  #3E5A77;   /* oxford-navy, lightened — elevated dark surfaces */
    /* Darkened from the original #0A84FF (hue/saturation preserved, only
       lightness reduced) — white text on the flat/top-of-gradient value
       measured 3.65:1, under WCAG AA's 4.5:1 for normal-size text (this is
       used broadly: CTA buttons, "OSE Pick"/badge fills). #0073E8 clears it
       at 4.55:1 while staying recognizably the same brand blue. --color-cta-dk
       (gradient bottom stop / hover) was already compliant at 6.87:1 — unchanged. */
    --color-cta:      #0073E8;   /* ose-blue — CTA button gradient top stop */
    --color-cta-dk:   #0057B8;   /* ose-dark-blue — CTA button gradient bottom stop / hover */
    --color-accent:   #0073E8;   /* ose-blue — highlights only; same fix as --color-cta above (identical value, identical white-text-badge failure) */
    --color-logo-blue: #0091FF;  /* exact blue sampled from the "O" in the logo mark — nav gradient match */
    --color-warm:     #F5A623;   /* amber — sparing warm accent against the all-blue palette, e.g. featured/sale badges. Pair with --color-dark text, not white (fails contrast at badge sizes) */
    --color-warning:  #F59E0B;   /* ose-warning */
    --color-success:  #2FA84F;   /* ose-success */
    --color-bestseller: #E42735; /* vivid red — genuine Best Seller badge; needs to read clearly against the dark-navy product image bg, where --color-cta blue was blending in. Darkened one notch from #E63946 (imperceptible visually) so white badge text clears WCAG AA (4.53:1, was 4.17:1). */
    --color-light:    #EAF4FF;   /* ose-light-blue — sidebar, image bg, tinted section panels */
    --color-light-gray: #F5F7FA; /* ose-light-gray — light-gray section panels, footer */
    --color-border:   #DCE3EA;   /* ose-border */
    --color-page-bg:  #FFFFFF;   /* page background */
    --color-card-bg:  #ffffff;
    --color-text:     #1B1B1B;   /* ose-black */
    --color-muted:    #666666;   /* ose-gray */
    --color-muted-light: #B4B9BF; /* lighter dim-grey — featured-products button + title hover, needs dark text (not white) to stay AA-compliant */
    --sidebar-width:  220px;
    --radius:         12px;
    --transition:     0.25s ease;

    /* Spacing scale */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;

    /* Shadow system (3 levels) */
    --shadow-sm: 0 2px 6px rgba(13,23,33,0.06);
    --shadow-md: 0 4px 15px rgba(13,23,33,0.08);
    --shadow-lg: 0 12px 30px rgba(10,132,255,0.15);

    /* Legacy aliases — other rules in this file still reference these two
       names directly; remove once every call site migrates to --shadow-md/
       --shadow-lg or --card-shadow/--card-shadow-hover in a later spec. */
    --shadow-card:       var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);

    /* CTA glow — brand-colored emphasis shadow, distinct from the neutral
       --shadow-sm/md/lg elevation scale. Buttons need this, not a neutral
       shadow, to read as "glowing" per the OSE branding spec. */
    --shadow-glow:       0 4px 14px rgba(10,132,255,0.35);
    --shadow-glow-hover: 0 8px 26px rgba(10,132,255,0.5);

    /* Button system */
    --btn-radius: var(--radius);
    --btn-padding-y: var(--space-1);
    --btn-padding-x: var(--space-3);
    --btn-font-weight: 700;

    /* Card system */
    --card-radius: var(--radius);
    --card-padding: var(--space-3);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);

    /* Shared hover animation */
    --hover-lift: -4px;
    --hover-transition: var(--transition);

    /* Receipt / thank-you tokens (themed below for dark mode) */
    --rc-surface:     #F7F9FC;   /* receipt panel background */
    --rc-headbar:     #EEF2FF;   /* heading-bar background */
    --rc-border:      #E2E8F0;   /* receipt borders */
    --rc-text:        var(--color-text);
    --rc-text-head:   var(--color-dark);
    --rc-text-muted:  var(--color-muted);
    --rc-accent:      var(--color-primary);  /* order-id bar, section underline, grand total */
    --rc-danger:      #DC2626;   /* discounts */
    --rc-radius:      var(--radius);
    --rc-radius-sm:   6px;
}

[data-theme="dark"] {
    --color-page-bg:  #0D1117;
    --color-card-bg:  #161B22;
    --color-text:     #E6EDF3;
    --color-muted:    #8B949E;
    --color-light:    #1C2433;
    /* --color-link overrides --color-primary specifically for TEXT usages
       (see --color-link declaration in :root) — --color-primary itself stays
       unchanged here since it also backs solid buttons/badges with white
       text (e.g. "background: var(--color-primary); color:#fff"), which
       already pass AA on their own and would regress if lightened. */
    --color-link: #0079FF;

    /* Shadow system — dark mode: darker, less saturated (a bright blue glow
       at light-mode opacity looks wrong on dark surfaces) */
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 30px rgba(10,132,255,0.25);

    /* Receipt / thank-you tokens — dark */
    --rc-surface:     #1B222E;   /* raised above #161B22 card */
    --rc-headbar:     #222C3B;
    --rc-border:      #30363D;
    --rc-text-head:   #E6EDF3;
    --rc-accent:      #5B8DEF;   /* brighter blue reads better on dark */
    --rc-danger:      #F87171;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 { color: var(--color-text); }

/* 2. Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    color: var(--color-text);
    background: var(--color-page-bg);
    line-height: 1.6;
    transition: background var(--transition), color var(--transition);
}
img    { max-width: 100%; height: auto; display: block; }
a      { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 3. Typography */
h1 { font-size: 2rem;     font-weight: 800; color: var(--color-dark); line-height: 1.2; }
h2 { font-size: 1.5rem;   font-weight: 700; color: var(--color-dark); }
h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-dark); }

/* 4. Layout */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}
.site-main { position: relative; padding: 24px 0 48px; }
/* Ambient glow layer behind the homepage card stack — bleeds a faint brand-
   blue tint through the gaps between cards so light/dark card seams read as
   a continuous surface instead of flat, disconnected white space. */
.site-main::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(600px circle at 12% 6%,  rgba(8,132,237,0.07), transparent 60%),
        radial-gradient(700px circle at 88% 42%, rgba(8,132,237,0.055), transparent 60%),
        radial-gradient(650px circle at 18% 78%, rgba(8,132,237,0.055), transparent 60%);
}
.site-main > .container { position: relative; z-index: 1; }

/* Scroll-reveal for the homepage card stack (js/main.js) — sections fade
   and rise into place as they enter the viewport instead of just appearing,
   softening the light/dark handoff between adjacent cards. */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

.layout-sidebar {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: 24px;
    align-items: start;
}

.layout-full {
    display: block;
    width: 100%;
}

.listing-h1 {
    margin: 0 0 16px;
}

/* Manufacturer intro copy (products.php) and the How To Articles hub intro —
   same treatment, both sit directly under a listing-h1 above the grid. */
.listing-intro,
.guides-hub-intro {
    max-width: 780px;
    margin: -6px 0 24px;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.listing-intro a,
.guides-hub-intro a { color: var(--color-link); font-weight: 600; }

/* Manufacturer index grid (manufacturer-index.php) — replaces the page's old
   inline <style> block so brand cards use real design tokens and support
   dark mode instead of hardcoded hex. */
.mfr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 48px;
}
.mfr-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 18px;
    transition: background var(--transition), border-color var(--transition);
}
.mfr-card-name { font-weight: 700; font-size: 0.9375rem; color: var(--color-link); }
.mfr-card-blurb { font-size: 0.75rem; line-height: 1.4; color: var(--color-muted); }
.mfr-card:hover { background: var(--color-cta); border-color: var(--color-cta); text-decoration: none; }
.mfr-card:hover .mfr-card-name,
.mfr-card:hover .mfr-card-blurb { color: #fff; }
[data-theme="dark"] .mfr-card { background: var(--color-surface); border-color: rgba(255,255,255,0.12); }
@media (max-width: 768px) { .mfr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mfr-grid { grid-template-columns: 1fr; } }

.layout-centered {
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

/* sorry.php only — dress up ECT's plain error/no-results table with an
   icon and a styled "continue shopping" button. Scoped to body.page-sorry
   so other pages sharing .layout-centered (contact, login, gift-cert, etc.)
   are unaffected. */
.page-sorry .layout-centered { text-align: center; padding: 56px 32px; }
.page-sorry .sorry-icon {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-link);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-sorry .layout-centered table { margin: 0 auto; }
.page-sorry .layout-centered td { font-size: 1.0625rem; color: var(--color-text); line-height: 1.7; }
.page-sorry .layout-centered a.ectlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    background: var(--color-cta);
    color: #fff !important;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: background var(--transition);
}
.page-sorry .layout-centered a.ectlink:hover { background: var(--color-cta-dk); }

/* 4a. Inline-SVG icons — self-hosted replacements for the above-the-fold
   Font Awesome glyphs (header, hero, stats bar). Font Awesome's own CSS
   loads async (media="print" swap trick in header.php) so a plain
   <i class="fa-..."> is empty until that stylesheet attaches, then the
   icon glyph pops in — a classic desktop CLS source, worst on elements
   with no fixed box (e.g. the 4.5rem stats-bar icons) since the glyph
   appearing shoves sibling content sideways. These render synchronously
   (no external stylesheet/font dependency) so there's nothing to pop in.
   Sized off font-size/color like the FA icons they replace: 1em square,
   fill: currentColor. Don't pair with fa-xs/fa-sm (those live in the same
   async FA stylesheet and would reintroduce the same late-resize CLS) —
   use .icon-svg-xs / .icon-svg-sm instead, sized locally in this file. */
.icon-svg { height: 1em; width: auto; display: inline-block; vertical-align: -0.125em; fill: currentColor; flex: none; }
.icon-svg-xs { height: 0.75em; }
.icon-svg-sm { height: 0.875em; }

/* 5. Header */
.promo-bar { background: var(--color-cta-dk); color: #fff; }
.promo-bar-inner {
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.promo-msg {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.promo-msg.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.header-bar  { background: var(--color-dark); }
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.site-logo {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
}
.site-logo img { height: 108px; width: auto; display: block; }
.site-logo:hover { text-decoration: none; opacity: 0.9; }

.header-bar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }

.header-bottom {
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk));
    position: relative;
}
.header-bottom-inner { display: flex; align-items: center; gap: 16px; padding: 8px 0; }

.desktop-nav { display: flex; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.desktop-nav a {
    color: rgba(255,255,255,0.85);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.desktop-nav a:hover {
    color: #fff;
    background: var(--color-cta-dk);
    border-color: var(--color-cta-dk);
    text-decoration: none;
    box-shadow: 0 8px 36px rgba(8,132,237,0.55);
    transform: translateY(-2px);
}
.desktop-nav a.active { color: #fff; background: var(--color-cta); border-color: var(--color-cta); text-decoration: none; box-shadow: 0 4px 24px rgba(8,132,237,0.45); }
.desktop-nav a.active:hover { background: var(--color-cta-dk); border-color: var(--color-cta-dk); box-shadow: 0 8px 36px rgba(8,132,237,0.55); transform: translateY(-2px); }

.header-icons { display: flex; align-items: center; gap: 12px; }
.icon-btn {
    color: rgba(255,255,255,0.85);
    font-size: 1.125rem;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    position: relative;
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}
.icon-btn:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; }

.cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background var(--transition), box-shadow var(--transition);
    box-shadow: 0 2px 10px rgba(10,132,255,0.35);
}
.cart-btn:hover { background: var(--color-cta-dk); text-decoration: none; color: #fff; box-shadow: 0 6px 20px rgba(10,132,255,0.45); }

/* Hover mini-cart (ECT vendor widget) — desktop only; themed to OSE palette */
.nav-cart-dropdown { position: relative; flex-shrink: 0; }
.mobile-only-cart { display: none; }

.nav-cart-dropdown .ectdp_minicartmainwrapper_ct { position: relative; width: auto; }
.nav-cart-dropdown .ectdp_minicartmainwrapper { position: static; right: auto; }

.nav-cart-dropdown .ectdp_minicartopen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: none;
    clear: none;
    width: auto;
    height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--color-cta);
    background: var(--color-cta);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition);
}
.nav-cart-dropdown .ectdp_minicartopen:hover { background: var(--color-cta-dk); border-color: var(--color-cta-dk); color: #fff; }
.nav-cart-dropdown .ectdp_minicartopen img { display: none; } /* vendor arrow-down — replaced by inline-SVG icon below */
.nav-cart-dropdown .ectdp_minicartopen::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nav-cart-dropdown .ectdp_minicartopen a,
.nav-cart-dropdown .ectMCquant { color: inherit !important; text-decoration: none !important; }
/* Tap-target fix: the <a> is the only real link inside the pill, but as an
   inline element it only boxes its own text line — stretch it to the full
   pill height so its clickable area matches what it visually looks like. */
.nav-cart-dropdown .ectdp_minicartopen a {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.nav-cart-dropdown .ectdp_minicartcontainer {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    z-index: 150;
    width: 550px;
    background: var(--color-card-bg);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    padding: 0.85rem;
    color: var(--color-text);
    font-size: 0.875rem;
}
[data-theme="dark"] .nav-cart-dropdown .ectdp_minicartcontainer { border-color: rgba(255,255,255,0.1); }

.nav-cart-dropdown .ectdp_pincart,
.nav-cart-dropdown .ectdp_minicarttotal { color: var(--color-dark); }
[data-theme="dark"] .nav-cart-dropdown .ectdp_pincart,
[data-theme="dark"] .nav-cart-dropdown .ectdp_minicarttotal { color: var(--color-text); }
.nav-cart-dropdown .ectdp_pincart {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.nav-cart-dropdown .ectdp_pincart::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    flex-shrink: 0;
    background-color: var(--color-cta);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nav-cart-dropdown .ectdp_minicarttotal {
    /* vendor's div.minicartcnt_dp{text-align:center} outscores .ectdp_minicarttotal's
       own text-align:right (element+class beats class alone), so it's re-asserted here */
    text-align: right;
    margin-right: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 8px;
    padding-top: 8px;
    font-weight: 700;
    font-size: 1rem;
}
.nav-cart-dropdown .ectdp_minicarttotal .ectMCtot {
    color: var(--color-cta-dk);
    font-size: 1.05rem;
    font-weight: 800;
}
[data-theme="dark"] .nav-cart-dropdown .ectdp_minicarttotal .ectMCtot { color: var(--color-cta); }
[data-theme="dark"] .nav-cart-dropdown .ectdp_pincart,
[data-theme="dark"] .nav-cart-dropdown .ectdp_minicarttotal { border-color: rgba(255,255,255,0.1); }

.nav-cart-dropdown .ectdp_empty { color: var(--color-muted); }
.nav-cart-dropdown .ectdp_minicartitemName { color: var(--color-text); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="dark"] .nav-cart-dropdown .ectdp_minicartitemName { border-bottom-color: rgba(255,255,255,0.1); }
.nav-cart-dropdown .ectMCtot { color: var(--color-muted); font-size: 0.75rem; }
.nav-cart-dropdown .ecHidDsc { color: var(--color-cta-dk); }

/* Cart-abandonment nudge — inserted by js/main.js as the first child of the
   vendor's #ectdp_minicartcontainer, re-applied after every AJAX rebuild. */
.ose-cart-nudge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.65rem;
    padding: 8px 10px;
    background: var(--color-light);
    border: 1px solid rgba(6,99,178,0.18);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
}
.ose-cart-nudge i { color: var(--color-cta); flex-shrink: 0; }
[data-theme="dark"] .ose-cart-nudge { background: var(--color-surface); border-color: rgba(255,255,255,0.12); }

.nav-cart-dropdown .ectdp_minicartitemDelete { position: relative; }
.nav-cart-dropdown .cartdelete { opacity: 0; }
.nav-cart-dropdown .ectdp_minicartitemDelete::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 16px;
    background-color: var(--color-muted); /* trash-can */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z'/%3E%3C/svg%3E") no-repeat center / contain;
    position: absolute;
    /* row is flex-centered now (not the old fixed-height float layout),
       so the icon is centered on its own box rather than pinned from the top */
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: background-color var(--transition);
}
.nav-cart-dropdown .ectdp_minicartitemDelete:hover::before { background-color: var(--color-cta); }

/* Product thumbnail */
.nav-cart-dropdown .ectdp_minicartitemImg { margin-right: 10px; }
.nav-cart-dropdown .ectdp_minicartImg {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 0;
}
[data-theme="dark"] .nav-cart-dropdown .ectdp_minicartImg { border-color: rgba(255,255,255,0.12); }

/* Item rows — hover highlight; scoped to .mcLNitems since .minicartcnt_dp is reused
   for non-item rows (totals, shipping, discounts) that shouldn't get this treatment.
   Vendor markup floats img/name/delete at fixed widths sized for a 320px cart
   (.ectdp_minicartitemName is 208px); overridden to flex so the row fills the
   wider 600px dropdown instead of leaving a blank gap on the right. */
.nav-cart-dropdown .mcLNitems .minicartcnt_dp {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 6px 0;
    border-radius: 6px;
    transition: background var(--transition);
}
.nav-cart-dropdown .mcLNitems .minicartcnt_dp:hover { background: rgba(0,0,0,0.10); }
[data-theme="dark"] .nav-cart-dropdown .mcLNitems .minicartcnt_dp:hover { background: rgba(255,255,255,0.14); }
.nav-cart-dropdown .mcLNitems .ectdp_minicartitemImg { float: none; flex: 0 0 auto; }
.nav-cart-dropdown .mcLNitems .ectdp_minicartitemName {
    float: none;
    width: auto;
    flex: 1 1 auto;
    text-align: left;
    padding: 0 10px;
}
.nav-cart-dropdown .mcLNitems .ectdp_minicartitemDelete { float: none; flex: 0 0 auto; padding-top: 0; }

/* Shipping / discount line items — read as a clean line-item list above the total */
.nav-cart-dropdown .ecHidDsc { padding: 4px 0 8px; }
.nav-cart-dropdown .minicartdsc { font-weight: 700; }
.nav-cart-dropdown .mcMCdsct,
.nav-cart-dropdown .ectMCship { font-weight: 700; color: var(--color-dark); }
[data-theme="dark"] .nav-cart-dropdown .mcMCdsct,
[data-theme="dark"] .nav-cart-dropdown .ectMCship { color: var(--color-text); }

/* Empty-cart state — icon above the vendor's plain text message */
.nav-cart-dropdown .ectdp_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}
.nav-cart-dropdown .ectdp_empty::before {
    content: '';
    display: block;
    width: 28px;
    height: 24px;
    background-color: var(--color-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Close/Checkout row — Checkout reads as the primary action, Close as secondary */
.nav-cart-dropdown .ectdp_minicartcontainer .minicartcnt_dp:has(.dpminicartcheckout) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.nav-cart-dropdown .dpminicartcheckout.ectbutton { flex: 1; }
.nav-cart-dropdown .dpminicartclose.ectbutton {
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    color: var(--color-text) !important;
    box-shadow: none !important;
}
.nav-cart-dropdown .dpminicartclose.ectbutton:hover {
    background: rgba(0,0,0,0.05) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .nav-cart-dropdown .dpminicartclose.ectbutton { border-color: rgba(255,255,255,0.2) !important; }
[data-theme="dark"] .nav-cart-dropdown .dpminicartclose.ectbutton:hover { background: rgba(255,255,255,0.08) !important; }

.cart-icon-link { position: relative; }
.cart-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-cta);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

/* Desktop nav — "All Categories" mega-dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 150;
    width: 800px;
    background: var(--color-dark);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: rgba(255,255,255,0.8);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.nav-dropdown-panel a i { width: 16px; text-align: center; color: var(--color-accent); }
.nav-dropdown-panel a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.nav-dropdown-panel a.nav-dropdown-viewall {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    justify-content: space-between;
    color: var(--color-accent);
}
.nav-dropdown-panel a.nav-dropdown-viewall i { color: inherit; width: auto; }

.hamburger { display: none; color: rgba(255,255,255,0.85); font-size: 1.25rem; padding: 6px; }

.mobile-nav { background: var(--color-navy); padding: 8px 0; }
.mobile-nav a {
    display: block;
    color: rgba(255,255,255,0.85);
    padding: 12px 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { background: rgba(255,255,255,0.07); color: #fff; }

.search-bar-wrap { width: 620px; }
.search-wrap { position: relative; }

/* Desktop: search box lives inline in the header, always visible; toggle button is mobile-only */
@media (min-width: 769px) {
    .search-bar-wrap[hidden] { display: block; }
    #search-toggle { display: none; }
}
.search-form {
    display: flex;
    align-items: stretch;
    position: relative;
}
.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    font-size: 0.875rem;
    pointer-events: none;
}
.search-input {
    flex: 1;
    padding: 10px 16px 10px 38px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-right: none;
    border-radius: 999px 0 0 999px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #fff;
    outline: none;
    transition: border-color var(--hover-transition), box-shadow var(--hover-transition);
}
.search-input:focus { border-color: var(--color-cta); box-shadow: 0 0 0 3px rgba(10,132,255,0.25); }
.search-input::placeholder { color: rgba(255,255,255,0.35); }
/* Suppress the browser's native type="search" clear button — we render our own styled .search-clear */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-input::-ms-clear { display: none; width: 0; height: 0; }
.search-clear {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.07);
    border: none;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    color: rgba(255,255,255,0.5);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color var(--transition);
}
.search-clear:hover { color: #fff; }
.search-clear[hidden] { display: none; }
.search-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border: none;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk));
    color: #fff;
    font-size: 0.9375rem;
    font-weight: var(--btn-font-weight);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: background var(--hover-transition), box-shadow var(--hover-transition);
}
.search-submit:hover { background: var(--color-cta-dk); box-shadow: var(--shadow-glow-hover); }

/* Header search — live suggestion dropdown */
.search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-card-bg);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 1000; /* above ECT's mini-cart wrapper (ectcart.css .ectdp_minicartmainwrapper_ct, z-index:997) */
    text-align: left;
    max-height: 70vh;
    overflow-y: auto;
}
[data-theme="dark"] .search-suggest { border-color: rgba(255,255,255,0.1); }

.ssr-section-label {
    padding: 8px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}
.ssr-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; min-height: 44px; }
.ssr-row:hover,
.ssr-row.is-selected { background: var(--color-light); }
.ssr-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--color-light);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .ssr-thumb { border-color: rgba(255,255,255,0.1); }
.ssr-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ssr-cat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 1rem;
}
.ssr-info { flex: 1; min-width: 0; }
.ssr-name {
    color: var(--color-text);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ssr-price {
    color: var(--color-cta);
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 2px;
}
.ssr-empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.8125rem;
}
.ssr-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    color: var(--color-muted);
    font-size: 0.8125rem;
}
.ssr-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.15);
    border-top-color: var(--color-cta);
    border-radius: 50%;
    display: inline-block;
    animation: ssr-spin 0.6s linear infinite;
}
[data-theme="dark"] .ssr-spinner { border-color: rgba(255,255,255,0.15); border-top-color: var(--color-cta); }
@keyframes ssr-spin { to { transform: rotate(360deg); } }
.ssr-match {
    background: none;
    color: inherit;
    font-weight: 700;
}
.ssr-footer { padding: 8px 12px; border-top: 1px solid rgba(0,0,0,0.08); text-align: center; }
[data-theme="dark"] .ssr-footer { border-color: rgba(255,255,255,0.1); }
.ssr-footer a {
    color: var(--color-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    padding: 6px 0;
}
.ssr-footer a:hover { color: var(--color-cta); }

/* Header search — "Previously Searched" / "Recently Viewed" panel, shown
   when the input is focused empty (see js/main.js showRecentPanel()) */
.ssr-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
}
.ssr-recent-header .ssr-section-label { padding: 0; }
.ssr-recent-clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition);
}
.ssr-recent-clear:hover { color: var(--color-cta); }
.ssr-recall-icon {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    transform: rotate(-45deg);
}
.ssr-recent-row:hover .ssr-recall-icon,
.ssr-recent-row.is-selected .ssr-recall-icon { color: var(--color-cta); }

.ssr-rv-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px 4px;
}
.ssr-rv-arrow {
    flex-shrink: 0;
    width: 52px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.625rem;
    cursor: pointer;
    transition: color var(--transition);
}
.ssr-rv-arrow:hover { color: var(--color-cta); }
.ssr-rv-arrow[hidden] { display: none; }
.ssr-rv-strip {
    display: flex;
    gap: 10px;
    padding: 6px 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ssr-rv-strip::-webkit-scrollbar { display: none; }
.rvp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 64px;
    flex-shrink: 0;
    text-align: center;
}
.rvp-item .ssr-thumb { width: 56px; height: 56px; }
.rvp-name {
    color: var(--color-text);
    font-size: 0.6875rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.rvp-item:hover .rvp-name { color: var(--color-cta); }

/* 6. Hero */
.hero {
    background: var(--color-dark);
    position: relative;
    overflow: hidden;
    padding: 36px 0 56px;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}
.glow-l {
    position: absolute;
    top: -200px;
    left: -200px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(8,132,237,0.28) 0%, transparent 60%);
    pointer-events: none;
}
.glow-r {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(8,132,237,0.18) 0%, transparent 60%);
    pointer-events: none;
}

.hero-content {
    max-width: 520px;
    position: relative;
    z-index: 3;
}

/* Boat photo — bleeds to the right edge of the viewport, dominating the
   right side of the hero, blended into the dark hero surface with a soft
   left-edge fade so it reads as breaking into the page, not a rectangular
   banner photo. */
.hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 66%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}
.hero-boat-img {
    position: absolute;
    top: 50%;
    right: 2%;
    width: 96%;
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 3%);
}

/* Dark gradient over the left of the hero so the text stays fully readable
   against the boat photo, fading out toward the right so the boat itself
   stays bright and pops. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--color-dark) 0%,
        color-mix(in srgb, var(--color-dark) 82%, transparent) 32%,
        color-mix(in srgb, var(--color-dark) 35%, transparent) 50%,
        transparent 66%);
}

/* Eyebrow label + trailing fade-out rule, instead of a pill badge */
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #5EAFF3;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.hero-eyebrow::after {
    content: '';
    flex: 1 1 auto;
    max-width: 220px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
}

.hero h1 {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-style: italic;
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.98;
    color: #fff;
    margin-bottom: 20px;
}
.grad-text {
    background: linear-gradient(95deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-sub {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.52);
    line-height: 1.8;
    margin-bottom: 36px;
    max-width: 430px;
}

.hero-ctas { display: flex; align-items: center; gap: 14px; }
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-cta);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 14px 26px;
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(8,132,237,0.45);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
}
.btn-primary:hover {
    background: var(--color-cta-dk);
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(8,132,237,0.55);
    text-decoration: none;
    color: #fff;
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.5); text-decoration: none; }

/* Trust row under the hero CTAs — same items/icons as the site's dark
   trust bar (footer), styled to sit on the hero's dark surface. */
.hero-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; list-style: none; padding: 0; margin: 36px 0 0; }
.hero-checks li { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.75); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.hero-checks i, .hero-checks svg { color: var(--color-accent); font-size: 1rem; }

/* Full-width stat bar below the hero — icon + number + label + description,
   4-up on a dark carbon-weave surface, divided by hairlines. */
.hero-stats-bar {
    background: var(--color-dark);
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 10px);
    position: relative;
    padding: 32px 0 44px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-stats-bar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.hsb-item { display: flex; align-items: center; gap: 18px; border-left: 1px solid rgba(255,255,255,0.1); padding: 0 32px; }
.hsb-item:first-child { border-left: none; }
.hsb-item i, .hsb-item svg { color: var(--color-accent); font-size: 4.5rem; flex: none; }
.hsb-num { font-size: 1.75rem; font-weight: 900; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.hsb-num span { color: var(--color-accent); }
.hsb-lbl { font-size: 0.8125rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); margin-top: 6px; }
.hsb-desc { font-size: 0.875rem; color: rgba(255,255,255,0.5); margin-top: 8px; line-height: 1.5; }
.hsb-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 36px auto 0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: rgba(255,255,255,0.55);
    transition: color var(--transition), border-color var(--transition), transform var(--transition);
}
.hsb-scroll:hover { color: #fff; border-color: rgba(255,255,255,0.4); transform: translateY(3px); }

.card-img-area {
    height: 240px;
    background: linear-gradient(135deg, #0D1E38 0%, #162B4D 50%, #0D1E38 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.card-img-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 55% 45%, rgba(8,132,237,0.5) 0%, rgba(8,132,237,0.15) 35%, transparent 65%);
}
.card-img-area::after {
    content: '';
    position: absolute;
    bottom: -30px; right: -30px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(8,132,237,0.12) 0%, transparent 70%);
}
.card-icon {
    font-size: 5rem;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 28px rgba(8,132,237,0.9)) drop-shadow(0 0 60px rgba(8,132,237,0.4));
    color: #4AABFF;
}
.card-tag {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 6px;
}
.card-body { padding: 22px; }
.card-brand { font-size: 0.6875rem; font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 5px; }
.card-name { font-size: 1.0625rem; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.35; }
.card-specs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.spec {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.65);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 6px;
}
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-price { font-size: 1.625rem; font-weight: 900; color: #fff; letter-spacing: -0.03em; }
.card-cta {
    background: var(--color-cta);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 10px 20px;
    border-radius: 9px;
    box-shadow: 0 4px 16px rgba(8,132,237,0.4);
    transition: background var(--transition), transform var(--transition);
    text-decoration: none;
}
.card-cta:hover { background: var(--color-cta-dk); transform: scale(1.03); text-decoration: none; color: #fff; }
.card-hero-img { position: relative; z-index: 1; max-height: 100%; max-width: 100%; object-fit: contain; }
.card-name-link { color: inherit; text-decoration: none; }
.card-name-link:hover { text-decoration: underline; }

/* Brand marquee */
.brand-strip {
    position: relative;
    background: var(--color-cta);
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 16px 0;
    overflow: hidden;
}
.brand-track { display: flex; animation: marquee 24s linear infinite; width: max-content; }
.brand-track:hover { animation-play-state: paused; }
/* Soften the hard blue/page-bg edge at the bottom of the strip into a fade
   instead of a crisp line, so it eases into the homepage card stack below. */
.brand-strip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    background: linear-gradient(180deg, transparent 0%, var(--color-page-bg) 100%);
    pointer-events: none;
}
.brand-item {
    padding: 0 36px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.22);
    transition: color var(--transition);
}
.brand-item:hover { color: #fff; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 7. Sidebar */
.sidebar {
    background: var(--color-light);
    border-radius: var(--radius);
    padding: 20px;
    position: sticky;
    top: 80px;
}
.sidebar h3 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-dark);
    margin-bottom: 12px;
}
.sidebar-nav a {
    display: block;
    color: var(--color-link);
    padding: 6px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(1,84,183,0.12);
    text-decoration: none;
}
.sidebar-nav a:last-child { border-bottom: none; }
.sidebar-nav a:hover { color: var(--color-dark); text-decoration: underline; }

/* 8. Breadcrumbs — ECT outputs div.catnavandcheckout */
.catnavandcheckout,
div.catnavandcheckout {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 16px;
    padding: 8px 0;
}
div.catnavandcheckout a { color: var(--color-link); text-decoration: none; }
div.catnavandcheckout a:hover { text-decoration: underline; }

/* 9. Product grid
   NOTE: This wraps raw ECT output (div.products / div.categories), which
   is a single child — grid-template-columns here would only ever apply to
   that one child, squeezing it into one column and forcing every card to
   stack one-per-row. Real column layout lives on div.products/div.categories
   themselves (see "ECT native browse surfaces" below); this wrapper stays
   a plain full-width block. */
.product-grid {
    width: 100%;
}

/* 10. Product cards */
.product-card {
    background: var(--color-card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    border: 1px solid #E8EBF0;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(10,132,255,0.3);
}
.product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--color-light);
    padding: 12px;
}
.product-card-body {
    padding: 12px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-card-name  { font-size: 0.9rem; font-weight: 600; color: var(--color-dark); line-height: 1.4; }
.product-card-price { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.product-card-btn   { margin-top: auto; }

/* 11. ECT button override — replaces ECT default #006ABA with the OSE
   primary button gradient (top ose-blue -> bottom ose-dark-blue) */
input.ectbutton,
button.ectbutton,
.ectbutton {
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk)) !important;
    background-color: var(--color-cta) !important;
    border-color: var(--color-cta) !important;
    color: #fff !important;
    border-radius: var(--btn-radius) !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-family: inherit !important;
    font-weight: var(--btn-font-weight) !important;
    cursor: pointer !important;
    /* Persistent glow at rest, per spec's "Hover: Glow slightly" — --shadow-glow
       (not the neutral --shadow-* scale) so the CTA keeps its brand-blue emphasis. */
    box-shadow: var(--shadow-glow) !important;
    transition: background var(--hover-transition), box-shadow var(--hover-transition), transform var(--hover-transition) !important;
}
input.ectbutton:hover,
button.ectbutton:hover,
.ectbutton:hover {
    background: linear-gradient(180deg, var(--color-cta-dk), var(--color-cta-dk)) !important;
    background-color: var(--color-cta-dk) !important;
    border-color: var(--color-cta-dk) !important;
    box-shadow: var(--shadow-glow-hover) !important;
    transform: translateY(-1px);
}
/* Brief tactile pulse on click/tap — pure CSS, no JS submit-intercept, so it
   can't interfere with ECT's own add-to-cart form submission/redirect flow. */
@keyframes ose-btn-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}
input.ectbutton:active,
button.ectbutton:active,
a.ectbutton:active,
.ectbutton:active {
    animation: ose-btn-pulse 0.2s ease;
}

/* 12. Section labels — shared eyebrow + heading style (homepage sections) */
.sec-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: 6px;
}
.sec-label::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-cta), var(--color-primary));
    border-radius: 1px;
}
.sec-title {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: 16px;
}

/* 12b. Category tiles (homepage) — bento grid with a featured tile */
.category-tiles {
    position: relative;
    z-index: 2;
    margin: -12px 0 32px;
    background: var(--color-card-bg);
    border-radius: var(--radius);
    padding: 32px 24px;
    box-shadow: var(--shadow-card);
}
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
}
.category-tile {
    background: var(--color-dark);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.category-tile:hover {
    border-color: rgba(8,132,237,0.45);
    background: #101820;
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.3), 0 0 0 1px rgba(8,132,237,0.18);
    text-decoration: none;
}
/* Photo tiles — the category name is baked into each graphic, so the tile
   is just the image, no text overlay. Square-ish aspect ratio matches the
   source photos (~1:1) better than the old flat 132px banner did. */
.category-tile.has-photo { aspect-ratio: 1 / 1; }
.cat-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform var(--transition);
}
.category-tile.has-photo:hover .cat-photo { transform: scale(1.06); }
/* New Items graphic reads left-to-right — anchor it left instead of the
   default center crop so the content isn't cut off. */
.cat-new .cat-photo { object-position: left center; }
/* RTR/ARTR/Kits graphic's content sits toward the left of the source image. */
.cat-rtr .cat-photo { object-position: left center; }

/* 12b. Best sellers (homepage) — Growth package feature.
   Reuses alltimesales.php's raw output (unstyled ECT template markup:
   table.border > tr > td.row1/.row2 > a); rules below reskin it to match
   the rest of the homepage instead of touching the shared admin report. */
.best-sellers { margin: 40px 0; }
.best-sellers h2 { margin-bottom: 20px; }
.best-sellers-list table.border,
.best-sellers-list table.border table.border {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse;
}
.best-sellers-list td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.best-sellers-list td.row1,
.best-sellers-list td.row2 {
    padding: 12px 16px !important;
    border-bottom: 1px solid #E8EBF0 !important;
    font-size: 0.9375rem;
}
.best-sellers-list a {
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: none;
}
.best-sellers-list a:hover { color: var(--color-link); text-decoration: underline; }

/* 13. Featured products (homepage) — dynamicdisplay.php renders plain divs
   (.ddproduct > .ddprodimage / .ddprodname / .ddproddescription / .ddprodprice),
   not a table — rules target that real markup. !important beats ECT inline
   styles. Dark/charcoal/performance treatment matching the category-tile
   graphics elsewhere on this homepage — see index.php for the .ddprodcat
   category label and .ddpricerow sale-price wrapper js/main.js injects. */
.featured-products {
    position: relative;
    margin: 32px 0;
    background: linear-gradient(180deg, #0B0F14 0%, #05070A 100%);
    border-radius: var(--radius);
    padding: 36px 24px 32px;
    overflow: hidden;
    isolation: isolate; /* keeps the texture/glow layers below from bleeding
        z-index into the header and grid, which both sit at z-index: 1 */
}
/* Very subtle carbon-fiber-adjacent texture + a faint blue glow in one
   corner — deliberately understated so it reads as "premium" rather than
   competing with the product photography for attention. */
.featured-products::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 7px),
        radial-gradient(circle at 90% 0%, rgba(10,132,255,0.10) 0%, transparent 45%);
}
.featured-products .fp-headrow,
.featured-products .ddproducts { position: relative; z-index: 1; }

.fp-headrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.fp-title {
    display: inline-block;
    position: relative;
    font-size: clamp(1.4rem, 2.2vw, 1.875rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    padding-bottom: 12px;
    margin: 0 0 6px;
}
.fp-title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-cta), var(--color-primary));
}
.fp-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
}
.fp-viewall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.fp-viewall i, .fp-viewall .icon-svg { transition: transform var(--transition); }
.fp-viewall:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
    background: rgba(10,132,255,0.1);
    text-decoration: none;
}
.fp-viewall:hover i, .fp-viewall:hover .icon-svg { transform: translateX(3px); }

.featured-products .ddproducts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.featured-products .ddproduct {
    background: linear-gradient(165deg, #1A1F26 0%, #0C0F13 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* dynamicdisplay.php wraps every field in a <form> — it, not .ddproduct,
   is the real flex column, so the form itself must stretch and lay out
   its children in a column or the price/button block below won't align
   to the bottom uniformly across cards of differing description length. */
.featured-products .ddproduct form {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.featured-products .ddproduct::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-cta), var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
    z-index: 2;
}
.featured-products .ddproduct:hover {
    transform: translateY(-6px);
    border-color: var(--color-cta);
    box-shadow: var(--shadow-glow-hover), 0 16px 40px rgba(0,0,0,0.4);
}
.featured-products .ddproduct:hover::after { transform: scaleX(1); }

.featured-products .ddprodimage {
    height: 190px;
    background: #0A0D11;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
}
/* Faint radial vignette only — kept low-opacity on purpose so it never
   competes with the product photo for visibility (spec: image is the
   primary visual focus, no busy background behind it). */
.featured-products .ddprodimage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 55% 40%, rgba(10,132,255,0.14) 0%, transparent 60%);
}
/* CLS fix: dynamicdisplay.php (vsadmin/, not editable here) prints each
   <img> with only a `height="150"` attribute and no `width` — the browser
   can't infer an aspect ratio from that, so before each photo loads its box
   collapses to ~0 and then jumps to full size, shifting layout (measured
   CLS 0.14). Locking the img to the container's own fixed size (rather than
   max-height/max-width, which depend on the image's own intrinsic size)
   reserves the box up front regardless of what loads into it. */
.featured-products .ddprodimage img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent !important;
    transition: transform var(--transition);
}
.featured-products .ddproduct:hover .ddprodimage img { transform: scale(1.05); }

/* Badges — Best Seller and Sale only fire when the card actually has the
   underlying data behind them (real cart history / a real list price).
   "OSE Pick" is the one deliberately-editorial exception: this whole
   section is curated by hand already, so it's applied sparingly (every
   3rd otherwise-unbadged card) as a styling accent, not a data claim. */
.featured-products .ddproduct:has(.ddlistprice) .ddprodimage::after,
.featured-products .ddproduct.is-bestseller .ddprodimage::after,
.featured-products .ddproduct:nth-child(3n+2):not(:has(.ddlistprice)):not(.is-bestseller) .ddprodimage::after {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.featured-products .ddproduct:has(.ddlistprice) .ddprodimage::after {
    content: 'Sale';
    background: var(--color-warm);
    color: var(--color-dark);
}
.featured-products .ddproduct:nth-child(3n+2):not(:has(.ddlistprice)):not(.is-bestseller) .ddprodimage::after {
    content: 'OSE Pick';
    background: var(--color-accent);
    color: #fff;
}
/* Real best sellers (flagged by js/main.js from actual cart history) always
   win over a Sale badge when a product happens to be both. */
.featured-products .ddproduct.is-bestseller .ddprodimage::after {
    content: 'Best Seller';
    background: var(--color-bestseller);
    color: #fff;
}

.featured-products .ddprodcat {
    padding: 16px 18px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cta);
}
.featured-products .ddprodname { padding: 16px 18px 0; }
.featured-products .ddprodcat + .ddprodname { padding-top: 4px; }
.featured-products .ddprodname a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.35;
}
.featured-products .ddproduct:hover .ddprodname a { color: var(--color-accent) !important; }
.featured-products .ddproddescription {
    padding: 6px 18px 0 !important;
    font-size: 0.8125rem !important;
    color: rgba(255,255,255,0.6) !important;
    line-height: 1.6 !important;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured-products .ddprodprice {
    margin-top: auto;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.featured-products .ddprodprice .price {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: -0.02em;
}
/* Sale layout — js/main.js wraps .ddprodprice + the vendor's .ddlistprice
   sibling into one .ddpricerow so the crossed-out original price sits next
   to the current (visually dominant) price instead of stacking below it. */
.featured-products .ddpricerow {
    margin-top: auto;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.featured-products .ddpricerow .ddprodprice { margin: 0; padding: 0; border: 0; }
.featured-products .ddlistprice {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-decoration: line-through;
}
.featured-products .ddBut { padding: 0 18px 18px; }
.featured-products .ddButton {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--color-cta) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 10px 20px;
    border-radius: 9px;
    box-shadow: 0 4px 16px rgba(8,132,237,0.4);
    transition: background var(--transition), color var(--transition), transform var(--transition);
    text-decoration: none !important;
}
.featured-products .ddButton:hover {
    background: var(--color-cta-dk) !important;
    transform: scale(1.03);
    color: #fff !important;
    text-decoration: none !important;
}
/* Out-of-stock cards (Featured Products via js/main.js, Best Sellers via
   best-sellers.php) — "Out of Stock" label above an outlined notify button
   that opens ECT's back-in-stock popup instead of adding to cart. */
.ose-oos-label {
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-muted);
}
.featured-products .ddButton.ose-notify-btn,
.bs-buybtn.ose-notify-btn {
    background: transparent !important;
    color: var(--color-cta) !important;
    border: 2px solid var(--color-cta);
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
}
.featured-products .ddButton.ose-notify-btn:hover,
.bs-buybtn.ose-notify-btn:hover {
    background: var(--color-cta) !important;
    color: #fff !important;
}
/* Inline add-to-cart failure message (js/main.js homepage AJAX add) */
.ose-add-error {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text);
}

/* 13b. Best Sellers (homepage) — self-contained include (best-sellers.php),
   ranked by real cart-history sales (see that file for the query). Same
   premium-dark treatment as Featured Products, with a richer hero-style
   header: eyebrow + two-line headline + subtext + pill CTA, a dedicated
   background photo (ose_bestsellers_background.webp — distinct from the
   main hero's ose_hero_boat.webp) fading in on the right, and a 5-card
   product row. .bs-card/.bs-grid are also reused bare (no .bs-hero
   wrapper) by bestsellers.php's "View All" page. */
.bs-hero {
    position: relative;
    margin: 32px 0;
    background: linear-gradient(180deg, #0B0F14 0%, #05070A 100%);
    border-radius: var(--radius);
    padding: 40px 24px 32px;
    overflow: hidden;
    isolation: isolate;
}
.bs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 7px),
        radial-gradient(circle at 90% 0%, rgba(10,132,255,0.10) 0%, transparent 45%),
        linear-gradient(90deg, transparent 55%, rgba(5,7,10,0.55) 78%, #05070A 100%),
        url('../images/ose_bestsellers_background.webp');
    background-size: auto, auto, auto, cover;
    background-position: center, center, center, 78% 45%;
    background-repeat: no-repeat;
    opacity: 0.9;
}
.bs-hero-top,
.bs-hero .bs-grid { position: relative; z-index: 1; }
.bs-hero-top { margin-bottom: 28px; }
.bs-hero-copy { max-width: 640px; }
.bs-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: 14px;
}
.bs-eyebrow-line { width: 28px; height: 2px; border-radius: 2px; background: var(--color-cta); flex-shrink: 0; }
.bs-headline {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px;
}
.bs-headline-accent { color: var(--color-cta); }
.bs-sub {
    margin: 0 0 22px;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    max-width: 46ch;
}
.bs-viewall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    text-decoration: none;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.bs-viewall i { transition: transform var(--transition); }
.bs-viewall:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
    background: rgba(10,132,255,0.1);
    text-decoration: none;
}
.bs-viewall:hover i { transform: translateX(3px); }

.bs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.bs-grid-page { margin: 24px 0; }
.bs-card {
    background: linear-gradient(165deg, #1A1F26 0%, #0C0F13 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.bs-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-cta);
    box-shadow: var(--shadow-glow-hover), 0 16px 40px rgba(0,0,0,0.4);
}
.bs-rank-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: var(--color-bestseller);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    font-size: 0.875rem;
    font-weight: 900;
    line-height: 1;
}
.bs-rank-badge span {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}
.bs-card-img {
    height: 150px;
    background: #0A0D11;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
}
.bs-card-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 55% 40%, rgba(10,132,255,0.14) 0%, transparent 60%);
}
.bs-card-img img {
    /* width/height (not max-*) reserve the box before load — same CLS fix
       as .ddprodimage img / .rv-thumb img above. */
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition);
}
.bs-card:hover .bs-card-img img { transform: scale(1.05); }
.bs-cat {
    padding: 14px 16px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cta);
}
.bs-name { padding: 14px 16px 0; }
.bs-cat + .bs-name { padding-top: 4px; }
.bs-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.35;
    text-decoration: none;
}
.bs-card:hover .bs-name a { color: var(--color-accent); }
.bs-price-row {
    margin-top: auto;
    padding: 12px 16px 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.bs-price { font-size: 1.25rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.bs-listprice { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.45); text-decoration: line-through; }
.bs-save {
    margin: 6px 16px 0;
    display: inline-block;
    width: fit-content;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: #B91C1C;
    padding: 3px 9px;
    border-radius: 6px;
}
.bs-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 10px 16px 0;
    padding: 3px 10px 3px 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #4ADE80;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.28);
    border-radius: 999px;
}
.bs-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.bs-but { padding: 14px 16px 16px; margin-top: 10px; }
.bs-buybtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--color-cta);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    box-shadow: 0 4px 16px rgba(8,132,237,0.4);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    text-decoration: none !important;
}
.bs-buybtn:hover { background: var(--color-cta-dk); transform: scale(1.03); color: #fff !important; text-decoration: none !important; }

.page-bestsellers .bs-page-intro { color: var(--color-muted); margin-bottom: 24px; }

/* 13a. Homepage story section */
.home-story {
    margin: 32px 0;
    background: var(--color-card-bg);
    border-radius: var(--radius);
    padding: 32px 24px;
    box-shadow: var(--shadow-card);
}
.home-story .story-body { max-width: 1296px; margin: 0 auto; }
.home-story .story-body p {
    margin-bottom: 14px;
    color: #374151;
    line-height: 1.75;
}
.home-story .story-body a { color: var(--color-link); text-decoration: underline; }

/* Compact variant — short lede + link to about.php, replaces the long
   multi-paragraph history on the homepage (full story lives on about.php). */
.home-story-compact {
    text-align: center;
    padding: 40px 24px;
}
.home-story-compact .sec-label { justify-content: center; }
.home-story-compact .sec-label::before { display: none; }
.home-story-compact .sec-title { margin-bottom: 12px; }
.home-story-compact .story-lede {
    max-width: 640px;
    margin: 0 auto 18px;
    color: var(--color-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}
.home-story-compact .story-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--color-link);
    text-decoration: none;
    transition: gap var(--transition), color var(--transition);
}
.home-story-compact .story-link i, .home-story-compact .story-link .icon-svg { transition: transform var(--transition); }
.home-story-compact .story-link:hover {
    color: var(--color-cta);
    gap: 12px;
    text-decoration: none;
}
.home-story-compact .story-link:hover i, .home-story-compact .story-link:hover .icon-svg { transform: translateX(2px); }

/* Beyond the Parts — homepage-only cinematic experience hub (build guides,
   speed calculator, videos, RC boating community). Same premium-dark shell
   as .rb-hero (Reviews)/.bs-hero (Best Sellers): carbon-weave texture + blue
   glow — but the 4 destinations render as large photographic panels instead
   of flat tiles, since this section is meant to read as a different kind of
   content than the product grids around it. */
.btp-hero {
    position: relative;
    max-width: 1440px;
    margin: 32px auto 0;
    background: linear-gradient(180deg, #0B0F14 0%, #05070A 100%);
    border-radius: var(--radius);
    padding: 48px 24px 40px;
    overflow: hidden;
    isolation: isolate;
}
.btp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 7px),
        radial-gradient(circle at 88% 0%, rgba(10,132,255,0.12) 0%, transparent 45%);
    opacity: 0.9;
}
.btp-hero-top,
.btp-grid { position: relative; z-index: 1; }
.btp-hero-top { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.btp-statement {
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 24px;
}
.btp-hero-top .sec-label { justify-content: center; }
.btp-hero-top .sec-label::before { display: none; }
.btp-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 12px;
}
.btp-subtitle {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
}

.btp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/* Each card's image is a fully pre-designed graphic (icon, heading,
   description and CTA already composited in) — the card is just that photo
   full-bleed, no separate text/icon layer drawn on top of it. */
.btp-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.btp-card:hover {
    border-color: var(--color-cta);
    box-shadow: var(--shadow-glow-hover), 0 16px 40px rgba(0,0,0,0.45);
}
.btp-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.btp-card:hover .btp-card-img { transform: scale(1.06); }

@media (max-width: 768px) {
    .btp-hero { padding: 36px 16px 28px; }
    .btp-grid { grid-template-columns: 1fr; }
}

/* 13b. Recommended products ("You May Also Like" — proddetail.php) */
.crosssell-section {
    background: var(--color-light);
    padding: 32px 0;
    margin-top: 40px;
}
/* Card grid already reuses div.products/div.product (line 2206) so it's
   already visually identical to the rest of the site — only the heading was
   using the plain default h2 (line 87) instead of the more polished style
   used elsewhere (.reviews-banner .section-heading, line 1263). */
/* Same small-uppercase-over-accent-rule heading as "Product Details" and
   "Customer Reviews" on this page, so the three sections read as one system.
   (This block only renders when the product actually has related products
   configured in admin — inccrosssell.php prints nothing otherwise.) */
.crosssell-section h2 {
    margin: 0 0 20px; width: fit-content;
    font-size: 0.9375rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text);
    border-bottom: 3px solid var(--color-cta);
    padding-bottom: 6px;
}
.crosssell-section div.products { margin: 0; }

/* 13c. Recently viewed products
   A compact shopping utility, not a homepage showcase section — small dark
   cards on the site's dark surface tone, thin neutral border, blue-glow
   border on hover. No big CTA button, no badges: image, name, price, and a
   tiny "View" link is the whole card. */
.recently-viewed {
    max-width: 1440px;
    margin: var(--space-4) auto 0;
    padding: 28px 24px 32px;
}
.recently-viewed h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.rv-subtitle {
    margin: 0 0 18px;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.rv-nav-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rv-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto; /* deliberately NOT animated — see .rv-track note above the media query */
    /* The arrow buttons page the row; the native scrollbar is just visual
       clutter on top of that. Touch swipe still works — this only hides
       the drawn scrollbar track/thumb. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}
.rv-viewport::-webkit-scrollbar { display: none; }
.rv-track {
    display: flex;
    gap: 12px;
    width: max-content;
    /* Cards carry their own shadow now — a little breathing room keeps
       adjacent hover-lifted cards from clipping into each other. */
    padding: 4px 4px 10px;
}
.rv-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.rv-arrow:hover {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: #fff;
    box-shadow: var(--shadow-glow);
}
.rv-arrow[hidden] { display: none; }
.rv-card {
    flex: 0 0 130px;
    width: 130px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.rv-card:hover {
    border-color: var(--color-cta);
    box-shadow: var(--shadow-glow);
}
.rv-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}
.rv-thumb img {
    /* width/height (not max-width/max-height) so the box is reserved before
       the image loads — same CLS fix as .ddprodimage img above; this img
       has no width/height attribute at all (recently-viewed.php). */
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.rv-body {
    padding: 8px 10px 10px;
}
.rv-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rv-price {
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}
.rv-view {
    display: block;
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-cta);
}
.rv-view i, .rv-view .icon-svg { margin-left: 3px; font-size: 0.65rem; }
[data-theme="dark"] .rv-card { border-color: rgba(255,255,255,0.1); }
@media (max-width: 768px) {
    .rv-track { gap: 10px; }
    .rv-card { flex: 0 0 110px; width: 110px; }
}

/* 13c. Customer reviews (homepage only) — same premium-dark shell as
   .bs-hero (Best Sellers): carbon-weave texture + blue glow, no photo
   layer. One optional "Real Results" highlight card (an MPH figure
   detected server-side, see reviews-banner.php), then a row of larger
   testimonial cards paged with prev/next arrows — same viewport/track/
   arrow pattern as Recently Viewed, reused rather than reinvented. */
.rb-hero {
    position: relative;
    max-width: 1440px;
    margin: 32px auto 0;
    background: linear-gradient(180deg, #0B0F14 0%, #05070A 100%);
    border-radius: var(--radius);
    padding: 40px 24px 32px;
    overflow: hidden;
    isolation: isolate;
}
.rb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 7px),
        radial-gradient(circle at 12% 0%, rgba(10,132,255,0.12) 0%, transparent 45%);
    opacity: 0.9;
}
.rb-hero-top,
.rb-highlight,
.rb-nav-wrap { position: relative; z-index: 1; }
.rb-hero-top { margin-bottom: 28px; }
.rb-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: 14px;
}
.rb-eyebrow-line { width: 28px; height: 2px; border-radius: 2px; background: var(--color-cta); flex-shrink: 0; }
.rb-headline {
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    max-width: 46ch;
}

/* Real Results highlight card */
.rb-highlight {
    margin-bottom: 24px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(10,132,255,0.14) 0%, rgba(10,132,255,0.03) 60%);
    border: 1px solid rgba(10,132,255,0.35);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow);
}
.rb-highlight-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: 6px;
}
.rb-highlight-number {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    margin-bottom: 12px;
}
.rb-highlight-number span { font-size: 0.4em; font-weight: 800; color: var(--color-cta); }
.rb-highlight-quote {
    margin: 0 0 14px;
    max-width: 60ch;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
}
.rb-highlight-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* Testimonial row */
.rb-nav-wrap { display: flex; align-items: center; gap: 12px; }
.rb-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}
.rb-viewport::-webkit-scrollbar { display: none; }
.rb-track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 4px 4px 10px;
}
.rb-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.rb-arrow:hover { background: var(--color-cta); border-color: var(--color-cta); box-shadow: var(--shadow-glow); }
.rb-arrow[hidden] { display: none; }
.rb-card {
    flex: 0 0 320px;
    width: 320px;
    scroll-snap-align: start;
    padding: 22px 24px;
    background: linear-gradient(165deg, #1A1F26 0%, #0C0F13 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.rb-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-cta);
    box-shadow: var(--shadow-glow-hover), 0 16px 40px rgba(0,0,0,0.4);
}
.rb-stars { letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.rb-star { color: rgba(255,255,255,0.15); }
.rb-star.is-on { color: var(--color-cta); }
.rb-text {
    margin: 0;
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}
.rb-meta { display: flex; flex-direction: column; gap: 2px; }
.rb-name { font-weight: 700; color: #fff; font-size: 0.9rem; }
.rb-product { font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.rb-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-cta);
    text-decoration: none;
}
.rb-cta i, .rb-cta .icon-svg { font-size: 0.7rem; transition: transform var(--transition); }
.rb-cta:hover i, .rb-cta:hover .icon-svg { transform: translateX(3px); }
@media (max-width: 768px) {
    .rb-hero { padding: 32px 16px 24px; }
    .rb-highlight { padding: 22px 20px; }
    .rb-card { flex: 0 0 260px; width: 260px; padding: 18px 20px; }
}

/* 14. Content pages */
.content-page { max-width: 1296px; width: 100%; margin: 0 auto; }
.content-page h2 { margin: 32px 0 12px; font-size: 1.25rem; }
.content-page h3 { margin: 24px 0 8px; }
.content-page p  { margin-bottom: 14px; color: #374151; line-height: 1.75; }
.content-page ul,
.content-page ol { margin: 0 0 14px 24px; }
.content-page li { margin-bottom: 6px; color: #374151; line-height: 1.7; }
.content-page a  { color: var(--color-link); }
/* .content-page a's link-color rule above otherwise wins the tie-break over
   .btn-primary (same specificity, later source order), leaving CTA button
   text blue-on-blue instead of white — e.g. the ose-rewards.php "Shop Now"
   button. */
.content-page a.btn-primary,
.content-page a.btn-primary:hover { color: #fff; }

/* 14a. Page hero — generic dark header shell for static/utility pages
   (about, contact, links, policy, gift-cert-howto, tips-on-surfing-site,
   ose-sponsor, termsandconditions, bestsellers, manufacturer-index,
   videos). Same premium-dark shell as .btp-hero (Beyond the Parts)/
   .rb-hero (Reviews): carbon-weave texture + blue glow. Replaces a plain
   black-on-white <h1> with the same header language used site-wide, while
   the page's own body content (lists, tables, forms) stays in its
   existing light .content-page styling directly below. */
.page-hero {
    position: relative;
    max-width: 1440px;
    margin: 32px auto 0;
    background: linear-gradient(180deg, #0B0F14 0%, #05070A 100%);
    border-radius: var(--radius);
    padding: 40px 24px;
    overflow: hidden;
    isolation: isolate;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 7px),
        radial-gradient(circle at 88% 0%, rgba(10,132,255,0.12) 0%, transparent 45%);
    opacity: 0.9;
}
.page-hero-top { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; }
.page-hero-top .sec-label { justify-content: center; }
.page-hero-top .sec-label::before { display: none; }
.page-hero-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 12px;
}
.page-hero-subtitle {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
}
@media (max-width: 768px) {
    .page-hero { padding: 32px 16px 28px; }
}

/* 14a-motif. Page-hero background motifs — a third layer (::after) bled off
   the right edge, above the existing texture/glow (::before) and below the
   content (.page-hero-top). Inline SVG line art, low opacity, grouped by
   page type so the hero reads a little different per section without
   needing photography assets. */
.page-hero--waves::after,
.page-hero--circuit::after,
.page-hero--hull::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: right -20px center;
    background-size: 560px auto;
    pointer-events: none;
}
.page-hero--waves::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M0,110 C50,80 100,140 150,110 C200,80 250,140 300,110 C350,80 400,140 400,110' fill='none' stroke='white' stroke-opacity='0.05' stroke-width='2'/%3E%3Cpath d='M0,150 C50,120 100,180 150,150 C200,120 250,180 300,150 C350,120 400,180 400,150' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='2'/%3E%3Cpath d='M0,190 C50,160 100,220 150,190 C200,160 250,220 300,190 C350,160 400,220 400,190' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='2'/%3E%3Cpath d='M0,230 C50,200 100,260 150,230 C200,200 250,260 300,230 C350,200 400,260 400,230' fill='none' stroke='white' stroke-opacity='0.04' stroke-width='2'/%3E%3C/svg%3E");
}
.page-hero--circuit::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M40,40 L40,140 L160,140 L160,220 L280,220 L280,60 L380,60' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='1.5'/%3E%3Cpath d='M20,300 L140,300 L140,180 L260,180 L260,340 L380,340' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='140' r='3' fill='white' fill-opacity='0.08'/%3E%3Ccircle cx='160' cy='140' r='3' fill='white' fill-opacity='0.08'/%3E%3Ccircle cx='280' cy='220' r='3' fill='white' fill-opacity='0.08'/%3E%3Ccircle cx='140' cy='300' r='3' fill='white' fill-opacity='0.07'/%3E%3Ccircle cx='260' cy='180' r='3' fill='white' fill-opacity='0.07'/%3E%3C/svg%3E");
}
.page-hero--hull::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M30,180 C90,150 200,145 320,160 C350,163 372,170 384,177 L384,192 C352,203 300,208 200,203 C120,200 58,207 30,213 Z' fill='none' stroke='white' stroke-opacity='0.07' stroke-width='2'/%3E%3Cpath d='M150,145 L150,108 L202,108 L212,145' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='2'/%3E%3Cpath d='M176,108 L176,58' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='2'/%3E%3Ccircle cx='176' cy='55' r='3' fill='white' fill-opacity='0.08'/%3E%3Cpath d='M20,232 L380,232' fill='none' stroke='white' stroke-opacity='0.03' stroke-width='2' stroke-dasharray='6 8'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
    .page-hero--waves::after,
    .page-hero--circuit::after,
    .page-hero--hull::after {
        background-size: 340px auto;
        background-position: right -30px top -10px;
        opacity: 0.7;
    }
}

/* 14b. Videos page (videos.php) — extends .page-hero with a dark panel for
   the embedded video widget and a CTA row, since this page's content is a
   widget/link rather than a lists-and-paragraphs body. */
.videos-embed-panel,
.videos-cta-row { position: relative; z-index: 1; }
.videos-embed-panel {
    margin-top: 28px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-card);
}
.videos-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 32px;
    text-align: center;
}
.videos-cta-copy {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.65);
}
@media (max-width: 768px) {
    .videos-cta-row { flex-direction: column; gap: 14px; }
}

/* 15. Contact form */
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 580px; margin-top: 24px; }
.form-group label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 6px; }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group select { color-scheme: light dark; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.15);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.btn-submit {
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk));
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 12px 28px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
    align-self: flex-start;
    box-shadow: 0 2px 10px rgba(10,132,255,0.3);
}
.btn-submit:hover { background: var(--color-cta-dk); box-shadow: 0 6px 20px rgba(10,132,255,0.45); }

.contact-intro { color: var(--color-muted); margin-bottom: 24px; }
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.contact-info-card {
    background: var(--color-light);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.contact-info-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    margin-bottom: 6px;
    color: var(--color-text);
}
.contact-info-card h3 i, .contact-info-card h3 .icon-svg { color: var(--color-cta); }
.contact-info-card p { color: var(--color-muted); font-size: 0.875rem; margin: 0; }
.contact-info-card a { color: var(--color-link); }

.contact-help-box {
    border: 1px solid var(--color-light);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 20px;
}
.contact-help-box h3 { font-size: 1rem; margin-bottom: 8px; color: var(--color-text); }
.contact-help-box p,
.contact-help-box li { color: var(--color-muted); }
.contact-help-box ul { margin: 0 0 10px 20px; }
.contact-help-box a { color: var(--color-link); }

.form-alert {
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-weight: 600;
}
.form-alert-success {
    background: var(--color-light);
    border: 1px solid var(--color-cta);
    color: var(--color-primary-dk);
}
.form-alert-error {
    background: rgba(220,38,38,0.08);
    border: 1px solid var(--rc-danger);
    color: var(--rc-danger);
}

/* 16. Speed Calculator (conversion.php) — cards match the .product-card
   hover-lift language (translateY + shadow-card-hover + blue border tint)
   so the page reads like the rest of the current design system rather
   than a standalone legacy widget. */
.calc-intro { color: var(--color-muted); margin: 24px 0 14px; }
.calc-intro:last-of-type { margin-bottom: 32px; }
.calc-intro a { color: var(--color-primary); }

.calc-section-label { margin-bottom: 8px; }
.calc-section-title { font-size: 1.375rem; font-weight: 800; margin-bottom: 8px; }
.calc-section-subtitle { color: var(--color-muted); margin-bottom: 24px; }

.calc-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 48px;
}
.calc-advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}
.calc-quick-grid .calc-wrap { max-width: none; }
@media (max-width: 768px) {
    .calc-quick-grid { grid-template-columns: 1fr; }
}

.calc-wrap {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid #E5E7EB;
    border-radius: var(--radius);
    padding: 28px;
    max-width: 560px;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.calc-wrap:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(10,132,255,0.3);
}
.calc-wrap-wide { grid-column: 1 / -1; max-width: none; }
/* Push the Calculate button (and, in the "no button" reference card, the
   note) to the bottom of the card so every card in a stretched grid row
   lines up on its action, regardless of how many fields sit above it. */
.calc-wrap .btn-submit { margin-top: auto; }
.calc-wrap .btn-submit + .calc-result { margin-top: 20px; }
.calc-wrap > .calc-note { margin-top: auto; }
.calc-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.calc-card-head i, .calc-card-head .icon-svg {
    color: var(--color-cta);
    font-size: 0.9375rem;
    width: 1.1em;
    text-align: center;
}
.calc-card-head h3 { margin: 0; }
.calc-card-subtitle { color: var(--color-muted); font-size: 0.8125rem; margin-bottom: 16px; }
.calc-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-cta);
    margin-bottom: 10px;
}
.calc-row { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 16px; }
.calc-row .form-group { flex: 1; margin: 0; }
.calc-result {
    background: var(--color-dark);
    color: #fff;
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-top: 20px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.calc-mph { font-size: 2.5rem; font-weight: 900; color: var(--color-accent); }
.calc-unit { font-size: 1rem; color: rgba(255,255,255,0.6); }

/* Common Battery Voltages table (conversion.php) — was hardcoded light-mode
   hex sitting next to a token-driven .calc-wrap card; now uses the same
   card shell + tokens so it stays legible if dark mode is ever toggled. */
.calc-table-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.calc-table-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(10,132,255,0.3);
}
.calc-table-card table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.calc-table-card th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-light);
}
.calc-table-card td {
    padding: 8px 12px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.calc-table-card td:last-child { color: var(--color-link); font-weight: 600; }

/* Caution note below the table — deliberate amber warning accent (not a
   card-bg token, this is a semantic alert color), with a dark-mode
   override so it stays readable if the toggle is used. */
.calc-note {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 20px;
    font-size: 0.875rem;
    color: #92400E;
}
[data-theme="dark"] .calc-note {
    background: rgba(251,146,60,0.12);
    border-color: rgba(251,146,60,0.35);
    color: #FDBA74;
}

/* 17. Footer — kept dark (signature band, matches header) per explicit
   instruction; only the CTA/newsletter button picks up the new gradient. */
.site-footer { position: relative; background: var(--color-dark); color: rgba(255,255,255,0.75); margin-top: 32px; }
/* Fade the page background into the dark footer instead of a hard color
   cut, mirroring the hero's own bottom fade at the top of the page. */
.site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, var(--color-dark) 100%);
    pointer-events: none;
}
/* Brand lockup — wordmark + tagline, echoes the homepage hero headline */
.footer-brand-row {
    padding: 48px 0 28px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand { display: inline-flex; flex-direction: column; gap: 6px; }
.footer-wordmark {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(95deg, #fff 0%, var(--color-logo-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-tagline { font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.55); }

/* Link groups — condensed single-line, bullet-separated per column */
.footer-links-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 32px 0;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-link-group h3 {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.footer-link-line { font-size: 0.9rem; line-height: 1.8; }
.footer-link-line a { color: rgba(255,255,255,0.55); text-decoration: none; }
.footer-link-line a:hover { color: #fff; }
.footer-link-sep { color: rgba(255,255,255,0.25); margin: 0 8px; }

/* Newsletter panel — centered final CTA */
.footer-newsletter-panel { padding: 40px 0 32px; text-align: center; }
.footer-newsletter-heading { color: #fff; font-size: 1.375rem; font-weight: 800; margin-bottom: 8px; }
.footer-newsletter-sub { font-size: 0.9375rem; color: rgba(255,255,255,0.55); margin-bottom: 20px; }

.social-links { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.social-links a {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.8);
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.social-links a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); }

.newsletter-form-inline {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 460px;
    margin: 0 auto;
}
.newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius);
    color: #fff;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition);
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-input:focus { border-color: var(--color-primary); }
.newsletter-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk));
    color: #fff;
    font-weight: var(--btn-font-weight);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: none;
    border-radius: var(--btn-radius);
    font-size: 0.9375rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: background var(--hover-transition), box-shadow var(--hover-transition), transform var(--hover-transition);
}
.newsletter-submit:hover { background: var(--color-cta-dk); box-shadow: var(--shadow-glow-hover); transform: translateY(-1px); }
.newsletter-submit i, .newsletter-submit .icon-svg { font-size: 0.8125rem; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 0; }
.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
}
.footer-bottom nav { display: flex; gap: 16px; }
.footer-bottom a   { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-bottom a:hover { color: rgba(255,255,255,0.9); }
.payment-icons { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; color: rgba(255,255,255,0.5); }

/* 17b. ECT dynamic display & product output overrides
   dynamicdisplay.php and all inc* files output table-based HTML with
   inline styles. These rules use !important to beat ECT inline styles.
   ------------------------------------------------------------------ */

/* Wipe ECT table chrome everywhere. NOTE: dynamicdisplay.php (Featured
   Products, section 13 above) renders plain divs, not tables/anchors in
   this generic pattern — its own .ddproduct/.ddprodname/etc. rules already
   own that styling with more specific selectors, so this generic block no
   longer targets .featured-products directly (it used to, and the blanket
   `.featured-products a { color: var(--color-dark) }` / light image
   background fought the section's dark-card redesign). */
table.ectproducttable,
table.ectcategorytable,
table.ectdisplaytable {
    border: none !important;
    background: transparent !important;
    border-spacing: 0 !important;
    padding: 0 !important;
}

/* ECT product images */
table.ectproducttable img,
table.ectdisplaytable img,
td.ectproductimage img {
    border-radius: var(--radius) !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    background: var(--color-light) !important;
}

/* ECT product name links */
table.ectproducttable a,
table.ectdisplaytable a,
td.ectproductname a,
span.ectproductname a {
    color: var(--color-dark) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    font-family: inherit !important;
}
table.ectproducttable a:hover,
td.ectproductname a:hover {
    color: var(--color-link) !important;
    text-decoration: underline !important;
}

/* ECT product price */
td.ectproductprice,
span.ectproductprice,
.ectproductprice {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
}

/* ECT category name links */
td.ectcategoryname a,
span.ectcategoryname a,
.ectcategoryname a {
    color: var(--color-dark) !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    font-family: inherit !important;
}
.ectcategoryname a:hover { color: var(--color-link) !important; }

/* ECT category images */
td.ectcategoryimage img,
.ectcategoryimage img {
    border-radius: var(--radius) !important;
    display: block !important;
    max-width: 100% !important;
}

/* ECT Add-to-Cart / buy buttons — orange */
input.ectbutton,
button.ectbutton,
a.ectbutton,
.ectbutton,
input[type="submit"].ectbutton {
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk)) !important;
    background-color: var(--color-cta) !important;
    border: none !important;
    border-radius: var(--btn-radius) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-weight: var(--btn-font-weight) !important;
    font-size: 0.875rem !important;
    line-height: normal !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    text-align: center !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
    transition: background var(--hover-transition), box-shadow var(--hover-transition), transform var(--hover-transition) !important;
    /* Persistent glow at rest, per spec's "Hover: Glow slightly" — --shadow-glow
       (not the neutral --shadow-* scale) so the CTA keeps its brand-blue emphasis. */
    box-shadow: var(--shadow-glow) !important;
}
input.ectbutton:hover,
button.ectbutton:hover,
a.ectbutton:hover,
.ectbutton:hover {
    background: var(--color-cta-dk) !important;
    background-color: var(--color-cta-dk) !important;
    box-shadow: var(--shadow-glow-hover) !important;
    transform: translateY(-1px) !important;
}

/* ECT checkout button — double height (covers checkoutbutton, checkoutbutton1/2/3) */
input.checkoutbutton,
.checkoutbutton {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* cart.php checkout button — sized to match the PayPal smart button next to
   it (PayPal's default/large button renders ~55px tall). checkoutbutton1/2/3
   only exist in inccart.php (verified), so this is naturally scoped to the
   cart page and doesn't touch the listing/product-page checkout button
   above. Note these class names are also reused on a couple of wrapper
   <div>s in inccart.php — element-typed selectors here target only the
   actual <button>/<input>/<a>. Explicit height (not just padding) because
   ECT can render this as <input type="image">, where padding alone doesn't
   reliably grow the box. */
button.checkoutbutton1, input.checkoutbutton1, a.checkoutbutton1,
button.checkoutbutton2, input.checkoutbutton2, a.checkoutbutton2,
button.checkoutbutton3, input.checkoutbutton3, a.checkoutbutton3 {
    height: 55px !important;
    min-height: 55px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Checkout button — double width on product listing (categories.php/products.php)
   and product detail (proddetail.php) pages only. Scoped to div.catnavcheckout so
   the cart.php checkout-flow buttons (checkoutbutton1/2/3, outside this wrapper)
   are unaffected. */
div.catnavcheckout input.checkoutbutton,
div.catnavcheckout .checkoutbutton {
    width: 220px !important;
    max-width: 100% !important;
    font-size: 1.125rem !important;
}

/* ECT secondary / ghost buttons */
input.ectbuttonghost,
button.ectbuttonghost,
.ectbuttonghost {
    background: transparent !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-link) !important;
    border-radius: var(--btn-radius) !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background var(--hover-transition), color var(--hover-transition) !important;
}
.ectbuttonghost:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* ECT sort / filter selects — was hardcoded #fff background with a
   dark-mode-flipping text color (var(--color-text)), so in dark mode this
   rendered near-white text on a white box: invisible. Switched to tokens
   that flip together, plus a color-scheme hint so the native option
   popover follows the current theme instead of always rendering light. */
select.ectsortbox,
select.ectdropdown,
.ectsortbox {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    padding: 6px 10px !important;
    color: var(--color-text) !important;
    background: var(--color-card-bg) !important;
    color-scheme: light dark;
}

/* ECT pagination */
.ectpagination a,
td.ectpagination a {
    color: var(--color-link) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(1,84,183,0.2) !important;
    font-family: inherit !important;
}
.ectpagination a:hover { background: var(--color-primary) !important; color: #fff !important; }
.ectpagination span   { font-weight: 700 !important; color: var(--color-dark) !important; }

/* ECT product description text */
td.ectproductdescription,
.ectproductdescription {
    color: #4B5563 !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
    font-family: inherit !important;
}

/* ECT quantity input */
input.ectqtybox,
.ectqtybox {
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 0.9375rem !important;
    padding: 6px 10px !important;
    width: 60px !important;
    text-align: center !important;
}

/* 18. Responsive — Tablet (<=768px) */
@media (max-width: 768px) {
    .hamburger   { display: block; order: -1; }
    .desktop-nav { display: none; }
    .header-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        position: relative;
    }
    .site-logo    { justify-content: center; }
    .site-logo img { height: 78px; }
    .header-bar-right {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .header-bottom-inner { justify-content: flex-end; }
    .header-icons { justify-content: flex-end; gap: 8px; }

    /* Minimum 44x44 touch targets (WCAG 2.5.5 / mobile HIG) — desktop keeps
       the tighter 36px icon-btn size, only mobile needs the larger hit area. */
    .icon-btn, .hamburger { width: 44px; height: 44px; }
    .mobile-nav a { padding: 14px 16px; }

    /* Hover dropdown doesn't work on touch — swap it for a plain icon link on phone */
    .desktop-only-cart { display: none; }
    .mobile-only-cart { display: inline-flex; }

    /* Search box becomes a full-width dropdown under the header when toggled open */
    .search-bar-wrap {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        background: var(--color-navy);
        padding: 10px 16px;
        z-index: 150;
    }

    .layout-sidebar { grid-template-columns: 1fr; }
    .sidebar        { position: static; }
    .category-grid  { grid-template-columns: repeat(2, 1fr); }
    .footer-links-row { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .featured-products .ddproducts { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .fp-headrow { align-items: flex-start; }
    .bs-grid { grid-template-columns: repeat(3, 1fr); }
    .bs-hero::before { background-position: center, center, center, 90% 45%; }

    .hero        { padding: 48px 0 40px; min-height: 0; }
    .hero-media  {
        z-index: 0;
        width: 48%;
        overflow: hidden;
    }
    .hero-boat-img {
        right: -4%;
        width: 92%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
    }
    .hero-content { max-width: none; }
    .hero h1     { font-size: 2.75rem; }
    .hero-stats-bar-inner { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
    .hsb-item:nth-child(3) { border-left: none; }
}

/* 19. Responsive — Phone (<=640px) */
@media (max-width: 640px) {
    .sidebar      { display: none; }
    .footer-links-row { grid-template-columns: 1fr; gap: 24px; }
    .footer-wordmark { font-size: 1.375rem; }
    .newsletter-form-inline { flex-direction: column; max-width: 320px; }
    .footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }
    .hero        { padding: 32px 0 48px; min-height: 0; }
    .hero-media  { display: none; }
    .hero-content { max-width: none; }
    .hero h1     { font-size: 2.25rem; }
    .hero-sub    { font-size: 1rem; }
    .hero-stats-bar-inner { grid-template-columns: 1fr; row-gap: 28px; }
    .hsb-item    { border-left: none; padding: 0; }
    .layout-centered { padding: 20px 16px; }
    .calc-row { flex-direction: column; }
    .contact-info-grid { grid-template-columns: 1fr; }
    /* Stay 2-per-row down to phone width — the card image (object-fit:
       contain, generous padding) and buy button both stay legible/tappable
       at this size; only drop to 1-per-row below 420px (see next block). */
    .featured-products { padding: 28px 16px 24px; }
    .featured-products .ddprodimage { height: 150px; padding: 10px; }
    .bs-hero { padding: 32px 16px 24px; }
    .bs-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .bs-hero::before { display: none; }
}

/* 19a. Responsive — Small phone (<=420px): Featured Products drops to a
   single column once a 2-up card would be too narrow for a comfortable
   tap target/name legibility. */
@media (max-width: 420px) {
    .featured-products .ddproducts { grid-template-columns: 1fr; }
    .featured-products .ddprodimage { height: 190px; }
    .bs-grid { grid-template-columns: 1fr; }
}

/* 19b. Responsive — Landscape phone/tablet (short, wide viewport up to
   1024px): the hero's short height makes the boat image cramped/misplaced
   regardless of its width, so hide it here same as portrait phone. */
@media (max-width: 1024px) and (orientation: landscape) {
    .hero-media  { display: none; }
    .hero-content { max-width: none; }
}

/* ================================================================
   20. RECEIPT / THANK-YOU — ported ECT receipt layout, themed to OSE
   Markup is emitted by ECT's do_order_success() on thanks.php,
   clientlogin.php, orderstatus.php and latedownload.php. We only style it.
================================================================ */
div#printcontent.recptbody { width:100%; box-sizing:border-box; font-size:0.95rem; color:var(--rc-text); line-height:1.4; }

div.receiptaddresses { width:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; margin:0 0 1rem; }
div.receiptaddress { flex:0 1 auto; min-width:48%; }
div.receiptaddress, div.receiptextra, div.receiptdownload { box-sizing:border-box; background:var(--rc-surface); border:1px solid var(--rc-border); border-radius:var(--rc-radius); margin:0.25rem 0.5%; padding:0 0 0.5rem; overflow:hidden; }
div.receiptextra { margin:0.5rem 0.5%; }

div.receiptsectionhead { box-sizing:border-box; text-align:center; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--rc-text-head); background:var(--rc-headbar); border-bottom:2px solid var(--rc-accent); padding:0.4rem 0; margin:0 0 0.6rem; }

div.receiptcontainer { overflow:hidden; padding:0 0.6rem; font-size:0.92rem; }
div.receiptleft { float:left; box-sizing:border-box; width:33%; font-weight:600; color:var(--rc-text-muted); text-align:right !important; padding:0 0.5rem 0 0; }
div.receiptleft::after { content:" : "; }
div.receiptright { float:left; width:auto; text-align:left; color:var(--rc-text); }
div.receiptaddress div.receiptcontainer div.receiptleft { text-align:left; padding-left:0; color:var(--rc-text); }

div.rcontorderid { font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0.06em; color:var(--rc-text-head); background:var(--rc-headbar); border:1px solid var(--rc-border); border-left:3px solid var(--rc-accent); border-radius:var(--rc-radius-sm); padding:0.4rem 0.6rem; margin:0 0.5% 0.75rem; }
div.rcontorderid > div.receiptleft { color:var(--rc-text-muted); }
div.rcontorderid > div.receiptright { color:var(--rc-accent); font-weight:700; }
div.rcontaddinfo { margin:0.5rem 0 0; }

div.receiptlist, div.downloadlist { display:table; box-sizing:border-box; width:99%; margin:0.75rem 0.5% 0; background:var(--rc-surface); border:1px solid var(--rc-border); border-radius:var(--rc-radius); overflow:hidden; }
div.receiptlist { text-align:left; }
div.receiptheadrow, div.downloadheadrow { display:table-row; line-height:1.8; font-family:'Inter',sans-serif; font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--rc-text-head); background:var(--rc-headbar); }
div.receiptlistrow, div.downloadlistrow { display:table-row; font-size:0.92rem; }
div.receiptheadrow>div, div.downloadheadrow>div, div.receiptlistrow>div, div.downloadlistrow>div { display:table-cell; vertical-align:top; padding:0.35rem 0.5rem; }
div.thankspageimg { text-align:left; display:inline-block; }
div.thankspageimg img.thankspageimg { max-width:90px; width:auto; max-height:100px; height:auto; border-radius:var(--rc-radius-sm); }
div.receiptquantity { text-align:center; }
div.receiptunitprice, div.receiptoption.receiptoptunitprice, div.receipttotal, div.receiptoption.receiptopttotal { text-align:right; white-space:nowrap !important; }
div.receiptitemrow>div, div.downloadlistrow>div { border-top:1px solid var(--rc-border); }
div.receiptoptionrow>div { line-height:1.8; }
div.receiptoption { font-size:0.88rem; color:var(--rc-text-muted); background:var(--rc-headbar); }
div.receiptoptgroup { text-align:right; padding-right:0.75rem; color:var(--rc-text-muted); }
div.receiptoptgroup::after { content:" "; }

div.receipttotalscolumn { overflow:auto; margin-top:0.6rem; }
div.receipttotalstable { display:block; box-sizing:border-box; white-space:nowrap; width:auto; max-width:99%; float:right; line-height:2; margin:0 0.5% 0.75rem; }
div.receipttotalsrow { display:block; text-align:right; }
div.receipttotalsrow>div { display:inline-block; padding:0; }
div.rectotsubtotal div, div.rectotshiphand div, div.rectotstatetax div, div.rectotdiscounts div, div.rectotgrandtotal div { display:inline-block; }
div.receipttotalsrow div.ectright { min-width:95px; text-align:right; color:var(--rc-text); }
div.receipttotalsrow div.ectleft { color:var(--rc-text-muted); }
div.receipttotalsrow div.ectright p { margin:0; }
div.rectotgrandtotal { font-family:'Inter',sans-serif; font-size:1.1rem; font-weight:700; }
div.rectotgrandtotal div.ectleft { color:var(--rc-text); }
div.rectotgrandtotal div.ectright { color:var(--rc-accent); }
div.receipttotalsrow.rectotgrandtotal > div.ectright { border-top:1px solid var(--rc-border); border-bottom:3px double var(--rc-accent); }
div.rectotdiscounts div.ectright { color:var(--rc-danger); }

div.receiptshippingaddress { float:right; }
div.receiptpackage { display:table; font-size:0.85rem; color:var(--rc-text-muted); }
div.receiptpackagerow { display:table-row; }
div.receiptpackagerow>div { display:table-cell; padding:2px; }
div.receiptpackagerow div.ectleft::before { content:" > "; }
div.receiptpackagerow div.ectleft::after { content:": "; }
div.receiptrecemail { font-weight:700; font-style:italic; color:var(--rc-text); }

div.receiptbuttons { padding:1rem 0; text-align:center; }
div.receiptcontinueshopping, div.receiptprintversion { padding:0.6rem; width:50%; float:left; box-sizing:border-box; }
div.receiptcontinueshopping { text-align:right; } div.receiptprintversion { text-align:left; }

div.receiptdownloadhead, div.downloadheadrow { color:var(--rc-text-head); background:var(--rc-headbar); }
div.receiptdownload { margin-bottom:0.75rem; }
div.receiptnodownloadtext { margin:1rem; color:var(--rc-text-muted); }
div.receiptsectionhead.latedownloadhead { color:var(--rc-accent); background:transparent; border-bottom:none; text-align:left; padding:0 0 0 24%; margin:0; }
div.downloadlist.latedownloadlist, div.downloadlistrow.latedownloadlistrow { border:none; background:transparent; }
div.downloadlistrow.latedownloadlistrow > div:first-child { border:none; text-align:right; padding-right:0.3em; width:27%; color:var(--rc-text-muted); }
div.downloadlistrow.latedownloadlistrow > div:nth-child(2) { border:none; text-align:left; width:73%; }
div.downloadlistrow.latedownloadlistrow > div:nth-child(2) input { width:auto; }
div.latedownloadbuttons { padding:0.6rem 0; }

/* ================================================================
   12. Product Reviews (ECT proddetail — vsadmin/inc/incproddetail.php)
   Vendor-generated markup; styled here so cart updates can't clobber it.
   Uses site color tokens, so dark mode themes automatically.
   Stars are inline SVG sprites (fill-rule:evenodd): full=solid,
   half=split, empty=outline — a single fill keeps them distinct.
================================================================ */

/* Star color — review cards + the aggregate widget in the product area */
div.reviews svg.icon,
div.largereviewstars svg.icon,
div.smallreviewstars svg.icon,
div.detailreviewstars svg.icon { fill: var(--color-cta) !important; width: 42px !important; height: 42px !important; }

/* Jump-to-reviews: pddreviewstars() (incproddetail.php) already wraps the star
   icons in <a href="...#reviews"> — this just adds a hover affordance so it's
   obvious the stars are clickable. (Previously tried stretching the link over
   the avg/count text too via position:absolute, but that pulled the stars out
   of normal flow and collapsed the parent's height, so they visually dropped
   onto the discount-text row below — reverted to this simpler, safe version.) */
div.largereviewstars.detailreviewstars > a[href*="#reviews"],
div.smallreviewstars.detailreviewstars > a[href*="#reviews"] {
  cursor: pointer;
}
div.largereviewstars.detailreviewstars > a[href*="#reviews"]:hover svg.icon,
div.smallreviewstars.detailreviewstars > a[href*="#reviews"]:hover svg.icon { fill: var(--color-cta-dk) !important; }

/* Summary line: "N Product Reviews - Average rating X / 5" */
/* .site-header is position:sticky (line 180) — without this, jumping here via
   the star-rating link (added above) lands the heading right under the
   sticky header, partially hidden. Estimated from header height (132px logo
   + 24px padding + nav row ≈ 200px desktop, 96px logo ≈ 150px mobile) — may
   need visual tuning against the live page. */
div.reviews#reviews { scroll-margin-top: 200px; }
@media screen and (max-width: 700px) {
    div.reviews#reviews { scroll-margin-top: 150px; }
}
/* Breathing room above the reviews section, matching the section-break rhythm
   used before "Product Details" (div.detaildescription, margin-top:2.5rem)
   so the page reads as distinct blocks (image/buy area, details, reviews)
   instead of everything running together. */
div.reviews { margin-top: 2rem !important; }
/* Section heading — nothing in the vendor markup labels this block, it just
   drops straight into the rating summary. */
div.reviews#reviews::before {
  content: "Customer Reviews";
  display: block !important; width: fit-content;
  font-size: 0.9375rem !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-dark) !important;
  border-bottom: 3px solid var(--color-cta);
  padding-bottom: 6px; margin-bottom: 1.1rem !important;
}
[data-theme="dark"] div.reviews#reviews::before { color: var(--color-text) !important; }
div.reviewtotals {
  display: flex !important; flex-wrap: wrap !important; align-items: baseline !important;
  gap: 0.35rem 0.6rem !important;
  font-weight: 600 !important; font-size: 1rem !important; color: var(--color-text) !important;
  background: var(--color-light) !important; border: 1px solid var(--rc-border) !important;
  border-radius: var(--radius) !important; padding: 0.75rem 1rem !important; margin-bottom: 1.25rem !important;
}
div.reviewtotals .count,
div.reviewtotals .rating.average { color: var(--color-cta) !important; font-weight: 800 !important; }
span.showallreview a, a.readreview, a.showallreview {
  color: var(--color-cta) !important; text-decoration: none !important; font-weight: 600 !important;
}
span.showallreview a:hover, a.readreview:hover, a.showallreview:hover { text-decoration: underline !important; }

/* Individual review cards */
div.reviewscontainer { display: flex !important; flex-direction: column !important; gap: 1rem !important; margin: 0.5rem 0 1.25rem !important; }
div.ecthreview {
  background: var(--color-card-bg) !important; border: 1px solid var(--rc-border) !important;
  border-left: 3px solid var(--color-cta) !important; border-radius: var(--radius) !important;
  padding: 1rem 1.15rem !important; box-shadow: var(--shadow-card) !important;
}
div.ecthreview div.reviewstarsheader { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.5rem !important; margin-bottom: 0.35rem !important; }
div.ecthreview span.rating { display: inline-flex !important; align-items: center !important; }
div.ecthreview span.reviewheader { font-weight: 700 !important; font-size: 1.05rem !important; color: var(--color-text) !important; }
div.ecthreview div.reviewname { font-size: 0.82rem !important; color: var(--color-muted) !important; margin-bottom: 0.6rem !important; }
div.ecthreview span.reviewer { color: var(--color-text) !important; font-weight: 600 !important; }
div.ecthreview div.reviewcomments { color: var(--color-text) !important; font-size: 0.95rem !important; line-height: 1.7 !important; }
span.extracommentsdots { color: var(--color-cta) !important; font-weight: 600 !important; cursor: pointer !important; }

/* "Write a review" button — imageorbuttontag() renders it as button.ectbutton.clickreview,
   which inherits the site's solid-orange CTA look, making it visually identical to the
   Add to Cart button. Ghost/outline style reads as the secondary action it actually is. */
div.reviews button.ectbutton.clickreview {
  background: transparent !important; background-color: transparent !important;
  border: 2px solid var(--color-cta) !important; color: var(--color-cta) !important;
  font-weight: 600 !important; padding: 0.5rem 1.25rem !important;
}
div.reviews button.ectbutton.clickreview:hover {
  background: var(--color-cta) !important; background-color: var(--color-cta) !important; color: #fff !important;
}

/* Cleanups */
/* No-reviews state: div.reviewtotals still renders (pddreviewstars() always
   prints it) but with nothing in it besides the static "Product Reviews"
   label — right under our own "Customer Reviews" ::before heading above,
   that reads as two headings stacked for the same section. Hide it only in
   this exact empty state (:has(div.noreview) scopes to when the vendor's own
   "No Reviews For This Product." message is present) — a product WITH
   reviews shows real count/rating data in this box, which stays untouched. */
div.reviews:has(div.noreview) div.reviewtotals { display: none !important; }
/* Empty-state row: message on the left, "write a review" action on the right,
   reading as one continuous panel. div.noreview and div.clickreview are
   siblings (no shared wrapper in the vendor markup), so the panel is faked by
   giving each half the same fill and border with the seam between them
   removed — rather than restructuring DOM that lives in vsadmin/. */
div.reviews:has(div.noreview) {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: stretch;
}
div.reviews:has(div.noreview)::before { grid-column: 1 / -1; }
div.reviews:has(div.noreview) div.noreview,
div.reviews:has(div.noreview) div.clickreview {
    background: var(--color-light);
    border: 1px solid var(--rc-border);
    padding: 1.1rem 1.25rem;
    margin: 0 !important;
    display: flex; align-items: center; gap: 0.75rem;
}
div.reviews:has(div.noreview) div.noreview {
    grid-column: 1;
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    /* Vendor prints "No Reviews For This Product." — swapped presentation-side
       for the friendlier empty state, same meaning, no vsadmin/ edit. */
    font-size: 0;
}
div.reviews:has(div.noreview) div.noreview::before {
    /* Comment-dots icon as an SVG mask (Font Awesome removed 2026-09-01). */
    content: ""; width: 1.25rem; height: 1.25rem;
    background-color: var(--color-cta); flex-shrink: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM128 208a32 32 0 1 1 0 64a32 32 0 1 1 0-64zm128 0a32 32 0 1 1 0 64a32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0a32 32 0 1 1-64 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM128 208a32 32 0 1 1 0 64a32 32 0 1 1 0-64zm128 0a32 32 0 1 1 0 64a32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0a32 32 0 1 1-64 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
div.reviews:has(div.noreview) div.noreview::after {
    content: "No reviews yet. Be the first to review this product!";
    font-size: 0.9375rem; color: var(--color-muted); line-height: 1.4;
}
div.reviews:has(div.noreview) div.clickreview {
    grid-column: 2;
    border-left: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    justify-content: flex-end;
}
@media screen and (max-width: 640px) {
    div.reviews:has(div.noreview) { grid-template-columns: minmax(0, 1fr); }
    div.reviews:has(div.noreview) div.noreview {
        grid-column: 1; border-right: 1px solid var(--rc-border); border-bottom: none;
        border-radius: var(--radius) var(--radius) 0 0;
    }
    div.reviews:has(div.noreview) div.clickreview {
        grid-column: 1; border-left: 1px solid var(--rc-border);
        border-radius: 0 0 var(--radius) var(--radius);
        justify-content: center;
    }
}
/* Hide the duplicate top "Click to review" button (the lower one remains) */
div.reviews div.reviewtotals + div.clickreview { display: none !important; }
/* Hide truly-empty review cards (whitespace-only ones need an admin delete) */
div.ecthreview:has(div.reviewcomments:empty) { display: none !important; }
/* Hide the empty short-description box when a product has no short description */
div.detailshortdescription:empty { display: none !important; }

/* ================================================================
   12b. Product Detail Tabs (ECT proddetail — vsadmin/inc/incproddetail.php)
   This site emits the TabbedPanels markup variant (not the legacy Spry
   slidingTabPanel markup) — confirmed against incproddetail.php.
================================================================ */
div.TabbedPanelsContentGroup {
  background: var(--color-card-bg) !important; border: 1px solid var(--rc-border) !important;
  border-radius: var(--radius) !important; color: var(--color-text) !important;
}
ul.TabbedPanelsTabGroup {
  display: flex !important; flex-wrap: wrap !important; gap: 4px !important;
  list-style: none !important; padding: 0 !important; margin: 0 0 -1px !important;
}
ul.TabbedPanelsTabGroup > li.TabbedPanelsTab {
  font-weight: 600 !important; font-size: 0.9rem !important;
  background: var(--color-light) !important; border: 1px solid var(--rc-border) !important;
  border-bottom: none !important; border-radius: var(--radius) var(--radius) 0 0 !important;
  color: var(--color-text) !important; padding: 0.6rem 1.1rem !important; cursor: pointer !important;
  transition: background var(--transition), color var(--transition) !important;
}
ul.TabbedPanelsTabGroup > li.TabbedPanelsTab:hover { color: var(--color-cta) !important; }
ul.TabbedPanelsTabGroup > li.TabbedPanelsTabSelected {
  background: var(--color-card-bg) !important; color: var(--color-cta) !important;
  border-color: var(--color-cta) !important;
}
div.tabpanelcontent { padding: 1.25rem !important; line-height: 1.75 !important; }

/* ================================================================
   12c. Checkout Step Headers (ECT cart — vsadmin/inc/inccart.php)
   div.ectdivhead is reused for account/login section headers too.
================================================================ */
div.ectdivhead, div.checkoutsteps {
  background: var(--color-light) !important; border: 1px solid var(--rc-border) !important;
  border-radius: var(--radius) !important; color: var(--color-text) !important;
  padding: 0.65rem 0.9rem !important; margin-bottom: 0.75rem !important;
}
div.checkoutstep { color: var(--color-muted) !important; font-weight: 600 !important; font-size: 0.85rem !important; }
div.checkoutstep.checkoutstepof3 { color: var(--color-cta) !important; }
div.cartname, div.loginheader { color: var(--color-dark) !important; font-weight: 700 !important; }
[data-theme="dark"] div.cartname, [data-theme="dark"] div.loginheader { color: var(--color-text) !important; }

/* ================================================================
   12d. Quick-Buy Popup & Shared Modal Backdrop (ECT — vsadmin/inc/incfunctions.php)
   div.ectopaque backs three popups on this site: quick-buy (qbopaque),
   notify-in-stock (iuopaque), and the account/login popup — styling it
   here fixes the backdrop for all three at once. div.ectsoftwrapper is
   the notify-in-stock/account box; div.qbuywrapper is quick-buy's own.
   No scwrap/iuwrap "soft cart" toast markup found in this site's
   incfunctions.php — skipped, nothing to style.
================================================================ */
div.qbopaque, div.iuopaque, div.ectopaque { background-color: rgba(7,13,18,0.6) !important; }
div.qbuywrapper, div.ectsoftwrapper {
  background: var(--color-card-bg) !important; border: 1px solid var(--color-cta) !important;
  border-radius: var(--radius) !important; color: var(--color-text) !important;
  box-shadow: 0 16px 48px rgba(7,13,18,0.45) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
div.qbuywrapper div.prodname { color: var(--color-dark) !important; font-weight: 700 !important; }
[data-theme="dark"] div.qbuywrapper div.prodname { color: var(--color-text) !important; }
div.qbuywrapper div.scclose:hover { opacity: 0.6 !important; }

@media screen and (max-width:640px){
  div#printcontent.recptbody { font-size:0.92rem; }
  div.receiptaddresses { flex-direction:column; }
  div.receiptaddress { min-width:99%; width:auto; }
  div.receiptshippingaddress { float:none; }
  div.receiptprodid, div.receiptoptgroup { display:none !important; }
}
@media print{
  body { font-size:12px; background:#fff; color:#000; }
  div#printcontent.recptbody { color:#000; }
  div.receiptsectionhead, div.rcontorderid, div.receiptheadrow, div.downloadheadrow { background-color:rgba(0,0,0,0.1)!important; color:#000!important; border-color:rgba(0,0,0,0.25)!important; }
  div.receiptaddress, div.receiptextra, div.receiptdownload, div.receiptlist, div.downloadlist { background:#fff!important; border-color:rgba(0,0,0,0.25)!important; }
  div.receiptleft, div.receiptright, div.receipttotalsrow div.ectright, div.rectotgrandtotal div.ectright { color:#000!important; }
  div.receiptoption { background-color:rgba(0,0,0,0.03)!important; color:#000!important; }
  a[href]:after { content:none!important; }
}

/* ================================================================
   Checkout — Terms & Conditions notice + modal (cart.php step 3)
================================================================ */
.ose-terms-notice {
    background: var(--color-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}
.ose-terms-notice__text { margin: 0; font-size: 0.9375rem; color: var(--color-text); flex: 1 1 260px; }
.ose-terms-notice__btn {
    background: transparent;
    color: var(--color-link);
    border: 1.5px solid var(--color-primary);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 10px 20px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.ose-terms-notice__btn:hover { background: var(--color-primary); color: #fff; }

.ose-terms-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ose-terms-modal[hidden] { display: none; }
.ose-terms-modal__overlay { position: absolute; inset: 0; background: rgba(11,22,40,0.6); }
.ose-terms-modal__box {
    position: relative;
    background: var(--color-card-bg);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    width: min(720px, 100%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ose-terms-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-light); }
.ose-terms-modal__header h2 { margin: 0; font-size: 1.125rem; color: var(--color-text); }
.ose-terms-modal__close { background: none; border: none; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--color-muted); padding: 0 4px; }
.ose-terms-modal__close:hover { color: var(--color-text); }
.ose-terms-modal__body { flex: 1; overflow: hidden; }
.ose-terms-modal__body iframe { width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; }
body.ose-modal-open { overflow: hidden; }

@media screen and (max-width:640px){
  .ose-terms-notice { flex-direction: column; align-items: stretch; text-align: center; }
  .ose-terms-notice__btn { width: 100%; }
  .ose-terms-modal__box { max-height: 90vh; }
}

/* ================================================================
   Trust badges — proddetail.php buy-box + cart.php checkout steps
================================================================ */
.ose-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--color-light);
    border: 1px solid rgba(6,99,178,0.18);
    border-radius: var(--radius);
}
.ose-trust-badges__item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 150px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
}
.ose-trust-badges__item i, .ose-trust-badges__item .icon-svg {
    color: var(--color-cta);
    font-size: 1.125rem;
    width: 1.25em;
    text-align: center;
    flex-shrink: 0;
}
[data-theme="dark"] .ose-trust-badges { background: var(--color-surface); border-color: rgba(255,255,255,0.12); }

/* Stacked variant — icon over label over sub-caption, three equal columns.
   Used on the product detail buy column (proddetail.php's <template>); the
   plain inline variant above is still what cart.php's checkout steps use, so
   this is a modifier rather than an edit to the base rules. */
.ose-trust-badges--stacked {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 16px 12px;
    text-align: center;
}
.ose-trust-badges--stacked .ose-trust-badges__item {
    flex: none;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0 6px;
    min-width: 0;
}
/* Thin rules between the three cells instead of boxing each one — keeps the
   group reading as a single strip rather than three nested cards. */
.ose-trust-badges--stacked .ose-trust-badges__item + .ose-trust-badges__item {
    border-left: 1px solid rgba(6,99,178,0.16);
}
[data-theme="dark"] .ose-trust-badges--stacked .ose-trust-badges__item + .ose-trust-badges__item {
    border-left-color: rgba(255,255,255,0.12);
}
.ose-trust-badges--stacked .ose-trust-badges__item i, .ose-trust-badges--stacked .ose-trust-badges__item .icon-svg {
    font-size: 1.375rem; width: auto;
}
.ose-trust-badges--stacked .ose-trust-badges__label {
    font-size: 0.6875rem; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--color-text); line-height: 1.2;
}
.ose-trust-badges--stacked .ose-trust-badges__sub {
    font-size: 0.6875rem; font-weight: 400; line-height: 1.35;
    color: var(--color-muted); text-wrap: balance;
}
@media screen and (max-width: 400px) {
    /* Sub-captions are the first thing to go when there's no room for them —
       the icon + label still carry the message. */
    .ose-trust-badges--stacked { padding: 12px 8px; }
    .ose-trust-badges--stacked .ose-trust-badges__sub { display: none; }
}

@media screen and (max-width:640px){
  .ose-trust-badges { justify-content: center; text-align: center; }
  .ose-trust-badges__item { flex: 1 1 45%; justify-content: center; }
}

/* Sticky Add-to-Cart bar — proddetail.php only, built in js/main.js. Shows
   on every viewport once the real buy box scrolls out of view; its button
   scrolls back to and focuses the real Add to Cart / Backorder button
   rather than duplicating cart submission logic. The outer bar spans full
   width (background bleeds edge-to-edge); the inner row is capped at the
   site's standard 1440px content width so it doesn't stretch awkwardly on
   wide desktop screens. */
.ose-sticky-atc {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900; /* under the terms modal + minicart's 1000, above everything else */
    background: var(--color-dark);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
    transform: translateY(100%);
    transition: transform var(--transition);
}
.ose-sticky-atc.is-visible { transform: translateY(0); }
.ose-sticky-atc__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.ose-sticky-atc__info { min-width: 0; display: flex; flex-direction: column; }
.ose-sticky-atc__name {
    font-size: 0.6875rem; color: rgba(255,255,255,0.65);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw;
}
.ose-sticky-atc__price { font-size: 1rem; font-weight: 800; color: #fff; }
.ose-sticky-atc__btn {
    flex-shrink: 0;
    border: none; border-radius: var(--radius);
    padding: 12px 18px; min-height: 44px;
    font-weight: 700; font-size: 0.875rem;
    color: #fff;
    background: linear-gradient(180deg, var(--color-cta), var(--color-cta-dk));
    box-shadow: var(--shadow-glow);
    cursor: pointer;
}
.ose-sticky-atc__btn:active { transform: translateY(1px); }
@media screen and (min-width: 769px) {
    /* Desktop buy box is narrower and the page reads left-to-right in a
       grid, not a single column — keep the bar's contents from spreading
       edge-to-edge and cap the name column so it doesn't crowd the button. */
    .ose-sticky-atc__name { max-width: 360px; }
    .ose-sticky-atc__btn { padding: 12px 28px; }
}

/* ================================================================
   ECT native browse surfaces — categories.php, products.php,
   proddetail.php. These are the real ECT-generated classes (verified
   against vsadmin/inc/inccategories.php, incproductbody2.php,
   incproddetail.php, incfunctions.php::writepagebar) — NOT the
   .product-grid/.product-card wrapper classes used elsewhere, which
   only style the custom homepage layout.
================================================================ */

/* ---- Categories — 4-col grid, deterministic uniform card widths/heights ---- */
div.categorymessage { color: var(--color-muted); margin: 0 0 1.2rem; }
div.catnavigation, div.navdesc {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--color-muted); margin: 0 0 1rem;
}
/* Plain breadcrumb bar — border and colored badge background both removed
   per Frank's request, same treatment as catnavproducts/catnavdetail below. */
div.catnavandcheckout.catnavcategories {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
}
/* products.php — plain, no badge background/border around the breadcrumb +
   checkout button bar, per request. */
div.catnavandcheckout.catnavproducts {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
}
div.catnavandcheckout.catnavcategories div.catnavigation,
div.catnavandcheckout.catnavproducts div.catnavigation { margin: 0; line-height: 1.2; }
div.allcatdiscounts, div.catdiscounts { font-size: 0.8125rem; font-weight: 700; color: var(--color-link); margin: 0.3rem 0; }

div.categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 2rem; }
div.category {
    width: 100%;
    background: var(--color-card-bg);
    border: 1px solid #E8EBF0;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    transition: transform var(--hover-transition), box-shadow var(--hover-transition), border-color var(--hover-transition);
}
div.category:hover {
    transform: translateY(calc(var(--hover-lift) * 1.25));
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-primary);
}
div.catimage { display: flex; align-items: center; justify-content: center; height: 200px; overflow: hidden; background: var(--color-light); border-radius: var(--radius); }
div.catimage img { max-height: 100%; width: auto; object-fit: contain; transition: transform var(--hover-transition); }
div.category:hover div.catimage img { transform: scale(1.05); }
div.catname { font-size: 1rem; font-weight: 700; color: var(--color-dark); margin-top: 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
div.catname a { color: var(--color-dark); text-decoration: none; }
div.catdesc { color: var(--color-muted); line-height: 1.5; margin-top: 0.3rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* categories.php previously reskinned into a dark bento-tile look with a
   blue-gradient background and inverted-to-white category images (icons
   only, real uploaded photos hidden). Removed per Frank's request — the
   page now falls back to the plain light-card style above (div.category /
   div.catimage), which shows the actual admin-uploaded category images. */

/* ---- Products — 4-col grid, deterministic uniform card widths/heights ---- */
div.catheader {
    font-weight: 800; font-size: 1.25rem; color: var(--color-text);
    background: var(--color-light); border-left: 4px solid var(--color-cta);
    border-radius: var(--radius); padding: 0.6rem 1rem; margin: 0 0 1.25rem;
}
/* Page-level discount summary (incproductbody.php:25, incproductbody2.php:50)
   — printed once above the grid when a category/promo-page discount applies
   to every product on it. Was completely unstyled (raw browser-default text),
   sitting bare above the cards; wrap it in the same light-panel treatment as
   div.catheader above so it reads as one deliberate promo banner. */
div.discountsapply.allproddiscounts {
    font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--color-link); margin: 0 0 0.35rem;
}
div.proddiscounts.allproddiscounts {
    background: var(--color-light); border-left: 4px solid var(--color-cta);
    border-radius: var(--radius); padding: 0.7rem 1rem; margin: 0 0 1.25rem;
    font-size: 0.875rem; line-height: 1.6;
}
div.prodid, div.prodmanufacturer, div.prodsku {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--color-muted);
}

div.prodfilterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 1.25rem; }
div.prodfilter.filtertext { font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); }
/* incproducts.php:239/248/275/304 wraps each <select> in div.prodfilter with no
   positioning, and appearance:none below strips the native arrow with nothing
   replacing it. Same custom-chevron pattern as div.option::after (line 2584). */
div.prodfilter:has(> select) { position: relative; display: inline-block; }
div.prodfilter:has(> select)::after {
    /* var(--color-muted) instead of var(--color-dark) — the latter is
       near-black and disappears against the dark card background this
       chevron sits on in dark mode. */
    content: ""; position: absolute; right: 0.85rem; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted);
    transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
select.prodfilter, select.ectselectinput.prodfilter {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
    color: var(--color-text); padding: 0.4rem 1.6rem 0.4rem 0.6rem; cursor: pointer;
    width: 100%; box-sizing: border-box; color-scheme: light dark;
}

div.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 2rem; }
div.product {
    width: 100%;
    background: var(--color-card-bg);
    border: 1px solid #4A7DBF;
    border-radius: var(--card-radius);
    /* overflow:hidden below (needed to clip the ::before gradient bar to the
       rounded corners) clips this element's own box-shadow in every major
       browser — filter:drop-shadow() paints the shadow after that clip is
       applied, so it stays visible. Keep box-shadow/filter in sync with
       .product-card and div.category above. */
    filter: drop-shadow(var(--card-shadow));
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--hover-transition), filter var(--hover-transition), border-color var(--hover-transition);
}
div.product::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-cta), var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}
div.product:hover {
    transform: translateY(calc(var(--hover-lift) * 1.25));
    filter: drop-shadow(var(--card-shadow-hover));
    border-color: var(--color-primary);
}
div.product:hover::before { transform: scaleX(1); }
/* Hard rule 5: the tile's contents sit inside an unclassed <form>, a direct
   child of div.product — that form must also be a flex column, or
   margin-top:auto on the add-to-cart div below has no effect. */
div.product > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* div.imagenavigator.prodimagenavigator (Prev / 1 of N / Next) renders
   nested INSIDE div.prodimage (see incfunctions.php ~line 2280) — it must be
   a flex column so the nav sits below the image instead of squeezed beside
   it, and overflow must stay visible so the nav isn't clipped. */
div.prodimage {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    border-radius: var(--radius); padding: 8px 0; overflow: hidden;
}
/* Fixed (not max-) height so every product thumbnail occupies the same
   vertical space regardless of its native source size — mirrors
   div.catimage's height:200px pattern above. object-fit:contain letterboxes
   smaller images instead of leaving the card visibly shorter. */
div.prodimage img { height: 240px; width: auto; max-width: 100%; object-fit: contain; transition: transform var(--hover-transition); }
div.product:hover div.prodimage img { transform: scale(1.05); }
div.imagenavigator, div.prodimagenavigator {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 0.5rem;
}
/* These render as input.ectbutton (imageorbutton() in incfunctions.php), so
   without !important here the base .ectbutton rule (line ~1988, itself
   !important) wins the cascade regardless of source order and its default
   sizing/shadow bled through. Restyle as a compact blue pill — same CTA
   blue as the rest of the site, just scaled down for this minor
   thumbnail-nav role instead of a full-size button. */
div.imagenavigator input.ectbutton, div.prodimagenavigator input.ectbutton {
    background: var(--color-cta) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
div.imagenavigator input.ectbutton:hover, div.prodimagenavigator input.ectbutton:hover {
    background: var(--color-cta-dk) !important;
}
div.imagenavigator .extraimage, div.prodimagenavigator .extraimage { font-size: 0.75rem; color: var(--color-muted); }
/* min-height matches the real rendered height of 2 lines at the inherited
   line-height:1.6 (2 * 1.6em = 3.2em) — short single-line titles now reserve
   the same space as long ones instead of leaving a shorter gap above the price. */
div.prodname { font-size: 1rem; font-weight: 700; color: var(--color-dark); margin-top: 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; }
div.prodname a { color: var(--color-dark); text-decoration: none; }
div.product:hover div.prodname a { color: var(--color-link); }
div.prodrating { margin: 0.3rem 0; }
/* showproductreviews(2,'prodrating') (incfunctions.php:1873) prints this as
   <div class="smallreviewstars prodrating"> — same element the global
   svg.icon rule above forces to 42px for the product-detail page's larger
   review widget. Too big for a compact listing card, so it's sized down
   here for this context only; div.detailreviewstars above is untouched.
   The "Based on N ratings" link (incfunctions.php:1896, a.prodratinglink)
   inherits the ambient card font-size — shrunk to match. */
div.prodrating svg.icon { width: 16px !important; height: 16px !important; }
div.prodrating a.prodratinglink { font-size: 0.75rem !important; }
/* Same badge treatment as div.detailinstock on proddetail.php, for visual
   consistency between product-card and product-detail in-stock messaging. */
div.prodinstock {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: #0A7A3C; font-size: 0.8125rem; font-weight: 700;
    background: rgba(0,200,100,0.1); border: 1px solid rgba(0,200,100,0.28); border-radius: var(--radius);
    padding: 0.2rem 0.6rem; margin: 0.3rem 0;
}
/* Status dot rather than a Font Awesome checkmark — reads as a live
   availability indicator and drops the icon-font dependency. */
div.prodinstock::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: 0 0 8px;
}
[data-theme="dark"] div.prodinstock { color: #4ADE80; }
/* Free-shipping exemption notice (incfunctions.php:2225) — per-card notice
   ECT prints on products excluded from a site-wide free-shipping discount.
   Hidden per Frank's request; can't edit vsadmin/ to remove it at the source. */
div.ectwarning.freeshippingexempt { display: none; }
div.proddescription { color: var(--color-muted); line-height: 1.5; margin: 0.3rem 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
div.listprice { color: var(--color-muted); text-decoration: line-through; }
div.prodprice { color: var(--color-cta-dk); font-weight: 900; font-size: 1.375rem; letter-spacing: -0.02em; margin-top: 0.4rem; }
/* Anchor the price row (and everything after it — currency line, qty
   stepper, buy button) to the bottom of the card as one block, instead of
   just anchoring the buy button on its own. Card content above varies in
   height (name wraps 1-2 lines, description clamps 0-3 lines, rating/
   in-stock badges are optional), which used to leave the price sitting at
   different heights card-to-card while the button stayed pinned below it —
   the button lined up across a row but the price above it didn't. Giving
   the *first* price-block element margin-top:auto instead pushes that
   whole tail (price → button) down together, so the price always sits
   directly above the button and both land in the same place on every card
   in a row. incfunctions.php:2327 only prints div.listpricediv when a
   product actually has a list price set, so target whichever element is
   actually first: listpricediv when present, prodprice when not. */
div.product > form > div.listpricediv,
div.product > form:not(:has(> .listpricediv)) > div.prodprice { margin-top: auto; }
div.prodcurrency { color: var(--color-muted); }
div.quantitydiv { margin: 0.5rem 0; }
/* Covers both layout tokens (standalone addtocart vs combined qty+button) —
   whichever doesn't render on this site is a harmless no-op selector. Only
   padding here now — margin-top:auto lives on the price block above so the
   button follows immediately after price/qty in normal flow instead of
   competing for the same flex free space (which would split the gap between
   the two and pull them apart). */
div.addtocart, div.prodaddtocart, div.addtocartquant, div.prodaddtocartquant,
div.notifystock, div.configbutton, div.outofstock { padding-top: 0.6rem; }
/* Stretch the buy/backorder/out-of-stock button to the full width of the card
   instead of the default shrink-to-content size — the button was previously
   an island in the middle of the card's bottom padding, inconsistent with
   the rest of the card spanning edge-to-edge. */
div.addtocart .ectbutton, div.prodaddtocart .ectbutton,
div.addtocartquant .ectbutton, div.prodaddtocartquant .ectbutton,
div.notifystock .ectbutton, div.configbutton .ectbutton,
div.outofstock .ectbutton {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
/* div.wishlistcontainer.productwishlist (the heart button) renders as a
   sibling right after the buy button, inside this same div.addtocart wrapper
   (incproductbody2.php:199) — laid out as a row so the heart sits beside
   the buy button, same treatment as div.addtocart.detailaddtocart on
   proddetail.php below. The buy button's width:100% above still works here:
   as a flex item it shrinks to fill the remaining row width instead of
   fighting the heart for space (same pattern already proven on the detail
   page's 100%-width buy button beside its own flex:0 0 auto heart). */
div.addtocart.prodaddtocart {
    display: flex;
    align-items: center;
    gap: 8px;
}
div.wishlistcontainer.productwishlist {
    flex: 0 0 auto;
}

/* Pagination — real classes are div.pagenumbers / span.pagebar*, confirmed
   against writepagebar() in incfunctions.php (NOT div.pagenums). */
div.pagenumbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin: 2rem 0; }
div.pagenumbers a { text-decoration: none; }
span.pagebarnum, span.pagebarprevnext, span.pagebarquo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding: 0 0.5rem; box-sizing: border-box;
    border: 1px solid #D1D5DB; border-radius: var(--radius);
    color: var(--color-text); font-weight: 700;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
div.pagenumbers a:hover span.pagebarnum,
div.pagenumbers a:hover span.pagebarprevnext,
div.pagenumbers a:hover span.pagebarquo { background: var(--color-cta); border-color: var(--color-cta); color: #fff; }
span.pagebarnum.currpage { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
span.pagebarsep { display: none; }

/* PayPal Pay-Later message banner — vsadmin's own data-pp-message div,
   hydrated in place by the PayPal SDK. Products-page listing uses base
   class "paylaterquote" (incproductbody2.php); detail/cart pages use
   "paylaterbanner" (incproddetail.php, inccart.php) — different base
   token, so both must be targeted. It sits above div.products as a
   sibling (not inside a card), so centering its own content is what
   actually matters once the wrapper already spans full width. */
div.paylaterbanner, div.paylaterquote {
    display: flex; justify-content: center; align-items: center;
    width: 100%; max-width: 100%; margin: 0.6rem 0;
}
div.paylaterbanner iframe, div.paylaterquote iframe { width: 100% !important; }
/* The product-detail page's version of this banner (div.paylaterbanner.detailpaylaterbanner,
   vendor's data-pp-style-ratio="20x1" placement="product" message) sits as a bare
   <section> child directly under the header — with only the rule above, it
   stretches edge-to-edge and reads as a generic full-bleed ad strip rather than
   part of the page. Cap it to the same width/gutters as the rest of the page
   content and give it breathing room from the header above and breadcrumb below. */
div.paylaterbanner.detailpaylaterbanner {
    max-width: 1440px;
    margin: 0.85rem auto !important;
    padding: 0 16px;
    box-sizing: border-box;
}

/* ---- Product detail ---- */
div.proddetail { padding: 0.5rem 0 2rem; }
/* Hero layout: image left (50%), Product ID / Price / Options / Qty+Add-to-Cart
   stacked right (50%). incproddetail.php prints these as flat form siblings in
   this DOM order (vsadmin/includes.php:258): productname, PRODUCTIMAGE,
   socialmedia, reviewstars, PRODUCTID, sku, instock, description, discounts,
   listprice, OPTIONS, PRICE, currency, ADDTOCARTQUANT, reviews, previousnext.
   The 4 right-column fields aren't contiguous in that order (sku/instock/
   description/discounts/listprice sit between productid and price) and one
   item (the image) needs to visually span several stacked rows — flexbox
   can't span rows across wrapped lines, so this needs Grid with explicit
   placement: title gets its own full-width row 1; image spans rows 2-6 in
   column 1; the 4 right-column fields go in column 2, rows 2-5 in the order
   requested (ID, Price, Options, Qty+Button — currency rides with price).
   Everything else is given grid-column:1/-1 with NO explicit row, so Grid's
   auto-placement stacks it in normal DOM order in the first fully-open row
   (7+, since rows 1-6 are fully claimed by the explicit items above). */
#mainbodyspan.proddetail > form {
    display: grid;
    /* 55% gallery / 45% info per the approved mockup. The info side is split
       into two sub-columns purely so Price and the stock badge can share one
       row (price left, stock right) — every other field in the info column
       spans `2 / -1` and reads as one column. */
    /* 50% (not 55%) because the gallery panel's height is derived from its own
       width — MagicSlideshow's `height:50%` option makes the slider half the
       panel's inner width, so panel height ≈ width/2 + thumbnail strip +
       padding. At 55% that came out ~46px taller than the info column; 50%
       with tighter padding lands the two within ~10px of each other. */
    grid-template-columns: 50% minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 0.9rem;
    align-items: start;
}
/* Right-column rhythm: each of these fields carries its own ad hoc margin
   tuned for wherever it renders elsewhere on the site (listing cards, cart,
   etc) — stacked together here those margins compounded unevenly. Zero them
   out and let the grid's row-gap set one consistent rhythm instead. */
div.largereviewstars.detailreviewstars, div.smallreviewstars.detailreviewstars,
div.detaildiscounts, div.detailid, div.detailinstock, div.detaillistprice,
div.detailprice, div.detailoptions, div.addtocartquant.detailaddtocartquant,
div.detailcurrency {
    margin: 0 !important;
}
/* pddprodnavigation() prints ONE wrapper — div.catnavandcheckout.catnavdetail —
   containing both the breadcrumb (div.catnavigation) and the checkout button
   (div.catnavcheckout); it's the first thing printed (vsadmin/inc/incproddetail.php:546-548),
   ahead of even the title, so it gets its own row above everything. */
div.catnavandcheckout.catnavdetail {
    grid-column: 1 / -1; grid-row: 1;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
    /* Plain breadcrumb bar — border and badge background both removed per
       Frank's request, matching the other two catnavandcheckout variants
       above. Was previously a green/neutral badge panel; now just the
       breadcrumb text and checkout button sitting directly on the page. */
    margin: 0 0 0.75rem !important;
}
/* div.catnavigation's own margin-bottom:1rem (line 2069) adds invisible space
   under the breadcrumb text, throwing off align-items:center above — zero it
   out here so the text itself sits centered in the badge, not its margin box. */
div.catnavandcheckout.catnavdetail div.catnavigation { margin: 0; line-height: 1.2; }
/* Breadcrumb refinement — muted trail, blue links, roomier separators. The
   trail's depth comes from the product's real category assignment
   (pddprodnavigation()); this only restyles whatever levels the vendor
   actually emits. */
div.catnavandcheckout.catnavdetail div.catnavigation,
div.catnavandcheckout.catnavdetail div.ectbreadcrumb {
    color: var(--color-muted);
    font-size: 0.75rem; letter-spacing: 0.04em;
}
div.catnavandcheckout.catnavdetail div.ectbreadcrumb { margin-left: 0.25rem; }
div.catnavandcheckout.catnavdetail a.ectlink {
    color: var(--color-link); text-decoration: none; font-weight: 600;
}
div.catnavandcheckout.catnavdetail a.ectlink:hover { text-decoration: underline; }
/* Title now heads the info column (mockup) rather than spanning full width
   above both columns, so it sits directly above PART # / price / buy box
   and the gallery starts level with it. */
div.detailname { grid-column: 2 / -1; grid-row: 2; }
/* Gallery spans the whole info column (title through discounts, rows 2-11)
   but NOT the description row (12) — description needs the full width, which
   would overlap the image if it stayed in column 1. */
div.detailimage.allprodimages {
    grid-column: 1;
    grid-row: 2 / 12;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    /* Frame the photo in a card panel instead of letting it float bare on
       white page background — on portrait/narrow product photos (most of
       the catalog) that bare layout reads as dead empty space rather than a
       deliberate image area. White (not tinted) so product photos shot on a
       white background blend seamlessly instead of showing a visible seam;
       a soft shadow does the framing work instead of a flat border line. */
    background: var(--color-card-bg);
    border: 1px solid rgba(13,23,33,0.08);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    padding: 16px;
    /* Fills the row rather than sitting at its top, so the panel's bottom edge
       lines up with the info column's instead of ending short. */
    align-self: stretch;
    /* MagicSlideshow (magicslideshow/magicslideshow.css) sets internal z-index
       values up to 2000 (.mss-button-play/.mss-button-fullscreen) and even
       9999999999 (.mss-feedback-animation tap ripple). Without its own
       stacking context, those values compete directly against the sticky
       header (z-index:1000) instead of staying contained to the widget —
       that's why the rotating slide briefly renders above the header during
       its transition. isolation:isolate contains it regardless of how high
       MagicSlideshow's internal values go. */
    isolation: isolate;
}
img.detailimage.allprodimages { width: 100%; height: auto; margin: 0 auto; }
/* Re-skin MagicSlideshow's nav arrows (magicslideshow/magicslideshow.css) from
   its default neutral gray to the site's CTA blue, scoped to the product
   image so it reads as part of the site instead of a bolted-on vendor widget. */
div.detailimage.allprodimages .mss-horizontal .mss-slider .mss-arrow-prev:before,
div.detailimage.allprodimages .mss-horizontal .mss-slider .mss-arrow-next:before {
    border-color: var(--color-cta) !important;
}
/* Shrink the prev/next click targets (magicslideshow.css .mss-arrows-pair)
   from the full image height down to half, centered vertically, so the
   hover/tap zone doesn't span the whole slide. */
div.detailimage.allprodimages .mss-horizontal .mss-arrows-pair {
    top: 25%;
    height: 50%;
}
/* Subtle zoom on hover — the slide wrapper clips it so the enlarged image
   never spills past the card's rounded corners. Scoped to .mss-slider (not
   the whole card) so hovering the thumbnail row below doesn't also zoom the
   photo. Only the active slide's <img> moves; MagicSlideshow's own slide
   transitions are opacity-based, so this doesn't fight its animation. */
div.detailimage.allprodimages .mss-slide-wrapper { overflow: hidden; }
div.detailimage.allprodimages .mss-slide img { transition: transform 0.4s ease; }
div.detailimage.allprodimages .mss-slider:hover .mss-slide.mss-slide-active img {
    transform: scale(1.035);
    cursor: zoom-in;
}
/* ---- Thumbnails (selectors-style:thumbnails, set in vsadmin/includes.php's
   magictooloptions) — real product-image thumbnails instead of plain nav
   dots. MagicSlideshow renders each as img.mss-selector.mss-selector-thumbnails
   inside div.mss-selectors.mss-thumbnails, with img.mss-selector-active
   marking the current slide (confirmed via rendered-DOM inspection, since
   this markup is built client-side by magicslideshow.js, not printed by
   incproddetail.php). */
div.detailimage.allprodimages .mss-thumbnails {
    background: transparent !important;
    margin-top: 4px;
}
div.detailimage.allprodimages .mss-selector.mss-selector-thumbnails {
    width: 72px !important;
    height: 72px !important;
    margin: 0 5px !important;
    /* contain, not cover — several catalog photos are portrait/odd-ratio and
       cover would crop the part out of its own thumbnail. */
    object-fit: contain;
    /* Same fill as the main image panel above so both flip together in dark
       mode (no hardcoded hex — see the token list in CLAUDE.md). */
    background: var(--color-card-bg);
    padding: 3px;
    box-sizing: border-box;
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color var(--transition);
}
div.detailimage.allprodimages .mss-selector.mss-selector-thumbnails:hover {
    border-color: var(--color-cta);
}
div.detailimage.allprodimages .mss-selector.mss-selector-thumbnails.mss-selector-active {
    border: 2px solid var(--color-cta);
}
/* MagicSlideshow's default active-state indicator — a tracking "eye" box
   drawn in white — is redundant with (and visually clashes against) the
   per-thumbnail border above. */
div.detailimage.allprodimages .mss-selectors-eye { display: none !important; }
/* On narrow phones four 72px thumbs (+ margins) exceed the card's inner
   width and the last one gets clipped by .mss-selectors' overflow:hidden.
   Shrink them so the full set stays visible without a scroll affordance. */
@media screen and (max-width: 480px) {
    div.detailimage.allprodimages .mss-selector.mss-selector-thumbnails {
        width: 56px !important; height: 56px !important; margin: 0 3px !important;
    }
}
/* Product ID / stock / price / qty+add-to-cart block moved to the very top of
   the right column (even with the image top) per request — this pushes
   review stars and the discount badge below the buy box instead of above it. */
div.detailid { grid-column: 2 / -1; grid-row: 3; }
div.detaillistprice { grid-column: 2 / -1; grid-row: 4; }
/* Price and the stock badge share row 5 — price in the left sub-column,
   stock pinned to the right edge and centred against the price's cap height.
   Neither element's own styling is touched, only where it sits. */
div.detailprice { grid-column: 2; grid-row: 5; }
/* align-self:start (not center) because div.detailprice also contains the
   PayPal pay-later quote, making that cell much taller than the price line —
   centring would drop the badge well below the price it belongs beside. The
   small top offset optically centres it against the price's cap height. */
div.detailinstock { grid-column: 3; grid-row: 5; justify-self: end; align-self: start; margin-top: 0.3rem !important; }
/* FLM's actual price->options gap (div.detailprice margin-bottom:0.4rem +
   div.detailoptions margin-top:0.75rem, on a row-gap:0 grid) nets to
   1.15rem — bigger than the tight price cluster above it, not smaller.
   +0.25rem here on top of the 0.9rem row-gap matches that net total. */
div.detailoptions { grid-column: 2 / -1; grid-row: 6; margin-top: 0.25rem !important; }
div.addtocartquant.detailaddtocartquant { grid-column: 2 / -1; grid-row: 7; }
/* Trust row (Fast Shipping / Secure Checkout / Expert Support) — not vendor
   markup, cloned in by js/main.js from the <template> in proddetail.php
   right after the buy box, so it needs the same explicit grid placement as
   every other buy-column field. Row numbers below are shifted +1 to make
   room for it. */
div.ose-trust-badges { grid-column: 2 / -1; grid-row: 8; margin: 0 !important; }
div.detailcurrency { grid-column: 2 / -1; grid-row: 9; }
div.largereviewstars.detailreviewstars, div.smallreviewstars.detailreviewstars { grid-column: 2 / -1; grid-row: 10; }
/* "Free USPS Ground Shipping on Select Items" is this product's configured
   discount/promo message (pdddiscounts() -> div.detaildiscounts), not the
   site-wide header banner. */
div.detaildiscounts { grid-column: 2 / -1; grid-row: 11; }
div.detaildescription, div.detailshortdescription { grid-column: 1 / -1; grid-row: 12; }
/* Everything not explicitly placed above — auto-placed full width below. */
div.socialmediabuttons,
div.detailsku,
div.reviews#reviews, div.previousnext {
    grid-column: 1 / -1;
}
/* Tablet / narrow desktop: the info column is now too tight to seat the price
   and the stock badge side by side (the badge text "In Stock — N Available"
   alone needs ~200px), so stock drops onto its own row and everything below
   it shifts down one. The gallery's row span grows to match. */
@media screen and (min-width: 701px) and (max-width: 1100px) {
    div.detailinstock { grid-column: 2 / -1; grid-row: 6; justify-self: start; }
    div.detailoptions { grid-row: 7; }
    div.addtocartquant.detailaddtocartquant { grid-row: 8; }
    div.ose-trust-badges { grid-row: 9; }
    div.detailcurrency { grid-row: 10; }
    div.largereviewstars.detailreviewstars, div.smallreviewstars.detailreviewstars { grid-row: 11; }
    div.detaildiscounts { grid-row: 12; }
    div.detailimage.allprodimages { grid-row: 2 / 13; }
    div.detaildescription, div.detailshortdescription { grid-row: 13; }
}
/* Mobile: one column. Rows are assigned explicitly rather than left to
   auto-placement because the vendor's DOM order puts the description between
   the stock badge and the price (vsadmin/includes.php:258) — auto-placement
   would render the full product copy above the buy box. This pins the
   requested order: gallery, title, part #, price, stock, options, buy box,
   trust, then the reading content. */
@media screen and (max-width: 700px) {
    #mainbodyspan.proddetail > form { grid-template-columns: minmax(0, 1fr); }
    div.catnavandcheckout.catnavdetail, div.detailname, div.detailimage.allprodimages,
    div.largereviewstars.detailreviewstars, div.smallreviewstars.detailreviewstars,
    div.detaildiscounts, div.detailid, div.detailsku, div.detaillistprice, div.detailprice,
    div.detailcurrency, div.detailoptions, div.detailinstock, div.detaildescription,
    div.detailshortdescription, div.addtocartquant.detailaddtocartquant, div.ose-trust-badges,
    div.socialmediabuttons, div.reviews#reviews, div.previousnext {
        grid-column: 1; justify-self: stretch;
    }
    div.catnavandcheckout.catnavdetail { grid-row: 1; }
    div.detailimage.allprodimages { grid-row: 2; }
    div.detailname { grid-row: 3; }
    div.detailid { grid-row: 4; }
    div.detailsku { grid-row: 5; }
    div.detaillistprice { grid-row: 6; }
    div.detailprice { grid-row: 7; }
    div.detailinstock { grid-row: 8; justify-self: start; }
    div.detailoptions { grid-row: 9; }
    div.addtocartquant.detailaddtocartquant { grid-row: 10; }
    div.ose-trust-badges { grid-row: 11; }
    div.largereviewstars.detailreviewstars, div.smallreviewstars.detailreviewstars { grid-row: 12; }
    div.detaildiscounts { grid-row: 13; }
    div.detailcurrency { grid-row: 14; }
    div.detaildescription, div.detailshortdescription { grid-row: 15; }
    /* These three MUST be placed explicitly too. Any field this product lacks
       (no list price, no options, no review stars, no discount) leaves its row
       empty, and a full-width auto-placed item backfills the first empty row
       it finds — which dropped the whole reviews block in between the stock
       badge and Add to Cart. Explicit rows keep the tail in reading order. */
    div.socialmediabuttons { grid-row: 16; }
    div.reviews#reviews { grid-row: 17; }
    div.previousnext { grid-row: 18; }
}
div.detailsku, div.detailmanufacturer {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--color-muted); margin: 0.3rem 0;
}
/* PART # ALI-4295 — parts-catalog treatment. Vendor markup is
   `<div class="detailid"><span class="prodidlabel detailidlabel">Product ID</span>
   <span itemprop="productID">ali-4295</span></div>`. The label text is
   replaced presentation-side (zero the span's font-size, draw the new label
   from ::before) rather than edited in vsadmin/ — the itemprop="productID"
   value is untouched, so structured data still emits the real SKU. Sized
   well below the title and price so it supports them instead of competing. */
div.detailid {
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-muted); margin: 0 0 -0.4rem;
    display: flex; align-items: baseline; gap: 0.4rem;
}
div.detailid span.prodidlabel.detailidlabel { font-size: 0; letter-spacing: 0; }
div.detailid span.prodidlabel.detailidlabel::before {
    content: "PART #";
    font-size: 0.8125rem; letter-spacing: 0.08em; font-weight: 700;
    color: var(--color-cta);
}
div.detailid span[itemprop="productID"] {
    text-transform: uppercase; color: var(--color-text); font-weight: 700;
}
[data-theme="dark"] div.detailid span[itemprop="productID"] { color: var(--color-text); }
/* Bottom margin trims the grid's 0.9rem row-gap (line 3225) down to
   FLM's own computed name/id gap: FLM's proddetail grid runs row-gap:0
   with div.detailname's own margin-bottom:0.25rem as the only spacing, so
   -0.65rem here (0.9rem - 0.65rem = 0.25rem net) matches it exactly. */
div.detailname h1 { margin: 0 0 -0.65rem; }
span.detaildiscountsapply, div.detaildiscounts { font-size: 1.1875rem; font-weight: 700; color: var(--color-link); }
div.detailinstock {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: #0A7A3C; font-size: 0.9375rem; font-weight: 700;
    background: rgba(0,200,100,0.1); border: 1px solid rgba(0,200,100,0.28); border-radius: var(--radius);
    padding: 0.3rem 0.75rem; margin: 0.5rem 0;
}
/* Status dot rather than a Font Awesome checkmark (see div.prodinstock). */
div.detailinstock::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: currentColor; flex: 0 0 9px;
}
[data-theme="dark"] div.detailinstock { color: #4ADE80; }
/* Out-of-stock state for the JS-injected per-option stock badge (js/main.js) */
div.detailinstock.oseoptionstock-out {
    color: #B91C1C; background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.28);
}
/* Out-of-stock reuses the dot; currentColor turns it red. */
div.detailinstock.oseoptionstock-out::before { content: ''; }
[data-theme="dark"] div.detailinstock.oseoptionstock-out { color: #F87171; }
/* Neutral "not chosen yet" state — shown until the customer picks an option
   (js/main.js). No checkmark; the green/red icon shouldn't appear before we
   actually know the stock status of what they've selected. */
div.detailinstock.oseoptionstock-prompt {
    color: var(--color-muted); background: var(--color-light); border-color: var(--rc-border);
}
div.detailinstock.oseoptionstock-prompt::before { content: none; }
[data-theme="dark"] div.detailinstock.oseoptionstock-prompt { color: var(--color-muted); }
/* Low-stock urgency state — plain and per-option stock badges (js/main.js)
   switch to this once quantity on hand drops to OSE_LOW_STOCK_THRESHOLD or
   below (but still > 0). Amber, not red — red is reserved for out-of-stock. */
div.detailinstock.oseoptionstock-low {
    color: #B45309; background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.35);
}
div.detailinstock.oseoptionstock-low::before { content: ''; }
[data-theme="dark"] div.detailinstock.oseoptionstock-low { color: #FBBF24; background: rgba(245,166,35,0.14); border-color: rgba(245,166,35,0.3); }
/* Section heading — nothing in the vendor markup labels this block, it just
   drops straight into the product copy right after the purchase area. Same
   pattern as the "Customer Reviews" heading above (div.reviews#reviews::before).
   Scoped to detaildescription only (the canonical long-form field — see the
   description/shortdescription duplicate-text gotcha noted elsewhere in this
   file) so it can't double up if both fields happen to render. */
div.detaildescription::before {
    content: "Product Details";
    /* Small uppercase label over a short accent rule — the technical
       parts-catalog heading treatment, shared with "Customer Reviews" below.
       width:fit-content keeps the rule to the text width (these pseudo-
       elements are grid items in some contexts, where inline-block would be
       blockified and stretch the rule across the whole column). */
    display: block; width: fit-content;
    font-size: 0.9375rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-dark);
    border-bottom: 3px solid var(--color-cta);
    padding-bottom: 6px; margin-bottom: 1.1rem;
}
[data-theme="dark"] div.detaildescription::before { color: var(--color-text); }
div.detaildescription, div.detailshortdescription {
    color: var(--color-text); font-size: 1.1875rem !important; line-height: 1.7;
    /* Extra top margin (vs. a plain 0.75rem elsewhere) marks the section break
       between the "decide to buy" hero area above and the reading content below. */
    margin: 2.5rem 0 0.75rem;
    /* Same card treatment as div.product (line 2173) — background/border/radius/shadow —
       so the description reads as its own section instead of loose page text. */
    background: var(--color-card-bg);
    border: 1px solid #E8EBF0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
}
[data-theme="dark"] div.detaildescription, [data-theme="dark"] div.detailshortdescription {
    border-color: rgba(255,255,255,0.1);
}
div.detaildescription *, div.detailshortdescription * { font-size: 1.1875rem !important; }
/* Cap reading line length — the card itself spans the full grid width (it
   sits below both the image and buy-box columns), but unbroken prose that
   wide is harder to read than the rest of the page's copy. */
div.detaildescription > *, div.detailshortdescription > * { max-width: 900px; }
/* Generic "What's Included" / "Specifications" treatment — activates only
   when a product's admin-entered description actually contains a <ul> or
   <table> (most don't; this product's description is plain prose). No
   content is invented here: this purely restyles whatever real list/table
   markup a description happens to include, so it stays accurate per-product
   across the whole catalog instead of hardcoding one product's specs into
   the shared proddetail.php template. */
div.detaildescription ul, div.detailshortdescription ul {
    list-style: none; padding-left: 0; margin: 0.75rem 0 0;
}
div.detaildescription ul li, div.detailshortdescription ul li {
    position: relative; padding-left: 1.6rem; margin-bottom: 0.45rem;
}
div.detaildescription ul li::before, div.detailshortdescription ul li::before {
    /* Checkmark as an SVG mask (Font Awesome removed 2026-09-01). */
    content: ""; position: absolute; left: 0; top: 0.3em; width: 0.85em; height: 0.85em;
    background-color: var(--color-cta);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
div.detaildescription table, div.detailshortdescription table {
    width: 100%; max-width: 900px; border-collapse: collapse; margin: 1rem 0 0; font-size: 1rem;
}
div.detaildescription table td, div.detaildescription table th,
div.detailshortdescription table td, div.detailshortdescription table th {
    padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--rc-border); text-align: left;
}
div.detaildescription table th, div.detailshortdescription table th {
    text-transform: uppercase; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.06em; color: var(--color-muted);
}
@media screen and (max-width: 700px) {
    div.detaildescription table, div.detaildescription table tbody,
    div.detaildescription table tr, div.detaildescription table td,
    div.detailshortdescription table, div.detailshortdescription table tbody,
    div.detailshortdescription table tr, div.detailshortdescription table td {
        display: block; width: 100%;
    }
}
/* pDescription content is WYSIWYG HTML from the admin editor — embedded
   YouTube videos carry hardcoded width="560" height="315" HTML attributes.
   The global `img { max-width:100% }` rule (line 69) doesn't cover iframes,
   so on any viewport narrower than 560px this forced the whole product page
   into horizontal scroll. Constrain to the card width and hold a 16:9 ratio. */
div.detaildescription iframe, div.detailshortdescription iframe {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
}
/* "You save %s" (admin-configured $yousavetext) prints inside THIS div after
   the list price, on its own line — tighten the line box so that line sits
   close instead of inheriting the page's normal line-height. Bottom margin
   matches FLM's own computed listprice->price gap (its listprice has no
   bottom margin, price has margin-top:0.4rem, on a row-gap:0 grid = 0.65rem
   net; here 0.9rem row-gap - 0.25rem = the same 0.65rem). */
div.detaillistprice { color: var(--color-muted); text-decoration: line-through; line-height: 1.3; margin: 0 0 -0.25rem; }
/* Matches div.prodprice's treatment on listing cards (blue, bold, larger) —
   this is the "decide to buy" page, the price should outrank plain body
   text, not match it. Top margin left at the grid default (0) since the
   listprice->price gap is controlled by div.detaillistprice's own bottom
   margin above, not here — don't correct the same gap from both sides. */
div.detailprice { color: var(--color-cta-dk); font-weight: 900; font-size: 1.875rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
div.detailcurrency { color: var(--color-muted); }

/* Qty box + Add to Cart button — vendor actually wraps both in
   div.addtocartquant.detailaddtocartquant (confirmed from live markup) and
   already makes that a flex row via ectcart.css, but also sets
   flex-grow:1 on the .addtocart child there, which stretches/skews it;
   pin the wrapper's own layout here with !important so it always wins. */
div.addtocartquant.detailaddtocartquant {
    display: flex !important; align-items: center !important; flex-wrap: nowrap;
    gap: 0.75rem; padding: 0 !important; margin: 0 0 0.75rem !important;
}
div.addtocartquant.detailaddtocartquant > .addtocart { flex-grow: 0 !important; }
div.detailquantity {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0;
}
div.detailquantitytext { font-weight: 600; white-space: nowrap; }
div.quantity0div, div.quantity1div, div.quantity2div,
div.detailquantity0div, div.detailquantity1div, div.detailquantity2div {
    display: inline-flex !important; align-items: center; gap: 0.35rem;
    height: 44px !important; min-height: 44px !important; box-sizing: border-box;
    border: 1px solid #D1D5DB !important; border-radius: var(--radius);
    overflow: hidden; /* clips the +/- hover fill below to the rounded corners */
}
/* The +/- steppers (quantup() in incfunctions.php) render as bare unclassed
   <div onclick="quantup(...)">+/-</div> siblings of the qty input — no hook
   to target them individually, so style every non-input child of the
   quantity wrapper. Previously plain unstyled text with no interactive
   feedback, out of step with the site's blue hover language used everywhere
   else on this page. */
div.quantity0div > div, div.quantity1div > div, div.quantity2div > div,
div.detailquantity0div > div, div.detailquantity1div > div, div.detailquantity2div > div {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 100%; box-sizing: border-box;
    font-size: 1.125rem; font-weight: 700; color: var(--color-muted);
    cursor: pointer; user-select: none;
    transition: background var(--transition), color var(--transition);
}
div.quantity0div > div:hover, div.quantity1div > div:hover, div.quantity2div > div:hover,
div.detailquantity0div > div:hover, div.detailquantity1div > div:hover, div.detailquantity2div > div:hover {
    background: var(--color-light); color: var(--color-link);
}
input.quantity0input, input.detailquantity0input,
input.quantity1input, input.detailquantity1input,
input.quantity2input, input.detailquantity2input {
    height: 100% !important; width: 60px !important; box-sizing: border-box; text-align: center;
    border: none !important; background: transparent;
    font-size: 1rem; padding: 0 0.4rem; font-family: inherit;
}
div.addtocart.detailaddtocart {
    display: inline-flex; align-items: center;
    margin: 0; margin-top: 0; padding-top: 0;
    flex: 1 1 auto; /* fills remaining row width beside the quantity box */
}

/* ---- Wishlist heart icon (was "Add to List") — product-detail + listing ----
   Vendor prints <button class="ectbutton detailwishlist">Add To List</button>
   (proddetail.php, inside div.addtocart.detailaddtocart) and
   <button class="ectbutton prodwishlist">Add To List</button> (products.php
   listing cards, inside div.addtocart.prodaddtocart) right after their
   respective buy buttons (vsadmin/inc/incproddetail.php:748 and
   incproductbody2.php:199 — imageorbuttontag(), text/markup can't be
   changed there without editing vsadmin). Both wrappers are flex rows (see
   above), so the same icon-only treatment applies to both button classes.
   The base .ectbutton rule (gradient bg, white text, padding) still applies
   by cascade order, so it's fully overridden here rather than unset,
   keeping one predictable source of truth instead of `all: unset` fighting
   the !important gradient/shadow declarations. Text is hidden with
   text-indent/overflow rather than :empty tricks since the vendor button
   always has a text node ("Add To List") we can't remove server-side. */
div.wishlistcontainer.detailwishlist,
div.wishlistcontainer.productwishlist {
    flex: 0 0 auto;
}
div.wishlistcontainer.detailwishlist { margin: 0 0 0 6px; }
button.ectbutton.detailwishlist,
button.ectbutton.prodwishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    /* ectcart.css:1174 sets `button.detailwishlist { min-width:180px }`. A
       min-width ALWAYS wins over width no matter the specificity or
       !important, so without this the heart stayed a 180px-wide button with
       the glyph centred in it — which read as the icon floating ~90px away
       from Add to Cart. Clamping min/max is what actually sizes it. */
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    /* Icon-only, no button chrome — no circle/oval, no fill, no border. */
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-muted) !important;
    overflow: hidden;
    text-indent: -9999px; /* hide the "Add To List" text node without touching vendor markup */
    white-space: nowrap;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
/* Heart glyph is an inline SVG mask (outline heart by default) painted with
   currentColor — Font Awesome was removed site-wide 2026-09-01, so the old
   "\f004" web-font glyph rendered as an empty box. Same mask technique as
   the other self-hosted icons in this file. */
button.ectbutton.detailwishlist::before,
button.ectbutton.prodwishlist::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2l-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2l-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
button.ectbutton.detailwishlist:hover,
button.ectbutton.prodwishlist:hover {
    background: transparent !important;
    color: var(--color-cta) !important;
    transform: none !important;
}
button.ectbutton.detailwishlist:focus-visible,
button.ectbutton.prodwishlist:focus-visible {
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}
/* Saved state — toggled by js/main.js after the vendor's own add-to-list
   flow runs (displaysavelist()/subformid() in js/ectcart.js). Solid heart
   glyph (font-weight 900) + brand blue, and stays filled since the vendor
   flow doesn't expose a "remove" callback to hook a reverse toggle onto. */
button.ectbutton.detailwishlist.is-wishlisted,
button.ectbutton.prodwishlist.is-wishlisted {
    color: var(--color-cta) !important;
}
button.ectbutton.detailwishlist.is-wishlisted::before,
button.ectbutton.prodwishlist.is-wishlisted::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E");
}
@media screen and (max-width: 480px) {
    div.wishlistcontainer.detailwishlist { margin-left: 6px; }
    button.ectbutton.detailwishlist,
    button.ectbutton.prodwishlist {
        width: 40px !important; height: 40px !important;
        min-width: 40px !important; max-width: 40px !important; min-height: 40px !important;
    }
}

/* ---- "My Wish List" popup (#savelistdiv / div.savecartlist) ----
   Vendor default (css/ectcart.css) renders this as a bare gray-bordered box
   with a drop-shadow, pinned dead center of the page via
   position:absolute + top/left:50% + transform:translate(-50%,-50%) —
   visually disconnected from the heart button that opened it.

   An anchored position:absolute-inside-the-wrapper approach was tried first
   but div.product (the listing card) has overflow:hidden (clips its hover
   accent bar to the card's rounded corners), which also clips this popup
   before it can render below the card — and div.product:hover sets a
   transform, which creates a new containing block that would trap even
   position:fixed right back inside the clipped card. So instead js/main.js
   detaches #savelistdiv to a direct child of <body> the moment it opens and
   sets its top/left inline from the clicked heart's bounding rect — this
   position:fixed rule is just the static half of that (JS supplies the
   coordinates every time). Content and show/hide are still 100%
   vendor-driven (incfunctions.php:699-708 prints the list items;
   displaysavelist()/checksldiv() in js/ectcart.js handle open/close) —
   this is presentation/positioning only, nothing here touches behavior. */
div.savecartlist {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1000;
    min-width: 170px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 6px;
}
div.savecartlist > div {
    border: none !important;
    background: transparent !important;
    padding: 8px 10px;
    min-width: 0 !important;
    border-radius: calc(var(--radius) - 6px);
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
div.savecartlist > div:hover { background: rgba(8,132,237,0.1) !important; color: var(--color-link); }
div.savecartlist > div + div { border-top: 1px solid var(--color-border) !important; margin-top: 2px; padding-top: 8px; }
div.savecartlist a.wishlistmenu { display: block; color: inherit; text-decoration: none; font-weight: 700; }
[data-theme="dark"] div.savecartlist { border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] div.savecartlist > div + div { border-top-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] div.savecartlist > div:hover { background: rgba(255,255,255,0.08) !important; color: var(--color-cta); }

/* Bigger + bolder than a plain .ectbutton — this is the single most important
   click on the page, it should visually outrank surrounding text/buttons.
   Overrides the sitewide .ectbutton's gradient fill + persistent blue glow
   (css/style.css line ~2144) with a flat fill + neutral resting shadow —
   scoped to just this button so the rest of the site's buttons (nav, mini-cart,
   listing cards) keep their existing look. A confident, premium primary
   action reads as flat/solid + restrained, not glowing. */
input.ectbutton.detailbuybutton, button.ectbutton.detailbuybutton {
    height: 52px !important; width: 100% !important; box-sizing: border-box;
    padding: 0 1.75rem !important; font-size: 1.0625rem !important; font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    background: var(--color-cta) !important;
    box-shadow: 0 1px 3px rgba(13,23,33,0.18) !important;
}
input.ectbutton.detailbuybutton:hover, button.ectbutton.detailbuybutton:hover {
    background: var(--color-cta-dk) !important;
    box-shadow: 0 4px 10px rgba(13,23,33,0.2) !important;
    transform: translateY(-1px) !important;
}
input.ectbutton.detailbuybutton:active, button.ectbutton.detailbuybutton:active {
    background: var(--color-cta-dk) !important;
    box-shadow: 0 1px 2px rgba(13,23,33,0.16) !important;
    transform: translateY(0) !important;
}
div.detailnotifystock, div.detailoutofstock { color: var(--color-muted); margin: 0.75rem 0; }

/* PayPal "Pay in 4" quote — vendor prints it INSIDE div.detailprice
   (class "paylaterquote detailpaylaterquote"), so it already sits under
   the price in the DOM; it only needed to stop being center-stretched
   across the full card width like the listing-page version. */
div.paylaterquote.detailpaylaterquote {
    display: block; justify-content: flex-start;
    width: auto; max-width: 320px; margin: 0.5rem 0 0;
}
div.paylaterquote.detailpaylaterquote iframe { width: 100% !important; }

/* Category/product breadcrumb trail — reduced to 12px per Frank's request */
div.catnavigation { font-size: 12px; }

/* Ask a Question / Tell a Friend + social icons row — one shared card
   background behind the whole group instead of per-icon chrome. */
div.socialmediabuttons {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.75rem; width: fit-content; margin: 1.25rem auto;
    background: var(--color-card-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
}
div.socialmediabutton { display: inline-flex; align-items: center; }
input.ectbutton.smaskaquestion, input.ectbutton.lgaskaquestion,
input.ectbutton.smemailfriend, input.ectbutton.lgemailfriend {
    height: auto !important; line-height: normal !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding-top: 6px !important; padding-bottom: 6px !important;
    font-size: 0.8125rem !important;
}

/* Facebook Like (routed through smcustom, see vsadmin/includes.php) /
   Twitter (X) Post / Pinterest Save render as vendor-branded iframes we
   can't recolor — just align them to the same baseline as the
   Ask a Question / Tell a Friend buttons, no extra wrapper chrome. */
div.socialmediabutton.smcustom,
div.socialmediabutton.smtwitter,
div.socialmediabutton.smpinterest {
    min-height: 44px;
    justify-content: center;
}

/* Product pager — vendor prints two <a> separated by a bare " | " text node
   (incproddetail.php). font-size:0 on the container hides that pipe without
   touching vendor markup; the links restore their own size. Laid out as
   left/right outlined pills so it reads as navigation rather than two
   underlined words floating mid-page. */
div.previousnext {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 2.5rem 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--rc-border);
    font-size: 0;
}
div.previousnext a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0.6rem 1.1rem; box-sizing: border-box;
    font-size: 0.8125rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text); text-decoration: none;
    background: var(--color-card-bg);
    border: 1px solid var(--rc-border); border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
div.previousnext a:hover {
    border-color: var(--color-cta); color: var(--color-cta); background: var(--color-light);
}
/* Keeps a lone "Next »" (first product in a category, no Previous link)
   pinned to the right edge instead of jumping to the left. */
div.previousnext a:only-of-type { margin-left: auto; }
@media screen and (max-width: 480px) {
    div.previousnext a { padding: 0.6rem 0.8rem; font-size: 0.75rem; letter-spacing: 0.04em; }
}

@media screen and (max-width: 480px) {
    div.detailquantity, div.addtocart.detailaddtocart { display: flex; width: 100%; margin-right: 0; }
}

/* ---- Option dropdowns (listing + detail) ----
   div.option/div.detailoption are plain full-width wrapper divs; the
   <select> inside only takes its intrinsic width, so a custom arrow
   positioned against the div floats away from the select unless both are
   constrained to the same box. */
div.option, div.detailoption { position: relative; display: inline-block; width: 100%; max-width: 280px; }
/* Border/chevron were hardcoded to var(--color-dark) (near-black) — fine in
   light mode, but invisible against the dark card background these sit on
   in dark mode. Switched to tokens that flip with the theme. */
select.prodoption, select.detailprodoption {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
    color: var(--color-text); font-family: inherit; padding: 0.5rem 2rem 0.5rem 0.7rem;
    cursor: pointer; width: 100%; box-sizing: border-box; color-scheme: light dark;
}
div.option::after, div.detailoption::after {
    content: ""; position: absolute; right: 0.85rem; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted);
    transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
select.prodoption:focus, select.detailprodoption:focus { outline: none; box-shadow: 0 0 0 2px rgba(8,132,237,0.35); }

@media screen and (max-width: 1024px) {
  div.categories, div.products { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
  div.categories, div.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  div.category, div.product { padding: 12px; }
  div.catimage, div.prodimage { height: 140px; }
  div.prodimage img { max-height: 140px; }
}
@media screen and (max-width: 480px) {
  div.categories, div.products { grid-template-columns: 1fr; }
}

/* ================================================================
   21. Tables — cart line items (cart.php, inccart.php) and order
   history (account page, incclientlogin.php). Both are ECT's own
   div-based "table" markup (header row + data rows), not real <table>
   elements — cosmetic-only overrides here (background/border/color),
   no display/flex/width changes, so ECT's own column layout is untouched.
================================================================ */

/* Cart line-items header row — blue "table header" */
div.cartdetails_cntnr {
    background: var(--color-light) !important;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--color-link) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem !important;
}
/* Cart line-items rows — thin divider lines */
div.cartandoptsline {
    border-bottom: 1px solid var(--color-border);
}
div.cartline { color: var(--color-text); }
div.cartlinename, div.cartlinenamecr { color: var(--color-text) !important; font-weight: 600 !important; }
div.cartlineprice, div.cartlinetotal { color: var(--color-text) !important; font-weight: 700 !important; }

/* ---- Cart line actions — Delete + "Move to List" (div.cartlinecheck) ----
   Vendor markup (displaycartactions() in vsadmin/inc/inccart.php:2569)
   prints these as two separate sibling divs — div.cartdelete (a raw ~24px
   <img>) and div.cartaddtolist (a button that inherits the site's full-size
   gradient CTA treatment from the global .ectbutton rule). Vendor's own
   layout (css/ectcart.css) leaves both as plain blocks with no shared
   alignment, so the tiny icon and the full CTA button never line up,
   either against each other or between cart rows where one is missing
   (guest checkout has no "Move to List"). Row them up on one flex baseline
   and shrink the button to a compact secondary action so its scale matches
   the delete icon instead of dominating the cell. */
div.cartlinecheck {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
div.cartdelete, div.cartaddtolist {
    display: inline-flex;
    align-items: center;
}
img.cartdelete {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: transform var(--transition);
}
div.cartdelete a:hover img.cartdelete { transform: scale(1.1); }
button.ectbutton.cartaddtolist {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: normal !important;
    box-shadow: none !important;
}

/* Order history (account page) — one card per order, zebra background,
   hover highlight, blue accent on status/total. */
div.ectclientlogorder {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: background var(--transition), box-shadow var(--transition);
}
div.ectclientlogorder:hover { box-shadow: var(--shadow-card-hover); }
div.ectclientlogorder:nth-child(even) { background: var(--color-light-gray); }
span.ectclordlabel { color: var(--color-muted); font-weight: 700; }
div.ectclordarticle span.ectclordlabel { color: var(--color-link); font-weight: 800; }
div.ectclordrow1, div.ectclordrow2 {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.5rem 1rem; padding: 6px 0;
}
div.ectclordrow2 { border-top: 1px solid var(--color-border); }
div.ectclordrow3 {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 10px 0 0; margin-top: 8px; border-top: 1px solid var(--color-border);
}
div.ectclprodimg img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: var(--color-light); }
div.ectclordprodid { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
div.ectclordprodname { color: var(--color-text); font-weight: 600; }

/* Trust bar — sits directly above the footer, sitewide (footer.php) */
.trust-bar { background: var(--color-light-gray); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 14px 0; }
.trust-bar-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 1.5rem 2.5rem;
}
.trust-item { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-muted); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.trust-item i, .trust-item .icon-svg { color: var(--color-cta-dk); font-size: 1rem; }
[data-theme="dark"] .trust-bar { background: var(--color-navy); border-color: rgba(255,255,255,0.08); }
@media screen and (max-width: 640px) {
    .trust-bar-inner { gap: 0.75rem 1.25rem; }
    .trust-item { font-size: 0.75rem; }
}