/* ==========================================================================
   Section page (E1): exploded diagram + part list.
   Views: app/Views/wpc/section.php, app/Views/wpc/section/*. JS: assets/js/sp/section.js.
   Sticky offsets come from section.js: --sp-sec-bar (saved-car bar), --sp-sec-tools.
   ========================================================================== */

/* Diagram surface colours, sampled from the Saab WPC rasters. Candidate tokens for tokens.css. */
.sp-section { --sp-sec-bar: 0px; --sp-sec-tools: 0px; padding-bottom: var(--sp-section); }

/* --- Title ---------------------------------------------------------------- */
.sp-section-intro { padding: 24px 0 18px; }
.sp-section-title { font-size: var(--sp-fs-h2); line-height: 1.15; overflow-wrap: anywhere; }
.sp-section-remark { margin-top: 10px; font-size: var(--sp-fs-ui); color: var(--sp-ink-soft); }
.sp-section-line { display: block; overflow-wrap: anywhere; }

/* --- Layout --------------------------------------------------------------- */
.sp-section-bench { display: grid; grid-template-columns: minmax(0, 1fr); }
/* One column: tools and diagram join the bench so the tools can stick for the whole list. */
.sp-section-side { display: contents; }
.sp-section-tools {
    position: sticky; top: var(--sp-sec-bar); z-index: 12;
    display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
    padding: 8px 0 12px; background: var(--sp-paper);
}
.sp-section-stepper { display: inline-flex; gap: 4px; min-width: 0; }
.sp-section-change { min-height: 46px; padding: 0 16px; font-size: var(--sp-fs-body); }
.sp-section-change svg { width: 18px; height: 18px; }
.sp-section-step { width: 46px; min-height: 46px; padding: 0; }
.sp-section-step svg { width: 20px; height: 20px; }
.sp-section-tools .sp-segment[hidden] { display: none; }
.sp-section-tools .sp-segment svg { display: none; width: 20px; height: 20px; }

.sp-section-listhead {
    position: sticky; top: calc(var(--sp-sec-bar) + var(--sp-sec-tools)); z-index: 10;
    padding: 14px 0 12px; background: var(--sp-paper);
}

@media (min-width: 701px) {
    .sp-section-bench { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 36px; align-items: start; }
    .sp-section-side { display: block; align-self: stretch; }
    .sp-section.is-list .sp-section-side, .sp-section.is-no-diagram .sp-section-side { display: contents; }
    .sp-section-diagram { position: sticky; top: calc(var(--sp-sec-bar) + var(--sp-sec-tools) + 4px); }
    .sp-section-listhead { top: var(--sp-sec-bar); padding-top: 8px; }
    .sp-section-diagram .sp-diagram {
        width: min(100%, calc((100dvh - var(--sp-sec-bar) - var(--sp-sec-tools) - 24px) * var(--sp-diagram-ratio, .8)));
    }
}

/* List view and sections without a diagram: one centred column */
.sp-section.is-list .sp-section-diagram,
.sp-section.is-no-diagram .sp-section-diagram { display: none; }
.sp-section.is-list .sp-section-bench,
.sp-section.is-no-diagram .sp-section-bench { grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin: 0 auto; }
.sp-section.is-list .sp-section-intro,
.sp-section.is-no-diagram .sp-section-intro { max-width: 1000px; margin: 0 auto; }
.sp-section.is-list .sp-section-listhead,
.sp-section.is-no-diagram .sp-section-listhead { top: calc(var(--sp-sec-bar) + var(--sp-sec-tools)); }
.sp-section.is-no-diagram .sp-section-return { display: none; }
.sp-section-nodiagram { margin-bottom: 12px; }
.sp-section-nodiagram[hidden] { display: none; }

/* --- Diagram -------------------------------------------------------------- */
.sp-diagram {
    --sp-marker-width: 5.2%; --sp-marker-min: 24px; --sp-marker-font: var(--sp-fs-xs); --sp-marker-zoom-min: 26px;
    position: relative; width: 100%; aspect-ratio: var(--sp-diagram-ratio, .8);
    border-radius: var(--sp-r-tile); overflow: hidden; isolation: isolate;
    background: linear-gradient(135deg, var(--sp-diagram-edge), var(--sp-diagram-bg));
    cursor: zoom-in;
}
.sp-diagram--regular { --sp-marker-width: 6.8%; --sp-marker-min: 32px; --sp-marker-font: 14px; --sp-marker-zoom-min: 36px; }
.sp-diagram--light { background: var(--sp-surface); }
.sp-diagram-content { position: absolute; inset: 0; transform: scale(.88); transform-origin: center; }
.sp-diagram-content img { display: block; width: 100%; height: 100%; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.sp-diagram-mask { position: absolute; transform: translate(-50%, -50%); background: var(--sp-diagram-bg); pointer-events: none; }
.sp-diagram--light .sp-diagram-mask { background: var(--sp-surface); }
.sp-diagram-mask[hidden] { display: none; }
.sp-diagram:not(.is-placed) .sp-hotspot { visibility: hidden; }

.sp-hotspot {
    position: absolute; transform: translate(-50%, -50%);
    width: max(var(--sp-marker-min), var(--sp-marker-width)); height: auto; aspect-ratio: 1;
    display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
    background: var(--sp-diagram-deep); color: var(--sp-paper);
    font: 600 var(--sp-marker-font)/1 var(--sp-font); font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 4px var(--sp-scrim);
    cursor: pointer;
    transition: transform 200ms var(--sp-ease-open), background var(--sp-fast), color var(--sp-fast);
}
.sp-hotspot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.sp-hotspot:hover, .sp-hotspot:focus-visible {
    z-index: 4; transform: translate(-50%, -50%) scale(1.2);
    background: var(--sp-paper); color: var(--sp-diagram-deep);
}
.sp-hotspot[aria-pressed="true"] {
    z-index: 3; background: var(--sp-paper); color: var(--sp-diagram-deep);
    outline: 2px solid var(--sp-paper); outline-offset: 3px;
}
.sp-hotspot[hidden] { display: none; }
@media (hover: none) { .sp-hotspot:hover { transform: translate(-50%, -50%); } }

.sp-diagram-expand {
    position: absolute; top: 12px; right: 12px; z-index: 8;
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: var(--sp-r-pill); background: var(--sp-paper); color: var(--sp-ink); cursor: pointer;
}
.sp-diagram-expand svg { width: 20px; height: 20px; }

/* First visit: a hand and one line over the drawing, once per session */
.sp-diagram-intro {
    position: absolute; inset: 0; z-index: 7;
    display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center;
    color: var(--sp-paper); background: color-mix(in srgb, var(--sp-diagram-deep) 80%, transparent);
    pointer-events: none; transition: opacity 350ms, visibility 350ms;
}
.sp-diagram-intro[hidden] { display: none; }
.sp-diagram-intro.is-leaving { opacity: 0; visibility: hidden; }
.sp-diagram-intro strong { max-width: 9em; text-wrap: balance; font-size: var(--sp-fs-h2); line-height: 1.1; letter-spacing: var(--sp-track-tight); font-weight: 600; }
.sp-diagram-intro span { margin-top: 14px; font-size: var(--sp-fs-sm); opacity: .75; }
.sp-diagram-hand { width: 64px; height: 72px; margin-bottom: 18px; animation: sp-hand-tap 2.8s ease-in-out 1 both; }
@keyframes sp-hand-tap {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    18%, 55% { transform: translateY(-5px) rotate(-8deg) scale(1); }
    28%, 65% { transform: translateY(1px) rotate(-5deg) scale(.94); }
    40%, 78% { transform: translateY(4px) rotate(-10deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sp-diagram-hand { animation: none; } }

.sp-hotspot-tip {
    position: fixed; z-index: 80; max-width: min(260px, calc(100vw - 24px));
    padding: 9px 13px; border-radius: var(--sp-r-sm);
    background: var(--sp-header-deep); color: var(--sp-paper);
    font: 500 var(--sp-fs-ui)/1.35 var(--sp-font); pointer-events: none;
}
.sp-hotspot-tip[hidden] { display: none; }

/* --- List head ------------------------------------------------------------ */
.sp-section-listhead-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sp-section-parts-title { font-size: var(--sp-fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.sp-section-count { flex: none; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); font-variant-numeric: tabular-nums; }
.sp-section-controls { display: flex; gap: 8px; }
.sp-section-search { flex: 1; }

/* --- Part rows ------------------------------------------------------------ */
.sp-section-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-section-row { position: relative; background: var(--sp-surface); border-radius: var(--sp-r-ctl); transition: background var(--sp-fast), box-shadow var(--sp-fast); }
.sp-section-row[hidden] { display: none; }
.sp-section-row:hover { box-shadow: inset 0 0 0 1px var(--sp-line-strong); }
.sp-section-row.is-active, .sp-section-row.is-match { background: var(--sp-t1); box-shadow: none; }
.sp-section-row.is-focus { box-shadow: inset 0 0 0 2px var(--sp-t3); }
.sp-section-row.is-indent-1 { margin-left: 20px; }
.sp-section-row.is-indent-2 { margin-left: 40px; }
.sp-section-row.is-indent-3 { margin-left: 60px; }

.sp-section-row-head {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-height: 72px; padding: 14px 10px 14px 18px; border-radius: var(--sp-r-ctl);
}
.sp-section-row .sp-callout { background: var(--sp-surface-2); transition: background var(--sp-fast), color var(--sp-fast); }
.sp-section-row.is-active .sp-callout, .sp-section-row.is-match .sp-callout { background: var(--sp-header); color: var(--sp-paper); }
.sp-section-row.is-nohotspot .sp-callout { background: none; box-shadow: inset 0 0 0 1px var(--sp-line-strong); color: var(--sp-ink-soft); }
.sp-section-row-name { display: block; font-size: var(--sp-fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sp-section-row-cond { display: block; margin-top: 3px; font-size: var(--sp-fs-sm); line-height: 1.4; color: var(--sp-ink-soft); }
.sp-section-row-fitment { padding: 0 18px 14px 68px; }
.sp-section-side-fitments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-section-shared-condition > .sp-section-line:first-child { display: inline; }
.sp-section-fitment-variant + .sp-section-fitment-variant { margin-top: 8px; }
.sp-section-fitment-side { display: block; font-size: var(--sp-fs-sm); font-weight: 600; color: var(--sp-ink); }
/* A one-line condition and a one-line note share a line, joined by a middle dot.
   Either field with a line break of its own starts the note on the next line.
   Long text folds to two lines. Visa mer floats to the end of the last visible line:
   a spacer float fills the height above it. */
.sp-section-more { display: flex; }
/* clip prevents focus on the enlarged button from scrolling away the first text line. */
.sp-section-more-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: clip; overflow-wrap: anywhere; }
.sp-section-more-text::before { content: ""; float: right; height: calc(100% - 1.4em); height: calc(100% - 1lh); }
.sp-section-more.is-open .sp-section-more-text { display: block; -webkit-line-clamp: unset; }
.sp-section-more-text.is-animating { transition: height var(--sp-open) var(--sp-ease-open); }
.sp-section-more-text .sp-section-line, .sp-section-more-text .sp-section-note { display: inline; }
.sp-section-more-text .sp-section-note:not(:first-child)::before { content: " · "; content: " · " / ""; }
.sp-section-more-text .sp-section-more-btn + .sp-section-note::before { content: none; }
/* Preserve the line breaks entered in the condition and note fields. */
.sp-section-more-text .sp-section-line + .sp-section-line::before { content: "\A"; white-space: pre; }
.sp-section-more-text:has(> .sp-section-line) > .sp-section-note:has(.sp-section-line + .sp-section-line)::before,
.sp-section-more-text:has(> .sp-section-line + .sp-section-line) > .sp-section-note::before { content: "\A"; content: "\A" / ""; white-space: pre; }
.sp-section-more-btn {
    position: relative; z-index: 2; float: right; clear: both; margin-left: 10px; padding: 0; border: 0; background: none;
    font: 500 var(--sp-fs-sm) var(--sp-font); line-height: inherit; color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sp-section-more-btn[hidden] { display: none; }
/* Touch target taller than the text line. */
.sp-section-more-btn::after { content: ""; position: absolute; inset: -12px -8px; }
/* Dim a part that does not fit this car. The text sits above the row's click layer
   so Visa mer can be pressed; the words themselves still open the row. */
.sp-section-row.is-misfit .sp-section-row-text { position: relative; z-index: 1; opacity: .7; pointer-events: none; }
.sp-section-row.is-misfit .sp-section-row-text * { pointer-events: none; }
.sp-section-row.is-misfit .sp-section-row-text :is(a, button, input, label) { pointer-events: auto; }

/* Side of the car: top view, nose up, the row's half dark. */
.sp-section-row-head:has(.sp-row-side) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.sp-section-row-head:has(.sp-row-incart) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.sp-section-row-head:has(.sp-row-incart):has(.sp-row-side) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.sp-row-side { display: flex; align-items: center; gap: 8px; color: var(--sp-ink-soft); }
.sp-row-side svg { flex: none; width: 24px; height: 38px; overflow: visible; }
.sp-row-side-label { font-size: var(--sp-fs-xs); font-weight: 500; line-height: 1.2; text-align: right; white-space: nowrap; }
.sp-section-row.is-misfit .sp-row-side { opacity: .7; }

/* One number sold per side: one row, a heading per side inside. */
.sp-side-part { display: grid; gap: 8px; }
.sp-side-part + .sp-side-part { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--sp-line-strong); }
.sp-side-part-head { margin: 0; font-size: var(--sp-fs-body); font-weight: 600; line-height: 1.3; }
.sp-side-part-head .sp-row-side { flex-direction: row-reverse; justify-content: flex-end; color: var(--sp-ink); }
.sp-side-part-head .sp-row-side svg { width: 20px; height: 32px; }
.sp-side-part-head .sp-row-side-label { width: auto; font-size: inherit; font-weight: inherit; white-space: nowrap; }
/* One variant: its own condition on top, its products under it, in one card. */
.sp-side-item { overflow: hidden; border-radius: var(--sp-r-sm); background: var(--sp-paper); }
.sp-side-item-cond {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; padding: 14px 16px 0;
    font-size: var(--sp-fs-body); font-weight: 600; line-height: 1.35; color: var(--sp-ink);
}
.sp-side-item-cond .sp-section-line { flex-basis: 100%; }
/* Clauses after the first ("För bilar med …") are details of the variant, not its name. */
.sp-side-item-cond .sp-section-line + .sp-section-line { font-size: var(--sp-fs-sm); font-weight: 400; color: var(--sp-ink-soft); }
.sp-side-item > .sp-section-oem, .sp-side-item > .sp-section-noproduct { margin: 0; padding: 10px 16px 0; }
.sp-side-item > .sp-section-noproduct { padding-bottom: 14px; }
.sp-side-item .sp-section-products { gap: 0; }
.sp-section-product-pair .sp-section-product { border-radius: 0; }
.sp-section-product-pair > .sp-section-product + .sp-section-product { border-top: 1px solid var(--sp-line); }
.sp-section-pair-class { font-weight: 600; color: var(--sp-ink); }
/* Names in a pair line up even when only one of them has a thumbnail. */
.sp-section-product-pair:has(.sp-product-thumb:not([hidden])) > .sp-section-product:has(> .sp-section-product-side) { grid-template-columns: auto 40px minmax(0, 1fr) auto 18px; }
.sp-section-product-pair:has(.sp-product-thumb:not([hidden])) > .sp-section-product:has(> .sp-section-product-side):not(:has(> .sp-product-thumb:not([hidden]))) > .sp-section-product-id { grid-column: 3; }
.sp-row-side-short { display: none; }
/* A quality that lacks one side says so on that side's row. */
.sp-section-product-none { display: flex; align-items: center; gap: 16px; margin: 0; padding: 10px 16px; color: var(--sp-ink-faint); font-size: var(--sp-fs-sm); }
.sp-section-product-pair > .sp-section-product-none + .sp-section-product, .sp-section-product-pair > .sp-section-product + .sp-section-product-none { border-top: 1px solid var(--sp-line); }
.sp-section-product-side { width: var(--sp-hit); }
.sp-section-product-side .sp-row-side { flex-direction: column-reverse; gap: 4px; }
.sp-section-product-side .sp-row-side svg { width: 20px; height: 32px; }
.sp-section-product-side .sp-row-side-label { width: auto; text-align: center; white-space: nowrap; }
.sp-section-product-condition { font-size: var(--sp-fs-xs); font-weight: 400; line-height: 1.4; color: var(--sp-ink-soft); }
.sp-side-item .sp-section-products li + li { border-top: 1px solid var(--sp-line); }
.sp-side-item .sp-section-product { min-height: 64px; border-radius: 0; }
/* The variant's condition names it; the product name, often the same word every time, steps back. */
.sp-side-item-cond ~ .sp-section-products .sp-section-product-name { font-size: var(--sp-fs-ui); font-weight: 500; }
.sp-side-item-cond + .sp-section-products li:first-child .sp-section-product { padding-top: 8px; }

/* Closed rows include the visible notes in the toggle's hit area. */
.sp-section-row:not(.is-active) > .sp-section-row-head { position: static; }
.sp-section-row > .wpc-part-admin-extra,
.sp-section-row-fitment :is(a, button, input, select, textarea),
.sp-section-more-text :is(a, button) { position: relative; z-index: 2; }
.sp-section-row-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; background: none; color: var(--sp-ink); cursor: pointer;
}
.sp-section-row-toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.sp .sp-section-row-toggle:focus-visible { outline: none; }
.sp-section-row-toggle:focus-visible::after { outline: 3px solid var(--sp-focus); outline-offset: -3px; border-radius: var(--sp-r-ctl); }
.sp-section-row-toggle svg { width: 18px; height: 18px; }
.sp-section-row-toggle[aria-expanded="true"] .sp-section-row-plus,
.sp-section-row-toggle[aria-expanded="false"] .sp-section-row-minus { display: none; }
.sp-section-row-head .wpc-inline-rename-btn,
.sp-section-row-head .wpc-part-qty-edit,
.sp-section-row-head .wpc-inline-rename-editor { position: relative; z-index: 2; }

.sp-section-row-inner { display: grid; gap: 10px; padding: 0 18px 18px; }
.sp-section-forced { font-size: var(--sp-fs-sm); }
.sp-section-forced .sp-link { margin-left: 4px; }

.sp-section-oem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); }
.sp-section-oem code, .sp-section-row code {
    padding: 1px 6px; border-radius: 6px; background: var(--sp-paper);
    font: 500 var(--sp-fs-sm) var(--sp-font); font-variant-numeric: tabular-nums; color: var(--sp-ink);
}
.sp-section-row .wpc-part-note:not(.sp-section-note) { margin-top: 4px; font-size: var(--sp-fs-sm); line-height: 1.5; color: var(--sp-ink-soft); overflow-wrap: anywhere; }
.sp-section-noproduct { font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); }

/* Product line: name and class label left, price and stock right */
.sp-section-products { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.sp-section-product {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px 16px;
    min-height: 60px; padding: 10px 16px; border-radius: var(--sp-r-sm);
    background: var(--sp-paper); text-decoration: none; transition: box-shadow var(--sp-fast);
}
.sp-section-product:hover { box-shadow: inset 0 0 0 1px var(--sp-line-strong); }
.sp-section-product:has(> .sp-section-product-side) { grid-template-columns: auto minmax(0, 1fr) auto 18px; }
.sp-section-product:has(> .sp-product-thumb:not([hidden])) { grid-template-columns: 40px minmax(0, 1fr) auto 18px; }
.sp-section-product:has(> .sp-section-product-side):has(> .sp-product-thumb:not([hidden])) { grid-template-columns: auto 40px minmax(0, 1fr) auto 18px; }
.sp-section-product-id { min-width: 0; }
/* Product rows share one look: section lines, search/category rows (.sp-prow) and quality choices (.pp-quality-option). */
.sp-section-product-name { display: block; font-size: var(--sp-fs-body); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.sp-section-product-class { display: block; margin-top: 3px; font-size: var(--sp-fs-xs); line-height: 1.4; color: var(--sp-ink-soft); overflow-wrap: anywhere; }
.sp-section-product-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sp-section-product-buy .sp-price { font-size: var(--sp-fs-lg); }
.sp-section-product-arrow { grid-column: -2; width: 18px; height: 18px; color: var(--sp-action); }
.sp-section-product.is-expired .sp-section-product-name { color: var(--sp-ink-soft); }
.sp-section-product.is-customer-hidden { opacity: 0.6; }
/* Already in the cart: the line, the row head (also when closed) and the diagram number say so. */
.sp-section-product.is-in-cart, .sp-section-product.is-in-cart:hover { box-shadow: inset 0 0 0 1px var(--sp-t3); }
.sp-incart { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: var(--sp-fs-xs); font-weight: 600; line-height: 1.3; color: var(--sp-ok); }
.sp-incart svg { width: 14px; height: 14px; flex: none; }
.sp-row-incart {
    display: inline-flex; align-items: center; gap: 4px; flex: none; height: 28px; padding: 0 10px 0 8px;
    border-radius: var(--sp-r-pill); background: var(--sp-paper); color: var(--sp-ok);
    box-shadow: inset 0 0 0 1px var(--sp-t2);
    font-size: var(--sp-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.sp-row-incart svg { width: 15px; height: 15px; }
.sp-hotspot-cart {
    position: absolute; pointer-events: none; top: -3px; right: -3px; width: 34%; min-width: 9px; aspect-ratio: 1;
    border-radius: 50%; background: var(--sp-t2); box-shadow: 0 0 0 2px var(--sp-ok);
}

.sp-section-empty, .sp-section-nomatch { display: grid; justify-items: center; gap: 10px; }
.sp-section-nomatch[hidden] { display: none; }

/* NLS replacement notes (Volvo): number, status tag and the two chips */
.wpc-nls-num { padding: 0 5px; border-radius: 6px; background: var(--sp-paper); font-weight: 600; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.wpc-nls-tag { display: inline-block; padding: 1px 8px; border-radius: var(--sp-r-pill); background: var(--sp-surface-2); font-size: var(--sp-fs-xs); font-weight: 600; color: var(--sp-ink-soft); }
.wpc-nls-chips { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: baseline; }
.wpc-nls-chip {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px;
    border: 0; border-radius: var(--sp-r-pill); font: 600 var(--sp-fs-xs)/1.4 var(--sp-font); text-decoration: none; cursor: pointer;
    transition: background var(--sp-fast);
}
.wpc-nls-chip--shop { background: var(--sp-ok-bg); color: var(--sp-action); }
.wpc-nls-chip--cat { background: var(--sp-surface-2); color: var(--sp-ink); }
.wpc-nls-chip:hover { background: var(--sp-t2); color: var(--sp-ink); }

/* --- Mobile: return to the diagram --------------------------------------- */
.sp-section-return {
    position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
    border: 0; border-radius: var(--sp-r-pill); background: var(--sp-header); color: var(--sp-paper);
    font: 600 var(--sp-fs-ui) var(--sp-font); white-space: nowrap; cursor: pointer;
}
.sp-section-return[hidden] { display: none; }
.sp-section-return svg { width: 18px; height: 18px; transform: rotate(-45deg); }

/* --- Dialogs ------------------------------------------------------------- */
.sp-section-nav-path { margin: -8px 0 16px; font-size: var(--sp-fs-ui); color: var(--sp-ink-soft); }
.sp-section-nav-list { display: grid; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.sp-section-nav-list .sp-row { background: var(--sp-surface); min-height: 60px; }
.sp-section-nav-list .sp-row > svg { width: 18px; height: 18px; flex: none; color: var(--sp-ink-soft); }
.sp-section-nav-list .sp-row > span { display: grid; gap: 2px; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.sp-section-nav-list small { font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); font-weight: 400; }
.sp-section-nav-current { box-shadow: inset 0 0 0 1px var(--sp-t3); }
.sp-section-nav-current:hover { box-shadow: inset 0 0 0 1px var(--sp-t3); }
/* "Byt sektion" with the car's catalog tree (markup and look from catalog.css) */
.sp-section-nav.has-tree { width: min(760px, calc(100% - 32px)); padding-top: 0; }
.sp-section-nav.has-tree .sp-dialog-head { position: sticky; top: 0; z-index: 2; margin: 0; padding: 24px 0 12px; background: var(--sp-paper); }
.sp-section-nav-tree { padding-bottom: 0; }
.sp-section-nav-find { position: sticky; top: 76px; z-index: 2; margin-bottom: 12px; box-shadow: 0 0 0 8px var(--sp-paper); }
.sp-section-nav-tree .sp-cat-group-body { padding-left: 20px; }
/* An opened group scrolls to the top of the list, below the sticky title and search. */
.sp-section-nav-tree :is(.sp-cat-group-head, .sp-cat-sub-head) { scroll-margin-top: 144px; }
.sp-section-nav-tree .sp-cat-leaf { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 64px 18px; }
.sp-section-nav-tree .sp-cat-leaf.is-current { box-shadow: inset 0 0 0 2px var(--sp-t3); }
.sp-section-nav-tree .sp-cat-leaf-name small.sp-section-nav-here { color: var(--sp-action); font-weight: 600; }
.sp-section-nav-tree .sp-cat-leaf.is-current .sp-cat-leaf-arrow { color: var(--sp-action); }
.sp-section-nav.has-tree .sp-section-nav-all { margin-top: 16px; }
@media (max-width: 700px) {
    .sp-section-nav.has-tree { width: calc(100% - 24px); }
    .sp-section-nav.has-tree .sp-dialog-head { padding-top: 18px; }
    .sp-section-nav-find { top: 68px; }
    .sp-section-nav-tree :is(.sp-cat-group-head, .sp-cat-sub-head) { scroll-margin-top: 136px; }
    .sp-section-nav-tree .sp-cat-group-body { padding: 0 8px 10px; }
}
.sp-section-nav-all { white-space: normal; text-align: center; line-height: 1.3; padding: 12px 18px; font-size: var(--sp-fs-body); }

.sp-section-filter-sub { margin: 20px 0 10px; font-size: var(--sp-fs-ui); font-weight: 600; }
.sp-section-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-section-chips .sp-pill { text-decoration: none; white-space: normal; text-align: left; }
.sp-section-chips .sp-pill svg { width: 14px; height: 14px; color: var(--sp-ink-soft); }
.sp-section-chips-clear { display: inline-block; margin-top: 12px; font-size: var(--sp-fs-ui); }

/* --- Full-screen viewer: diagram specifics (shared viewer in components.css) */
.sp-viewer-drawing .sp-hotspot { width: max(var(--sp-marker-zoom-min), var(--sp-marker-width)); font-size: var(--sp-zoom-label, 16px); }
.sp-viewer-drawing .sp-diagram-content img { pointer-events: none; }

/* --- Article modal (NLS chains) ------------------------------------------ */
.sp-section-article {
    position: fixed; inset: 0; z-index: 75; display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 16px; overflow-y: auto; background: var(--sp-scrim);
}
.sp-section-article-card {
    width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 28px;
    border-radius: 22px; background: var(--sp-paper); box-shadow: var(--sp-shadow-pop);
}
/* Same motion as .sp-dialog (components.css). Alpine times the swap by the outer opacity, so the
   card's longer settle sits on the card itself and outlives .is-entering. */
.sp-section-article-card { transition: transform 460ms var(--sp-ease); }
.sp-section-article.is-entering { transition: opacity 200ms ease-out; }
.sp-section-article.is-leaving,
.sp-section-article.is-leaving .sp-section-article-card { transition: opacity 160ms cubic-bezier(.4, 0, 1, 1), transform 160ms cubic-bezier(.4, 0, 1, 1); }
.sp-section-article.is-hidden { opacity: 0; }
.sp-section-article.is-entering.is-hidden .sp-section-article-card { transform: translateY(18px) scale(.97); }
.sp-section-article.is-leaving.is-hidden .sp-section-article-card { transform: translateY(8px) scale(.985); }
.sp-section-article-card h2 code { font: inherit; }
.sp-section-article-desc { margin: -8px 0 16px; color: var(--sp-ink-soft); }
.sp-section-article-state { padding: 18px 0; text-align: center; color: var(--sp-ink-soft); }
.sp-section-article-state.is-error { color: var(--sp-bad); }
.sp-section-article-block { margin-bottom: 20px; }
.sp-section-article-block h3 { margin-bottom: 8px; font-size: var(--sp-fs-ui); font-weight: 600; }
.sp-section-article-block h3 small { font-weight: 400; color: var(--sp-ink-soft); }
.sp-section-article-block .sp-section-product { background: var(--sp-surface); }
.sp-section-article-list { margin: 0; padding: 0; list-style: none; }
.sp-section-article-list li + li { border-top: 1px solid var(--sp-line); }
.sp-section-article-list a, .sp-section-article-list li > span { display: grid; gap: 2px; padding: 10px 4px; text-decoration: none; }
.sp-section-article-list small { font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); }
.sp-section-article-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-section-article code { padding: 2px 8px; border-radius: 6px; background: var(--sp-surface); font: 500 var(--sp-fs-sm) var(--sp-font); }
body.sp-article-open { overflow: hidden; }

/* --- Admin (signed-in admin only; hooks used by wpc-saab-*.js) ------------ */
/* Hidden admin tooltips take no layout, so they cannot widen the page on a phone. */
.sp-section [data-tip]:not(:hover):not(:focus-visible):not(:focus-within)::after { display: none; }
.sp-section-admin-edit,
.wpc-part-admin-edit, .wpc-part-admin-dup, .wpc-part-admin-copy {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
    background: none; color: var(--sp-ink-soft); font-size: var(--sp-fs-sm); line-height: 1; text-decoration: none;
    cursor: pointer; opacity: .55; transition: opacity var(--sp-fast), background var(--sp-fast);
}
.sp-section-admin-edit { vertical-align: middle; font-size: var(--sp-fs-body); }
.sp-section-admin-edit:hover, .sp-section-admin-edit:focus-visible,
.wpc-part:hover .wpc-part-admin-edit, .wpc-part:hover .wpc-part-admin-dup,
.wpc-part:hover .wpc-part-admin-copy:not(.is-paste-mode):not(.is-copy-source-btn),
.wpc-part-admin-edit:hover, .wpc-part-admin-dup:hover, .wpc-part-admin-copy:hover,
.wpc-part-admin-edit:focus-visible, .wpc-part-admin-dup:focus-visible, .wpc-part-admin-copy:focus-visible {
    opacity: 1; color: var(--sp-bad); background: var(--sp-bad-bg);
}
.sp-section-admin-edit[data-tip]::after,
.wpc-part-admin-edit[data-tip]::after, .wpc-part-admin-dup[data-tip]::after, .wpc-part-admin-copy[data-tip]::after,
.wpc-part-admin-extra-tag[data-tip]::after, .wpc-part-qty-edit[data-tip]::after {
    content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40;
    min-width: 140px; max-width: 240px; padding: 6px 9px; border-radius: 6px;
    background: var(--sp-ink); color: var(--sp-paper);
    font: 400 var(--sp-fs-xs)/1.35 var(--sp-font); letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--sp-fast), visibility var(--sp-fast);
}
.wpc-part-admin-extra-tag[data-tip]::after { left: 0; right: auto; min-width: 0; white-space: nowrap; }
.wpc-part-qty-edit[data-tip]::after { min-width: 0; white-space: nowrap; }
.sp-section-admin-edit[data-tip]:hover::after, .sp-section-admin-edit[data-tip]:focus-visible::after,
.wpc-part-admin-edit[data-tip]:hover::after, .wpc-part-admin-edit[data-tip]:focus-visible::after,
.wpc-part-admin-dup[data-tip]:hover::after, .wpc-part-admin-dup[data-tip]:focus-visible::after,
.wpc-part-admin-copy[data-tip]:hover::after, .wpc-part-admin-copy[data-tip]:focus-visible::after,
.wpc-part-admin-extra-tag[data-tip]:hover::after, .wpc-part-admin-extra-tag[data-tip]:focus-visible::after,
.wpc-part-qty-edit[data-tip]:hover::after, .wpc-part-qty-edit[data-tip]:focus-within::after { opacity: 1; visibility: visible; }

.wpc-part-admin-extra {
    margin: 0 18px 14px; padding: 8px 10px; min-width: 0; overflow-wrap: anywhere;
    border-left: 2px solid var(--sp-bad); border-radius: 0 6px 6px 0; background: var(--sp-paper);
    font-size: var(--sp-fs-sm); color: var(--sp-ink-soft);
}
.wpc-part-admin-extra-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.wpc-part-admin-extra-tag { position: relative; font-size: var(--sp-fs-xs); font-weight: 700; color: var(--sp-bad); cursor: default; }
.wpc-part-admin-plate { color: var(--sp-ink-soft); font-weight: 600; }
.wpc-part-admin-edits, .wpc-part-admin-id { display: inline-flex; align-items: center; gap: 2px; }
.wpc-part-admin-extra .wpc-part-oem, .wpc-part-admin-extra .wpc-part-applic, .wpc-part-admin-extra .wpc-part-note { display: block; margin-top: 4px; }
.wpc-part-admin-extra .wpc-part-oem-label { font-size: var(--sp-fs-xs); font-weight: 600; margin-right: 4px; }
.wpc-part-admin-extra code { padding: 1px 5px; border-radius: 4px; background: var(--sp-surface); font: 500 var(--sp-fs-xs) var(--sp-font); color: var(--sp-ink); }
.wpc-part-admin-extra-hint { font-size: var(--sp-fs-xs); font-style: italic; }
.wpc-part-admin-memo { color: var(--sp-ink); }
.wpc-merge-pick { display: inline-flex; align-items: center; cursor: pointer; }
.wpc-merge-swal-list { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.wpc-merge-swal-opt { display: flex; align-items: center; gap: 6px; font-size: var(--sp-fs-ui); }
.wpc-part-qty, .wpc-part-qty-edit { margin-left: 6px; font-size: var(--sp-fs-sm); font-weight: 500; color: var(--sp-ink-soft); }
.wpc-part-qty-edit { position: relative; display: inline-flex; align-items: center; gap: 2px; cursor: default; }
.wpc-part-qty-input {
    width: 3.2em; padding: 2px 4px; border: 1px solid var(--sp-line-strong); border-radius: 6px;
    background: var(--sp-paper); font: inherit; color: var(--sp-ink); cursor: text;
}
.wpc-position-create {
    display: inline-flex; align-items: center; margin-top: 12px; padding: 0 .5rem;
    border: 1px solid rgba(15, 100, 112, .4); border-radius: 4px; background: var(--sp-paper, #fff);
    color: #0f6470; font: 600 .78rem/1.8 inherit; cursor: pointer;
}
.wpc-position-create:hover, .wpc-position-create:focus-visible { background: rgba(15, 100, 112, .08); }

/* --- Phone ---------------------------------------------------------------- */
@media (max-width: 700px) {
    .sp-section-intro { padding: 4px 0 12px; }
    .sp-section-tools { flex-wrap: nowrap; gap: 8px; }
    .sp-section-change { min-height: 44px; padding: 0 13px; font-size: var(--sp-fs-ui); }
    .sp-section-step { width: 44px; min-height: 44px; }
    .sp-section-tools .sp-segment > button { padding: 0 11px; font-size: var(--sp-fs-sm); }
    .sp-section-diagram { margin-bottom: 8px; }
    .sp-diagram { --sp-marker-min: 22px; --sp-marker-font: 11px; --sp-marker-zoom-min: 20px; border-radius: var(--sp-r-ctl); }
    .sp-diagram--regular { --sp-marker-min: 25px; --sp-marker-font: var(--sp-fs-xs); --sp-marker-zoom-min: 22px; }
    .sp-diagram-expand { top: 6px; right: 6px; width: 40px; height: 40px; }
    .sp-diagram-intro strong { font-size: 27px; }
    .sp-diagram-hand { width: 52px; height: 60px; }
    .sp-hotspot::before { inset: -8px; }
    .sp-viewer-drawing .sp-hotspot::before { inset: -14px; }
    .sp-section-listhead { padding: 12px 0; }
    .sp-section-row-head { gap: 10px; min-height: 64px; padding: 12px 6px 12px 12px; }
    .sp-section-row-fitment { padding: 0 12px 12px 54px; }
    .sp-section-side-fitments { grid-template-columns: minmax(0, 1fr); }
    .sp-section-row-name { font-size: var(--sp-fs-body); }
    .sp-row-side { gap: 6px; }
    .sp-row-side-label { width: min-content; white-space: normal; }
    .sp-section-row.is-indent-1 { margin-left: 12px; }
    .sp-section-row.is-indent-2 { margin-left: 24px; }
    .sp-section-row.is-indent-3 { margin-left: 36px; }
    .sp-section-row-inner { padding: 0 8px 8px; }
    .sp-section-product { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 10px; gap: 10px; }
    /* Short side words: the car already shows the side. The full word stays for screen readers. */
    .sp-section-product-side { width: auto; }
    .sp-section-product-side .sp-row-side-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sp-section-product-side .sp-row-side-short { display: inline; }
    .sp-section-product:has(> .sp-product-thumb:not([hidden])) { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .sp-section-product:has(> .sp-section-product-side) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .sp-section-product:has(> .sp-section-product-side):has(> .sp-product-thumb:not([hidden])),
    .sp-section-product-pair:has(.sp-product-thumb:not([hidden])) > .sp-section-product:has(> .sp-section-product-side) { grid-template-columns: auto 32px minmax(0, 1fr) auto; }
    /* Mobile rows read from the top: side mark, thumbnail and price line up with the name. */
    .sp-section-product { align-items: start; }
    /* Side mark and thumbnail leave less room: a long delivery text wraps under the price instead of squeezing the name. */
    /* The name gets the room: a long stock text wraps under the price (same width in search results and quality choices). */
    .sp-section-product-buy { max-width: 27vw; }
    .sp-section-product-arrow { display: none; }
    .wpc-part-admin-extra { margin: 0 12px 12px; }
}
.sp-section-tools .sp-segment > button { white-space: nowrap; }
/* Phones: the section steps need the room, so the view switch shows its icons. */
@media (max-width: 480px) {
    .sp-section-stepper { gap: 2px; }
    .sp-section-change svg { display: none; }
    .sp-section-tools .sp-segment > button { justify-content: center; min-width: 44px; padding: 0 10px; }
    .sp-section-tools .sp-segment svg { display: block; }
    .sp-section-tools .sp-segment small { display: none; }
    .sp-section-view-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
}
@media (max-width: 359px) {
    .sp-section-tools { flex-wrap: wrap; }
    .sp-section-change { padding: 0 10px; }
    .sp-section-tools .sp-segment > button { padding: 0 8px; }
    .sp-section-tools .sp-segment small { display: none; }
}

/* The part list can be narrow beside a diagram even on a wide screen. */
@media (min-width: 701px) {
    @container (max-width: 480px) {
        .sp-section-product { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 6px 12px; }
        .sp-section-product:has(> .sp-product-thumb:not([hidden])) { grid-template-columns: 40px minmax(0, 1fr); }
        .sp-section-product:has(> .sp-section-product-side) { grid-template-columns: auto minmax(0, 1fr); }
        .sp-section-product:has(> .sp-section-product-side):has(> .sp-product-thumb:not([hidden])),
        .sp-section-product-pair:has(.sp-product-thumb:not([hidden])) > .sp-section-product:has(> .sp-section-product-side) { grid-template-columns: auto 40px minmax(0, 1fr); }
        .sp-section-product-id { grid-column: -2; }
        .sp-section-product-buy { grid-column: -2; grid-row: 2; max-width: none; min-width: 0; align-items: flex-start; text-align: left; }
        .sp-section-product > :is(.sp-product-thumb, .sp-section-product-side) { grid-row: 1 / 3; }
        .sp-section-product-arrow { display: none; }
    }
}