/* ============================================================================
   S263a M05: the product page in the P4 structure (docs/design/s262-migration-plan.md, step 5).
   Every rule is scoped to `.p4`, the product page's root, so it outranks the shell sheet without a single !important. Tokens come from page.css; nothing here
   names a colour of its own. Nothing on this page moves by itself (Tal's D11). The edge light of
   D15, its one motion, was removed in S275 (site audit S-05).
   ============================================================================ */

/* ------------------------------------------------------------- gallery (D04) --- */
/* Desktop: the 1:1 main image and the thumbnails in one row under it, the column sticky. */
.p4 .pg-gallery {
  position: sticky;
  top: 5.5rem;
}
.p4 .pg-gallery__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sc-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.p4 .pg-gallery__row li {
  border-radius: var(--sc-r-sm);
  overflow: hidden;
  background: var(--sc-surface);
  aspect-ratio: 1;
}
.p4 .pg-gallery__row li:first-child {
  grid-column: 1 / -1;
  border-radius: var(--sc-r-lg);
}
.p4 .pg-gallery__row picture {
  display: block;
  height: 100%;
}
.p4 .pg-gallery__row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* S231 NOF-096: the row takes focus so the arrow keys scroll it; the ring says where focus is */
.p4 .pg-gallery__row:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Phone: one full width 1:1 strip that snaps a picture at a time, no thumbnails, and a dot per
   picture drawn by the browser from the scroll position (no script). A browser without scroll
   markers gets the same strip without dots. */
@media (max-width: 980px) {
  .p4 .pg-gallery {
    position: static;
    margin-inline: calc(var(--sc-gutter) * -1);
  }
  .p4 .pg-gallery__row {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-marker-group: after;
  }
  .p4 .pg-gallery__row::-webkit-scrollbar {
    display: none;
  }
  .p4 .pg-gallery__row li,
  .p4 .pg-gallery__row li:first-child {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 0;
    /* S276 S-02: the slide is 4:3, the photos' own ratio, and the slot fills it */
    aspect-ratio: 4 / 3;
  }
  .p4 .pg-gallery__row li > .ph,
  .p4 .pg-gallery__row li > .ph-pic {
    aspect-ratio: auto;
    height: 100%;
  }
  .p4 .pg-gallery__row::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.75rem 0;
  }
  .p4 .pg-gallery__row li::scroll-marker {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--sc-hairline-strong);
  }
  .p4 .pg-gallery__row li::scroll-marker:target-current {
    background: var(--sc-ink);
  }
}

/* -------------------------------------------------------------- buy column --- */
.p4 .p4-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p4 .p4-chips li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--tv-line);
  border-radius: 999px;
  background: var(--sc-surface);
  font-size: var(--tv-fs-12);
  font-weight: 600;
  line-height: 1.3;
}

/* the pack picker as a comparison (D09): the name on the left, and on every row, checked or
   not, the price and the per session figure in one right aligned column of the same width */
.p4 .pa-packs {
  position: relative;
}
.p4 .pa-row {
  grid-template-columns: minmax(0, 1fr);
}
.p4 .pa-row__open {
  grid-column: 1 / -1;
}
.p4 .pa-row__head {
  grid-column: 1 / -1;
  gap: var(--sc-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  align-items: center;
}
/* the tag is a pill above the label, so "12 meses" stays on one line (D04, the 12 month card) */
.p4 .pa-row__name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.p4 .pa-row__name > .pa-tag {
  order: -1;
  grid-column: 1 / -1;
}
.p4 .pa-row__name::before {
  grid-column: 1;
}
.p4 .pa-row__quick {
  display: grid;
  justify-items: end;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.p4 .pa-row__quick strong {
  font-size: var(--tv-fs-16);
}
@supports selector(:has(*)) {
  /* the checked row keeps the comparison column; its price is not said twice below it */
  .p4 .pa-row:has(.pa-row__radio:checked) .pa-row__quick {
    display: grid;
  }
  .p4 .pa-row:has(.pa-row__radio:checked) .pa-row__now {
    display: none;
  }
}

/* D15's edge light (an orange bar placed with CSS anchor positioning) is gone since S275 (site
   audit S-05): it sat over the row's border, overran its 12px corners and was absent in Safari
   and Firefox. The checked row draws its own green edge in shell.css, the same in every browser. */

/* Tal's D11: nothing moves by itself here. The travelling glow and the periodic button sweep of
   motion.css are switched off on this page. */
.p4 .pg-pack:has(.pg-tag--accent) .pg-pack__body::after,
.p4 .pg-buy__cta::after {
  animation: none;
  content: none;
}

/* --------------------------------------------------- clear before you pay (P8) --- */
.p4 .p4-claro {
  margin-top: var(--sc-4);
  max-width: 60ch;
}

/* ----------------------------------------------------- results row (held, P4) --- */
.p4 .p4-res {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--sc-3);
}

/* ----------------------------------------------------- which one is yours (P11) --- */
.p4 .p4-choose__img {
  margin: 0 0 var(--sc-3);
  border-radius: var(--sc-r-md);
  overflow: hidden;
}

/* ------------------------------------------------------------ still not sure --- */
.p4 .p4-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sc-5);
  align-items: center;
}
.p4 .p4-help__img {
  margin: 0;
  border-radius: var(--sc-r-lg);
  overflow: hidden;
  grid-row: span 2;
}
@media (max-width: 860px) {
  .p4 .p4-help {
    grid-template-columns: minmax(0, 1fr);
  }
  .p4 .p4-help__img {
    grid-row: auto;
  }
}

/* ------------------------------------------------------------ image frames --- */
/* the span frame of image-slot.ts (`inline`), for a slot inside phrasing content */
.p4 .ph--inline {
  display: block;
  position: relative;
}
.p4 .ph__cap {
  position: absolute;
  inset-inline-start: 4px;
  inset-block-end: 4px;
}
.ph-quiet .p4 .ph__cap {
  display: none;
}
.p4 .pg-sticky__thumb.ph {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  aspect-ratio: 1;
}
.p4 .pg-sticky__thumb .ph__label {
  display: none;
}
/* a session's four step frames, two by two, inside the one link to the guide */
.p4 .p4-how {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-3);
}
.p4 .p4-how .ph {
  margin: 0;
  border-radius: var(--sc-r-md);
}
.p4 .p4-how .ph:last-child {
  align-self: end;
}