/* ==========================================================================
   Varp: product page
   Breadcrumb, gallery (swap and zoom), product information.
   ========================================================================== */

.product { padding-block-start: clamp(1rem, 2vw, 1.5rem); }

.crumbs { margin-block-end: clamp(1rem, 2vw, 1.5rem); font-size: var(--fs-small); color: var(--ink-2); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.crumbs__list li + li::before { content: "/"; margin-inline-end: 0.6rem; }
.crumbs__list li { display: flex; align-items: center; }
.crumbs [aria-current] { color: var(--ink); }

.product__inner { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }

/* ---------- Gallery
   Without scripts both photos are shown, one under the other. With scripts the frame stacks them,
   shows one, and adds thumbnails and zoom. */
.gallery { display: grid; gap: 0.75rem; }
.gallery__frame { position: relative; display: grid; gap: 0.75rem; }
.gallery__img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg-2); }
.gallery__zoom, .gallery__thumbs { display: none; }

.js .gallery__frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); cursor: zoom-in; }
.js .gallery__img { position: absolute; inset: 0; block-size: 100%; opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); will-change: transform; }
.js .gallery__img.is-active { opacity: 1; view-transition-name: product-photo; }
/* Zoomed: product.js moves the photo with a transform that follows the pointer. */
.js .gallery__frame.is-zoomed { cursor: zoom-out; touch-action: none; }
.js .gallery__frame.is-zoomed .gallery__img { transition: opacity var(--dur-2) var(--ease-out), transform 0.12s linear; }
.js .gallery__zoom { display: inline-grid; position: absolute; inset-block-end: 0.75rem; inset-inline-end: 0.75rem; background: var(--bg); }
.gallery__zoom-out { display: none; }
.gallery__zoom[aria-pressed="true"] .gallery__zoom-out { display: block; }
.gallery__zoom[aria-pressed="true"] .gallery__zoom-in { display: none; }

.js .gallery__thumbs { display: flex; gap: 0.5rem; }
.gallery__thumb { position: relative; inline-size: 4.5rem; padding: 0; border: 0; background: var(--bg-2); cursor: pointer; }
.gallery__thumb img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery__thumb::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -0.4rem; block-size: 2px; background: var(--ink); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
.gallery__thumb[aria-pressed="true"]::after { transform: none; }

/* ---------- Information */
.product__info { display: grid; gap: 1rem; }
.product__title { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem); }
.product__price { font-size: 1.375rem; font-weight: 600; }
.product__summary { max-inline-size: 48ch; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-2); }
.product__info .buy { margin-block-start: 0.75rem; }
.product__more { margin-block-start: 0.5rem; }
.product__details { display: grid; gap: 0.3rem; padding-inline-start: 1.1rem; list-style: disc; }

@media (min-width: 48rem) {
  .product__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
  .gallery { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
  .gallery__frame { grid-column: 1 / -1; }
  .js .gallery__frame { grid-column: 2; grid-row: 1; }
  .js .gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; }
  .gallery__thumb::after { inset-inline: auto -0.4rem; inset-block: 0; inline-size: 2px; block-size: auto; transform: scaleY(0); }
  .product__info { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); max-inline-size: 34rem; }
}