/* Product page + write review. Tokens only. */

/* ---- app bar floats over the hero ---- */
.pdp-bar { background: transparent; height: calc(var(--appbar-h) + var(--safe-t)); min-height: 0; margin-bottom: calc((var(--appbar-h) + var(--safe-t)) * -1); }
.pdp-bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pdp-cart { position: relative; }
.pdp-count { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full);
             background: var(--accent-500); color: var(--ink-900); font-size: var(--fs-caption); font-weight: 800; display: grid; place-items: center; }
.pdp-count[hidden] { display: none; }
.pdp-count.pop { animation: pop var(--dur-3) var(--spring); }

/* ---- hero ---- */
.pdp { padding-bottom: calc(var(--tabbar-h) + var(--s-8)); }
.pdp:has(+ .pdp-related) { padding-bottom: 0; }   /* related sits outside the grid so the sticky gallery stops at the info column */
.pdp-hero { position: relative; aspect-ratio: 1 / 1; max-height: 70dvh; width: 100%; display: grid; place-items: center;
            background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden; }
.pdp-hero img { width: 100%; height: 100%; object-fit: contain; padding: calc(var(--s-14) + var(--safe-t)) var(--s-8) var(--s-8);
                mix-blend-mode: multiply; }
.pdp-letter { font-size: var(--fs-display); font-weight: 800; color: var(--text-3); text-transform: uppercase; }
.pdp-off { top: auto; bottom: var(--s-4); left: var(--gutter); font-size: var(--fs-small); padding: var(--s-1) var(--s-3); }

/* ---- info ---- */
.pdp-body { padding: var(--s-5) var(--gutter) 0; display: grid; gap: var(--s-5); }
.pdp-crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-2); color: var(--text-3); font-size: var(--fs-small); font-weight: 600; }
.pdp-crumbs a { color: var(--accent-700); font-weight: 700; }
.pdp-name { font-size: var(--fs-title); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--fs-display); letter-spacing: -.02em; }
.pdp-price small { font-size: var(--fs-body); }
.pdp-price .price-was { font-size: var(--fs-body); }
.pdp-stock { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0; font-size: var(--fs-small); font-weight: 700; }
.pdp-stock.is-ok { color: var(--success); }
.pdp-stock.is-low { color: var(--warning); }
.pdp-stock.is-out { color: var(--danger); }
.pdp-pick { margin-top: var(--s-5); }
.pdp-h { font-size: var(--fs-headline); font-weight: 800; letter-spacing: -.01em; margin-bottom: var(--s-3); }
.pdp-facts { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); }
.pdp-facts li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.pdp-facts .ic { color: var(--accent-700); flex: none; }

.pdp-desc { color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; max-width: 65ch; }
.pdp-desc > * + * { margin-top: var(--s-3); }
.pdp-desc ul, .pdp-desc ol { padding-left: var(--s-5); }
.pdp-desc ul { list-style: disc; }
.pdp-desc ol { list-style: decimal; }
.pdp-desc a { color: var(--accent-700); font-weight: 700; text-decoration: underline; }
.pdp-desc h2, .pdp-desc h3, .pdp-desc h4 { color: var(--text); font-weight: 800; }
.pdp-desc img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.pdp-desc table { display: block; max-width: 100%; overflow-x: auto; }
.pdp-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pdp-more { margin-top: var(--s-2); min-height: var(--tap); background: none; border: 0; cursor: pointer; }

/* ---- reviews ---- */
.pdp-head { padding-inline: 0; }
.pdp-rating { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.pdp-rating b { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.02em; }
.stars { display: inline-flex; gap: 2px; color: var(--accent-500); }
.stars .off { color: var(--line); }
.pdp-count-text, .pdp-muted { color: var(--text-3); font-size: var(--fs-small); font-weight: 600; }
.pdp-reviews, .rv-others, .pdp-facts { list-style: none; padding: 0; margin: 0; }
.pdp-facts { padding: var(--s-4); }
.pdp-reviews > li { padding: var(--s-4) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-1); }
.pdp-reviews p { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-body); overflow-wrap: anywhere; }
.pdp-rev-top { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); }
.pdp-rev-top time { color: var(--text-3); font-weight: 600; }

.pdp-related { margin-top: var(--s-8); padding-bottom: calc(var(--tabbar-h) + var(--s-8)); }
.pdp-related .hscroll.prods > .pcard { flex: 0 0 156px; scroll-snap-align: start; }
.pdp-related .hscroll { display: flex; gap: var(--s-3); overflow-x: auto; padding: 0 var(--gutter) var(--s-2); scrollbar-width: none; }
.pdp-related .hscroll::-webkit-scrollbar { display: none; }

/* ---- purchase bar (replaces the tab bar) ---- */
.pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); display: grid; gap: var(--s-2);
        padding: var(--s-3) var(--gutter) calc(var(--s-3) + var(--safe-b)); background: var(--surface);
        border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e-nav); animation: pbar-in var(--dur-3) var(--ease-out); }
@keyframes pbar-in { from { transform: translateY(100%); } }
.pbar-row { display: flex; align-items: center; gap: var(--s-3); }
.pbar-go { flex: 1; justify-content: space-between; min-width: 0; }
.pbar-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.pbar-note { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.pbar-note a { color: var(--accent-700); font-weight: 700; margin-left: var(--s-2); }
.pbar-note[hidden] { display: none; }
[data-page="product"] .toast { bottom: calc(var(--tabbar-h) + var(--s-14) + var(--safe-b)); }
[data-page="product"] .order-pill { bottom: calc(var(--tabbar-h) + var(--s-14) + var(--safe-b)); }

@media (min-width: 768px) {
  .pbar { left: 50%; right: auto; width: min(560px, 92vw); transform: translateX(-50%); bottom: var(--s-4);
          border-radius: var(--r-xl); animation: none; }
}
@container (min-width: 768px) {
  .pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: start; padding-inline: var(--gutter); }
  .pdp-hero { grid-column: 1; position: sticky; top: var(--s-4); border-radius: var(--r-xl); max-height: none; }
  .pdp-body { grid-column: 2; padding-inline: 0; padding-top: 0; }
  .pdp-related { padding-inline: var(--gutter); }
  .pdp-bar { margin-bottom: 0; background: var(--bg); }
}

/* ---- write review ---- */
.rv { padding: var(--s-2) var(--gutter) var(--s-8); display: grid; gap: var(--s-5); max-width: 640px; margin-inline: auto; }
.rv-product { display: flex; align-items: center; gap: var(--s-3); }
.rv-product .thumb { width: 72px; height: 72px; }
.rv-product h2 { font-size: var(--fs-headline); font-weight: 800; overflow-wrap: anywhere; }
.rv-product p { margin: var(--s-1) 0 0; color: var(--text-3); font-size: var(--fs-small); }
.rv-form { display: grid; gap: var(--s-5); }
.rate { border: 0; padding: 0; margin: 0; min-width: 0; }
.rate legend { font-weight: 700; font-size: var(--fs-small); margin-bottom: var(--s-2); padding: 0; }
.rate-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--s-1); }
.rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-stars label { width: var(--tap); height: var(--tap); display: grid; place-items: center; cursor: pointer; color: var(--line);
                    transition: transform var(--dur-1) var(--ease-out), color var(--dur-2) var(--ease-out); }
.rate-stars label .ic { width: 32px; height: 32px; }
.rate-stars label:hover, .rate-stars label:hover ~ label, .rate-stars input:checked ~ label { color: var(--accent-500); }
.rate-stars label:active { transform: scale(.9); }
.rate-stars input:focus-visible + label { outline: 3px solid var(--accent-500); outline-offset: 2px; border-radius: var(--r-full); }
.rv textarea.input { min-height: 140px; padding: var(--s-4); resize: vertical; line-height: var(--lh-body); }
.rv-others { display: grid; gap: 0; }
.rv-others li { padding: var(--s-4) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-1); }
.rv-others p { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }