/* Product pages (pieces/*.html, built by scripts/build-pieces.mjs): the photo gallery with hover zoom and a
   full-size viewer, the add-to-bag form, reviews, plus the wishlist hearts and the shop filters used on other pages. */

/* ---------- the page ---------- */
.piece{ padding-top:clamp(1.5rem,4vw,2.5rem); }
.piece .crumbs{ margin-bottom:1.25rem; }
.piece-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.piece-info{ display:grid; gap:.85rem; align-content:start; }
.piece-info h1{ margin:0; font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.12; }
.piece-info .eyebrow{ margin:0; }
.piece-info > p{ margin:0; }
.piece-price{ margin:.1rem 0 .2rem; }
.piece-stock{ margin:0; font-size:.88rem; color:var(--ink-soft); min-height:1.4em; }
.piece-stock.is-low{ color:var(--warn-ink); }
.piece-stock.is-out{ color:var(--danger); }
.piece-form .btn-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.piece-form .field small a{ font-size:.85rem; }
.piece-mores{ display:grid; gap:0; border-top:1px solid var(--line); margin-top:.4rem; }
.piece-more{ border-bottom:1px solid var(--line); padding:.2rem 0; }
.piece-more summary{ cursor:pointer; padding:.7rem 0; font-weight:500; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.piece-more summary::-webkit-details-marker{ display:none; }
.piece-more summary::after{ content:"+"; font-size:1.2rem; color:var(--accent); }
.piece-more[open] summary::after{ content:"\2212"; }
.piece-more p{ margin:0 0 .9rem; font-size:.93rem; }
.size-table{ width:100%; border-collapse:collapse; font-size:.9rem; margin:0 0 .6rem; }
.size-table th, .size-table td{ text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line-soft); }
.size-table thead th{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
@media (max-width:860px){ .piece-grid{ grid-template-columns:1fr; } }

/* ---------- the gallery ---------- */
.piece-gallery{ display:grid; gap:.75rem; position:sticky; top:calc(var(--header-h, 80px) + 1rem); }
@media (max-width:860px){ .piece-gallery{ position:static; } .pg-main{ width:100%; } }
.pg-main{ position:relative; width:min(100%, calc((100vh - 240px) * 2 / 3)); margin-inline:auto; }   /* sized to the screen height, so the thumbnails stay in view while the gallery sticks */
.pg-zoom{ display:block; width:100%; padding:0; border:0; background:var(--surface-2, #f4ecee); border-radius:var(--radius); overflow:hidden; cursor:zoom-in; aspect-ratio:2/3; }
.pg-zoom img{ display:block; width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; }
.pg-zoom.is-zoomed img{ transform:scale(2.2); }
.pg-zoom:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.pg-hint{ position:absolute; left:.75rem; bottom:.75rem; padding:.25rem .6rem; border-radius:999px; background:rgba(var(--scrim-rgb),.62); color:#fff; font-size:.75rem; pointer-events:none; }
@media (hover:none), (pointer:coarse){ .pg-hint{ display:none; } }
.pg-thumbs{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.pg-thumb{ display:grid; gap:.25rem; justify-items:center; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; color:var(--ink-soft); font:inherit; font-size:.75rem; }
.pg-thumb img{ width:72px; height:108px; object-fit:cover; border-radius:7px; display:block; }
.pg-thumb[aria-current="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); color:var(--ink); }
.pg-thumb span{ padding-bottom:.15rem; }

/* ---------- the full-size viewer (a <dialog>; not .lightbox, which style.css uses for the lookbook) ---------- */
.pg-viewer{ width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#140e18; color:#fff; }
.pg-viewer::backdrop{ background:rgba(20,14,24,.92); }
.pv-bar{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; gap:.5rem; align-items:center; padding:.6rem .8rem; background:linear-gradient(rgba(20,14,24,.85),rgba(20,14,24,0)); }
.pv-bar [data-lb-count]{ margin-right:auto; font-size:.85rem; color:#e9dfe6; }
.pv-btn{ font:inherit; font-size:.88rem; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.4rem .95rem; cursor:pointer; min-height:40px; }
.pv-btn:hover, .pv-btn[aria-pressed="true"]{ background:rgba(255,255,255,.24); }
.pv-stage{ position:absolute; inset:0; overflow:auto; display:grid; place-items:center; touch-action:pan-x pan-y pinch-zoom; }
.pv-stage img{ max-width:100vw; max-height:100vh; object-fit:contain; cursor:zoom-in; }
.pv-stage.is-zoomed{ place-items:start; }
.pv-stage.is-zoomed img{ max-width:none; max-height:none; width:min(220vw, 1600px); cursor:zoom-out; }
.pv-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(20,14,24,.55); color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.pv-prev{ left:.75rem; } .pv-next{ right:.75rem; }
.pv-btn:focus-visible, .pv-nav:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* ---------- stars ---------- */
.rstars{ display:inline-flex; gap:1px; vertical-align:-2px; }
.rstars svg{ width:1em; height:1em; fill:var(--line); }
.rstars svg.on{ fill:#b07a1f; }
.piece-rating{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.piece-rating a{ color:inherit; }
.card-rating{ font-size:.82rem; color:var(--ink-soft); margin:.15rem 0 0; }
.card-rating .ex{ font-style:italic; }

/* ---------- reviews ---------- */
.rv-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; margin-bottom:1rem; }
.rv-head h2{ margin:0; }
.rv-summary{ margin:0; color:var(--ink-soft); }
.rv-note{ margin:0 0 1rem; padding:.7rem .9rem; border:1px dashed var(--alert-line); border-radius:10px; background:var(--alert-bg); font-size:.88rem; color:var(--ink); }
.rv-list{ display:grid; gap:1rem; margin-bottom:1.5rem; }
.rv-item{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem; display:grid; gap:.4rem; }
.rv-item h3{ margin:0; font-family:var(--font-body); font-size:1rem; font-weight:500; }
.rv-item p{ margin:0; font-size:.94rem; }
.rv-meta{ font-size:.8rem; color:var(--ink-soft); }
.rv-badge{ display:inline-block; padding:0 .45rem; border-radius:999px; font-size:.72rem; font-weight:700; background:#e2f4e9; color:#1f6b40; }
.rv-badge--ex{ background:var(--warn-bg); color:var(--warn-ink); }
.rv-photo{ width:120px; height:auto; border-radius:8px; border:1px solid var(--line); }
.rv-reply{ margin-top:.3rem; padding:.6rem .8rem; border-left:3px solid var(--accent); background:var(--line-soft); border-radius:0 8px 8px 0; font-size:.9rem; }
.rv-write > summary{ display:inline-flex; list-style:none; }
.rv-write > summary::-webkit-details-marker{ display:none; }
.rv-write[open] > summary{ margin-bottom:1rem; }
.rv-write .form{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:clamp(1rem,3vw,1.5rem); }
.rv-stars{ border:0; padding:0; margin:0; }
.rv-stars legend{ padding:0; margin-bottom:.35rem; }
.rv-star-row{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:.15rem; }
.rv-star-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.rv-star-row label{ cursor:pointer; padding:.15rem; border-radius:6px; }
.rv-star-row svg{ fill:var(--line); stroke:#b07a1f; stroke-width:1; display:block; }
.rv-star-row input:checked ~ label svg, .rv-star-row label:hover svg, .rv-star-row label:hover ~ label svg{ fill:#b07a1f; }
.rv-star-row input:focus-visible + label{ outline:3px solid var(--accent); outline-offset:1px; }
.rv-stars.invalid .field-error{ display:block; }
.rv-preview{ max-width:160px; border-radius:8px; margin-top:.5rem; border:1px solid var(--line); }

/* ---------- wishlist hearts ---------- */
.wish-btn{ display:inline-flex; align-items:center; gap:.4rem; }
.wish-btn[aria-pressed="true"] svg{ fill:currentColor; }
.card.product{ position:relative; }
.wish-btn--card{ position:absolute; top:.6rem; right:.6rem; z-index:2; width:40px; height:40px; justify-content:center; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--accent); cursor:pointer; padding:0; }
.wish-btn--card:hover{ background:#fff; }
.wish-btn--card:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.wl-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:1.5rem; }
.wl-actions .form-status{ margin:0; }

/* ---------- shop filters ---------- */
.shop-tools{ display:grid; gap:.8rem; margin:0 0 1rem; }
.shop-tools input[type="search"]{ width:100%; font:inherit; padding:.7rem 1rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); }
.shop-selects{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:center; }
.shop-selects label{ display:inline-flex; gap:.4rem; align-items:center; font-size:.88rem; color:var(--ink-soft); }
.shop-selects select{ font:inherit; font-size:.9rem; padding:.4rem .6rem; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.shop-selects .check input{ width:18px; height:18px; accent-color:var(--accent); }
.shop-count{ display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.shop-count .link-btn{ font-size:.9rem; text-decoration:underline; }
@media (max-width:600px){
  .shop-selects{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem .6rem; }
  .shop-selects label{ flex-direction:column; align-items:stretch; gap:.2rem; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
  .shop-selects select{ width:100%; }
  .shop-selects .check{ grid-column:1/-1; flex-direction:row; align-items:center; justify-content:center; text-transform:none; letter-spacing:0; font-size:.88rem; }
}