/* The product page (/product/{slug}). Gallery left (sticky on desktop), buy column right, then
   related products full width. */

@layer pages {
  .pdp-breadcrumbs { margin-block: var(--space-4); }

  .pdp {
    display: grid;
    gap: var(--space-6);
    align-items: start;
  }

  @media (min-width: 900px) {
    .pdp { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); }
    .gallery { position: sticky; top: var(--space-6); }
  }

  /* Gallery */
  .gallery { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

  .gallery__main {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: var(--mat) solid var(--bp-mat);
    border-radius: 0;
    background: var(--bp-mat);
    box-shadow: var(--shadow-hang);
    cursor: zoom-in;
  }

  /* The whole artwork, always, at its own shape (ADR-0015): a tall piece or a wide one hangs on the
     mat without being cut. The frame keeps one size, so switching photos doesn't make the page jump. */
  @media (min-width: 900px) {
    .gallery__main { aspect-ratio: auto; height: clamp(420px, 74vh, 780px); }
  }

  .gallery__main img { width: 100%; height: 100%; padding: 3%; object-fit: contain; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .2)); }
  .gallery__main--empty { cursor: default; }
  .gallery__main--empty .product-card__monogram { font-size: 140px; }

  .gallery__badge { position: absolute; top: 16px; inset-inline-start: 16px; }

  .gallery__zoom {
    position: absolute;
    inset-inline-end: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-xs);
    background: var(--bp-surface);
    color: var(--bp-ink);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
  }

  .gallery__zoom .icon { font-size: 18px; }

  .gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gallery__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    overflow: hidden;
    border: 4px solid var(--bp-mat);
    border-radius: 0;
    background: var(--bp-mat);
    box-shadow: var(--shadow-sm);
    opacity: .7;
    cursor: pointer;
    transition: opacity var(--dur), box-shadow var(--dur);
  }

  .gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .gallery__thumb:hover { opacity: 1; }
  .gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bp-ink); }

  /* Buy column */
  .buy-box { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

  .buy-box__seller {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--bp-ink-2);
    text-decoration: none;
  }

  .buy-box__seller-mark {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bp-brand-600);
    color: var(--bp-on-primary);
    font-size: 11px;
    font-weight: 700;
  }

  .buy-box__seller-name { color: var(--bp-ink); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .buy-box__seller:hover .buy-box__seller-name { color: var(--bp-brand-600); }

  .buy-box__title { font-size: clamp(34px, 24px + 2.2vw, 56px); font-style: italic; font-weight: 300; line-height: 1.05; }
  /* The SKU, small and quiet under the title: a reference to quote, not a headline. */
  .buy-box__sku { margin-top: calc(var(--space-4) * -1); font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); color: var(--bp-ink-2); }
  .buy-box__summary { margin-top: calc(var(--space-2) * -1); font-size: var(--fs-lg); color: var(--bp-ink-2); text-wrap: pretty; }

  .buy-box__section { display: flex; flex-direction: column; gap: var(--space-3); }
  .buy-box__heading { font-size: var(--fs-xl); }

  /* Seller text, sanitised on save. Only the tags the allow-list lets through need styling. */
  .rich-text { display: flex; flex-direction: column; gap: var(--space-3); color: var(--bp-ink-2); text-wrap: pretty; }
  .rich-text h2, .rich-text h3, .rich-text h4 { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 400; color: var(--bp-heading); }
  .rich-text h2 { font-size: var(--fs-xl); }
  .rich-text h3 { font-size: var(--fs-lg); }
  .rich-text h4 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 700; color: var(--bp-ink); }
  .rich-text strong, .rich-text b { color: var(--bp-ink); }
  .rich-text ul, .rich-text ol { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 22px; }
  .rich-text blockquote { padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--bp-brand-200); font-style: italic; }
  .rich-text hr { border: 0; border-top: 1px solid var(--bp-line); }

  .attr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
  .attr-table tr { border-bottom: 1px solid var(--bp-line); }
  .attr-table tr:first-child { border-top: 1px solid var(--bp-line); }
  .attr-table th { width: 38%; padding: 12px 16px 12px 0; font-weight: 600; text-align: start; vertical-align: top; }
  .attr-table td { padding: 12px 0; color: var(--bp-ink-2); }

  .buy-box__purchase {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--bp-line);
    border-radius: var(--radius-xs);
    background: var(--bp-surface);
    box-shadow: var(--shadow-hang);
    scroll-margin-top: var(--space-6);
  }

  .buy-box__price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
  .buy-box__price { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 300; line-height: 1.1; color: var(--bp-heading); }

  .buy-box__qty-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .buy-box__stock { font-size: var(--fs-sm); }

  .buy-box__original { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 600; color: var(--bp-ink-2); }
  .buy-box__original .icon { font-size: 20px; color: var(--bp-brand-600); }

  .buy-box__actions { display: flex; gap: 10px; }
  .buy-box__add { flex: 1; min-height: 56px; }

  .buy-box__wish {
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--bp-line-strong);
    border-radius: 50%;
    background: var(--bp-surface);
    color: var(--bp-ink);
    cursor: pointer;
  }

  .buy-box__wish:hover { border-color: var(--bp-heart); color: var(--bp-heart); }
  .buy-box__wish[aria-pressed="true"] { color: var(--bp-heart); border-color: var(--bp-heart); }
  .buy-box__wish[aria-pressed="true"] .icon { font-variation-settings: 'FILL' 1; }

  .trust-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--bp-ink-2); }
  .trust-row li { display: inline-flex; align-items: center; gap: 6px; }
  .trust-row .icon { font-size: 18px; color: var(--bp-leaf-700); }

  .pdp-related { margin-top: var(--space-16); }

  /* Lightbox */
  .lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bp-white);
  }

  .lightbox::backdrop { background: var(--bp-scrim); backdrop-filter: blur(6px); }
  .lightbox[open] { display: grid; place-items: center; }

  .lightbox__image {
    max-width: min(92vw, 900px);
    max-height: 86dvh;
    width: auto;
    height: auto;
    border: var(--mat) solid var(--bp-mat);
    box-shadow: var(--shadow-lg);
    background: var(--bp-surface);
  }

  .lightbox__close { position: fixed; top: 16px; inset-inline-end: 16px; }
  .lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); }
  .lightbox__nav--prev { inset-inline-start: 16px; }
  .lightbox__nav--next { inset-inline-end: 16px; }

  .lightbox__count {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--bp-ink);
    color: var(--bp-paper);
    font-size: 13px;
    font-weight: 600;
  }

  /* Phones: once the buy box scrolls away, price and Add to basket stay at the bottom, just above the
     tab bar when it shows (which already keeps clear of the home indicator). */
  .sticky-buy {
    position: fixed;
    inset-inline: 0;
    bottom: var(--tab-bar-h);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px var(--gutter) calc(10px + max(0px, env(safe-area-inset-bottom) - var(--tab-bar-h)));
    border-top: 1px solid var(--bp-line);
    background: var(--bp-surface);
    box-shadow: var(--shadow-lg);
  }

  .sticky-buy__price { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--bp-heading); }

  @media (min-width: 900px) {
    .sticky-buy { display: none; }
  }
}