/**
 * CE Product Theme — Frontend Styles
 * Locomoto · v1.1.0
 *
 * Variables are scoped to .ce-product-* wrappers so nothing leaks into the
 * rest of the theme. Override them in your CE global CSS if needed.
 */

/* ── Sitewide brand font: Inter ─────────────────────────────────────
   Matches the homepage / new website brand guide. Imported here (not
   relying on the megamenu skin or homepage stylesheet) so the PDP
   renders Inter even when those stylesheets aren't loaded. Weights
   match the full range used across PDP rules (400–900). ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body#product,
body.page-product {
    font-family: 'Inter', system-ui, sans-serif;
}
/* Cover descendants that the PS theme/CE explicitly sets font-family on
   — without this, nested widgets that hard-set font-family to a theme
   default override the body rule. */
body#product *:not(i):not(.fa):not([class*="fa-"]),
body.page-product *:not(i):not(.fa):not([class*="fa-"]) {
    font-family: 'Inter', system-ui, sans-serif;
}

/* ── Prevent horizontal scrollbar from transforms / large decorative SVGs ── */
/* overflow-x: clip (not hidden) so position:sticky still works on child     */
/* elements — "clip" visually clips without creating a new scroll container. */
/* NB: clip ONLY on <body>, never on <html>. overflow-x:clip on the root      */
/* element makes <html> a clip/scroll container, which breaks the sitewide    */
/* sticky mobile footer (position:fixed; bottom:0): on a phone it then only   */
/* "peeked the tip" while scrolling down and popped out on scroll-up. body    */
/* alone contains the PDP horizontal overflow without touching fixed bars.    */
body {
    overflow-x: clip;
}

/* ── Remove click outlines, preserve keyboard focus ─────────────────────── */
body#product :focus:not(:focus-visible),
body.page-product :focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Design tokens (matching mockup) ────────────────────────────────────── */
.elementor-widget-loco-product-summary,
.elementor-widget-loco-product-images,
.elementor-widget-loco-product-description,
.elementor-widget-loco-product-attributes,
.elementor-widget-loco-add-to-cart,
.elementor-widget-loco-product-tabs,
.elementor-widget-loco-product-stock,
.elementor-widget-product-summary,
.elementor-widget-product-images,
.elementor-widget-product-description,
.elementor-widget-product-attributes,
.elementor-widget-add-to-cart,
.elementor-widget-product-tabs,
.elementor-widget-product-vehicle-fitment,
.elementor-widget-product-reviews,
.elementor-widget-product-faq,
.elementor-widget-product-stock,
.elementor-widget-product-units-sold,
.elementor-widget-product-delivery-hints,
.elementor-widget-product-specifications,
.elementor-widget-product-table-of-contents,
.elementor-widget-loco-product-attachments {
    --cept-bg:          #ededf0;
    --cept-surface:     #ffffff;
    --cept-surface2:    #f6f6f9;
    --cept-border:      rgba(0,0,0,.07);
    --cept-border2:     rgba(0,0,0,.12);
    --cept-text:        #0d0d18;
    --cept-muted:       #68707d;
    --cept-faint:       #68707d;
    --cept-accent:      var(--loco-accent,      rgb(10 22 34));
    --cept-accent-dark: var(--loco-accent-dark, rgb(5 11 17));
    --cept-accent-text: var(--loco-accent-text, #ffffff);
    --cept-green:       #2d6a4f;
    --cept-green-bg:    rgba(45,106,79,.09);
    --cept-gold:        #f59e0b;

    /* Aliased to canonical --r-* scale defined in header-controls.css
       (single source of truth, 2026-05-17 unification). Keeping cept
       names so existing rules keep compiling without a sweep. */
    --cept-radius:      var(--r-md,  14px);
    --cept-radius-xs:   var(--r-sm,   8px);
    --cept-radius-sm:   var(--r-md,  14px);
    --cept-radius-md:   var(--r-md,  14px);
    --cept-radius-lg:   var(--r-lg,  18px);
    --cept-radius-xl:   var(--r-xl,  28px);

    --cept-shadow:      0 3px 12px rgba(0,0,0,.08);
    --cept-shadow-xs:   0 1px 4px rgba(0,0,0,.06);
    --cept-shadow-sm:   0 3px 12px rgba(0,0,0,.08);
    --cept-shadow-md:   0 8px 32px rgba(0,0,0,.10);
    --cept-shadow-lg:   0 24px 64px rgba(0,0,0,.14);

    --cept-glass:       rgba(255,255,255,.80);
    --cept-glass-blur:  blur(24px);
}

/* ── Product Summary widget ──────────────────────────────────────────────── */
.cept-summary {}

.cept-summary .cept-brand {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cept-accent);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.cept-summary .cept-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
}

.cept-summary .cept-sku {
    font-size: 12px;
    color: var(--cept-faint);
    margin-bottom: 12px;
}

.cept-summary .cept-short-desc {
    font-size: 14px;
    color: var(--cept-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Rating row */
.cept-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    margin-bottom: 14px;
}
.cept-stars {
    display: flex;
    gap: 2px;
}
.cept-stars svg {
    width: 14px;
    height: 14px;
    fill: var(--cept-gold);
}
.cept-r-score { font-weight: 700; font-size: 13px; }
.cept-r-count { font-size: 12px; color: var(--cept-muted); }
.cept-r-sold  { font-size: 12px; color: var(--cept-muted); margin-left: auto; }
.cept-r-sold strong { color: currentColor; font-weight: 700; }

/* Price block */
.cept-price-block {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius);
    padding: 16px 18px;
    margin-bottom: 14px;
}
.cept-price-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.product-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    /* Brand dark-blue — matches every section H2 (Product Description /
       Specifications / Reviews / etc. all use #0d0d18). The PS theme's
       default body color is plain rgb(35,35,35); without this override
       the H1 reads slightly lighter than the rest of the page and breaks
       the visual hierarchy. */
    color: #0d0d18;
}

.product-title .cept-title-sub {
    display: block;
    font-size: .65em;
    font-weight: 500;
    color: var(--cept-faint);
    letter-spacing: 0;
    margin-top: 4px;
}

.cept-price-main  { font-size: 32px; font-weight: 800; }
.cept-price-was   { font-size: 13px; color: var(--cept-faint); text-decoration: line-through; margin-top: 2px; }
.cept-price-save  { font-size: 13px; font-weight: 700; color: var(--cept-green); }

.cept-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cept-green-bg);
    border: 1px solid rgba(34,197,94,.25);
    color: var(--cept-green);
    padding: 6px 12px;
    border-radius: var(--r-lg, 18px);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.cept-stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cept-green);
    animation: cept-pulse 1.8s infinite;
}
@keyframes cept-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.cept-oos-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.2);
    color: #ef4444;
    padding: 6px 12px;
    border-radius: var(--r-lg, 18px);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Delivery estimate */
.cept-delivery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--cept-border);
    font-size: 12px;
    color: var(--cept-muted);
}
.cept-delivery-row span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.cept-delivery-row svg { width: 12px; height: 12px; color: var(--cept-accent); }
.cept-delivery-row strong { color: #000; }

/* Quick spec pills */
.cept-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}
.cept-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--r-lg, 18px);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
}
.cept-pill svg { width: 12px; height: 12px; color: var(--cept-accent); }

/* ── Product Images widget ───────────────────────────────────────────────── */
.cept-gallery { position: relative; }
.cept-gallery.sticky { position: sticky; top: 20px; }

.cept-main-img-wrap {
    position: relative;
    border-radius: var(--cept-radius);
    overflow: hidden;
    background: #f7f7f9;
    aspect-ratio: 1;
    box-shadow: var(--cept-shadow);
}
.cept-main-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.cept-main-img-wrap:hover img { transform: scale(1.04); }

/* Overlay badges */
.cept-img-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.cept-img-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 16px;
}
.cept-img-badge--accent { background: var(--cept-accent); color: #fff; }
.cept-img-badge--dark   { background: rgba(0,0,0,.7); color: #fff; backdrop-filter: blur(6px); }

/* Thumbnails */
.cept-thumbs-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cept-thumbs-row::-webkit-scrollbar { display: none; }
.cept-thumbs-row--bottom { flex-direction: row; align-items: flex-start; }
.cept-thumbs-row--left   { position: absolute; left: -90px; top: 0; width: 80px; flex-direction: column; }
.cept-thumbs-row--right  { position: absolute; right: -90px; top: 0; width: 80px; flex-direction: column; }

.cept-thumbs-row .cept-thumb {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

/* Custom thumbnail styling */
.cept-thumb {
    aspect-ratio: 1;
    border-radius: var(--cept-radius-sm);
    overflow: hidden;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: border-color .2s;
    background: #f0f0f2;
}
.cept-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--cept-radius-sm);
}
.cept-thumb.active {
    border-color: var(--cept-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cept-accent) 20%, transparent);
}
.cept-thumb:hover {
    border-color: color-mix(in srgb, var(--cept-accent) 60%, transparent);
}

/* Swiper carousel thumbnail styling (Elementor product images) */
.elementor-thumbnails-swiper .swiper-slide {
    border-radius: var(--cept-radius-sm);
    overflow: hidden;
    border: 2.5px solid transparent;
}

.elementor-thumbnails-swiper .swiper-slide:first-child {
    border-color: var(--cept-accent);
}

.elementor-thumbnails-swiper .swiper-slide:hover {
    border-color: var(--cept-accent);
}

.elementor-thumbnails-swiper .swiper-slide img {
    border-radius: var(--cept-radius-sm);
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Add to Cart widget ──────────────────────────────────────────────────── */
.cept-atc { display: flex; flex-direction: column; gap: 10px; }

.cept-atc-row {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 10px;
}

/* +/- stepper */
.cept-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    overflow: hidden;
}
.cept-qty-btn {
    width: 40px;
    height: 100%;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #333;
    transition: background .15s;
    flex-shrink: 0;
}
.cept-qty-btn:hover { background: rgba(0,0,0,.06); }
.cept-qty-num { font-size: 15px; font-weight: 700; min-width: 24px; text-align: center; }

/* ATC button */
.cept-btn-cart {
    height: 52px;
    background: var(--cept-accent);
    color: #fff;
    border: none;
    border-radius: var(--r-md, 14px);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(230,57,70,.25);
}
.cept-btn-cart:hover { background: var(--cept-accent-dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(230,57,70,.35); }
.cept-btn-cart:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-backorder {
    background: transparent !important;
    border: 2px solid var(--cept-accent) !important;
    color: var(--cept-accent) !important;
    box-shadow: none !important;
}
.btn-backorder:hover {
    background: color-mix(in srgb, var(--cept-accent) 10%, transparent) !important;
    transform: translateY(-1px) !important;
}
.cept-btn-cart svg { width: 17px; height: 17px; }

/* Secondary buttons row */
.cept-btn-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cept-btn-secondary {
    height: 44px;
    background: #fff;
    border: 1px solid var(--cept-border);
    border-radius: var(--r-md, 14px);
    font-size: 13px;
    font-weight: 600;
    color: var(--cept-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .2s;
}
.cept-btn-secondary:hover { border-color: var(--cept-accent); color: var(--cept-accent); }
.cept-btn-secondary svg { width: 14px; height: 14px; }

/* Trust row (4-cell) */
.cept-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--cept-border);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    overflow: hidden;
    margin-top: 6px;
}
.cept-trust-cell {
    background: var(--cept-surface);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.cept-trust-cell svg { width: 18px; height: 18px; color: var(--cept-accent); }
.cept-trust-label { font-size: 10px; font-weight: 700; }
.cept-trust-sub   { font-size: 9px; color: var(--cept-faint); }

/* ── Product Attributes widget ───────────────────────────────────────────── */
.cept-attributes { display: flex; flex-direction: column; gap: 18px; }

.cept-attr-group { display: flex; flex-direction: column; gap: 8px; }
.cept-attr-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--cept-faint); }
.cept-attr-selected { font-size: 13px; font-weight: 600; color: #000; margin-left: 8px; }

/* Button-style selectors (skill requirement: never dropdowns) */
.cept-attr-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.cept-attr-btn {
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid var(--cept-border);
    border-radius: var(--r-md, 14px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    color: #333;
    min-width: 44px;
    text-align: center;
    position: relative;
}
.cept-attr-btn:hover { border-color: var(--cept-accent); color: var(--cept-accent); }
.cept-attr-btn:focus { outline: none; }
.cept-attr-btn.active {
    background: var(--cept-accent);
    border-color: var(--cept-accent);
    border-width: 2.5px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(var(--cept-accent-rgb, 0,0,0), .18), 0 2px 8px rgba(0,0,0,.12);
}
.cept-attr-btn.active::before {
    content: '✓';
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 9px;
    color: rgba(255,255,255,.75);
    pointer-events: none;
    line-height: 1;
}
.cept-attr-btn.oos {
    color: #ccc;
    border-style: dashed;
    cursor: not-allowed;
}
/* Diagonal strike-through for OOS (skill: grey out, never hide) */
.cept-attr-btn.oos::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.07) 4px, rgba(0,0,0,.07) 5px);
    border-radius: inherit;
}

/* Color swatches */
.cept-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--cept-border);
    cursor: pointer;
    transition: transform .15s;
    position: relative;
}
.cept-swatch:hover { transform: scale(1.1); }
body#product .cept-swatch.active,
body#product .cept-swatch[data-selected="true"],
body.page-product .cept-swatch.active,
body.page-product .cept-swatch[data-selected="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cept-accent) !important; }

/* ── Product Tabs widget ─────────────────────────────────────────────────── */

/* — Style: horizontal tabs — */
.cept-tabs-header {
    display: flex;
    border-bottom: 2px solid var(--cept-border);
    gap: 0;
    overflow-x: auto;
}
.cept-tab-btn {
    padding: 13px 22px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--cept-muted);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cept-tab-btn:hover { color: #000; }
.cept-tab-btn.active { color: var(--cept-accent); border-bottom-color: var(--cept-accent); }
.cept-tab-btn svg { width: 14px; height: 14px; }

.cept-tab-pane {
    display: none;
    padding: 28px 0;
    animation: cept-fade .2s ease;
}
.cept-tab-pane.active { display: block; }
@keyframes cept-fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* — Style: scrollable long-page with sticky TOC — */
.cept-sections-wrap {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 36px;
    align-items: start;
}
.cept-toc-inner {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius);
    padding: 12px;
}
.cept-toc-heading {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cept-faint);
    padding: 0 6px 10px;
    border-bottom: 1px solid var(--cept-border);
    margin-bottom: 4px;
}
.cept-toc-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 6px;
    border-radius: var(--cept-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--cept-muted);
    text-decoration: none;
    transition: all .2s;
    margin-bottom: 2px;
}
.cept-toc-link::before {
    content: '';
    width: 3px;
    height: 13px;
    background: transparent;
    border-radius: 2px;
    flex-shrink: 0;
    transition: background .2s;
}
.cept-toc-link:hover { color: #000; background: rgba(0,0,0,.04); }
.cept-toc-link.active { color: var(--cept-accent); background: color-mix(in srgb, var(--cept-accent) 6%, transparent); font-weight: 700; }
.cept-toc-link.active::before { background: var(--cept-accent); }

.cept-sections-content {}
.cept-section {
    padding-bottom: 48px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--cept-border);
}
.cept-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.cept-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.cept-section-icon {
    width: 34px; height: 34px;
    background: color-mix(in srgb, var(--cept-accent) 10%, transparent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cept-section-icon svg { width: 16px; height: 16px; color: var(--cept-accent); }
.cept-section-title { font-size: 18px; font-weight: 800; }

/* ── Vehicle Fitment widget ──────────────────────────────────────────────── */
.cept-fitment {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius);
    overflow: hidden;
}
.cept-fitment-header {
    background: color-mix(in srgb, var(--cept-accent) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cept-accent) 12%, transparent);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cept-fitment-header-icon {
    width: 40px; height: 40px;
    background: color-mix(in srgb, var(--cept-accent) 12%, transparent);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cept-fitment-header-icon svg { width: 20px; height: 20px; color: var(--cept-accent); }
.cept-fitment-header-title { font-size: 15px; font-weight: 800; }
.cept-fitment-header-sub   { font-size: 12px; color: var(--cept-muted); margin-top: 2px; }

.cept-fitment-body { padding: 22px; }
.cept-fitment-selects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}
.cept-fitment-field { display: flex; flex-direction: column; gap: 5px; }
.cept-fitment-field label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--cept-faint); }
.cept-fitment-select {
    background: #fff;
    border: 1.5px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .2s;
    color: #333;
}
.cept-fitment-select:focus { outline: none; border-color: var(--cept-accent); }
.cept-fitment-btn {
    height: 44px;
    padding: 0 20px;
    background: var(--cept-accent);
    color: #fff;
    border: none;
    border-radius: var(--r-md, 14px);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
}
.cept-fitment-btn:hover { background: var(--cept-accent-dark); }
.cept-fitment-btn svg { width: 13px; height: 13px; }

.cept-fitment-result {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--cept-radius-sm);
    font-size: 13px;
    display: none;
}
.cept-fitment-result.ok { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #166534; }
.cept-fitment-result.warn { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); color: #92400e; }

/* Fitment table */
.cept-fitment-table-wrap { overflow-x: auto; margin-top: 20px; border-radius: var(--cept-radius); border: 1px solid var(--cept-border); }
.cept-fitment-table { width: 100%; border-collapse: collapse; }
.cept-fitment-table thead tr { background: color-mix(in srgb, var(--cept-accent) 6%, transparent); }
.cept-fitment-table th { padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--cept-accent); border-bottom: 1px solid color-mix(in srgb, var(--cept-accent) 15%, transparent); }
.cept-fitment-table td { padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--cept-border); }
.cept-fitment-table tr:last-child td { border-bottom: none; }
.cept-fitment-table tr:hover td { background: rgba(0,0,0,.02); }
.cept-compat-yes { color: var(--cept-green); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.cept-compat-yes svg { width: 12px; height: 12px; }

/* ── Reviews widget ──────────────────────────────────────────────────────── */
.cept-reviews-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}
.cept-score-card {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius);
    padding: 24px;
    text-align: center;
    position: sticky;
    top: 20px;
}
.cept-score-num { font-size: 64px; font-weight: 900; color: var(--cept-accent); line-height: 1; }
.cept-score-stars { display: flex; justify-content: center; gap: 2px; margin: 8px 0; }
.cept-score-stars svg { width: 16px; height: 16px; fill: var(--cept-gold); }
.cept-score-total { font-size: 12px; color: var(--cept-faint); }
.cept-bar-list { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.cept-bar-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cept-bar-num { width: 12px; text-align: right; color: var(--cept-muted); }
.cept-bar-track { flex: 1; height: 6px; background: rgba(0,0,0,.08); border-radius: 3px; overflow: hidden; }
.cept-bar-fill  { height: 100%; background: var(--cept-gold); border-radius: 3px; }
.cept-bar-pct   { width: 28px; font-size: 11px; color: var(--cept-faint); }

.cept-review-list { display: flex; flex-direction: column; gap: 12px; }
.cept-review-card {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    padding: 18px;
    transition: border-color .2s;
}
.cept-review-card:hover { border-color: rgba(230,57,70,.2); }
.cept-rev-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.cept-rev-author { font-weight: 700; font-size: 14px; }
.cept-rev-date   { font-size: 12px; color: var(--cept-faint); }
.cept-rev-stars  { display: flex; gap: 2px; margin-bottom: 8px; }
.cept-rev-stars svg { width: 12px; height: 12px; fill: var(--cept-gold); }
.cept-rev-text   { font-size: 13px; color: var(--cept-muted); line-height: 1.65; }
.cept-rev-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--cept-green); margin-top: 10px; }
.cept-rev-verified svg { width: 11px; height: 11px; }

/* ── FAQ widget ──────────────────────────────────────────────────────────── */
.cept-faq-wrapper { display: flex; flex-direction: column; gap: 8px; }
.cept-faq-item {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    overflow: hidden;
    transition: border-color .2s;
}
.cept-faq-item.open { border-color: rgba(230,57,70,.2); }
.cept-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .15s;
}
.cept-faq-question:hover { background: rgba(0,0,0,.03); }
.cept-faq-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    transition: transform .25s;
    color: var(--cept-faint);
    display: flex; align-items: center;
}
.cept-faq-icon svg { width: 16px; height: 16px; }
.cept-faq-item.open .cept-faq-icon { transform: rotate(180deg); }
.cept-faq-answer { display: none; padding: 0 18px 16px; font-size: 13px; color: var(--cept-muted); line-height: 1.7; }
.cept-faq-item.open .cept-faq-answer { display: block; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1024px) {
    .cept-sections-wrap { grid-template-columns: 1fr; }
    .cept-toc { position: static; }
    .cept-toc-inner { display: flex; flex-wrap: wrap; gap: 6px; background: none; border: none; padding: 0; }
    .cept-toc-heading { display: none; }
    .cept-toc-link { background: var(--cept-surface); border: 1px solid var(--cept-border); border-radius: var(--r-lg, 18px); padding: 6px 12px; font-size: 11px; margin-bottom: 0; }
    .cept-toc-link::before { display: none; }
    .cept-reviews-layout { grid-template-columns: 1fr; }
    .cept-score-card { position: static; }
}
@media(max-width:768px) {
    .cept-fitment-selects { grid-template-columns: 1fr 1fr; }
    .cept-fitment-btn { grid-column: 1/-1; justify-content: center; }
    .cept-trust-row { grid-template-columns: repeat(2,1fr); }
    .cept-atc-row { grid-template-columns: 100px 1fr; }
}
@media(max-width:480px) {
    .cept-fitment-selects { grid-template-columns: 1fr; }
    .cept-fitment-btn { grid-column: 1; }
    .cept-thumbs-row--bottom { grid-template-columns: repeat(4,1fr); }
    .cept-price-main { font-size: 26px; }
}

/* ── Vehicle Fitment Banners (status display) ────────────────────────── */
.cept-fitment-wrapper { display: flex; flex-direction: column; gap: 10px; }

.cept-fits-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--cept-radius-sm);
    border: 1.5px solid;
    transition: all .2s;
}
.cept-fits-ok {
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.25);
}
.cept-fits-incompatible {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.2);
}

.cept-fits-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
}
.cept-fits-ok .cept-fits-icon { background: var(--cept-green); }
.cept-fits-incompatible .cept-fits-icon { background: #ef4444; }

.cept-fits-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.cept-fits-body { flex: 1; }
.cept-fits-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1px;
}
.cept-fits-ok .cept-fits-title { color: var(--cept-green); }
.cept-fits-incompatible .cept-fits-title { color: #dc2626; }

.cept-fits-sub {
    font-size: 11px;
    color: var(--cept-muted);
    margin: 0;
}

.cept-fits-banner-link {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--r-lg, 18px);
    border: 1px solid currentColor;
    opacity: .7;
    transition: opacity .15s;
}
.cept-fits-banner-link:hover { opacity: 1; text-decoration: none; }
.cept-fits-ok .cept-fits-banner-link { color: var(--cept-green); }
.cept-fits-incompatible .cept-fits-banner-link { color: #dc2626; }

.cept-fits-guest {
    background: var(--cept-surface);
    border-color: var(--cept-border);
}
.cept-fits-icon-guest {
    background: var(--cept-muted);
}
.cept-fits-title-guest { color: var(--cept-text); }
.cept-fits-banner-link-guest { color: var(--cept-accent); }
.cept-fitment-banner-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: var(--cept-radius);
    overflow: hidden;
}

/* ── Fitment vehicle list (guest view) ───────────────────────────────────── */
.cept-fitment-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.cept-fitment-make {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    overflow: hidden;
}
.cept-fitment-make-name {
    background: color-mix(in srgb, var(--cept-accent) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cept-accent) 12%, transparent);
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cept-accent);
}
.cept-fitment-models {
    list-style: none;
    margin: 0;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cept-fitment-models li {
    font-size: 13px;
    font-weight: 600;
    color: var(--cept-text);
    padding: 3px 0;
    border-bottom: 1px solid var(--cept-border);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cept-fitment-models li:last-child { border-bottom: none; }
.cept-fitment-years {
    font-size: 11px;
    font-weight: 600;
    color: var(--cept-muted);
}
/* "Sign in to check your garage" — pill CTA button in the fitment header */
.cept-fitment-signin-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    background: var(--cept-accent);
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--cept-accent) 32%, transparent);
    transition: filter .15s, transform .15s, box-shadow .15s;
}
.cept-fitment-signin-link::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cept-fitment-signin-link:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--cept-accent) 42%, transparent);
    text-decoration: none;
}
.cept-fitment-no-fit {
    color: #dc2626;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--r-lg, 18px);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.cept-fitment-no-fit:hover { background: rgba(239,68,68,.14); color: #dc2626; text-decoration: none; }

/* ── Attachments ──────────────────────────────────────────── */
.cept-attachments-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cept-att-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid rgba(0,0,0,.08);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}

.cept-att-link:hover {
    border-color: var(--cept-accent);
    background: rgba(230,57,70,.04);
    color: inherit;
}

.cept-att-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cept-accent);
}

.cept-att-icon svg { width: 22px; height: 22px; }

.cept-att-body {
    flex: 1;
    min-width: 0;
}

.cept-att-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cept-att-desc {
    font-size: 11px;
    color: var(--cept-faint);
    margin: 2px 0 0;
}

.cept-att-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cept-att-ext {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    background: var(--cept-accent);
    color: var(--cept-accent-text);
    padding: 2px 6px;
    border-radius: 4px;
}

.cept-att-size {
    font-size: 10px;
    color: var(--cept-faint);
}

/* Hide attachments widget entirely when product has no files */
.elementor-widget-loco-product-attachments:has(.cept-attachments-empty) {
    display: none !important;
}

/* Attachments — full accent card */
.elementor-widget-loco-product-attachments .elementor-widget-container {
    background: var(--cept-accent) !important;
}
.elementor-widget-loco-product-attachments .cept-att-link {
    background: color-mix(in srgb, var(--cept-accent-text) 10%, transparent);
    border-color: color-mix(in srgb, var(--cept-accent-text) 20%, transparent);
    color: var(--cept-accent-text);
}
.elementor-widget-loco-product-attachments .cept-att-link:hover {
    background: color-mix(in srgb, var(--cept-accent-text) 20%, transparent);
    border-color: color-mix(in srgb, var(--cept-accent-text) 40%, transparent);
}
.elementor-widget-loco-product-attachments .cept-att-name {
    color: var(--cept-accent-text);
}
.elementor-widget-loco-product-attachments .cept-att-desc {
    color: color-mix(in srgb, var(--cept-accent-text) 70%, transparent);
}
.elementor-widget-loco-product-attachments .cept-att-size {
    color: color-mix(in srgb, var(--cept-accent-text) 70%, transparent);
}
.elementor-widget-loco-product-attachments .cept-att-ext {
    background: color-mix(in srgb, var(--cept-accent-text) 20%, transparent);
    color: var(--cept-accent-text);
}
.elementor-widget-loco-product-attachments .cept-att-icon {
    color: var(--cept-accent-text);
}

/* Attachments — accent section header */
.elementor-widget-loco-product-attachments .cept-section-header {
    background: var(--cept-accent);
    color: var(--cept-accent-text);
    border-radius: 10px 10px 0 0;
    padding: 14px 20px;
    margin: -32px -36px 24px;
    border-bottom: none;
}
.elementor-widget-loco-product-attachments .cept-section-icon {
    background: color-mix(in srgb, var(--cept-accent-text) 15%, transparent);
    color: var(--cept-accent-text);
}
.elementor-widget-loco-product-attachments .cept-section-icon svg {
    color: var(--cept-accent-text);
    fill: var(--cept-accent-text);
    stroke: none;
}
.elementor-widget-loco-product-attachments .cept-section-title {
    color: var(--cept-accent-text);
}

/* Empty state */
.cept-fits-empty {
    text-align: center;
    padding: 24px 16px;
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
}
.cept-fits-empty-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
.cept-fits-empty-desc {
    font-size: 12px;
    color: var(--cept-muted);
    margin: 0 0 12px;
}
.cept-fits-empty-cta {
    display: inline-block;
    padding: 8px 16px;
    background: var(--cept-accent);
    color: #fff;
    border-radius: var(--cept-radius-sm);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.cept-fits-empty-cta:hover { background: var(--cept-accent-dark); }

/* Fitment table */
.cept-fitment-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cept-fitment-table th {
    background: var(--cept-surface);
    padding: 12px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--cept-border);
}
.cept-fitment-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--cept-border);
}
.cept-fitment-table tr:last-child td { border-bottom: none; }
.cept-fitment-table tr:hover td { background: var(--cept-surface); }

.cept-status-compatible { color: var(--cept-green); font-weight: 700; }
.cept-status-incompatible { color: #ef4444; font-weight: 700; }

/* ── Star characters (used in Reviews and summary) ───────────────────────── */
.cept-star { color: rgba(0,0,0,.15); font-size: 16px; }
.cept-star.filled { color: var(--cept-gold); }

/* ── Reviews widget (dynamic output) ────────────────────────────────────── */
.cept-reviews-wrapper { display: flex; flex-direction: column; gap: 20px; }

.cept-rating-summary {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius);
    padding: 20px 24px;
}
.cept-avg-rating { display: flex; align-items: center; gap: 12px; }
.cept-avg-number { font-size: 40px; font-weight: 900; color: var(--cept-accent); line-height: 1; }
.cept-avg-stars { display: flex; gap: 2px; }
.cept-avg-count { font-size: 13px; color: var(--cept-faint); }

.cept-reviews-list { display: flex; flex-direction: column; gap: 12px; }
.cept-review-item {
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    padding: 16px 18px;
    transition: border-color .2s;
}
.cept-review-item:hover { border-color: rgba(230,57,70,.2); }
.cept-review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.cept-review-name { font-weight: 700; font-size: 14px; }
.cept-review-date { font-size: 12px; color: var(--cept-faint); }
.cept-review-rating { display: flex; gap: 2px; margin-bottom: 8px; }
.cept-review-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.cept-review-text { font-size: 13px; color: var(--cept-muted); line-height: 1.65; margin: 0; }

.cept-reviews-empty {
    text-align: center;
    padding: 28px 16px;
    background: var(--cept-surface);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    font-size: 14px;
    color: var(--cept-muted);
}

.cept-write-review { margin-top: 8px; }
.cept-btn-write-review {
    padding: 10px 20px;
    background: var(--cept-accent);
    color: #fff;
    border: none;
    border-radius: var(--r-md, 14px);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.cept-btn-write-review:hover { background: var(--cept-accent-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   CE BUILT-IN PS WIDGET OVERRIDES
   Scoped to product page only via body#product / body.page-product.
   Selectors verified from live DOM inspection.
══════════════════════════════════════════════════════════════════════════ */

/* ── Page / section background ─────────────────────────────────────────── */
body#product #wrapper,
body.page-product #wrapper {
    background: transparent;
}

/* ── Product images ─────────────────────────────────────────────────────── */
body#product .elementor-widget-loco-product-images .elementor-widget-container,
body.page-product .elementor-widget-loco-product-images .elementor-widget-container {
    border-radius: var(--r-xl, 28px);
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, #ffffff 44%, #e6e6ea 100%);
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
body#product .elementor-widget-loco-product-images img,
body.page-product .elementor-widget-loco-product-images img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}
body#product .elementor-widget-loco-product-images .cept-main-img-wrap,
body.page-product .elementor-widget-loco-product-images .cept-main-img-wrap {
    border-radius: 0;
    cursor: zoom-in;
    position: relative;
    aspect-ratio: 1;
}

/* Zoom hint overlay */
.cept-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.cept-zoom-hint svg { width: 16px; height: 16px; color: #333; }
.cept-main-img-wrap:hover .cept-zoom-hint { opacity: 1; }

/* Image lightbox */
.cept-img-modal .cept-img-modal-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    aspect-ratio: unset;
    border-radius: 0;
}
.cept-img-modal .cept-img-modal-inner img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--r-md, 14px);
    width: auto;
    height: auto;
}
body#product .elementor-widget-loco-product-images .cept-thumbs-row,
body.page-product .elementor-widget-loco-product-images .cept-thumbs-row {
    padding: 14px 20px 18px;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.7);
    margin-top: 0;
}
/* Sticky left column */
body#product #wrapper .elementor-top-section:first-child .elementor-column:first-child > .elementor-column-wrap,
body.page-product #wrapper .elementor-top-section:first-child .elementor-column:first-child > .elementor-column-wrap {
    position: sticky;
    top: 16px;
    align-self: flex-start;
}
/* Right column — vertical padding only on mobile; zero on desktop.
   Horizontal padding zeroed everywhere so the info card extends edge-to-edge
   (left = flush against image card, right = flush to column edge).
   Top/bottom 40px keeps mobile breathing room (cards stack); on desktop the
   card aligns its top with the image card top so we drop it. */
body#product #wrapper .elementor-top-section:first-child .elementor-column:last-child > .elementor-column-wrap,
body.page-product #wrapper .elementor-top-section:first-child .elementor-column:last-child > .elementor-column-wrap {
    padding: 40px 0 40px 0 !important;
}
@media (min-width: 1024px) {
    body#product #wrapper .elementor-top-section:first-child .elementor-column:last-child > .elementor-column-wrap,
    body.page-product #wrapper .elementor-top-section:first-child .elementor-column:last-child > .elementor-column-wrap {
        padding: 0 !important;
    }
}

/* ── Brand (manufacturer) image ─────────────────────────────────────────── */
body#product .elementor-widget-manufacturer-image img,
body.page-product .elementor-widget-manufacturer-image img {
    max-height: 40px !important;
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
    display: block;
    opacity: 0.7;
    margin-bottom: 16px;
}
/* Suppress duplicate brand logo that comes from ce_product_reference block */
body#product .elementor-widget-product-block .product-manufacturer,
body.page-product .elementor-widget-product-block .product-manufacturer {
    display: none !important;
}

/* ── Reference / SKU chip ───────────────────────────────────────────────── */
body#product .product-reference,
body.page-product .product-reference {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #68707d !important;
    background: #f6f6f9;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 6px;
    padding: 3px 10px !important;
    margin-bottom: 16px;
}
body#product .product-reference .label,
body.page-product .product-reference .label {
    display: inline !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* ── Product name ───────────────────────────────────────────────────────── */
body#product .ce-product-name,
body.page-product .ce-product-name {
    font-size: 48px !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    color: #0d0d18 !important;
    margin: 0 0 14px !important;
}

/* ── Short description ──────────────────────────────────────────────────── */
body#product .ce-product-description-short,
body.page-product .ce-product-description-short {
    font-size: 15px;
    color: #68707d;
    line-height: 1.72;
    margin-bottom: 0;
    padding-top: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}

/* ── Star rating ────────────────────────────────────────────────────────── */
body#product .ce-product-rating,
body.page-product .ce-product-rating {
    margin-bottom: 0;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
body#product .ce-product-rating .elementor-star-rating,
body.page-product .ce-product-rating .elementor-star-rating {
    font-size: 16px;
    color: #f59e0b;
}
body#product .ce-product-rating .elementor-star-empty,
body.page-product .ce-product-rating .elementor-star-empty {
    color: rgba(0,0,0,.15);
}

/* ── Price ──────────────────────────────────────────────────────────────── */
/* Divider sits ABOVE the price (border-top), separating the short
   description from the price. Used to be border-bottom — moved per design. */
body#product .ce-product-prices,
body.page-product .ce-product-prices {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
    margin-bottom: 0;
    padding-top: 28px;
    padding-bottom: 28px;
    border-top: 1px solid rgba(0,0,0,.07);
    border-bottom: none;
}
body#product .ce-product-price > span,
body.page-product .ce-product-price > span {
    font-size: 52px !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
    line-height: 1 !important;
    color: #0d0d18 !important;
    display: block;
}
body#product .ce-tax-shipping-delivery-label,
body.page-product .ce-tax-shipping-delivery-label {
    font-size: 11px;
    color: #68707d;
    margin-top: 6px;
}

/* ── Variants ───────────────────────────────────────────────────────────── */
body#product .ce-product-variants,
body.page-product .ce-product-variants {
    padding-top: 16px;
    margin-bottom: 16px;
}
body#product .ce-product-variants__label,
body.page-product .ce-product-variants__label,
body#product .product-variants .control-label,
body.page-product .product-variants .control-label,
body#product .product-variants label,
body.page-product .product-variants label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #68707d;
    margin-bottom: 6px;
}
body#product .ce-product-variants__select select,
body.page-product .ce-product-variants__select select,
body#product .product-variants select,
body.page-product .product-variants select,
body#product select.form-control[name^="group"],
body.page-product select.form-control[name^="group"],
body#product .product-attributes select,
body.page-product .product-attributes select,
body#product .product-attribute select,
body.page-product .product-attribute select {
    height: 44px !important;
    border: 1.5px solid rgba(0,0,0,.10) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 14px !important;
    color: #0d0d18 !important;
    width: 100% !important;
    appearance: auto !important;
    cursor: pointer;
    transition: border-color .15s !important;
}
.product-attributes option[data-stock="out"] {
    color: #9ca3af;
}

/* ── Color Swatches ───────────────────────────────────────── */
.cept-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.cept-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: transform .15s;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.15);
}

.cept-swatch:hover {
    transform: scale(1.12);
}

.cept-swatch[aria-selected="true"],
.cept-swatch[data-selected="true"] {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cept-accent) !important;
}

.cept-swatch--oos::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255,255,255,.7) 3px,
        rgba(255,255,255,.7) 5px
    );
    pointer-events: none;
}

body#product .ce-product-variants__select select:focus,
body.page-product .ce-product-variants__select select:focus,
body#product .product-variants select:focus,
body.page-product .product-variants select:focus {
    outline: none !important;
    border-color: #e63946 !important;
    box-shadow: 0 0 0 3px rgba(230,57,70,.12) !important;
}

/* ── Stepper widget ─────────────────────────────────────────────────────── */
.cept-stepper {
    display: flex;
    align-items: center;
    height: 52px;
    border: 1.5px solid #e0e4ea;
    border-radius: var(--r-md, 14px);
    background: #fff;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cept-stepper-btn {
    width: 46px;
    height: 100%;
    flex-shrink: 0;
    background: #f7f8fa;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    font-size: 18px;
    font-weight: 400;
    transition: background .15s, color .15s;
}
.cept-stepper-btn:focus { outline: none; }
.cept-stepper-btn:hover { background: #eef0f4; color: #111; }
.cept-stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
.cept-stepper-btn svg { width: 16px; height: 16px; }
/* Divider lines between btn and input */
.cept-stepper-down { border-right: 1.5px solid #e0e4ea !important; }
.cept-stepper-up   { border-left:  1.5px solid #e0e4ea !important; }
.cept-stepper-input {
    flex: 1;
    height: 100%;
    border: none !important;
    outline: none !important;
    text-align: center;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0d0d18 !important;
    background: #fff !important;
    padding: 0 !important;
    width: 100% !important;
    -moz-appearance: textfield;
}
.cept-stepper-input::-webkit-outer-spin-button,
.cept-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cept-qty-stock-msg {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 10;
}
.cept-qty-stock-msg.cept-qty-low {
    display: block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.cept-qty-stock-msg.cept-qty-warn {
    display: block;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* ── Quantity + ATC on one row ──────────────────────────────────────────── */
body#product .add-to-cart-widget,
body.page-product .add-to-cart-widget {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    padding: 14px 16px !important;
}
body#product .add-to-cart-widget .quantity-selector,
body.page-product .add-to-cart-widget .quantity-selector {
    flex: 0 0 140px !important;
    width: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    position: relative !important;
}
body#product .add-to-cart-widget .quantity-selector label,
body.page-product .add-to-cart-widget .quantity-selector label {
    display: none !important;
}
body#product .add-to-cart-widget .quantity-input,
body.page-product .add-to-cart-widget .quantity-input {
    height: 52px !important;
    width: 100% !important;
    border: 1.5px solid rgba(0,0,0,.12) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #0d0d18 !important;
    padding: 0 !important;
}
body#product .add-to-cart-widget .btn-add-to-cart,
body.page-product .add-to-cart-widget .btn-add-to-cart {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
}

/* ── Quantity input ─────────────────────────────────────────────────────── */
body#product .elementor-widget-product-quantity input.elementor-field,
body.page-product .elementor-widget-product-quantity input.elementor-field {
    height: 52px !important;
    border: 1.5px solid rgba(0,0,0,.12) !important;
    border-radius: var(--r-md, 14px) !important;
    background: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #0d0d18 !important;
    width: 100% !important;
    padding: 0 12px !important;
}

/* ── Add to Cart button ─────────────────────────────────────────────────── */
body#product .btn-add-to-cart,
body#product .elementor-widget-product-add-to-cart .elementor-button,
body#product .add-to-cart .btn,
body#product .product-add-to-cart .btn,
body.page-product .btn-add-to-cart,
body.page-product .elementor-widget-product-add-to-cart .elementor-button,
body.page-product .add-to-cart .btn,
body.page-product .product-add-to-cart .btn {
    width: 100% !important;
    height: 52px !important;
    background: #22c55e !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: var(--r-md, 14px) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 20px rgba(34,197,94,.35) !important;
    transition: all .18s !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
body#product .btn-add-to-cart:hover,
body#product .elementor-widget-product-add-to-cart .elementor-button:hover,
body#product .add-to-cart .btn:hover,
body#product .product-add-to-cart .btn:hover,
body.page-product .btn-add-to-cart:hover,
body.page-product .elementor-widget-product-add-to-cart .elementor-button:hover,
body.page-product .add-to-cart .btn:hover,
body.page-product .product-add-to-cart .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(34,197,94,.48) !important;
    background: #16a34a !important;
    color: #ffffff !important;
}
/* Low Stock — amber */
body#product .btn-add-to-cart.btn-low-stock,
body.page-product .btn-add-to-cart.btn-low-stock {
    background: #f59e0b !important;
    box-shadow: 0 4px 20px rgba(245,158,11,.35) !important;
}
body#product .btn-add-to-cart.btn-low-stock:hover,
body.page-product .btn-add-to-cart.btn-low-stock:hover {
    background: #d97706 !important;
    box-shadow: 0 8px 28px rgba(245,158,11,.48) !important;
}
/* Backorder — purple outline */
body#product .btn-add-to-cart.btn-backorder,
body.page-product .btn-add-to-cart.btn-backorder {
    background: transparent !important;
    border: 2px solid #6366f1 !important;
    color: #6366f1 !important;
    box-shadow: none !important;
}
body#product .btn-add-to-cart.btn-backorder:hover,
body.page-product .btn-add-to-cart.btn-backorder:hover {
    background: rgba(99,102,241,.08) !important;
    transform: translateY(-1px) !important;
}
/* Out of Stock — gray */
body#product .btn-add-to-cart.disabled,
body#product .btn-add-to-cart:disabled,
body.page-product .btn-add-to-cart.disabled,
body.page-product .btn-add-to-cart:disabled {
    background: #b0b8c1 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Quantity input */
body#product .bootstrap-touchspin input,
body#product .elementor-widget-product-quantity input,
body#product input[name="qty"],
body.page-product .bootstrap-touchspin input,
body.page-product .elementor-widget-product-quantity input,
body.page-product input[name="qty"] {
    height: 44px !important;
    border: 1.5px solid rgba(0,0,0,.12) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #0d0d18 !important;
    width: 100% !important;
    padding: 0 12px !important;
}

/* ── Wishlist ───────────────────────────────────────────────────────────── */
body#product .elementor-widget-product-add-to-wishlist a,
body#product .elementor-widget-product-add-to-wishlist button,
body.page-product .elementor-widget-product-add-to-wishlist a,
body.page-product .elementor-widget-product-add-to-wishlist button {
    height: 44px;
    background: #f6f6f9 !important;
    border: 1.5px solid rgba(0,0,0,.07) !important;
    border-radius: var(--r-md, 14px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #68707d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    width: 100%;
    text-decoration: none !important;
    transition: border-color .15s, color .15s !important;
}
body#product .elementor-widget-product-add-to-wishlist a:hover,
body#product .elementor-widget-product-add-to-wishlist button:hover,
body.page-product .elementor-widget-product-add-to-wishlist a:hover,
body.page-product .elementor-widget-product-add-to-wishlist button:hover {
    border-color: #e63946 !important;
    color: #e63946 !important;
}

/* ── Social share icons ─────────────────────────────────────────────────── */
body#product .elementor-widget-product-share a,
body.page-product .elementor-widget-product-share a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f6f6f9;
    border: 1.5px solid rgba(0,0,0,.07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #68707d;
    font-size: 13px;
    transition: all .15s;
    text-decoration: none;
}
body#product .elementor-widget-product-share a:hover,
body.page-product .elementor-widget-product-share a:hover {
    border-color: #e63946;
    color: #e63946;
}

/* ── Glass card: all inner sections in right column ────────────────────── */
body#product #wrapper .elementor-inner-section,
body.page-product #wrapper .elementor-inner-section {
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: none !important;
    border-radius: var(--r-lg, 18px) !important;
    padding: 0 16px 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
    margin-bottom: 10px !important;
}

/* ATC card: named inner-section — flush bar, no side padding, clip corners */
body#product #wrapper #addtocart,
body.page-product #wrapper #addtocart {
    padding: 0 !important;
    overflow: hidden !important;
}

/* ── Reviews / FAQ / Fitment / Specs — white cards ─────────────────────── */
/* NOTE: description widget excluded — short desc should have no card;
   long desc renders its own heading in PHP and lives in the content area card */
body#product .elementor-widget-product-reviews .elementor-widget-container,
body#product .elementor-widget-product-faq .elementor-widget-container,
body#product .elementor-widget-product-vehicle-fitment .elementor-widget-container,
body#product .elementor-widget-product-specifications .elementor-widget-container,
body#product .elementor-widget-loco-product-attachments .elementor-widget-container,
body.page-product .elementor-widget-product-reviews .elementor-widget-container,
body.page-product .elementor-widget-product-faq .elementor-widget-container,
body.page-product .elementor-widget-product-vehicle-fitment .elementor-widget-container,
body.page-product .elementor-widget-product-specifications .elementor-widget-container,
body.page-product .elementor-widget-loco-product-attachments .elementor-widget-container {
    background: #ffffff;
    border-radius: var(--r-lg, 18px);
    padding: 32px 36px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.07);
    margin-bottom: 24px;
}

/* Short description (right-column summary) — no card, no padding.
   Scoped to widgets WITHOUT a .cept-section-header so the long description
   (which has the "Product Description" heading) gets its own white card
   from the rule further down. */
body#product .elementor-widget-loco-product-description:not(:has(.cept-section-header)) .elementor-widget-container,
body.page-product .elementor-widget-loco-product-description:not(:has(.cept-section-header)) .elementor-widget-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

/* Short description in right-panel summary — plain text, no card */
body#product .elementor-widget-product-description .elementor-widget-container,
body.page-product .elementor-widget-product-description .elementor-widget-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

/* ── Section headings inside white cards ────────────────────────────────── */
body#product .elementor-widget-product-description .elementor-widget-container::before,
body.page-product .elementor-widget-product-description .elementor-widget-container::before {
    content: 'Product Description';
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #0d0d18;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
body#product .elementor-widget-product-reviews .elementor-widget-container::before,
body.page-product .elementor-widget-product-reviews .elementor-widget-container::before,
body#product .elementor-widget-product-faq .elementor-widget-container::before,
body.page-product .elementor-widget-product-faq .elementor-widget-container::before,
body#product .elementor-widget-product-description .elementor-widget-container::before,
body.page-product .elementor-widget-product-description .elementor-widget-container::before {
    content: none !important;
    display: none !important;
}
body#product .elementor-widget-product-vehicle-fitment .elementor-widget-container::before,
body.page-product .elementor-widget-product-vehicle-fitment .elementor-widget-container::before {
    content: 'Vehicle Fitment';
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #0d0d18;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}

/* Fitment in right-column inner-section: strip the white card wrapper (glass card already provides container) */
body#product .elementor-inner-section .elementor-widget-product-vehicle-fitment .elementor-widget-container,
body.page-product .elementor-inner-section .elementor-widget-product-vehicle-fitment .elementor-widget-container {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
}
body#product .elementor-inner-section .elementor-widget-product-vehicle-fitment .elementor-widget-container::before,
body.page-product .elementor-inner-section .elementor-widget-product-vehicle-fitment .elementor-widget-container::before {
    content: none !important;
}

/* ── Product Stock Widget — C2 glowing border bar ───────────────────────── */
/* Inset shadows only — these survive overflow:hidden on parent containers */
@keyframes stock-glow-in  { 0%,100%{box-shadow:inset 5px 0 0 #22c55e}  50%{box-shadow:inset 5px 0 0 #22c55e, inset 14px 0 28px rgba(34,197,94,.22)} }
@keyframes stock-glow-low { 0%,100%{box-shadow:inset 5px 0 0 #f59e0b}  50%{box-shadow:inset 5px 0 0 #f59e0b, inset 14px 0 28px rgba(245,158,11,.22)} }
@keyframes stock-glow-bo  { 0%,100%{box-shadow:inset 5px 0 0 #6366f1}  50%{box-shadow:inset 5px 0 0 #6366f1, inset 14px 0 28px rgba(99,102,241,.22)} }
@keyframes stock-glow-out { 0%,100%{box-shadow:inset 5px 0 0 #ef4444}  50%{box-shadow:inset 5px 0 0 #ef4444, inset 14px 0 28px rgba(239,68,68,.22)} }

.cept-stock-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
}

.cept-stock-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cept-stock-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.cept-stock-bar-text { min-width: 0; }

.cept-stock-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.cept-stock-sub {
    font-size: 11px;
    margin-top: 2px;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cept-stock-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--r-lg, 18px);
    white-space: nowrap;
    flex-shrink: 0;
    color: #fff;
}

/* In Stock */
.cept-stock-bar[data-stock="in"]  { background: #f0fdf4; color: #15803d; animation: stock-glow-in  2.4s ease-in-out infinite; }
.cept-stock-bar[data-stock="in"]  .cept-stock-badge { background: #22c55e; }

/* Low Stock */
.cept-stock-bar[data-stock="low"] { background: #fffbeb; color: #92400e; animation: stock-glow-low 2.4s ease-in-out infinite; }
.cept-stock-bar[data-stock="low"] .cept-stock-badge { background: #f59e0b; }

/* Backorder */
.cept-stock-bar[data-stock="bo"]  { background: #f5f3ff; color: #3730a3; animation: stock-glow-bo  2.4s ease-in-out infinite; }
.cept-stock-bar[data-stock="bo"]  .cept-stock-badge { background: #6366f1; }

/* Out of Stock */
.cept-stock-bar[data-stock="out"] { background: #fff1f2; color: #991b1b; animation: stock-glow-out 2.4s ease-in-out infinite; }

/* ── Units Sold Widget ───────────────────────────────────────────────────── */
.cept-units-sold {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--cept-muted);
}

.cept-units-sold strong {
    color: #0d0d18;
    font-weight: 700;
}

/* ── Delivery Hints Widget — compact inline bar ──────────────────────────── */
.cept-delivery-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 12px;
    color: var(--cept-muted);
    padding: 10px 0;
    border-top: 1px solid var(--cept-border);
    margin-top: 12px;
    line-height: 1.4;
}
.cept-delivery-bar strong { color: var(--cept-text); font-weight: 700; }
.cept-db-truck {
    width: 15px;
    height: 15px;
    fill: var(--cept-green);
    flex-shrink: 0;
    margin-right: 2px;
}
.cept-db-dot {
    color: rgba(0,0,0,.2);
    font-size: 14px;
    line-height: 1;
    margin: 0 1px;
}

/* Legacy hints layout kept for backwards compat */
.cept-delivery-hints { display: none; }

/* ── Specifications Widget ───────────────────────────────────────────────── */
.cept-specifications {
    margin: 0;
}

.cept-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cept-specs-table tr {
    border-bottom: 1px solid var(--cept-border);
}

.cept-specs-table tr:last-child {
    border-bottom: none;
}

.cept-specs-table td {
    padding: 12px 0;
    vertical-align: top;
}

.cept-spec-label {
    width: 42%;
    color: var(--cept-muted);
    font-weight: 600;
    padding-right: 16px;
}

.cept-spec-value {
    font-weight: 600;
    color: #0d0d18;
}

/* ── Table of Contents Widget ────────────────────────────────────────────── */

/* Widget wrapper must not interfere with sticky on the inner nav */
.elementor-widget-product-table-of-contents,
.elementor-widget-product-table-of-contents .elementor-widget-container {
    position: static !important;
    overflow: visible !important;
    height: 100%;
}

.cept-toc {
    --cept-sticky-offset: 24px;
    position: sticky;
    top: var(--cept-sticky-offset);
    height: fit-content;
}

/* Section anchors for TOC linking */
#description,
#specifications,
#reviews,
#fitment,
#faq {
    scroll-margin-top: 120px;
}

.cept-toc-card {
    background: var(--cept-accent);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--cept-radius-md);
    padding: 14px 12px;
    box-shadow: var(--cept-shadow-md), 0 8px 32px color-mix(in srgb, var(--cept-accent) 30%, transparent);
    overflow: hidden;
    position: sticky;
    top: 80px;
    z-index: 99;
}

.cept-toc-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .9);
    margin: 0 4px 12px;
    padding: 0;
}
/* Helper line under the "On this page" title — these are clickable shortcuts. */
.cept-toc-title::after {
    content: "Jump to any section";
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .5);
}

.cept-toc-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cept-toc-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: background .14s, color .14s;
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.cept-toc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.cept-toc-icon svg {
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, .7);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .14s;
}

.cept-toc-link:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.cept-toc-link:hover .cept-toc-icon svg {
    stroke: #fff;
}

.cept-toc-link.active {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.cept-toc-link.active .cept-toc-icon svg {
    stroke: #fff;
}

/* ── Section Heading Icons with styled box ────────────────────────────── */
body#product .elementor-widget-product-specifications .elementor-widget-container::before,
body.page-product .elementor-widget-product-specifications .elementor-widget-container::before {
    content: 'Specifications';
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cept-text);
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cept-border);
}

/* Stock widget container — no padding, no border (inner-section is the card) */
body#product .elementor-widget-loco-product-stock .elementor-widget-container,
body.page-product .elementor-widget-loco-product-stock .elementor-widget-container {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ATC widget container — no border, transparent (controls have their own padding) */
body#product .elementor-widget-loco-add-to-cart .elementor-widget-container,
body.page-product .elementor-widget-loco-add-to-cart .elementor-widget-container {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body#product .elementor-widget-loco-product-stock .elementor-widget-container::before,
body.page-product .elementor-widget-loco-product-stock .elementor-widget-container::before,
body#product .elementor-widget-product-stock .elementor-widget-container::before,
body.page-product .elementor-widget-product-stock .elementor-widget-container::before,
body#product .elementor-widget-product-units-sold .elementor-widget-container::before,
body.page-product .elementor-widget-product-units-sold .elementor-widget-container::before,
body#product .elementor-widget-product-delivery-hints .elementor-widget-container::before,
body.page-product .elementor-widget-product-delivery-hints .elementor-widget-container::before {
    content: none !important;
    display: none !important;
}

/* Restore list styling inside product description (reset by PS theme) */
.product-description-content ul,
.elementor-widget-loco-product-description ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0.5em 0 0.5em;
}
.product-description-content ol,
.elementor-widget-loco-product-description ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin: 0.5em 0 0.5em;
}
.product-description-content li,
.elementor-widget-loco-product-description li {
    margin-bottom: 0.3em;
}

/* Remove any border from main product image */
body#product .cept-main-img-wrap,
body.page-product .cept-main-img-wrap {
    border: none !important;
}

/* Gallery: column so thumbnails sit directly below the image */
body#product .elementor-widget-loco-product-images .cept-gallery,
body.page-product .elementor-widget-loco-product-images .cept-gallery {
    display: flex;
    flex-direction: column;
}

/* Overbroad card rule removed — was applying background/border to all widget containers */

/* Product Summary - Enhanced Typography */
body#product .cept-summary .cept-title,
body.page-product .cept-summary .cept-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.04em;
    color: var(--cept-text);
    margin-bottom: 14px;
}

body#product .cept-summary .cept-sku,
body.page-product .cept-summary .cept-sku {
    font-size: 11px;
    font-weight: 600;
    color: var(--cept-muted);
    background: var(--cept-surface2);
    border: 1px solid var(--cept-border);
    border-radius: 6px;
    padding: 3px 9px;
    display: inline-block;
    margin-bottom: 12px;
}

/* Price Styling */
body#product .cept-price-block,
body.page-product .cept-price-block {
    background: var(--cept-surface2);
    border: 1px solid var(--cept-border);
    border-radius: var(--cept-radius-sm);
    padding: 16px 18px;
    margin-bottom: 14px;
}

body#product .cept-price-big,
body.page-product .cept-price-big {
    font-size: 52px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--cept-text);
}

/* Section Card Wrapper */
body#product .elementor-widget-product-description .elementor-widget-container,
body#product .elementor-widget-product-reviews .elementor-widget-container,
body#product .elementor-widget-product-faq .elementor-widget-container,
body#product .elementor-widget-product-specifications .elementor-widget-container,
body#product .elementor-widget-loco-product-attachments .elementor-widget-container,
body.page-product .elementor-widget-product-description .elementor-widget-container,
body.page-product .elementor-widget-product-reviews .elementor-widget-container,
body.page-product .elementor-widget-product-faq .elementor-widget-container,
body.page-product .elementor-widget-product-specifications .elementor-widget-container,
body.page-product .elementor-widget-loco-product-attachments .elementor-widget-container {
    padding: 32px 36px;
    margin-bottom: 24px;
}

/* ── Social Proof / Rating Row ───────────────────────────────────────────── */
.cept-social-proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 14px;
}
.cept-sp-stars {
    display: flex;
    gap: 1px;
    align-items: center;
}
.cept-sp-stars svg {
    width: 15px;
    height: 15px;
    color: var(--cept-gold);
    flex-shrink: 0;
}
.cept-sp-score {
    font-weight: 800;
    font-size: 13px;
    color: var(--cept-text);
}
.cept-sp-sep { color: rgba(0,0,0,.16); }
.cept-sp-link {
    color: var(--cept-accent);
    font-weight: 600;
    border-bottom: 1px dashed rgba(230,57,70,.35);
    text-decoration: none;
    transition: border-color .15s;
}
.cept-sp-link:hover { border-bottom-color: var(--cept-accent); }
.cept-sp-sold {
    background: rgba(45,106,79,.09);
    color: var(--cept-green);
    font-weight: 700;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--r-lg, 18px);
}

/* ── Thumbnail tooltip (JS-driven, appended to body to escape overflow:hidden) */
.cept-thumb-tooltip {
    position: fixed;
    background: rgba(0,0,0,.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 9999;
    transition: opacity .15s;
}

/* ── Video thumbnail tile ────────────────────────────────────────────────── */
.cept-thumb-video {
    position: relative;
    border-color: rgba(0,0,0,.18) !important;
    background: #222 !important;
    overflow: hidden;
}
.cept-thumb-video img {
    object-fit: cover !important;
    padding: 0 !important;
    filter: brightness(.55);
    transition: filter .2s;
}
.cept-thumb-video:hover img { filter: brightness(.72); }
.cept-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.cept-thumb-play svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.7));
    transform: translateY(8px);
}
.cept-thumb-play-label {
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    margin-top: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ── Video modal lightbox ────────────────────────────────────────────────── */
.cept-video-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.cept-video-modal-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--r-md, 14px);
    overflow: hidden;
}
.cept-video-modal-inner iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.cept-video-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    z-index: 1;
}

/* ── Section heading icon box (shared by Fitment + Specifications) ────────── */
.cept-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cept-border);
}
.cept-section-icon {
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--cept-accent) 10%, transparent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cept-section-icon svg {
    width: 18px;
    height: 18px;
    color: var(--cept-accent);
    fill: var(--cept-accent);
    stroke: none;
}
/* Calendar icon uses stroke, not fill */
.cept-section-icon svg[stroke="currentColor"] {
    fill: none;
    stroke: var(--cept-accent);
}
.cept-section-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cept-text);
    margin: 0;
    padding: 0;
}

/* Suppress old CSS ::before headings — PHP now renders them with icons */
body#product .elementor-widget-product-vehicle-fitment .elementor-widget-container::before,
body.page-product .elementor-widget-product-vehicle-fitment .elementor-widget-container::before,
body#product .elementor-widget-product-specifications .elementor-widget-container::before,
body.page-product .elementor-widget-product-specifications .elementor-widget-container::before {
    content: none !important;
    display: none !important;
}

/* Responsive TOC */
@media (max-width: 1024px) {
    .cept-toc-card {
        position: static;
        margin-bottom: 20px;
    }
    /* Bigger text, icons + tap targets for the "On this page" TOC on mobile.
       Scoped to .cept-toc-card (0,2,0) so it beats the base .cept-toc-link. */
    .cept-toc-card .cept-toc-title { font-size: 15px; letter-spacing: .1em; margin-bottom: 14px; }
    .cept-toc-card .cept-toc-title::after { font-size: 12px; margin-top: 5px; }
    .cept-toc-card .cept-toc-link  { font-size: 14px; padding: 12px; gap: 12px; }
    .cept-toc-card .cept-toc-icon  { width: 20px; height: 20px; }

    /* Animated "more below" cue at the bottom of the TOC, pointing down to the
       content sections so it's clear the page continues past the menu. Mask +
       background-color so the double-chevron takes the brand accent. */
    .cept-toc-card::after {
        content: "";
        display: block;
        width: 38px; height: 38px;
        margin: 12px auto 2px;
        /* White to match the TOC's text (the card overrides --cept-accent to a
           dark value in its brand context, which would be invisible here). */
        background-color: #fff;
        -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 6 12 13 19 6'/%3E%3Cpolyline points='5 13 12 20 19 13'/%3E%3C/svg%3E");
                mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 6 12 13 19 6'/%3E%3Cpolyline points='5 13 12 20 19 13'/%3E%3C/svg%3E");
        animation: ceptTocMore 1.4s ease-in-out infinite;
        transition: opacity .3s ease;
        overflow: hidden;
    }
}

@keyframes ceptTocMore {
    0%, 100% { transform: translateY(0);   opacity: .5; }
    50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cept-toc-card::after { animation: none; opacity: .85; }
}
/* Hide the arrow cue once the first section is reached — fade out AND collapse
   its box (height + margin + padding → 0) so it's smooth and leaves no space.
   The base ::after transitions opacity/height/margin, so this animates. */
/* Step 1: fade the arrow out (opacity transitions reliably here; !important
   needed because product-theme.css loads as 3 duplicate sheets). */
.cept-toc-card.cept-toc-reached::after {
    opacity: 0 !important;
    animation: none; pointer-events: none;
}
/* Step 2: JS adds .cept-toc-collapsed ~320ms later (after the fade) to remove
   the box so the card shrinks back — display:none reliably reclaims the space. */
.cept-toc-card.cept-toc-collapsed::after { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    body#product #wrapper .elementor-top-section:first-child .elementor-column:first-child > .elementor-column-wrap,
    body.page-product #wrapper .elementor-top-section:first-child .elementor-column:first-child > .elementor-column-wrap {
        position: static;
    }
    body#product .ce-product-name,
    body.page-product .ce-product-name { font-size: 34px !important; }
    body#product .ce-product-price > span,
    body.page-product .ce-product-price > span { font-size: 38px !important; }
}
@media (max-width: 768px) {
    body#product .elementor-widget-product-description .elementor-widget-container,
    body#product .elementor-widget-product-reviews .elementor-widget-container,
    body#product .elementor-widget-product-faq .elementor-widget-container,
    body#product .elementor-widget-product-vehicle-fitment .elementor-widget-container,
    body#product .elementor-widget-loco-product-attachments .elementor-widget-container,
    body.page-product .elementor-widget-product-description .elementor-widget-container,
    body.page-product .elementor-widget-product-reviews .elementor-widget-container,
    body.page-product .elementor-widget-product-faq .elementor-widget-container,
    body.page-product .elementor-widget-product-vehicle-fitment .elementor-widget-container,
    body.page-product .elementor-widget-loco-product-attachments .elementor-widget-container {
        padding: 20px 18px;
        border-radius: 16px;
    }
}

/* ── Brand accent colours ────────────────────────────────────────────────────
   --loco-accent is set on body by ProductWidgetBase::outputBrandTheme().
   It is consumed only inside .elementor-widget-container and .cept-toc-card
   so the site header/footer/nav are never touched.
   ───────────────────────────────────────────────────────────────────────── */
body[data-loco-brand="ktm"]       .elementor-widget-container,
body[data-loco-brand="ktm"]       .cept-toc-card
{ --loco-accent: #FF6500; --loco-accent-dark: #cc5200; }

body[data-loco-brand="husqvarna"] .elementor-widget-container,
body[data-loco-brand="husqvarna"] .cept-toc-card
{ --loco-accent: #005AC9; --loco-accent-dark: #004399; }

body[data-loco-brand="yamaha"]    .elementor-widget-container,
body[data-loco-brand="yamaha"]    .cept-toc-card
{ --loco-accent: #0052CC; --loco-accent-dark: #003d99; }

body[data-loco-brand="honda"]     .elementor-widget-container,
body[data-loco-brand="honda"]     .cept-toc-card
{ --loco-accent: #CC0000; --loco-accent-dark: #990000; }

body[data-loco-brand="bmw"]       .elementor-widget-container,
body[data-loco-brand="bmw"]       .cept-toc-card
{ --loco-accent: #0066B1; --loco-accent-dark: #004d85; }

body[data-loco-brand="gasgas"]    .elementor-widget-container,
body[data-loco-brand="gasgas"]    .cept-toc-card
{ --loco-accent: #E31E24; --loco-accent-dark: #b51519; }

body[data-loco-brand="ducati"]    .elementor-widget-container,
body[data-loco-brand="ducati"]    .cept-toc-card
{ --loco-accent: #E30613; --loco-accent-dark: #b3040f; }

body[data-loco-brand="aprilia"]   .elementor-widget-container,
body[data-loco-brand="aprilia"]   .cept-toc-card
{ --loco-accent: #E31E24; --loco-accent-dark: #b51519; }

body[data-loco-brand="kawasaki"]  .elementor-widget-container,
body[data-loco-brand="kawasaki"]  .cept-toc-card
{ --loco-accent: #00A550; --loco-accent-dark: #007a3b; }

body[data-loco-brand="suzuki"]    .elementor-widget-container,
body[data-loco-brand="suzuki"]    .cept-toc-card
{ --loco-accent: #1C5FA6; --loco-accent-dark: #154880; }

body[data-loco-brand="cfmoto"]    .elementor-widget-container,
body[data-loco-brand="cfmoto"]    .cept-toc-card
{ --loco-accent: #0052CC; --loco-accent-dark: #003d99; }

body[data-loco-brand="kove"]      .elementor-widget-container,
body[data-loco-brand="kove"]      .cept-toc-card
{ --loco-accent: #D4A017; --loco-accent-dark: #a37b10; --loco-accent-text: #1a1a1a; }


/* ══════════════════════════════════════════════════════════════
   LOCO PRODUCT PURCHASE CARD  (.loco-purchase-card)
   ══════════════════════════════════════════════════════════════ */

.loco-purchase-card {
    background: #fff;
    border-radius: var(--r-lg, 18px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.09);
    font-family: inherit;
}

/* ── Status bar ────────────────────────────────────────── */
.lpcard-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 14px 20px;
    position: relative;
}
.lpcard-bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lpcard-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.lpcard-bar-text { min-width: 0; }
.lpcard-title { font-size: 14px; font-weight: 800; color: #1a1a2e; line-height: 1.2; }
.lpcard-sub   { font-size: 11px; color: #6b7280; margin-top: 2px; }

/* Outer wrapper — glow pseudo covers only the bar area, flush to card edge */
.lpcard-outer { position: relative; overflow: visible; }
.lpcard-outer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 64px; /* matches stock bar height */
    border-radius: var(--r-lg, 18px) var(--r-lg, 18px) 0 0;
    z-index: 0;
    pointer-events: none;
}
.loco-purchase-card { position: relative; z-index: 1; }

@keyframes lpcard-glow-in  { 0%,100%{box-shadow:0 0 14px 3px rgba(34,197,94,.28)}  50%{box-shadow:0 0 28px 6px rgba(34,197,94,.58)} }
@keyframes lpcard-glow-low { 0%,100%{box-shadow:0 0 14px 3px rgba(245,158,11,.28)} 50%{box-shadow:0 0 28px 6px rgba(245,158,11,.58)} }
@keyframes lpcard-glow-bo  { 0%,100%{box-shadow:0 0 14px 3px rgba(99,102,241,.28)}  50%{box-shadow:0 0 28px 6px rgba(99,102,241,.58)} }
@keyframes lpcard-glow-out { 0%,100%{box-shadow:0 0 14px 3px rgba(239,68,68,.28)}   50%{box-shadow:0 0 28px 6px rgba(239,68,68,.58)} }

.lpcard-outer[data-stock="in"]::before  { animation: lpcard-glow-in  2.4s ease-in-out infinite; }
.lpcard-outer[data-stock="low"]::before { animation: lpcard-glow-low 2.4s ease-in-out infinite; }
.lpcard-outer[data-stock="bo"]::before  { animation: lpcard-glow-bo  2.4s ease-in-out infinite; }
.lpcard-outer[data-stock="out"]::before { animation: lpcard-glow-out 2.4s ease-in-out infinite; }

.lpcard-bar-in  { background: #f0fdf4; border-left: 5px solid #22c55e; }
.lpcard-bar-low { background: #fffbeb; border-left: 5px solid #f59e0b; }
.lpcard-bar-bo  { background: #eef2ff; border-left: 5px solid #6366f1; }
.lpcard-bar-out { background: #fff5f5; border-left: 5px solid #ef4444; }

.lpcard-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-lg, 18px); white-space: nowrap; color: #fff; flex-shrink: 0; }
.lpcard-badge-in  { background: #22c55e; }
.lpcard-badge-low { background: #f59e0b; }
.lpcard-badge-bo  { background: #6366f1; }
.lpcard-badge-out { background: #ef4444; }

/* ── Body ──────────────────────────────────────────────── */
.lpcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

/* ── Stepper + button row ──────────────────────────────── */
.lpcard-main-row { display: flex; gap: 10px; align-items: stretch; }
.lpcard-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid #e0e4ea;
    border-radius: var(--r-md, 14px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    flex-shrink: 0;
}
.lpcard-step-btn {
    width: 40px; height: 46px;
    background: #f7f8fa; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #374151; transition: background .15s; flex-shrink: 0;
}
.lpcard-step-btn:hover:not(:disabled) { background: #e5e7eb; }
.lpcard-step-btn:disabled { opacity: .4; cursor: not-allowed; }
.lpcard-step-btn svg { width: 14px; height: 14px; }
.lpcard-step-down { border-right: 1.5px solid #e0e4ea; }
.lpcard-step-up   { border-left:  1.5px solid #e0e4ea; }
.lpcard-step-input {
    width: 46px; text-align: center; border: none; outline: none;
    font-size: 14px; font-weight: 700; color: #1a1a2e; background: transparent;
    -moz-appearance: textfield;
}
.lpcard-step-input::-webkit-outer-spin-button,
.lpcard-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Add to cart button ────────────────────────────────── */
.lpcard-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 18px; border: none; border-radius: var(--r-md, 14px);
    font-size: 14px; font-weight: 800; cursor: pointer;
    transition: filter .15s, opacity .15s; color: #fff; min-height: 46px; white-space: nowrap;
}
.lpcard-btn-full { width: 100%; flex: none; }
.lpcard-btn:hover:not(:disabled) { filter: brightness(.92); }
.lpcard-btn:disabled { cursor: not-allowed; opacity: .7; }
.lpcard-btn-in  { background: #22c55e; box-shadow: 0 4px 20px rgba(34,197,94,.35); }
.lpcard-btn-low { background: #f59e0b; box-shadow: 0 4px 20px rgba(245,158,11,.35); }
.lpcard-btn-bo  { background: transparent !important; border: 2px solid #6366f1 !important; color: #6366f1 !important; box-shadow: none !important; }
.lpcard-btn-out { background: #d1d5db !important; color: #6b7280 !important; box-shadow: none !important; }

/* ── Notify Me — guest email form ──────────────────────── */
.lpcard-notify-form { display: flex; gap: 6px; }
.lpcard-notify-input {
    flex: 1; padding: 10px 12px; border: 1.5px solid #e0e4ea; border-radius: 10px;
    font-size: 13px; outline: none; color: #374151; transition: border-color .15s;
}
.lpcard-notify-input:focus { border-color: #ef4444; }
.lpcard-notify-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 10px 14px; background: #ef4444; color: #fff; border: none;
    border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: background .15s;
}
.lpcard-notify-btn:hover { background: #dc2626; }
.lpcard-notify-btn:disabled { opacity: .6; cursor: not-allowed; }
.lpcard-notify-success { font-size: 13px; color: #15803d; font-weight: 600; padding: 10px 0 2px; margin: 0; }

/* ── Notify Me — logged-in toggle ──────────────────────── */
.lpcard-notify-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; background: #fafafa; border: 1.5px solid #e0e4ea;
    border-radius: var(--r-md, 14px); cursor: pointer; transition: border-color .15s, background .15s;
    user-select: none;
}
.lpcard-notify-toggle:hover { border-color: #ef4444; background: #fff8f8; }
.lpcard-notify-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #374151; }
.lpcard-toggle-wrap { position: relative; flex-shrink: 0; }
.lpcard-notify-check { opacity: 0; width: 0; height: 0; position: absolute; pointer-events: none; }
.lpcard-toggle-track {
    display: block; width: 38px; height: 22px; border-radius: 11px;
    background: #d1d5db; transition: background .2s; position: relative;
}
.lpcard-toggle-track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s;
}
.lpcard-notify-check:checked + .lpcard-toggle-track { background: #22c55e; }
.lpcard-notify-check:checked + .lpcard-toggle-track::after { transform: translateX(16px); }

/* ── Wishlist button ───────────────────────────────────── */
.lpcard-wish {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 16px; border-radius: var(--r-md, 14px); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
    border: 1.5px solid transparent;
}
.lpcard-wish-off { background: #f7f8fa; border-color: #e0e4ea; color: #4b5563; }
.lpcard-wish-off:hover { background: #fff0f0; border-color: #fca5a5; color: #ef4444; }
.lpcard-wish-on  { background: #fff1f2; border-color: #fca5a5; color: #ef4444; }
.lpcard-wish-check { margin-left: auto; opacity: .7; }
.lpcard-wish:disabled { opacity: .5; cursor: not-allowed; }

/* ── Share row ─────────────────────────────────────────── */
.lpcard-share { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lpcard-share-label { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.lpcard-share-btn {
    width: 32px; height: 32px; border-radius: var(--r-md, 14px);
    display: flex; align-items: center; justify-content: center;
    background: #f7f8fa; border: 1.5px solid #e0e4ea; color: #4b5563;
    text-decoration: none; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0;
}
.lpcard-share-btn:hover { background: #e5e7eb; color: #111; border-color: #c8cdd5; }

/* ── Cart added toast ──────────────────────────────────── */
/* Appended to <html> (not body) to avoid the PS theme body-child height stretch */
#loco-cart-toast {
    position: fixed;
    top: 76px;          /* just below sticky nav */
    right: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px 13px 14px;
    background: #111827;
    color: #fff;
    border-radius: var(--r-md, 14px);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.15);
    transform: translateX(120%);
    transition: transform .35s cubic-bezier(.34,1.4,.64,1);
    pointer-events: none;
    min-width: 220px;
    max-width: 340px;
    height: auto;
    max-height: 60px;
    overflow: hidden;
}
#loco-cart-toast.loco-cart-toast--show {
    transform: translateX(0);
    pointer-events: auto;
}
.loco-cart-toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    flex-shrink: 0;
}
.loco-cart-toast__icon svg { display: block; }
.loco-cart-toast__msg { flex: 1; line-height: 1.3; }
.loco-cart-toast__close {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 6px;
    flex-shrink: 0;
    transition: color .15s;
}
.loco-cart-toast__close:hover { color: #fff; }

/* ── Widget container reset ────────────────────────────── */
.elementor-widget-loco-product-purchase .elementor-widget-container {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ── PDP page background — match the homepage ─────────────────
   The homepage body has background-color: rgb(107, 68, 35) (brown)
   + bg.gif (dark navy topographic line image) + background-blend-mode: screen
   which lightens the dark topo against the brown to render the brown topo
   look. The PDP body inherits white from the legacy PS theme and no
   blend-mode, so bg.gif renders as plain dark navy.
   This rule applies the same two values the homepage uses (brown bg colour
   + screen blend) so the PDP's body bg matches the rest of the site.
   bg.gif itself is set by the PS theme (body { background-image: url(...); })
   so we don't need to set it here. ── */
body.page-product {
    background-color: rgb(107, 68, 35) !important;
    background-blend-mode: screen !important;
}

/* (Removed: NC-slide-from-behind-ATC visual + slide-down keyframes.
   Order changed — fitment banner now sits ABOVE the purchase card inside
   the info card, so the slide-out-from-behind effect no longer applies.
   Kept the NC card as its own self-contained banner with rounded corners.) */

/* ── Inline tax label (PDP) ───────────────────────────────────────
   JS (initInlineTaxLabel) moves the .ce-tax-shipping-delivery-label
   element INSIDE .ce-product-price so it sits next to the price
   instead of stacked below. Required because the layout-stacked
   parent enforces flex-direction:column too strongly to override
   from outside. ── */
body.page-product .ce-product-price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
body.page-product .ce-product-price .ce-tax-shipping-delivery-label {
    margin: 0 !important;
    width: auto !important;
    display: inline-block !important;
    font-size: 12px;
    opacity: 0.7;
}

/* ── PDP unified info card (right column) ────────────────────────
   JS (initInfoCardWrapper) wraps brand image + summary + description
   + price + fitment banner + purchase widget into ONE white card
   that sits flush against the image card on the left, matched height.
   Inner widgets (purchase, fitment) have their own chrome suppressed
   so they blend into the parent card surface. ── */
body.page-product .loco-pdp-info-card {
    background: #ffffff;
    border-radius: 0 24px 24px 0;
    padding: 32px 36px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
body.page-product .loco-pdp-info-card > .elementor-widget {
    margin-bottom: 14px;
}
body.page-product .loco-pdp-info-card > .elementor-widget:last-child {
    margin-bottom: 0;
}
/* Purchase widget inside the unified card — grey outline with FLAT top
   corners so it joins the NC card above. No internal padding (the
   inner widgets carry their own spacing). */
body.page-product .loco-pdp-info-card .loco-purchase-card {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 0 !important;
    margin-top: 0 !important;
}
/* Fitment banner inside the unified card — strip the wrapper chrome so
   the inner red NC card / green Fits banner shows on the white surface */
body.page-product .loco-pdp-info-card .elementor-widget-loco-fitment-banner {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}
/* NC card connects to the purchase card below: flat bottom corners +
   only the bottom red border removed (top + sides stay so the warning
   outline reads). The .loco-fb-wrap parent has overflow:hidden +
   border-radius:12px which clips the inner div to a rounded-bottom shape,
   so the wrap also needs flat-bottom corners or the rounding leaks through. */
body.page-product .loco-pdp-info-card .loco-fb-wrap > div {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
body.page-product .loco-pdp-info-card .loco-fb-wrap {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body.page-product .loco-pdp-info-card > .elementor-widget-loco-fitment-banner {
    margin-bottom: 0 !important;
}

/* ── MOBILE/TABLET: stack the PDP hero (product image | info card) ────────
   The hero is an Elementor row with flex-wrap:nowrap, so Elementor's own
   ≤767px `.elementor-column{width:100%}` rule can't stack it — the two
   columns just flex-shrink side-by-side and the row's min-content overflows
   the viewport. With html/body `overflow-x:clip` the excess is silently
   chopped off (purchase buttons, fitment banner, "My garage" all clipped on
   the right). Force the hero row to wrap so the full-width columns drop into
   a single stacked column. Selected via :has() on the always-present
   product-images widget so it survives Elementor element-ID changes (the
   hero section is NOT :first-child, which is why the existing responsive
   rules missed it). ── */
@media (max-width: 1024px) {
    body.page-product .elementor-row:has(.elementor-widget-loco-product-images),
    body#product .elementor-row:has(.elementor-widget-loco-product-images),
    body.page-product .elementor-container:has(.elementor-widget-loco-product-images),
    body#product .elementor-container:has(.elementor-widget-loco-product-images) {
        flex-wrap: wrap !important;
    }
    body.page-product .elementor-row:has(.elementor-widget-loco-product-images) > .elementor-column,
    body#product .elementor-row:has(.elementor-widget-loco-product-images) > .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* The two cards were drawn as a joined unit (image card flat-right, info
       card flat-left). Now that they stack, restore normal corners: image on
       top (round top), info below (round bottom). */
    body.page-product .elementor-widget-loco-product-images > .elementor-widget-container,
    body#product .elementor-widget-loco-product-images > .elementor-widget-container {
        border-radius: 24px 24px 0 0 !important;
    }
    body.page-product .loco-pdp-info-card,
    body#product .loco-pdp-info-card {
        border-radius: 0 0 24px 24px !important;
        padding: 22px 20px;
    }
}

/* ── MOBILE/TABLET: per-element overflow guards inside the (now stacked) PDP
   info card. Stacking the hero alone wasn't enough — three things still
   painted past the viewport and got chopped by html/body `overflow-x:clip`:

   1. The manufacturer logo widget has a permanent `transform: scale(2)`
      (Elementor _transform_scale_effect, flagged accidental in project notes).
      Its layout box is the card width but it PAINTS 2× wide (≈737px on a
      390px screen). Un-scale it on mobile (the logo img is already capped to
      160×40, so it's the intended size without the 2× blow-up). Desktop keeps
      whatever scale is set there.
   2. Flex/grid children of the info card weren't shrinking below their content
      (min-width defaults to auto), so a wide content image kept the card wider
      than its column. `min-width:0` lets them shrink; images get capped to
      100%.
   3. The fitment widget's header banner ("Fits your bike" pill) is
      `flex-shrink:0; max-width:320px` and right-aligned in a ~267px header on
      mobile, so it spilled out. Let `.cept-section-header` wrap so the banner
      drops onto its own line and stays within the card. ── */
@media (max-width: 1024px) {
    body.page-product .elementor-widget-manufacturer-image > .elementor-widget-container,
    body#product .elementor-widget-manufacturer-image > .elementor-widget-container {
        transform: none !important;
    }
    body.page-product .loco-pdp-info-card,
    body.page-product .loco-pdp-info-card *,
    body#product .loco-pdp-info-card,
    body#product .loco-pdp-info-card * {
        min-width: 0 !important;
    }
    body.page-product .loco-pdp-info-card img,
    body.page-product .elementor-widget-loco-product-description img,
    body#product .loco-pdp-info-card img,
    body#product .elementor-widget-loco-product-description img {
        max-width: 100% !important;
        height: auto !important;
    }
    body.page-product .cept-section-header,
    body#product .cept-section-header {
        flex-wrap: wrap !important;
    }
    body.page-product .cept-section-header > *,
    body#product .cept-section-header > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Backorder / add-to-cart button: the row is narrower than the card on a
       phone, so the nowrap "Order on Backorder" label was 2px too wide and
       spilled outside the button. Trim its padding + let it wrap as a
       fail-safe so the text always stays inside the pill. */
    body.page-product .lpcard-main-row .lpcard-btn,
    body#product .lpcard-main-row .lpcard-btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-width: 0 !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    /* Content sections (reviews / FAQ / specs / fitment) sit in a column with
       32px side padding → they rendered ~30px narrower and indented vs the
       hero + "On this page" cards. Zero that inset on mobile so every section
       lines up to the same edges as the hero. */
    body.page-product .elementor-column-wrap:has(.elementor-widget-product-reviews),
    body.page-product .elementor-column-wrap:has(.elementor-widget-product-faq),
    body.page-product .elementor-column-wrap:has(.elementor-widget-product-specifications),
    body.page-product .elementor-column-wrap:has(.elementor-widget-product-vehicle-fitment),
    body#product .elementor-column-wrap:has(.elementor-widget-product-reviews),
    body#product .elementor-column-wrap:has(.elementor-widget-product-faq),
    body#product .elementor-column-wrap:has(.elementor-widget-product-specifications),
    body#product .elementor-column-wrap:has(.elementor-widget-product-vehicle-fitment) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── MOBILE: close the gap between the image card and the title/info card so
   they sit flush as one card. The info column's column-wrap carries
   `padding: 40px 0` (zeroed on desktop by the min-width:1024 rule, but left in
   place on mobile), which opened a 40px gap above the info card once the hero
   stacked. Zero its top padding on mobile. `.elementor-element-populated`
   added so this beats the base 40px rule regardless of source order. ── */
@media (max-width: 1023.98px) {
    body.page-product #wrapper .elementor-top-section:first-child .elementor-column:last-child > .elementor-column-wrap.elementor-element-populated,
    body#product #wrapper .elementor-top-section:first-child .elementor-column:last-child > .elementor-column-wrap.elementor-element-populated {
        padding-top: 0 !important;
    }
}

/* ── SMALL PHONES: drop the "Share" word label, leave just the share icons —
   saves a row of width where it's tightest. ── */
@media (max-width: 480px) {
    body.page-product .lpcard-share-label,
    body#product .lpcard-share-label {
        display: none !important;
    }
}

/* ── MOBILE: "On this page" TOC card — its rounded corners MATCH the product
   description card (both 20px, so they read as the same card family), with a
   clear breathing space between them (never flush). Also stop the TOC column
   stretching to the content column's height (a desktop sticky-sidebar leak)
   so the description follows the TOC card with normal spacing, not a big gap. ── */
@media (max-width: 1024px) {
    body.page-product .cept-toc-card,
    body#product .cept-toc-card {
        border-radius: 20px !important;   /* match the description card */
        margin-bottom: 24px !important;   /* breathing space before the description */
    }
    body.page-product .elementor-column:has(.elementor-widget-product-table-of-contents),
    body#product .elementor-column:has(.elementor-widget-product-table-of-contents) {
        align-self: flex-start !important;
    }
    body.page-product .elementor-column:has(.elementor-widget-product-table-of-contents) > .elementor-column-wrap,
    body#product .elementor-column:has(.elementor-widget-product-table-of-contents) > .elementor-column-wrap {
        height: auto !important;
    }
    /* guarantee a gap above the long-description card so it never butts up
       against the TOC card once the column stretch is removed */
    body.page-product .elementor-widget-loco-product-description:has(.cept-section-header),
    body#product .elementor-widget-loco-product-description:has(.cept-section-header) {
        margin-top: 4px !important;
    }
}

/* ── SMALL SCREENS: only the Downloads (attachments) header is a full-bleed
   accent bar with a -36px side margin to reach the desktop card's 36px
   padding edge. On phones the card padding drops to 18px (≤768 rule), so that
   -36px overshoots and the bar pokes off the left edge. Match its bleed to the
   mobile 18px padding. (Other section headers — Description, Reviews, FAQ,
   Fitment — are plain flex rows with NO bleed, so they must NOT be touched.) ── */
@media (max-width: 768px) {
    body.page-product .elementor-widget-loco-product-attachments .cept-section-header,
    body#product .elementor-widget-loco-product-attachments .cept-section-header {
        margin-top: -20px !important;
        margin-left: -18px !important;
        margin-right: -18px !important;
    }
}

/* ── SMALL SCREENS: the long Description (loco-product-description) and the
   Specifications card were missing from the mobile padding rule that drops
   the section cards to 20px/18px — so they kept their 36px desktop padding
   and looked "double-padded" next to Reviews / FAQ / Fitment. Bring them in
   line. ── */
@media (max-width: 768px) {
    body.page-product #wrapper .elementor-widget-loco-product-description:has(.cept-section-header) .elementor-widget-container,
    body.page-product #wrapper .elementor-widget-product-specifications .elementor-widget-container,
    body#product #wrapper .elementor-widget-loco-product-description:has(.cept-section-header) .elementor-widget-container,
    body#product #wrapper .elementor-widget-product-specifications .elementor-widget-container {
        padding: 20px 18px !important;
    }
}
/* Image card: flatten right corners to share seam with info card */
body.page-product .elementor-widget-loco-product-images > .elementor-widget-container {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 24px !important;
    border-bottom-left-radius: 24px !important;
}

/* ── Long description: white card ────────────────────────────────
   The long Product Description widget (identified by its inner
   .cept-section-header — short desc has no header) gets a white card
   like the Specifications / Reviews / FAQ sections below it.
   Without this the long description text renders directly on the
   brown topo body bg which is hard to read. ── */
body.page-product .elementor-widget-loco-product-description:has(.cept-section-header) .elementor-widget-container,
body#product .elementor-widget-loco-product-description:has(.cept-section-header) .elementor-widget-container {
    background: #ffffff !important;
    border-radius: 20px;
    padding: 32px 36px !important;
    margin-bottom: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* ── PDP page-load + scroll-reveal animations ────────────────────
   Cards above-the-fold fade-up in sequence on load. Sections below
   the fold fade-up as the user scrolls them into view via an
   IntersectionObserver in JS (initPdpAnimations).
   Respects prefers-reduced-motion. ── */

/* PRE-HIDE the above-the-fold widgets BEFORE the JS hooks them.
   Without this, browsers paint the page once (everything visible),
   then JS adds the .lm-pdp-fade-up class and the elements snap back
   to opacity 0 before animating in — the user sees a flash of the
   final content. Wrapping in `@media not (prefers-reduced-motion)`
   means users who disabled motion never get pre-hidden (so no JS
   dependency for them). Animations below use `both` fill mode so the
   `to` state persists after the animation completes — otherwise the
   element would snap back to opacity 0 (this pre-hide rule). */
@media not (prefers-reduced-motion: reduce) {
    body.page-product .elementor-widget-loco-product-images,
    body.page-product .elementor-widget-manufacturer-image,
    body.page-product .elementor-widget-loco-product-summary,
    body.page-product .elementor-widget-loco-product-description,
    body.page-product .elementor-widget-product-price,
    body.page-product .elementor-widget-loco-fitment-banner,
    body.page-product .elementor-widget-loco-product-purchase {
        opacity: 0;
    }
    /* Fail-safe: if the JS animation script never runs (broken JS,
       blocked, etc.), reveal everything after 1.5s so the page isn't
       permanently blank. Uses :not() guards so this rule does NOT
       match elements that already have a real animation class — that
       way the proper fade-up/slide-from-under animation isn't
       overridden (the failsafe was a 0s-duration opacity flip, which
       was silently winning the specificity cascade and replacing the
       real motion). */
    body.page-product .elementor-widget-loco-product-images:not(.lm-pdp-fade-up):not(.lm-pdp-slide-from-under),
    body.page-product .loco-pdp-info-card .elementor-widget:not(.lm-pdp-fade-up):not(.lm-pdp-slide-from-under) {
        animation: lm-pdp-failsafe-show 0s 1500ms forwards;
    }
}
@keyframes lm-pdp-failsafe-show {
    to { opacity: 1; }
}

@keyframes lm-pdp-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.page-product .lm-pdp-fade-up {
    animation: lm-pdp-fade-up 650ms cubic-bezier(.25, .1, .25, 1) both;
}
/* "Slide up from under" — the Not Compatible card starts visually behind
   the Available-on-Backorder/ATC card (lower z-index, translated down so
   its top lines up with ATC's top), then slides upward into its natural
   slot above ATC. Distance is set per-element via --lm-slide-distance in
   JS (measured against ATC's offset) so the start position lines up with
   ATC regardless of card heights. */
@keyframes lm-pdp-slide-from-under {
    from {
        opacity: 0;
        transform: translateY(var(--lm-slide-distance, 120px));
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}
body.page-product .lm-pdp-slide-from-under {
    animation: lm-pdp-slide-from-under 800ms cubic-bezier(.18, .7, .25, 1) both;
    position: relative;
    z-index: 1;
}
body.page-product .lm-pdp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 700ms cubic-bezier(.25, .1, .25, 1),
        transform 700ms cubic-bezier(.25, .1, .25, 1);
    /* will-change keeps the transition off the main thread for big sections */
    will-change: opacity, transform;
}
body.page-product .lm-pdp-reveal.lm-pdp-in-view {
    opacity: 1;
    transform: translateY(0);
}
body.page-product .lm-pdp-reveal.lm-pdp-in-view {
    /* Drop will-change once the animation completes so we don't keep a
       compositor layer alive forever per section. Set after fade so the
       transition still triggers smoothly. */
}
@media (prefers-reduced-motion: reduce) {
    body.page-product .lm-pdp-fade-up,
    body.page-product .lm-pdp-slide-from-under { animation: none !important; }
    body.page-product .lm-pdp-reveal,
    body.page-product .lm-pdp-reveal.lm-pdp-in-view {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Option change in progress: dim the parts that are being refreshed */
html.loco-swapping .elementor-widget-product-price,
html.loco-swapping .elementor-widget-loco-product-purchase { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* Pack contents ("This pack contains") - compact list inside the info card, before the price */
body#product .loco-pdp-info-card .product-pack{margin:4px 0 6px;padding:14px 16px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#f8f9fb}
body#product .loco-pdp-info-card .product-pack > .h4{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5a6a7a;margin:0 0 8px}
body#product .loco-pdp-info-card .product-pack article{margin:0}
body#product .loco-pdp-info-card .product-pack .card{border:0;background:transparent;box-shadow:none;margin:0}
body#product .loco-pdp-info-card .pack-product-container{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:7px 0;border-top:1px solid rgba(0,0,0,.06)}
body#product .loco-pdp-info-card .product-pack article:first-of-type .pack-product-container{border-top:0}
body#product .loco-pdp-info-card .pack-product-container .thumb-mask{grid-row:1 / span 2;width:48px;height:48px;margin:0;overflow:hidden;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,.06)}
body#product .loco-pdp-info-card .pack-product-container .thumb-mask .mask{width:48px;height:48px;margin:0}
body#product .loco-pdp-info-card .pack-product-container .thumb-mask img{width:100%;height:100%;object-fit:contain;padding:3px}
body#product .loco-pdp-info-card .pack-product-name{grid-column:2;width:auto;float:none;padding:0;margin:0;font-size:13.5px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body#product .loco-pdp-info-card .pack-product-name a{color:#1d2b3a;font-weight:700}
body#product .loco-pdp-info-card .pack-product-price{grid-column:2;grid-row:2;width:auto;float:none;padding:0;margin:0;text-align:left;font-size:12px;font-weight:600;color:#6b7785}
body#product .loco-pdp-info-card .pack-product-quantity{grid-column:3;grid-row:1 / span 2;width:auto;float:none;padding:0 0 0 10px;margin:0;border:0;font-size:14px;font-weight:800;color:#1d2b3a;white-space:nowrap}