/* Pearl & Paper: a design's own page (products/<slug>.html), loaded after styles.css and shop.css.
   It is the shop's product window laid out as a page: photos first on phones,
   photos beside the options (staying in view while you scroll) on larger screens. */

.pd-page { max-width: 72rem; margin: 0 auto; padding: 0.4rem 0 1rem; }
.pd-page .pd-stage { height: clamp(260px, 46svh, 420px); }
.pd-page .pd-form h1 { margin: 0; font-size: clamp(1.55rem, 5.5vw, 2rem); line-height: 1.2; text-wrap: balance; }
/* The full summary on its own page (the window shortens it) */
.pd-page .pd-summary { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pd-page .pd-set h2 { margin: 0; padding: 0; font-size: 1.1rem; }
.pd-page .pd-set-card { text-decoration: none; }
/* Taken out of the shop since the page was made, or the shop couldn't load: no buying here */
.pd-form.is-off .pd-fields, .pd-form.is-off .pd-sample, .pd-form.is-off .pd-buy-row { display: none; }
.pd-form.is-off .pd-error a { color: inherit; text-underline-offset: 2px; }
.pp-more-designs { margin: 2rem 0 0; }

@media (min-width: 760px) {
  .pd-page { padding: 1.2rem 1rem 2rem; }
  .pd-page .pd-grid { height: auto; gap: 1rem; align-items: start; }
  .pd-page .pd-media { position: sticky; top: calc(var(--bar-h, 69px) + 1rem); height: min(calc(100svh - var(--bar-h, 69px) - 2rem), 42rem); padding: 0; }
  .pd-page .pd-stage { height: calc(100% - 1.5rem); padding-inline: 0; scroll-padding-inline: 0; }
  .pd-page .pd-thumbs { padding-inline: 0; }
  .pd-page .pd-form { overflow: visible; padding: 0.6rem 0 0 1.4rem; }
  .pd-page .pd-form h1 { padding-right: 0; }
  .pd-page .pd-buy { margin: 0.2rem 0 0; padding: 0.8rem 0 1rem; }
  .pd-page .pd-set-row { margin: 0; padding: 0 0 0.3rem; }
  .pd-page .pd-arrow.prev { left: 0.6rem; }
  .pd-page .pd-arrow.next { right: 0.6rem; }
}

/* The discount codes tag sits above the pinned "Add to basket" bar */
.product-page .offers-btn { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }