/* ══════════════════════════════════════════════════════════════════════════
   Vendoline PDP — SHARED FOUNDATION (v1_42)
   ══════════════════════════════════════════════════════════════════════════
   Five templates, five genuinely different page ARCHITECTURES. This file
   holds only what they share:

     · a palette layer bound to the active theme's tokens (so all five
       follow the theme + its Light/Dark scheme)
     · the persistent purchase bar
     · UX guarantees applied to every template, from Baymard's 2026
       product-page benchmark: size/variant choices exposed as real buttons
       (57% of sites hide them in dropdowns), touch targets ≥ 44px, visible
       focus rings, and reachable price + CTA on mobile
     · shared gallery chrome

   Each template file then imposes its own architecture. They do not share
   a layout — that was the flaw in the previous generation.
   ══════════════════════════════════════════════════════════════════════════ */

body[class*="ptpl-"] {
    --pdp-canvas: var(--bg, #fff);
    --pdp-panel: var(--surface, #fff);
    --pdp-panel-2: var(--surface-2, var(--bg-gray, #f5f6f8));
    --pdp-ink: var(--heading, var(--text, #14161c));
    --pdp-body: var(--text, #14161c);
    --pdp-dim: var(--text-muted, #6d7482);
    --pdp-line: var(--border, #e6e8ee);
    --pdp-line-2: var(--border-dark, var(--border, #d8dbe3));
    --pdp-acc: var(--primary, #e53935);
    --pdp-acc-2: var(--accent, var(--primary, #e53935));
    --pdp-r: 12px;
    --pdp-disp: inherit;
    --pdp-track: -0.02em;
    --pdp-weight: 800;
    --pdp-case: none;
    --pdp-gap: 40px;
    --pdp-eyebrow: .22em;
}

/* ── UX floor — applied to every template ─────────────────────────────── */
/* Variant choices must be visible buttons, never hidden in a select. */
body[class*="ptpl-"] .variant-option,
body[class*="ptpl-"] .option-btn,
body[class*="ptpl-"] .size-option {
    min-height: 44px; min-width: 44px;
    border-radius: calc(var(--pdp-r) * .6);
    border: 1.5px solid var(--pdp-line-2);
    background: var(--pdp-panel); color: var(--pdp-ink);
    font-weight: 600; transition: border-color .18s, background .18s, color .18s;
}
body[class*="ptpl-"] .variant-option:hover,
body[class*="ptpl-"] .option-btn:hover { border-color: var(--pdp-acc); }
body[class*="ptpl-"] .variant-option.active,
body[class*="ptpl-"] .option-btn.active,
body[class*="ptpl-"] .variant-option.selected {
    background: var(--pdp-ink); color: var(--pdp-canvas); border-color: var(--pdp-ink);
}
/* Out-of-stock choices stay visible but read as unavailable, so nobody
   discovers the bad news only after opening a menu. */
body[class*="ptpl-"] .variant-option[disabled],
body[class*="ptpl-"] .variant-option.out-of-stock {
    opacity: .45; text-decoration: line-through; cursor: not-allowed;
}
body[class*="ptpl-"] .btn-add-cart { min-height: 52px; }
body[class*="ptpl-"] a:focus-visible,
body[class*="ptpl-"] button:focus-visible,
body[class*="ptpl-"] .thumb:focus-visible {
    outline: 2px solid var(--pdp-acc); outline-offset: 2px;
}

/* ── Persistent purchase bar ──────────────────────────────────────────── */
.pdp-buybar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 120;
    background: color-mix(in srgb, var(--pdp-panel) 96%, transparent);
    border-top: 1px solid var(--pdp-line);
    backdrop-filter: saturate(180%) blur(14px);
    transform: translateY(105%); transition: transform .3s cubic-bezier(.22,.8,.3,1);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    display: none;
}
body.pdp-has-buybar .pdp-buybar { display: block; }
.pdp-buybar.is-on { transform: none; }
.pdp-buybar__in { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.pdp-buybar__img { width: 44px; height: 44px; object-fit: cover; border-radius: calc(var(--pdp-r) * .5); flex-shrink: 0; }
.pdp-buybar__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pdp-buybar__txt strong { font-size: 13.5px; color: var(--pdp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdp-buybar__price { font-size: 15px; font-weight: 800; color: var(--pdp-acc); }
.pdp-buybar__btn {
    flex-shrink: 0; min-height: 46px; padding: 0 26px; border: 0; cursor: pointer;
    border-radius: calc(var(--pdp-r) * .8); background: var(--pdp-acc); color: #fff;
    font-size: 14.5px; font-weight: 800;
}
@media (max-width: 560px) { .pdp-buybar__img { display: none; } .pdp-buybar__btn { padding: 0 18px; } }

/* ── Shared gallery chrome (architecture comes from the skins) ────────── */
body[class*="ptpl-"] .gallery-main { position: relative; overflow: hidden; background: var(--pdp-panel-2); }
body[class*="ptpl-"] .gallery-thumbs .thumb { cursor: pointer; overflow: hidden; background: var(--pdp-panel-2); transition: opacity .2s, box-shadow .2s, border-color .2s; }
body[class*="ptpl-"] .gallery-nav-btn,
body[class*="ptpl-"] .gallery-zoom-btn {
    background: color-mix(in srgb, var(--pdp-panel) 90%, transparent);
    color: var(--pdp-ink); border: 1px solid var(--pdp-line);
    min-width: 40px; min-height: 40px;
}

/* ── Masthead (templates opt in) ──────────────────────────────────────── */
.pdp-masthead { display: none; }
body[class*="ptpl-"].pdp-has-masthead .pdp-masthead { display: block; }
body[class*="ptpl-"].pdp-has-masthead .product-info > h1 { display: none; }
.pdp-mast-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: var(--pdp-eyebrow); text-transform: uppercase; color: var(--pdp-dim); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdp-mast-title { margin: 12px 0 0; font-family: var(--pdp-disp); line-height: .99; font-weight: var(--pdp-weight); letter-spacing: var(--pdp-track); text-transform: var(--pdp-case); color: var(--pdp-ink); }
.pdp-mast-sub { margin: 12px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--pdp-dim); }

/* ── Advanced-content sections: shared typography only ───────────────── */
body[class*="ptpl-"] .pdp-sections { display: flex; flex-direction: column; }
body[class*="ptpl-"] .pdp-sec { margin: 0 0 var(--pdp-gap); }
body[class*="ptpl-"] .pdp-sec:last-child { margin-bottom: 0; }
body[class*="ptpl-"] .pdp-sec .m-head h2 { font-family: var(--pdp-disp); font-weight: var(--pdp-weight); letter-spacing: var(--pdp-track); text-transform: var(--pdp-case); color: var(--pdp-ink); }
body[class*="ptpl-"] .pdp-sec .m-head span { color: var(--pdp-dim); }
body[class*="ptpl-"] .pdp-sec .ft b { color: var(--pdp-ink); }
body[class*="ptpl-"] .pdp-sec .ft > span:not(.ft-i) { color: var(--pdp-dim); }
body[class*="ptpl-"] .pdp-sec .ac summary { color: var(--pdp-ink); min-height: 48px; }
body[class*="ptpl-"] .pdp-sec .ac-b { color: var(--pdp-dim); }
body[class*="ptpl-"] .pdp-sec .spec th { color: var(--pdp-dim); border-color: var(--pdp-line); }
body[class*="ptpl-"] .pdp-sec .spec td { color: var(--pdp-body); border-color: var(--pdp-line); }
body[class*="ptpl-"] .pdp-sec .chapter h3 { font-family: var(--pdp-disp); font-weight: var(--pdp-weight); letter-spacing: var(--pdp-track); color: var(--pdp-ink); }
body[class*="ptpl-"] .pdp-sec .chapter p { color: var(--pdp-dim); }
body[class*="ptpl-"] .pdp-sec .ch-no { color: var(--pdp-acc); letter-spacing: var(--pdp-eyebrow); }