/* ==========================================================================
   Product page (E1, layout A): two independent columns. Gallery and description
   on the left; identity, choices, price, buy, conditions and specs on the right.
   On mobile the columns dissolve into one ordered flow.
   Markup: app/Views/product/detail.php · JS: assets/js/sp/product.js
   ========================================================================== */

.pp { padding-bottom: var(--sp-section); }

.pp-back { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 20px 0 0; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); }
.pp-back .sp-back { color: var(--sp-action); font-weight: 500; font-size: var(--sp-fs-sm); min-height: var(--sp-hit); }
.pp-back > span[aria-hidden] { color: var(--sp-ink-faint); }
.pp-back-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-layout {
    display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: 48px;
    align-items: start; padding-top: 24px;
}
.pp-visual, .pp-overview { min-width: 0; }

/* --- Gallery ------------------------------------------------------------- */
.pp-stage {
    position: relative; display: grid; place-items: center; overflow: hidden;
    aspect-ratio: 1.5; border-radius: var(--sp-r-xl); background: var(--sp-surface);
}
.pp-stage-img {
    position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply;
    transition: transform var(--sp-slow) var(--sp-ease);
}
.pp-stage:hover .pp-stage-img { transform: scale(1.025); }
/* Images close to the stage's ratio lose the margin (product.js decides): is-fill crops to
   the edges, is-snug stays whole and touches two of them. */
.pp-stage.is-fill .pp-stage-img, .pp-stage.is-snug .pp-stage-img { inset: 0; width: 100%; height: 100%; }
.pp-stage.is-fill .pp-stage-img { object-fit: cover; }
.pp-stage-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.pp-zoom-icon {
    position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center;
    width: var(--sp-hit); height: var(--sp-hit); border-radius: 50%;
    background: var(--sp-paper); box-shadow: inset 0 0 0 1px var(--sp-line); color: var(--sp-ink);
}
.pp-zoom-icon svg { width: 20px; height: 20px; }
.pp-noimg { display: grid; justify-items: center; gap: 12px; color: var(--sp-ink-soft); font-size: var(--sp-fs-ui); }
.pp-noimg svg { width: 64px; height: 64px; color: var(--sp-ink-faint); }

.pp-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0 18px; }
.pp-thumb {
    display: grid; place-items: center; width: 52px; height: 52px; padding: 0; overflow: hidden; cursor: pointer;
    border: 0; border-radius: 12px; background: var(--sp-surface); box-shadow: inset 0 0 0 1px var(--sp-line);
}
.pp-thumb[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sp-action); }
.pp-thumb img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.pp-thumbs small { margin-left: auto; font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }

/* --- Disclosure sections: description and specifications ----------------- */
.pp-section + .pp-section { border-top: 1px solid var(--sp-line); }
.pp-section-title { margin: 0; font-size: inherit; }
.pp-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px;
    padding: 14px 0; border: 0; background: none; color: var(--sp-ink); cursor: pointer; text-align: left;
    font: 600 var(--sp-fs-lg)/1.25 var(--sp-font); letter-spacing: -.01em;
}
.pp-toggle-icon { width: 20px; height: 20px; flex: none; color: var(--sp-ink-soft); }
.pp-toggle[aria-expanded="true"] .pp-toggle-open, .pp-toggle[aria-expanded="false"] .pp-toggle-close { display: none; }
.pp-section-body { padding: 0 0 20px; font-size: var(--sp-fs-body); line-height: 1.65; }
.pp-richtext { overflow-wrap: anywhere; }
.pp-richtext p + p { margin-top: 12px; }
.pp-richtext table { width: 100%; border-collapse: collapse; font-size: var(--sp-fs-ui); }
.pp-richtext th { text-align: left; font-weight: 500; color: var(--sp-ink-soft); }
.pp-richtext td, .pp-richtext th { padding: 8px 8px 8px 0; vertical-align: top; border-bottom: 1px solid var(--sp-line); }
.pp-intro { margin-top: 16px; font-size: var(--sp-fs-ui); color: var(--sp-ink-soft); }
.pp-richtext + .pp-intro { margin-top: 16px; }
.pp-intro:first-child { margin-top: 0; }

.pp-specs { margin: 0; }
.pp-specs > div {
    display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 18px;
    padding: 11px 0; border-bottom: 1px solid var(--sp-line); font-size: var(--sp-fs-ui); line-height: 1.5;
}
.pp-specs > div:last-child { border-bottom: 0; }
.pp-specs dt { color: var(--sp-ink-soft); font-weight: 400; }
.pp-specs dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pp-specs--quiet { color: var(--sp-ink-soft); }
.pp-more {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--sp-hit); margin-top: 8px; padding: 0;
    border: 0; background: none; color: var(--sp-ink-soft); font: 500 var(--sp-fs-sm) var(--sp-font); cursor: pointer;
}
.pp-more .sp-chev { width: 16px; height: 16px; transition: transform var(--sp-open) var(--sp-ease-open); }
.pp-more[aria-expanded="true"] .sp-chev { transform: rotate(180deg); }

/* --- Identity -------------------------------------------------------------- */
.pp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; }
.pp-class { font-size: var(--sp-fs-sm); font-weight: 600; color: var(--sp-t3); }
.pp-core {
    font-size: var(--sp-fs-xs); font-weight: 600; line-height: 1.4;
    color: var(--sp-warn); background: var(--sp-warn-bg);
    border-radius: var(--sp-r-pill); padding: 1px 8px;
}
.pp-artnr { display: inline-flex; align-items: center; min-height: 36px; margin-left: auto; color: var(--sp-ink-soft); font-size: var(--sp-fs-sm); font-variant-numeric: tabular-nums; }
.pp-contact {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--sp-hit); margin-top: 8px; color: var(--sp-ink-soft); font-size: var(--sp-fs-sm);
    text-decoration: none;
}
.pp-contact svg { flex: none; }
body.sp .pp-contact:hover { color: var(--sp-action); }
.pp-title {
    margin: 0; font-size: clamp(28px, 2.7vw, 38px); font-weight: 600; line-height: 1.1;
    letter-spacing: var(--sp-track-tight); text-wrap: balance; overflow-wrap: anywhere;
}
.pp-title .product-admin-edit { font-size: var(--sp-fs-lg); vertical-align: middle; }

.pp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.pp-facts li { padding: 6px 11px; border-radius: var(--sp-r-sm); background: var(--sp-surface); font-size: var(--sp-fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.pp-facts span { color: var(--sp-ink-soft); margin-right: 4px; }
.pp-facts strong { font-weight: 600; white-space: pre-line; }

/* --- Side and quality choices -------------------------------------------- */
.pp-makes { margin-top: 22px; }
.pp-makes-title { margin: 0 0 10px; font-size: var(--sp-fs-ui); font-weight: 500; letter-spacing: 0; }
.pp-quality { overflow-anchor: none; }
.pp-quality .sp-product-thumb { width: 48px; height: 48px; margin: -6px -4px -6px -8px; }
.pp-quality-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* Quality rows: .sp-qgroup in components.css. A single-article quality is a direct link in the same frame. */
.pp-quality-link { min-height: 56px; padding-block: 10px; }
body.sp .pp-quality-option:hover { background: var(--sp-surface); }
.pp-quality-articles { border-top: 1px solid var(--sp-line); }
.pp-quality-option { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; }
.pp-quality-option + .pp-quality-option { border-top: 1px solid var(--sp-line); }
.pp-quality-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
/* Same look as section lines and search rows. */
.pp-quality-article-name { font-size: var(--sp-fs-body); line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.pp-quality-price { display: grid; gap: 2px; flex: none; justify-items: end; text-align: right; }
.pp-quality-price .sp-price { font-size: var(--sp-fs-lg); }
.pp-quality-check { width: 16px; height: 16px; flex: none; color: var(--sp-action); }
.pp-quality .pp-make[aria-current="true"] { background: var(--sp-t1); box-shadow: inset 3px 0 var(--sp-action); }
.pp-quality-sale { font-size: var(--sp-fs-xs); }
/* Side marks off: every quality uses .sp-qrow, with the section list's article styling. */
.pp-quality .sp-qrow .pp-quality-option { gap: 16px; padding: 10px 16px; }
.pp-quality .sp-qrow .sp-product-thumb { width: 40px; height: 40px; margin: 0; }
.pp-quality .sp-qrow .pp-quality-check { width: 18px; height: 18px; }
.pp-quality-arrow { width: 18px; height: 18px; flex: none; color: var(--sp-action); }
/* Left and right of one quality as rows with a side mark, left first, like the section list. */
.pp-quality-sidemark { display: grid; justify-items: center; gap: 3px; flex: none; min-width: 44px; color: var(--sp-ink-soft); white-space: nowrap; }
.pp-quality-sidemark .sp-side-car { width: 20px; height: 32px; }
.pp-quality-sidemark small { font-size: var(--sp-fs-xs); line-height: 1.2; }
.pp-quality-sidemark-short { display: none; }
.pp-quality-none-row { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--sp-line); color: var(--sp-ink-faint); font-size: var(--sp-fs-sm); }
.pp-quality-rows > .pp-quality-none-row:first-child { border-top: 0; }
.pp-quality-rows > .pp-quality-none-row + .pp-quality-option { border-top: 1px solid var(--sp-line); }
.pp-quality-pair-hint { margin: -4px 0 10px; color: var(--sp-ink-soft); font-size: var(--sp-fs-xs); }
.pp-quality[aria-busy="true"] { cursor: progress; }
.pp-quality .is-loading { box-shadow: inset 0 0 0 2px var(--sp-action); }

/* --- Price and buy ------------------------------------------------------------ */
.pp-buy { margin-top: 24px; scroll-margin-top: 80px; }
.pp-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.pp-price-block { min-width: 0; }
.pp-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; font-size: clamp(32px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.04em; white-space: normal; }
.pp-price .sp-price-unit { font-size: var(--sp-fs-lg); letter-spacing: 0; }
.pp-price .sp-price-was { font-size: var(--sp-fs-lg); letter-spacing: 0; }
.pp-vat { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.pp-price-row > .sp-stock, .pp-price-row > #pp-live-stock { flex: 0 1 auto; text-align: right; }

.pp-choices { display: grid; gap: 12px; margin-bottom: 16px; }
.pp-choice { display: grid; gap: 4px; }
.pp-choice-name { font-size: var(--sp-fs-sm); font-weight: 600; }
.pp-choice-help { font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.pp-choice .sp-input { width: 100%; }
.pp-add:disabled { opacity: .45; cursor: not-allowed; }
.pp-buy-controls { display: flex; gap: 12px; align-items: stretch; }
.pp-qty {
    display: flex; align-items: center; flex: none; height: 56px; overflow: hidden;
    border-radius: var(--sp-r-ctl); box-shadow: inset 0 0 0 1px var(--sp-line-strong);
}
.pp-qty button {
    display: grid; place-items: center; width: var(--sp-hit); height: 100%; padding: 0;
    border: 0; background: none; color: var(--sp-ink); cursor: pointer;
}
.pp-qty button svg { width: 18px; height: 18px; }
.pp-qty button:disabled { color: var(--sp-ink-faint); cursor: not-allowed; }
.pp-qty input {
    width: 36px; height: 100%; padding: 0; border: 0; background: transparent; color: var(--sp-ink); text-align: center;
    font: 600 var(--sp-fs-lg) var(--sp-font); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield;
}
.pp-qty input::-webkit-inner-spin-button, .pp-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pp-add { flex: 1; min-width: 0; }
.pp-add-icon { display: inline-flex; }
.pp-add-spin { display: none; }
.pp-add.htmx-request .pp-add-icon { display: none; }
.pp-add.htmx-request .pp-add-spin { display: inline-block; }
.pp-total { margin: 10px 0 0; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); font-variant-numeric: tabular-nums; }
/* Already in the cart: said above the buy button, which then reads "Lägg till fler". */
.pp-incart {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
    margin-bottom: 12px; padding: 12px 16px; border-radius: var(--sp-r-ctl); background: var(--sp-ok-bg);
    font-size: var(--sp-fs-ui);
}
.pp-incart[hidden] { display: none; }
.pp-incart-text { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sp-ok); }
.pp-incart-text svg { width: 18px; height: 18px; flex: none; }
.pp-incart-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pp-incart-link svg { width: 16px; height: 16px; }
body.sp .pp-incart-link:hover { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; }
.pp-feedback:empty { display: none; }
.pp-feedback { margin-top: 12px; }
.pp-notice > span { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pp-notice--ok { background: var(--sp-ok-bg); }
.pp-notice--ok svg { color: var(--sp-ok); }

.pp-unbuyable { margin: 0 0 4px; padding: 4px 0 14px; font-size: var(--sp-fs-body); color: var(--sp-ink-soft); }
.pp-unbuyable p { margin: 0 0 14px; }

.pp-conditions { margin-top: 16px; padding: 14px 16px; border-radius: var(--sp-r-ctl); background: var(--sp-surface); font-size: var(--sp-fs-ui); line-height: 1.5; }
.pp-conditions-head { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 600; }
.pp-conditions-head svg { width: 18px; height: 18px; flex: none; color: var(--sp-t3); }
.pp-conditions-line { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.pp-conditions-where { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--sp-line); }
.pp-conditions-head + .pp-conditions-where { margin-top: 8px; padding-top: 0; border-top: 0; }
.pp-conditions-where .sp-link { font-weight: 600; }
.pp-conditions-where small { display: block; font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.pp-conditions-head .sp-fit { gap: 9px; font-size: inherit; }
.pp-conditions-head .sp-fit svg { width: 18px; height: 18px; margin-top: 2px; }
/* Alone, the fit verdict is one more row under shipping; the specs list then continues without a gap. */
.pp-fit { display: flex; align-items: center; min-height: 52px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--sp-line); }
.pp-fit .sp-fit { gap: 10px; font-size: var(--sp-fs-ui); }
.pp-fit .sp-fit svg { width: 18px; height: 18px; margin-top: 2px; }
.pp-buy:has(> .pp-fit:last-child) + .pp-details { margin-top: 0; border-top: 0; }

.pp-wish { position: relative; margin-top: 14px; }
.pp-wish .sp-btn svg { width: 17px; height: 17px; }
.pp-wish-pop {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 10; width: min(300px, 100%); padding: 14px;
    border-radius: var(--sp-r-ctl); background: var(--sp-paper); box-shadow: var(--sp-shadow-pop);
}
.pp-wish-opt { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--sp-fs-ui); cursor: pointer; }
.pp-wish-name { width: 100%; margin: 6px 0; padding: 10px 12px; border: 0; border-radius: var(--sp-r-sm); box-shadow: inset 0 0 0 1px var(--sp-line-strong); font: inherit; }
.pp-wish form > .sp-btn { margin-top: 8px; }

/* --- Specs and catalog link ------------------------------------------------- */
.pp-details { margin-top: 24px; border-top: 1px solid var(--sp-line); }
.pp-details .pp-section { border-bottom: 1px solid var(--sp-line); }
.pp-package { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pp-package li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; font-size: var(--sp-fs-ui); line-height: 1.45; }
.pp-package-qty { min-width: 2.6em; color: var(--sp-ink-soft); font-variant-numeric: tabular-nums; }
.pp-package small { grid-column: 2; font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.pp-catalog {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 0;
    font-size: var(--sp-fs-ui); font-weight: 500; color: var(--sp-action);
}
.pp-catalog svg { width: 18px; height: 18px; flex: none; }
body.sp .pp-catalog:hover { color: var(--sp-action-hover); text-decoration: underline; text-underline-offset: 4px; }

/* --- See also ------------------------------------------------------------------ */
.pp-related { margin-top: var(--sp-section); padding-top: 36px; border-top: 1px solid var(--sp-line); }

/* --- Mobile buy bar ------------------------------------------------------------- */
.pp-sticky { display: none; }

@media (max-width: 1050px) {
    .pp-layout { gap: 28px; }
    .pp-stage { aspect-ratio: 1.15; }
    .pp-meta { gap: 2px 12px; }
    .pp-artnr { margin-left: 0; }
    .pp-price-row { flex-wrap: wrap; }
}

@media (max-width: 700px) {
    /* Mobile rows read from the top, as in the section list and search results. */
    .pp-quality-option { align-items: flex-start; }
    .pp-quality .sp-qrow .pp-quality-option { gap: 10px; padding: 10px; }
    .pp-quality .sp-qrow .sp-product-thumb { width: 32px; height: 32px; }
    .pp-quality-arrow { display: none; }
    .pp-quality-sidemark { width: auto; }
    .pp-quality-sidemark-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pp-quality-sidemark-short { display: inline; }
    .pp-back { padding-top: 0; }
    .pp-back-where { display: none; }
    .pp-back > span[aria-hidden] { display: none; }
    .pp-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; }
    .pp-visual, .pp-overview { display: contents; }
    .pp-identity { order: 0; }
    .pp-meta { margin-bottom: 8px; }
    .pp-artnr { margin-left: auto; font-size: var(--sp-fs-xs); }
    .pp-class { font-size: var(--sp-fs-xs); }
    .pp-title { font-size: 28px; }
    .pp-gallery { order: 1; margin-top: 16px; }
    .pp-stage { aspect-ratio: auto; height: 240px; border-radius: var(--sp-r-card); }
    .pp-stage-img { width: 84%; height: 84%; inset: 8%; }
    .pp-zoom-icon { right: 12px; bottom: 12px; }
    .pp-thumbs { padding: 10px 0 4px; gap: 8px; }
    .pp-thumb { width: var(--sp-hit); height: var(--sp-hit); }
    .pp-desc { order: 2; border-bottom: 1px solid var(--sp-line); }
    .pp-facts { order: 4; gap: 6px; margin-top: 14px; }
    .pp-facts li { font-size: var(--sp-fs-xs); padding: 6px 9px; }
    .pp-makes { order: 3; }
    .pp-buy { order: 5; margin-top: 18px; }
    .pp-details { order: 6; margin-top: 22px; }
    .pp-toggle { font-size: var(--sp-fs-lg); min-height: 52px; }
    .pp-price-row { flex-wrap: nowrap; align-items: flex-start; }
    .pp-price { font-size: 32px; }
    .pp-price-row > .sp-stock, .pp-price-row > #pp-live-stock { max-width: 45%; }
    .pp-buy-controls { gap: 10px; }
    .pp-qty button { width: 38px; }
    .pp-qty input { width: 30px; }
    .pp-add { padding: 0 14px; font-size: var(--sp-fs-ui); gap: 8px; }
    .pp-specs > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); font-size: var(--sp-fs-sm); }
    /* The details column already ends on a line; a second one above See also doubled it. */
    .pp-related { padding-top: 0; border-top: 0; }

    .pp-sticky:not([hidden]) {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 10px var(--sp-gutter) calc(10px + env(safe-area-inset-bottom));
        background: var(--sp-paper); box-shadow: 0 -1px 0 var(--sp-line);
    }
    .pp-sticky-sum { min-width: 0; }
    .pp-sticky-sum strong { display: block; font-size: var(--sp-fs-h3); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
    .pp-sticky-sum small { display: block; font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
    .pp-sticky-btn { flex: none; min-height: 48px; font-size: var(--sp-fs-ui); }
    body.pp-has-sticky { padding-bottom: 76px; }

}

@media (max-width: 360px) {
    .pp-add-icon { display: none; }
    .pp-add { padding: 0 10px; font-size: var(--sp-fs-sm); }
    .pp-qty button { width: 34px; }
    .pp-conditions { padding: 13px; }
}

@media (hover: none) {
    .pp-stage:hover .pp-stage-img { transform: none; }
}

/* Side of the car the part is for (LH/RH), under the name */
.pp-side { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.pp-side .sp-side-car { width: 26px; height: 41px; }
.pp-side span { display: grid; gap: 1px; }
.pp-side strong { font-size: var(--sp-fs-ui); font-weight: 600; }
.pp-side small { font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }