/* =============================================================
   Pawshtails — single product page (PDP) styles.

   Extracted byte-for-byte from mockups/pawshtails-pdp-harness.html
   <style> block (lines 15–2397 of the mockup). Enqueued in
   functions.php only on is_product().

   DO NOT edit per-page tweaks here — append PDP-specific overrides
   at the bottom of this file, never inside the mockup block.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Sen:wght@400;500;600;700;800&family=Caveat:wght@400;500;600;700&display=swap');

/* ALLENOIRE — self-hosted WOFF2 from the theme's assets/fonts/ folder.
   Relative URL travels with the theme so the same file works on both
   staging + live. Fraunces (loaded above via Google Fonts) is the
   visual fallback if this file fails to load. */
@font-face {
  font-family: 'Allenoire';
  src: url('../fonts/allenoire-allenoire-regular-400-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Brand */
  --brand-orange: #FF4E00;
  --brand-orange-dark: #CC3E00;
  --brand-orange-light: #FF7333;
  --brand-cream: #FAF5EE;
  --brand-cream-warm: #F0E6D6;

  /* Product colours — official brand hex codes */
  --product-khaki: #4c543b;
  --product-pink: #ba3283;
  --product-black: #231f20;
  --product-emerald: #1e7262;
  --product-crimson: #bc1e39;
  --product-vivid-orange: #ef6129;
  --product-teal: #12919b;
  --product-purple: #66328e;
  --product-blue: #0c35e2;

  /* Neutrals */
  --white: #FFFFFF;
  --neutral-100: #F7F5F2;
  --neutral-200: #E8E4DE;
  --neutral-300: #C9C2B8;
  --neutral-500: #8A857C;
  --neutral-700: #5A554D;
  --neutral-900: #1A1A1A;

  /* Functional */
  --success: #00B67A;

  /* Fonts */
  --font-display: 'Allenoire', 'Fraunces', Georgia, serif;
  --font-body: 'Sen', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-accent: 'Caveat', cursive;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Spacing — MOBILE-FIRST. Sections breathe but don't gape. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.75rem;
  --space-8: 2.5rem;
  --space-10: 3.5rem;
  --space-12: 4.5rem;
  --space-16: 6rem;

  /* Section padding tokens */
  --section-y: var(--space-6);   /* mobile section vertical padding */
  --section-x: var(--space-5);    /* mobile horizontal padding */

  /* Motion */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--neutral-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--section-x);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: all var(--t-base);
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px; /* touch target */
}
.btn-primary { background: var(--brand-orange); color: var(--white); }
.btn-primary:hover {
  background: var(--brand-orange-dark);
}
.btn-secondary { background: transparent; color: var(--neutral-900); border-color: var(--neutral-900); }
.btn-secondary:hover { background: var(--neutral-900); color: var(--white); }
.btn-on-orange-primary { background: var(--white); color: var(--brand-orange); }
.btn-on-orange-primary:hover { background: var(--neutral-900); color: var(--white); }
.btn-on-orange-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.btn-on-orange-secondary:hover { background: var(--white); color: var(--brand-orange); }
.btn-arrow::after {
  content: '→';
  display: inline-block;
  margin-left: var(--space-1);
  transition: transform var(--t-base);
}
.btn:hover .btn-arrow::after { transform: translateX(4px); }
.btn-block { width: 100%; }
.trust-icon-img {
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.icon-vet-filled { background-image: url('./PT_ICONS-03.webp'); }
.icon-uk-filled { background-image: url('./PT_ICONS-02.webp'); }
.icon-sizing-filled { background-image: url('./PT_ICONS-04.webp'); }
.icon-delivery-filled { background-image: url('./PT_ICONS-01.webp'); }
.icon-vet-line { background-image: url('./Pawshtails_Vet_Approved.webp'); }
.icon-uk-line { background-image: url('./Pawshtails_UK.webp'); }
.icon-sizing-line { background-image: url('./Pawshtails_Sizing_Support.webp'); }
.icon-delivery-line { background-image: url('./Pawshtails_Delivery.webp'); }
.announcement {
  background: var(--neutral-900);
  color: var(--white);
  height: 36px;
  position: relative;
  overflow: hidden;
}
.announcement-rotator {
  position: relative;
  height: 100%;
}
.announcement-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: rotateAnnouncement 12s infinite;
}
.announcement-item:nth-child(1) { animation-delay: 0s; }
.announcement-item:nth-child(2) { animation-delay: 4s; }
.announcement-item:nth-child(3) { animation-delay: 8s; }
/* @keyframes rotateAnnouncement definition moved further down — the PDP
   override (later in this file) wins under last-wins cascading, so this
   earlier definition was dead. */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--neutral-200);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--section-x);
  gap: var(--space-4);
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--neutral-900);
  line-height: 0;
}
.logo img {
  height: 26px;
  width: auto;
  display: block;
}
.nav { display: none; }
.header-actions { display: flex; gap: var(--space-3); align-items: center; }
.icon-btn {
  width: 24px; height: 24px;
  color: var(--neutral-900);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--t-fast);
}
.icon-btn:hover { color: var(--brand-orange); }
.icon-btn svg { width: 100%; height: 100%; }
.cart-icon { position: relative; }
.cart-count {
  position: absolute; top: -6px; right: -8px;
  background: var(--brand-orange); color: var(--white);
  font-size: 10px; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.menu-toggle { width: 24px; height: 24px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.menu-toggle span { display: block; height: 2px; background: var(--neutral-900); width: 100%; }
.hero {
  background: var(--brand-cream);
}
.hero-video-wrap {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--neutral-900);
  overflow: hidden;
  position: relative;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-copy {
  padding: var(--space-8) var(--section-x);
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--neutral-700);
  margin-bottom: var(--space-4);
}
.hero-eyebrow .dot { width: 5px; height: 5px; background: var(--brand-orange); border-radius: 50%; }
.hero-title {
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  color: var(--neutral-900);
  font-weight: 400;
}
.hero-title .italic { font-style: italic; font-weight: 300; }
.hero-cta-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-direction: column;
}
.hero-cta-row .btn { width: 100%; max-width: 320px; }
.trust-section {
  background: var(--neutral-900);
  color: var(--white);
  padding: var(--space-3) 0;
}
.trust-rotator {
  position: relative;
  height: 28px;
  overflow: hidden;
}
.trust-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0;
  animation: rotateTrust 16s infinite;
}
.trust-badge:nth-child(1) { animation-delay: 0s; }
.trust-badge:nth-child(2) { animation-delay: 4s; }
.trust-badge:nth-child(3) { animation-delay: 8s; }
.trust-badge:nth-child(4) { animation-delay: 12s; }
/* @keyframes rotateTrust definition moved further down — the PDP override
   (later in this file) wins under last-wins cascading, so this earlier
   definition was dead. */
.trust-text-line {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.trust-icon-img { width: 28px; height: 28px; }
.section { padding: var(--section-y) 0; }
.section-cream { background: var(--brand-cream); }
.section-header { text-align: center; margin-bottom: var(--space-8); }
.section-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  display: block;
  object-fit: contain;
}
.section-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  margin-bottom: var(--space-1);
  transform: rotate(-2deg);
  display: inline-block;
}
.section-title {
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
  color: var(--neutral-900);
}
.section-title .italic { font-style: italic; font-weight: 300; }
.section-sub {
  font-size: var(--text-base);
  color: var(--neutral-700);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 auto;
}
.lets-talk-y { background: var(--brand-cream); }
.lets-talk-y-image {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--brand-cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  overflow: hidden;
}
.lets-talk-y-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lets-talk-y-content {
  padding: var(--space-10) var(--section-x);
  text-align: center;
}
.lets-talk-y-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  margin-bottom: var(--space-2);
  transform: rotate(-2deg);
  display: inline-block;
}
.lets-talk-y-title {
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 0.95;
  margin-bottom: var(--space-4);
  letter-spacing: -0.03em;
}
.lets-talk-y-title .italic { font-style: italic; font-weight: 300; }
.lets-talk-y-desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--neutral-700);
  margin: 0 auto var(--space-6);
  max-width: 460px;
}
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 auto var(--space-8);
  max-width: 380px;
  text-align: left;
}
.benefit-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: center;
}
.benefit-item .benefit-text { text-align: left; max-width: 280px; }
.benefit-check {
  width: 26px; height: 26px;
  background: var(--brand-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
}
.benefit-text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--neutral-900);
  padding-top: 4px;
}
.benefit-text strong { font-weight: 700; }
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.category-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-base);
  display: flex;
  align-items: flex-end;
}
.category-card:hover { transform: translateY(-2px); }
.category-card-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--neutral-700);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-3);
  opacity: 0.7;
}
.category-card:nth-child(1) { background: #E8DDC9; }
.category-card:nth-child(2) { background: #D4C4A8; }
.category-card:nth-child(3) { background: #C5B698; }
.category-card:nth-child(4) { background: var(--neutral-900); }
.category-card:nth-child(4) .category-card-name { color: var(--white); }
.category-card:nth-child(4) .category-card-bg { color: rgba(255,255,255,0.3); }
.category-card-inner {
  position: relative;
  padding: var(--space-4);
  z-index: 2;
  width: 100%;
}
.category-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.05;
  color: var(--neutral-900);
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}
.category-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-orange);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.category-card:nth-child(4) .category-card-link { color: var(--brand-orange-light); }
.category-card-link::after { content: '→'; transition: transform var(--t-base); }
.category-card:hover .category-card-link::after { transform: translateX(3px); }
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
}
.product-card { cursor: pointer; }
.product-image {
  aspect-ratio: 1;
  background: var(--white);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-700);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-3);
  transition: background var(--t-base);
  overflow: hidden;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-card:hover .product-image { background: var(--neutral-100); }
.product-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
  line-height: 1.3;
}
.product-stars {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.product-stars-icons { color: var(--brand-orange); font-size: var(--text-xs); letter-spacing: 1px; }
.product-stars-count { font-size: 11px; color: var(--neutral-500); }
.product-price { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); }
.color-swatches { display: flex; gap: var(--space-2); align-items: center; }
.color-swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--neutral-200);
  cursor: pointer;
  transition: transform var(--t-fast);
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active {
  box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--neutral-900);
}
.swatch-more { font-size: 10px; color: var(--neutral-500); margin-left: 2px; }
.sizing-cta {
  background: var(--brand-orange);
  color: var(--white);
  padding: var(--space-10) var(--section-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sizing-cta-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto var(--space-5);
  background-image: url('./Pawshtails_Measure.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.sizing-cta-script {
  font-family: var(--font-accent);
  font-size: var(--text-4xl);
  line-height: 0.9;
  transform: rotate(-3deg);
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--white);
}
.sizing-cta-title {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  line-height: 1;
  margin-bottom: var(--space-4);
  color: var(--white);
}
.sizing-cta-title .italic { font-style: italic; font-weight: 300; }
.sizing-cta-desc {
  font-size: var(--text-base);
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  margin: 0 auto var(--space-6);
  max-width: 460px;
}
.sizing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0 auto var(--space-8);
  max-width: 520px;
}
.sizing-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.sizing-step-num {
  width: 28px; height: 28px;
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--white);
}
.sizing-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  line-height: 1.3;
}
.sizing-cta-buttons {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
  align-items: center;
}
.sizing-cta-buttons .btn { width: 100%; max-width: 320px; }
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.review-card {
  background: var(--white);
  padding: var(--space-5);
  border: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.review-stars { color: var(--brand-orange); letter-spacing: 2px; font-size: var(--text-sm); }
.review-quote {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--neutral-900);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  flex: 1;
}
.review-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--neutral-200);
}
.review-name { font-size: var(--text-sm); font-weight: 700; }
.review-verified {
  font-size: 10px;
  color: var(--success);
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.reviews-footer {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-3); flex-wrap: wrap;
}
.reviews-trustpilot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.reviews-trustpilot-stars { display: flex; gap: 2px; }
.tp-star {
  width: 18px; height: 18px;
  background: #00B67A;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 10px;
}
.reviews-trustpilot-text { font-size: var(--text-xs); color: var(--neutral-700); }
.reviews-trustpilot-text strong { color: var(--neutral-900); }
/* Footer rules removed — owned exclusively by main.css */
@media (min-width: 720px) {
  :root {
    --section-y: var(--space-8);
    --section-x: var(--space-8);
  }
  .container { max-width: 1100px; }
  .trust-icon-img { width: 28px; height: 28px; }
  .category-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-10); }
  .hero-cta-row { flex-direction: row; justify-content: center; }
  .hero-cta-row .btn { width: auto; }
  .sizing-cta-buttons { flex-direction: row; justify-content: center; }
  .sizing-cta-buttons .btn { width: auto; }
  .sizing-cta { padding: var(--space-12) var(--section-x); }
  .sizing-cta-icon { width: 140px; height: 140px; }
  .nav { display: flex; gap: var(--space-6); align-items: center; }
  .nav-link {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--space-2) 0;
    position: relative;
    transition: color var(--t-fast);
  }
  .nav-link.active { color: var(--brand-orange); }
  .nav-link::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 1.5px; background: var(--brand-orange);
    transform: scaleX(0); transition: transform var(--t-base);
  }
  .nav-link:hover { color: var(--brand-orange); }
  .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
  .menu-toggle { display: none; }
  .header-inner { padding: var(--space-5) var(--section-x); }
  .logo img { height: 32px; }
}
@media (min-width: 1024px) {
  :root {
    --section-y: var(--space-10);
  }
  .container { max-width: 1280px; }
  .hero-video-wrap { aspect-ratio: 21/9; max-height: 720px; }
  .hero-copy { padding: var(--space-10) var(--section-x); }
  .lets-talk-y { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .lets-talk-y-image { aspect-ratio: auto; height: 100%; min-height: 560px; }
  .lets-talk-y-content { padding: var(--space-16) var(--space-12); text-align: left; }
  .lets-talk-y-desc { margin: 0 0 var(--space-6); }
  .benefits-list { margin: 0 0 var(--space-8); max-width: none; }
  .lets-talk-y-content .benefits-list { gap: var(--space-5); }
  .lets-talk-y-content .benefit-item { justify-content: flex-start; }
  .lets-talk-y-content .benefit-item .benefit-text { max-width: none; }
  .review-card { padding: var(--space-6); }
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav { justify-self: center; gap: var(--space-8); }
  .header-actions { justify-self: end; gap: var(--space-5); }
  .sizing-steps { gap: var(--space-5); }
  .sizing-step-num { width: 36px; height: 36px; font-size: var(--text-base); }
  .sizing-step-label { font-size: var(--text-xs); }
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--white);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 40px rgba(0,0,0,0.15);
}
.drawer--right {
  right: 0;
  width: 100%;
  max-width: 440px;
  transform: translateX(100%);
}
.drawer--right.is-open { transform: translateX(0); }
.drawer--left {
  left: 0;
  width: 85%;
  max-width: 360px;
  transform: translateX(-100%);
}
.drawer--left.is-open { transform: translateX(0); }
body.drawer-open { overflow: hidden; }
.drawer-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
}
.drawer-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--neutral-900);
  line-height: 1;
}
.drawer-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-700);
  padding: 0;
  transition: color var(--t-base);
}
.drawer-close svg { width: 22px; height: 22px; }
.drawer-close:hover { color: var(--brand-orange); }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}
.drawer-footer {
  border-top: 1px solid var(--neutral-200);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  flex-shrink: 0;
}
.cart-free-shipping {
  background: var(--brand-cream);
  padding: var(--space-3) var(--space-4);
  margin: 0 calc(-1 * var(--space-5)) var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--neutral-900);
  line-height: 1.4;
}
.cart-free-shipping-bar {
  margin-top: var(--space-2);
  height: 4px;
  background: var(--neutral-200);
  overflow: hidden;
}
.cart-free-shipping-bar-fill {
  height: 100%;
  background: var(--brand-orange);
  transition: width 300ms ease;
}
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--neutral-200);
}
.cart-item:last-child { border-bottom: 0; }
.cart-item-image {
  width: 72px;
  height: 72px;
  background: var(--brand-cream);
  overflow: hidden;
  display: block;
}
.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cart-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.3;
}
.cart-item-variant {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  line-height: 1.3;
}
.cart-item-price {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-900);
  margin-top: var(--space-2);
}
.cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}
.cart-item-remove {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--neutral-500);
  font-size: 22px;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-item-remove:hover { color: var(--brand-orange); }
.cart-item-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--neutral-300);
}
.cart-item-qty button {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--neutral-900);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.cart-item-qty input {
  width: 28px;
  height: 26px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--neutral-300);
  border-right: 1px solid var(--neutral-300);
  font-size: var(--text-sm);
  font-weight: 600;
  -moz-appearance: textfield;
}
.cart-item-qty input::-webkit-outer-spin-button,
.cart-item-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cart-promo {
  background: var(--brand-cream);
  padding: var(--space-4);
  margin-top: var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cart-promo-title {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  color: var(--brand-orange);
  transform: rotate(-1deg);
  line-height: 1;
}
.cart-promo-text {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.4;
}
.cart-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--neutral-500);
}
.cart-empty-text {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}
.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.cart-subtotal-label {
  color: var(--neutral-700);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
}
.cart-subtotal-value {
  font-size: var(--text-lg);
  color: var(--neutral-900);
}
.cart-shipping-note {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-bottom: var(--space-4);
}
.cart-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cart-btn {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all var(--t-base);
}
.cart-btn--primary {
  background: var(--brand-orange);
  color: var(--white);
}
.cart-btn--primary:hover { background: var(--brand-orange-dark); }
.cart-btn--secondary {
  background: var(--white);
  color: var(--neutral-900);
  border: 1.5px solid var(--neutral-900);
}
.cart-btn--secondary:hover {
  background: var(--neutral-900);
  color: var(--white);
}
.menu-search {
  display: flex;
  align-items: center;
  background: var(--brand-cream);
  padding: var(--space-3);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.menu-search svg {
  width: 18px;
  height: 18px;
  color: var(--neutral-500);
  flex-shrink: 0;
}
.menu-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: var(--text-sm);
  color: var(--neutral-900);
  font-family: var(--font-body);
}
.menu-search input::placeholder { color: var(--neutral-500); }
.menu-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-nav-item { border-bottom: 1px solid var(--neutral-200); }
.menu-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--neutral-900);
  line-height: 1.1;
  transition: color var(--t-base);
}
.menu-nav-link:hover, .menu-nav-link.is-active { color: var(--brand-orange); }
.menu-nav-link::after {
  content: '→';
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--neutral-500);
  transition: transform var(--t-base);
}
.menu-nav-link:hover::after { transform: translateX(4px); color: var(--brand-orange); }
.menu-secondary {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.menu-secondary-item { padding: var(--space-2) 0; }
.menu-secondary-link {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  transition: color var(--t-base);
}
.menu-secondary-link:hover { color: var(--brand-orange); }
.menu-account {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--neutral-200);
  margin-top: var(--space-5);
}
.menu-account-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--neutral-900);
  transition: color var(--t-base);
}
.menu-account-link:hover { color: var(--brand-orange); }
.header-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--brand-orange);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.header-icon-btn { position: relative; }

/* Removed here: a second @import (Fraunces/Sen/Caveat), a second @font-face
   Allenoire, two dead @keyframes (rotateAnnouncement + rotateTrust both
   superseded by PDP-specific overrides later in this file), and two media
   query blocks (720px + 1024px) that were byte-for-byte duplicates of the
   ones at the top of this file. A third @font-face Allenoire and two slim
   --section-y media overrides that immediately followed were also redundant.
   The single legitimate copies live at the top of the file (font/font-face)
   and in the original media queries (720/1024 blocks). */
input { font: inherit; }
/* Two stale .container padding overrides were here — they hard-coded
   20px/32px regardless of the --section-x token (which is 20px mobile
   / 40px tablet+ / 40px desktop). On the PDP they made every section
   (including the footer container) half-padded vs the rest of the site.
   Removed; the base rule at line ~108 (`padding: 0 var(--section-x)`)
   provides the correct padding at every breakpoint. */
.announcement-item:nth-child(4) { animation-delay: 12s; }
@keyframes rotateAnnouncement {
  0%, 22% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-3px); }
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-200);
}
/* Breadcrumb — mirror category page styling (shop.css) so the PDP
   and category breadcrumbs read identically. The PDP uses an
   <ol class="breadcrumb-list"> with <li class="breadcrumb-sep|current">
   children instead of inline spans, so the selectors differ from
   shop.css but the visual output matches.
     - 11px Sen, weight 600, uppercase, tracked 0.1em
     - neutral-500 base; links neutral-500; hover brand-orange
     - separator neutral-500 at 50% opacity
     - current item near-black
   margin-bottom: var(--space-5) gives the hero breathing room. */
.breadcrumb {
  padding: var(--space-3) 0;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-100);
  margin-bottom: var(--space-5);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sen', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  list-style: none;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.breadcrumb-list a {
  color: var(--neutral-500);
  transition: color var(--t-fast);
  text-decoration: none;
}
.breadcrumb-list a:hover { color: var(--brand-orange); }
.breadcrumb-sep {
  color: var(--neutral-500);
  opacity: 0.5;
  margin: 0;
}
.breadcrumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}
.pdp-hero {
  padding: var(--space-5) 0 var(--space-7);
}
.pdp-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .pdp-hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}
@media (min-width: 1200px) {
  .pdp-hero-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10);
  }
}
.gallery { position: relative; }
.gallery-main {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery-main::-webkit-scrollbar { display: none; }
.gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
@media (min-width: 900px) {
  .gallery-dots { display: none; }
}
.gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutral-300);
  transition: background var(--t-base);
}
.gallery-dot.is-active { background: var(--brand-orange); width: 18px; border-radius: 3px; }
.gallery-thumbs {
  display: none;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 900px) {
  .gallery-thumbs { display: flex; flex-wrap: wrap; }
}
.gallery-thumb {
  width: 80px;
  height: 80px;
  background: var(--white);
  border: 2px solid var(--neutral-200);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-base);
  padding: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { border-color: var(--neutral-300); }
.gallery-thumb.is-active { border-color: var(--brand-orange); }
.pdp-info { display: flex; flex-direction: column; gap: var(--space-4); }
.pdp-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  color: var(--brand-orange);
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 1;
  margin-bottom: calc(-1 * var(--space-1));
}
.pdp-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
}
.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pdp-stars {
  display: flex;
  gap: 2px;
  color: var(--brand-orange);
  font-size: 14px;
  letter-spacing: 1px;
}
.pdp-rating-count {
  font-size: var(--text-sm);
  color: var(--neutral-700);
}
.pdp-rating-count a {
  color: var(--neutral-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--neutral-900);
  line-height: 1;
  margin-top: var(--space-2);
}
.pdp-summary {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--neutral-700);
  max-width: 480px;
}
/* Dead mockup classes removed: .variant-block, .variant-label-row,
   .variant-label, .variant-value, .swatch-row, .swatch-button, .size-row,
   .size-button. Live variation form is now native WC markup styled by the
   VillaTheme swatches plugin (.vi-wpvs-* namespace) — see PDP overrides
   further down. .size-link is kept (still used by the jump-to-sizing link). */
.size-link {
  background: none;
  border: 0;
  color: var(--neutral-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--text-sm);
  padding: 0;
  cursor: pointer;
  align-self: flex-start;
}
.size-link:hover { color: var(--brand-orange); }
/* Dead mockup classes removed: .cart-row, .qty-wrapper, .qty-btn, .qty-input,
   .add-to-cart-btn. Live cart row uses native WC markup styled in the
   "ADD TO CART" section further down; qty buttons use .pawshtails-qty-btn. */
.pdp-trust {
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
}
.pdp-trust-rotator {
  position: relative;
  height: 20px;
  max-width: 360px;
  margin: 0 auto;
}
.pdp-trust-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1;
  opacity: 0;
  animation: rotatePdpTrust 16s infinite;
}
.pdp-trust-item:nth-child(1) { animation-delay: 0s; }
.pdp-trust-item:nth-child(2) { animation-delay: 4s; }
.pdp-trust-item:nth-child(3) { animation-delay: 8s; }
.pdp-trust-item:nth-child(4) { animation-delay: 12s; }
@keyframes rotatePdpTrust {
  0%, 22% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-5px); }
}
.pdp-trust-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-orange);
}
.pdp-trust-icon svg { width: 100%; height: 100%; stroke-width: 2; }
.pdp-details {
  margin-top: 0;
}
.pdp-detail {
  border-bottom: 1px solid var(--neutral-200);
  /* Offset for the sticky site header when product.js scrolls
     an accordion into view on open — lands the summary below
     the header instead of behind it. */
  scroll-margin-top: 96px;
}
.pdp-detail-summary {
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.pdp-detail-summary::-webkit-details-marker { display: none; }
.pdp-detail-summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--neutral-500);
  transition: transform var(--t-base);
}
.pdp-detail[open] .pdp-detail-summary::after {
  content: '−';
}
.pdp-detail-body {
  padding: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.6;
}
.pdp-detail-body p { margin-bottom: var(--space-3); }
.pdp-detail-body ul { padding-left: var(--space-4); }
.pdp-detail-body li { margin-bottom: var(--space-1); }
.features-section {
  padding: var(--section-y) 0;
  background: var(--white);
}
.feature-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  margin: 0 calc(-1 * var(--space-4));
}
.feature-grid::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
  .feature-grid {
    gap: var(--space-4);
    padding: 0 var(--space-5);
    margin: 0 calc(-1 * var(--space-5));
  }
}
@media (min-width: 1024px) {
  .feature-grid {
    padding: 0 var(--space-7);
    margin: 0 calc(-1 * var(--space-7));
  }
}
.feature-card {
  flex: 0 0 82%;
  scroll-snap-align: center;
  background: var(--brand-cream);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  min-height: 260px;
  transition: background var(--t-base);
  cursor: default;
}
.feature-card:hover { background: var(--brand-orange); }
.feature-card:hover .feature-title,
.feature-card:hover .feature-desc { color: var(--white); }
@media (min-width: 720px) {
  .feature-card { flex: 0 0 70%; max-width: 560px; padding: var(--space-7) var(--space-6); }
}
@media (min-width: 1024px) {
  .feature-card { flex: 0 0 60%; max-width: 640px; }
}
.feature-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon-svg {
  width: 100%;
  height: 100%;
  background-color: var(--brand-orange);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.feature-card:hover .feature-icon-svg {
  background-color: var(--white);
}
.feature-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.15;
  color: var(--neutral-900);
  letter-spacing: -0.01em;
  transition: color var(--t-base);
}
.feature-desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--neutral-700);
  transition: color var(--t-base);
  max-width: 360px;
}
.sizing-section {
  padding: var(--section-y) 0;
  background: var(--brand-cream);
}
.sizing-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  margin: 0 calc(-1 * var(--space-4));
}
.sizing-grid::-webkit-scrollbar { display: none; }
.sizing-panel {
  flex: 0 0 88%;
  scroll-snap-align: center;
  /* Transparent so the size-guide image sits directly on the
     cream page background instead of inside a visible white
     card. The image itself has a baked-in off-white background
     so nothing looks bare. */
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}
@media (min-width: 900px) {
  .sizing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  .sizing-panel { flex: 1; }
}
.sizing-panel-chart {
  padding: 0;
  overflow: hidden;
}
.sizing-chart-img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: contain;
  background: transparent;
}
.sizing-chart-placeholder {
  width: 100%;
  min-height: 400px;
  background: linear-gradient(135deg, var(--brand-cream-warm) 0%, var(--brand-cream) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--neutral-700);
  font-size: var(--text-sm);
  gap: var(--space-3);
}
.sizing-chart-placeholder strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--neutral-900);
}
.sizing-chart-placeholder table {
  width: 100%;
  max-width: 360px;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}
.sizing-chart-placeholder th,
.sizing-chart-placeholder td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--neutral-200);
  text-align: center;
}
.sizing-chart-placeholder th {
  font-weight: 700;
  background: var(--white);
  color: var(--neutral-900);
}
.sizing-panel-photo {
  background: var(--brand-orange);
  color: var(--white);
  padding: var(--space-7) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
}
.sizing-photo-icon {
  width: 56px;
  height: 56px;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-2);
}
.sizing-photo-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--white);
  transform: rotate(-2deg);
  line-height: 1;
}
.sizing-photo-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.sizing-photo-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-2);
  text-align: left;
  max-width: 320px;
  counter-reset: step;
}
.sizing-photo-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 26px;
  font-size: var(--text-sm);
  line-height: 1.4;
  margin-bottom: var(--space-2);
  color: var(--white);
}
.sizing-photo-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: var(--white);
  color: var(--brand-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.sizing-photo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--white);
  color: var(--neutral-900);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  min-height: 44px;
  transition: all var(--t-base);
}
.sizing-photo-button:hover {
  background: var(--neutral-900);
  color: var(--white);
}
.sizing-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
@media (min-width: 900px) {
  .sizing-dots { display: none; }
}
.sizing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutral-300);
  transition: all var(--t-base);
}
.sizing-dot.is-active { background: var(--brand-orange); width: 18px; border-radius: 3px; }
.cross-sell {
  /* No top padding — features section above is also white; its padding-bottom
     provides the gap, so doubling up creates excess white space. */
  padding: 0 0 var(--section-y);
  background: var(--white);
}
.cross-sell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.cross-sell-grid > .product-card:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .cross-sell-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .cross-sell-grid > .product-card:last-child { grid-column: auto; }
}
.product-card:hover { opacity: 0.9; }
.product-colour {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
  margin-bottom: var(--space-1);
}
.promo-tile {
  background: var(--neutral-900);
  color: var(--white);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  min-height: 320px;
  flex: 1;
  transition: background var(--t-base);
}
.product-card:hover .promo-tile { background: #2a2a2a; }
.promo-tile-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  transform: rotate(-3deg);
  line-height: 1;
}
.promo-tile-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.promo-tile-subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  max-width: 240px;
  margin: 0;
}
.promo-tile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  background: var(--brand-orange);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  min-height: 40px;
  border: 2px solid var(--brand-orange);
  transition: all var(--t-base);
}
.product-card:hover .promo-tile-button {
  background: var(--white);
  color: var(--neutral-900);
  border-color: var(--white);
}
.faq-section {
  padding: var(--section-y) 0;
  background: var(--brand-orange);
}
.faq-section .section-eyebrow,
.faq-section .section-title { color: var(--white); }
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: background var(--t-base);
  /* Sticky-header offset for the auto-scroll-on-open behaviour
     in product.js. */
  scroll-margin-top: 96px;
}
.faq-item[open] {
  background: var(--neutral-900);
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4);
  border-bottom-color: transparent;
}
@media (min-width: 720px) {
  .faq-item[open] {
    margin: 0 calc(-1 * var(--space-5));
    padding: 0 var(--space-5);
  }
}
.faq-summary {
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.faq-item[open] .faq-summary { font-weight: 600; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
  content: '+';
  font-size: 22px;
  flex-shrink: 0;
  transition: transform var(--t-base);
  font-weight: 300;
}
.faq-item[open] .faq-summary::after { content: '−'; }
.faq-body {
  padding: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--white);
  max-width: 640px;
}
.reviews-section {
  padding: var(--section-y) 0;
  background: var(--white);
}
.reviews-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-6);
  gap: var(--space-3);
}
.reviews-summary-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.reviews-big-rating {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--neutral-900);
  line-height: 1;
}
.reviews-stars-big {
  display: flex;
  gap: 4px;
  color: var(--brand-orange);
  font-size: 22px;
  letter-spacing: 2px;
}
.reviews-count-text {
  font-size: var(--text-sm);
  color: var(--neutral-700);
}
@media (min-width: 720px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.review-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--neutral-900);
}
.review-body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--neutral-700);
}
.review-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--neutral-200);
}
.reviews-cta {
  text-align: center;
  margin-top: var(--space-6);
}
.reviews-cta-button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  background: var(--neutral-900);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 44px;
  transition: background var(--t-base);
}
.reviews-cta-button:hover { background: var(--brand-orange); }
.trustpilot-block {
  background: var(--brand-cream);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.trustpilot-stars {
  display: flex;
  gap: 4px;
  color: #00b67a;
  font-size: 24px;
  letter-spacing: 2px;
}
.trustpilot-rating-text {
  font-size: var(--text-sm);
  color: var(--neutral-700);
}
.trustpilot-rating-text strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.trustpilot-logo {
  font-weight: 700;
  font-size: 14px;
  color: var(--neutral-900);
  letter-spacing: 0.05em;
}
.trustpilot-link {
  font-size: var(--text-xs);
  color: var(--neutral-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trustpilot-link:hover { color: var(--brand-orange); }
.trust-strip {
  background: var(--neutral-900);
  color: var(--white);
  padding: var(--space-3) var(--space-4);
  overflow: hidden;
}
@keyframes rotateTrust {
  0%, 22% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-5px); }
}
/* Footer rules removed — owned exclusively by main.css */



/* === WHY YOU'LL LOVE IT — HORIZONTAL SCROLL ON TABLET+DESKTOP === */
/* Targets .feature-grid (the 6-card "why you'll love it" section on PDPs) */
@media (min-width: 720px) {
  .features-section .feature-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
    margin: 0 calc(-1 * var(--section-x));
    padding-left: var(--section-x);
    padding-right: var(--section-x);
    scrollbar-width: thin;
    scrollbar-color: var(--brand-orange) transparent;
  }
  .features-section .feature-grid::-webkit-scrollbar { height: 6px; }
  .features-section .feature-grid::-webkit-scrollbar-track { background: transparent; }
  .features-section .feature-grid::-webkit-scrollbar-thumb { background: var(--brand-orange); border-radius: 3px; }
  
  .features-section .feature-grid .feature-card {
    /* Show 2 cards + ~30% of the 3rd peeking */
    flex: 0 0 calc((100% - var(--space-4) * 2.3) / 2.3);
    min-width: 0;
    scroll-snap-align: start;
  }
}
@media (min-width: 1024px) {
  .features-section .feature-grid .feature-card {
    /* Same on desktop — keeps the "scroll for more" affordance */
    flex: 0 0 calc((100% - var(--space-4) * 2.3) / 2.3);
  }
}


/* === SIZING PHOTO CARD: SPACING FIX === */
.sizing-panel-photo {
  padding: 40px 28px;
  gap: 16px;
}
@media (min-width: 720px) {
  .sizing-panel-photo { padding: 48px 32px; gap: 20px; }
}
.sizing-photo-icon {
  margin-bottom: 12px;
}
.sizing-photo-steps {
  margin: 20px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sizing-photo-steps li {
  margin-bottom: 0;
  padding-left: 32px;
  line-height: 1.5;
}
.sizing-photo-steps li::before {
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  top: 1px;
}
.sizing-photo-button {
  margin-top: 12px;
}


/* === GOES WELL WITH: FREE COLLAR CARD HEIGHT MATCH === */
.cross-sell-grid { align-items: stretch; }
.cross-sell-grid .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cross-sell-grid .product-card.promo-tile {
  background: var(--neutral-900);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6) var(--space-5);
  gap: var(--space-2);
  height: 100%;
}
.cross-sell-grid .promo-tile-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 1;
  margin-bottom: 4px;
}
.cross-sell-grid .promo-tile-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.cross-sell-grid .promo-tile-subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  max-width: 220px;
  margin: 0 0 20px;
}
.cross-sell-grid .promo-tile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-orange);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  min-height: 44px;
  transition: background 150ms;
}
.cross-sell-grid .promo-tile-button:hover { background: var(--brand-orange-dark); }

/* =============================================================
   APPENDED — PDP fixes (do not edit above this line).
   Every selector here is scoped to .single-product so it never
   leaks into archive / cart / checkout pages even if classes
   happen to overlap.
   ============================================================= */

/* ---------- #1 EYEBROW TYPOGRAPHY — Caveat brand-orange ---------- */
/* The PDP eyebrow above the product title AND every .section-eyebrow
   (mockup span used for "complete the look", "good question.",
   "find your fit", "why you'll love it", "word of mouth") all need
   to render in Caveat, brand-orange. The typography override in
   functions.php already forces Caveat on .font-accent — these rules
   force it on the mockup's existing classes too. */
.single-product .pdp-eyebrow,
.single-product .section-eyebrow {
  font-family: 'Caveat', cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--brand-orange) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: var(--text-2xl);
  line-height: 1.1;
  display: inline-block;
}

/* ---------- #2 STAR RATING — visible + brand-orange ---------- */
/* WC's wc_get_rating_html() outputs:
     <div class="star-rating"><span style="width:X%">…</span></div>
   The font is WC's internal "star" font (preserved by the typography
   override). We just need to colour the filled-in portion brand-orange
   and make sure the row is visible above the price. */
.single-product .pdp-rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.single-product .pdp-rating-row .star-rating {
  color: var(--brand-orange) !important;
  font-size: 1.05rem;
}
.single-product .pdp-rating-row .star-rating::before {
  color: rgba(255, 78, 0, 0.18) !important; /* empty-star track */
}
.single-product .pdp-rating-row .star-rating span::before {
  color: var(--brand-orange) !important;    /* filled stars */
}
.single-product .pdp-rating-count {
  font-size: var(--text-sm);
  color: var(--neutral-700);
}
.single-product .pdp-rating-count a {
  color: var(--neutral-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- #3 VARIATION FORM ORDER — handled in JS now ---
   CSS :has() ordering wasn't applying reliably through the plugin's
   markup. The reorder is done in product.js (pawshtailsReorderVariationRows)
   which moves the colour row to be the first child of tbody. Block
   rules here keep each row stacked vertically. */

/* ---------- #7 HIDE "In stock" message ---------- */
.single-product .stock.in-stock,
.single-product p.stock.in-stock,
.single-product .woocommerce-variation-availability p.stock.in-stock {
  display: none !important;
}
.single-product .stock.out-of-stock {
  display: block !important;
  color: var(--brand-orange) !important;
  font-weight: 700;
}

/* ---------- #8 ADD-TO-CART BUTTON + QUANTITY STYLING ---------- */
/* WC's variable add-to-cart wrapper:
     <div class="woocommerce-variation-add-to-cart variations_button">
       <div class="quantity"><input class="qty" …></div>
       <button class="single_add_to_cart_button button alt">Add to cart</button>
     </div>
   Style the row to look like the mockup's .cart-row: qty on the left
   in a bordered box, big brand-orange Add to Cart button next to it,
   stacking on mobile. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: nowrap; /* qty + ATC stay on one row at every viewport */
  align-items: stretch;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
.single-product .cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--neutral-300);
  background: var(--white);
  height: 52px;
  min-width: 96px;
  padding: 0 var(--space-2);
}
.single-product .cart input.qty,
.single-product .woocommerce-variation-add-to-cart input.qty {
  border: 0 !important;
  background: transparent !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-align: center;
  width: 64px;
  height: 100%;
  padding: 0;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
.single-product .cart input.qty::-webkit-outer-spin-button,
.single-product .cart input.qty::-webkit-inner-spin-button,
.single-product .woocommerce-variation-add-to-cart input.qty::-webkit-outer-spin-button,
.single-product .woocommerce-variation-add-to-cart input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 52px;
  padding: 0 var(--space-6) !important;
  background: var(--brand-orange) !important;
  color: var(--white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  transition: background 150ms ease !important;
  box-shadow: none !important;
}
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus {
  background: var(--brand-orange-dark) !important;
  color: var(--white) !important;
}
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* (Mobile stack rule deleted — qty + ATC stay on one row at every
   viewport per the spec.) */

/* Variation label typography intentionally NOT overridden here.
   The COLOUR / SIZE label text is configured inside the VillaTheme
   plugin admin — overriding here produced an "ugly" double-styled
   look. Leave the plugin to own its own labels. */
.single-product .variations th.label,
.single-product .variations td.label,
.single-product .variations td.value {
  display: block !important;
  width: 100%;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
}
/* "Clear" link hidden entirely — its position is inconsistent across
   products (sometimes under size, sometimes under colour, depending
   on WC and the swatch plugin's rendering order) and customers can
   change selection by clicking another swatch or pill anyway. */
.single-product .reset_variations,
.single-product a.reset_variations {
  display: none !important;
}

/* Position the size-help link (printed via woocommerce_before_single_variation)
   right under the size selector and before the qty/add-to-cart row. */
.single-product .size-link {
  display: inline-block;
  font-family: 'Sen', sans-serif;
  font-size: var(--text-sm);
  color: var(--neutral-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: var(--space-2) 0 var(--space-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.single-product .size-link:hover { color: var(--brand-orange); }

/* ---------- #11 SIZING SECTION — tighter on desktop ---------- */
/* Mobile sizing block stays as-is per spec. Apply only at 720px+ and
   tighten again at 1024px+. The mockup defaults were too generous. */
@media (min-width: 720px) {
  .single-product .sizing-section { padding: var(--space-8) 0; }
  .single-product .sizing-grid {
    gap: var(--space-5);
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
  }
  .single-product .sizing-panel {
    max-width: 640px;
    padding: var(--space-6);
  }
  .single-product .sizing-panel-chart { padding: var(--space-5); }
  .single-product .sizing-panel-photo { padding: var(--space-6) var(--space-5); }
}
@media (min-width: 1024px) {
  .single-product .sizing-section { padding: var(--space-10) 0; }
  .single-product .sizing-panel { max-width: 680px; padding: var(--space-7) var(--space-6); }
}

/* ---------- #14 FAQ — Sen Bold white on questions ---------- */
/* Same selector pattern used on the category page so the closed
   accordion question reads as white Sen Bold instead of Allenoire. */
.single-product .faq-section .faq-item summary,
.single-product .faq-section .faq-item .faq-summary {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #FFFFFF !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ---------- #15 REVIEWS SECTION — restyle WC native to grid ---------- */
/* Only the harness PDP runs comments_template(); other PDPs show the
   Trustpilot badge instead. These rules restyle WC's native comment
   list output to roughly match the mockup's review grid look. */
.single-product .reviews-section { padding: var(--section-y) 0; }
.single-product .reviews-section #reviews { /* WC comments container */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--section-x);
}
.single-product .reviews-section #reviews .woocommerce-Reviews-title {
  display: none; /* duplicate of our section-header */
}
.single-product .reviews-section ol.commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .single-product .reviews-section ol.commentlist {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}
.single-product .reviews-section ol.commentlist li.review,
.single-product .reviews-section ol.commentlist li.comment {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  padding: var(--space-5);
  list-style: none;
}
.single-product .reviews-section ol.commentlist .comment_container {
  display: block;
}
.single-product .reviews-section ol.commentlist img.avatar { display: none; }
.single-product .reviews-section ol.commentlist .star-rating {
  color: var(--brand-orange) !important;
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
}
.single-product .reviews-section ol.commentlist .star-rating::before { color: rgba(255, 78, 0, 0.18) !important; }
.single-product .reviews-section ol.commentlist .star-rating span::before { color: var(--brand-orange) !important; }
.single-product .reviews-section ol.commentlist .meta {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.single-product .reviews-section ol.commentlist .meta strong {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700;
  color: var(--neutral-900);
  font-size: var(--text-sm);
  letter-spacing: 0;
}
.single-product .reviews-section ol.commentlist .description p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--neutral-700);
}
/* Hide WC's default "leave a review" form here — keeping the section
   read-only on first cut. Re-enable later if reviews land. */
.single-product .reviews-section #review_form_wrapper { display: none; }

/* =============================================================
   APPENDED PASS 2 — surgical PDP refinements.
   Every selector here is scoped to .single-product so nothing
   leaks into archive / cart / checkout. Per-mockup spec
   (mockups/pawshtails-pdp-harness.html). Do not edit above this
   line; future tweaks go BELOW.
   ============================================================= */

/* ---------- #2 PRICE → SIZE GAP — ~50% tighter ----------
   Pull WC's variations form up against the price. WC's form has
   no native top margin we can target reliably, so margin the price
   element down a small amount and zero the form's top spacing. */
.single-product .pdp-price {
  margin-bottom: var(--space-2) !important;
}
.single-product form.variations_form,
.single-product form.cart {
  margin-top: var(--space-2) !important;
}
.single-product .variations { margin: 0 !important; }
.single-product .variations tr:first-child label,
.single-product .variations th.label:first-child label {
  margin-top: 0 !important;
}

/* ---------- #4 QUANTITY SELECTOR — match mockup .qty-wrapper ----------
   Mockup spec (harness 1559-1608):
     .qty-wrapper { display: flex; align-items: center;
                    border: 1.5px solid var(--neutral-300); }
     .qty-btn    { width: 44px; height: 48px; … hover bg neutral-100 }
     .qty-input  { width: 44px; height: 48px; border-left/right
                   1.5px neutral-300; centred Sen 600 }
   WC's native quantity wrapper does NOT include minus/plus buttons.
   We add them via the ::before / ::after CSS-only trick? No — that's
   not interactive. Instead we restyle the WC input + flank it visually
   by setting the .quantity wrapper to render a custom +/− via tiny
   buttons we inject in product.js. For now we restyle the existing
   .quantity + input.qty to MATCH the mockup .qty-wrapper look. The
   numeric input remains the only interactive control; +/− buttons
   are deferred until WC's "quantity-plus-minus" markup ships or we
   add a small JS to inject them. */
.single-product .cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid var(--neutral-300) !important;
  background: var(--white) !important;
  height: 48px !important;
  min-width: 132px !important;
  padding: 0 !important;
  overflow: hidden;
}
.single-product .cart input.qty,
.single-product .woocommerce-variation-add-to-cart input.qty {
  width: 100% !important;
  height: 48px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 600 !important;
  font-size: var(--text-base) !important;
  text-align: center !important;
  padding: 0 var(--space-3) !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
.single-product .cart input.qty::-webkit-outer-spin-button,
.single-product .cart input.qty::-webkit-inner-spin-button,
.single-product .woocommerce-variation-add-to-cart input.qty::-webkit-outer-spin-button,
.single-product .woocommerce-variation-add-to-cart input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add-to-cart button paired to qty height (48px to match qty). */
.single-product .single_add_to_cart_button {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 var(--space-5) !important;
  background: var(--brand-orange) !important;
  color: var(--white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  transition: background 150ms ease !important;
  box-shadow: none !important;
  flex: 1 1 auto;
}
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus {
  background: var(--brand-orange-dark) !important;
}

/* Cart row container — gap matches mockup .cart-row (gap: var(--space-3)). */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex !important;
  flex-wrap: nowrap; /* qty + ATC stay on one row at every viewport */
  align-items: stretch;
  gap: var(--space-3) !important;
  margin-top: var(--space-4) !important;
}

/* ---------- #5 GALLERY THUMBS — single horizontal scroll-snap row ----------
   The mockup uses flex-wrap at 900px+ but user spec is for a single
   scrollable row that snaps left-right. Replace the wrapping behaviour
   with overflow-x scroll + scroll-snap. Hide native scrollbar. */
.single-product .gallery-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-bottom: 2px; /* room for focus ring */
  scrollbar-width: none;
}
.single-product .gallery-thumbs::-webkit-scrollbar { display: none; }
.single-product .gallery-thumb {
  flex: 0 0 80px;
  scroll-snap-align: start;
}
/* Hide WC's native gallery if WC ever decides to emit it alongside
   our custom one — we don't want a duplicate strip. */
.single-product .woocommerce-product-gallery {
  display: none !important;
}

/* ---------- #7 TOP SECTION SPACING — tighten PDP hero rhythm ----------
   Reduce top padding of the PDP hero section, tighten gallery↔info
   gap, and tighten internal info-column rhythm (title → price →
   variations → cart). Spec-aligned with mockup proportions. */
.single-product .pdp-hero {
  padding: var(--space-4) 0 var(--space-6) !important;
}
.single-product .pdp-hero-grid {
  gap: var(--space-5) !important;
}
@media (min-width: 900px) {
  .single-product .pdp-hero { padding: var(--space-5) 0 var(--space-8) !important; }
  .single-product .pdp-hero-grid { gap: var(--space-8) !important; }
}
/* Info column inner rhythm — pulled tighter per spec.
   eyebrow → title (small) → price (compact gap above) → form (close)
   → cart (single row) → trust (calm) → accordion (defined break). */
.single-product .pdp-eyebrow { margin-bottom: var(--space-1) !important; }
.single-product .pdp-title    { margin-bottom: var(--space-2) !important; }
.single-product .pdp-summary  { margin: var(--space-3) 0 var(--space-4) !important; }
.single-product .pdp-trust    { margin-top: var(--space-4) !important; }
.single-product .pdp-details  { margin-top: var(--space-5) !important; }

/* ---------- #8 SIZING SECTION — tighten + send-a-photo refinements ----
   Per mockup CSS (lines 1772-1954): grid at 900px+, equal-height
   panels, orange Send-a-photo with centred content and a sensible
   button width. Override the previous append's looser numbers. */
@media (min-width: 720px) {
  .single-product .sizing-section { padding: var(--space-7) 0 !important; }
  .single-product .sizing-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--section-x);
    overflow: visible;
  }
  .single-product .sizing-panel {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    flex: 1;
    padding: var(--space-6);
  }
  .single-product .sizing-panel-chart { padding: var(--space-4); }
  .single-product .sizing-panel-photo {
    padding: var(--space-7) var(--space-5);
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  .single-product .sizing-section { padding: var(--space-9) 0 !important; }
  .single-product .sizing-panel { max-width: 520px; }
}
/* Send-a-photo button — sensible width (not full panel). */
.single-product .sizing-photo-button {
  display: inline-flex !important;
  width: auto !important;
  min-width: 200px;
  padding: var(--space-3) var(--space-6) !important;
  align-self: center;
}
/* Send-a-photo step list — tighter padding around the 1-4 list. */
.single-product .sizing-photo-steps {
  margin: var(--space-3) 0 var(--space-3) !important;
  max-width: 320px;
}

/* ---------- #9 FEATURES SECTION — visual parity with category page ---
   The mockup's features-section uses horizontal scroll-snap on mobile
   and breaks to wider cards on tablet/desktop. Shop.css (the category
   archive) styles the same .features-section markup the same way
   because both were extracted from the same mockup CSS family. The
   only overrides we need on PDP are to make sure our previous appends
   don't break parity. */
.single-product .features-section {
  padding: var(--section-y) 0 !important;
  background: var(--white);
}
.single-product .feature-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  margin: 0 calc(-1 * var(--space-4));
  scrollbar-width: none;
}
.single-product .feature-grid::-webkit-scrollbar { display: none; }
.single-product .feature-card {
  flex: 0 0 82%;
  scroll-snap-align: center;
  background: var(--brand-cream);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  min-height: 260px;
}
@media (min-width: 720px) {
  .single-product .feature-grid { gap: var(--space-4); padding: 0 var(--space-5); margin: 0 calc(-1 * var(--space-5)); }
  .single-product .feature-card { flex: 0 0 70%; max-width: 560px; padding: var(--space-7) var(--space-6); }
}
@media (min-width: 1024px) {
  .single-product .feature-grid { padding: 0 var(--space-7); margin: 0 calc(-1 * var(--space-7)); }
  .single-product .feature-card { flex: 0 0 60%; max-width: 640px; }
}

/* ---------- #10b COMPLETE-THE-LOOK — restyle 2 cards to mockup ---
   Card layout: image (square) → product-colour label (Caveat-ish
   small caps neutral-500) → product-title (Sen base) → price on its
   own line in NEAR-BLACK Sen bold. The current template renders
   title + " — " + price on one row; we keep the markup but use CSS
   to push them onto separate lines and to recolour the price. */
.single-product .cross-sell .product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--neutral-900);
}
.single-product .cross-sell .product-card .product-image {
  /* No background — match category. The base mockup .product-image
     rule applies display:flex + padding:var(--space-3) for the
     "placeholder" version that centred a coloured swatch — kill
     those here so a real WC thumbnail fills the square edge-to-edge. */
  background: transparent !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--space-3);
  display: block !important;
  padding: 0 !important;
}
.single-product .cross-sell .product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.single-product .cross-sell .product-colour {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
  margin-bottom: var(--space-1);
}
/* Title row currently emits: "Name — £price". Force the em dash to
   wrap on a new line by hiding the dash and breaking the line at the
   .amount span (WC wraps prices in <span class="amount">…</span>). */
.single-product .cross-sell .product-title {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--neutral-900);
  line-height: 1.3;
}
.single-product .cross-sell .product-title .amount,
.single-product .cross-sell .product-title .woocommerce-Price-amount {
  display: block;
  margin-top: var(--space-1);
  font-weight: 700;
  color: var(--neutral-900) !important;
  font-size: var(--text-base);
}

/* ---------- #11 LOAD MORE button styling ----------
   Brand-orange link-style button below the reviews grid. Hidden by
   default; product.js reveals it when there are more than 4 reviews. */
.single-product .pt-reviews-cta {
  text-align: center;
  margin-top: var(--space-5);
}
.single-product .pt-reviews-cta[hidden] { display: none !important; }
.single-product .pt-reviews-more {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--brand-orange);
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 150ms ease;
}
.single-product .pt-reviews-more:hover,
.single-product .pt-reviews-more:focus { color: var(--brand-orange-dark); }

/* ---------- #15 OUT-OF-STOCK SWATCH / SIZE — red diagonal cross ---
   The VillaTheme Variation Swatches plugin emits .disabled / [disabled]
   on swatches that have no matching in-stock variation. WC's own
   markup uses .out-of-stock or aria-disabled on size pills. Cover
   the bases. The X is a CSS-only ::after using a conic gradient so
   no extra DOM is needed. */
.single-product .variations .swatch.disabled,
.single-product .variations .swatch[disabled],
.single-product .variations .swatch.swatch-disabled,
.single-product .variations li.disabled,
.single-product .variations li.out-of-stock,
.single-product .variations option[disabled],
.single-product .variations select[disabled],
.single-product .variations .variable-item.disabled {
  position: relative;
  cursor: not-allowed;
  opacity: 0.85;
}
.single-product .variations .swatch.disabled::after,
.single-product .variations .swatch[disabled]::after,
.single-product .variations .swatch.swatch-disabled::after,
.single-product .variations li.disabled::after,
.single-product .variations li.out-of-stock::after,
.single-product .variations .variable-item.disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top left,
      transparent calc(50% - 1px),
      rgba(220, 38, 38, 0.7) calc(50% - 1px),
      rgba(220, 38, 38, 0.7) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  pointer-events: none;
  border-radius: inherit;
}
/* For native WC <select> options the ::after trick doesn't apply
   (browsers won't style <option>), so leave WC's grey-out behaviour
   alone there. The visible swatches/pills the user sees are the
   plugin's, which DO accept ::after. */

/* =============================================================
   APPENDED — SESSION 1B (PDP hero visual polish).

   Everything in this block is .single-product scoped, so nothing
   leaks to archive / cart / checkout. The mockup
   (mockups/pawshtails-pdp-harness.html, lines 1342-1686 / 2439-2620)
   is the source of truth except where the brief explicitly overrides:
     - Price font: Sen 700 (brief)        not Allenoire (mockup)
     - Gallery thumbs: single-row scroll  not flex-wrap (mockup)
     - Size pill selected: near-black bg + white text (matches mockup)
   ============================================================= */

/* Mobile-only breadcrumb override deleted — desktop and mobile now
   share the unified category-page styling defined above. */

/* ---------- #2 GALLERY THUMBS — single-row scroll-snap ----------
   The earlier Session 1 pass already set this; restating in this
   block so all hero rules live together and any future re-cascade
   can't unbalance it. Native WC gallery suppressed as a guard. */
.single-product .gallery-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-bottom: 2px;
  scrollbar-width: none;
}
.single-product .gallery-thumbs::-webkit-scrollbar { display: none; }
.single-product .gallery-thumb {
  flex: 0 0 80px;
  scroll-snap-align: start;
}
.single-product .woocommerce-product-gallery { display: none !important; }

/* ---------- #3 EYEBROW — Caveat brand-orange (mockup-faithful) ----
   The mockup uses Caveat at --text-xl rotated -2deg, with a small
   negative margin-bottom so it sits tight on the title. */
.single-product .pdp-eyebrow {
  font-family: 'Caveat', cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--brand-orange) !important;
  /* +3px from var(--text-xl) (20px) → 23px across every viewport.
     Bigger font + the -2deg rotate would extend below the box and
     overlap the title underneath, so line-height is loosened and
     the margin-bottom is positive (no overlap) — see margin rule
     further down (line ~3390) which overrides this one. */
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-block;
  transform: rotate(-2deg);
  /* margin-bottom is set later in the per-element rhythm block */
}

/* ---------- #4 TITLE — verify mockup ----
   Allenoire at clamp-able --text-3xl, weight 400, near-black,
   line-height 1.02, tight letter-spacing. Already inherited from
   the byte-for-byte mockup CSS earlier in this file — this is a
   defensive restate so it can't be overridden by the typography
   override or a future global rule. */
.single-product .pdp-title {
  font-family: 'Allenoire', 'Fraunces', Georgia, serif !important;
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  margin-bottom: var(--space-2) !important;
}

/* ---------- #6 PRICE — Sen 700 near-black, tight to form ----
   Brief overrides mockup font. Pull aggressively close to the
   first variation row so the gap reads as ~6-8px not ~28-32px. */
.single-product .pdp-price,
.single-product .pdp-price * {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.01em;
}
/* Mobile: drop the price ~17% so it doesn't dominate the narrow
   viewport. var(--text-xl) (1.25rem ≈ 20px) vs desktop's
   var(--text-2xl) (1.5rem ≈ 24px). */
@media (max-width: 1023px) {
  .single-product .pdp-price,
  .single-product .pdp-price * {
    font-size: var(--text-xl) !important;
  }
}
.single-product .pdp-price {
  margin: var(--space-1) 0 0 !important;
}
/* Kill the breathing room WC's form adds above its <table>. */
.single-product .pdp-info form.variations_form,
.single-product .pdp-info form.cart {
  margin-top: var(--space-3) !important;
  margin-bottom: 0 !important;
}
.single-product .pdp-info form.variations_form .variations,
.single-product .pdp-info form.cart .variations {
  margin: 0 !important;
}
.single-product .pdp-info form.variations_form .variations th,
.single-product .pdp-info form.variations_form .variations td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------- #7 VARIATION FORM — Colour above Size ----
   The actual reorder happens in product.js (pawshtailsReorderVariationRows)
   because CSS :has() wasn't applying through the plugin's markup mix.
   We still need the table to render as block-stack so each attribute
   row reads as label-then-options. */
.single-product .variations,
.single-product table.variations,
.single-product .variations tbody {
  display: block !important;
  width: 100%;
}
.single-product .variations tbody > tr {
  display: block;
  margin-bottom: var(--space-2); /* tightened from var(--space-3) — colour and size sit closer together now Clear link is gone */
}
.single-product .variations tbody > tr:last-child { margin-bottom: 0; }

/* ---------- VARIATION LABEL + SIZE PILL STYLING — INTENTIONALLY
   NOT OVERRIDDEN HERE.
   The user configures the COLOUR / SIZE labels and the size pill
   look inside the VillaTheme Variation Swatches plugin admin (label
   sizing, pill shape, etc). We DO NOT re-style them in CSS — that
   would fight the plugin admin settings and produce the "too ugly"
   double-styling we had on the previous pass. Keep only the structural
   rules that make the table render as block-stack so the JS-reordered
   rows lay out vertically. */
.single-product .variations th.label,
.single-product .variations td.label,
.single-product .variations td.value {
  display: block !important;
  width: 100%;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
}
/* "Clear" link hidden entirely — its position is inconsistent across
   products (sometimes under size, sometimes under colour, depending
   on WC and the swatch plugin's rendering order) and customers can
   change selection by clicking another swatch or pill anyway. */
.single-product .reset_variations,
.single-product a.reset_variations {
  display: none !important;
}

/* COLOUR SWATCH — selected state intentionally NOT styled here.
   The VillaTheme plugin's own selected state (scale-up + plugin's
   own ring/border, configured in the plugin admin) is the sole
   visual indicator. Earlier ring + outline rules removed because
   they were fighting the plugin's behaviour. */

/* SIZE PILL STYLING — INTENTIONALLY NOT OVERRIDDEN HERE.
   The user configures pill look in the VillaTheme plugin admin.
   See note above on labels — same reasoning. */

/* ---------- #10 SIZE-GUIDE LINK — between size row and cart row ---
   Already printed via woocommerce_before_single_variation. Style. */
.single-product .size-link {
  display: inline-block;
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--neutral-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: var(--space-2) 0 var(--space-3);
  background: none;
  border: 0;
  cursor: pointer;
}
.single-product .size-link:hover { color: var(--brand-orange); }

/* ---------- #11 QTY +/- + ADD-TO-CART — mockup faithful ----
   Wrapper styled to the mockup .qty-wrapper. Injected -/+ buttons
   styled to the mockup .qty-btn. Input styled to mockup .qty-input.
   ATC button restyled to mockup .add-to-cart-btn. The row layout
   (qty LEFT, button RIGHT) handled by flex on the parent. */
/* Qty + ATC layout — flex row on:
   - .woocommerce-variation-add-to-cart (variable products' inner
     wrapper that holds qty + button)
   - form.cart on SIMPLE products only (where the form contains just
     qty + button — flexing the form is correct)
   The :not(.variations_form) selector is critical: on variable
   products the form contains the <table class="variations"> AND the
   .single_variation_wrap, and flexing the form would put them
   side-by-side instead of stacking. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex !important;
  flex-wrap: nowrap !important;   /* qty + ATC stay on one row at every viewport */
  align-items: stretch;
  gap: var(--space-3) !important;
  margin-top: var(--space-4) !important;
}
/* Variable-product form stays block — variations table on top,
   then .single_variation_wrap (qty + ATC inside it) below. */
.single-product form.cart.variations_form {
  display: block !important;
}
.single-product .cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity {
  flex: 0 0 auto !important;       /* qty takes its intrinsic width */
  display: inline-flex !important;
  align-items: center !important;
  border: 1.5px solid var(--neutral-300) !important;
  background: var(--white) !important;
  height: 48px !important;
  padding: 0 !important;
  overflow: hidden;
}
.single-product .pawshtails-qty-btn {
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 0;
  font-family: 'Sen', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--neutral-900);
  cursor: pointer;
  padding: 0;
  user-select: none;
  transition: background 150ms ease;
}
.single-product .pawshtails-qty-btn:hover { background: var(--neutral-100); }
.single-product .pawshtails-qty-btn:focus { outline: 2px solid var(--brand-orange); outline-offset: -2px; }
.single-product .cart input.qty,
.single-product .woocommerce-variation-add-to-cart input.qty {
  width: 44px !important;
  height: 48px !important;
  border: 0 !important;
  border-left:  1.5px solid var(--neutral-300) !important;
  border-right: 1.5px solid var(--neutral-300) !important;
  background: transparent !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 600 !important;
  font-size: var(--text-base) !important;
  text-align: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
  border-radius: 0;
}
.single-product .cart input.qty::-webkit-outer-spin-button,
.single-product .cart input.qty::-webkit-inner-spin-button,
.single-product .woocommerce-variation-add-to-cart input.qty::-webkit-outer-spin-button,
.single-product .woocommerce-variation-add-to-cart input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product .single_add_to_cart_button {
  flex: 1 1 auto;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 var(--space-5) !important;
  background: var(--brand-orange) !important;
  color: var(--white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  transition: background 150ms ease !important;
  box-shadow: none !important;
}
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus {
  background: var(--brand-orange-dark) !important;
}
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* (Mobile stack rule deleted — qty + ATC stay on one row at every
   viewport per the spec.) */

/* ---------- HIDE BOTTOM VARIATION PRICE ----
   WC populates .woocommerce-variation-price (inside .single_variation)
   with the selected variation's price after a variation resolves.
   We don't show it — product.js writes that same price into the top
   .pdp-price instead, so showing both would be redundant. */
.single-product .woocommerce-variation-price,
.single-product .single_variation .price {
  display: none !important;
}

/* ---------- #12 STOCK MESSAGE — hide in-stock ---- */
.single-product .stock.in-stock,
.single-product p.stock.in-stock,
.single-product .woocommerce-variation-availability p.stock.in-stock {
  display: none !important;
}
.single-product .stock.out-of-stock {
  display: block !important;
  color: var(--brand-orange) !important;
  font-weight: 700;
  margin-top: var(--space-2);
}

/* ---------- #13 PDP TRUST STRIP — guard mockup rotator ----
   The keyframes + .pdp-trust-* styles are already in this file from
   the mockup byte-for-byte CSS extract (around lines 1529-1640).
   This guard just keeps the alignment correct under our newer layout
   rules and pulls it closer to the cart row. */
.single-product .pdp-trust {
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
}
.single-product .pdp-trust-rotator {
  position: relative;
  height: 20px;
  max-width: 360px;
  margin: 0 auto;
}

/* ---------- #14 DETAILS ACCORDION — restate mockup styling ----
   Mockup classes are already in this file; restating here guards
   against any later override. Sen 600 uppercase tracked summary,
   +/- toggle, generous body padding, smooth open/close. */
.single-product .pdp-details { margin-top: var(--space-5); }
.single-product .pdp-detail { border-bottom: 1px solid var(--neutral-200); }
.single-product .pdp-detail-summary {
  padding: var(--space-3) 0;     /* was var(--space-4) — tighter row height */
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-base);
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none; /* sentence case per spec */
  color: var(--neutral-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.single-product .pdp-detail-summary::-webkit-details-marker { display: none; }
.single-product .pdp-detail-summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--neutral-500);
  transition: transform 150ms ease;
}
.single-product .pdp-detail[open] .pdp-detail-summary::after { content: '−'; }
.single-product .pdp-detail-body {
  padding: 0 0 var(--space-3);   /* was var(--space-5) — tighter gap to next row */
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--neutral-700);
}
.single-product .pdp-detail-body p { margin-bottom: var(--space-3); }
.single-product .pdp-detail-body ul { padding-left: var(--space-4); }
.single-product .pdp-detail-body li { margin-bottom: var(--space-1); }

/* ---------- #15 TOP HERO SPACING — mockup-faithful rhythm ----
   Mockup defaults:
     .pdp-hero      padding: var(--space-5) 0 var(--space-7);
     .pdp-hero-grid gap: var(--space-6) (mobile)
                    gap: var(--space-8) (900px+)  cols 1.1fr/1fr
                    gap: var(--space-10) (1200px+) cols 1.2fr/1fr
     .pdp-info      gap: var(--space-4) (vertical rhythm)
   Restate them here scoped so previous looser appends can't win. */
.single-product .pdp-hero {
  padding: var(--space-5) 0 var(--space-7) !important;
}
.single-product .pdp-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) !important;
}
@media (min-width: 900px) {
  .single-product .pdp-hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8) !important;
    align-items: start;
  }
}
@media (min-width: 1200px) {
  .single-product .pdp-hero-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10) !important;
  }
}
/* .pdp-info — flex column with gap: 0 so we can specify exact
   margin-bottom per child. Flex 'gap' would otherwise be ADDED to
   each child's own margins (no margin collapsing in flex), making
   the spacing-spec unachievable. With gap: 0, the visible vertical
   gap between any two siblings is purely the sum of bottom margin
   of the first + top margin of the second. */
.single-product .pdp-info {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}
/* Explicit per-element rhythm. Each element only sets margin-bottom;
   the next element's margin-top is 0 unless overridden. */
.single-product .pdp-eyebrow { margin: 0 0 var(--space-3) !important; }   /* 12px below — extra room because the 23px Caveat rotated -2deg extends below its box */
.single-product .pdp-title   { margin: 0 0 var(--space-2) !important; }   /* 8px below */
.single-product .pdp-price   { margin: 0 !important; }                    /* summary handles its own top gap */
/* ---------- SHORT-DESCRIPTION SPACING (tightened) ----
   WC's woocommerce_template_single_excerpt() emits
     <div class="woocommerce-product-details__short-description">
       <p>…</p>
     </div>
   nested inside our .pdp-summary wrapper. Both layers carry default
   vertical margin from Storefront + WP defaults — and the inner <p>
   adds its own. The vertical rhythm above and below ends up too big.

   Zero out every layer so the only vertical spacing comes from the
   flex gap on .pdp-info (var(--space-4) = 16px between siblings).
   The internal <p> keeps a small inter-paragraph margin so multi-
   paragraph excerpts still breathe. */
/* Short description — user-spec 8px above (below price), 16px
   below (above swatches). Inner WC + p elements zeroed so the
   outer .pdp-summary margins ARE the visible gap. */
.single-product .pdp-summary {
  /* Tighter than before — top 4px, bottom 12px. */
  margin: var(--space-1) 0 var(--space-3) !important;
  padding: 0 !important;
  max-width: 480px;
  /* 14px to match the accordion body (.pdp-detail-body) so the
     PDP body-copy reads at a single size site-wide. */
  font-size: var(--text-sm) !important;
  line-height: 1.55;
}
.single-product .pdp-summary .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--text-sm) !important;
  line-height: 1.55;
}
.single-product .pdp-summary p,
.single-product .pdp-summary .woocommerce-product-details__short-description p,
.single-product .woocommerce-product-details__short-description p {
  margin: 0 0 var(--space-2) !important;
  padding: 0 !important;
  font-size: var(--text-sm) !important;
  line-height: 1.55;
}
.single-product .pdp-summary p:last-child,
.single-product .pdp-summary .woocommerce-product-details__short-description p:last-child,
.single-product .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0 !important;
}
/* The variations form / cart form sit right below the summary —
   zero their top margin so .pdp-summary's margin-bottom IS the gap. */
.single-product .pdp-info form.variations_form,
.single-product .pdp-info form.cart {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =============================================================
   APPENDED — HERO POLISH ROUND 2
   ============================================================= */

/* ---------- #1 GALLERY MAX-WIDTH — responsive across all sizes ----
   The slide is aspect-ratio: 1 (square). Without a max-width the
   square fills the column width, which on a 768px tablet is ~700px
   tall — overwhelming the viewport. With a max-width on every
   breakpoint, the gallery is responsive automatically: under the cap
   it shrinks with the column, at/above the cap it stays at the cap.

   Mobile (≤479px) — gallery fills the column (~335px on iPhone).
   Tablet / phablet (480-899px) — gallery capped at 480px.
   Tablet landscape / desktop (900-1199px) — capped at 520px.
   Wide desktop (1200px+) — capped at 560px.
   Always centred in its column. */
.single-product .gallery {
  max-width: 480px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .single-product .gallery {
    max-width: 520px;
  }
}
@media (min-width: 1200px) {
  .single-product .gallery {
    max-width: 560px;
  }
}

/* ---------- #6 ACCORDION BOTTOM PADDING ----
   Breathing room under the details accordion before the next section
   (the sizing section). Matches the rhythm we use elsewhere on the
   site between content blocks. */
.single-product .pdp-details {
  margin-bottom: var(--space-6);
}

/* ---------- MOBILE HORIZONTAL OVERFLOW — safety belt ----------
   Below the 900px grid breakpoint the hero is a single column. A
   handful of things can still cause horizontal overflow:
     - Grid items default to min-content sizing — a long word (like
       "Anti-Pull") refuses to shrink and pushes the column wide.
     - WC's <table class="variations"> has explicit widths in some
       themes that can exceed column width.
     - <img> without max-width:100% renders at intrinsic size.
   These rules clamp the hero and every direct child to the viewport
   width on screens below 1024px. min-width: 0 on grid items is the
   modern "let me shrink" override. overflow-wrap: anywhere on the
   title prevents long unbreakable words from blowing the layout. */
@media (max-width: 1023px) {
  .single-product .pdp-hero {
    overflow-x: hidden; /* belt — should never need to clip if
                          everything below is well-behaved */
  }
  .single-product .pdp-hero-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100%;
  }
  .single-product .pdp-hero-grid > * {
    min-width: 0; /* allow flex/grid item to shrink below content */
    max-width: 100%;
  }
  .single-product .gallery,
  .single-product .gallery-main,
  .single-product .gallery-slide,
  .single-product .gallery-thumbs,
  .single-product .pdp-info {
    max-width: 100%;
    min-width: 0;
  }
  .single-product .gallery-slide img,
  .single-product .gallery-thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
  }
  /* Title + summary must wrap their longest word rather than escape. */
  .single-product .pdp-title,
  .single-product .pdp-summary,
  .single-product .pdp-summary p,
  .single-product .woocommerce-product-details__short-description,
  .single-product .woocommerce-product-details__short-description p {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* WC's variations table can also force a wider intrinsic width on
     some setups — keep it clamped. */
  .single-product .variations,
  .single-product .variations tbody,
  .single-product .variations tr,
  .single-product .variations th,
  .single-product .variations td {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* =============================================================
   APPENDED — SESSION 2 (SIZING SECTION POLISH)

   Source of truth: harness PDP mockup
   (mockups/pawshtails-pdp-harness.html, lines 1772-1954 / 2622-2679).

   Brief overrides on top of the mockup:
   - Section padding bumped to give clear breathing room above/below
   - Panels capped at ~520px so the chart is no longer overpowering
   - Both panels equal-height via CSS Grid stretch + min-height
   - Send-a-photo icon enlarged to 88px (from mockup's 56px)
   - Step list rhythm tightened with consistent gap + cleaner badges
   - Button: sensible width, centred horizontally

   Every selector is .single-product scoped so the rules apply only
   on PDPs and never leak elsewhere. Loads last in product.css so it
   beats the byte-for-byte mockup rules (1721+) and the earlier
   appended sizing tweaks (2218+, 2790+) by cascade order.
   ============================================================= */

/* ---------- SECTION FOOTPRINT — padding above + below ---------- */
.single-product .sizing-section {
  padding: var(--space-8) 0 !important;   /* ~40px mobile */
  background: var(--brand-cream);
}
@media (min-width: 720px) {
  .single-product .sizing-section {
    padding: var(--space-10) 0 !important; /* ~56px tablet */
  }
}
@media (min-width: 1024px) {
  .single-product .sizing-section {
    padding: var(--space-12) 0 !important; /* ~72px desktop — matches site rhythm */
  }
}

/* ---------- SECTION HEADER — typography + spacing ---------- */
.single-product .sizing-section .section-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  .single-product .sizing-section .section-header {
    margin-bottom: var(--space-8);
  }
}
.single-product .sizing-section .section-eyebrow {
  font-family: 'Caveat', cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--brand-orange) !important;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: var(--space-2);
}
.single-product .sizing-section .section-title {
  font-family: 'Allenoire', 'Fraunces', Georgia, serif !important;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  margin: 0;
}

/* ---------- GRID — 2 columns at 720px+, capped width ---------- */
@media (min-width: 720px) {
  .single-product .sizing-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-5) !important;
    padding: 0 !important;
    margin: 0 auto !important;       /* centred when narrower than container */
    overflow: visible !important;
    max-width: 1080px;               /* 2 × ~520px panels + gap */
    align-items: stretch;            /* equal heights */
  }
  .single-product .sizing-panel {
    flex: 1 !important;
    height: 100%;
    min-height: 360px;               /* equal-height anchor (was 400px mockup) */
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ---------- PANEL 1 — CHART (shrunk + padded) ---------- */
.single-product .sizing-panel-chart {
  padding: 0 !important;
  overflow: hidden;
  /* Transparent — the sizing-guide image has its own baked-in
     off-white background, so wrapping it in a bright-white
     card looked out of place against the cream page bg,
     especially on mobile. */
  background: transparent;
}
.single-product .sizing-chart-img {
  width: 100%;
  height: 100%;
  min-height: 320px;                 /* tightened from 400px */
  object-fit: contain;
  background: transparent;
  display: block;
  padding: var(--space-4);           /* breathing room around the image */
  box-sizing: border-box;
}
@media (min-width: 720px) {
  .single-product .sizing-chart-img {
    padding: var(--space-5);
    min-height: 360px;
  }
}

/* ---------- PANEL 2 — SEND A PHOTO (reworked) ---------- */
.single-product .sizing-panel-photo {
  background: var(--brand-orange) !important;
  color: var(--white) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;           /* vertical centre */
  text-align: center;
  gap: var(--space-3) !important;
  padding: var(--space-7) var(--space-5) !important;
  min-height: 320px;
}
@media (min-width: 720px) {
  .single-product .sizing-panel-photo {
    padding: var(--space-8) var(--space-6) !important;
    min-height: 360px;
  }
}

/* Icon — 88px (up from mockup's 56px) — kept inverted to read white */
.single-product .sizing-photo-icon {
  width: 88px;
  height: 88px;
  filter: brightness(0) invert(1);
  margin: 0 0 var(--space-3) !important;
  object-fit: contain;
}

/* Eyebrow + title — locked to mockup typography */
.single-product .sizing-photo-eyebrow {
  font-family: 'Caveat', cursive !important;
  font-weight: 400 !important;
  color: var(--white) !important;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: rotate(-2deg);
  display: inline-block;
  margin: 0;
}
.single-product .sizing-photo-title {
  font-family: 'Allenoire', 'Fraunces', Georgia, serif !important;
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white) !important;
  margin: 0;
}

/* Step list — single source for rhythm. Earlier appends had two
   conflicting versions of this — overriding both here. */
.single-product .sizing-photo-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-3) 0 !important;
  text-align: left;
  max-width: 320px;
  counter-reset: step;
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2) !important;    /* consistent step-to-step rhythm */
}
.single-product .sizing-photo-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 30px !important;
  font-size: var(--text-sm);
  line-height: 1.45;
  margin: 0 !important;
  color: var(--white);
}
.single-product .sizing-photo-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: var(--white);
  color: var(--brand-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Send a Photo button — fixed width, centred */
.single-product .sizing-photo-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 200px;
  padding: var(--space-3) var(--space-6) !important;
  background: var(--white) !important;
  color: var(--neutral-900) !important;
  font-family: 'Sen', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  min-height: 44px;
  margin-top: var(--space-3) !important;
  align-self: center;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  transition: all 150ms ease;
}
.single-product .sizing-photo-button:hover,
.single-product .sizing-photo-button:focus {
  background: var(--neutral-900) !important;
  color: var(--white) !important;
}

/* Mobile dots — removed from markup; hide everywhere as belt-and-braces
   in case any cached page still serves the old PHP output. */
.single-product .sizing-dots { display: none !important; }

/* =============================================================
   APPENDED — SESSION 2 ROUND 2 (sizing section refinements)

   - Icon removed from markup — defensive rule hides any orphan
   - Mobile carousel converted to vertical stack so each panel
     respects the container's natural horizontal padding (the old
     scroll-snap layout extended the grid beyond the container and
     made the panel touch the viewport edges on mobile)
   - "Sizing Help" eyebrow is the new visual focal point now the
     icon is gone — bumped one size step larger
   ============================================================= */

/* Hide the icon defensively — already removed from PHP markup. */
.single-product .sizing-photo-icon { display: none !important; }

/* Mobile: stack panels vertically inside the container so each one
   gets the container's natural 20px horizontal padding. No more
   negative-margin scroll-snap carousel. */
@media (max-width: 719px) {
  .single-product .sizing-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .single-product .sizing-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    scroll-snap-align: none !important;
    margin: 0 !important;
  }
  /* Ensure the orange panel keeps proper internal padding on mobile. */
  .single-product .sizing-panel-photo {
    padding: var(--space-7) var(--space-5) !important;
  }
  .single-product .sizing-panel-chart {
    padding: 0 !important;
  }
  .single-product .sizing-chart-img {
    padding: var(--space-4);
  }
}

/* "Sizing Help" eyebrow — bigger now it's the panel's headline lead. */
.single-product .sizing-photo-eyebrow {
  font-size: var(--text-3xl) !important; /* ~30px (up from --text-2xl 24px) */
  line-height: 1;
}
@media (min-width: 720px) {
  .single-product .sizing-photo-eyebrow {
    font-size: 36px !important; /* slightly bigger on tablet+/desktop */
  }
}

/* Tighten the gap between the (now icon-less) top of the panel and
   the eyebrow so content sits balanced after the icon removal. */
.single-product .sizing-panel-photo {
  gap: var(--space-3) !important;
}

/* SESSION 3 — Features section visual parity with category page.
   These rules override earlier feature-card values in this file.
   Long-term: refactor into shared features.css enqueued on both
   PDP and archive (deferred to later refactor session). */

/* Copied verbatim from the category mockup pawshtails-harnesses.html
   lines 641-712 (CSS) plus the 720px and 1024px @media blocks at
   941-945 / 957. Scoped to .single-product so they win the cascade
   over the PDP-mockup byte-for-byte rules (~line 1687) and the
   Session 1B append (~line 2840) without leaking elsewhere. */

.single-product .feature-grid {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--section-x);
  margin: 0 calc(-1 * var(--section-x));
}
.single-product .feature-grid::-webkit-scrollbar { display: none; }

.single-product .feature-card {
  background: var(--brand-cream);
  color: var(--neutral-900);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: center;
  align-items: center;
  transition: all var(--t-base);
  flex: 0 0 82%;
  scroll-snap-align: center;
  min-width: 260px;
  min-height: 280px;
  position: relative;
}
.single-product .feature-card:hover {
  background: var(--brand-orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.single-product .feature-card:hover .feature-title { color: var(--white); }
.single-product .feature-card:hover .feature-desc  { color: rgba(255,255,255,0.92); }

.single-product .feature-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-product .feature-icon-svg {
  width: 100%;
  height: 100%;
  background-color: var(--brand-orange);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.single-product .feature-card:hover .feature-icon-svg {
  background-color: var(--white);
}

.single-product .feature-content { width: 100%; }
.single-product .feature-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  color: var(--neutral-900);
}
.single-product .feature-desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--neutral-700);
  max-width: 280px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .single-product .feature-card {
    flex: 0 0 44%;
    max-width: 420px;
  }
}
@media (min-width: 1024px) {
  .single-product .feature-card {
    flex: 0 0 30%;
    max-width: 380px;
  }
}

/* =============================================================
   ROUND 5 — features width parity + first-card leading gutter +
              sizing section stack on tablet+mobile.
   ============================================================= */

/* ---------- #1 FEATURES SECTION HEADER — match category width ----
   Category's .seo-content-header is capped at max-width: 640px,
   centred, with padding: 0 var(--section-x). PDP's .section-header
   was full container width (1100/1280px). Capping it here matches
   the visible heading footprint on category exactly. */
.single-product .features-section .section-header {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  padding: 0 var(--section-x);
  text-align: center;
}

/* ---------- #2 FIRST CARD LEADING GUTTER — explicit + belt-and-braces
   The mockup-rules version positions the first card at section-x from
   the viewport edge via padding + negative-margin. With
   scroll-snap-align: center the initial render can read as flush. We
   guarantee a leading gutter at every viewport with:
     - explicit padding-left on the grid
     - scroll-padding-inline-start so the snap respects the gutter
     - first-card margin-left as last-resort safety belt
   Active only on tablet+mobile (the desktop view shows multiple
   cards already with comfortable internal breathing room). */
@media (max-width: 1023px) {
  .single-product .feature-grid {
    padding-left: var(--section-x);
    scroll-padding-inline-start: var(--section-x);
  }
  .single-product .feature-grid > .feature-card:first-child {
    margin-left: var(--space-2); /* extra ~8px so first card never hugs the edge */
  }
}

/* ---------- #3 SIZING SECTION — stack vertically on tablet AND mobile
   Previous breakpoint was 720px (only mobile stacked). User wants
   tablet to stack too. Move the breakpoint to 1024px so:
     <1024px (mobile + tablet) → vertical stack
     1024px+ (desktop)          → two-column side-by-side grid. */
@media (max-width: 1023px) {
  .single-product .sizing-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-5) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  .single-product .sizing-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    scroll-snap-align: none !important;
    margin: 0 !important;
  }
  /* Generous mobile padding inside each panel. */
  .single-product .sizing-panel-photo {
    padding: var(--space-7) var(--space-5) !important;
  }
  .single-product .sizing-panel-chart {
    padding: 0 !important;
  }
  .single-product .sizing-chart-img {
    padding: var(--space-4);
  }
}

/* At 1024px+ go to the desktop two-column grid (this overrides the
   Session 2 @media (min-width: 720px) rule that previously kicked
   in at tablet). */
@media (min-width: 1024px) {
  .single-product .sizing-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-5) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    max-width: 1080px;
    align-items: stretch;
  }
  .single-product .sizing-panel {
    flex: 1 !important;
    height: 100%;
    min-height: 360px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Counter-act the Session 2 @media (min-width: 720px) grid rule —
   force tablet (720–1023px) NOT to become a grid. The matching
   720+ rule we wrote earlier had display: grid !important which
   we now suppress with a more specific min/max-width range. */
@media (min-width: 720px) and (max-width: 1023px) {
  .single-product .sizing-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
}

/* =============================================================
   ROUND 6 — sizing-section CAROUSEL RESTORE + ORANGE-PANEL PADDING
   Previous round stacked the panels vertically on tablet+mobile.
   That was the wrong call — per the mockup, mobile/tablet should
   be a horizontal scroll-snap carousel; only desktop becomes a
   side-by-side grid. This block restores that and gives the
   orange panel generous internal padding so eyebrow + button no
   longer look pinned to the edges.

   IMPORTANT: this block loads AFTER every earlier sizing rule, so
   its !important + cascade-position together win.
   ============================================================= */

/* Tablet + mobile: scroll-snap carousel. */
@media (max-width: 1023px) {
  .single-product .sizing-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4) !important;
    padding: 0 var(--section-x) !important;
    margin: 0 calc(-1 * var(--section-x)) !important;
    max-width: none !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    scroll-padding-inline-start: var(--section-x);
  }
  .single-product .sizing-grid::-webkit-scrollbar { display: none; }

  .single-product .sizing-panel {
    flex: 0 0 88% !important;
    scroll-snap-align: center !important;
    width: auto !important;
    max-width: none !important;
    min-height: 400px !important;
    margin: 0 !important;
    height: auto !important;
  }
}

/* Desktop: revert to two-column grid (matches earlier Session 2 rule). */
@media (min-width: 1024px) {
  .single-product .sizing-grid {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-5) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    max-width: 1080px !important;
    align-items: stretch !important;
  }
  .single-product .sizing-panel {
    flex: 1 !important;
    height: 100% !important;
    min-height: 360px !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    width: 100% !important;
    scroll-snap-align: none !important;
  }
}

/* Orange Send-a-photo panel — generous internal padding so the
   "Sizing Help" eyebrow has visible top breathing room and the
   SEND A PHOTO button has visible bottom breathing room. Mobile +
   tablet uses bigger vertical than horizontal so the panel reads
   as a tall card. justify-content kept as center so the content
   cluster sits in the middle of the card. */
.single-product .sizing-panel-photo {
  padding: var(--space-9) var(--space-6) !important;  /* 56px / 28px mobile */
  gap: var(--space-4) !important;
  justify-content: center !important;
}
@media (min-width: 720px) {
  .single-product .sizing-panel-photo {
    padding: var(--space-10) var(--space-7) !important; /* 64px / 32px tablet+ */
  }
}
@media (min-width: 1024px) {
  .single-product .sizing-panel-photo {
    padding: var(--space-10) var(--space-6) !important; /* 64px / 28px desktop */
  }
}

/* =============================================================
   ROUND 7 — features width parity (FIX) + sizing mobile/tablet refinements

   Bug found this round: an older rule at lines 2202-2213 of this file
   uses the selector
       .features-section .feature-grid .feature-card { flex: 0 0 calc((100% - var(--space-4) * 2.3) / 2.3); }
   which has specificity 0,3,0 — HIGHER than Session 3's
   .single-product .feature-card (0,2,0), so the old rule wins
   regardless of cascade order. Result: PDP cards are ~43% wide
   instead of category's 30%, the section reads wider than category,
   and the 56px icons look smaller because they sit in a bigger box.

   Fix: same-class-count override scoped to .single-product so we
   beat the orphan rule by being later in cascade with matching 0,3,0
   specificity. Plus !important as belt-and-braces.
   ============================================================= */

.single-product .features-section .feature-grid {
  gap: var(--space-3) !important;
  padding: 0 var(--section-x) !important;
  margin: 0 calc(-1 * var(--section-x)) !important;
}
.single-product .features-section .feature-grid .feature-card {
  flex: 0 0 82% !important;             /* category mobile */
  max-width: none !important;
  scroll-snap-align: center !important;
  min-width: 260px !important;
}
@media (min-width: 720px) {
  .single-product .features-section .feature-grid .feature-card {
    flex: 0 0 44% !important;           /* category tablet — 2.2 visible */
    max-width: 420px !important;
  }
}
@media (min-width: 1024px) {
  .single-product .features-section .feature-grid .feature-card {
    flex: 0 0 30% !important;           /* category desktop — 3.3 visible */
    max-width: 380px !important;
  }
}
/* Defensive icon size — already 56×56 in mockup CSS, restated here
   with high specificity so nothing can quietly shrink it. */
.single-product .features-section .feature-icon {
  width: 56px !important;
  height: 56px !important;
}

/* ---------- SIZING — MOBILE PANEL SIDE GUTTER ----------
   Mobile panels currently render at flex: 0 0 88% which puts the
   panel ~12px from each viewport side once snapped. Reduce to 84%
   to give a more visible breathing room. Also scroll-snap-align is
   centered so the snapped panel is symmetric. */
@media (max-width: 719px) {
  .single-product .sizing-panel {
    flex: 0 0 84% !important;
    scroll-snap-align: center !important;
  }
  /* Ensure the carousel itself has enough padding so first-panel
     start isn't flush with the viewport. */
  .single-product .sizing-grid {
    padding: 0 var(--space-6) !important;
    margin: 0 calc(-1 * var(--space-6)) !important;
    scroll-padding-inline: var(--space-6);
  }
}

/* ---------- SIZING — TABLET CONTENT BIGGER ----------
   On tablet (720-1023px) the orange panel was rendering too sparse —
   "Sizing Help" eyebrow, the title, the step list and button all
   read small relative to the panel's vertical real estate. Bump
   the eyebrow + title + step-text + button size on tablet so the
   content fills the panel comfortably. Mobile + desktop stay as-is. */
@media (min-width: 720px) and (max-width: 1023px) {
  .single-product .sizing-photo-eyebrow {
    font-size: 42px !important;     /* up from 36px tablet+ */
  }
  .single-product .sizing-photo-title {
    font-size: var(--text-3xl) !important;  /* up from --text-2xl (30px vs 24px) */
  }
  .single-product .sizing-photo-steps {
    max-width: 380px;
  }
  .single-product .sizing-photo-steps li {
    font-size: var(--text-base) !important; /* up from --text-sm (16px vs 14px) */
    line-height: 1.5;
  }
  .single-product .sizing-photo-steps li::before {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  .single-product .sizing-photo-button {
    font-size: 13px !important;
    min-width: 240px;
    padding: var(--space-3) var(--space-7) !important;
  }
}

/* =============================================================
   ROUND 8 — features icons bigger + mobile panel side padding +
              tablet step text/badge bigger.

   User feedback: icons measured 5-8px smaller than category. The
   spec is 56×56 in both mockups but the perceived size is smaller
   on PDP — bump to 64×64 so the visual matches what the user expects.
   ============================================================= */

/* ---------- FEATURE ICONS — 64×64 across every viewport ----------
   Higher specificity than the earlier 56px rule so we win cleanly. */
.single-product .features-section .feature-icon {
  width: 64px !important;
  height: 64px !important;
}

/* ---------- SIZING PANEL — MOBILE HORIZONTAL PADDING ----------
   The step badges were too close to the orange panel's left edge.
   Bump horizontal padding from var(--space-6) (28px) to var(--space-8)
   (40px) on mobile so badges sit at 40px from the card edge (about
   12px more breathing room than before). Vertical padding unchanged. */
@media (max-width: 719px) {
  .single-product .sizing-panel-photo {
    padding: var(--space-9) var(--space-8) !important; /* 56px / 40px */
  }
}

/* ---------- SIZING PANEL — TABLET STEP TEXT + BADGE BIGGER ----------
   On tablet the steps still read small in the bigger panel. Bump
   step text + badge size further so the content fills the card. */
@media (min-width: 720px) and (max-width: 1023px) {
  .single-product .sizing-photo-steps li {
    font-size: var(--text-lg) !important;     /* 18px (was 16px) */
    line-height: 1.5;
    padding-left: 38px !important;            /* compensate for bigger badge */
    margin-bottom: var(--space-3) !important; /* a touch more breathing room between steps */
  }
  .single-product .sizing-photo-steps li::before {
    width: 26px !important;                   /* 26 (was 22) */
    height: 26px !important;
    font-size: 14px !important;               /* 14 (was 12) */
    top: 0;
  }
}

/* =============================================================
   ROUND 9 — mobile sizing-panel padding tightened FURTHER.

   Round 8 set mobile horizontal padding to var(--space-8) = 40px
   but you reported the badges still look too close to the panel
   edge. Pushing the orange panel's mobile horizontal padding to
   var(--space-10) (= 56px) so the badge column sits a clear 56px
   from the orange edge. Plus narrowing the steps list itself so
   it sits within a tighter central column rather than running to
   the content-area edges.
   ============================================================= */
@media (max-width: 719px) {
  .single-product .sizing-panel-photo {
    padding: var(--space-9) var(--space-10) !important; /* 56px vertical / 56px horizontal */
  }
  /* Steps list constrained so the column reads as a centred block
     within the panel, with extra breathing room from the orange
     edges on top of the panel padding above. */
  .single-product .sizing-photo-steps {
    max-width: 240px !important;
    margin: var(--space-3) auto !important;
  }
}

/* =============================================================
   SESSION 4A — Complete the Look (static structure)

   Pulls the partner products via product-level ACF override → primary
   category cat_pairs_partner_{1,2} fallback → slug-based safe default.
   Free-collar promo tile toggled by per-product
   product_show_free_collar_tile (default ON, off for climbing rope
   leads).

   CSS goal: PDP cards visually identical to the category page's
   "Pairs Beautifully With" cards (same .product-card markup) and the
   promo tile matches the mockup's dark neutral-900 styling. Adds a
   2-tile variant for products that hide the free-collar tile.

   Long-term: refactor into a shared cross-sell.css enqueued on both
   PDP and category (same pattern as features). Deferred to refactor
   session. Session 4B will add live colour-matching JS.
   ============================================================= */

.single-product .cross-sell {
  background: var(--white);
  padding: var(--section-y) 0;
}

/* Section header rhythm — match the other section headers. */
.single-product .cross-sell .section-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  .single-product .cross-sell .section-header {
    margin-bottom: var(--space-8);
  }
}

/* Grid layout
   - Mobile (<720px): single column — tiles stack vertically
   - Tablet+ (720px+): 3-col grid (per category mockup)
   - 2-tile variant: mobile = 1 col, tablet+ = 2 col */
.single-product .cross-sell-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile — stacked */
  gap: var(--space-4);
  align-items: stretch;
}
@media (min-width: 720px) {
  .single-product .cross-sell-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}
/* 2-tile variant (e.g. climbing rope leads — promo tile hidden) */
.single-product .cross-sell-grid--2 {
  grid-template-columns: 1fr !important; /* mobile — stacked */
}
@media (min-width: 720px) {
  .single-product .cross-sell-grid--2 {
    grid-template-columns: 1fr 1fr !important;
    max-width: 760px;
    margin: 0 auto;
  }
}

/* Product card — match category .product-card styling */
.single-product .cross-sell .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--neutral-900);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.single-product .cross-sell .product-card:hover { opacity: 0.92; }
.single-product .cross-sell .product-card .product-image {
  /* No background — match category. The base mockup .product-image
     rule applies display:flex + padding:var(--space-3) for the
     "placeholder" version that centred a coloured swatch — kill
     those here so a real WC thumbnail fills the square edge-to-edge. */
  background: transparent !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--space-3);
  display: block !important;
  padding: 0 !important;
}
.single-product .cross-sell .product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Card text — three lines matching category page exactly:
     .product-colour  → "Matching" (Sen 700 near-black, 14px sentence case)
     .product-title   → product NAME (Sen 400 lighter, 12px)
     .product-price   → price (Sen 700 near-black, 14px ONE LINE)
   Tight vertical rhythm between the three: ~2-3px gap so they read
   as a single grouped block, not three separate elements. */
.single-product .cross-sell .product-colour {
  font-family: 'Sen', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  line-height: 1.3;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important; /* tight under Matching — name sits flush */
}
.single-product .cross-sell .product-title,
.single-product .cross-sell .product-title * {
  font-family: 'Sen', sans-serif !important;
  font-weight: 400 !important;
  color: var(--neutral-500) !important;
  font-size: 12px !important;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 4px !important;
}
.single-product .cross-sell .product-price,
.single-product .cross-sell .product-price * {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  font-size: 14px !important;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  margin: 0 !important;
}
.single-product .cross-sell .product-price .amount,
.single-product .cross-sell .product-price .woocommerce-Price-amount {
  display: inline; /* belt-and-braces — keep on the same line */
  white-space: nowrap;
}
.single-product .cross-sell .product-price del,
.single-product .cross-sell .product-price ins {
  text-decoration: none;
}
.single-product .cross-sell .product-price del { opacity: 0.5; }

/* Promo tile — match mockup dark neutral-900 styling.
   NOT clickable (this is informational instructions). */
.single-product .cross-sell .promo-tile-free-collar {
  cursor: default;
}
.single-product .cross-sell .promo-tile-free-collar:hover { opacity: 1; }
.single-product .cross-sell .promo-tile {
  background: var(--neutral-900);
  color: var(--white);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 320px;
  aspect-ratio: auto; /* override the .product-image aspect-ratio inheritance */
}
.single-product .cross-sell .promo-tile-eyebrow {
  font-family: 'Caveat', cursive !important;
  font-weight: 400 !important;
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  transform: rotate(-2deg);
  line-height: 1;
  margin: 0;
}
.single-product .cross-sell .promo-tile-title {
  font-family: 'Allenoire', 'Fraunces', Georgia, serif !important;
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.single-product .cross-sell .promo-tile-subtitle {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  max-width: 260px;
  margin: 0;
}
.single-product .cross-sell .promo-tile-code {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-orange);
}

/* =============================================================
   FAQ SECTION FIXES
   - Eyebrow "good question." on the orange FAQ background was
     inheriting our Session 1B brand-orange .section-eyebrow rule
     (orange on orange = invisible). Force WHITE inside .faq-section
     with high specificity + !important so the brand-orange rule
     can't win.
   - Header → list spacing reduced from var(--space-8) (40px) to
     var(--space-6) (28px) to match category page .faq-header
     margin-bottom in shop.css.
   ============================================================= */
.single-product .faq-section .section-eyebrow,
.single-product .faq-section .section-eyebrow * {
  color: var(--white) !important;
}
.single-product .faq-section .section-header {
  margin-bottom: var(--space-6) !important;
}
/* FAQ title — 24px / 24px line-height to match category exactly.
   The byte-for-byte mockup .section-title was clamp(1.75rem, 6.5vw, 2.75rem)
   which made it 28-44px — too big for the FAQ heading. */
.single-product .faq-section .section-title {
  font-size: 24px !important;
  line-height: 24px !important;
  letter-spacing: -0.02em;
  margin-bottom: 0 !important;
}

/* =============================================================
   SESSION 6 — REVIEWS SECTION

   Harness PDP: Trustpilot brand block + summary row + review-card grid
                + Read More button. Custom review.php template renders
                each card with NO avatar + NO date + Verified buyer.

   Non-harness PDP: Trustpilot inline badge (bigger, centred treatment)
                    with brief copy.
   ============================================================= */

/* Section header rhythm — same pattern as other sections. */
.single-product .reviews-section {
  background: var(--white);
  padding: var(--section-y) 0;
}
.single-product .reviews-section .section-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  .single-product .reviews-section .section-header {
    margin-bottom: var(--space-8);
  }
}

/* ---------- TRUSTPILOT BRAND BLOCK (small, cream — top of harness) ---------- */
.single-product .reviews-section .trustpilot-block {
  background: var(--brand-cream);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.single-product .reviews-section .trustpilot-logo {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700;
  font-size: 14px;
  color: var(--neutral-900);
  letter-spacing: 0.05em;
}
.single-product .reviews-section .trustpilot-stars {
  display: flex;
  gap: 4px;
  color: #00b67a;          /* Trustpilot green */
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 1;
}
.single-product .reviews-section .trustpilot-rating-text {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: var(--neutral-700);
}
.single-product .reviews-section .trustpilot-rating-text strong {
  color: var(--neutral-900);
  font-weight: 700;
}
.single-product .reviews-section .trustpilot-link {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-xs);
  color: var(--neutral-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.single-product .reviews-section .trustpilot-link:hover { color: var(--brand-orange); }

/* ---------- PRODUCT SUMMARY ROW (4.9 ★★★★★ Based on N…) ---------- */
.single-product .reviews-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-6);
  gap: var(--space-3);
}
.single-product .reviews-summary-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.single-product .reviews-big-rating {
  font-family: 'Allenoire', 'Fraunces', Georgia, serif !important;
  font-size: 36px;
  color: var(--neutral-900);
  line-height: 1;
}
.single-product .reviews-stars-big {
  display: inline-flex;
  gap: 4px;
  color: var(--brand-orange);
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
}
.single-product .reviews-count-text {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  margin-top: 4px;
}

/* ---------- REVIEW CARDS — MASONRY VIA CSS COLUMNS ----------
   CSS columns let each card use its natural content height. Tall cards
   stay tall, short ones stay short — no fixed row alignment. Columns
   = 1 on mobile, 2 on tablet+. Cards must use break-inside: avoid so
   they never split across columns. */
.single-product .pt-reviews-wrap ol.commentlist,
.single-product .pt-reviews-wrap ul.commentlist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  column-count: 1;
  column-gap: var(--space-4);
}
@media (min-width: 720px) {
  .single-product .pt-reviews-wrap ol.commentlist,
  .single-product .pt-reviews-wrap ul.commentlist {
    column-count: 2;
    column-gap: var(--space-5);
  }
}

/* HIDE the avatar entirely. WC's woocommerce_comments callback emits
   <img class="avatar"> — our custom review.php skips it, but WC may
   still output a wrapping div with avatar dimensions. Kill it all. */
.single-product .pt-reviews-wrap img.avatar,
.single-product .pt-reviews-wrap .avatar,
.single-product .pt-reviews-wrap .comment_container > img.avatar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* HIDE WC's default meta + description wrappers so they don't show
   alongside our custom markup. (Defensive — our template doesn't emit
   .meta or .description as siblings, but in case any nested WP/WC
   rendering shows them they'll be invisible.) */
.single-product .pt-reviews-wrap .woocommerce-review__author,
.single-product .pt-reviews-wrap .woocommerce-review__dash,
.single-product .pt-reviews-wrap .woocommerce-review__published-date,
.single-product .pt-reviews-wrap p.meta {
  display: none !important;
}

/* HIDE WC's default <h2> review title above the commentlist (the
   "X reviews for [product]" line). Our reviews-summary-row owns that
   information. */
.single-product .pt-reviews-wrap #reviews .woocommerce-Reviews-title {
  display: none !important;
}

/* HIDE WC's "leave a review" form for now — read-only treatment until
   we wire up moderation. */
.single-product .pt-reviews-wrap #review_form_wrapper,
.single-product .pt-reviews-wrap #respond {
  display: none !important;
}

/* Review card — mockup-matching look.
   Column flow needs:
     - break-inside: avoid (never split across columns)
     - display: inline-block + width: 100% (column rendering quirk —
       block-level cards sometimes mis-flow without this on Safari)
     - margin-bottom for spacing between stacked cards in a column */
.single-product .pt-reviews-wrap .review-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  padding: var(--space-5);
  list-style: none !important;
  margin: 0 0 var(--space-4) !important;
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
@media (min-width: 720px) {
  .single-product .pt-reviews-wrap .review-card {
    padding: var(--space-6);
    margin: 0 0 var(--space-5) !important;
  }
}
.single-product .pt-reviews-wrap .review-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Stars row — brand-orange, mockup size. */
.single-product .pt-reviews-wrap .review-stars {
  color: var(--brand-orange);
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0;
}

/* Title (only renders when comment_meta('title') is set). */
.single-product .pt-reviews-wrap .review-title {
  font-family: 'Allenoire', 'Fraunces', Georgia, serif !important;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--neutral-900);
  margin: 0;
}

/* Review body. WC wraps comment_text() in <p>s — control margins. */
.single-product .pt-reviews-wrap .review-body,
.single-product .pt-reviews-wrap .review-body p {
  font-family: 'Sen', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400;
  color: var(--neutral-700);
  line-height: 1.55;
  margin: 0;
}
.single-product .pt-reviews-wrap .review-body p + p { margin-top: var(--space-2); }

/* Meta row — author + Verified buyer badge. NO date. */
.single-product .pt-reviews-wrap .review-meta {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--neutral-200);
}
.single-product .pt-reviews-wrap .review-author-name {
  color: var(--neutral-900);
  font-weight: 700;
}
.single-product .pt-reviews-wrap .review-meta-sep {
  color: var(--neutral-300);
  margin: 0 4px;
}
.single-product .pt-reviews-wrap .review-verified {
  color: #00b67a;            /* Trustpilot-green confidence colour */
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- READ MORE CTA BUTTON ---------- */
.single-product .pt-reviews-wrap .pt-reviews-cta {
  text-align: center;
  margin-top: var(--space-6);
}
.single-product .pt-reviews-wrap .pt-reviews-cta[hidden] { display: none !important; }
.single-product .pt-reviews-wrap .pt-reviews-more,
.single-product .pt-reviews-wrap .reviews-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--brand-orange);
  color: var(--white);
  font-family: 'Sen', sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease;
}
.single-product .pt-reviews-wrap .pt-reviews-more:hover,
.single-product .pt-reviews-wrap .reviews-cta-button:hover {
  background: var(--brand-orange-dark);
}

/* =============================================================
   DEFENSIVE OVERRIDE — gallery square aspect ratio

   Heads-up for future refactors:
   Earlier in this file (~lines 1233-1247 and 1273-1283) we
   already define the canonical squaring rules for
   .gallery-slide / .gallery-slide img and .gallery-thumb /
   .gallery-thumb img with reasonable specificity (0,1,1). At
   the source-file level those rules ARE present and correct.

   However after a recent CSS shake-up (breadcrumb fix +
   others) reports came in that PDP gallery images had reverted
   to their natural landscape ratio at runtime. We could not
   pinpoint the overriding rule from our own theme files — the
   most likely cause is Storefront's parent stylesheet or WC's
   woocommerce.css (both load before our product.css) bringing
   in a rule with surprising specificity, OR an image-optimisation
   plugin (EWWW) wrapping the <img> in a <picture> tag and
   bypassing our .gallery-slide > img selector.

   This block is a belt-and-braces override:
     - Specificity bumped to (0,0,3,1) via three-class chain
     - !important on every property so nothing later beats us
     - <picture> selector variants in case EWWW (or similar)
       wraps the img — we don't want a future plugin upgrade
       to silently re-break the gallery
     - aspect-ratio: auto !important on the img — defeats any
       browser-default ratio inheritance from the parent

   If you ever refactor product.css and want to remove this,
   first verify the upstream Storefront / WC / image-plugin
   rules that originally caused this regression are gone.
   ============================================================= */

.single-product .gallery .gallery-main .gallery-slide {
  aspect-ratio: 1 / 1 !important;
}
.single-product .gallery .gallery-main .gallery-slide img,
.single-product .gallery .gallery-main .gallery-slide picture,
.single-product .gallery .gallery-main .gallery-slide picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
  display: block !important;
  max-width: 100% !important;
}

.single-product .gallery .gallery-thumbs .gallery-thumb {
  aspect-ratio: 1 / 1 !important;
}
.single-product .gallery .gallery-thumbs .gallery-thumb img,
.single-product .gallery .gallery-thumbs .gallery-thumb picture,
.single-product .gallery .gallery-thumbs .gallery-thumb picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}