/* Trailer Spec Builder — frontend styles (v1.11.1)
 *
 * Mobile-first. The inline `style` injected by TSB_Frontend::inline_colors_css()
 * overrides the variable defaults below with the admin's chosen palette and
 * shape/density tokens. Class names are stable — JS depends on them — so any
 * visual changes happen here, not in markup.
 *
 * 1.11.1: theme-bleed-through hardening for the Appearance settings.
 *   - Typography reset (section 1b) `!important`-pins the color of every
 *     h1..h6 and `a` inside `.tsb-builder` to the configured Heading /
 *     Primary color so themes that ship `.entry-content h2 { color: ... }`
 *     can't override the admin's choice. Layout (font-size, weight, margin)
 *     is untouched.
 *   - Every hover rule now consumes `var(--tsb-hover, var(--tsb-primary))`
 *     and every heading class now consumes `var(--tsb-heading, var(--tsb-dark))`.
 *   - The choice/card hover ring uses `!important` on `border-color` and
 *     `box-shadow` only so themes can't undo the visual hover affordance.
 */

/* ============================================================
 * 1. Base container + design tokens (fallbacks)
 * ============================================================ */
.tsb-builder {
    overflow: visible;
    --tsb-primary: #2f5aa8;
    --tsb-dark: #222222;
    --tsb-light: #eeeeee;
    --tsb-accent: var(--tsb-primary);
    --tsb-card-bg: #ffffff;
    --tsb-page-bg: transparent;

    /* Shape / density tokens (overridden by inline styles from settings) */
    --tsb-radius-card: 8px;
    --tsb-radius-btn: 6px;
    --tsb-density-pad: 14px;
    --tsb-density-gap: 12px;

    /* Derived / static tokens */
    --tsb-border: #d8dde4;
    --tsb-border-strong: #b9c0cc;
    --tsb-muted: #5b6470;
    --tsb-muted-soft: #7b8493;
    --tsb-surface: #f7f9fc;
    --tsb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --tsb-shadow-md: 0 4px 14px rgba(15, 23, 42, .08);
    --tsb-shadow-lg: 0 12px 28px rgba(15, 23, 42, .14);
    --tsb-focus-ring: 0 0 0 3px rgba(47, 90, 168, .25);

    /* Motion tokens (1.8.0) — distinct easing curves for the configurator's
       signature feel. Respects prefers-reduced-motion further down. */
    --tsb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --tsb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tsb-dur-fast: 140ms;
    --tsb-dur-base: 220ms;
    --tsb-dur-slow: 420ms;

    /* Typography scale (1.8.0) — clear hierarchy with optical letter-spacing. */
    --tsb-font-display: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);  /* hero numbers (Estimated MSRP) */
    --tsb-font-h1: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
    --tsb-font-h2: 1.0625rem;  /* 17px — section titles */
    --tsb-font-body: 0.9375rem; /* 15px */
    --tsb-font-small: 0.8125rem; /* 13px */
    --tsb-font-eyebrow: 0.6875rem; /* 11px — uppercase labels */
    --tsb-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    box-sizing: border-box;
    color: var(--tsb-dark);
    background: var(--tsb-page-bg);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
    position: relative;

    /* Signature subtle dot-grid texture behind the configurator (1.8.0).
       Stays nearly invisible (opacity baked into the gradient stops) but adds
       depth that makes the builder feel intentional, not generic. */
    background-image:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tsb-dark) 6%, transparent) 1px, transparent 0),
        var(--tsb-page-bg, none);
    background-size: 22px 22px, auto;
    background-position: 0 0, 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .tsb-builder {
        --tsb-dur-fast: 0ms;
        --tsb-dur-base: 0ms;
        --tsb-dur-slow: 0ms;
    }
    .tsb-builder *,
    .tsb-builder *::before,
    .tsb-builder *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}
.tsb-builder *,
.tsb-builder *::before,
.tsb-builder *::after { box-sizing: border-box; }

/* ============================================================
 * 1b. Typography reset (1.11.1)
 *
 * Active WordPress themes routinely ship higher-specificity color rules on
 * h1–h6 and `a` inside `.entry-content`, `.page-content`, `.site-main`,
 * etc. — often with `!important`. Without this reset those theme styles
 * win the cascade over the configurator's heading + link rules, which is
 * exactly the bug v1.10.0's "Heading Color" / "Hover Color" Appearance
 * settings hit (admin changes the picker, frontend doesn't budge because
 * the theme keeps repainting the heading).
 *
 * The reset is intentionally narrow:
 *   - `!important` is applied ONLY to `color` on plugin headings + links,
 *     never to font-size, weight, margin, padding, background, or layout.
 *   - The values are always our CSS variables (with the documented
 *     primary/dark fallbacks), so admins keep full control via Appearance.
 *   - The hero headline gradient is restored just below so its signature
 *     transparent-text-fill + linear-gradient still wins over this reset.
 * ============================================================ */
.tsb-builder h1,
.tsb-builder h2,
.tsb-builder h3,
.tsb-builder h4,
.tsb-builder h5,
.tsb-builder h6 {
    color: var(--tsb-heading, var(--tsb-dark)) !important;
    font-family: inherit;
}
.tsb-builder a { color: var(--tsb-primary) !important; }
.tsb-builder a:hover { color: var(--tsb-dark) !important; }

/* The hero headline uses background-clip: text + transparent fill to render
   the primary→accent gradient. Re-pin the transparent fill with !important
   so the universal heading reset above can't flatten the gradient. When
   the admin actually picks a Heading Color, TSB_Frontend::inline_colors_css()
   emits a higher-specificity inline override that flattens this back to a
   solid color (so the chosen value is what the customer actually sees). */
.tsb-builder .tsb-hero-headline {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* Selected-card "filled" variant uses accent as ring color. */
.tsb-cards-selected-filled { --tsb-selected-bg: color-mix(in srgb, var(--tsb-accent) 8%, var(--tsb-card-bg)); }

/* ============================================================
 * 2. Hero / step header — minimalist + futuristic (1.9.0)
 *
 * No outer box. Big gradient headline. Mono step numerals. A thin
 * primary→accent rule threads the steps together (horizontal on desktop,
 * vertical on mobile). Each step animates in with a 60ms stagger driven
 * by the inline `--i` custom property; respects prefers-reduced-motion
 * via the global token zeroing further up the stylesheet.
 * ============================================================ */
.tsb-hero {
    background: transparent;
    border: 0;
    padding: 4px 0 24px;
    margin: 0 0 24px;
    box-shadow: none;
    position: relative;
}
.tsb-hero-text {
    max-width: 720px;
    margin: 0 0 22px;
}
.tsb-hero-headline {
    margin: 0 0 8px;
    font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -0.03em;
    /* The gradient stays the signature look; --tsb-heading lets admins tint
       the trailing stop. Browsers without color-mix fall back gracefully. */
    color: var(--tsb-heading, var(--tsb-dark));
    background: linear-gradient(
        120deg,
        var(--tsb-primary) 0%,
        var(--tsb-accent) 60%,
        color-mix(in srgb, var(--tsb-accent) 60%, var(--tsb-heading, var(--tsb-dark))) 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
}
.tsb-hero-sub {
    margin: 0;
    font-size: var(--tsb-font-body);
    line-height: 1.5;
    color: var(--tsb-muted);
    max-width: 620px;
    text-wrap: pretty;
}

/* Step rail. Vertical on mobile (a 2px gradient column threads the
   numerals); a horizontal threaded gradient line on desktop. */
.tsb-hero-steps {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    position: relative;
}
.tsb-hero-step {
    --tsb-hero-step-stagger: calc(var(--i, 0) * 60ms);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    padding: 4px 0;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--tsb-dur-base) var(--tsb-ease-out) var(--tsb-hero-step-stagger),
        transform var(--tsb-dur-base) var(--tsb-ease-out) var(--tsb-hero-step-stagger);
}
.tsb-hero.is-in .tsb-hero-step {
    opacity: 1;
    transform: translateY(0);
}
.tsb-hero-step-num {
    grid-row: 1 / span 2;
    align-self: start;
    font-family: var(--tsb-font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tsb-primary);
    line-height: 1.3;
    padding: 2px 0 0 14px;
    position: relative;
    min-width: 36px;
}
.tsb-hero-step-title {
    grid-column: 2;
    font-size: var(--tsb-font-h2);
    font-weight: 700;
    color: var(--tsb-heading, var(--tsb-dark)) !important;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.tsb-hero-step-desc {
    grid-column: 2;
    font-size: var(--tsb-font-small);
    color: var(--tsb-muted);
    line-height: 1.55;
}

/* Mobile: 2px vertical gradient column threading the steps together. */
.tsb-hero-steps::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--tsb-primary), var(--tsb-accent));
    opacity: .9;
    border-radius: 2px;
}

.tsb-hero-disclaimer {
    margin: 28px 0 0;
    font-size: var(--tsb-font-eyebrow);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--tsb-muted);
}

@media (min-width: 768px) {
    .tsb-hero {
        padding: 8px 0 32px;
        margin: 0 0 28px;
    }
    .tsb-hero-text { margin-bottom: 28px; }
    .tsb-hero-steps {
        grid-template-columns: repeat(var(--tsb-hero-step-count, 3), minmax(0, 1fr));
        gap: 28px;
        padding-top: 22px;
    }
    .tsb-hero-step {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 6px;
        padding: 18px 0 0;
    }
    .tsb-hero-step-num {
        grid-row: auto;
        grid-column: 1;
        padding: 0 0 0 16px;
        min-width: 0;
    }
    .tsb-hero-step-num::before {
        content: "";
        position: absolute;
        left: 0;
        top: -8px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--tsb-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--tsb-primary) 18%, transparent);
    }
    .tsb-hero-step-title,
    .tsb-hero-step-desc {
        grid-column: 1;
    }
    /* Desktop: thin horizontal threaded line behind the numerals. */
    .tsb-hero-steps::before {
        left: 0;
        right: 0;
        top: 8px;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent 0,
            var(--tsb-primary) 8%,
            var(--tsb-accent) 92%,
            transparent 100%
        );
        border-radius: 0;
    }
}
@media (min-width: 1024px) {
    .tsb-hero-headline { font-size: clamp(2.75rem, 1.6rem + 3vw, 4.5rem); }
}

/* Disclaimer reused by configurator panels (kept for backwards-compat
   with `.tsb-disclaimer.tsb-config-disclaimer` markup). */
.tsb-disclaimer {
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--tsb-muted);
    font-style: italic;
    line-height: 1.45;
}
.tsb-configurator .tsb-config-disclaimer {
    margin-top: 24px;
    margin-bottom: 0;
    padding: 14px 16px;
    background: var(--tsb-surface);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    font-size: 12px;
    font-style: normal;
    line-height: 1.55;
    color: var(--tsb-muted);
}
@media (max-width: 1023px) {
    .tsb-configurator .tsb-config-disclaimer {
        margin-bottom: 8px;
    }
}

/* ============================================================
 * 3. Generic helpers
 * ============================================================ */
.tsb-empty {
    padding: 28px 20px;
    background: var(--tsb-surface);
    border: 1px dashed var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    text-align: center;
    color: var(--tsb-muted);
    font-size: 14px;
}
.tsb-back-btn {
    background: transparent;
    border: 0;
    color: var(--tsb-primary);
    cursor: pointer;
    padding: 10px 12px 10px 0;
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tsb-back-btn:hover { text-decoration: underline; }
.tsb-back-btn:focus-visible { outline: none; box-shadow: var(--tsb-focus-ring); border-radius: var(--tsb-radius-btn); }

/* ============================================================
 * 4. Pickers (series)
 * ============================================================ */
.tsb-picker-title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tsb-picker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tsb-picker-header .tsb-picker-title { margin: 0; }

.tsb-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tsb-density-gap);
}

/* Card baseline */
.tsb-card {
    background: var(--tsb-card-bg);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    padding: var(--tsb-density-pad);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .18s, background-color .18s;
    box-shadow: var(--tsb-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    font: inherit;
    min-height: 44px;
    width: 100%;
}
/* 1.11.1: hover ring uses --tsb-hover (falls back to primary) and is
   `!important` on border-color + box-shadow only so themes can't undo
   the affordance. */
.tsb-builder .tsb-card:hover {
    border-color: var(--tsb-hover, var(--tsb-primary)) !important;
    box-shadow: var(--tsb-shadow-md) !important;
    transform: translateY(-2px);
}
.tsb-card:focus-visible {
    outline: none;
    border-color: var(--tsb-primary);
    box-shadow: var(--tsb-focus-ring);
}
/* Border style variants */
.tsb-cards-shadow .tsb-card { border-color: transparent; box-shadow: var(--tsb-shadow-md); }
.tsb-builder .tsb-cards-shadow .tsb-card:hover { box-shadow: var(--tsb-shadow-lg) !important; }
.tsb-cards-flat .tsb-card { border-color: transparent; box-shadow: none; background: var(--tsb-surface); }
.tsb-cards-flat .tsb-card:hover { background: color-mix(in srgb, var(--tsb-hover, var(--tsb-primary)) 6%, var(--tsb-surface)); }

.tsb-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: calc(var(--tsb-radius-card) - 2px);
    /* Fallback when no thumbnail: subtle accent-tinted placeholder */
    background-color: var(--tsb-light);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--tsb-accent) 14%, var(--tsb-light)) 0%, var(--tsb-light) 100%);
}
.tsb-card-title { font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; color: var(--tsb-heading, var(--tsb-dark)) !important; }
.tsb-card-meta,
.tsb-card-desc,
.tsb-card-price { font-size: 13px; color: var(--tsb-muted); }
.tsb-card-price { color: var(--tsb-primary); font-weight: 700; font-size: 14px; }

@media (min-width: 640px) {
    .tsb-card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--tsb-density-gap); }
}
@media (min-width: 768px) {
    .tsb-card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .tsb-card-title { font-size: 18px; }
}
@media (min-width: 1024px) {
    .tsb-card-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ============================================================
 * 5. Configurator header + size row
 * ============================================================ */
.tsb-config-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tsb-config-title { margin: 0; font-size: var(--tsb-font-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--tsb-heading, var(--tsb-dark)) !important; }
.tsb-config-meta { font-size: 13px; color: var(--tsb-muted); }

/* .tsb-config-image was removed in 1.7.1 — the configurator no longer renders
   a hero/featured image at the top. Class name kept here only as a comment so
   future searches don't suggest it's still in use. */

.tsb-size-select {
    flex: 1 1 200px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-btn);
    font-size: 16px;
    background: #fff;
    color: var(--tsb-dark);
}
.tsb-size-select:focus { outline: none; border-color: var(--tsb-primary); box-shadow: var(--tsb-focus-ring); }

@media (min-width: 768px) {
    .tsb-config-title { font-size: 26px; }
}

/* ============================================================
 * 6. MSRP bar — premium, distinctive (1.8.0 redesign)
 *
 * Two-tone: deep ink on the left (Standard Build label), gradient ribbon
 * on the right behind the live total. Subtle inner highlight + outer glow
 * so it lifts off the page without feeling heavy.
 * ============================================================ */
.tsb-configurator {
    --tsb-sticky-top: 0px;
    --tsb-sidebar-top: 16px;
    --tsb-mobile-dock-h: 72px;
    --tsb-chat-offset: 0px;
    overflow: visible;
}

.tsb-msrp-bar {
    position: sticky;
    top: var(--tsb-sticky-top);
    z-index: 20;
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: var(--tsb-radius-card);
    border: 1px solid color-mix(in srgb, var(--tsb-dark) 80%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--tsb-dark) 0%, color-mix(in srgb, var(--tsb-dark) 70%, var(--tsb-primary)) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-shadow: var(--tsb-shadow-md), 0 0 0 1px rgba(255,255,255,.04) inset;
    overflow: hidden;
}
.tsb-msrp-bar::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 70%;
    height: 220%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tsb-primary) 60%, transparent) 0%, transparent 70%);
    opacity: .35;
    pointer-events: none;
    transform: rotate(8deg);
}
.tsb-msrp-bar > * { position: relative; z-index: 1; }

.tsb-msrp-bar .tsb-base-msrp {
    color: rgba(255, 255, 255, .72);
    font-size: var(--tsb-font-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.tsb-msrp-bar .tsb-base-msrp strong {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 0;
    letter-spacing: 0;
    text-transform: none;
    font-size: 16px;
}
/* Size + "Standard Build" eyebrow (1.9.0). */
.tsb-msrp-bar .tsb-base-eyebrow {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--tsb-font-eyebrow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    line-height: 1.2;
}
.tsb-msrp-bar .tsb-base-eyebrow-sep {
    color: rgba(255, 255, 255, .4);
    font-weight: 400;
}
.tsb-msrp-bar .tsb-base-eyebrow [data-tsb-base-size-label] {
    color: #fff;
    letter-spacing: 0.06em;
}
.tsb-msrp-bar .tsb-total-msrp {
    font-size: var(--tsb-font-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}
.tsb-msrp-bar .tsb-total-msrp strong {
    color: #fff;
    font-size: var(--tsb-font-display);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    margin-left: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    display: inline-block;
}
.tsb-total-msrp strong.tsb-pulse { will-change: transform; }

/* Pulse + chromatic glow on every MSRP value change. */
@keyframes tsb-msrp-pulse {
    0%   { transform: scale(1);   filter: drop-shadow(0 0 0 transparent); }
    35%  { transform: scale(1.045); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tsb-primary) 60%, transparent)); }
    100% { transform: scale(1);   filter: drop-shadow(0 0 0 transparent); }
}
.tsb-pulse { animation: tsb-msrp-pulse 460ms var(--tsb-ease-spring); }

@media (min-width: 640px) {
    .tsb-msrp-bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 16px;
    }
    .tsb-msrp-bar-extra {
        display: contents;
    }
    .tsb-msrp-bar-main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 16px;
        flex: 1 1 auto;
        min-width: min(100%, 280px);
    }
    .tsb-msrp-bar .tsb-total-msrp strong { font-size: 28px; }
}
@media (min-width: 1024px) {
    /* Desktop: sidebar + panel nav carry the live total — avoid two sticky bars fighting. */
    .tsb-msrp-bar {
        position: static;
        top: auto;
        z-index: auto;
    }
    .tsb-msrp-bar .tsb-total-msrp strong { font-size: 32px; }
}
.tsb-msrp-bar.is-breakdown-open {
    overflow: visible;
    z-index: 25;
}

/* 2.13.2 — mobile slim bar (fixed height, opacity collapse — no display toggle) */
@media (max-width: 1023px) {
    .tsb-msrp-bar {
        min-height: 52px;
        transition: padding 0.2s var(--tsb-ease-out);
    }
    .tsb-msrp-bar-extra {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
        max-height: 160px;
        opacity: 1;
        overflow: hidden;
        transition:
            max-height 0.28s var(--tsb-ease-out),
            opacity 0.22s var(--tsb-ease-out),
            margin 0.28s var(--tsb-ease-out);
    }
    .tsb-msrp-bar-main {
        width: 100%;
    }
    .tsb-msrp-bar.is-slim {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .tsb-msrp-bar.is-slim .tsb-msrp-bar-extra {
        max-height: 0;
        opacity: 0;
        margin: 0;
        pointer-events: none;
    }
    .tsb-msrp-bar.is-slim .tsb-total-msrp strong {
        font-size: 22px;
    }
}

/* 2.13.0 — options delta + inline breakdown toggle */
.tsb-msrp-bar-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}
.tsb-msrp-bar-extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}
.tsb-options-delta,
.tsb-price-footer-delta {
    font-size: var(--tsb-font-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.tsb-options-delta strong,
.tsb-price-footer-delta strong {
    color: color-mix(in srgb, var(--tsb-primary) 85%, #fff);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.02em;
}
.tsb-msrp-breakdown-toggle {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--tsb-dur-fast) var(--tsb-ease-out);
}
.tsb-msrp-breakdown-toggle:hover { background: rgba(255, 255, 255, .18); }
.tsb-msrp-breakdown-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tsb-primary);
}
.tsb-msrp-breakdown {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    max-height: min(40vh, 280px);
    overflow: auto;
}
.tsb-msrp-breakdown-body { font-size: 13px; }
.tsb-msrp-breakdown-foot {
    margin: 10px 0 0;
    font-size: 13px;
}
.tsb-link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tsb-primary);
    font-weight: 700;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tsb-msrp-bar .tsb-link-btn { color: rgba(255, 255, 255, .92); }

/* Compact pricing line list (breakdown, sidebar, sheet) */
.tsb-price-line-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tsb-price-line-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tsb-border) 60%, transparent);
    font-size: 13px;
    line-height: 1.35;
}
.tsb-price-line-list li:last-child { border-bottom: 0; }
.tsb-price-line-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--tsb-dark);
}
.tsb-price-line-name small {
    display: block;
    color: var(--tsb-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.tsb-price-line-amt {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tsb-primary);
}
.tsb-price-line-empty {
    margin: 0;
    padding: 8px 0;
    color: var(--tsb-muted);
    font-size: 13px;
    font-style: italic;
}

/* 2.13.0 — desktop sidebar + mobile footer/sheet layout */
.tsb-configurator-layout {
    display: block;
}
.tsb-configurator-main { min-width: 0; }

.tsb-price-sidebar {
    display: none;
}
@media (min-width: 1024px) {
    .tsb-configurator-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 24px;
        align-items: start;
    }
    .tsb-price-sidebar {
        display: block;
        position: sticky;
        top: var(--tsb-sidebar-top);
        z-index: 4;
        align-self: start;
    }
    .tsb-price-sidebar-inner {
        background: var(--tsb-card-bg);
        border: 1px solid var(--tsb-border);
        border-radius: var(--tsb-radius-card);
        padding: 16px;
        box-shadow: var(--tsb-shadow-sm);
    }
    .tsb-price-sidebar-head { margin-bottom: 10px; }
    .tsb-price-sidebar-title {
        margin: 0;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    .tsb-price-sidebar-row,
    .tsb-price-sidebar-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        font-size: 13px;
    }
    .tsb-price-sidebar-base {
        padding-bottom: 10px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--tsb-border);
        color: var(--tsb-muted);
        font-weight: 600;
    }
    .tsb-price-sidebar-base strong,
    .tsb-price-sidebar-total strong {
        color: var(--tsb-dark);
        font-variant-numeric: tabular-nums;
    }
    .tsb-price-sidebar-list {
        list-style: none;
        margin: 0 0 12px;
        padding: 0;
        max-height: min(50vh, 360px);
        overflow: auto;
    }
    .tsb-price-sidebar-total {
        padding-top: 12px;
        margin-top: 4px;
        border-top: 2px solid var(--tsb-dark);
        font-weight: 700;
        font-size: 14px;
    }
    .tsb-price-sidebar-total strong {
        font-size: 20px;
        font-weight: 800;
        color: var(--tsb-primary);
    }
    .tsb-price-sidebar .tsb-link-btn {
        margin-top: 12px;
        font-size: 13px;
    }
    .tsb-price-footer { display: none !important; }
}

/* 2.13.2 — fixed mobile price dock (total + Continue) */
@media (max-width: 1023px) {
    .tsb-configurator-series {
        padding-bottom: calc(var(--tsb-mobile-dock-h, 72px) + var(--tsb-chat-offset, 0px) + 8px);
    }
    .tsb-panel {
        scroll-padding-bottom: calc(var(--tsb-mobile-dock-h, 72px) + var(--tsb-chat-offset, 0px) + 16px);
    }
    .tsb-panel-nav [data-tsb-next] { display: none !important; }
    .tsb-panel-nav-total { display: none !important; }
    .tsb-panel-nav-spacer { flex: 0 0 0; display: none; }
    .tsb-panel-nav { justify-content: flex-start; }

    .tsb-price-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--tsb-chat-offset, 0px);
        margin: 0;
        margin-top: 0;
        border-radius: 0;
        z-index: 30;
        padding: 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .22);
    }
    .tsb-price-dock-inner {
        display: flex;
        align-items: stretch;
        gap: 0;
        width: 100%;
        min-height: 56px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .tsb-price-dock-summary {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        padding: 6px 10px 6px 4px;
        text-align: left;
        font: inherit;
        border-radius: var(--tsb-radius-btn);
    }
    .tsb-price-dock-summary:focus-visible {
        outline: none;
        box-shadow: var(--tsb-focus-ring);
    }
    .tsb-price-dock-summary-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
    }
    .tsb-price-dock-delta {
        font-size: 10px;
        color: rgba(255, 255, 255, .78);
    }
    .tsb-price-dock-total {
        font-size: 20px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }
    .tsb-price-dock-continue {
        flex: 0 0 auto;
        min-width: 118px;
        max-width: 46%;
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
    .tsb-price-dock-continue[hidden] { display: none !important; }

    .tsb-price-toast-region {
        bottom: calc(var(--tsb-mobile-dock-h, 72px) + var(--tsb-chat-offset, 0px) + 12px);
    }
}

.tsb-price-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--tsb-dark) 94%, transparent);
    color: #fff;
    border-radius: var(--tsb-radius-card) var(--tsb-radius-card) 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
}
.tsb-price-dock-inner {
    display: none;
}
.tsb-price-footer-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, .72);
}
.tsb-price-footer-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, .7);
    border-bottom: 2px solid rgba(255, 255, 255, .7);
    transform: rotate(-135deg);
    margin-left: auto;
    flex-shrink: 0;
}
.tsb-price-footer-delta {
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
}
.tsb-price-footer-delta strong { color: color-mix(in srgb, var(--tsb-primary) 80%, #fff); }

.tsb-price-sheet[hidden] { display: none !important; }
.tsb-price-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.tsb-price-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.tsb-price-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 78vh;
    max-height: 78dvh;
    overflow: auto;
    background: var(--tsb-card-bg);
    border-radius: var(--tsb-radius-card) var(--tsb-radius-card) 0 0;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--tsb-shadow-md);
    animation: tsb-sheet-up 280ms var(--tsb-ease-out);
    touch-action: pan-y;
}
.tsb-price-sheet-panel.is-dragging {
    transition: none;
}
@keyframes tsb-sheet-up {
    from { transform: translateY(100%); opacity: .6; }
    to   { transform: translateY(0); opacity: 1; }
}
.tsb-price-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    padding-top: 10px;
}
.tsb-price-sheet-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .14);
}
.tsb-price-sheet-head h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}
.tsb-price-sheet-close {
    background: var(--tsb-surface);
    border: 1px solid var(--tsb-border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--tsb-dark);
}
.tsb-price-sheet-row,
.tsb-price-sheet-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
}
.tsb-price-sheet-row {
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tsb-border);
    color: var(--tsb-muted);
    font-weight: 600;
}
.tsb-price-sheet-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.tsb-price-sheet-total {
    padding-top: 12px;
    margin: 8px 0 12px;
    border-top: 2px solid var(--tsb-dark);
    font-weight: 700;
}
.tsb-price-sheet-total strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--tsb-primary);
    font-variant-numeric: tabular-nums;
}

/* Selection-change toast */
.tsb-price-toast-region {
    position: fixed;
    left: 50%;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 55;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 360px);
}
@media (min-width: 1024px) {
    .tsb-price-toast-region {
        bottom: 24px;
        left: auto;
        right: 24px;
        transform: none;
        align-items: flex-end;
    }
}
.tsb-price-toast {
    pointer-events: auto;
    background: var(--tsb-dark);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--tsb-radius-btn);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--tsb-shadow-md);
    animation: tsb-toast-in 320ms var(--tsb-ease-out);
    font-variant-numeric: tabular-nums;
}
.tsb-price-toast.is-positive strong { color: color-mix(in srgb, var(--tsb-primary) 75%, #fff); }
.tsb-price-toast.is-negative strong { color: #ffb4a8; }
@keyframes tsb-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Inline flash on selected choice cards */
.tsb-choice { position: relative; }
.tsb-choice-selection-flash {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: var(--tsb-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px) scale(.92);
    transition:
        opacity 180ms var(--tsb-ease-out),
        transform 280ms var(--tsb-ease-spring);
}
.tsb-choice.tsb-choice-flash-active .tsb-choice-selection-flash {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.tsb-choice-selection-flash.is-negative { background: #8b2e2e; }
body.tsb-price-sheet-open { overflow: hidden; }
/* ============================================================
 * 7. Stepper (1.8.0, hardened + signature interaction in 1.10.0)
 *
 * Numbered progress steps replacing generic tabs. Markup contract is
 * stable — JS depends on .tsb-tab / .tsb-tab-num / .tsb-tab-num-text /
 * .tsb-tab-check / .tsb-tab-label and the .is-active / .is-completed
 * classes set by frontend.js. data-tsb-step="N" is informational.
 *
 * 1.10.0 hardening:
 *  - .tsb-tab-num uses unconditional pixel sizes (was: relied on a
 *    --tsb-step-size custom property that could go undefined on some
 *    cached pages, collapsing the circle to 0×0 and "losing" the stepper).
 *  - .tsb-tab and .tsb-tab-num declare display: inline-flex / flex-shrink: 0
 *    explicitly so a flex parent can never squish them to nothing.
 *
 * 1.10.0 signature interaction (the "wow"):
 *  - Magnetic hover: each non-active step has --mx / --my custom properties
 *    set by JS on mousemove; the circle translates 4–6px toward the cursor
 *    with a soft snap-back when the cursor leaves. Only on (hover: hover)
 *    devices to avoid jitter on touch.
 *  - Pulsing active step: a slow infinite breath on .is-active .tsb-tab-num.
 *    Paused under prefers-reduced-motion.
 *  - Animated progress trail: a single full-width track on .tsb-tabs::before
 *    sits behind every circle, and .tsb-tabs::after is a primary-colored
 *    fill that scales horizontally to (activeIndex / (totalSteps - 1))
 *    via the --tsb-step-fill custom property written by JS.
 * ============================================================ */
.tsb-tabs-wrap {
    position: relative;
    margin-bottom: 16px;
}
.tsb-tabs {
    /* Token: lets media queries tune the circle size without per-tab math. */
    --tsb-step-size: 30px;
    --tsb-step-line-color: color-mix(in srgb, var(--tsb-border, #d8dde4) 70%, transparent);
    --tsb-step-fill: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    padding: 18px 4px 12px;
    margin-bottom: 18px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    position: relative;
    counter-reset: tsbstep;
}
.tsb-tabs::-webkit-scrollbar { display: none; }

/* Full-width connecting track behind the circles + the primary fill that
   advances with the active step. Both are positioned at the vertical center
   of the circle row (top padding 18px + half the circle height). */
.tsb-tabs::before,
.tsb-tabs::after {
    content: "";
    position: absolute;
    left: calc(100% / (var(--tsb-step-total, 6) * 2));
    right: calc(100% / (var(--tsb-step-total, 6) * 2));
    top: calc(18px + var(--tsb-step-size) / 2 - 1px);
    height: 2px;
    pointer-events: none;
    z-index: 0;
}
.tsb-tabs::before {
    background: var(--tsb-step-line-color);
    border-radius: 2px;
}
.tsb-tabs::after {
    background: var(--tsb-primary);
    border-radius: 2px;
    transform-origin: left center;
    transform: scaleX(var(--tsb-step-fill, 0));
    transition: transform 600ms var(--tsb-ease-out);
    will-change: transform;
}

.tsb-tab {
    flex: 1 0 auto;
    min-width: 92px;
    background: transparent;
    border: 0;
    padding: 0 6px;
    cursor: pointer;
    color: var(--tsb-muted);
    white-space: normal;
    scroll-snap-align: center;
    min-height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    position: relative;
    transition: color var(--tsb-dur-base) var(--tsb-ease-out);
    text-align: center;
    line-height: 1.2;
    /* Custom properties driven by the magnetic-hover JS handler.
       Default to 0 so the circle sits centered when the cursor is away. */
    --mx: 0;
    --my: 0;
}

.tsb-tab-num {
    --num-bg: var(--tsb-card-bg);
    --num-fg: var(--tsb-muted-soft);
    --num-border: var(--tsb-border-strong);
    position: relative;
    z-index: 1;
    /* Unconditional sizes — cannot collapse if --tsb-step-size is missing. */
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--num-bg);
    color: var(--num-fg);
    border: 2px solid var(--num-border);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    transform: translate(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 5px));
    transition:
        transform var(--tsb-dur-base) var(--tsb-ease-spring),
        background-color var(--tsb-dur-base) var(--tsb-ease-out),
        color var(--tsb-dur-base) var(--tsb-ease-out),
        border-color var(--tsb-dur-base) var(--tsb-ease-out),
        box-shadow var(--tsb-dur-base) var(--tsb-ease-out);
}
.tsb-tab-num-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity var(--tsb-dur-fast) var(--tsb-ease-out);
}
.tsb-tab-check {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity var(--tsb-dur-base) var(--tsb-ease-out),
        transform var(--tsb-dur-base) var(--tsb-ease-spring);
}

.tsb-tab-label {
    font-size: var(--tsb-font-small);
    font-weight: 600;
    color: var(--tsb-muted);
    transition: color var(--tsb-dur-base) var(--tsb-ease-out);
    max-width: 110px;
}

/* Completed step — primary fill + checkmark. */
.tsb-tab.is-completed .tsb-tab-num {
    --num-bg: var(--tsb-primary);
    --num-fg: #fff;
    --num-border: var(--tsb-primary);
}
.tsb-tab.is-completed .tsb-tab-num-text { opacity: 0; }
.tsb-tab.is-completed .tsb-tab-check { opacity: 1; transform: scale(1); }
.tsb-tab.is-completed .tsb-tab-label { color: var(--tsb-heading, var(--tsb-dark)); }

/* Active step — outline + larger circle + slow infinite breath. */
.tsb-tab.is-active .tsb-tab-num {
    --num-bg: var(--tsb-card-bg);
    --num-fg: var(--tsb-primary);
    --num-border: var(--tsb-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tsb-primary) 18%, transparent);
    animation: tsbStepPulse 2400ms var(--tsb-ease-out) infinite;
    /* Active step ignores the magnetic hover — pulse owns the transform. */
    transform: scale(1.06);
}
.tsb-tab.is-active .tsb-tab-label { color: var(--tsb-primary); font-weight: 700; }

@keyframes tsbStepPulse {
    0%   { transform: scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tsb-primary) 18%, transparent); }
    50%  { transform: scale(1.10); box-shadow: 0 0 0 7px color-mix(in srgb, var(--tsb-primary) 12%, transparent); }
    100% { transform: scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tsb-primary) 18%, transparent); }
}

/* Hover — only meaningful on inactive, non-completed steps, and only on
   real hover devices so touch screens never trigger the magnet jitter. */
@media (hover: hover) {
    .tsb-tab:not(.is-active):not(.is-completed):hover .tsb-tab-num {
        --num-fg: var(--tsb-hover, var(--tsb-primary));
        --num-border: var(--tsb-hover, var(--tsb-primary));
        box-shadow: 0 6px 14px color-mix(in srgb, var(--tsb-hover, var(--tsb-primary)) 22%, transparent);
    }
    .tsb-tab:not(.is-active):not(.is-completed):hover .tsb-tab-label {
        color: var(--tsb-hover, var(--tsb-primary));
    }
}

/* Accessible focus on the whole step button. */
.tsb-tab:focus-visible { outline: none; }
.tsb-tab:focus-visible .tsb-tab-num { box-shadow: var(--tsb-focus-ring); }

/* Reduced-motion: kill the pulse + the trail tween, and freeze the magnet
   to its rest position so non-active circles stop drifting. The active step
   keeps its slightly-larger scale so the visual hierarchy is preserved. */
@media (prefers-reduced-motion: reduce) {
    .tsb-tab.is-active .tsb-tab-num { animation: none; transform: scale(1.06); }
    .tsb-tab:not(.is-active) .tsb-tab-num { transform: none; }
    .tsb-tabs::after { transition: none; }
}

@media (max-width: 559px) {
    .tsb-tabs {
        --tsb-step-size: 26px;
        padding: 14px 4px 10px;
    }
    .tsb-tabs::before,
    .tsb-tabs::after { top: calc(14px + var(--tsb-step-size) / 2 - 1px); }
    .tsb-tab { min-width: 78px; }
    .tsb-tab-num { width: 26px; height: 26px; }
    .tsb-tab-label { font-size: 11px; max-width: 84px; }
}
@media (min-width: 1024px) {
    .tsb-tabs { --tsb-step-size: 32px; }
    .tsb-tab-num { width: 32px; height: 32px; }
}

/* ============================================================
 * 8. Panels
 * ============================================================ */
.tsb-panel {
    display: none;
    background: var(--tsb-card-bg);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    padding: 16px;
    box-shadow: var(--tsb-shadow-sm);
    scroll-margin-top: calc(var(--tsb-sticky-top, 0px) + 80px);
}
.tsb-panel.is-active { display: block; }

@media (min-width: 768px) {
    .tsb-panel { padding: 24px; }
}

/* ============================================================
 * 9. Groups
 * ============================================================ */
.tsb-group {
    border: 0;
    padding: 0;
    margin: 0 0 28px;
}
.tsb-group:last-child { margin-bottom: 4px; }
.tsb-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 17px;
    font-weight: 700;
    color: var(--tsb-heading, var(--tsb-dark)) !important;
    margin-bottom: 6px;
    padding: 0;
    letter-spacing: -0.005em;
}
.tsb-required-marker { color: #c0392b; font-weight: 800; }
.tsb-locked-pill {
    background: var(--tsb-light);
    color: var(--tsb-muted);
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}
.tsb-group-help {
    margin: 0 0 12px;
    color: var(--tsb-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

/* ============================================================
 * 10. Choices (radio / checkbox / dropdown / swatch / image)
 * ============================================================ */
.tsb-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tsb-density-gap);
}
.tsb-choices-dropdown { display: block; }

/* Custom chevron applied to every <select> in the configurator (1.8.0).
   Uses a single inline SVG so it inherits text color and stays crisp. */
.tsb-builder select.tsb-dropdown,
.tsb-builder select.tsb-size-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%23222' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 8px;
    padding-right: 36px;
}

.tsb-dropdown {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-btn);
    font-size: 16px;
    background-color: var(--tsb-card-bg);
    color: var(--tsb-dark);
    transition: border-color var(--tsb-dur-fast) var(--tsb-ease-out), box-shadow var(--tsb-dur-fast) var(--tsb-ease-out);
}
.tsb-dropdown:hover { border-color: color-mix(in srgb, var(--tsb-hover, var(--tsb-primary)) 35%, var(--tsb-border)); }
.tsb-dropdown:focus { outline: none; border-color: var(--tsb-primary); box-shadow: var(--tsb-focus-ring); }

.tsb-choice {
    display: flex;
    gap: 14px;
    background: var(--tsb-card-bg);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    padding: 16px 16px 16px 18px;
    cursor: pointer;
    transition:
        border-color var(--tsb-dur-base) var(--tsb-ease-out),
        box-shadow var(--tsb-dur-base) var(--tsb-ease-out),
        transform var(--tsb-dur-base) var(--tsb-ease-out),
        background-color var(--tsb-dur-base) var(--tsb-ease-out);
    min-height: 64px;
    position: relative;
    overflow: hidden;
}
/* 2.3.0 / 2.10.1: choice cards with an info (i) icon must let the popup
   escape above the card border. Swatch cards already needed this; addon
   and package cards do too. Lift z-index while open so sibling cards don't
   cover the popup. */
.tsb-choice:has(.tsb-image-hint),
.tsb-choice.tsb-choice-swatch {
    overflow: visible;
}
.tsb-choice:has(.tsb-image-hint.is-open),
.tsb-choice:has(.tsb-image-hint:focus-within) {
    z-index: 25;
}

/* Signature left-edge accent strip (1.8.0) — invisible by default,
   slides in from the top when the card is selected. */
.tsb-choice::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tsb-primary);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform var(--tsb-dur-base) var(--tsb-ease-spring);
    border-top-left-radius: var(--tsb-radius-card);
    border-bottom-left-radius: var(--tsb-radius-card);
}
/* 1.11.1: hover ring is `!important` on border-color + box-shadow only so
   theme rules like `.entry-content .tsb-choice:hover { border-color: ... }`
   can't undo it. The background tint stays normal-priority — themes rarely
   touch it and we don't need to win that fight. */
.tsb-builder .tsb-choice:hover {
    border-color: color-mix(in srgb, var(--tsb-hover, var(--tsb-primary)) 40%, var(--tsb-border)) !important;
    background: color-mix(in srgb, var(--tsb-hover, var(--tsb-primary)) 4%, var(--tsb-card-bg));
    box-shadow: var(--tsb-shadow-sm) !important;
    transform: translateY(-1px);
}
.tsb-choice:focus-within { outline: none; box-shadow: var(--tsb-focus-ring); border-color: var(--tsb-primary); }

/* Custom radio/checkbox visual (1.8.0) — keep the native input for a11y,
   hide it visually, draw our own circle/square with an animated check. */
.tsb-choice input[type="radio"],
.tsb-choice input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 2px 0 0;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--tsb-border-strong);
    background: var(--tsb-card-bg);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition:
        border-color var(--tsb-dur-fast) var(--tsb-ease-out),
        background-color var(--tsb-dur-fast) var(--tsb-ease-out),
        box-shadow var(--tsb-dur-fast) var(--tsb-ease-out);
}
.tsb-choice input[type="checkbox"] { border-radius: 5px; }

.tsb-choice input[type="radio"]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--tsb-card-bg);
    transform: scale(0);
    transition: transform var(--tsb-dur-base) var(--tsb-ease-spring);
}
.tsb-choice input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--tsb-card-bg);
    border-bottom: 2px solid var(--tsb-card-bg);
    transform: translateY(-1px) rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform var(--tsb-dur-base) var(--tsb-ease-spring);
}
.tsb-choice input:checked {
    border-color: var(--tsb-primary);
    background: var(--tsb-primary);
}
.tsb-choice input[type="radio"]:checked::after { transform: scale(1); }
.tsb-choice input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.tsb-choice input:focus-visible {
    outline: none;
    box-shadow: var(--tsb-focus-ring);
}

.tsb-choice-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tsb-choice-name {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.tsb-choice-price {
    color: var(--tsb-primary);
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--tsb-primary) 8%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.tsb-choice-desc { font-size: 13.5px; color: var(--tsb-muted); line-height: 1.45; }
.tsb-price-disclaimer { display: block; margin-top: 4px; font-style: italic; }

/* Selected-state variants (driven by .tsb-cards-selected-* on the wrapper).
   1.8.0: every variant now also reveals the left-edge accent strip. */
.tsb-choice.is-selected::before { transform: scaleY(1); }

.tsb-cards-selected-outline .tsb-choice.is-selected,
.tsb-builder .tsb-choice.is-selected {
    border-color: var(--tsb-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tsb-primary) 18%, transparent);
}
.tsb-cards-selected-filled .tsb-choice.is-selected {
    border-color: var(--tsb-primary);
    background: color-mix(in srgb, var(--tsb-primary) 6%, var(--tsb-card-bg));
    box-shadow: none;
}
.tsb-cards-selected-lifted .tsb-choice.is-selected {
    border-color: var(--tsb-primary);
    box-shadow: var(--tsb-shadow-md);
    transform: translateY(-2px);
}

/* Locked / disabled cards */
.tsb-choice.is-locked {
    background: var(--tsb-surface);
    border-color: var(--tsb-border);
    cursor: not-allowed;
    opacity: .72;
    filter: grayscale(.25);
}
.tsb-choice.is-locked:has(input[type="radio"]:not([disabled])) {
    cursor: pointer;
    opacity: .88;
}
.tsb-choice.is-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--tsb-border);
}
.tsb-choice.is-locked .tsb-choice-name,
.tsb-choice.is-locked .tsb-choice-price { color: var(--tsb-muted); }

.tsb-locked-text {
    font-size: 11px;
    color: var(--tsb-muted-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}
.tsb-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tsb-light);
    color: var(--tsb-dark);
    font-size: 12px;
    font-weight: 700;
    cursor: help;
}
.tsb-learn-more { margin-top: 4px; font-size: 13px; }
.tsb-learn-more summary { cursor: pointer; color: var(--tsb-primary); padding: 4px 0; min-height: 24px; }
.tsb-learn-more summary:focus-visible { outline: none; box-shadow: var(--tsb-focus-ring); border-radius: var(--tsb-radius-btn); }

@media (min-width: 640px) {
    .tsb-choices { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .tsb-choices { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ============================================================
 * 11. Quantity controls
 * ============================================================ */
.tsb-qty-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tsb-qty-label { font-size: 12px; color: var(--tsb-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tsb-qty-input {
    margin-left: 4px;
    width: 84px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-btn);
    font-size: 16px;
    background: #fff;
}
.tsb-qty-input:focus { outline: none; border-color: var(--tsb-primary); box-shadow: var(--tsb-focus-ring); }

/* ============================================================
 * 12. Color swatch + image-card variants
 * ============================================================ */
.tsb-choices-swatch .tsb-choice {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    min-height: 88px;
}
.tsb-choices-swatch .tsb-choice input { position: absolute; opacity: 0; pointer-events: none; }
.tsb-swatch {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--tsb-border), var(--tsb-shadow-sm);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* When a Featured Image is set on the paint, the swatch becomes a circular
   crop of that image (perfect for metallics / multi-tones / woodgrain).
   When not set, the hex color fills the swatch as before. (1.10.2/2.2.0) */
.tsb-swatch.has-image {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--tsb-border), 0 4px 10px rgba(0,0,0,.10);
}
.tsb-choices-swatch .tsb-choice.is-selected .tsb-swatch {
    box-shadow: 0 0 0 3px var(--tsb-primary);
}
.tsb-choices-swatch .tsb-choice.is-selected .tsb-swatch.has-image {
    box-shadow: 0 0 0 3px var(--tsb-primary), 0 6px 14px rgba(0,0,0,.12);
}

.tsb-choice-image .tsb-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-position: center;
    background-size: cover;
    background-color: var(--tsb-light);
    border-radius: calc(var(--tsb-radius-card) - 2px);
}
.tsb-choices-image-card .tsb-choice {
    flex-direction: column;
    align-items: stretch;
}

/* ============================================================
 * 13. Panel nav + buttons
 * ============================================================ */
.tsb-panel-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 24px;
    border-top: 1px solid var(--tsb-border);
    padding-top: 16px;
}
.tsb-panel-nav-spacer {
    flex: 0 0 88px;
    min-width: 0;
}
.tsb-panel-nav-total {
    flex: 1 1 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 120px;
}
.tsb-panel-nav-total-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tsb-muted);
}
.tsb-panel-nav-total strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--tsb-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
@media (max-width: 479px) {
    .tsb-panel-nav-total-label { display: none; }
    .tsb-panel-nav-total strong { font-size: 16px; }
}
.tsb-btn {
    background: var(--tsb-primary);
    color: #fff;
    border: 0;
    padding: 12px 20px;
    border-radius: var(--tsb-radius-btn);
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    transition:
        background-color var(--tsb-dur-fast) var(--tsb-ease-out),
        color var(--tsb-dur-fast) var(--tsb-ease-out),
        box-shadow var(--tsb-dur-base) var(--tsb-ease-out),
        transform var(--tsb-dur-fast) var(--tsb-ease-spring);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.tsb-btn:hover { filter: brightness(.96); box-shadow: var(--tsb-shadow-sm); }
.tsb-btn:active { transform: scale(.97); }
.tsb-btn:focus-visible { outline: none; box-shadow: var(--tsb-focus-ring); }

/* Material-style ripple injected by JS at click coordinates (1.8.0). */
.tsb-btn .tsb-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .25;
    transform: scale(0);
    animation: tsb-ripple-go 520ms var(--tsb-ease-out) forwards;
}
.tsb-btn-secondary .tsb-ripple { opacity: .12; }
@keyframes tsb-ripple-go {
    to { transform: scale(2.4); opacity: 0; }
}
.tsb-btn-secondary {
    background: var(--tsb-card-bg);
    color: var(--tsb-dark);
    border: 1px solid var(--tsb-border);
}
.tsb-btn-secondary:hover {
    background: var(--tsb-surface);
    border-color: var(--tsb-border-strong);
    filter: none;
}
.tsb-btn-submit {
    padding: 14px 24px;
    font-size: 16px;
    min-height: 48px;
}

.tsb-btn-sm { padding: 8px 14px; font-size: 13px; min-height: 40px; }
.tsb-btn-xs { padding: 6px 12px; font-size: 12px; min-height: 36px; }
.tsb-btn-danger { color: #c0392b; border-color: #f0b8b8; background: var(--tsb-card-bg); }
.tsb-btn-danger:hover { background: #fde7e7; filter: none; }

/* ============================================================
 * 14. Review
 * ============================================================ */
.tsb-review-title { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--tsb-heading, var(--tsb-dark)) !important; }
.tsb-review-intro { color: var(--tsb-muted); }
.tsb-review-body {
    background: var(--tsb-surface);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    padding: 16px;
    margin-top: 12px;
}
.tsb-review-section { margin-bottom: 20px; }
.tsb-review-section:last-child { margin-bottom: 0; }
.tsb-review-section h4 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tsb-primary);
    font-weight: 800;
}
.tsb-review-table { width: 100%; border-collapse: collapse; }
.tsb-review-table th,
.tsb-review-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--tsb-border);
    font-size: 14px;
}
.tsb-review-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin-bottom: 14px;
}
.tsb-review-meta div strong {
    display: block;
    font-size: 11px;
    color: var(--tsb-muted-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
    font-weight: 700;
}
.tsb-review-total {
    font-size: 18px;
    font-weight: 800;
    text-align: right;
    padding: 14px 0 0;
    border-top: 2px solid var(--tsb-dark);
    margin-top: 8px;
}
.tsb-review-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

@media (min-width: 640px) {
    .tsb-review-meta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 24px; }
}

/* ============================================================
 * 15. Send Request form
 * ============================================================ */
.tsb-send-title { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--tsb-heading, var(--tsb-dark)) !important; }
.tsb-field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.tsb-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.tsb-field label {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.01em;
}
.tsb-field label .tsb-required-marker {
    margin-left: 4px;
}
.tsb-field input,
.tsb-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-btn);
    /* Min 16px prevents iOS Safari from zooming on focus. */
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    color: var(--tsb-dark);
    min-height: 44px;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}
.tsb-field textarea { min-height: 120px; resize: vertical; }
.tsb-field input:focus,
.tsb-field textarea:focus {
    outline: none;
    border-color: var(--tsb-primary);
    box-shadow: var(--tsb-focus-ring);
}
.tsb-field input.tsb-error,
.tsb-field textarea.tsb-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}
.tsb-consent-label {
    font-weight: 400;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    min-height: 44px;
    line-height: 1.45;
    font-size: 14px;
}
.tsb-consent-label.tsb-error .tsb-consent-lead {
    color: #c0392b;
}
.tsb-consent-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tsb-consent-lead {
    font-size: 14px;
    line-height: 1.45;
}
.tsb-consent-fine-print {
    font-size: 12px;
    line-height: 1.4;
    color: var(--tsb-muted, #6b7280);
}
.tsb-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--tsb-primary);
}

.tsb-form-messages:empty { display: none; }
.tsb-form-messages {
    padding: 12px 14px;
    border-radius: var(--tsb-radius-btn);
    margin: 12px 0;
    font-size: 14px;
    border: 1px solid transparent;
}
.tsb-form-messages.is-success { background: #e3f7e8; border-color: #b9e3c2; color: #1e6b32; }
.tsb-form-messages.is-error   { background: #fde7e7; border-color: #f0b8b8; color: #8a1e1e; }

.tsb-send-actions { margin-top: 16px; }

.tsb-loading { padding: 32px; text-align: center; color: var(--tsb-muted); }

@media (min-width: 640px) {
    .tsb-field-row { grid-template-columns: 1fr 1fr; gap: 14px; }
    .tsb-field input,
    .tsb-field textarea { padding: 12px 14px; }
}

/* ============================================================
 * 16. Series-mode sections (1.1.0+)
 * ============================================================ */
.tsb-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tsb-border);
}
.tsb-section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.tsb-section-title {
    margin: 0 0 8px;
    font-size: var(--tsb-font-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* 1.11.1: previously fell back to --tsb-muted, which made the Heading
       Color setting only "stick" when the admin explicitly set it. Now it
       falls back to --tsb-dark like every other prominent heading so the
       admin's choice (or its absence) is consistent across the configurator. */
    color: var(--tsb-heading, var(--tsb-dark)) !important;
}
.tsb-section-intro { color: var(--tsb-muted); margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; }

/* ----- Standard Build "spec sheet" card (1.7.1) ----- */
.tsb-section-standard { padding-bottom: 0; border-bottom: 0; }

.tsb-spec-card {
    position: relative;
    background: var(--tsb-card-bg);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    box-shadow: var(--tsb-shadow-sm);
    overflow: hidden;
    margin-bottom: 24px;
    isolation: isolate;
}

/* Standard Build watermark (1.10.0). The CSS variables are emitted by
   TSB_Frontend::inline_colors_css() only when an attachment is set, so
   this rule no-ops cleanly when --tsb-standard-logo-url is missing. */
.tsb-spec-card.has-watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--tsb-standard-logo-url, none);
    background-position: var(--tsb-standard-logo-position, center center);
    background-size: var(--tsb-standard-logo-size, 60% auto);
    background-repeat: var(--tsb-standard-logo-repeat, no-repeat);
    opacity: var(--tsb-standard-logo-opacity, 0.08);
    mix-blend-mode: multiply;
}
.tsb-spec-card .tsb-spec-card-head,
.tsb-spec-card .tsb-spec-list,
.tsb-spec-card .tsb-spec-row { position: relative; z-index: 1; }
/* Rows on the watermarked card need a translucent surface so the brand mark
   reads through the alternating zebra stripes without losing contrast. */
.tsb-spec-card.has-watermark .tsb-spec-row { background: transparent; }
.tsb-spec-card.has-watermark .tsb-spec-row:nth-child(even) { background: color-mix(in srgb, var(--tsb-light) 18%, transparent); }
.tsb-spec-card.has-watermark .tsb-spec-row:hover { background: color-mix(in srgb, var(--tsb-hover, var(--tsb-primary)) 6%, var(--tsb-card-bg) 94%); }

.tsb-spec-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--tsb-light) 0%, color-mix(in srgb, var(--tsb-light) 80%, #fff 20%) 100%);
    border-bottom: 1px solid var(--tsb-border);
}
.tsb-spec-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tsb-heading, var(--tsb-dark)) !important;
}
.tsb-spec-card-subtitle {
    font-size: 13px;
    color: var(--tsb-muted);
    font-weight: 600;
}

.tsb-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tsb-spec-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--tsb-border);
    font-size: 14px;
    line-height: 1.45;
    background: var(--tsb-card-bg);
    transition: background-color .15s ease;
}
.tsb-spec-row:first-child { border-top: 0; }
.tsb-spec-row:nth-child(even) { background: color-mix(in srgb, var(--tsb-light) 35%, var(--tsb-card-bg) 65%); }
.tsb-spec-row:hover { background: color-mix(in srgb, var(--tsb-hover, var(--tsb-primary)) 6%, var(--tsb-card-bg) 94%); }

.tsb-spec-key {
    font-weight: 700;
    color: var(--tsb-heading, var(--tsb-dark)) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
}
.tsb-spec-val {
    color: var(--tsb-dark);
    font-size: 14px;
    word-break: break-word;
}
.tsb-spec-hint {
    display: inline-flex;
    align-items: center;
    justify-self: end;
}
.tsb-spec-card:has(.tsb-image-hint.is-open),
.tsb-spec-card:has(.tsb-image-hint:focus-within) {
    overflow: visible;
}
.tsb-spec-row:has(.tsb-image-hint.is-open),
.tsb-spec-row:has(.tsb-image-hint:focus-within) {
    z-index: 25;
}

@media (max-width: 559px) {
    .tsb-spec-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 2px;
    }
    .tsb-spec-key { grid-column: 1 / 2; grid-row: 1; }
    .tsb-spec-val { grid-column: 1 / 2; grid-row: 2; font-size: 14px; }
    .tsb-spec-hint { grid-column: 2 / 3; grid-row: 1 / span 2; align-self: center; }
}
@media (min-width: 768px) {
    .tsb-spec-row { grid-template-columns: 160px 1fr auto; padding: 13px 22px; }
    .tsb-spec-card-head { padding: 16px 22px; }
}

/* ----- Top-of-configurator Size picker (2.6.1) -----
   Sits between the MSRP bar and the Save Builds toolbar so customers pick
   the size they're configuring before tabbing through the steps. The bar
   above it shows the live price for the selected size, so the two read as
   one connected unit. Stacks on mobile, goes side-by-side on tablet+. */
.tsb-size-pick {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
    background: var(--tsb-card-bg);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    border-top-left-radius: 4px;          /* visually "tucks under" the MSRP bar */
    border-top-right-radius: 4px;
    box-shadow: var(--tsb-shadow-sm);
}
.tsb-size-pick-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    min-width: 0;
}
.tsb-size-pick-eyebrow {
    font-size: var(--tsb-font-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tsb-heading, var(--tsb-dark)) !important;
}
.tsb-size-pick-help {
    font-size: 12.5px;
    color: var(--tsb-muted);
    line-height: 1.4;
}
.tsb-size-pick .tsb-size-select,
.tsb-size-pick .tsb-series-size-select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--tsb-border-strong);
    border-radius: var(--tsb-radius-btn);
    font-size: 16px;
    font-weight: 600;
    background: var(--tsb-card-bg);
    color: var(--tsb-dark);
}
.tsb-size-pick .tsb-size-select:focus,
.tsb-size-pick .tsb-series-size-select:focus {
    outline: none;
    border-color: var(--tsb-primary);
    box-shadow: var(--tsb-focus-ring);
}
@media (min-width: 768px) {
    .tsb-size-pick {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }
    .tsb-size-pick-label { flex: 1 1 auto; }
    .tsb-size-pick .tsb-size-select,
    .tsb-size-pick .tsb-series-size-select { flex: 0 0 320px; }
}

/* ----- Pick card (Size selector, used elsewhere) (1.7.1) ----- */
.tsb-pick-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--tsb-card-bg);
    border: 1px solid var(--tsb-border);
    border-left: 4px solid var(--tsb-primary);
    border-radius: var(--tsb-radius-card);
    box-shadow: var(--tsb-shadow-sm);
}
.tsb-pick-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tsb-pick-card-title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tsb-heading, var(--tsb-dark)) !important;
}
.tsb-pick-card-intro { margin: 0; font-size: 13px; color: var(--tsb-muted); line-height: 1.4; }
.tsb-pick-card-control select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-btn);
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    color: var(--tsb-dark);
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--tsb-dark) 50%), linear-gradient(135deg, var(--tsb-dark) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}
.tsb-pick-card-control select:focus {
    outline: none;
    border-color: var(--tsb-primary);
    box-shadow: var(--tsb-focus-ring);
}
@media (min-width: 768px) {
    .tsb-pick-card { flex-direction: row; align-items: center; gap: 24px; }
    .tsb-pick-card-text { flex: 1; }
    .tsb-pick-card-control { flex: 0 0 320px; }
}
.tsb-section-size { padding-bottom: 0; border-bottom: 0; }

/* Legacy .tsb-features-list / .tsb-feature classes kept for any
   stale-cached output; they fall back to a clean line-item style. */
.tsb-features-list { list-style: none; margin: 0; padding: 0; }
.tsb-feature {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--tsb-border);
    font-size: 14px;
}
.tsb-feature:first-child { border-top: 0; }
.tsb-feature-name { font-weight: 700; color: var(--tsb-heading, var(--tsb-dark)); }
.tsb-feature-value { color: var(--tsb-muted); flex: 1; min-width: 0; }

.tsb-group.tsb-error { border: 1px solid #c0392b; padding: 8px; border-radius: var(--tsb-radius-btn); }


/* ============================================================
 * 17. "Learn More" info popup (1.2.0 → richened in 1.6.0)
 *
 * The trigger element (.tsb-image-hint) is the same small circular icon
 * used since 1.2.0. The popup it opens (.tsb-image-popup / .tsb-info-popup)
 * is now a richer card with optional image, optional Price line, optional
 * uppercase "LEARN MORE" link, and a small × close button.
 * ============================================================ */
.tsb-image-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    border: 1px solid var(--tsb-border);
    background: var(--tsb-card-bg);
    color: var(--tsb-primary);
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .12s, border-color .12s, color .12s, transform .12s;
    flex: 0 0 auto;
}
.tsb-image-hint:hover,
.tsb-image-hint:focus,
.tsb-image-hint.is-open {
    outline: none;
    background: var(--tsb-hover, var(--tsb-primary));
    border-color: var(--tsb-hover, var(--tsb-primary));
    color: #fff;
    transform: scale(1.05);
}
.tsb-image-hint:focus-visible {
    box-shadow: var(--tsb-focus-ring);
}
.tsb-image-hint-icon { display: inline-flex; }
.tsb-image-hint-icon svg { display: block; width: 18px; height: 18px; }

.tsb-image-popup {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    max-width: min(260px, 80vw);
    padding: 14px;
    background: #fff;
    color: var(--tsb-dark);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    /* 2.3.0: bumped z-index so the popup floats above sibling cards, the
       progress trail line, and any sticky chrome (the MSRP bar uses z-index 5,
       the stepper sits below ~10). */
    z-index: 60;
    display: none;
    cursor: default;
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
}
/* The .tsb-image-hint trigger needs to escape any clipped ancestor too — when
   it's inside a clipped card variant, force the popup into a stacking context
   that ignores siblings. */
.tsb-image-hint.is-open,
.tsb-image-hint:hover,
.tsb-image-hint:focus,
.tsb-image-hint:focus-within { z-index: 70; }
.tsb-image-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: #fff;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.10));
}
.tsb-image-hint:hover .tsb-image-popup,
.tsb-image-hint:focus .tsb-image-popup,
.tsb-image-hint:focus-within .tsb-image-popup,
.tsb-image-hint.is-open .tsb-image-popup {
    display: block;
}
.tsb-image-hint,
.tsb-image-popup,
.tsb-image-popup * { pointer-events: auto; }

/* --- Rich popup card layout (1.6.0) --- */
.tsb-info-popup-media {
    display: block;
    width: 100%;
    max-height: 120px;
    margin: 0 0 10px;
    background: var(--tsb-light);
    border-radius: calc(var(--tsb-radius-card) - 2px);
    overflow: hidden;
}
.tsb-info-popup-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 0;
}
.tsb-info-popup-price {
    display: block;
    margin: 0 0 10px;
    color: var(--tsb-dark);
    font-size: 14px;
}
.tsb-info-popup-price strong { font-weight: 700; margin-right: 4px; }
.tsb-info-popup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}
.tsb-info-popup-link {
    display: inline-block;
    color: var(--tsb-primary);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
}
.tsb-info-popup-link:hover,
.tsb-info-popup-link:focus { text-decoration: underline; }
.tsb-info-popup-link-spacer { flex: 1 1 auto; }
.tsb-info-popup-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tsb-dark);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s;
}
.tsb-info-popup-close:hover,
.tsb-info-popup-close:focus { background: var(--tsb-light); outline: none; }

/* Optional "Learn more" link rendered next to wheel cards (image already
 * shown inline, no popup needed). */
.tsb-wheel-learn-more {
    display: inline-block;
    margin-top: 6px;
    color: var(--tsb-primary);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}
.tsb-wheel-learn-more:hover,
.tsb-wheel-learn-more:focus { text-decoration: underline; }

@media (min-width: 768px) {
    .tsb-image-hint { width: 26px; height: 26px; }
    .tsb-image-hint-icon svg { width: 14px; height: 14px; }
}
@media (max-width: 639px) {
    .tsb-image-popup {
        width: min(220px, 80vw);
        max-width: 80vw;
    }
}

/* ============================================================
 * 17b. Custom Packages (1.5.0)
 * ============================================================ */
.tsb-group-package .tsb-choices-packages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 768px) {
    .tsb-group-package .tsb-choices-packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .tsb-group-package .tsb-choices-packages {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tsb-choice-package {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    background: var(--tsb-card-bg, #fff);
}
.tsb-choice-package input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tsb-choice-package .tsb-package-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--tsb-light);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.tsb-choice-package .tsb-choice-body {
    padding: 14px;
    gap: 8px;
}
.tsb-choice-package .tsb-choice-name {
    font-size: 16px;
    font-weight: 700;
}
.tsb-choice-package .tsb-choice-desc {
    color: #444;
}
.tsb-package-items {
    list-style: none;
    margin: 4px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed var(--tsb-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #333;
}
.tsb-package-items li {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}
.tsb-package-items li::before {
    content: "✓";
    color: var(--tsb-primary);
    font-weight: 700;
    flex: 0 0 auto;
}

.tsb-choice-no-package {
    background: transparent;
    border-style: dashed;
}
.tsb-choice-no-package .tsb-choice-body { padding: 14px; }
.tsb-choice-no-package .tsb-choice-name { font-weight: 600; }

/* ============================================================
 * 18. Save / Compare Builds (1.3.0)
 * ============================================================ */
.tsb-builds-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -4px 0 16px;
}

.tsb-builds-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--tsb-primary);
    color: #fff;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    font-weight: 800;
    vertical-align: middle;
}
.tsb-builds-count.is-empty { background: var(--tsb-muted-soft); }

/* Drawer wrapper covers the viewport; the actual panel animates in.
 * Mobile: bottom sheet. Tablet+: right-side drawer. */
.tsb-builds-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
}
.tsb-builds-drawer[hidden] { display: none; }
.tsb-builds-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.tsb-builds-panel {
    position: relative;
    width: 100%;
    height: 85vh;
    background: var(--tsb-card-bg);
    box-shadow: 0 -12px 32px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    animation: tsb-sheet-up 0.22s ease-out;
}
@keyframes tsb-sheet-up {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
@keyframes tsb-slide-in {
    from { transform: translateX(28px); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

.tsb-builds-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--tsb-border);
    background: var(--tsb-light);
    position: relative;
}
.tsb-builds-head::before {
    /* Drag-handle affordance on the mobile bottom sheet. */
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,.14);
}
.tsb-builds-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.tsb-builds-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--tsb-muted);
    padding: 8px 10px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tsb-radius-btn);
}
.tsb-builds-close:hover { color: var(--tsb-dark); background: rgba(0,0,0,.05); }
.tsb-builds-close:focus-visible { outline: none; box-shadow: var(--tsb-focus-ring); }
.tsb-builds-help {
    margin: 12px 18px 0;
    color: var(--tsb-muted);
    font-size: 13px;
    line-height: 1.45;
}
.tsb-builds-actions { padding: 12px 18px; border-bottom: 1px solid var(--tsb-border); display: flex; flex-wrap: wrap; gap: 8px; }
.tsb-builds-grid { padding: 14px 18px 24px; overflow: auto; flex: 1; -webkit-overflow-scrolling: touch; }

/* Tablet/desktop: right-side drawer */
@media (min-width: 768px) {
    .tsb-builds-drawer {
        align-items: stretch;
        justify-content: flex-end;
    }
    .tsb-builds-panel {
        width: min(960px, 100%);
        height: 100%;
        border-radius: 0;
        box-shadow: -8px 0 28px rgba(0,0,0,0.18);
        animation: tsb-slide-in 0.18s ease-out;
    }
    .tsb-builds-head::before { display: none; }
}

/* Comparison table */
.tsb-builds-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    background: var(--tsb-card-bg);
}
.tsb-builds-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: 560px;
}
.tsb-builds-table th,
.tsb-builds-table td {
    border-bottom: 1px solid var(--tsb-border);
    padding: 12px 14px;
    vertical-align: top;
    text-align: left;
    min-width: 180px;
}
.tsb-builds-table thead th {
    background: var(--tsb-light);
    color: var(--tsb-dark);
    font-weight: 800;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tsb-builds-table tbody th {
    background: var(--tsb-surface);
    width: 140px;
    min-width: 140px;
    font-weight: 700;
    color: var(--tsb-muted);
    /* Sticky first column on horizontal scroll */
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--tsb-border);
}
.tsb-builds-table tbody tr:nth-child(odd) td { background: var(--tsb-card-bg); }
.tsb-builds-table tbody tr:nth-child(even) td { background: var(--tsb-surface); }
.tsb-builds-table .tsb-builds-total-row th,
.tsb-builds-table .tsb-builds-total-row td {
    background: var(--tsb-dark) !important;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.tsb-build-name { font-weight: 800; font-size: 15px; }
.tsb-build-meta { color: var(--tsb-muted); font-size: 12px; margin-top: 2px; }
.tsb-build-actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

@media (min-width: 768px) {
    .tsb-builds-table tbody th { width: 180px; min-width: 180px; }
    .tsb-builds-table th,
    .tsb-builds-table td { min-width: 200px; }
}

/* ============================================================
 * 18.5 Siding Options cards (1.7.0)
 *
 * Each siding renders inside a regular .tsb-group fieldset with an extra
 * .tsb-choice-siding hook so we can stack a header image, marketing copy, a
 * dropdown of priced variants, and a conditional disclosure box without
 * touching the existing add-on group layout.
 * ============================================================ */
.tsb-choice-siding {
    padding: var(--tsb-density-pad);
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    background: var(--tsb-card-bg);
    box-shadow: var(--tsb-shadow-sm);
    margin-bottom: var(--tsb-density-gap);
}
.tsb-choice-siding.is-locked { opacity: .75; }
.tsb-siding-image {
    display: block;
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: var(--tsb-radius-card);
    margin: 6px 0 10px;
}
.tsb-siding-select {
    width: 100%;
    margin-top: 6px;
}

.tsb-siding-notice {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--tsb-primary);
    background: var(--tsb-light);
    color: var(--tsb-dark);
    border-radius: var(--tsb-radius-card);
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.tsb-siding-notice::before { content: "⚠"; font-weight: 700; color: var(--tsb-primary); }
.tsb-siding-notice[hidden] { display: none; }

/* Nested metal sidings inside the SIDES add-on group (Bobcat series). */
.tsb-group-sides-integrated .tsb-sides-metal-options {
    margin-top: var(--tsb-density-gap);
    padding-top: var(--tsb-density-gap);
    border-top: 1px solid var(--tsb-border);
}
.tsb-group-sides-integrated .tsb-sides-siding-item {
    margin-bottom: var(--tsb-density-gap);
    box-shadow: none;
}
.tsb-group-sides-integrated .tsb-sides-siding-item:last-child {
    margin-bottom: 0;
}
.tsb-sides-siding-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
 * 19. Print
 * ============================================================ */
@media print {
    .tsb-tabs,
    .tsb-panel-nav,
    .tsb-review-actions,
    .tsb-back-btn,
    .tsb-step-header,
    .tsb-builds-toolbar,
    .tsb-builds-drawer,
    .tsb-price-footer,
    .tsb-price-sheet,
    .tsb-price-toast-region,
    .tsb-price-sidebar,
    .tsb-msrp-breakdown-toggle,
    .tsb-panel-nav-total { display: none !important; }
    .tsb-panel { display: block !important; border: 0; box-shadow: none; padding: 0; }
    .tsb-builder { max-width: none; padding: 0; }
    .tsb-msrp-bar { background: none; color: #000; box-shadow: none; border: 1px solid #999; }
    .tsb-msrp-bar .tsb-base-msrp,
    .tsb-msrp-bar .tsb-total-msrp,
    .tsb-msrp-bar .tsb-total-msrp strong { color: #000; }
}

/* ============================================================
 * 18. Paint color chart shortcode ([tsb_paint_colors])
 * ============================================================ */
.tsb-paint-colors-chart {
    max-width: 920px;
    margin: 0 auto;
    padding: 8px 0 24px;
    font-family: var(--tsb-font, inherit);
    color: var(--tsb-text, #111);
}

.tsb-paint-colors-chart-header {
    text-align: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 3px solid #111;
}

.tsb-paint-colors-chart-title-top,
.tsb-paint-colors-chart-title-bottom {
    margin: 0;
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.05;
    color: #111;
}

.tsb-paint-colors-chart-title-top {
    font-size: clamp(2rem, 5vw, 3.4rem);
}

.tsb-paint-colors-chart-title-bottom {
    margin-top: 4px;
    font-size: clamp(1.35rem, 3.2vw, 2rem);
}

.tsb-paint-colors-chart-grid {
    display: grid;
    grid-template-columns: repeat(var(--tsb-paint-chart-columns, 5), minmax(0, 1fr));
    gap: 22px 18px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.tsb-paint-colors-chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.tsb-paint-colors-chart-swatch-wrap {
    position: relative;
    width: 100%;
}

.tsb-paint-colors-chart-swatch {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 72px;
    border: 2px solid #c8c8c8;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.tsb-paint-colors-chart-swatch-color {
    position: absolute;
    inset: 0;
    display: block;
    background: inherit;
}

/* Compact (i) button on the swatch corner */
.tsb-paint-colors-chart .tsb-image-hint {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 30px;
    height: 30px;
    margin: 0;
    z-index: 3;
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.tsb-paint-colors-chart .tsb-image-hint-icon svg {
    width: 14px;
    height: 14px;
}

.tsb-paint-colors-chart .tsb-image-popup {
    width: min(280px, 88vw);
    padding: 12px;
}

.tsb-paint-colors-chart .tsb-info-popup-media {
    max-height: none;
    margin-bottom: 8px;
}

.tsb-paint-colors-chart .tsb-info-popup-media img {
    max-height: 240px;
    object-fit: cover;
}

.tsb-paint-colors-chart.has-open-popup::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99990;
    pointer-events: none;
}

.tsb-paint-colors-chart .tsb-image-hint.is-open {
    z-index: 100001;
}

.tsb-paint-colors-chart-label {
    display: block;
    font-size: clamp(0.72rem, 1.6vw, 0.95rem);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.15;
    color: #111;
}

.tsb-paint-colors-empty {
    text-align: center;
    color: var(--tsb-muted, #666);
    font-size: 1rem;
}

@media (max-width: 900px) {
    .tsb-paint-colors-chart-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 14px;
    }
}

@media (max-width: 520px) {
    .tsb-paint-colors-chart {
        padding-inline: 4px;
    }

    .tsb-paint-colors-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 10px;
    }

    .tsb-paint-colors-chart-swatch {
        min-height: 64px;
    }

    .tsb-paint-colors-chart .tsb-image-hint {
        width: 28px;
        height: 28px;
        right: 4px;
        bottom: 4px;
    }
}

@media (max-width: 767px) {
    .tsb-paint-colors-chart .tsb-image-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(92vw, 380px);
        max-width: 92vw;
        z-index: 100002;
    }

    .tsb-paint-colors-chart .tsb-image-popup::after {
        display: none;
    }

    .tsb-paint-colors-chart .tsb-info-popup-media img {
        max-height: min(56vh, 320px);
    }
}

@media (hover: none) {
    .tsb-paint-colors-chart .tsb-image-hint:hover .tsb-image-popup,
    .tsb-paint-colors-chart .tsb-image-hint:focus .tsb-image-popup,
    .tsb-paint-colors-chart .tsb-image-hint:focus-within .tsb-image-popup {
        display: none;
    }

    .tsb-paint-colors-chart .tsb-image-hint.is-open .tsb-image-popup {
        display: block;
    }
}

/* ============================================================
 * 19. Builder landing page ([tsb_builder_landing])
 * ============================================================ */
.tsb-builder-landing {
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 8px;
}

.tsb-landing-header {
    text-align: center;
    margin: 0 0 32px;
    padding: 0 8px;
}

.tsb-landing-headline {
    margin: 0 0 10px;
    font-size: clamp(1.85rem, 4.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--tsb-heading, var(--tsb-dark));
}

.tsb-landing-subhead {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.55;
    color: var(--tsb-muted, #555);
    max-width: 680px;
    margin-inline: auto;
}

.tsb-landing-grid {
    display: grid;
    grid-template-columns: repeat(var(--tsb-landing-columns, 4), minmax(0, 1fr));
    gap: 18px;
}

.tsb-landing-item {
    display: flex;
    min-height: 100%;
}

.tsb-landing-trigger {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    background: var(--tsb-card-bg);
    box-shadow: var(--tsb-shadow-sm);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tsb-landing-trigger:hover {
    transform: translateY(-4px);
    border-color: var(--tsb-hover, var(--tsb-primary));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.tsb-landing-item.is-selected .tsb-landing-trigger {
    border-color: var(--tsb-hover, var(--tsb-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsb-primary) 22%, transparent), 0 16px 36px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.tsb-landing-trigger:focus-visible {
    outline: none;
    box-shadow: var(--tsb-focus-ring);
}

.tsb-landing-trigger-media-wrap {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(145deg, var(--tsb-light) 0%, color-mix(in srgb, var(--tsb-primary) 8%, #fff) 100%);
}

.tsb-landing-trigger-media-img,
.tsb-landing-trigger-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.tsb-landing-trigger-media {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tsb-landing-trigger:hover .tsb-landing-trigger-media,
.tsb-landing-trigger:hover .tsb-landing-trigger-media-img,
.tsb-landing-item.is-selected .tsb-landing-trigger-media,
.tsb-landing-item.is-selected .tsb-landing-trigger-media-img {
    transform: scale(1.04);
}

.tsb-landing-trigger-media-fallback {
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--tsb-primary) 18%, transparent), transparent 55%),
        linear-gradient(160deg, var(--tsb-light), var(--tsb-card-bg));
}

.tsb-landing-trigger-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    padding: 14px 14px 16px;
    min-width: 0;
}

.tsb-landing-trigger-category {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tsb-primary);
}

.tsb-landing-trigger-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
    font-size: clamp(0.88rem, 1.25vw, 0.98rem);
    font-weight: 800;
    line-height: 1.25;
    word-break: break-word;
    hyphens: auto;
    color: var(--tsb-heading, var(--tsb-dark));
}

.tsb-landing-trigger-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 2.7em;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--tsb-muted, #666);
}

.tsb-landing-trigger-price {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--tsb-dark);
    margin-top: 2px;
}

.tsb-landing-trigger-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 10px 12px;
    border-radius: var(--tsb-radius-btn);
    background: var(--tsb-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color .18s ease;
}

.tsb-landing-trigger:hover .tsb-landing-trigger-action {
    background: var(--tsb-hover, var(--tsb-primary));
}

.tsb-landing-panel-host {
    margin-top: 24px;
    border: 1px solid var(--tsb-border);
    border-radius: var(--tsb-radius-card);
    background: var(--tsb-card-bg);
    box-shadow: var(--tsb-shadow-md);
    overflow: hidden;
    animation: tsbLandingPanelIn .28s ease;
}

.tsb-landing-panel-host.is-open {
    border-color: color-mix(in srgb, var(--tsb-primary) 35%, var(--tsb-border));
}

@keyframes tsbLandingPanelIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tsb-landing-panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tsb-border);
    background: color-mix(in srgb, var(--tsb-primary) 6%, var(--tsb-card-bg));
}

.tsb-landing-panel-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--tsb-heading, var(--tsb-dark));
}

.tsb-landing-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--tsb-border);
    border-radius: 999px;
    background: var(--tsb-card-bg);
    color: var(--tsb-dark);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.tsb-landing-panel-close:hover,
.tsb-landing-panel-close:focus-visible {
    border-color: var(--tsb-primary);
    color: var(--tsb-primary);
    outline: none;
}

.tsb-landing-panel-inner {
    padding: 12px 8px 16px;
}

.tsb-landing-panel-inner .tsb-configurator {
    max-width: none;
}

.tsb-landing-panel-inner .tsb-config-header,
.tsb-landing-panel-inner .tsb-config-image {
    display: none;
}

@media (max-width: 1100px) {
    .tsb-landing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .tsb-landing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 520px) {
    .tsb-landing-grid {
        grid-template-columns: 1fr;
    }

    .tsb-landing-trigger-body {
        padding: 12px;
    }

    .tsb-landing-panel-inner {
        padding: 8px 4px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tsb-landing-trigger,
    .tsb-landing-trigger-media,
    .tsb-landing-panel-host {
        transition: none;
        animation: none;
    }
}