@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-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;

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

  --success: #00B67A;

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

  --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;

  --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-y: var(--space-6);
  --section-x: var(--space-5);

  --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); }

/* BUTTONS */
.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;
}
.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-ghost { background: transparent; color: var(--neutral-900); padding: var(--space-2) var(--space-3); border: 1px solid var(--neutral-200); }
.btn-ghost:hover { border-color: var(--neutral-900); }
.btn-arrow::after {
  content: '→';
  margin-left: var(--space-1);
  transition: transform var(--t-base);
}
.btn:hover .btn-arrow::after { transform: translateX(4px); }

/* TRUST ICONS */
.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'); }

/* ===== ANNOUNCEMENT ===== */
.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 {
  0%, 33.33%, 100% { opacity: 0; transform: translateY(8px); }
  3%, 30% { opacity: 1; transform: translateY(0); }
}

/* ===== HEADER ===== */
.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%; }

/* ===== BREADCRUMB — same markup pattern as PDP/Contact/Account.
   The <div class="container"> child provides horizontal indent so the
   breadcrumb sits in line with page content rather than flush left. */
.breadcrumb {
  padding: var(--space-3) 0;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-100);
  margin-bottom: var(--space-5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  list-style: none;
  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;
}

/* ===== CATEGORY HERO ===== */
.category-hero {
  background: var(--brand-cream);
  display: grid;
  grid-template-columns: 1fr;
}
.category-hero-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--brand-cream-warm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.category-hero-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.category-hero-content {
  padding: var(--space-8) var(--section-x);
  text-align: center;
}
.category-hero-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;
}
.category-hero-title {
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
  color: var(--neutral-900);
}
.category-hero-title .italic { font-style: italic; font-weight: 300; }
.category-hero-sub {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--neutral-700);
  max-width: 480px;
  margin: 0 auto;
}

/* ===== PRODUCT GRID ===== */
.product-section {
  padding: var(--section-y) 0;
  background: var(--white);
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-3);
}
.product-card { cursor: pointer; position: relative; display: flex; flex-direction: column; }

/* =============================================================
   PAGINATION — rendered after the product grid on /shop/ and
   category archives when there's more than one page of cards.
   ============================================================= */
.pt-pagination {
  display: flex;
  justify-content: center;
  margin: var(--space-8) 0 var(--space-4);
}
.pt-pagination ul,
.pt-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pt-pagination li { margin: 0; padding: 0; }
.pt-pagination a.page-numbers,
.pt-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--neutral-700);
  background: var(--white);
  border: 1px solid var(--neutral-300);
  text-decoration: none;
  transition: all var(--t-base);
}
.pt-pagination a.page-numbers:hover {
  border-color: var(--neutral-900);
  color: var(--neutral-900);
}
.pt-pagination span.page-numbers.current {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--white);
}
.pt-pagination .page-numbers.dots {
  border: 0;
  background: transparent;
  min-width: auto;
}
.pt-pagination .prev,
.pt-pagination .next {
  letter-spacing: 0.04em;
  padding: 0 var(--space-4);
}
.product-image {
  aspect-ratio: 1;
  background: var(--white);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: background var(--t-base);
}
.product-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-base);
}
.product-card:hover .product-image img { transform: scale(1.03); }
.product-quick-add {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-900);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--t-base);
}
.product-card:hover .product-quick-add {
  opacity: 1;
  transform: translateY(0);
}
.product-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--neutral-500);
  margin-bottom: var(--space-2);
  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; }
.product-colour {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--space-1);
  line-height: 1.3;
}

/* ===== LOAD MORE ===== */
.load-more-wrap {
  text-align: center;
  padding: var(--space-8) 0 0;
}

/* ===== TRUST STRIP — thin ===== */
.trust-section {
  background: var(--neutral-900);
  color: var(--white);
  padding: var(--space-3) 0;
}
/* Trust strip placement: mobile shows in-hero variant, tablet+ shows below-hero */
.trust-section--in-hero { display: block; }
.trust-section--below-hero { display: none; }
@media (min-width: 720px) {
  .trust-section--in-hero { display: none; }
  .trust-section--below-hero { display: block; }
}
.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 {
  0%, 25%, 100% { opacity: 0; transform: translateY(6px); }
  3%, 22% { opacity: 1; transform: translateY(0); }
}
.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; }

/* ===== CROSS-SELL ===== */
.cross-sell {
  background: var(--white);
  padding: var(--section-y) 0;
}
.cross-sell-grid > .product-card:last-child {
  grid-column: 1 / -1;
}

/* CTA tile inside cross-sell — self-contained with icon, instructions, button */
.cta-tile {
  background: var(--brand-orange);
  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 .cta-tile { background: var(--brand-orange-dark); }
.cta-tile-icon {
  width: 44px;
  height: 44px;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-1);
}
.cta-tile-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  transform: rotate(-3deg);
  color: var(--white);
  line-height: 1;
}
.cta-tile-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}
.cta-tile-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  counter-reset: step;
  max-width: 300px;
}
.cta-tile-steps li {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  counter-increment: step;
  line-height: 1.3;
}
.cta-tile-steps li::before {
  content: counter(step);
  width: 22px;
  height: 22px;
  background: var(--white);
  color: var(--brand-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.cta-tile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  background: var(--white);
  color: var(--brand-orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  transition: all var(--t-base);
  min-height: 40px;
}
.product-card:hover .cta-tile-button {
  background: var(--neutral-900);
  color: var(--white);
}
.cross-sell-header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.cross-sell-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;
}
.cross-sell-title {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.cross-sell-title .italic { font-style: italic; font-weight: 300; }
.cross-sell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}


/* Promo tile — dark variant for free collar offer */
.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);
}

/* 4-item cross-sell variant (for pages with both sizing + promo) */
.cross-sell-grid--4 > .product-card:nth-child(n+3) {
  /* Mobile: items 3 and 4 (the CTA tiles) stack full-width, one after the other */
  grid-column: 1 / -1;
}

/* ===== SEO CONTENT — white, cream cards with black icon ===== */
.seo-content {
  background: var(--white);
  color: var(--neutral-900);
  /* No top padding — cross-sell above is also white; its padding-bottom
     provides the gap, so doubling up creates excess white space. */
  padding: 0 0 var(--section-y);
}
.seo-content-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-6);
  padding: 0 var(--section-x);
}
.seo-content-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;
}
.seo-content-title {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
  color: var(--neutral-900);
}
.seo-content-title .italic { font-style: italic; font-weight: 300; }
.seo-content-sub {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--neutral-700);
}
.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));
}
.feature-grid::-webkit-scrollbar { display: none; }
.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;
}
.feature-card:hover {
  background: var(--brand-orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.feature-card:hover .feature-title { color: var(--white); }
.feature-card:hover .feature-desc { color: rgba(255,255,255,0.92); }
.feature-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon-svg {
  width: 100%;
  height: 100%;
  /* Icon is masked from the SVG file, coloured with background-color.
     SVG's actual colour doesn't matter — mask uses its shape. */
  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 {
  /* On hover, icon flips white to stay visible on the orange card */
  background-color: var(--white);
}
.feature-content { width: 100%; }
.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);
}
.feature-desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--neutral-700);
  max-width: 280px;
  margin: 0 auto;
}

/* ===== FAQ — orange brand moment ===== */
.faq-section {
  background: var(--brand-orange);
  color: var(--white);
  padding: var(--section-y) 0;
}
.faq-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--section-x);
}
.faq-header { text-align: center; margin-bottom: var(--space-6); }
.faq-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  color: var(--white);
  margin-bottom: var(--space-2);
  transform: rotate(-2deg);
  display: inline-block;
}
.faq-title {
  font-size: clamp(1.5rem, 5.5vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}
.faq-title .italic { font-style: italic; font-weight: 300; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.25);
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  transition: background var(--t-base);
}
.faq-item[open] {
  background: var(--neutral-900);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  letter-spacing: -0.005em;
  line-height: 1.35;
  transition: all var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: 0.85; }
.faq-item[open] summary { font-weight: 600; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--white);
  flex-shrink: 0;
  transition: transform var(--t-base);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item-body {
  padding: 0 var(--space-4) var(--space-5);
  color: rgba(255,255,255,0.92);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.faq-item-body p { margin-bottom: var(--space-3); }
.faq-item-body p:last-child { margin-bottom: 0; }

/* ===== FOOTER ===== owned exclusively by main.css */

/* ===== TABLET 720px+ ===== */
@media (min-width: 720px) {
  :root {
    --section-y: var(--space-8);
    --section-x: var(--space-8);
  }
  .container { max-width: 1100px; }
  .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; }

  .category-hero {
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    min-height: 380px;
    max-height: 480px;
  }
  .category-hero-image {
    aspect-ratio: auto;
    height: 100%;
    order: 2;
    padding: var(--space-8);
  }
  .category-hero-content {
    order: 1;
    text-align: left;
    padding: var(--space-10) var(--space-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .category-hero-sub { margin: 0; }

  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6) var(--space-5);
  }

  .trust-icon-img { width: 28px; height: 28px; }

  .cross-sell-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .cross-sell-grid > .product-card:last-child { grid-column: auto; }
  .cross-sell-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Tablet+: products stacked in col 1, CTAs span 2 rows in cols 2 & 3 */
  .cross-sell-grid--4 > .product-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .cross-sell-grid--4 > .product-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .cross-sell-grid--4 > .product-card:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
  .cross-sell-grid--4 > .product-card:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }

  .feature-card {
    /* Tablet: shows 2 cards with edge of 3rd peeking */
    flex: 0 0 44%;
    max-width: 420px;
  }

}

/* ===== DESKTOP 1024px+ ===== */
@media (min-width: 1024px) {
  :root { --section-y: var(--space-10); }
  .container { max-width: 1280px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-8) var(--space-6); }
  .category-hero { min-height: 440px; }
  .category-hero-content { padding: var(--space-16) var(--space-12); }
  .feature-card { /* Desktop: shows 3 cards with edge of 4th peeking */ flex: 0 0 30%; max-width: 380px; }
}

/* ============================================================
   DRAWERS: backdrop + base pattern (shared by mini cart + mobile menu)
   ============================================================ */
.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;
}

/* ============================================================
   MINI CART
   ============================================================ */
.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);
}

/* ============================================================
   MOBILE MENU DRAWER
   ============================================================ */
.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 badge */
.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; }


/* Footer-bottom legal links — owned by main.css */


/* =============================================================
   APPENDED — variation-card additions (do not edit above)
   ============================================================= */

/* (1) Colour name eyebrow above the title — Caveat, brand orange.
       Note the typography override in functions.php force-Sens div/span
       at step 3; .font-accent on the element wins because it's in step 2.
       We add the rule here just to size the eyebrow correctly. */
.product-card .product-colour {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--brand-orange);
  line-height: 1.1;
  margin-bottom: var(--space-1);
  text-transform: none;
  letter-spacing: 0;
}

/* (1) Swatch row beneath price — uses inline background for each dot
       via pawshtails_color_swatch_var(). */
.product-swatches {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.product-swatches > span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.product-swatches .product-swatches-more {
  width: auto;
  height: auto;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--neutral-100);
  font-size: 11px;
  font-weight: 700;
  color: var(--neutral-700);
  line-height: 18px;
}

/* (2) Pairs Beautifully With — 3 tiles. Stack on mobile, 3 cols on tablet+. */
.cross-sell .cross-sell-grid {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .cross-sell .cross-sell-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

/* (2) Promo tile — switch from neutral-900 to brand-orange.
       Eyebrow/title/sub stay light. CTA is a plain underline link, no button bg. */
.cross-sell .promo-tile {
  background: var(--brand-orange);
}
.cross-sell .promo-tile-eyebrow {
  color: var(--white);
}
.cross-sell .promo-tile-title {
  color: var(--white);
}
.cross-sell .promo-tile-subtitle {
  color: rgba(255, 255, 255, 0.92);
}
.cross-sell .promo-tile-button {
  background: transparent;
  color: var(--white);
  border: 0;
  padding: 0;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 0;
  text-decoration: none;
  transition: text-decoration 150ms ease;
}
.cross-sell .promo-tile-button:hover,
.product-card:hover .cross-sell .promo-tile-button,
.cross-sell .product-card:hover .promo-tile-button {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* (3) Star rating — recolour WC's default amber stars to brand orange. */
.product-stars .star-rating::before,
.product-stars .star-rating span::before {
  color: var(--brand-orange);
}

/* =============================================================
   APPENDED — three small surgical fixes
   ============================================================= */

/* (1) Star rating — brand-orange override (with !important so it wins
   over the lower-specificity rule appended earlier). The "star" font
   itself is preserved by the new exception in functions.php's
   typography override block. */
.star-rating::before,
.star-rating span::before {
  color: var(--brand-orange) !important;
}

/* (2) Colour-name label — switch from Caveat orange to Sen Bold near-black.
   !important on every property is necessary because an earlier append used
   .product-card .product-colour (higher specificity); this is the cleanest
   way to override append-only. */
.product-colour {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700 !important;
  color: var(--neutral-900, #1A1A1A) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 4px !important;
}

/* =============================================================
   APPENDED — four small surgical fixes
   ============================================================= */

/* (1) Product card stack — explicit margins so the gap reads:
       colour → 4px → title → 8px → rating → 8px → price → 12px → swatches.
       !important on most so we beat the earlier appends and any
       Storefront defaults without rewriting the block above. */
.product-card .product-colour { margin-bottom: 4px !important; }
.product-card .product-title  { margin-bottom: 8px !important; }
.product-card .product-stars  { margin-bottom: 8px !important; }
.product-card .product-price  { margin-bottom: 12px !important; }
.product-card .product-swatches { margin-top: 0 !important; }

/* (2) Price colour — override the Storefront / WC default purple.
       First block is the user-spec rule (targets WC's default ul.products
       markup if anything else on the page uses it). Second block targets
       our actual .product-card markup, which doesn't use ul.products. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
ul.products li.product .price,
ul.products li.product .price .amount {
  color: var(--neutral-900, #1A1A1A) !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 700;
}
.product-card .product-price,
.product-card .product-price *,
.product-card .product-price .amount,
.product-card .product-price .woocommerce-Price-amount,
.product-card .product-price .woocommerce-Price-amount bdi,
.product-card .product-price .woocommerce-Price-amount span {
  color: var(--neutral-900, #1A1A1A) !important;
  font-family: 'Sen', sans-serif !important;
  font-weight: 700;
}

/* (3) Star rating + manual review-count span. Selector matches the
       actual markup (.product-card, not .pawshtails-card). The WC "star"
       font is preserved by the override in functions.php; the orange
       colour by the !important rule appended earlier. */
.product-card .star-rating {
  font-size: 0.875em;
  margin-right: 6px;
}
.product-card .rating-count {
  font-family: 'Sen', sans-serif;
  color: var(--neutral-700, #5A554D);
  font-size: 0.85em;
  vertical-align: middle;
}

/* (4) Free Collar promo tile — informational panel, not a link.
       Reverts THIS TILE only to the original mockup palette (dark bg,
       orange Caveat eyebrow, white heading/sub) so the eyebrow is
       actually readable. Other promo tiles in cross-sell aren't affected. */
.cross-sell .promo-tile-free-collar .promo-tile {
  background: var(--neutral-900);
}
.cross-sell .promo-tile-free-collar .promo-tile-eyebrow {
  color: var(--brand-orange) !important;
}
.cross-sell .promo-tile-free-collar .promo-tile-title { color: var(--white); }
.cross-sell .promo-tile-free-collar .promo-tile-subtitle {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  max-width: none;
}
.cross-sell .promo-tile-free-collar .promo-tile-code {
  font-weight: 800;
  font-size: 1.05em;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.04em;
}

/* (4) Non-clickable — remove pointer cursor + lift / shadow hover states. */
.product-card.promo-tile-free-collar { cursor: default; }
.product-card.promo-tile-free-collar:hover {
  transform: none;
  box-shadow: none;
}
.product-card.promo-tile-free-collar:hover .promo-tile {
  background: var(--neutral-900); /* defeat the mockup's :hover bg shift */
}

/* (5) Square aspect ratio — match the surrounding product cards'
   .product-image (which has aspect-ratio: 1). Without this, the
   promo tile's variable content height makes its proportions read
   differently than the cards next to it. */
.product-card.promo-tile-free-collar .promo-tile {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

/* =============================================================
   APPENDED — feature card padding + alignment fix
   ============================================================= */

/* Tighten the excess top padding above the icon/title so each card
   reads as a balanced block. Symmetric vertical padding (16px each),
   tighter icon-to-title gap (12px), and justify-content: center so
   the icon + title + desc stack sits in the visual middle of the
   card regardless of copy length. This is what keeps alignment
   consistent across mobile / tablet / desktop. */
.feature-card {
  padding: var(--space-4) var(--space-6) !important;
  gap: var(--space-3) !important;
  justify-content: center !important;
}

/* Feature icons — 20% larger across all devices.
   Mockup was 56×56; 56 × 1.2 = 67px. The .feature-icon-svg inside
   fills 100% of its parent, so changing the wrapper dimensions
   scales the icon proportionally with no further edits. */
.feature-icon {
  width: 67px !important;
  height: 67px !important;
}

/* ============================================================
   CATEGORY HERO — single-column rebuild
   The hero is now a centred text block on a solid cream background.
   No image, no two-column split. Vertical padding is roughly half
   what it was, so the eyebrow + title + subtitle sit as a tight,
   editorial block above the trust strip.
   ============================================================ */
.category-hero {
  background: #FAF5ED !important;
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
  max-height: none !important;
}
.category-hero-content {
  order: 0 !important;
  text-align: center !important;
  padding: var(--space-6) var(--section-x) !important;
  display: block !important;
  max-width: 720px;
  margin: 0 auto;
}
.category-hero-sub {
  margin: 0 auto !important;
  line-height: 1.65 !important;
  color: var(--neutral-700) !important;
}

/* Tablet+ : widen the whole hero content block so the SEO subtitle
   doesn't break onto so many lines. ~10% wider on each side relative
   to the 720px base = ≈ 880px. The subtitle fills the container
   width (we drop its own 480px cap from the base styles here). */
@media (min-width: 720px) {
  .category-hero-content {
    max-width: 880px !important;
  }
  .category-hero-sub {
    max-width: 100% !important;
  }
}

@media (min-width: 1024px) {
  .category-hero-content {
    padding: var(--space-8) var(--space-12) !important;
    max-width: 1040px !important;
  }
}

/* ============================================================
   FAQ — closed-question typography
   Force the visible <summary> text to Sen Bold, white, no italics,
   no letter-spacing, no transform. The "good to know" eyebrow
   (Caveat) and the FAQ section title (Allenoire) are untouched.
   ============================================================ */
.faq-section .faq-item 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;
}

/* =============================================================
   DEFENSIVE OVERRIDE — product card image square aspect ratio

   Heads-up for future refactors:
   Earlier in this file (~lines 374-390) .product-image and
   .product-image img already have the squaring rules with
   sensible specificity. After a recent CSS shake-up reports
   came in that product card images on category pages reverted
   to their natural landscape ratio.

   Same pattern as the gallery override appended to product.css:
   bumped specificity + !important everywhere + <picture>
   selector variants so any image-optimisation plugin that
   wraps the <img> in <picture> (e.g. EWWW lazy-load + WebP)
   can't silently sidestep our rules.

   Untouched: the original .product-image / .product-image img
   rules higher up in this file — those stay as the primary
   path; this block only kicks in when something upstream
   tries to override them.
   ============================================================= */

.product-card .product-image {
  aspect-ratio: 1 / 1 !important;
}
.product-card .product-image > img,
.product-card .product-image > picture,
.product-card .product-image > picture > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: 100% !important;
}