/* EP Pet Portraits — photo-review section + variant picker.
 *
 * Deliberately NOT part of pdp-extra.css. That stylesheet is enqueued
 * render-blocking on every theme landing page, including production; folding
 * ~8 KB of review styles into it would ship unused render-blocking CSS to prod
 * forever. This file is enqueued only when EP_Pet_Reviews::enabled() is true,
 * which is staging-only by construction.
 *
 * One markup set, three layouts. The layout modifier lives on the section
 * (.ep-pet-pdp-reviews--carousel|wall|grid) and everything below keys off it,
 * so the picker can swap layouts by changing one class — no DOM rebuild, no
 * second copy of 20 images.
 *
 * The --ep-pdp-* tokens come from pdp-extra.css, which is always enqueued on
 * this route. Fallbacks are inlined anyway so this file degrades alone.
 */

.ep-pet-pdp-reviews {
  --ep-rv-accent:   #c41e5c;
  /* Contrast-checked against white: the original #ffb020 / #ded8d0 pair put the
     filled star at 1.83:1 and the empty star at 1.42:1, so a 4-star rating had
     to be counted rather than seen. Both are non-text graphics — 3:1 minimum. */
  --ep-rv-star:     #d98a00;
  --ep-rv-star-off: #bdb7ad;
  /* #2fa980 measured 2.95:1 on white at ~12px semibold — fails AA. */
  --ep-rv-verified: #1a7f5e;
  --ep-rv-card-w:   300px;
  --ep-rv-card-bg:  #ffffff;
  --ep-rv-border:   var(--ep-pdp-border, #e7e2da);
  --ep-rv-text:     var(--ep-pdp-text, #1f1f1f);
  --ep-rv-muted:    var(--ep-pdp-text-muted, #5e5e5e);
  --ep-rv-gap:      20px;
  --ep-rv-radius:   20px;
}

/* ---------- Summary ---------- */

.ep-pet-pdp-reviews__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -12px 0 26px;
  flex-wrap: wrap;
}

.ep-pet-pdp-reviews__avg {
  font-size: 17px;
  font-weight: 700;
  color: var(--ep-rv-text);
}

.ep-pet-pdp-reviews__count {
  font-size: 14px;
  color: var(--ep-rv-muted);
}

/* ---------- Stars ---------- */

.ep-pet-pdp-reviews__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.ep-pet-pdp-reviews__star {
  width: 15px;
  height: 15px;
  display: block;
  fill: var(--ep-rv-star-off);
  flex: none;
}

.ep-pet-pdp-reviews__star.is-on {
  fill: var(--ep-rv-star);
}

/* ---------- Card (shared by all three layouts) ---------- */

.ep-pet-pdp-reviews__track {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ep-pet-pdp-reviews__card {
  position: relative;
  margin: 0;
  background: var(--ep-rv-card-bg);
  border: 1px solid var(--ep-rv-border);
  border-radius: var(--ep-rv-radius);
  overflow: hidden;
  box-shadow: 0 14px 30px -24px rgba(31, 31, 31, 0.45);
}

.ep-pet-pdp-reviews__photo {
  display: block;
  background: var(--ep-pdp-cream-bg, #fdf8f3);
  overflow: hidden;
}

.ep-pet-pdp-reviews__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Carousel and grid crop to a fixed ratio so cards line up regardless of what
   the source photo's aspect ratio happens to be. The wall deliberately does
   NOT — variable heights are what make it read as masonry. */
.ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__photo,
.ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__photo {
  aspect-ratio: 1;
}

.ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__photo img,
.ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__photo img {
  height: 100%;
  object-fit: cover;
}

/* Rating pill straddling the photo/text seam.
   Pulled up with a negative margin rather than absolutely positioned: the pill
   is a sibling of the photo, and the photo's height depends on card width,
   which differs per layout. A computed `top` would need a magic number per
   breakpoint; this needs none. */
.ep-pet-pdp-reviews__card > .ep-pet-pdp-reviews__stars {
  position: relative;
  z-index: 1;
  /* display:flex, not the inherited inline-flex — `margin: auto` only centres a
     block-level box, so as inline-flex the pill hugged the left edge. */
  display: flex;
  width: fit-content;
  margin: -20px auto 0;
  background: var(--ep-rv-card-bg);
  border: 1px solid var(--ep-rv-border);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 6px 14px -8px rgba(31, 31, 31, 0.4);
}

.ep-pet-pdp-reviews__body {
  padding: 16px 20px 20px;
  text-align: center;
  /* Column + margin-top:auto on the attribution pins name/date to the card
     floor. Without it the "Verified buyer" line lands at a different height in
     every card of a row, which is what makes an equal-height row look
     unresolved. */
  display: flex;
  flex-direction: column;
  /* flex:1, NOT height:100% — inside a flex-column card, 100% resolves against
     the card's full height, so the body claimed the whole 577px on top of the
     300px photo and overflowed by ~79px into the card's overflow:hidden. */
  flex: 1;
}

.ep-pet-pdp-reviews__author {
  margin-top: auto !important;
}

/* Long reviews centred produce a heavy rag on both edges. Titles and meta stay
   centred; the body reads left.

   The clamp+min-height pair is what actually removes the dead space in these
   two layouts. Pinning the attribution to the card floor on its own only moves
   the gap from below the text to above the name — the cards are equal height
   either way, so the fix has to equalise the TEXT block: short reviews pad up
   to five lines, long ones truncate at five. */
.ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__text,
.ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__text {
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(5 * 1.6 * 14.5px);
}

.ep-pet-pdp-reviews__card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ep-rv-text);
  line-height: 1.35;
}

.ep-pet-pdp-extra .ep-pet-pdp-reviews__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ep-rv-muted);
  margin: 0 0 14px;
}

.ep-pet-pdp-extra .ep-pet-pdp-reviews__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  margin: 0;
}

.ep-pet-pdp-reviews__name {
  font-weight: 700;
  color: var(--ep-rv-text);
}

.ep-pet-pdp-reviews__verified {
  position: relative;
  padding-left: 19px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ep-rv-verified);
  white-space: nowrap;
}

.ep-pet-pdp-reviews__verified::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ep-rv-verified)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 10px 10px no-repeat;
}

.ep-pet-pdp-extra .ep-pet-pdp-reviews__meta {
  font-size: 12.5px;
  color: var(--ep-rv-muted);
  margin: 6px 0 0;
}

/* ---------- Carousel nav ---------- */

.ep-pet-pdp-reviews__viewport {
  position: relative;
}

.ep-pet-pdp-reviews__nav {
  display: none;
  position: absolute;
  top: calc(var(--ep-rv-card-w) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ep-rv-border);
  background: #fff;
  color: var(--ep-rv-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 8px 20px -10px rgba(31, 31, 31, 0.5);
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.ep-pet-pdp-reviews__nav svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ep-pet-pdp-reviews__nav:hover,
.ep-pet-pdp-reviews__nav:focus-visible {
  background: var(--ep-rv-accent);
  color: #fff;
  outline: none;
}

.ep-pet-pdp-reviews__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.ep-pet-pdp-reviews__nav--prev { left: 8px; }
.ep-pet-pdp-reviews__nav--next { right: 8px; }

/* ---------- Layout: carousel ---------- */

.ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__track {
  display: flex;
  gap: var(--ep-rv-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  /* Must equal padding-left: with snap-align:start and no scroll-padding,
     the browser nudges the track 2px on LOAD to snap the first card — a
     trusted scroll event that permanently freezes LCP in newer Chrome
     (PageSpeed reported NO_LCP for the whole page because of it). */
  scroll-padding-left: 2px;
  scrollbar-width: none;
}

.ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__track::-webkit-scrollbar {
  display: none;
}

.ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__card {
  flex: 0 0 var(--ep-rv-card-w);
  scroll-snap-align: start;
  /* Column context so the body's height:100% resolves and the attribution can
     be pinned to the floor. The wall stays inline-block — `columns` needs it. */
  display: flex;
  flex-direction: column;
}

.ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__nav {
  display: flex;
}

/* ---------- Layout: wall (masonry collage) ---------- */

.ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__track {
  columns: 4;
  column-gap: var(--ep-rv-gap);
}

.ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__card {
  break-inside: avoid;
  margin-bottom: var(--ep-rv-gap);
  display: inline-block;
  width: 100%;
  text-align: center;
}

/* The wall leads with the image: pill sits inside the photo, headline is
   dropped, copy is tighter, so the tiles read as a photo collage. */
.ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__card > .ep-pet-pdp-reviews__stars {
  margin: -34px auto 0;
  border: 0;
  padding: 6px 12px;
}

.ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__body {
  padding: 8px 16px 18px;
}

.ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__card-title {
  display: none;
}

/* ---------- Layout: grid (3-up) ---------- */

.ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px var(--ep-rv-gap);
}

/* Equal-height cards. Left to size themselves the row goes ragged, which reads
   as a broken grid rather than a deliberate one. */
.ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__card {
  display: flex;
  flex-direction: column;
}

.ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__body {
  flex: 1;
}

/* Only the first six cards show in the grid layout — twenty equal cards is a
   wall of text, not a design anyone would ship. The rest stay in the DOM so
   switching layouts in the picker needs no re-request. */
.ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__card:nth-child(n + 7) {
  display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__track {
    columns: 3;
  }
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__card:nth-child(n + 16) {
    display: none;
  }
  .ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__card:nth-child(n + 5) {
    display: none;
  }
  .ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__card {
    --ep-rv-card-w: 260px;
  }
  /* Arrows would overlap the cards once the track reaches the viewport edge;
     the carousel is swipeable on touch anyway. */
  .ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__nav {
    display: none;
  }
}

@media (max-width: 520px) {
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__track {
    columns: 2;
    column-gap: 12px;
  }
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__card {
    margin-bottom: 12px;
  }
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__body {
    padding: 6px 10px 12px;
  }
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__text,
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__meta,
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__verified {
    display: none;
  }
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__card > .ep-pet-pdp-reviews__stars {
    margin-top: -26px;
    padding: 5px 9px;
  }
  /* Twenty cards in two narrow columns runs ~5,400px on a phone — nobody
     scrolls that far past a product. Twelve still reads as a collage. */
  .ep-pet-pdp-reviews--wall .ep-pet-pdp-reviews__card:nth-child(n + 13) {
    display: none;
  }
  .ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__track {
    grid-template-columns: 1fr;
  }
  .ep-pet-pdp-reviews--grid .ep-pet-pdp-reviews__card:nth-child(n + 4) {
    display: none;
  }
  .ep-pet-pdp-reviews--carousel .ep-pet-pdp-reviews__card {
    --ep-rv-card-w: 78vw;
  }
  .ep-pet-pdp-reviews__summary {
    margin-bottom: 20px;
  }
}

/* ---------- Variant picker ----------
   Fixed overlay, rendered on wp_footer outside .ep-pet-pdp-extra so it is
   never captured by a section screenshot. Gated on enabled() AND ?ep_rv.
*/

.ep-rv-picker {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 99999;
  width: min(560px, calc(100vw - 24px));
  background: #1f2130;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.75);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  padding: 12px 14px 14px;
}

.ep-rv-picker[hidden] { display: none; }

.ep-rv-picker__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ep-rv-picker__title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.ep-rv-picker__note {
  font-size: 11px;
  color: #a7abc4;
}

.ep-rv-picker__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.ep-rv-picker__label {
  flex: 0 0 62px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a7abc4;
}

.ep-rv-picker__opts {
  display: flex;
  gap: 5px;
  flex: 1;
  flex-wrap: wrap;
}

.ep-rv-picker__opt {
  flex: 1 1 auto;
  min-width: 62px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #3a3d55;
  background: #2a2d42;
  color: #d7daea;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ep-rv-picker__opt:hover {
  background: #343854;
}

.ep-rv-picker__opt[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: #1f2130;
  font-weight: 700;
}

.ep-rv-picker__vote {
  width: 100%;
  margin-top: 9px;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: #c41e5c;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ep-rv-picker__vote:hover { background: #a91850; }
.ep-rv-picker__vote:disabled { background: #2fa980; cursor: default; }

@media (max-width: 520px) {
  .ep-rv-picker { font-size: 12px; padding: 10px 12px 12px; }
  .ep-rv-picker__label { flex-basis: 52px; }
  .ep-rv-picker__opt { min-width: 54px; padding: 7px 6px; }
}

/* ---------- Video shelf ----------
   Customer clips, above the photo carousel. Only rendered when at least one
   review carries a video, so this CSS is inert until then. Native 9:16 — the
   photos are square, but cropping someone's phone video to match is exactly
   what makes user content look cheap. */
.ep-pet-pdp-reviews__videos{
  max-width: 1152px;
  margin: 0 auto 30px;
  padding: 0 8px;
}
.ep-pet-pdp-reviews__vtrack{
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* One horizontal rail at every width (2026-09-05: on phones the clips used to
   stack vertically — three clips = three screens of scrolling). Snap per clip,
   next clip peeking so the swipe affordance is obvious. */
.ep-pet-pdp-reviews__vtrack{
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 8px;
  padding: 0 8px 6px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ep-pet-pdp-reviews__vtrack::-webkit-scrollbar{ display: none; }
.ep-pet-pdp-reviews__vitem{ scroll-snap-align: start; }
@media (min-width: 760px){
  .ep-pet-pdp-reviews__vtrack{ justify-content: center; }
}
/* 260px reads as a deliberate feature rather than a thumbnail; at 156px the
   play button crowded the frame and the portrait inside the clip was unreadable. */
.ep-pet-pdp-reviews__vitem{ flex: 0 0 260px; }
@media (max-width: 480px){
  .ep-pet-pdp-reviews__vitem{ flex: 0 0 min(260px, 68vw); }
}

/* Poster + big play, before any <video> exists */
.ep-pet-pdp-reviews__vbtn{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;   /* reserves the box up front — no CLS */
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.ep-pet-pdp-reviews__vposter{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ep-pet-pdp-reviews__vposter--blank{ background: #14100e; }
.ep-pet-pdp-reviews__vplay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}
.ep-pet-pdp-reviews__vplay svg{
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.ep-pet-pdp-reviews__vbtn:hover .ep-pet-pdp-reviews__vplay{ transform: scale(1.06); }
.ep-pet-pdp-reviews__vbtn:focus-visible{
  outline: 3px solid var(--ep-rv-accent, #c41e5c);
  outline-offset: 3px;
}

/* The real <video>, swapped in on click */
.ep-pet-pdp-reviews__video{
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
}