@charset "utf-8";
/* CSS Document */
/* =========================================================
   product.css — Product page styling
   Companion to: product.php + partials/_product_*.php
   Loaded after: brand.css, Nav.css, Style.css
   Theme-aware via body[data-theme="customer|trade"]
   ========================================================= */


/* =========================================================
   1. PAGE LAYOUT
   ========================================================= */
.prod-page {
    max-width: var(--container);
    margin: 24px auto 80px;
    padding: 0 24px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================
   2. BREADCRUMB
   ========================================================= */
.prod-breadcrumb {
    margin-bottom: 18px;
    font-size: 12px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
}
.prod-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.prod-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.prod-breadcrumb li:not(:last-child)::after {
    content: '›';
    color: var(--ink-4);
    margin-left: 4px;
}
.prod-breadcrumb a {
    color: var(--ink-3);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.prod-breadcrumb a:hover {
    color: var(--jb-accent);
}
.prod-breadcrumb [aria-current="page"] {
    color: var(--ink);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}


/* =========================================================
   3. BUY AREA — two-column layout
   Image left (rebalanced from 1:1 to give info column breathing room),
   Info right.
   ========================================================= */
.prod-buy {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
    margin-bottom: 48px;
}


/* =========================================================
   4. IMAGE COLUMN
   ========================================================= */
.prod-image-col {
    position: sticky;
    top: 24px;
}

.prod-image-main {
    position: relative;
    background: var(--paper-2);
    border-radius: var(--radius-page);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
    border: 1px solid var(--line);
}

.prod-image-main img,
.prod-image-main model-viewer {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Zoom pill — bottom-right hint */
.prod-zoom-pill {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(26, 26, 26, 0.75);
    color: #fff;
    font-size: 11px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    pointer-events: none;
}
.prod-zoom-pill__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1.2px solid currentColor;
    border-radius: 50%;
}

/* Save-to-Hub bookmark — top-right */
.prod-save-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all var(--dur-fast) var(--ease-out);
    z-index: 2;
}
.prod-save-btn:hover {
    background: #fff;
    color: var(--jb-accent);
    border-color: var(--jb-accent);
    transform: scale(1.05);
}
.prod-save-btn.is-saved {
    color: var(--jb-accent);
}
body[data-theme="trade"] .prod-save-btn {
    background: rgba(26, 26, 26, 0.85);
    color: var(--ink-2);
}
body[data-theme="trade"] .prod-save-btn:hover {
    background: var(--night);
}

/* Thumbnail strip */
.prod-thumb-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 14px;
}

.prod-thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: all var(--dur-fast) var(--ease-out);
    font-size: 14px;
}
.prod-thumb-nav:hover {
    color: var(--jb-accent);
    border-color: var(--jb-accent);
}
.prod-thumb-nav--prev { left: -10px; }
.prod-thumb-nav--next { right: -10px; }

.prod-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    padding: 4px 2px;
    scrollbar-width: none;
}
.prod-thumbs::-webkit-scrollbar { display: none; }

.prod-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding: 0;
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-data);
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    transition: border-color var(--dur-fast) var(--ease-out);
    font-size: 18px;
}
.prod-thumb:hover { border-color: var(--jb-blue); }
.prod-thumb.is-selected {
    border-color: var(--jb-blue);
    border-width: 2px;
}
.prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prod-thumb--video { color: #ef4444; }
.prod-thumb--3d {
    flex-direction: column;
    gap: 2px;
}
.prod-thumb-3d-label {
    font-size: 8px;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-3);
}


/* =========================================================
   5. INFO COLUMN (header bits)
   ========================================================= */
.prod-info {
    min-width: 0;
}

.prod-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--jb-blue);
    margin-bottom: 8px;
}

.prod-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 8px;
}

.prod-subtitle {
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 12px;
}

.prod-sku-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
    min-height: 16px;
}
.prod-sku-value {
    color: var(--jb-blue);
}

.prod-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    min-height: 36px;
}
.prod-price-main {
    font-size: 30px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
}
.prod-price-main:empty::before {
    content: 'Select size';
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-3);
}
.prod-price-sub {
    font-size: 12px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.prod-savings-line {
    font-size: 12px;
    color: var(--jb-accent-deep);
    font-weight: 500;
    min-height: 16px;
    margin-bottom: 16px;
}


/* =========================================================
   6. SIDEBAR SHARED — stock banner + postcode
   ========================================================= */
.prod-stock-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--paper-2);
    border-left: 3px solid var(--jb-blue);
    border-radius: var(--radius-data);
    margin-bottom: 12px;
}
.prod-stock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2d8642;
    margin-top: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(45, 134, 66, 0.15);
}
.prod-stock-text { flex: 1; min-width: 0; }
.prod-stock-line-1 {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}
.prod-stock-line-2 {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

.prod-postcode-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.prod-postcode-row input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.prod-postcode-row input:focus {
    outline: none;
    border-color: var(--jb-blue);
}
.prod-postcode-row button {
    padding: 12px 18px;
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out);
}
.prod-postcode-row button:hover {
    background: var(--jb-blue);
    color: #fff;
    border-color: var(--jb-blue);
}
.prod-postcode-result {
    font-size: 12px;
    color: var(--ink-2);
    min-height: 18px;
    margin-bottom: 16px;
}
.prod-postcode-result.is-error  { color: #c83e30; }
.prod-postcode-result.is-success { color: #2d8642; }


/* =========================================================
   7. CONFIG BLOCKS (shared scaffolding)
   ========================================================= */
.prod-config-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.prod-config-header {
    margin-bottom: 12px;
}
.prod-config-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-3);
}
.prod-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 14px 0 8px;
}


/* =========================================================
   8. STANDARD MODE — size grid + locks
   ========================================================= */
.prod-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.prod-size-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    color: var(--ink);
}
.prod-size-tile:hover {
    border-color: var(--jb-blue);
    background: var(--jb-blue-soft);
}
.prod-size-tile.is-selected {
    border-color: var(--jb-blue);
    border-width: 2px;
    background: var(--jb-blue-soft);
    padding: 11px 7px; /* compensate for thicker border */
}
.prod-size-tile__label {
    font-size: 13px;
    font-weight: 600;
}
.prod-size-tile__price {
    font-size: 12px;
    color: var(--ink-3);
}
.prod-size-tile.is-selected .prod-size-tile__price {
    color: var(--jb-blue-deep);
    font-weight: 500;
}

/* Bespoke reveal link (under size grid) */
.prod-bespoke-link {
    margin-top: 14px;
    text-align: right;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/*
.prod-bespoke-link a {
    font-size: 13px;
    color: var(--jb-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out);
}
.prod-bespoke-link a:hover { color: var(--jb-accent); }
*/

.prod-bespoke-link a {
    font-size: 13px;
/*    background: var(--jb-blue);*/
    background: var(--jb-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out);
	padding: 6px 8px;
	border-radius: 4px;
}
.prod-bespoke-link a:hover { background: var(--jb-blue); }
/*.prod-bespoke-link a:hover { background: var(--jb-accent); }*/

/* Lock grid */
.prod-lock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.prod-lock-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    text-align: left;
    color: var(--ink);
}
.prod-lock-tile:hover {
    border-color: var(--jb-blue);
    background: var(--jb-blue-soft);
}
.prod-lock-tile.is-selected {
    border-color: var(--jb-blue);
    border-width: 2px;
    background: var(--jb-blue-soft);
    padding: 11px 13px;
}
.prod-lock-tile__name { font-size: 13px; font-weight: 600; }
.prod-lock-tile__uplift { font-size: 12px; color: var(--ink-3); }
.prod-lock-tile.is-selected .prod-lock-tile__uplift {
    color: var(--jb-blue-deep);
}

/* Lock info (ⓘ) affordance — a small toggle in each tile's top-right corner.
   It's a sibling of the tile button (not nested — that'd be invalid HTML),
   positioned over the tile via the .prod-lock-option wrapper. */
.prod-lock-option {
    position: relative;
    display: flex; /* let the tile fill the wrapper so every tile stays the
                      same height (matches the pre-info-button look) */
}
.prod-lock-option > .prod-lock-tile {
    width: 100%;
}
/* Only tiles that actually have an (i) reserve space for it — so plain locks
   (no description) are untouched and keep their original size. */
.prod-lock-option--has-info > .prod-lock-tile {
    padding-right: 40px;
}
.prod-lock-option--has-info > .prod-lock-tile.is-selected {
    padding-right: 39px; /* compensate for the thicker selected border */
}
.prod-lock-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    z-index: 2;
}
.prod-lock-info-btn:hover,
.prod-lock-info-btn[aria-expanded="true"] {
    color: var(--jb-blue-deep);
    background: var(--jb-blue-soft);
}

/* Shared reveal panel under the lock grid. */
.prod-lock-info-panel {
    position: relative;
    margin-top: 12px;
    padding: 16px 44px 16px 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-page);
}
.prod-lock-info-panel[hidden] { display: none; }
.prod-lock-info-panel__media { flex: 0 0 auto; }
.prod-lock-info-panel__media[hidden] { display: none; }
.prod-lock-info-panel__media img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
}
.prod-lock-info-panel__text { min-width: 0; }
.prod-lock-info-panel__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.prod-lock-info-panel__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}
.prod-lock-info-panel__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    font-size: 15px;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.prod-lock-info-panel__close:hover {
    color: var(--ink);
    background: var(--line);
}


/* =========================================================
   9. BESPOKE MODE — W/H/D calculator
   ========================================================= */
.prod-bespoke-block {
    margin-top: 16px;
    padding: 16px;
    background: var(--paper-2);
    border-radius: var(--radius-page);
    border: 1px dashed var(--line);
}
.prod-bespoke-block[hidden] { display: none; }

.prod-bespoke-calc {
    /* Both reveal and stand-alone bespoke render this block */
}

/* Bespoke manufacturer lead-time strip — sits at top of the calc block,
   populated by JS via get_lead_time.php on reveal (cached after first fetch).
   Uses amber/orange accent (--jb-accent) as a "time-sensitive" visual cue. */
.prod-bespoke-lead {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--jb-accent) 35%, var(--line));
    border-left: 4px solid var(--jb-accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--jb-accent) 10%, var(--paper));
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.prod-bespoke-lead[hidden] { display: none; }
.prod-bespoke-lead__icon {
    color: var(--jb-accent);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.prod-bespoke-lead__text { flex: 1; min-width: 0; }
.prod-bespoke-lead__main {
    font-size: 15px;
}
.prod-bespoke-lead__main strong {
    font-weight: 700;
    margin-right: 4px;
}
.prod-bespoke-lead__note {
    margin-top: 4px;
    font-size: 12px;
    font-style: italic;
    color: color-mix(in srgb, var(--ink) 65%, transparent);
}

/* Admin-set customer note (JupiterProducts.bespoke_note, 0039). Sits under
   the lead-time box; blue sibling of it so the two read as one stack. */
.prod-bespoke-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--jb-blue) 35%, var(--line));
    border-left: 4px solid var(--jb-blue);
    border-radius: 6px;
    background: color-mix(in srgb, var(--jb-blue) 8%, var(--paper));
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.prod-bespoke-note__icon {
    color: var(--jb-blue);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.prod-bespoke-note__text { flex: 1; min-width: 0; }
.prod-bespoke-note__text strong { font-weight: 700; }

.prod-bespoke-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.prod-bespoke-grid.has-depth {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prod-bespoke-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prod-bespoke-field__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
}
.prod-bespoke-field__input-wrap {
    display: flex;
    align-items: center;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    transition: border-color var(--dur-fast) var(--ease-out);
    overflow: hidden;
}
.prod-bespoke-field__input-wrap:focus-within { border-color: var(--jb-blue); }
.prod-bespoke-field__input-wrap input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    -moz-appearance: textfield;
}
.prod-bespoke-field__input-wrap input::-webkit-outer-spin-button,
.prod-bespoke-field__input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.prod-bespoke-field__unit {
    padding: 0 12px;
    font-size: 12px;
    color: var(--ink-3);
    border-left: 1px solid var(--line);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}
.prod-bespoke-field__hint {
    font-size: 11px;
    color: var(--ink-3);
}

.prod-bespoke-summary {
    margin-top: 14px;
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-data);
}
.prod-bespoke-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--ink-2);
}
.prod-bespoke-summary__price {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}
.prod-bespoke-summary__hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ink-3);
}


/* =========================================================
   10. CONFIGURATOR MODE
   ========================================================= */
.prod-configurator {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.prod-config-group {
    /* Each group rendered top-to-bottom */
}
.prod-config-group[hidden] { display: none; }

.prod-config-group__head {
    margin-bottom: 12px;
}
.prod-config-group__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}
.prod-config-group__req {
    color: var(--jb-accent);
    margin-left: 2px;
}

/* Radio-with-images choices */
.prod-config-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.prod-config-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-page);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    color: var(--ink);
    text-align: center;
}
.prod-config-choice:hover {
    border-color: var(--jb-blue);
    background: var(--jb-blue-soft);
}
.prod-config-choice.is-selected {
    border-color: var(--jb-blue);
    border-width: 2px;
    background: var(--jb-blue-soft);
    padding: 9px;
}
.prod-config-choice__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--paper-2);
    border-radius: var(--radius-data);
}
.prod-config-choice__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.prod-config-choice__uplift {
    font-size: 11px;
    color: var(--jb-accent-deep);
    font-weight: 600;
}

/* Dimension input groups */
.prod-config-dim {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: center;
}
.prod-config-dim__helper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prod-config-dim__img {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--paper-2);
    border-radius: var(--radius-data);
    border: 1px solid var(--line);
}
.prod-config-dim__text {
    font-size: 12px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.5;
}
.prod-config-dim__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prod-config-dim__input-wrap {
    display: flex;
    align-items: center;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    transition: border-color var(--dur-fast) var(--ease-out);
    overflow: hidden;
}
.prod-config-dim__input-wrap:focus-within { border-color: var(--jb-blue); }
.prod-config-dim__input-wrap input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    -moz-appearance: textfield;
}
.prod-config-dim__input-wrap input::-webkit-outer-spin-button,
.prod-config-dim__input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.prod-config-dim__unit {
    padding: 0 14px;
    font-size: 13px;
    color: var(--ink-3);
    border-left: 1px solid var(--line);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}
.prod-config-dim__range {
    font-size: 11px;
    color: var(--ink-3);
}

/* Info block groups */
.prod-config-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    background: var(--paper-2);
    border-radius: var(--radius-page);
    border: 1px solid var(--line);
}
.prod-config-info__img {
    max-width: 320px;
    width: 100%;
    height: auto;        /* let image determine its own height */
    object-fit: contain;
    background: transparent;
}
.prod-config-info__text {
    font-size: 12px;
    color: var(--ink-2);
    text-align: center;
    margin: 0;
    line-height: 1.6;
}

/* YOUR OPTIONS summary panel */
.prod-config-summary {
    margin-top: 12px;
    padding: 16px;
    background: var(--paper-2);
    border-radius: var(--radius-page);
    border: 1px solid var(--line);
}
.prod-config-summary__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 12px;
}
.prod-config-summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prod-config-summary__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink-2);
    border-bottom: 1px dashed var(--line);
}
.prod-config-summary__list li:last-child { border-bottom: 0; }
.prod-config-summary__empty {
    color: var(--ink-3) !important;
    font-style: italic;
    justify-content: center !important;
    border-bottom: 0 !important;
}
.prod-config-summary__totals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prod-config-summary__totals[hidden] { display: none; }
.prod-config-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ink-2);
}
.prod-config-summary__row--total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}


/* =========================================================
   11. BUY ROW (shared)
   ========================================================= */
.prod-buy-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    margin-top: 24px;
    align-items: stretch;
}

.prod-qty-control {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    overflow: hidden;
    background: var(--paper);
}
.prod-qty-btn {
    background: transparent;
    border: 0;
    padding: 0 14px;
    color: var(--ink-2);
    font-size: 18px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.prod-qty-btn:hover {
    background: var(--paper-2);
    color: var(--jb-accent);
}
.prod-qty-input {
    width: 56px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    outline: none;
    -moz-appearance: textfield;
}
.prod-qty-input::-webkit-outer-spin-button,
.prod-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* Buttons */
.prod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
}
.prod-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.prod-btn--primary {
    background: var(--jb-blue);
    color: #fff;
    border-color: var(--jb-blue);
}
.prod-btn--primary:hover:not(:disabled) {
    background: var(--jb-accent);
    border-color: var(--jb-accent);
}
.prod-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.prod-btn--ghost:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
}
.prod-btn--secondary {
    background: var(--paper);
    color: var(--ink-2);
    border-color: var(--line);
}
.prod-btn--secondary:hover:not(:disabled) {
    color: var(--jb-accent);
    border-color: var(--jb-accent);
}

/* Stock ceiling note — one-off / sale items (migration 0028).
   Sits between the buy row and the volume tier card, so it takes its own
   margin-top like they do rather than pulling itself up under the buttons.
   The bottom gap is the volume card's margin-top; adding one here too would
   double it, and the card is hidden on most products anyway.
   Amber is carried by the icon, not the text: --jb-accent-deep is about 2.4:1
   on paper, which is under AA for text this size. */
.prod-stock-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}
.prod-stock-note i {
    font-size: 14px;
    color: var(--jb-accent-deep);
}
/* After the display rule above, so hiding still wins. */
.prod-stock-note[hidden] { display: none; }

/* Volume tier card */
.prod-volume-card {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--paper-2);
    border-radius: var(--radius-data);
    border: 1px solid var(--line);
}
.prod-volume-card[hidden] { display: none; }
.prod-volume-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.prod-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}
.prod-tier-tile {
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-data);
    text-align: center;
}
.prod-tier-tile.is-active {
    border-color: var(--jb-accent);
    background: rgba(250, 163, 41, 0.08);
}
.prod-tier-tile__qty {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
}
.prod-tier-tile__price {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
}
.prod-tier-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--ink-3);
}
.prod-tier-saved {
    color: var(--jb-accent-deep);
    font-weight: 600;
}

/* Project quote callout */
.prod-project-quote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--jb-blue-soft);
    border-radius: var(--radius-data);
}
.prod-project-quote__text {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.5;
}
.prod-project-quote__link {
    color: var(--jb-blue);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}
.prod-project-quote__link:hover { color: var(--jb-accent); }

/* Trust strip */
.prod-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.prod-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
}
.prod-trust-item i { color: var(--jb-accent); font-size: 13px; }

/* Secondary actions row */
.prod-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.prod-secondary-actions .prod-btn { flex: 1; min-width: 140px; }


/* =========================================================
   12. BODY SHARED — docs row, details, upgrades, spec, help
   ========================================================= */
.prod-docs-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 32px;
}
.prod-doc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-page);
    text-decoration: none;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease-out);
}
.prod-doc-card:hover {
    border-color: var(--jb-accent);
    transform: translateY(-1px);
}
.prod-doc-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
    color: var(--jb-blue);
    border-radius: var(--radius-data);
    font-size: 18px;
    flex-shrink: 0;
}
.prod-doc-card__title {
    font-size: 14px;
    font-weight: 600;
}
.prod-doc-card__sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* Card wrapper for content sections */
.prod-card {
    margin-bottom: 24px;
    padding: 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-page);
}
.prod-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 16px;
}
.prod-card__intro {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0 0 20px;
}

/* Rich text (admin-managed product details) */
.prod-rich-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-2);
}
.prod-rich-text p { margin: 0 0 12px; }
.prod-rich-text ul,
.prod-rich-text ol { padding-left: 22px; margin: 0 0 12px; }
.prod-rich-text li { margin-bottom: 4px; }
.prod-rich-text strong { color: var(--ink); font-weight: 600; }
.prod-rich-text a { color: var(--jb-blue); }

/* Upgrade grid */
.prod-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.prod-upgrade-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-page);
    text-decoration: none;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease-out);
}
.prod-upgrade-card:hover {
    border-color: var(--jb-blue);
    transform: translateY(-2px);
}
.prod-upgrade-card--current {
    border-color: var(--jb-accent);
    cursor: default;
}
.prod-upgrade-card--current:hover { transform: none; }
.prod-upgrade-card__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--jb-accent-deep);
}
.prod-upgrade-card--current .prod-upgrade-card__eyebrow { color: var(--jb-accent); }
.prod-upgrade-card__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.prod-upgrade-card__desc {
    font-size: 12px;
    color: var(--ink-3);
}
.prod-upgrade-card__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 4px;
}
.prod-upgrade-card__cta {
    font-size: 12px;
    color: var(--jb-blue);
    margin-top: 2px;
}

/* Specification — two-column key/value list, stronger hierarchy */
.prod-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin: 0;
}

.prod-spec-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
/* Drop the bottom border on the last two rows (the last in each column) */
.prod-spec-row:last-child,
.prod-spec-row:nth-last-child(2):not(:nth-child(odd)) {
    border-bottom: 0;
}

.prod-spec-row__key {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: 0;
}
.prod-spec-row__val {
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

/* Help bar — bottom of page */
.prod-help-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    background: var(--night);
    color: var(--paper);
    border-radius: var(--radius-page);
}
.prod-help-bar__text {
    font-size: 14px;
    line-height: 1.5;
}
.prod-help-bar__text a {
    color: var(--jb-accent);
    text-decoration: none;
    font-weight: 600;
}
.prod-help-bar__text a:hover { text-decoration: underline; }
.prod-help-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--jb-accent);
    color: #fff;
    border-radius: var(--radius-btn);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
}
.prod-help-bar__cta:hover { background: var(--jb-accent-deep); }
body[data-theme="trade"] .prod-help-bar {
    background: var(--paper-2);
}


/* =========================================================
   13. MODALS — zoom, save quote, share
   ========================================================= */
.prod-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: prodModalFade var(--dur-base) var(--ease-out);
}
.prod-modal-backdrop[hidden] { display: none; }

@keyframes prodModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.prod-modal {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--radius-page);
    padding: 24px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: prodModalSlide var(--dur-base) var(--ease-out);
}
@keyframes prodModalSlide {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ZOOM modal — the fix: object-fit contain + max-height calc() */
.prod-modal--zoom {
    width: auto;
    max-width: calc(100vw - 40px);
    background: transparent;
    padding: 0;
    overflow: visible;
    display: flex;
    align-items: center;
}
.prod-modal--zoom img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: var(--radius-page);
    background: var(--paper);
}
.prod-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    border: 0;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    z-index: 2;
}
.prod-modal__nav:hover {
    background: var(--jb-accent);
    color: #fff;
}
.prod-modal__nav--prev { left: -60px; }
.prod-modal__nav--next { right: -60px; }
.prod-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    border: 0;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    z-index: 3;
}
.prod-modal__close:hover {
    background: var(--jb-accent);
    color: #fff;
}

/* QUOTE modal */
.prod-modal--quote {
    width: 480px;
    max-width: 100%;
}
.prod-modal__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px;
}
.prod-modal__sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 16px;
}
.prod-modal__ref {
    color: var(--jb-blue);
    font-weight: 600;
}
.prod-modal__summary {
    padding: 14px;
    background: var(--paper-2);
    border-radius: var(--radius-data);
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 14px;
    line-height: 1.5;
}
.prod-modal__field { margin-bottom: 14px; }
.prod-modal__field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.prod-modal__field input:focus { border-color: var(--jb-blue); }
.prod-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* SHARE modal */
.prod-modal--share { width: 460px; max-width: 100%; }
.prod-share-row {
    display: flex;
    gap: 6px;
}
.prod-share-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: 12px;
    font-family: monospace;
    outline: none;
}
.prod-share-row button {
    padding: 10px 14px;
    background: var(--jb-blue);
    color: #fff;
    border: 0;
    border-radius: var(--radius-btn);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.prod-share-row button:hover { background: var(--jb-accent); }


/* =========================================================
   14. TOAST (small notification)
   ========================================================= */
.prod-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 500;
    z-index: 2000;
    animation: prodToastIn var(--dur-base) var(--ease-out);
    pointer-events: none;
}
.prod-toast[hidden] { display: none; }
@keyframes prodToastIn {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}
/* =========================================================
   17. ADD-TO-PROJECT WIDGET (when included on product page)
   The widget has its own .atp- scoped CSS, but its outer
   button doesn't match our buy-area button width by default.
   Override so it spans the secondary-actions row cleanly.
   ========================================================= */
.prod-info .atp-trigger,
.prod-info .atp-button,
.prod-info button[data-atp-open] {
    width: 100%;
    margin-top: 8px;
    padding: 12px 18px;
    box-sizing: border-box;
}
/* =========================================================
   18. RICH TEXT — admin HTML normalisation
   product_details is admin-edited rich text. It often arrives
   with its own font-family, table styling, etc. Force everything
   inside .prod-rich-text to match brand tokens.
   ========================================================= */

/* Force all descendants to use the brand font (kills inline serif/Arial) */
.prod-rich-text,
.prod-rich-text * {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Headings inside rich text */
.prod-rich-text h1,
.prod-rich-text h2,
.prod-rich-text h3,
.prod-rich-text h4 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    margin: 20px 0 10px;
    line-height: 1.3;
}
.prod-rich-text h2 { font-size: 16px; }
.prod-rich-text h3 { font-size: 14px; }
.prod-rich-text h4 { font-size: 13px; }

/* First child no top margin */
.prod-rich-text > *:first-child { margin-top: 0; }

/* Tables — the big one */
.prod-rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-data);
    overflow: hidden;
}
.prod-rich-text thead {
    background: var(--paper-2);
}
.prod-rich-text th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.prod-rich-text th:last-child { border-right: 0; }
.prod-rich-text td {
    padding: 10px 12px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    vertical-align: middle;
}
.prod-rich-text td:last-child { border-right: 0; }
.prod-rich-text tr:last-child td { border-bottom: 0; }
.prod-rich-text tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.015);
}

/* Trade theme — zebra needs inverting */
body[data-theme="trade"] .prod-rich-text tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

/* =========================================================
   15. RESPONSIVE
   All breakpoints consolidated here in cascade order:
   1024px → 768px → 600px → 480px
   ========================================================= */

/* ---- 1024px: collapse buy-area columns ---- */
@media (max-width: 1024px) {
    .prod-buy {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .prod-image-col {
        position: static;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ---- 768px: tablet down ---- */
@media (max-width: 768px) {
    .prod-page {
        padding: 0 16px 60px;
        margin-top: 16px;
    }

    /* Modal nav arrows: bring them in from the negative-offset */
    .prod-modal__nav--prev { left: 8px; }
    .prod-modal__nav--next { right: 8px; }

    /* Buy row: qty + Add to basket share the top row, Buy now full-width below */
    .prod-buy-row {
        grid-template-columns: auto 1fr;
    }
    .prod-qty-control {
        justify-self: start;
    }
    #prodBuyNowBtn {
        grid-column: 1 / -1;
    }
    .prod-secondary-actions .prod-btn {
        min-width: 0;
    }

    /* Configurator/Bespoke fields stack */
    .prod-config-dim {
        grid-template-columns: 1fr;
    }
    .prod-config-dim__img {
        max-width: 160px;
    }
    .prod-bespoke-grid,
    .prod-bespoke-grid.has-depth {
        grid-template-columns: 1fr;
    }

    /* Help bar stacks */
    .prod-help-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    /* Spec table: collapse to single column of rows */
    .prod-spec-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Postcode row: stack the button below the input */
    .prod-postcode-row {
        flex-direction: column;
        gap: 8px;
    }
    .prod-postcode-row input,
    .prod-postcode-row button {
        width: 100%;
    }

    /* Stock banner: give text room to wrap */
    .prod-stock-banner {
        padding: 12px 14px;
    }
    .prod-stock-line-1,
    .prod-stock-line-2 {
        word-break: break-word;
    }
}

/* ---- 600px: narrow phone — rescue from fixed minimum widths ---- */
@media (max-width: 600px) {
    /* Lock grid: don't enforce 180px minimum — let columns shrink */
    .prod-lock-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .prod-lock-tile {
        padding: 10px 12px;
    }
    .prod-lock-tile__name {
        font-size: 12px;
    }
    /* Lock info panel: stack image above text on narrow phones */
    .prod-lock-info-panel {
        flex-direction: column;
        gap: 12px;
    }
    .prod-lock-info-panel__media img {
        width: 96px;
        height: 96px;
    }

    /* Size tiles: 2 columns, no minimum */
    .prod-size-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    /* Configurator radio tiles: 2 columns, no minimum */
    .prod-config-choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    /* Buy row: keep qty stepper compact next to Add to basket */
    .prod-buy-row {
        gap: 10px;
    }
    .prod-qty-control {
        justify-self: start;
    }

    /* Secondary actions: stack vertically, full width */
    .prod-secondary-actions {
        flex-direction: column;
    }
    .prod-secondary-actions .prod-btn {
        flex: 0 1 auto;
        min-width: 0;
        width: 100%;
    }

    /* Project quote: stack the call link below */
    .prod-project-quote {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Trust strip: tighter wrap */
    .prod-trust-strip {
        gap: 8px 14px;
    }
    .prod-trust-item {
        font-size: 11px;
    }

    /* Modal zoom nav: smaller buttons so they don't overlap image */
    .prod-modal--zoom .prod-modal__nav {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ---- 480px: phone ---- */
@media (max-width: 480px) {
    .prod-page {
        padding: 0 12px 60px;
    }
    .prod-title {
        font-size: 20px;
    }
    .prod-price-main {
        font-size: 26px;
    }
    .prod-modal {
        padding: 20px;
    }
    /* Spec rows: stack key above value */
    .prod-spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/* =========================================================
   16. TRADE-THEME SPECIFIC TWEAKS
   ========================================================= */
body[data-theme="trade"] .prod-stock-dot {
    box-shadow: 0 0 0 4px rgba(135, 205, 142, 0.18);
    background: var(--spec-leak-text);
}
body[data-theme="trade"] .prod-zoom-pill {
    background: rgba(244, 244, 244, 0.12);
    color: var(--ink);
}
body[data-theme="trade"] .prod-modal {
    background: var(--paper);
    border: 1px solid var(--line);
}
body[data-theme="trade"] .prod-modal--zoom {
    background: transparent;
    border: 0;
}
body[data-theme="trade"] .prod-modal__nav,
body[data-theme="trade"] .prod-modal__close {
    background: rgba(244, 244, 244, 0.95);
}


/* =========================================================
   17. ADD-TO-PROJECT WIDGET overrides (when on product page)
   ========================================================= */
.prod-info .atp-trigger,
.prod-info .atp-button,
.prod-info button[data-atp-open] {
    width: 100%;
    margin-top: 8px;
    padding: 12px 18px;
    box-sizing: border-box;
}


/* =========================================================
   18. RICH TEXT — admin HTML normalisation
   ========================================================= */

/* Force brand font across all admin-edited content */
.prod-rich-text,
.prod-rich-text * {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Wrapper handles horizontal scroll when content (usually a wide
   table) exceeds container width. Page layout stays put. */
.prod-rich-text {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Strip inline colour/font declarations that bleed through */
.prod-rich-text [style*="color"],
.prod-rich-text [style*="font-family"] {
    color: inherit !important;
    font-family: inherit !important;
}

/* Headings inside rich text */
.prod-rich-text h1,
.prod-rich-text h2,
.prod-rich-text h3,
.prod-rich-text h4 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    margin: 20px 0 10px;
    line-height: 1.3;
}
.prod-rich-text h2 { font-size: 16px; }
.prod-rich-text h3 { font-size: 14px; }
.prod-rich-text h4 { font-size: 13px; }
.prod-rich-text > *:first-child { margin-top: 0; }

/* Tables — keep native table behaviour so columns fill the
   container at desktop. When too wide, the .prod-rich-text
   wrapper scrolls horizontally (rule above). */
.prod-rich-text table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-data);
    overflow: hidden;
}
.prod-rich-text thead {
    background: var(--paper-2);
}
.prod-rich-text th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.prod-rich-text th:last-child { border-right: 0; }
.prod-rich-text td {
    padding: 10px 12px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    vertical-align: middle;
}
.prod-rich-text td:last-child { border-right: 0; }
.prod-rich-text tr:last-child td { border-bottom: 0; }
.prod-rich-text tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.015);
}
body[data-theme="trade"] .prod-rich-text tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}


/* =========================================================
   19. PAGE-LEVEL OVERFLOW + MIN-WIDTH RESCUE
   Stop horizontal scroll at body level (children like the
   rich-text wrapper can still scroll within themselves).
   ========================================================= */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* min-width:0 on every flex/grid container that hosts content
   wide enough to push parents out. Default min-width: auto
   would otherwise refuse to shrink below intrinsic width. */
.prod-page,
.prod-buy,
.prod-info,
.prod-image-col,
.prod-card,
.prod-buy-row,
.prod-config-block,
.prod-config-group,
.prod-secondary-actions,
.prod-trust-strip,
.prod-project-quote,
.prod-docs-row,
.prod-upgrade-grid,
.prod-help-bar,
.prod-postcode-row,
.prod-stock-banner,
.prod-modal-actions {
    min-width: 0;
}

/* Text wrapping so long unbreakable strings don't widen parents */
.prod-title,
.prod-subtitle,
.prod-stock-line-1,
.prod-stock-line-2,
.prod-project-quote__text,
.prod-help-bar__text,
.prod-doc-card__title,
.prod-doc-card__sub {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   20. FLOOR-TO-CEILING PICKER + PRODUCT OPTIONS
   Previously inline <style> blocks in partials/_product_standard.php
   and partials/_product_options.php, with hard-coded #fff / #f0f9ff /
   #f8fafc backgrounds. Text was var(--ink) — near-white on the trade
   theme — so every tile and select rendered white-on-white in dark
   mode. Everything below sits on the brand tokens, so it follows the
   theme like the rest of the page.
   ========================================================= */

/* --- Floor-to-ceiling height (ladders) --- */
.prod-fc-height { margin-bottom: 18px; }
.prod-fc-height__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.prod-fc-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.prod-fc-tile {
    padding: 12px 16px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease-out);
}
.prod-fc-tile:hover {
    border-color: var(--jb-blue);
    background: var(--jb-blue-soft);
}
.prod-fc-tile.is-selected {
    border-color: var(--jb-blue);
    border-width: 2px;
    background: var(--jb-blue-soft);
    padding: 11px 15px; /* compensate for thicker border */
}

/* --- Native selects + text inputs (size picker, option dropdowns) --- */
.prod-size-select,
.prod-opt-select,
.prod-opt-num,
.prod-opt-field__input {
    width: 100%;
    padding: 11px 12px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    font: inherit;
    font-size: 15px;
}
.prod-size-select:focus,
.prod-opt-select:focus,
.prod-opt-num:focus,
.prod-opt-field__input:focus {
    outline: none;
    border-color: var(--jb-blue);
    box-shadow: 0 0 0 3px rgba(58, 163, 206, 0.15);
}
/* Tell the browser the control is dark so the dropdown list and the
   native arrow are painted dark too, not a white popup on a dark page. */
body[data-theme="trade"] .prod-size-select,
body[data-theme="trade"] .prod-opt-select,
body[data-theme="trade"] .prod-opt-num,
body[data-theme="trade"] .prod-opt-field__input {
    color-scheme: dark;
}

/* --- Product options block --- */
.prod-opt-block { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.prod-opt-group__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.prod-opt-group__req { color: #dc2626; margin-left: 2px; }
.prod-opt-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.prod-opt-tile {
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    cursor: pointer;
    text-align: center;
    font: inherit;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease-out);
}
.prod-opt-tile:hover {
    border-color: var(--jb-blue);
    background: var(--jb-blue-soft);
}
.prod-opt-tile.is-selected {
    border-color: var(--jb-blue);
    border-width: 2px;
    background: var(--jb-blue-soft);
    padding: 11px; /* compensate for thicker border */
}
.prod-opt-tile__img { width: 100%; max-width: 110px; height: auto; border-radius: 6px; }
.prod-opt-tile__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.prod-opt-tile__uplift { font-size: 12px; color: var(--ink-3); }
.prod-opt-tile.is-selected .prod-opt-tile__uplift { color: var(--jb-blue-deep); }
.prod-opt-num-wrap { display: flex; align-items: center; gap: 8px; }
.prod-opt-num { width: 140px; }
.prod-opt-num__unit { color: var(--ink-3); font-size: 14px; }
.prod-opt-num__range { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.prod-opt-auto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-btn);
    color: var(--ink);
}
.prod-opt-auto input { margin-top: 3px; }
.prod-opt-auto__text { font-size: 14px; color: var(--ink); }
.prod-opt-auto__uplift { color: var(--ink-3); font-size: 13px; }
.prod-opt-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
/* Reveal-on-select capture fields (e.g. RAL colour boxes) */
.prod-opt-fields {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
}
.prod-opt-fields.is-shown { display: flex; }
.prod-opt-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.prod-opt-field__input.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }