/* ============================================================
   Product module — single ps_product, its lightbox and its
   consultation modal. Loaded only on is_singular('ps_product').
   Tokens come from style.css; nothing here defines a colour.
   ============================================================ */

/* ---------- The page ---------- */

.ps-product .ps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-xxl);
  align-items: start;
  padding: var(--space-xxl) var(--gutter) var(--space-section);
}

/* Which side the image column sits on. The markup order never changes — only
   the columns swap — so the images stay first when the grid collapses and a
   screen reader always meets the piece before the prose about it. */
.ps-layout--media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.ps-layout--media-right .ps-media { grid-column: 2; grid-row: 1; }
.ps-layout--media-right .ps-info  { grid-column: 1; grid-row: 1; }

/* The shape of every image of a product — set once on the article, read by
   each frame. Squared is the house default; the other two are opt-in. */
.ps-shape-square  { --ps-radius: var(--radius-none); }
.ps-shape-rounded { --ps-radius: 10px; }
.ps-shape-circle  { --ps-radius: var(--radius-pill); }

.ps-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--ps-radius, 0);
  background: var(--color-linen);
}

.ps-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* A circle needs a square box to be a circle at all, so those two shapes crop. */
.ps-shape-circle .ps-frame { aspect-ratio: 1 / 1; }
.ps-shape-circle .ps-frame img { height: 100%; object-fit: cover; }

/* ---------- Images ---------- */

/* The main image and the thumbnails wear the house passe-partout (.wb-imgframe
   in assets/css/modules.css) — a hairline rule with a 6px gap — so a product
   reads like every other image on the site. The button carries the frame; the
   .ps-frame inside it carries the shape and the crop. */
.ps-media-main {
  display: block;
  width: 100%;
  background: transparent;
  cursor: zoom-in;
  transition: opacity 200ms ease-out;
}

.ps-media-main:hover { opacity: 0.92; }

/* A circular product takes a circular mount, main image and thumbnails alike. */
.ps-shape-circle .ps-media-main,
.ps-shape-circle .ps-media-thumbs button { border-radius: var(--radius-pill); }
.ps-shape-rounded .ps-media-main,
.ps-shape-rounded .ps-media-thumbs button { border-radius: 14px; }

.ps-media-thumbs {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.ps-media-thumbs button {
  display: block;
  width: 100%;
  background: transparent;
  cursor: zoom-in;
  transition: opacity 200ms ease-out;
}

.ps-media-thumbs button:hover { opacity: 0.85; }

/* Every thumbnail is the same square whatever the file behind it, the way the
   circle shape already normalised them — portrait and landscape shots sit in
   one even row instead of a ragged one. */
.ps-media-thumbs .ps-frame { aspect-ratio: 1 / 1; }
.ps-media-thumbs .ps-frame img { height: 100%; object-fit: cover; }

.ps-media-main:focus-visible,
.ps-media-thumbs button:focus-visible {
  outline: 1px solid var(--color-gold-ink);
  outline-offset: 3px;
}

/* ---------- The piece described ---------- */

.ps-info > * + * { margin-top: var(--space-md); }
.ps-info h1 { margin-top: var(--space-xs); }

.ps-price {
  margin: 0;
  color: var(--color-gold-ink);
  letter-spacing: 0.4px;
}

.ps-prose p:first-child { margin-top: 0; }
.ps-prose p:last-child { margin-bottom: 0; }

.ps-details {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-hairline);
}

.ps-details .ps-prose { margin-top: var(--space-sm); }

/* Under the secondary images the block opens the column rather than closing a
   text flow, so it needs less air above it. */
.ps-media .ps-details { margin-top: var(--space-lg); }

.ps-details ul {
  margin: 0;
  padding-left: 1.1em;
}

.ps-cta { margin-top: var(--space-xl); }

/* ---------- The rest of the collection ---------- */

.ps-related {
  padding: var(--space-xxl) 0 var(--space-section);
  border-top: 1px solid var(--color-hairline);
  background: var(--color-linen);
}

.ps-related h2 { padding: 0 var(--gutter); }

.ps-related-rail {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0 var(--gutter) var(--space-md);
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.ps-related-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.ps-related-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ps-related-card .wb-imgframe { display: block; }

.ps-related-media { background: var(--color-ivory); }

.ps-related-card a:hover .ps-related-media { opacity: 0.92; }

.ps-related-title {
  display: block;
  margin-top: var(--space-sm);
  color: var(--color-ink);
}

.ps-related-price {
  display: block;
  margin-top: var(--space-xxs);
  color: var(--color-gold-ink);
}

/* The overlays this page opens — the lightbox and the consultation modal —
   are both site-wide now and styled in css/overlays.css.

*/

/* ---------- Narrow ---------- */

@media (max-width: 900px) {
  .ps-product .ps-layout,
  .ps-product .ps-layout--media-right {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
  }
  /* Stacked, both sides read the same: images, then the piece described. */
  .ps-layout--media-right .ps-media { grid-column: 1; grid-row: 1; }
  .ps-layout--media-right .ps-info  { grid-column: 1; grid-row: 2; }
  .ps-related { padding: var(--space-xl) 0 var(--space-xxl); }
  .ps-related h2,
  .ps-related-rail { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .ps-related-card { flex-basis: 220px; }
}