/* =========================================================
   Audience PDPs (/shift and /run): one template, one stylesheet.
   Loads after grims.css and offers.css and reuses their buy box, gallery, ticker, table, anatomy,
   cart drawer and sticky bar. Sections alternate bone, ink and blood only. Square corners,
   2px ink borders, flat 8px offset shadows.
   ========================================================= */
.t-pdp { --max: 1280px; --hard: 8px 8px 0 var(--ink); }
.t-pdp [data-offer] { scroll-margin-top: 84px; }

/* Buttons: a 4px shadow that collapses when pressed */
.t-pdp .btn { transition-duration: .08s; }
.t-pdp .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--btn-shadow); }

/* Section chips: thin outline, filled square */
.t-pdp .v2-tag { border-width: 1.5px; }
.pv-tag--bone { border-color: var(--bone); }
.pv-tag--bone::before { background: var(--bone); }

/* ---------- Type: the shout, the mutter (v2-title__alt), the scrawl ---------- */
.pv-shout {
  text-wrap: balance; color: var(--bone);
  font-weight: 900; font-stretch: var(--extended); text-transform: uppercase;
  font-size: clamp(2rem, 6.4vw, 4rem); line-height: .94; letter-spacing: -.015em;
}
.pv-shout__line { display: block; margin-top: .12em; }
.pv-nw { white-space: nowrap; }
.pv-shout--ink { color: var(--ink); }

/* The scrawl: brand script in coral, outlined in ink with a hard shadow so it holds up on bone and blood */
.pv-scrawl {
  display: inline-block; color: var(--coral);
  font-size: 1.18em; line-height: .8;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-5deg);
}

/* ---------- Photo placeholders: the shot list's file name and description until real photos land ---------- */
.pv-ph {
  display: grid; align-content: center; justify-items: center; gap: .7rem;
  width: 100%; aspect-ratio: 1; padding: 1.5rem;
  background: #C9C4C4; color: var(--ink); text-align: center;
}
.pv-ph__file {
  padding: .35em .65em; border: 2px dashed var(--ink);
  font-weight: 800; font-stretch: var(--extended); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
}
.pv-ph__desc { max-width: 34ch; font-size: .9375rem; line-height: 1.4; }
.pv-ph--thumb {
  padding: .2rem; gap: 0;
  font-weight: 800; font-stretch: var(--condensed); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Image frames ---------- */
.pv-frame { position: relative; margin: 0; }
.pv-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pv-frame > img, .pv-frame > .pv-ph {
  border: 2px solid var(--ink); box-shadow: var(--hard);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .pv-frame:hover > img, .pv-frame:hover > .pv-ph { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--ink); }
}

/* ---------- Flash stickers ---------- */
.pv-sticker {
  --r: 8deg;
  position: absolute; z-index: 3; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(var(--r)); pointer-events: none;
}
.pv-sticker svg { width: 100%; height: 100%; color: var(--ink); --flash-fill: var(--paper); }
.pv-sticker--hero { top: 10px; right: calc(var(--gutter) * -1 + 12px); width: 72px; height: 80px; padding: 8px; }
.pv-sticker--photo { --r: -7deg; left: -10px; bottom: -14px; width: 76px; height: 92px; padding: 10px; }
.pv-sticker.is-wobbling { animation: pv-wobble .7s ease-in-out 1; }
@keyframes pv-wobble {
  0%, 100% { transform: rotate(var(--r)); }
  30% { transform: rotate(calc(var(--r) + 2deg)); }
  65% { transform: rotate(calc(var(--r) - 2deg)); }
}

/* =========================================================
   1. Hero
   ========================================================= */
.pv-hero { position: relative; }
.pv-gallery { position: relative; min-width: 0; }
.t-pdp .shop-gallery { position: static; }
.pv-eyebrow, .pv-name, .pv-trust li, .pv-notline {
  font-weight: 700; font-size: .75rem; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase;
}
.pv-eyebrow { color: var(--blood); }
.pv-hero__title {
  margin-bottom: .4rem;
  font-weight: 900; font-stretch: var(--extended); text-transform: uppercase;
  font-size: clamp(2.125rem, 8.2vw, 3rem); line-height: .9; letter-spacing: -.02em;
}
.pv-hero__line { display: block; }
/* The script word leans into the display line; when it wraps to its own line, it climbs back up onto it */
.pv-hero__title .pv-scrawl { margin: -.3em 0 0 .06em; font-size: 1.2em; transform: rotate(-6deg) translateY(.08em); }
.pv-hero__line > .pv-scrawl:first-child { margin: 0 .12em 0 0; }
.t-pdp .shop-info__price strong { font-stretch: var(--extended); font-size: 2rem; }
.t-pdp .shop-info__promise { font-size: 1.0625rem; }
.pv-checks .icon { flex: none; width: 22px; height: 22px; padding: 3px; background: var(--ink); color: var(--coral); }

.pv-fit { margin-top: .15rem; font-size: .875rem; }
.pv-need { margin-top: -.75rem; font-size: .875rem; font-weight: 700; color: var(--blood); }
.pv-need[hidden] { display: none; }
.t-pdp .offer__add[aria-disabled="true"] { opacity: .55; box-shadow: none; transform: none; cursor: not-allowed; }

.pv-trust { list-style: none; margin: -.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
.pv-trust li { display: flex; align-items: center; gap: .45rem; }
.pv-trust .icon { flex: none; width: 20px; height: 20px; stroke-width: 2.2; }

/* Accordions: plus to minus */
.t-pdp .qa summary::after { content: "+"; }
.t-pdp .qa[open] summary::after { content: "\2212"; transform: translateY(-50%); }

@media (max-width: 959px) {
  .t-pdp .shop-gallery .pv-ph { aspect-ratio: 5 / 4; }
}
@media (min-width: 960px) {
  .t-pdp .shop-buy__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  .pv-gallery { position: sticky; top: 88px; }
  .pv-sticker--hero { top: -18px; right: -18px; width: 88px; height: 98px; padding: 10px; }
  .t-pdp .shop-gallery .gallery__track { box-shadow: var(--hard); }
}

/* =========================================================
   2. Ticker: pauses under the pointer
   ========================================================= */
.pv-ticker { pointer-events: auto; }
.pv-ticker:hover .v2-ticker__track { animation-play-state: paused; }

/* =========================================================
   3. The moment
   ========================================================= */
.pv-moment { --alt: var(--blood); background: var(--bone); padding-block: calc(var(--section-y) + 1rem) var(--section-y); }
.pv-moment__grid { display: grid; gap: 3rem; align-items: center; }
.pv-moment__photo { margin-inline: 6px 14px; }
.pv-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .9rem; }
.pv-step { display: grid; grid-template-columns: 34px 1.6rem minmax(0, 1fr); align-items: center; gap: .6rem; font-weight: 800; font-stretch: var(--extended); text-transform: uppercase; font-size: .9375rem; line-height: 1.15; }
.pv-step__art { width: 34px; height: 40px; color: var(--ink); --flash-fill: var(--bone); }
.pv-step__n { font-family: var(--font-accent); font-style: normal; font-weight: 400; font-stretch: 100%; text-transform: none; font-size: 2rem; line-height: 1; color: var(--blood); text-align: center; }
@media (min-width: 600px) {
  .pv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .pv-step { grid-template-columns: 30px 1.4rem minmax(0, 1fr); font-size: .8125rem; }
}
@media (min-width: 960px) {
  .pv-moment__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; }
}

/* =========================================================
   Dark sections: ghosted flash pattern behind the content
   ========================================================= */
.pv-dark { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--bone); }
.pv-dark::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: url("../img/flash-ghost.svg?v=20261028") center / cover no-repeat;
  opacity: .5;
}

/* =========================================================
   4. The feel
   ========================================================= */
.pv-feel { padding-block: var(--section-y); border-bottom: 2px solid var(--ghost); }
.pv-feel .pv-shout { max-width: 18ch; }
.pv-feel .pv-scrawl { -webkit-text-stroke: 0; text-shadow: none; transform: rotate(-4deg); }
.pv-feel__grid { display: grid; gap: 2.5rem; margin-top: 2.75rem; align-items: center; }
.pv-feel__fig { margin: 0; position: relative; }
.pv-feel__fig::before {
  content: ""; position: absolute; z-index: -1; inset: 12% 10%;
  background: radial-gradient(closest-side, rgba(248, 120, 110, .42), rgba(248, 120, 110, 0));
}
.pv-feel__fig img { width: 100%; height: auto; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .45)); }
.pv-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.pv-spec { padding: 1.35rem 1.25rem 1.45rem; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--coral); }
.pv-spec__title { font-weight: 900; font-stretch: var(--extended); text-transform: uppercase; font-size: 1.125rem; line-height: 1; margin-bottom: .5rem; }
.pv-spec p { font-size: .9688rem; line-height: 1.45; }
.pv-notline { margin-top: 2.75rem; color: var(--coral); }
@media (min-width: 640px) { .pv-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .pv-feel__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}

/* =========================================================
   5. Anatomy: hotspots are buttons, linked to the list
   ========================================================= */
.pv-anatomy { --alt: var(--coral); }
.pv-spot { padding: 0; cursor: pointer; font-family: var(--font-sans); transition: transform .15s ease, background-color .15s ease; }
.pv-spot.is-lit { background: var(--bone); transform: scale(1.18); }
.pv-spot.is-lit::after { animation: none; opacity: 0; }
.pv-spot:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.pv-anatomy .legend li { padding: .5rem .6rem; margin: -.5rem -.6rem; border: 2px solid transparent; transition: border-color .15s ease, background-color .15s ease; }
.pv-anatomy .legend li.is-lit { border-color: var(--coral); background: rgba(248, 120, 110, .08); }
@media (prefers-reduced-motion: reduce) { .pv-spot::after { animation: none; } }

/* =========================================================
   6. Head to head: Grims column on ink with a coral offset shadow;
   on phones the three options stack (see the max-width: 699px block)
   ========================================================= */
.pv-compare { --alt: var(--blood); }
.pv-compare__head { position: relative; max-width: none; }
.pv-corner { position: absolute; right: 0; top: -34px; width: 84px; height: auto; color: var(--ink); --flash-fill: var(--bone); transform: rotate(-8deg); }
.pv-vs-scroll { overflow-x: auto; margin-top: 2.25rem; padding: 0 12px 12px 0; }
.pv-vs { margin-top: 0; min-width: 560px; }
.pv-vs tbody th { width: 28%; }
.pv-vs td { width: 24%; }
.pv-vs .is-us { box-shadow: 8px 8px 0 var(--coral); }
.pv-vs thead .is-us { box-shadow: 8px 8px 0 var(--coral); }
.pv-vs tbody tr:last-child .is-us { box-shadow: 8px 8px 0 var(--coral); border-bottom-color: var(--ink); }
.pv-vs .them .icon { color: var(--blood); }
.pv-yes { display: inline-flex; align-items: center; gap: .35rem; }
.pv-verdict { margin-top: 2rem; text-align: right; }
.pv-verdict .accent { display: inline-block; color: var(--blood); font-size: clamp(1.6rem, 3.4vw, 2.25rem); line-height: 1; transform: rotate(-3deg); }
/* Phones: no sideways scroll. The option names pin under the site header (64px + 1px border);
   each feature gets a full-width label with the three answers side by side under it */
@media (max-width: 699px) {
  .pv-vs-scroll { overflow: visible; padding: 0; }
  .pv-vs, .pv-vs thead, .pv-vs tbody { display: block; }
  .pv-vs { min-width: 0; font-size: .875rem; }
  .pv-vs tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .5rem; }
  .pv-vs th, .pv-vs td { width: auto; padding: .7rem .6rem; border-bottom: 0; }
  .pv-vs thead { position: sticky; top: 65px; z-index: 3; background: var(--bone); border-bottom: 3px solid var(--ink); }
  .pv-vs thead th { display: flex; align-items: flex-end; padding-block: .8rem; font-size: .75rem; line-height: 1.15; }
  .pv-vs thead th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pv-vs thead .is-us { box-shadow: none; }
  .pv-vs tbody tr { align-items: center; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
  .pv-vs tbody th { grid-column: 1 / -1; width: auto; padding: 1.1rem 0 .6rem; font-size: .75rem; font-stretch: 100%; letter-spacing: .04em; }
  .pv-vs tbody .is-us, .pv-vs tbody tr:last-child .is-us { align-self: stretch; display: flex; align-items: center; box-shadow: 4px 4px 0 var(--coral); }
}
@media (min-width: 960px) {
  .pv-corner { top: 50%; width: 190px; transform: translateY(-40%) rotate(-8deg); }
  .pv-compare__head .v2-title { max-width: 48rem; }
}

/* =========================================================
   7. The ritual: blood band, paper cards
   ========================================================= */
.pv-ritual { background: var(--blood); color: var(--bone); padding-block: var(--section-y); }
.pv-ritual .pv-shout { margin-inline: auto; max-width: 16ch; }
.pv-ritual .pv-scrawl { display: block; width: fit-content; margin: .12em auto 0; }
.pv-cards { color: var(--ink); }
.pv-card .shop-step__num { font-size: 1.9rem; color: var(--blood); }
.pv-card .shop-step__art { height: 70px; --flash-fill: var(--paper); }

/* =========================================================
   8. Proof: no reviews yet, the guarantee instead
   ========================================================= */
.pv-proof { --alt: var(--coral); --focus: var(--coral); --btn-shadow: var(--blood); padding-block: var(--section-y); }
.pv-proof .shop-seal { background: var(--ink); }
.pv-small { font-size: .875rem; opacity: .7; }

/* =========================================================
   9. Ask the reaper
   ========================================================= */
.pv-faq { background: var(--bone); }
.pv-faq__art { color: var(--ink); --knock: var(--bone); }
/* The brief puts the reaper under the headline on desktop; phones get a small one beside it */
@media (max-width: 959px) {
  .pv-faq .faq__art { display: block; position: absolute; right: 0; top: 0; height: 76px; width: auto; }
  .pv-faq .section-head h2 { padding-right: 84px; }
}
.pv-faq .pv-shout .pv-scrawl { font-size: 1.25em; }

/* =========================================================
   10. Final band and footer
   ========================================================= */
.pv-final { color: var(--bone); }
.pv-signoff .accent { font-size: 1.6rem; line-height: 1; color: var(--blood); }

/* Sticky bar: pack and price in one line, savings under it */
.pv-sticky .sticky-cta__text strong span { color: var(--coral); }
.pv-sticky__save { display: block; color: var(--bone); }

/* =========================================================
   Motion off for anyone who asked for less
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .pv-ticker .v2-ticker__track { animation: none; }
  .pv-sticker.is-wobbling { animation: none; }
  .pv-frame > img, .pv-frame > .pv-ph, .t-pdp .btn { transition: none; }
  .pv-frame:hover > img, .pv-frame:hover > .pv-ph { transform: none; box-shadow: var(--hard); }
}