/*
 * Prime PDP: shared structure for the product page blocks (components/storefront/pdp/*).
 * Layout and behaviour only. Colours, type and radii come from the storefront contract (--sf-*, partials/theme-tokens)
 * and each theme's skin (prime/<slug>-pdp.css). Logical properties throughout (RTL / LTR).
 * Desktop rules start at 992px, so phones keep the P0–P5 mobile layer (sticky purchase bar, swipe gallery, lightbox).
 */
.sf-pdp {
    --p-page: var(--sf-page, #fff);
    --p-surface: var(--sf-surface, #fff);
    --p-ink: var(--sf-ink, #1b1c25);
    --p-muted: var(--sf-muted, #6b6b6b);
    --p-line: var(--sf-line, #e8e8e8);
    --p-accent: var(--sf-accent, #1b1c25);
    --p-action: var(--sf-action, #1b1c25);
    --p-on-action: var(--sf-on-action, #fff);
    --p-radius: var(--sf-radius, 6px);
    --p-radius-lg: var(--sf-radius-lg, 12px);
    --p-head: var(--sf-font-head, inherit);
    --p-body: var(--sf-font-body, inherit);
    --p-ratio: 1 / 1;
    --p-fit: contain;
    --p-stage: var(--p-surface);
    --p-gap: clamp(24px, 3.2vw, 56px);
    color: var(--p-ink);
    font-family: var(--p-body);
    padding-block: clamp(20px, 3vw, 44px) clamp(48px, 6vw, 88px);
}
.sf-pdp *, .sf-pdp *::before, .sf-pdp *::after { box-sizing: border-box; }

/* ── top: gallery + info ─────────────────────────────────────────── */
.sf-pdp-top { display: grid; gap: 28px; }
.sf-pdp-info { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ── gallery ─────────────────────────────────────────────────────── */
.sf-pdp-gallery { display: grid; gap: 12px; min-width: 0; }
.sf-pdp-stage { position: relative; min-width: 0; }
.sf-pdp-main { position: relative; aspect-ratio: var(--p-ratio); background: var(--p-stage); border-radius: var(--p-radius-lg); overflow: hidden; }
.sf-pdp-main .long-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; outline: none; }
.sf-pdp-main .long-img:focus-visible { box-shadow: inset 0 0 0 3px var(--p-accent); }
.sf-pdp-main .long-img img { width: 100%; height: 100%; object-fit: var(--p-fit); transition: transform .18s ease-out; will-change: transform; }
.sf-pdp-main .long-img.is-magnified img { transform: scale(1.9); }
.sf-pdp-noimg { width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--p-line); }
.sf-pdp-badge { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 2; background: var(--p-action); color: var(--p-on-action); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--p-radius); }
.sf-pdp .sf-pdp-nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--p-line); background: color-mix(in srgb, var(--p-surface) 92%, transparent); color: var(--p-ink); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .10); opacity: 0; transition: opacity .2s; }
.sf-pdp .sf-pdp-nav-prev { inset-inline-start: 12px; }
.sf-pdp .sf-pdp-nav-next { inset-inline-end: 12px; }
[dir="rtl"] .sf-pdp .sf-pdp-nav span { display: inline-block; transform: scaleX(-1); }
.sf-pdp-stage:hover .sf-pdp-nav, .sf-pdp .sf-pdp-nav:focus-visible { opacity: 1; }
.sf-pdp-counter { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 2; font-size: 12px; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--p-surface) 88%, transparent); color: var(--p-ink); padding: 3px 9px; border-radius: 999px; }
.sf-pdp-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-block-end: 2px; }
.sf-pdp-thumb { flex: 0 0 auto; width: 72px; aspect-ratio: var(--p-ratio); padding: 0; border: 1px solid var(--p-line); border-radius: var(--p-radius); background: var(--p-stage); overflow: hidden; cursor: pointer; opacity: .72; transition: opacity .2s, border-color .2s; }
.sf-pdp-thumb img { width: 100%; height: 100%; object-fit: var(--p-fit); display: block; }
.sf-pdp-thumb:hover, .sf-pdp-thumb.gallery-thumb-active { opacity: 1; border-color: var(--p-ink); }
.sf-pdp-thumb:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }

/* ── title, rating, price ────────────────────────────────────────── */
.sf-pdp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--p-muted); }
.sf-pdp-kicker a { color: inherit; text-decoration: none; }
.sf-pdp-kicker a:hover { color: var(--p-accent); }
.sf-pdp-title { font-family: var(--p-head); color: var(--p-ink); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.2; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.sf-pdp-rating { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.sf-pdp-rating:not(:has(*)), .sf-pdp-kicker:not(:has(*)) { display: none; }
.sf-pdp-pricing { display: flex; flex-direction: column; gap: 8px; }
.sf-pdp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.sf-pdp-price { font-size: clamp(24px, 2vw, 30px); font-weight: 700; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.sf-pdp-compare { color: var(--p-muted); font-size: 16px; text-decoration: line-through; }
.sf-pdp-discount { font-size: 12px; font-weight: 700; color: var(--p-on-action); background: var(--p-accent); padding: 3px 8px; border-radius: var(--p-radius); }
.sf-pdp-availability { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; }
.sf-pdp-stock .text-success::before, .sf-pdp-stock .text-danger::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-inline-end: 7px; vertical-align: middle; }
.sf-pdp-left:empty { display: none; }
.sf-pdp-left { color: var(--p-muted); }
.sf-pdp-summary { color: var(--p-muted); line-height: 1.7; margin: 0; max-width: 62ch; }
.sf-pdp-campaign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--p-line); border-radius: var(--p-radius); font-size: 14px; }
.sf-pdp-campaign strong { color: var(--p-accent); }

/* ── options ─────────────────────────────────────────────────────── */
.sf-pdp-opts { display: flex; flex-direction: column; gap: 18px; padding-block: 4px; }
.sf-pdp-option-head { display: flex; align-items: baseline; gap: 8px; margin-block-end: 10px; }
.sf-pdp-option-label { font-size: 13px; font-weight: 700; color: var(--p-ink); }
.sf-pdp-option-label::after { content: ":"; }
.sf-pdp-option-value { border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; color: var(--p-muted); min-width: 0; flex: 1 1 auto; pointer-events: none; }
.sf-pdp-option-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-chip, .sf-pdp .sf-pdp-option-list > li.sf-pdp-swatch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--p-line); border-radius: var(--p-radius); background: var(--p-surface); color: var(--p-ink); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-swatch { padding-inline-start: 8px; width: auto; height: auto; }
.sf-pdp-swatch-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--sf-swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: 0 0 auto; }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-chip:hover, .sf-pdp .sf-pdp-option-list > li.sf-pdp-swatch:hover { border-color: var(--p-ink); }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-chip:focus-visible, .sf-pdp .sf-pdp-option-list > li.sf-pdp-swatch:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-chip.active, .sf-pdp .sf-pdp-option-list > li.sf-pdp-swatch.active { border-color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-ink); }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-chip.disabled, .sf-pdp .sf-pdp-option-list > li.sf-pdp-swatch.disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-chip.disabled { text-decoration: line-through; text-decoration-thickness: 1px; }
.sf-pdp .sf-pdp-option-list > li.sf-pdp-swatch.disabled .sf-pdp-swatch-dot { background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--p-ink) calc(50% - 1px), var(--p-ink) calc(50% + 1px), transparent calc(50% + 1px)); }
.sf-variant-hint { color: #b42318; font-size: 13px; }
.sf-pdp .size-lists.sf-variant-attention > li.sf-pdp-chip:not(.active), .sf-pdp .size-lists.sf-variant-attention > li.sf-pdp-swatch:not(.active) { border-color: #b42318; }

/* ── purchase ────────────────────────────────────────────────────── */
.sf-pdp-buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.sf-pdp-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--p-line); border-radius: var(--p-radius); overflow: hidden; background: var(--p-surface); height: 52px; }
.sf-pdp-qty button { width: 44px; border: 0; background: transparent; color: var(--p-ink); font-size: 18px; cursor: pointer; }
.sf-pdp-qty button:hover { background: color-mix(in srgb, var(--p-ink) 6%, transparent); }
.sf-pdp-qty input { width: 52px; border: 0; border-inline: 1px solid var(--p-line); background: transparent; color: var(--p-ink); text-align: center; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.sf-pdp-qty input::-webkit-outer-spin-button, .sf-pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-pdp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: var(--p-radius); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background-color .15s, color .15s; white-space: nowrap; }
.sf-pdp-btn-primary { flex: 1 1 200px; background: var(--p-action); color: var(--p-on-action); border-color: var(--p-action); }
.sf-pdp-btn-primary:hover { filter: brightness(1.08); color: var(--p-on-action); }
.sf-pdp-btn-secondary { flex: 1 1 160px; background: transparent; color: var(--p-ink); border-color: var(--p-ink); }
.sf-pdp-btn-secondary:hover { background: var(--p-ink); color: var(--p-page); }
.sf-pdp-btn[disabled], .sf-pdp-btn.disabled, .sf-pdp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }
.sf-pdp-quiet { display: flex; flex-wrap: wrap; gap: 18px; }
.sf-pdp-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--p-muted); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.sf-pdp-link:hover { color: var(--p-ink); }

/* ── assurance, specs, meta ──────────────────────────────────────── */
.sf-pdp-assurance { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--p-line); border-radius: var(--p-radius); }
.sf-pdp-assure-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.sf-pdp-assure-item i { font-size: 22px; color: var(--p-accent); line-height: 1; margin-block-start: 1px; }
.sf-pdp-assure-item strong { display: block; color: var(--p-ink); }
.sf-pdp-assure-item span { color: var(--p-muted); }
.sf-pdp-more { color: var(--p-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sf-pdp-specs-title { font-family: var(--p-head); font-size: 15px; margin: 0 0 8px; }
.sf-pdp-spec-list { margin: 0; display: grid; }
.sf-pdp-spec { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding-block: 9px; border-block-end: 1px solid var(--p-line); font-size: 14px; }
.sf-pdp-spec dt { color: var(--p-muted); font-weight: 500; }
.sf-pdp-spec dd { margin: 0; color: var(--p-ink); font-weight: 600; overflow-wrap: anywhere; }
.sf-pdp-meta { display: grid; gap: 6px; font-size: 13px; color: var(--p-muted); padding-block-start: 6px; }
.sf-pdp-meta a { color: var(--p-ink); text-decoration: none; }
.sf-pdp-meta span:first-child { color: var(--p-muted); margin-inline-end: 6px; }
.sf-pdp-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--p-muted); }
.sf-pdp-share ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-pdp-share a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--p-line); border-radius: 50%; color: var(--p-ink); }
.sf-pdp-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--p-muted); }
.sf-pdp-pay ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-pdp-pay img { height: 22px; width: auto; }

/* ── details sections ────────────────────────────────────────────── */
.sf-pdp-details { margin-block-start: clamp(40px, 5vw, 72px); display: grid; gap: clamp(28px, 3vw, 48px); }
.sf-pdp-jump { display: flex; flex-wrap: wrap; gap: 8px 22px; border-block-end: 1px solid var(--p-line); padding-block-end: 12px; }
.sf-pdp-jump a { color: var(--p-muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.sf-pdp-jump a:hover { color: var(--p-ink); }
.sf-pdp-section { scroll-margin-block-start: 110px; min-width: 0; }
.sf-pdp-section > h2 { font-family: var(--p-head); font-size: clamp(19px, 1.6vw, 23px); margin: 0 0 14px; color: var(--p-ink); }
.sf-pdp-section .anb-rich-content, .sf-pdp-section-body { max-width: 72ch; line-height: 1.8; }
.sf-pdp-related { margin-block-start: clamp(48px, 6vw, 84px); }

@media (min-width: 992px) {
    @supports (overflow: clip) { html:has(.sf-pdp), body:has(.sf-pdp) { overflow-x: clip; } }
    .sf-pdp-top { grid-template-columns: minmax(0, var(--p-gallery, 1.1fr)) minmax(0, 1fr); gap: var(--p-gap); align-items: start; }
    .sf-pdp-info { position: sticky; inset-block-start: var(--p-sticky, 96px); }
    .sf-pdp--rail .sf-pdp-gallery.has-thumbs { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
    .sf-pdp--rail .sf-pdp-gallery.has-thumbs .sf-pdp-thumbs { order: -1; flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: min(680px, 80vh); padding-block-end: 0; }
    .sf-pdp--rail .sf-pdp-thumb { width: 100%; }
    .sf-pdp-details--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
    .sf-pdp-details--split > .sf-pdp-jump, .sf-pdp-details--split > .sf-pdp-section--wide { grid-column: 1 / -1; }
}
/* DF-71: the shared product-page script injects `#shop_details_gallery_slider .long-img img { height: auto }` (an id rule); without
   this a photo taller than the frame ratio is cropped top and bottom. The theme's --p-fit still decides contain / cover. */
.sf-pdp #shop_details_gallery_slider.sf-pdp-main .long-img img { height: 100%; max-height: none; }
@media (max-width: 991.98px) {
    .sf-pdp .sf-pdp-nav, .sf-pdp-counter { display: none; }
    .sf-pdp-thumb { width: 64px; }
    /* DF-70: the phone layer makes the swipe surface position: relative and caps .long-img at 100vw; after an image swap the
       inline min-height turns it into a 1:1 box (`.long-img[style*="height"]`). The main image keeps filling the theme frame. */
    body.sf-m .sf-pdp .sf-pdp-main .long-img.sf-m-gallery { position: absolute; inset: 0; max-block-size: none; }
    body.sf-m .sf-pdp .sf-pdp-main .long-img[style*="height"] { aspect-ratio: auto; max-block-size: none; min-height: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-pdp-main .long-img img, .sf-pdp-thumb, .sf-pdp .sf-pdp-nav { transition: none; }
}