/* EP Pet Portraits — PDP enrichment sections.
   2026-08 premium redesign: photography-led, serif display headlines, one
   accent (#c41e5c), hairline rules, a single dark "craft" band. No emoji
   icons, no pastel tone rotation, no hover lifts (sticky :hover on iOS). */

/* Display face: self-hosted Playfair Display (variable weight, latin subset).
   The whole site references it via --ep-font-heading but nothing ever loaded
   the font, so serif headings silently fell back to Georgia. */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-latin-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FFFD;
}

:root {
  --ep-pdp-ink:        #1f1f1f;
  --ep-pdp-muted:      #5e5e5e;
  --ep-pdp-hair:       #e7e2da;
  --ep-pdp-cream:      #faf6f0;
  --ep-pdp-cream-border: #efe6da;
  --ep-pdp-accent:     #c41e5c;
  --ep-pdp-dark:       #171310;
  --ep-pdp-dark-ink:   #f5efe8;
  --ep-pdp-dark-muted: #b3a89e;
  --ep-pdp-dark-hair:  rgba(245, 239, 232, 0.16);
  --ep-pdp-dark-accent:#ef7ea8;
  --ep-pdp-serif:      var(--ep-font-heading, 'Playfair Display', Georgia, serif);
  /* Back-compat aliases (older partials/blocks may still reference these) */
  --ep-pdp-text:        #1f1f1f;
  --ep-pdp-text-muted:  #5e5e5e;
  --ep-pdp-border:      #e7e2da;
  --ep-pdp-cream-bg:    #faf6f0;
}

/* ---------- Container ---------- */

.ep-pet-pdp-extra {
  max-width: 1200px;
  margin: -28px auto 0;
  padding: 0 24px 96px;
  color: var(--ep-pdp-ink);
  font-family: inherit;
  line-height: 1.55;
  box-sizing: border-box;
}

.ep-pet-pdp-extra > section {
  margin: 0 0 clamp(64px, 8vw, 104px);
  /* Skip style/layout for off-screen sections at first paint: the page's
     mobile FCP was ~2.5s with 1.4s of it pure Style & Layout over this huge
     below-fold DOM. `auto` intrinsic-size keeps the real height after the
     first render so scroll/CLS stay stable. */
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* Per-section placeholder heights close to reality (measured mobile 390px),
   so the first scroll-down doesn't jump as sections materialize. The `auto`
   keyword swaps in the real height after first render. */
.ep-pet-pdp-extra > .ep-pet-pdp-reviews       { contain-intrinsic-size: auto 1200px; }
.ep-pet-pdp-extra > .ep-pet-pdp-intro         { contain-intrinsic-size: auto 430px; }
.ep-pet-pdp-extra > .ep-pet-pdp-customize     { contain-intrinsic-size: auto 1800px; }
.ep-pet-pdp-extra > .ep-pet-pdp-features      { contain-intrinsic-size: auto 1300px; }
.ep-pet-pdp-extra > .ep-pet-pdp-specs-section { contain-intrinsic-size: auto 1080px; }
.ep-pet-pdp-extra > .ep-pet-pdp-how           { contain-intrinsic-size: auto 1370px; }
.ep-pet-pdp-extra > .ep-pet-pdp-faq           { contain-intrinsic-size: auto 1300px; }
.ep-pet-pdp-extra > .ep-pet-pdp-related       { contain-intrinsic-size: auto 3240px; }

.ep-pet-pdp-extra > section:last-of-type {
  margin-bottom: 0;
}

.ep-pet-pdp-extra h2 {
  font-family: var(--ep-pdp-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--ep-pdp-ink);
  text-wrap: balance;
}

.ep-pet-pdp-extra h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  color: var(--ep-pdp-ink);
}

.ep-pet-pdp-extra p {
  margin: 0;
  font-size: 15px;
  color: var(--ep-pdp-muted);
  line-height: 1.6;
}

/* Eyebrow line above each section title */
.ep-pet-pdp-extra [class$="__eyebrow"] {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ep-pdp-accent);
  margin: 0 0 10px;
}

/* Optional one-line lede under a section title */
.ep-pet-pdp-extra [class$="__lede"] {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 16px;
  text-wrap: balance;
}

/* ---------- Shared bento card ---------- */

.ep-pet-pdp-bento {
  background: #ffffff;
  border: 1px solid var(--ep-pdp-hair);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ep-pet-pdp-bento__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Clips the crop overlay's page-sized scrim shadow to the photo area. */
  overflow: hidden;
}

.ep-pet-pdp-bento__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-pet-pdp-bento__text {
  padding: 20px 24px 22px;
  flex: 0 0 auto;
}

.ep-pet-pdp-bento__text p {
  font-size: 14.5px;
}

/* ---------- Customize (bento) ---------- */

.ep-pet-pdp-customize__bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.ep-pet-pdp-customize__bento .ep-pet-pdp-bento--frames   { grid-column: span 5; }
.ep-pet-pdp-customize__bento .ep-pet-pdp-bento--sizes    { grid-column: span 7; }
.ep-pet-pdp-customize__bento .ep-pet-pdp-bento--crop     { grid-column: span 5; }
.ep-pet-pdp-customize__bento .ep-pet-pdp-bento--preview  { grid-column: span 7; }

.ep-pet-pdp-bento--frames .ep-pet-pdp-bento__media { aspect-ratio: 1 / 1; }

/* Static true-scale size scene (inline SVG; viewBox units are inches) */
.ep-pet-pdp-sizescene {
  background: var(--ep-pdp-cream);
  padding: 8% 6% 4%;
}

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

/* Zoom & crop: real portrait with a quiet crop-frame overlay. The image
   slowly zooms and pans under the FIXED crop grid — reads as pinch-zoom.
   Never pause on hover/touch (sticky :hover freezes it on iOS). */
.ep-pet-pdp-bento--crop .ep-pet-pdp-bento__media { aspect-ratio: 3 / 2; }

.ep-pet-pdp-bento--crop .ep-pet-pdp-bento__media img {
  animation: ep-pdp-cropzoom 7s ease-in-out infinite;
  will-change: transform;
}

/* Zoom in, then wander the frame corner to corner before settling back. */
@keyframes ep-pdp-cropzoom {
  0%, 7%    { transform: scale(1) translate(0, 0); }
  20%, 27%  { transform: scale(1.24) translate(3.5%, 4%); }
  42%, 49%  { transform: scale(1.28) translate(-3.5%, 2.5%); }
  64%, 71%  { transform: scale(1.2) translate(-2%, -3.5%); }
  92%, 100% { transform: scale(1) translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ep-pet-pdp-bento--crop .ep-pet-pdp-bento__media img { animation: none; }
}

.ep-pet-pdp-crop {
  position: absolute;
  inset: 12% 18%;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(23, 19, 16, 0.28);
  pointer-events: none;
}

.ep-pet-pdp-crop::before,
.ep-pet-pdp-crop::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
}

.ep-pet-pdp-crop::before {
  left: 33.33%;
  right: 33.33%;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  background: none;
}

.ep-pet-pdp-crop::after {
  top: 33.33%;
  bottom: 33.33%;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  background: none;
}

.ep-pet-pdp-crop i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2.5px solid #ffffff;
}

.ep-pet-pdp-crop i:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.ep-pet-pdp-crop i:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.ep-pet-pdp-crop i:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.ep-pet-pdp-crop i:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

/* Free preview: fan of real takes from this theme */
.ep-pet-pdp-fan {
  aspect-ratio: 3 / 2;
  background: var(--ep-pdp-cream);
  position: relative;
  overflow: hidden;
}

.ep-pet-pdp-fan img {
  position: absolute;
  width: 34%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 5px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 14px 30px -18px rgba(23, 19, 16, 0.5);
  top: 14%;
}

/* nth-of-type, NOT nth-child: LSCWP lazy-load inserts <noscript> siblings
   after each lazy img, silently shifting nth-child positions. */
.ep-pet-pdp-fan img:nth-of-type(1) { left: 9%;  transform: rotate(-5deg); top: 20%; }
.ep-pet-pdp-fan img:nth-of-type(2) { left: 34%; z-index: 2; }
.ep-pet-pdp-fan img:nth-of-type(3) { left: 59%; transform: rotate(5deg); top: 20%; }

/* ---------- Craft (dark band, ex-features) ---------- */

.ep-pet-pdp-features {
  background: var(--ep-pdp-dark);
  border-radius: 28px;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 56px);
}

.ep-pet-pdp-features__eyebrow { color: var(--ep-pdp-dark-accent) !important; }

.ep-pet-pdp-features h2 { color: var(--ep-pdp-dark-ink); }

.ep-pet-pdp-features .ep-pet-pdp-features__lede { color: var(--ep-pdp-dark-muted); }

.ep-pet-pdp-features__bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.ep-pet-pdp-features__cell {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #221c17;
}

.ep-pet-pdp-features__cell--weave   { grid-column: span 7; }
.ep-pet-pdp-features__cell--hang    { grid-column: span 5; }
.ep-pet-pdp-features__cell--pack    { grid-column: span 5; }
.ep-pet-pdp-features__cell--facts   {
  grid-column: span 7;
  background: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ep-pet-pdp-features__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-pet-pdp-features__cell--weave { aspect-ratio: 3 / 2; }
.ep-pet-pdp-features__cell--hang img,
.ep-pet-pdp-features__cell--pack img { aspect-ratio: 4 / 3; }

.ep-pet-pdp-features__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 22px 18px;
  background: linear-gradient(to top, rgba(13, 10, 8, 0.92) 0%, rgba(13, 10, 8, 0.55) 55%, rgba(13, 10, 8, 0) 100%);
}

.ep-pet-pdp-features__caption h3 {
  color: #ffffff;
  margin: 0 0 2px;
  font-size: 16.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.ep-pet-pdp-features__caption p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

ul.ep-pet-pdp-features__cell--facts {
  list-style: none;
  margin: 0;
  padding: 0 6px;
}

.ep-pet-pdp-features__cell--facts li {
  padding: 18px 0;
  border-top: 1px solid var(--ep-pdp-dark-hair);
}

.ep-pet-pdp-features__cell--facts li:first-child { border-top: 0; }

.ep-pet-pdp-features__cell--facts b {
  display: block;
  color: var(--ep-pdp-dark-ink);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}

.ep-pet-pdp-features__cell--facts span {
  color: var(--ep-pdp-dark-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Specifications (quiet table) ---------- */

.ep-pet-pdp-specs {
  margin: 28px auto 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}

.ep-pet-pdp-specs__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ep-pdp-hair);
}

.ep-pet-pdp-specs__label {
  margin: 0;
  font-weight: 650;
  color: var(--ep-pdp-ink);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 2px;
}

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

/* ---------- How it works (photo steps) ---------- */

.ep-pet-pdp-how__grid {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ep-pet-pdp-how__card {
  background: #ffffff;
  border: 1px solid var(--ep-pdp-hair);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ep-pet-pdp-how__media {
  aspect-ratio: 3 / 2;
  background: var(--ep-pdp-cream);
  /* A taller-than-3:2 image (e.g. the square marquee tile) must not stretch
     the box past its ratio — absolute children make the ratio authoritative. */
  position: relative;
  overflow: hidden;
}

.ep-pet-pdp-how__media > img,
.ep-pet-pdp-how__media > .ep-pet-pdp-how__takes {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Step 3 wall scene: square source in a 3:2 cover — anchor to the bottom so
   the pinned source polaroid survives the crop. */
.ep-pet-pdp-how__media--wall > img { object-position: center bottom; }

/* Step 2: strip of real takes instead of a single photo.
   display:grid must re-win over the absolute-positioning rule above, whose
   display:block outranks the base class selector. */
.ep-pet-pdp-how__media > .ep-pet-pdp-how__takes {
  display: grid;
}

.ep-pet-pdp-how__takes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  background: var(--ep-pdp-cream);
}

.ep-pet-pdp-how__takes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.ep-pet-pdp-how__body-wrap {
  padding: 18px 22px 22px;
}

.ep-pet-pdp-how__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ep-pdp-ink);
  font-weight: 650;
  font-size: 13px;
  color: var(--ep-pdp-ink);
  margin-bottom: 10px;
}

.ep-pet-pdp-how__heading {
  font-size: 17px;
}

.ep-pet-pdp-how__body {
  font-size: 14.5px;
}

/* ---------- FAQ ---------- */

.ep-pet-pdp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  margin: 28px auto 0;
  border-top: 1px solid var(--ep-pdp-hair);
}

.ep-pet-pdp-faq__item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--ep-pdp-hair);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  padding: 0;
}

.ep-pet-pdp-faq__summary {
  margin: 0;
  padding: 0;
  font: inherit;
}

.ep-pet-pdp-faq__btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ep-pdp-ink);
  padding: 18px 4px;
  min-height: 56px;
}

/* Element+class specificity: Kadence's `button:focus` global (lavender bg,
   white text) beats the class-only reset above — pin the quiet look. */
button.ep-pet-pdp-faq__btn:hover,
button.ep-pet-pdp-faq__btn:focus,
button.ep-pet-pdp-faq__btn:active {
  background: transparent;
  color: var(--ep-pdp-ink);
}

button.ep-pet-pdp-faq__btn:focus-visible {
  outline: 2px solid var(--ep-pdp-accent);
  outline-offset: -2px;
}

.ep-pet-pdp-faq__btn::after {
  content: '';
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.ep-pet-pdp-faq__btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .ep-pet-pdp-faq__btn::after { transition: none; }
}

.ep-pet-pdp-faq__panel {
  padding: 0 4px 20px;
  border-top: 0;
}

.ep-pet-pdp-faq__panel[hidden] {
  display: none !important;
}

.ep-pet-pdp-faq__answer {
  font-size: 15px;
  color: var(--ep-pdp-muted);
  padding-top: 0;
  max-width: 720px;
}

.ep-pet-pdp-faq__answer a {
  color: var(--ep-pdp-accent);
  font-weight: 600;
  text-decoration: underline;
}

.ep-pet-pdp-faq__answer p {
  margin: 0 0 8px;
}

.ep-pet-pdp-faq__answer p:last-child {
  margin-bottom: 0;
}

/* FAQ CTA */
.ep-pet-pdp-faq__cta {
  margin: 28px auto 0;
  max-width: 860px;
  background: var(--ep-pdp-cream);
  border: 1px solid var(--ep-pdp-cream-border);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

.ep-pet-pdp-faq__cta-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.ep-pet-pdp-faq__cta-body {
  flex: 1 1 auto;
  min-width: 0;
}

.ep-pet-pdp-faq__cta-heading {
  font-size: 16px;
  margin-bottom: 2px;
}

.ep-pet-pdp-faq__cta-text {
  font-size: 14px;
}

.ep-pet-pdp-faq__cta-link {
  flex-shrink: 0;
  display: inline-block;
  background: var(--ep-pdp-accent);
  color: #ffffff;
  font-weight: 650;
  font-size: 14.5px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
}

.ep-pet-pdp-faq__cta-link:hover,
.ep-pet-pdp-faq__cta-link:focus-visible {
  background: #a51a4e;
  color: #ffffff;
}

/* ---------- Related themes grid ---------- */

.ep-pet-pdp-related__title {
  margin-bottom: 24px;
}

.ep-pet-pdp-related__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ep-pet-pdp-related__card {
  margin: 0;
  padding: 0;
}

/* The memorial page shows only the 5 Classic styles (2026-10-08): one row of
   five on desktop, and the odd last card centred in the 2-column layout,
   instead of a lone orphan card. */
@media (min-width: 981px) {
  .ep-pet-pdp-related__grid[data-count="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 521px) and (max-width: 980px) {
  .ep-pet-pdp-related__grid > .ep-pet-pdp-related__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 18px) / 2);
  }
}

.ep-pet-pdp-related__link {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  outline-offset: 3px;
}

.ep-pet-pdp-related__link:hover,
.ep-pet-pdp-related__link:focus-visible {
  text-decoration: none;
}

.ep-pet-pdp-related__link:hover .ep-pet-pdp-related__img-wrap,
.ep-pet-pdp-related__link:focus-visible .ep-pet-pdp-related__img-wrap {
  box-shadow: 0 16px 30px -18px rgba(31, 31, 31, 0.35);
}

.ep-pet-pdp-related__img-wrap {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--ep-pdp-cream);
  aspect-ratio: 1 / 1;
  transition: box-shadow 0.25s ease;
}

.ep-pet-pdp-related__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-pet-pdp-related__name {
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--ep-pdp-ink);
  padding: 0 6px;
}

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

@media (max-width: 980px) {
  .ep-pet-pdp-extra {
    padding: 0 16px 60px;
  }
  .ep-pet-pdp-customize__bento {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ep-pet-pdp-customize__bento .ep-pet-pdp-bento--frames,
  .ep-pet-pdp-customize__bento .ep-pet-pdp-bento--sizes,
  .ep-pet-pdp-customize__bento .ep-pet-pdp-bento--crop,
  .ep-pet-pdp-customize__bento .ep-pet-pdp-bento--preview {
    grid-column: auto;
  }
  .ep-pet-pdp-features__bento {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ep-pet-pdp-features__cell--weave,
  .ep-pet-pdp-features__cell--hang,
  .ep-pet-pdp-features__cell--pack,
  .ep-pet-pdp-features__cell--facts {
    grid-column: auto;
  }
  .ep-pet-pdp-specs {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ep-pet-pdp-how__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ep-pet-pdp-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ep-pet-pdp-faq__cta {
    flex-wrap: wrap;
    gap: 12px;
  }
  .ep-pet-pdp-faq__cta-link {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .ep-pet-pdp-specs__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  .ep-pet-pdp-related__grid {
    grid-template-columns: 1fr;
  }
  .ep-pet-pdp-extra .ep-pet-pdp-faq__item .dr-btn {
    font-size: 15px;
    padding: 16px 18px;
  }
}

/* When the SPA switches into the editor (body.ep-pet-editor-page is set by
   EditorPage.jsx), the landing marketing/SEO sections must not bleed into the
   editor scene below the app. These belong to the landing view only — the
   standalone /editor/ page never renders them. Hiding here keeps the SEO intro,
   specs, and FAQ crawlable on the landing while removing them from the editor. */
body.ep-pet-editor-page .ep-pet-pdp-extra { display: none !important; }