/* Product detail page */
.pdp { padding-top: var(--s-5); padding-bottom: var(--s-7); }
@media (min-width: 900px) { .pdp { padding-top: var(--page-top); } }
.pdp__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .pdp__grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; } .pdp__gallery { position: sticky; top: var(--page-top); } }
.pdp__main { aspect-ratio: 4 / 5; border-radius: var(--r-3); position: relative; }
@media (min-width: 900px) { .pdp__main { aspect-ratio: 5 / 6; border-radius: var(--r-4); } }
.pdp__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.pdp__main img.is-active { opacity: 1; }
.pdp__badges { position: absolute; top: 14px; left: 14px; z-index: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.pdp__nav { position: absolute; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--glass-line); backdrop-filter: blur(12px); border-radius: 50%; transform: translateY(-50%); opacity: 0; transition: opacity var(--t-fast), background var(--t-fast); z-index: 1; }
.pdp__nav svg { width: 18px; height: 18px; stroke: var(--fg); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pdp__nav--prev { left: 12px; } .pdp__nav--next { right: 12px; }
.pdp__main:hover .pdp__nav, .pdp__nav:focus-visible { opacity: 1; }
.pdp__nav:hover { background: var(--lime); }
.pdp__nav:hover svg { stroke: var(--lime-ink); }
@media (hover: none) { .pdp__nav { display: none; } }
.pdp__thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; scrollbar-width: none; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumbs button { flex: 0 0 64px; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r-2); opacity: 0.5; border: 1px solid transparent; transition: opacity var(--t-fast), border-color var(--t-fast); }
.pdp__thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--fg); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info { display: grid; gap: var(--s-5); align-content: start; }
.pdp__head { display: grid; gap: var(--s-2); }
.pdp__price { font-family: var(--font-mono); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.pdp__drop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r-2); }
.pdp__row { display: grid; gap: var(--s-3); }
.pdp__label { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--fg-2); }
.pdp__buy { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: center; }
.pdp__buy .btn { min-height: 48px; }
.pdp__save { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; min-height: var(--tap); font-size: var(--text-sm); color: var(--fg-2); padding: 6px 0; transition: color var(--t-fast); }
.pdp__save svg { width: 16px; height: 16px; stroke: currentColor; fill: transparent; stroke-width: 1.8; transition: fill var(--t-fast); }
.pdp__save:hover { color: var(--fg); }
.pdp__save[aria-pressed="true"] { color: var(--lime); }
.pdp__save[aria-pressed="true"] svg { fill: var(--lime); stroke: var(--lime); }
.pdp__facts { padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.pdp__acc .acc__trigger { padding-block: var(--s-4); }
.pdp__list { display: grid; gap: 6px; font-size: var(--text-sm); }
.pdp__list li::before { content: "— "; color: var(--lime); }
.pdp__acc .acc__panel p { font-size: var(--text-sm); }

/* Sticky buy bar (phones) — floats above the dock */
.pdp__bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--dock-h-m) + max(var(--dock-gap-m), env(safe-area-inset-bottom)) + 10px); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 8px 8px 8px 18px; border-radius: var(--r-pill); transform: translateY(160%); opacity: 0; transition: transform var(--t-base) var(--ease-expo), opacity var(--t-fast); }
.pdp__bar.is-on { transform: none; opacity: 1; }
.pdp__bar > div { display: grid; line-height: 1.2; min-width: 0; }
.pdp__bar strong { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .pdp__bar { display: none; } }