/** Shopify CDN: Minification failed

Line 796:0 Unexpected "}"
Line 1168:10 Unexpected "@media"

**/
/* ==========================================================================
   tfh-pdp.css (round 15): the default product page, in the homepage design system.
   Loaded only by the hidden tfh-pdp section in templates/product.json. EVERY rule is scoped to body.template-product, so
   nothing here can reach the homepage or any other template. Wonder's own files are untouched: this stylesheet skins
   Wonder's markup, and the tfh-* sections on the page bring their own CSS (tfh-base/home/refine/r10).
   Colours and fonts are the GLOBAL theme settings (var(--color-*), var(--font-*)); nothing here declares a hex.
   Batches: A foundation + states + buy box · B buy-box craft · C below the fold · D SEO helpers.
   ========================================================================== */

/* ---------- Tokens (the homepage scale, defined here because they only exist on .tfh-home) ---------- */
body.template-product {
  --t-h1: clamp(30px, 25.07px + 1.315vw, 44px);
  --t-h2: clamp(32px, 26.37px + 1.502vw, 48px);
  --t-card: clamp(18px, 17.3px + 0.188vw, 20px);
  --t-eyebrow: 13px;
  --t-eyebrow-ls: 1.6px;
  --pdp-oat: var(--color-button-secondary-background-hover);
  --pdp-line: var(--color-border);
  --pdp-muted: var(--color-body-text-light);
  --pdp-ring: var(--color-button-primary-background);
  --pdp-btn-h: 52px;
  --pdp-radius: 6px;
}
@media (min-width: 990px) {
  body.template-product { --t-eyebrow-ls: 1.8px; --pdp-btn-h: 56px; }
}

/* ---------- One focus ring (D-090 / D-091): terracotta, 2px, offset 3px, radius 6 ---------- */
body.template-product :is(a, button, input, select, textarea, summary, [role='button'], [role='radio'], [tabindex='0']):focus-visible {
  outline: 2px solid var(--pdp-ring);
  outline-offset: 3px;
  border-radius: var(--pdp-radius);
  box-shadow: none;
}
body.template-product :is(a, button, [role='button'], [role='radio']) { outline-color: var(--pdp-ring); }
body.template-product input:focus-visible,
body.template-product select:focus-visible { outline-offset: 2px; }

/* ---------- D-100: pre-order badges only for titles that say PRE-ORDER (tfh-pdp.js lifts this class) ---------- */
body.template-product .card__badges--item[data-custom-badge='pre-order' i]:not(.tfh-pre-ok) { display: none; }

/* ---------- Gallery badges: the homepage badge (12px caps, 3px radius) ---------- */
body.template-product .card__badges--item,
body.template-product .card__badges--product::before {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  min-height: 22px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}
body.template-product .card__badges--item[data-custom-badge='pre-order' i] {
  background: color-mix(in srgb, var(--color-star-rating) 16%, var(--color-background));
  color: var(--color-sale-price);
  box-shadow: inset 0 0 0 1px var(--color-star-rating);
}
/* Sold out: Oat chip (the text is set by tfh-pdp-soldout.liquid) */
body.template-product .card__badges--product::before {
  background: var(--pdp-oat);
  color: var(--color-headings-text);
  box-shadow: inset 0 0 0 1px var(--pdp-line);
}

/* ---------- Buy box rhythm ---------- */
body.template-product .wt-product__info .wt-rating { min-height: 20px; }
body.template-product .wt-rating__count,
body.template-product .wt-rating__counter { font-size: 13px; }
body.template-product .tfh-pdp-storerating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pdp-muted);
}
body.template-product .tfh-pdp-storerating .tfh-stars { color: var(--color-star-rating); }
body.template-product .tfh-pdp-storerating .tfh-icon { width: 14px; height: 14px; }
body.template-product .wt-rating[role='link'],
body.template-product .wt-rating[tabindex] { cursor: pointer; }

/* Shop Pay instalments: quiet 14px muted line (JS also restyles it inside the shadow DOM and hides it when it only says "orders over $35") */
body.template-product form.installment { font-size: 14px; color: var(--pdp-muted); min-height: 28px; }
body.template-product form.installment.tfh-inst-off,
body.template-product .wt-product__info > div:has(> form.installment.tfh-inst-off) { display: none; }

/* Empty text blocks (a product with no tagline) must not leave a gap */
body.template-product .wt-product__text-block__wrapper:has(.wt-product__text-block > p:empty:only-child),
body.template-product .wt-product__text-block__wrapper:has(.wt-product__text-block:empty) { display: none; }

/* ---------- Subscription: one card, hairline rows, frequency only under the checked plan (D-103; one-time first, D-027) ---------- */
body.template-product .wt-subscription-widget { margin-bottom: 0; }
body.template-product .wt-subscription-widget__container {
  gap: 0;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  background: var(--color-background);
  overflow: hidden;
}
body.template-product .wt-subscription-widget__plans {
  position: relative;
  border: 0;
  border-top: 1px solid var(--pdp-line);
  border-radius: 0;
  padding: 11px 16px;
  background: transparent;
  overflow: visible;
  transition: background-color 0.2s ease;
}
body.template-product .wt-subscription-widget__container > .wt-subscription-widget__plans:first-child { border-top: 0; }
body.template-product .wt-subscription-widget__plans--selected {
  border-color: var(--pdp-line);
  background: var(--pdp-oat);
  box-shadow: inset 0 0 0 1.5px var(--color-links);
  z-index: 1;
}
body.template-product .wt-subscription-widget__plan-header { gap: 12px; min-height: 28px; }
body.template-product .wt-subscription-widget__plan-header__title { flex: 1 1 auto; max-width: none; min-width: 0; }
body.template-product .wt-subscription-widget__plan-header__title-text { font-size: 15px; line-height: 1.35; }
body.template-product .wt-subscription-widget__plans--selected .wt-subscription-widget__plan-header__title-text { font-weight: 700; }
body.template-product .wt-subscription-widget__plan-header__circle { width: 20px; height: 20px; border-color: var(--color-input-border); }
body.template-product .wt-subscription-widget__plans--selected .wt-subscription-widget__plan-header__circle { border: 2px solid var(--color-links); background: transparent; }
body.template-product .wt-subscription-widget__plans--selected .wt-subscription-widget__plan-header__circle::after { width: 10px; height: 10px; background: var(--color-links); }
body.template-product .wt-subscription-widget__plan-header__price { flex: 0 0 auto; }
body.template-product .wt-subscription-widget__plan-header__price-container { gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
body.template-product .wt-subscription-widget__plan-header__price-regular { font-size: 16px; }
body.template-product .wt-subscription-widget__plan-header__price-sale { font-size: 13px; color: var(--pdp-muted); }
/* the frequency picker shows only under the checked plan */
body.template-product .wt-subscription-widget__plans:not(.wt-subscription-widget__plans--selected) .wt-subscription-widget__plan-content { display: none; }
body.template-product .wt-subscription-widget__plans--selected .wt-subscription-widget__plan-content { margin-top: 12px; }
body.template-product .wt-subscription-widget__plan-content__select {
  height: 44px;
  font-size: 15px;
  border-color: var(--color-input-border);
  border-radius: var(--pdp-radius);
  background-color: var(--color-background);
}
/* keyboard: the plan header behaves as a radio (assets/tfh-pdp.js sets role + tabindex) */
body.template-product .wt-subscription-widget__plans:focus-visible { outline-offset: -3px; }
body.template-product .wt-subscription-widget__plans[role='radio']:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: -4px; }

/* ---------- Quantity + Add to cart: one 56px (52 on phones) row ---------- */
body.template-product .wt-product__add-to-cart_form--wrapper { gap: 12px; }
body.template-product .product-form__submit,
body.template-product .wt-product__sticky-buy__button {
  min-height: var(--pdp-btn-h);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-radius: var(--pdp-radius);
}
body.template-product .wt-product__add-to-cart .counter-wrapper { min-height: var(--pdp-btn-h); border-color: var(--color-input-border); border-radius: var(--pdp-radius); }
body.template-product .counter button { width: 44px; height: 44px; font-size: 20px; }
body.template-product .wt-product__add-to-cart_form form:has(quantity-counter) .counter .js-counter-decrease { margin-left: 2px; }
body.template-product .wt-product__add-to-cart_form form:has(quantity-counter) .counter .js-counter-increase { margin-right: 2px; }
body.template-product .counter input { padding: 0; height: 44px; }

/* ---------- Sold out (D-101): an outline button that is clearly off, no quantity, no plans, no sticky bar ---------- */
body.template-product .product-form__submit[disabled],
body.template-product .wt-button.product-form__submit[disabled] {
  opacity: 1;
  background: transparent;
  color: var(--pdp-muted);
  border: 1px solid var(--pdp-line);
  cursor: not-allowed;
}
body.template-product:has(#tfh-soldout) .counter-wrapper,
body.template-product:has(#tfh-soldout) .wt-subscription-widget { display: none; }
body.template-product:has(#tfh-soldout) .wt-product__sticky-buy { display: none !important; }

.tfh-soldout { margin: 20px 0 0; padding: 20px; background: var(--color-button-secondary-background-hover); border-radius: var(--pdp-radius); }
.tfh-soldout__h { margin: 0; font-family: var(--font-headline); font-weight: 300; font-size: 22px; line-height: 1.2; letter-spacing: -0.014em; color: var(--color-headings-text); }
.tfh-soldout__t { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--pdp-muted); }
.tfh-notify { margin: 16px 0 0; }
.tfh-notify__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-headings-text); }
.tfh-notify__row { display: flex; flex-wrap: wrap; gap: 10px; }
.tfh-notify__input { flex: 1 1 200px; min-width: 0; min-height: 52px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--color-input-text); background: var(--color-background); border: 1px solid var(--color-input-border); border-radius: var(--pdp-radius); }
.tfh-notify__btn { flex: 0 0 auto; padding: 0 24px; white-space: normal; }
.tfh-notify__msg { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.tfh-notify__msg--ok { color: var(--color-links); font-weight: 700; }
.tfh-notify__msg--err { color: var(--color-error-text, #8A2B1E); }
.tfh-soldout__alts { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pdp-line); }
.tfh-soldout__ah { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-links); }
.tfh-soldout__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tfh-soldout__list a { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 6px 0; color: var(--color-headings-text); text-decoration: none; }
.tfh-soldout__list img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--pdp-radius); background: var(--color-background); }
.tfh-soldout__list .tfh-alt__t { font-family: var(--font-headline); font-weight: 300; font-size: 17px; line-height: 1.25; }
.tfh-soldout__list .tfh-alt__p { font-size: 14px; color: var(--pdp-muted); }
.tfh-soldout__list a:hover .tfh-alt__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Sticky Add to cart: shown whenever the main button is out of view (assets/tfh-pdp.js adds .tfh-sticky-show) ---------- */
body.template-product .wt-product__sticky-buy {
  background: var(--color-background);
  box-shadow: none;
  border-top: 1px solid var(--pdp-line);
  padding: 10px 16px;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  transition-delay: 0s;
}
body.template-product .wt-product__sticky-buy.wt-product__sticky-buy--show:not(.tfh-sticky-show) { opacity: 0; visibility: hidden; }
body.template-product .wt-product__sticky-buy.tfh-sticky-show { opacity: 1; visibility: visible; }
body.template-product .wt-product__sticky-buy__wrapper { gap: 16px; }
@media (max-width: 899px) {
  /* phones: thumb, title and price on the left, the button on the right */
  body.template-product .wt-product__sticky-buy__product { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; }
  body.template-product .wt-product__sticky-buy__product img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: var(--pdp-radius); flex: 0 0 auto; }
  body.template-product .wt-product__sticky-buy__product-info { margin-left: 0; min-width: 0; }
  body.template-product .wt-product__sticky-buy__product-info .card__title { margin: 0; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.template-product .wt-product__sticky-buy__product-info .card__title a { color: var(--color-headings-text); text-decoration: none; }
  body.template-product .wt-product__sticky-buy__product-info .price { font-size: 14px; }
  body.template-product .wt-product__sticky-buy__button { flex: 0 0 auto; width: auto; min-width: 128px; padding-inline: 16px; }
  body.template-product .wt-product__sticky-buy__wrapper { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.template-product .wt-product__sticky-buy { transition: none; }
}

/* ==========================================================================
   Batch B: buy-box craft
   ========================================================================== */

/* ---------- Type: the homepage scale ---------- */
body.template-product .wt-product__name {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body.template-product .wt-collapse__trigger__title {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: var(--t-card);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
body.template-product .hero__subheading {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--t-eyebrow-ls);
  color: var(--color-links);
}

/* ---------- Buy box spacing: one 16px rhythm ---------- */
body.template-product .wt-product__info { display: flex; flex-direction: column; gap: 14px; }
body.template-product .wt-product__info > * { margin-top: 0; margin-bottom: 0; }
body.template-product .wt-product__info > .tfh-pdp-storerating,
body.template-product .wt-product__info > .wt-rating { margin-top: -8px; }
body.template-product .wt-product__info > .wt-product__price,
body.template-product .wt-product__info > [id^='price-'] { margin-top: -4px; }

/* ---------- Format / variant pills: 44px, homepage states ---------- */
body.template-product .wt-product__option .f-button__list__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  background: transparent;
  color: var(--color-headings-text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
body.template-product .wt-product__option .f-button__list__link.active {
  background: var(--pdp-oat);
  border-color: var(--color-headings-text);
  font-weight: 700;
}
@media (hover: hover) {
  body.template-product .wt-product__option .f-button__list__link:hover { border-color: var(--color-headings-text); }
}
body.template-product .tfh-opt--selfexplain .wt-product__option__title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}

/* ---------- Disclaimer + pre-order note: a quiet 14px caption ---------- */
body.template-product .tfh-pdp-disclaimer,
body.template-product .tfh-pdp-note { font-size: 14px; line-height: 1.5; color: var(--pdp-muted); }
body.template-product .tfh-pdp-disclaimer p,
body.template-product .tfh-pdp-note p { margin: 0; }

/* ---------- Trust: the signed promise strip (D-110 Option C, rounds/round-15/trust-mocks/opt-c.html) ---------- */
body.template-product .tfh-pdp-trust {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 5px; align-items: center;
  margin: 0; padding: 20px 2px; border-top: 1px solid var(--pdp-line); border-bottom: 1px solid var(--pdp-line);
}
body.template-product .tfh-pdp-ab {
  --s: 52px; --z: 3.1; --fx: 0.54; --fy: 0.40;
  position: relative; display: block; flex: 0 0 auto; width: var(--s); height: var(--s); margin-left: 4px; grid-row: 1 / span 2;
  border-radius: 50%; overflow: hidden; background: var(--pdp-oat);
  box-shadow: 0 0 0 3px var(--color-background), 0 0 0 4px var(--color-links);
}
body.template-product .tfh-pdp-ab img {
  position: absolute; max-width: none; height: auto; width: calc(var(--s) * var(--z));
  left: calc(var(--s) / 2 - var(--s) * var(--z) * var(--fx)); top: calc(var(--s) / 2 - var(--s) * var(--z) * 1.5 * var(--fy));
}
body.template-product .tfh-pdp-promise { margin: 0; align-self: end; font: italic 300 21px/1.2 var(--font-headline); letter-spacing: -0.1px; color: var(--color-headings-text); }
body.template-product .tfh-pdp-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; align-self: start; margin: 0; padding: 0; list-style: none; font: 400 14.5px/1.45 var(--font-base); color: var(--color-headings-text); }
body.template-product .tfh-pdp-facts li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
body.template-product .tfh-pdp-facts li + li::before { content: ''; flex: 0 0 auto; order: -1; width: 5px; height: 5px; margin: 0 13px; background: var(--color-button-primary-background); transform: rotate(45deg); }
body.template-product .tfh-pdp-facts b { font-weight: 700; }
body.template-product .tfh-pdp-ph { flex: 0 0 auto; width: 19px; height: 19px; color: var(--color-links); }
body.template-product .tfh-pdp-st { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 2px; color: var(--color-star-rating); }
@media (max-width: 480px) {
  body.template-product .tfh-pdp-trust { column-gap: 14px; padding: 18px 0; }
  body.template-product .tfh-pdp-ab { --s: 48px; }
  body.template-product .tfh-pdp-promise { font-size: 20px; }
  body.template-product .tfh-pdp-facts { flex-direction: column; align-items: flex-start; gap: 3px; }
  body.template-product .tfh-pdp-facts li + li::before { display: none; }
}

/* ---------- Benefit checks: Phosphor Light check in sage ---------- */
body.template-product .wt-product__bulletpoints .wt-product__features__list { display: grid; gap: 10px; margin: 0; }
body.template-product .wt-product__bulletpoints .wt-product__features__item { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; }
body.template-product .wt-product__bulletpoints .wt-product__features__icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
body.template-product .wt-product__bulletpoints .wt-product__features__icon > * { display: none; }
body.template-product .wt-product__bulletpoints .wt-product__features__icon::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: var(--color-links);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- "Good for" line ---------- */
body.template-product .tfh-pdp-goodfor { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pdp-muted); }
body.template-product .tfh-pdp-goodfor strong { margin-right: 6px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-links); }

/* ---------- Upsells: one bundle card + a compact "Pairs well with" ---------- */
body.template-product .wt-product__upsell { margin: 6px 0 0; padding: 0; }
body.template-product .wt-product__upsell__headline {
  margin: 0 0 8px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-links);
}
body.template-product .wt-product__upsell__content {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 12px 0;
}
body.template-product .wt-product__upsell__content + .wt-product__upsell__content { border-top: 1px solid var(--pdp-line); }
body.template-product .wt-product__upsell__content > a { display: block; width: 64px; }
body.template-product .wt-product__upsell__picture,
body.template-product .wt-product__upsell__image { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--pdp-radius); }
body.template-product .wt-product__upsell__product { display: contents; }
body.template-product .wt-product__upsell__info { display: grid; gap: 2px; min-width: 0; }
body.template-product .wt-product__upsell .card__title { margin: 0; font-family: var(--font-headline); font-weight: 300; font-size: 18px; line-height: 1.25; letter-spacing: -0.005em; }
body.template-product .wt-product__upsell .card__title a { color: var(--color-headings-text); text-decoration: none; }
body.template-product .wt-product__upsell .price { font-size: 15px; }
body.template-product .wt-product__upsell .price__container { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
body.template-product .wt-product__upsell .price-item--regular.price-item--lower,
body.template-product .wt-product__upsell s { font-size: 14px; color: var(--pdp-muted); }
body.template-product .wt-product__upsell__button .hero__button--secondary {
  min-height: 44px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border: 1px solid var(--color-button-primary-background);
  border-radius: var(--pdp-radius);
  background: transparent;
  color: var(--color-button-primary-background);
  white-space: nowrap;
}
@media (hover: hover) {
  body.template-product .wt-product__upsell__button .hero__button--secondary:hover {
    background: var(--color-button-primary-background);
    border-color: var(--color-button-primary-background);
    color: var(--color-button-primary-text);
  }
}
/* the bundle upgrade is a card */
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] {
  padding: 16px 18px 6px;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
}
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .wt-product__upsell__content { grid-template-columns: 72px minmax(0, 1fr) auto; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] :is(.wt-product__upsell__picture, .wt-product__upsell__image, .wt-product__upsell__content > a) { width: 72px; height: 72px; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .wt-product__upsell__content > a { height: auto; }
/* pairs well with: at most two rows (assets/tfh-pdp.js hides $0.00 items first) */
body.template-product .wt-product__upsell:not([data-tfh-up]) .wt-product__upsell__content:nth-of-type(n+4) { display: none; }
body.template-product .wt-product__upsell__content[hidden] { display: none; }

/* ---------- Text links: sage, 13px / 700 / 1.8px, arrow, drawn underline ---------- */
body.template-product .wt-product__info .hero__button--link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  --color-custom-text: var(--color-links);
  color: var(--color-links);
  text-decoration: none;
}
body.template-product .wt-product__info .hero__button--link > span { padding-bottom: 5px; }
body.template-product .wt-product__info .hero__button--link > span::before,
body.template-product .wt-product__info .hero__button--link > span::after { bottom: 0; }
body.template-product .wt-product__info .hero__button--link::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) {
  body.template-product .wt-product__info .hero__button--link:hover { --color-custom-text: var(--color-button-primary-background-hover); color: var(--color-button-primary-background-hover); background: none; }
  body.template-product .wt-product__info .hero__button--link:hover::after { transform: translateX(4px); }
}
body.template-product .wt-button-section__container { margin: 0; }

/* ---------- Tabs: hairlines, Phosphor plus that morphs to minus ---------- */
body.template-product .wt-product__info .wt-collapse { border: 0; border-bottom: 1px solid var(--pdp-line); margin: 0; }
body.template-product .wt-product__info collapsible-section:first-of-type { border-top: 1px solid var(--pdp-line); }
body.template-product .wt-product__info .wt-collapse__trigger { padding: 16px 0; margin: 0; }
body.template-product .wt-collapse__trigger .wt-icon { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
body.template-product .wt-collapse__trigger .wt-icon > * { display: none; }
body.template-product .wt-collapse__trigger .wt-icon::before,
body.template-product .wt-collapse__trigger .wt-icon::after {
  content: '';
  position: absolute;
  background: var(--color-headings-text);
  border-radius: 1px;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 0.2s ease;
}
body.template-product .wt-collapse__trigger .wt-icon::before { left: 2px; right: 2px; top: 9.25px; height: 1.5px; }
body.template-product .wt-collapse__trigger .wt-icon::after { top: 2px; bottom: 2px; left: 9.25px; width: 1.5px; }
body.template-product .wt-collapse__trigger--active .wt-icon::after,
body.template-product .wt-collapse__trigger[aria-expanded='true'] .wt-icon::after { transform: scaleY(0) rotate(90deg); opacity: 0; }
body.template-product .wt-collapse__trigger--active .wt-icon::before,
body.template-product .wt-collapse__trigger[aria-expanded='true'] .wt-icon::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  body.template-product .wt-collapse__trigger .wt-icon::before,
  body.template-product .wt-collapse__trigger .wt-icon::after { transition: none; }
}

/* ---------- Gallery frame: Buttermilk well, 6px radius, packshots melt into the page ---------- */
body.template-product .wt-product__gallery .swiper-slide {
  background: var(--color-background);
  border-radius: var(--pdp-radius);
  overflow: hidden;
}
/* Round 21 Batch B (Ruchi): packshots keep their own white; no blend into the page colour. The slide is filled with the picture's sampled edge colour (assets/tfh-pdp.js), so there is no cream band round it, and the 1px hairline below frames it on the cream page. */
body.template-product .wt-product__gallery .swiper-slide.tfh-packshot img { mix-blend-mode: normal; }
body.template-product .wt-product__info > [data-tfh-empty] { display: none; }

body.template-product .wt-product__info .wt-product__text-block { margin: 0; }
body.template-product .wt-product__info .wt-product__text-block__wrapper { margin: 0; padding: 0; }
body.template-product .wt-product__info .wt-product__text-block p:last-child { margin-bottom: 0; }
body.template-product .wt-product__info .wt-product__text-block { padding: 0; }
/* compare-at price: quiet, the sale price leads (P1-7) */
body.template-product .wt-product__price .price-item--regular.price-item--lower { font-size: 0.62em; color: var(--pdp-muted); margin-right: 6px; }

/* ==========================================================================
   Batch C: below the fold (homepage rhythm, D-071)
   Buttermilk buy box · Oat reviews · Buttermilk related · deep bundle · Buttermilk Abbie · Oat FAQ · deep final CTA
   ========================================================================== */

/* ---------- Reviews band (Oat): the tfh heading + Judge.me skinned with CSS only (D-025, no app setting touched) ---------- */
body.template-product [id^='shopify-section-template--'][id$='__reviews_head'],
body.template-product [id^='shopify-section-template--'][id$='__reviews'] { background: var(--pdp-oat); }
body.template-product .tfh-pdp-reviews-head { padding-bottom: 8px; }
body.template-product [id$='__reviews'] .page-width,
body.template-product [id$='__reviews'] .section-padding { background: transparent; }
body.template-product [id$='__reviews'] { padding-bottom: 80px; }
@media (max-width: 749px) { body.template-product [id$='__reviews'] { padding-bottom: 48px; } }

body.template-product #judgeme_product_reviews {
  --jdgm-star-color: var(--color-star-rating);
  --jdgm-primary-color: var(--color-headings-text);
  --jdgm-secondary-color: var(--pdp-line);
  --jdgm-write-review-bg-color: var(--color-button-primary-background);
  --jdgm-write-review-text-color: var(--color-button-primary-text);
  --jdgm-paginate-color: var(--color-headings-text);
  --jdgm-reviewer-name-color: var(--color-headings-text);
  --jdgm-border-radius: 6px;
  font-family: var(--font-base);
  color: var(--color-text);
}
body.template-product #judgeme_product_reviews .jdgm-rev-widg__title { display: none; }
body.template-product #judgeme_product_reviews .jdgm-star,
body.template-product #judgeme_product_reviews .jdgm-star:before { color: var(--color-star-rating) !important; }
body.template-product #judgeme_product_reviews .jdgm-star.jdgm--off,
body.template-product #judgeme_product_reviews .jdgm-star.jdgm--half { color: var(--color-star-rating) !important; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__header { padding: 8px 0 24px; border: 0; }
body.template-product #judgeme_product_reviews .jdgm-row-stars { display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: center; justify-content: space-between; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary { text-align: left; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary-inner { text-align: left; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary-average {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-headings-text);
}
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary-text { font-size: 14px; color: var(--pdp-muted); }
body.template-product #judgeme_product_reviews img.jdgm-verified-checkmark { display: none; }
/* breakdown: sage bars on a hairline track, terracotta stars */
body.template-product #judgeme_product_reviews .jdgm-histogram__bar { background: var(--pdp-line); border-radius: 6px; overflow: hidden; }
body.template-product #judgeme_product_reviews .jdgm-histogram__bar-content { background: var(--color-links); border-radius: 6px; }
body.template-product #judgeme_product_reviews .jdgm-histogram__frequency,
body.template-product #judgeme_product_reviews .jdgm-histogram__row { color: var(--pdp-muted); font-size: 13px; }
/* actions: outline "Write a review", sage "Ask a question" link */
body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: flex-end; }
body.template-product #judgeme_product_reviews .jdgm-write-rev-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: var(--pdp-btn-h);
  padding: 0 32px;
  font: 700 13px/1.2 var(--font-base);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-button-primary-background);
  background: transparent;
  border: 1px solid var(--color-button-primary-background);
  border-radius: var(--pdp-radius);
  text-decoration: none;
  transition: background-color 0.22s ease, color 0.22s ease;
}
@media (hover: hover) {
  body.template-product #judgeme_product_reviews .jdgm-write-rev-link:hover { background: var(--color-button-primary-background); color: var(--color-button-primary-text); border-color: var(--color-button-primary-background); }
}
body.template-product #judgeme_product_reviews .jdgm-ask-question-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 44px;
  padding: 0;
  font: 700 13px/1.2 var(--font-base);
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--color-links);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
body.template-product #judgeme_product_reviews .jdgm-ask-question-btn:hover { color: var(--color-button-primary-background-hover); }
/* photos: one scroll row, 6px tiles */
body.template-product #judgeme_product_reviews .jdgm-gallery-title { font: 700 13px/1.4 var(--font-base); letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase; color: var(--color-links); text-align: left; }
body.template-product #judgeme_product_reviews .jdgm-row-media { padding: 0 0 8px; }
body.template-product #judgeme_product_reviews .jdgm-gallery-wrapper { margin: 0; max-width: none; width: 100%; }
body.template-product #judgeme_product_reviews .jdgm-gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 0; }
body.template-product #judgeme_product_reviews .jdgm-gallery::-webkit-scrollbar { display: none; }
body.template-product #judgeme_product_reviews .jdgm-gallery > * { flex: 0 0 auto; scroll-snap-align: start; border-radius: var(--pdp-radius); overflow: hidden; }
/* sort + list */
body.template-product #judgeme_product_reviews .jdgm-row-actions { padding: 0 0 8px; }
body.template-product #judgeme_product_reviews .jdgm-sort-dropdown { font: 400 14px var(--font-base); color: var(--color-headings-text); border: 1px solid var(--pdp-line); border-radius: var(--pdp-radius); background-color: var(--color-background); min-height: 44px; }
body.template-product #judgeme_product_reviews .jdgm-rev { padding: 28px 0; border-top: 1px solid var(--pdp-line); border-bottom: 0; }
body.template-product #judgeme_product_reviews .jdgm-rev__icon { display: none !important; }
body.template-product #judgeme_product_reviews .jdgm-row-profile { padding-left: 0; }
body.template-product #judgeme_product_reviews .jdgm-rev__author-wrapper { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; gap: 12px; }
body.template-product #judgeme_product_reviews .jdgm-rev__author { font: 700 15px var(--font-base); color: var(--color-headings-text); }
body.template-product #judgeme_product_reviews .jdgm-rev__buyer-badge-wrapper { display: inline-flex; }
body.template-product #judgeme_product_reviews .jdgm-rev__buyer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 0;
  background: none !important;
  color: var(--pdp-muted) !important;
  border-radius: 0;
}
body.template-product #judgeme_product_reviews .jdgm-rev__buyer-badge::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--color-links);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 100 20A10 10 0 0010 0zm4.7 7.7l-5.6 5.6a1 1 0 01-1.4 0l-2.4-2.4a1 1 0 011.4-1.4l1.7 1.7 4.9-4.9a1 1 0 011.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 100 20A10 10 0 0010 0zm4.7 7.7l-5.6 5.6a1 1 0 01-1.4 0l-2.4-2.4a1 1 0 011.4-1.4l1.7 1.7 4.9-4.9a1 1 0 011.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.template-product #judgeme_product_reviews .jdgm-rev__buyer-badge::after { content: 'Verified buyer'; font-size: 14px; }
body.template-product #judgeme_product_reviews .jdgm-rev__timestamp { font-size: 13px; color: var(--pdp-muted); }
body.template-product #judgeme_product_reviews .jdgm-rev__title { font: 700 17px var(--font-base); color: var(--color-headings-text); }
body.template-product #judgeme_product_reviews .jdgm-rev__body { font-size: 17px; line-height: 1.6; color: var(--color-text); }
body.template-product #judgeme_product_reviews .jdgm-rev__transparency-badge-wrapper { display: none; }
body.template-product #judgeme_product_reviews .jdgm-paginate { padding-top: 24px; }
body.template-product #judgeme_product_reviews .jdgm-paginate__page { color: var(--color-headings-text); font: 400 16px var(--font-base); }
body.template-product #judgeme_product_reviews .jdgm-paginate__page.jdgm-curt { color: var(--color-headings-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-button-primary-background); text-underline-offset: 6px; }
@media (max-width: 749px) {
  body.template-product #judgeme_product_reviews .jdgm-histogram { display: none; }
  body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper { justify-content: flex-start; width: 100%; }
  body.template-product #judgeme_product_reviews .jdgm-write-rev-link { width: 100%; }
}

/* ---------- Store-proof wall: reuse the homepage reviews section; give its header the eyebrow column ---------- */
@media (min-width: 990px) { body.template-product .tfh-reviews__head > .tfh-reviews__title { grid-column: 2 / 8; } }

/* ---------- Related + recently viewed: the homepage card language on Wonder's cards ---------- */
body.template-product .card__picture-container {
  background: var(--color-background);
  box-shadow: inset 0 0 0 1px var(--pdp-line);
  border-radius: var(--pdp-radius);
  overflow: hidden;
}
body.template-product .card__picture-container img { transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1); }
body.template-product .card__container { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.1, 1); }
@media (hover: hover) {
  body.template-product .card__container:hover { transform: translateY(-4px); }
  body.template-product .card__container:hover .card__picture-container img { transform: scale(1.04); }
}
body.template-product .card__title { font-family: var(--font-headline); font-weight: 300; font-size: var(--t-card); line-height: 1.25; letter-spacing: -0.005em; }
body.template-product .card__title a {
  color: var(--color-headings-text);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) { body.template-product .card__container:hover .card__title a { background-size: 100% 1px; } }
body.template-product .card .price { font-size: 15px; }
body.template-product .card .wt-rating__count,
body.template-product .card .wt-rating__counter { font-size: 13px; color: var(--pdp-muted); }
/* max one badge per card */
body.template-product .card__container .card__badges .card__badges--item:nth-child(n + 2) { display: none; }
/* Recently viewed hides until there are two other products (assets/tfh-pdp.js) */
body.template-product [data-tfh-rv-hide] { display: none !important; }
body.template-product [id$='__recent_head'] { display: none; }
body.template-product [id$='__recent_head'].tfh-rv-on { display: block; }

/* ---------- FAQ (Oat, two columns) ---------- */
.tfh-pdp-faq__grid { row-gap: 32px; }
@media (min-width: 990px) {
  .tfh-pdp-faq__head { grid-column: 2 / 6 !important; align-self: start; position: static; }
  .tfh-pdp-faq__list { grid-column: 7 / 14 !important; }
}
.tfh-pdp-faq__head .tfh-btn { margin-top: 20px; }
.tfh-pdp-faq__list { border-top: 1px solid var(--s-rule); }
.tfh-pdp-faq__item { border-bottom: 1px solid var(--s-rule); }
.tfh-pdp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  color: var(--s-heading);
}
.tfh-pdp-faq__q::-webkit-details-marker { display: none; }
.tfh-pdp-faq__qt { font-family: var(--tfh-font-head); font-weight: 300; font-size: var(--t-card); line-height: 1.3; letter-spacing: -0.005em; }
.tfh-pdp-faq__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.tfh-pdp-faq__icon::before,
.tfh-pdp-faq__icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 0.2s ease; }
.tfh-pdp-faq__icon::before { left: 2px; right: 2px; top: 9.25px; height: 1.5px; }
.tfh-pdp-faq__icon::after { top: 2px; bottom: 2px; left: 9.25px; width: 1.5px; }
.tfh-pdp-faq__item[open] .tfh-pdp-faq__icon::after { transform: scaleY(0) rotate(90deg); opacity: 0; }
.tfh-pdp-faq__item[open] .tfh-pdp-faq__icon::before { transform: rotate(180deg); }
.tfh-pdp-faq__a { overflow: hidden; }
.tfh-pdp-faq__ai { padding: 0 48px 24px 0; font-size: var(--t-body); line-height: 1.6; color: var(--s-text); }
.tfh-pdp-faq__ai p { margin: 0; }
.tfh-pdp-faq__ai p + p { margin-top: 0.8em; }
.tfh-pdp-faq__ai a { color: var(--s-link); text-underline-offset: 3px; }
.tfh-pdp-faq__q:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .tfh-pdp-faq__icon::before, .tfh-pdp-faq__icon::after { transition: none; }
}

/* Judge.me: align to the tfh content edge, three calm columns */
body.template-product #judgeme_product_reviews { max-width: none !important; margin: 0 !important; padding: 0 16px; }
@media (min-width: 1200px) { body.template-product #judgeme_product_reviews { padding: 0 32px; } }
body.template-product #judgeme_product_reviews .jdgm-rev-widg { max-width: 1376px; margin: 0 auto; padding: 0; border: 0; }
body.template-product #judgeme_product_reviews .jdgm-row-stars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; justify-content: stretch; }
@media (min-width: 990px) { body.template-product #judgeme_product_reviews .jdgm-row-stars { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; } }
body.template-product #judgeme_product_reviews :is(.jdgm-rev-widg__summary, .jdgm-histogram, .jdgm-widget-actions-wrapper, .jdgm-rev-widg__header, .jdgm-row-stars) { border: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: auto; max-width: none; }
body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper { flex-direction: row; justify-content: flex-start; }
@media (min-width: 990px) { body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper { justify-content: flex-end; } }
body.template-product #judgeme_product_reviews .jdgm-histogram { margin: 0; }
body.template-product #judgeme_product_reviews .jdgm-sort-dropdown { width: auto; padding: 0 40px 0 14px; }
body.template-product #judgeme_product_reviews :is(.jdgm-legacy-widget-content, .jdgm-rev-widg) { padding: 0 !important; max-width: 1376px; margin-left: auto; margin-right: auto; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary-inner { margin: 0 !important; padding: 0 !important; width: auto !important; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary-stars { justify-content: flex-start; }
body.template-product #judgeme_product_reviews { padding: 0 !important; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary { display: flex; justify-content: flex-start; }

/* No layout shift: reserve the related row while Shopify's recommendations load (they arrive when the row nears the viewport) */
body.template-product [id$='__related'] { min-height: 430px; }
@media (min-width: 750px) { body.template-product [id$='__related'] { min-height: 540px; } }
@media (min-width: 990px) { body.template-product [id$='__related'] { min-height: 684px; } }
body.template-product .wt-product__info > div:has(> .wt-product__options:not(:has(*))) { display: none; }
/* the homepage 4:5 well, so the cards have their final height before the photos load (no CLS) */
body.template-product :is([id$='__related'], [id$='__recently_viewed']) .card__picture-container { aspect-ratio: 4 / 5; }
body.template-product :is([id$='__related'], [id$='__recently_viewed']) .card__picture-container :is(a.card, picture.card__picture) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
body.template-product :is([id$='__related'], [id$='__recently_viewed']) .card__picture-container img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Batch D: breadcrumb with a collection level, back link on phones ---------- */
body.template-product .tfh-crumbs__list .breadcrumbs__link { color: var(--color-links); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 0.4s cubic-bezier(0.25, 1, 0.5, 1); padding-bottom: 2px; }
@media (hover: hover) { body.template-product .tfh-crumbs__list .breadcrumbs__link:hover { background-size: 100% 1px; } }
body.template-product .tfh-crumbs__back { display: none; }
@media (max-width: 749px) {
  body.template-product .tfh-crumbs__list { display: none; }
  body.template-product .tfh-crumbs__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-links); text-decoration: none; }
  body.template-product .tfh-crumbs__arrow { width: 14px; height: 14px; transform: rotate(180deg); }
}
body.template-product .tfh-pdp-catlink { margin: 0; }
@media (max-width: 749px) {
  body.template-product .tfh-crumbs { --section-gap-top: 0px !important; --section-gap-bottom: 0px !important; --section-gap-top-mobile: 0px !important; --section-gap-bottom-mobile: 0px !important; margin: 0; }
  body.template-product .tfh-crumbs .breadcrumbs { padding-top: 0; padding-bottom: 0; }
  body.template-product .tfh-crumbs__back { min-height: 40px; }
}
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary::before,
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary::after { display: none !important; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary-text { text-align: left; }


/* ==========================================================================
   Batch F (round 15, iteration 2): copy and state fixes, merged upsell card, badges, reviews list, tap targets, focus
   ========================================================================== */

/* ---------- Products without reviews: plain text, no stars ---------- */
body.template-product .tfh-pdp-storerating { display: block; margin: 0; font-size: 13px; line-height: 1.45; color: var(--pdp-muted); min-height: 20px; }


/* ---------- Saving line (terracotta, only when there is a compare-at price) ---------- */
body.template-product .tfh-pdp-save { margin: -6px 0 0; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--color-sale-price); }

/* ---------- The one Mix & match prompt sits right under Add to cart ---------- */
body.template-product .wt-product__info > .wt-button-section__container { margin-top: -8px; }
body.template-product .wt-product__info > .wt-button-section__container .hero__button--link { min-height: 36px; }

/* ---------- One upsell card: the bundle row, a hairline, then the quiet "Or add one" rows ---------- */
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade']:not([hidden]) + .wt-product__upsell[data-block-id='pairs_with'] { margin-top: -14px; padding: 8px 18px 6px; border: 1px solid var(--pdp-line); border-radius: 0 0 var(--pdp-radius) var(--pdp-radius); }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade']:has(+ .wt-product__upsell[data-block-id='pairs_with']:not([hidden])) { border-bottom: 0; border-radius: var(--pdp-radius) var(--pdp-radius) 0 0; padding-bottom: 4px; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__headline { margin: 0; padding-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pdp-muted); }

/* ---------- Badges: one family. Oat, a hairline, Pine Ink 12px caps. (Pre-order keeps its accent chip, D-073.) ---------- */
body.template-product .card__badges--item:not([data-custom-badge='pre-order' i]) {
  background: var(--pdp-oat) !important;
  color: var(--color-headings-text) !important;
  box-shadow: inset 0 0 0 1px var(--pdp-line);
}

/* ---------- Gallery: pages and recipes that melt into the page keep a hairline edge ---------- */
body.template-product .wt-product__gallery .swiper-slide.tfh-packshot { position: relative; }
body.template-product .wt-product__gallery .swiper-slide.tfh-packshot::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--pdp-line); border-radius: var(--pdp-radius); pointer-events: none; }

/* ---------- Focus: the quantity input and the FAQ rows use the one terracotta ring ---------- */
body.template-product .counter input:focus-visible,
body.template-product .counter-wrapper input:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: 2px; border-radius: var(--pdp-radius); box-shadow: none; }
.tfh-pdp-faq__q:focus-visible { outline: 2px solid var(--color-button-primary-background) !important; outline-offset: 3px !important; }

/* ---------- Related cards: stars 12px like the homepage cards ---------- */
body.template-product .card .wt-rating__stars { font-size: 12px; }

/* ---------- Tap targets (44px) without moving the layout ---------- */
body.template-product .wt-product__info .wt-rating { position: relative; }
body.template-product .wt-product__info .wt-rating::after { content: ''; position: absolute; inset: -12px 0; }
body.template-product .card__title a { position: relative; }
body.template-product .card__title a::after { content: ''; position: absolute; inset: -11px 0; }
body.template-product #judgeme_product_reviews .jdgm-paginate__page { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
body.template-product #judgeme_product_reviews .jdgm-sort-dropdown-wrapper,
body.template-product #judgeme_product_reviews .jdgm-sort-dropdown { min-height: 44px; }
@media (max-width: 749px) {
  body.template-product .wt-product__info .hero__button--link,
  body.template-product .tfh-crumbs__back,
}

/* ---------- Judge.me: app variables on the body (so the write-review form, Q&A and tooltips match), hollow stars, contrast ---------- */
html body.template-product {
  --jdgm-star-color: var(--color-star-rating);
  --jdgm-primary-color: var(--color-headings-text);
  --jdgm-secondary-color: var(--pdp-line);
  --jdgm-border-radius: 6px;
  --jdgm-write-review-bg-color: var(--color-button-primary-background);
  --jdgm-write-review-text-color: var(--color-button-primary-text);
}
body.template-product #judgeme_product_reviews .jdgm-star.jdgm--off,
body.template-product #judgeme_product_reviews .jdgm-star.jdgm--off:before,
body.template-product #judgeme_product_reviews .jdgm-histogram__star .jdgm-star { color: var(--color-star-rating) !important; }
body.template-product #judgeme_product_reviews .jdgm-star.jdgm--off { opacity: 0.45; }
body.template-product #judgeme_product_reviews .jdgm-write-rev-link { color: var(--color-button-primary-background-hover); border-color: var(--color-button-primary-background-hover); }

/* the pull-quote that leads the reviews (built in tfh-pdp.js from the top verified five-star review, word for word) */
body.template-product .tfh-pull { margin: 8px 0 40px; padding: 0; max-width: 920px; } /* no rule under the quote: the line above 'Most Recent' already separates it (Ruchi, 2026-10-10) */
body.template-product .tfh-pull__q { margin: 0; }
body.template-product .tfh-pull__q p { margin: 0; font-family: var(--font-headline); font-style: italic; font-weight: 300; font-size: clamp(24px, 19.4px + 1.23vw, 34px); line-height: 1.22; letter-spacing: -0.012em; color: var(--color-headings-text); text-wrap: pretty; }
body.template-product .tfh-pull__q p::before { content: '\201C'; }
body.template-product .tfh-pull__q p::after { content: '\201D'; }
body.template-product .tfh-pull__c { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 18px; font-size: 14px; color: var(--pdp-muted); }
body.template-product .tfh-pull__stars { color: #A0532E; font-size: 14px; letter-spacing: 3px; }
body.template-product .tfh-pull__n { font-weight: 700; color: var(--color-headings-text); }
body.template-product .tfh-pull__v { display: inline-flex; align-items: center; gap: 6px; }
body.template-product .tfh-pull__v::before { content: ''; width: 14px; height: 14px; background: var(--color-links); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the review list: two calm columns on desktop (ten reviews a page, five rows), one on phones */
@media (min-width: 990px) {
  body.template-product #judgeme_product_reviews .jdgm-rev-widg__reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; }
}
body.template-product #judgeme_product_reviews .jdgm-sort-dropdown { border: 0; background-color: transparent; color: var(--color-links); font-weight: 700; padding-left: 0; }

/* ---------- Products with no reviews: one heading (the store-proof wall's), no empty Judge.me block, one outline button ---------- */
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) [id$='__reviews_head'] { display: none; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) [id$='__reviews'] { padding-block: 0 72px; margin: 0; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews :is(.jdgm-rev-widg__summary, .jdgm-histogram, .jdgm-ask-question-btn, .jdgm-row-media, .jdgm-row-actions, .jdgm-rev-widg__body, .jdgm-rev-widg__title) { display: none !important; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews .jdgm-rev-widg__header { padding: 0; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews .jdgm-row-stars { display: flex; justify-content: center; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews .jdgm-widget-actions-wrapper { justify-content: center; width: 100%; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews .jdgm-write-rev-link { font-size: 0; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews .jdgm-write-rev-link::after { content: 'Write the first review'; font: 700 13px/1.2 var(--font-base); letter-spacing: 1.6px; text-transform: uppercase; }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews .jdgm-write-rev-link { white-space: nowrap; width: auto; min-width: 0; padding-inline: 32px; }

/* No layout shift: the customer-photo tiles have their size before the photos load */
body.template-product #judgeme_product_reviews .jdgm-gallery { min-height: 96px; }
body.template-product #judgeme_product_reviews .jdgm-gallery > * { width: 88px; height: 88px; flex: 0 0 88px; }
body.template-product #judgeme_product_reviews .jdgm-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 990px) {
  body.template-product #judgeme_product_reviews .jdgm-gallery { min-height: 80px; }
  body.template-product #judgeme_product_reviews .jdgm-gallery > * { width: 72px; height: 72px; flex-basis: 72px; }
}
body.template-product #judgeme_product_reviews .jdgm-row-media:has(.jdgm-gallery) { min-height: 175px; }
@media (min-width: 990px) { body.template-product #judgeme_product_reviews .jdgm-row-media:has(.jdgm-gallery) { min-height: 163px; } }


/* ==========================================================================
   Batch G (round 15, iteration 3): duplicates removed, one disclaimer slot, one price row, reserved heights
   ========================================================================== */

/* ---------- Sold out: the alternatives are the only product list; no bundle prompt, no upsell card ---------- */
body.template-product:has(#tfh-soldout) .wt-product__upsell,
body.template-product:has(#tfh-soldout) .wt-product__info > .wt-button-section__container { display: none !important; }
.tfh-soldout__list { gap: 0; }
.tfh-soldout__list li + li { border-top: 1px solid var(--pdp-line); }
.tfh-soldout__list a { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 12px 0; }
.tfh-alt__b { display: grid; gap: 2px; min-width: 0; }
.tfh-soldout__list .tfh-alt__t { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 0.4s cubic-bezier(0.25, 1, 0.5, 1); justify-self: start; }
.tfh-soldout__list .tfh-alt__p { font-size: 15px; }
.tfh-alt__v { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--color-button-primary-background); border-radius: var(--pdp-radius); font: 700 12px/1 var(--font-base); letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-button-primary-background); transition: background-color 0.2s ease, color 0.2s ease; }
@media (hover: hover) {
  .tfh-soldout__list a:hover .tfh-alt__t { text-decoration: none; background-size: 100% 1px; }
  .tfh-soldout__list a:hover .tfh-alt__v { background: var(--color-button-primary-background); color: var(--color-button-primary-text); }
}

/* ---------- One disclaimer slot: a muted caption under a hairline, after the "Good for" line ---------- */
body.template-product .tfh-pdp-disclaimer { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--pdp-line); font-size: 14px; line-height: 1.5; color: var(--pdp-muted); max-width: 60ch; }

/* ---------- Sale price: one row (price, struck compare-at, "Save $X" chip) on one baseline ---------- */
body.template-product .wt-product__price .price--on-sale .price__container,
body.template-product .wt-product__price .price--on-sale .price__sale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
body.template-product .wt-product__price .price--on-sale .price__sale__details-wrapper { order: 1; }
body.template-product .wt-product__price .price--on-sale .price__sale > span:has(s) { order: 2; }
body.template-product .wt-product__price .price-item--regular.price-item--lower { font-size: 15px; color: var(--pdp-muted); margin-right: 0; }
body.template-product .tfh-pdp-save { display: inline-flex; align-items: center; align-self: center; min-height: 24px; margin: 0; padding: 0 10px; border-radius: 3px; background: var(--pdp-oat); box-shadow: inset 0 0 0 1px var(--pdp-line); font: 700 12px/1 var(--font-base); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sale-price); order: 3; }
body.template-product .tfh-pdp-save--row { margin-left: 2px; }
body.template-product p.tfh-pdp-save:not(.tfh-pdp-save--row) { margin-top: -6px; justify-self: start; }

/* ---------- Badges: one per tile ---------- */
body.template-product [data-tfh-badge-off] { display: none !important; }

/* ---------- Reviews: the featured review is not listed twice; three reviews and a button on phones ---------- */
body.template-product #judgeme_product_reviews .jdgm-rev[hidden] { display: none !important; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__reviews.tfh-rv-collapsed .jdgm-rev[data-tfh-extra] { display: none; }
.tfh-rv-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 20px 0 0; padding: 0 28px; font: 700 13px/1.2 var(--font-base); letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-button-primary-background-hover); background: transparent; border: 1px solid var(--color-button-primary-background-hover); border-radius: 6px; cursor: pointer; }
@media (hover: hover) { .tfh-rv-more:hover { background: var(--color-button-primary-background); border-color: var(--color-button-primary-background); color: var(--color-button-primary-text); } }

/* ---------- No layout shift: space is held before Judge.me and Wonder's slider fill in ---------- */
body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper { min-height: 114px; }
@media (min-width: 750px) { body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper { min-height: 56px; } }
body.template-product:has([data-tfh-pdp][data-no-reviews='true']) #judgeme_product_reviews .jdgm-widget-actions-wrapper { min-height: 56px; }
body.template-product [id$='__related'] .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; }
@media (max-width: 749px) {
  body.template-product [id$='__related'] { min-height: 445px; }
  body.template-product [id$='__related'] .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 auto; width: calc((100% - 4.8px) / 1.6); margin-right: 8px; }
}
@media (min-width: 990px) {
  body.template-product [id$='__related'] .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 auto; width: calc((100% - 48px) / 4); margin-right: 16px; }
}


/* ==========================================================================
   Gallery (D-109): one large picture with a thumbnail rail (Wonder's carousel-horizontal), in the homepage system
   ========================================================================== */
body.template-product [data-gallery] { border-radius: var(--pdp-radius); overflow: hidden; background: var(--color-background); }
body.template-product [data-gallery] .swiper-slide { border-radius: 0; background: var(--color-background); }
body.template-product [data-thumbs] { margin-top: 8px; }
body.template-product [data-thumbs] .thumbs-list-item { width: 80px; height: 80px; border-radius: var(--pdp-radius); overflow: hidden; background: var(--color-background); box-shadow: 0 0 0 1px var(--pdp-line); cursor: pointer; transition: opacity 0.2s ease; }
body.template-product [data-thumbs] .thumbs-list-item > div, body.template-product [data-thumbs] .thumbs-list-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.template-product [data-thumbs] .thumbs-list-item:not(.swiper-slide-thumb-active) { opacity: 0.82; }
@media (hover: hover) { body.template-product [data-thumbs] .thumbs-list-item:hover { opacity: 1; } }
body.template-product [data-thumbs] .thumbs-list-item.swiper-slide-thumb-active { opacity: 1; box-shadow: 0 0 0 1.5px var(--color-button-primary-background); }
body.template-product [data-thumbs] .thumbs-list-item:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: 3px; }
@media (max-width: 749px) { body.template-product [data-thumbs] .thumbs-list-item { width: 56px !important; height: 56px !important; } html.tfh-pdpm body.template-product [data-thumbs] .tfh-thumb-ind { width: 56px; height: 56px; } }
/* arrows: the homepage circle, quiet until the picture is hovered */
body.template-product [data-gallery] .wt-slider__nav-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; top: 50%; transform: translateY(-50%); border-radius: 50%; background: var(--color-background); border: 1px solid var(--pdp-line); color: var(--color-headings-text); box-shadow: none; opacity: 0; transition: opacity 0.25s ease, background-color 0.2s ease; z-index: 4; }
body.template-product [data-gallery] .wt-slider__nav-prev { left: 12px; }
body.template-product [data-gallery] .wt-slider__nav-next { right: 12px; }
body.template-product [data-gallery] .wt-slider__nav-btn::after { content: none; }
body.template-product [data-gallery]:hover .wt-slider__nav-btn:not(.swiper-button-disabled), body.template-product [data-gallery] .wt-slider__nav-btn:focus-visible { opacity: 1; }
body.template-product [data-gallery] .wt-slider__nav-btn.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none), (max-width: 749px) { body.template-product [data-gallery] .wt-slider__nav-btn { display: none; } }
body.template-product .wt-product__price .price--on-sale .price__container, body.template-product .wt-product__price .price--on-sale .price__sale { flex-direction: row !important; }

/* No layout shift: the main picture's box exists (square, as set) before the slider initialises */
body.template-product [data-gallery]:not(.swiper-initialized) { aspect-ratio: 1 / 1; overflow: hidden; }
@media (min-width: 900px) {
  /* the thumbnail column's width (80px + 16px gap) is held before the slider initialises, so the picture does not slide sideways */
  body.template-product .wt-product__gallery--carousel-vertical.loading [data-gallery] { width: calc(100% - 96px); margin-left: 96px; }
}

/* ---------- Featured review under the buy box (D-111): a real verified review, in the homepage voice ---------- */
body.template-product .tfh-rvc { flex: 0 0 auto; min-height: 268px; margin: 0; }
body.template-product .tfh-rvc[data-state="loading"] { visibility: hidden; }
body.template-product .tfh-rvc__card {
  --tfh-terra: var(--color-star-rating, #B5683F);
  position: relative; display: flex; align-items: flex-start; gap: 18px; margin: 0; padding: 26px 26px 22px; overflow: hidden;
  background: var(--color-background); border: 1px solid var(--pdp-line); border-radius: var(--pdp-radius);
  opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.1, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1);
}
body.template-product .tfh-rvc__card.is-in { opacity: 1; transform: none; }
body.template-product .tfh-rvc__mark {
  position: absolute; left: 18px; top: 58px; font: italic 300 112px/0.5 var(--font-headline); color: var(--tfh-terra); opacity: 0.15; pointer-events: none; user-select: none;
}
body.template-product .tfh-rvc__main { position: relative; flex: 1 1 auto; min-width: 0; }
body.template-product .tfh-rvc__stars { display: flex; gap: 2px; font-size: 14px; line-height: 1; color: var(--tfh-terra); }
body.template-product .tfh-rvc__stars span:not(.is-on) { opacity: 0.28; }
body.template-product .tfh-rvc__q { margin: 12px 0 0; padding: 0; border: 0; }
body.template-product .tfh-rvc__q p { margin: 0; font-family: var(--font-headline); font-style: italic; font-weight: 300; font-size: 20px; line-height: 1.45; letter-spacing: -0.005em; color: var(--color-headings-text); text-wrap: pretty; }
body.template-product .tfh-rvc__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; font-size: 14px; line-height: 1.4; color: var(--pdp-muted); }
body.template-product .tfh-rvc__n { font-family: var(--font-base); font-weight: 700; font-size: 15px; color: var(--color-headings-text); }
body.template-product .tfh-rvc__v { display: inline-flex; align-items: center; gap: 6px; color: var(--pdp-muted); }
body.template-product .tfh-rvc__v svg { width: 15px; height: 15px; color: var(--color-links); flex: 0 0 auto; }
body.template-product .tfh-rvc__d::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 12px 2px 0; border-radius: 50%; background: currentColor; opacity: 0.55; vertical-align: middle; }
body.template-product .tfh-rvc__ph { position: relative; flex: 0 0 56px; width: 56px; height: 56px; padding: 0; margin: 2px 0 0; border: 1px solid var(--pdp-line); border-radius: 8px; overflow: hidden; background: var(--pdp-oat); cursor: zoom-in; }
body.template-product .tfh-rvc__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.template-product .tfh-rvc__ph::after { content: ''; position: absolute; inset: -6px; } /* 68px tap area */
body.template-product .tfh-rvc__ph:focus-visible, body.template-product .tfh-rvc__all:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: 3px; }
body.template-product .tfh-rvc__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--color-links); text-decoration: none; }
body.template-product .tfh-rvc__all span { display: inline-block; transition: transform 0.25s ease; }
@media (hover: hover) { body.template-product .tfh-rvc__all:hover { text-decoration: underline; text-underline-offset: 4px; } body.template-product .tfh-rvc__all:hover span { transform: translateX(4px); } }
body.template-product .tfh-rvc__dlg { padding: 0; border: 0; background: transparent; max-width: min(92vw, 880px); max-height: 92vh; overflow: visible; }
body.template-product .tfh-rvc__dlg::backdrop { background: rgba(38, 49, 40, 0.78); }
body.template-product .tfh-rvc__dlg img { display: block; max-width: 100%; max-height: 88vh; border-radius: 6px; }
body.template-product .tfh-rvc__x { position: absolute; top: -48px; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-background); color: var(--color-headings-text); cursor: pointer; }
body.template-product .tfh-rvc__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 749px) {
  body.template-product .tfh-rvc { min-height: 300px; }
  body.template-product .tfh-rvc__card { gap: 14px; padding: 22px 20px 20px; }
  body.template-product .tfh-rvc__q p { font-size: 19px; }
  body.template-product .tfh-rvc__mark { font-size: 96px; left: 12px; top: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  body.template-product .tfh-rvc__card { opacity: 1; transform: none; transition: none; }
  body.template-product .tfh-rvc__all span { transition: none; }
}

/* ---------- Review pagination: the old page stays, dimmed, with a thin terracotta line; the new page fades in (D-112) ---------- */
body.template-product #judgeme_product_reviews .jdgm-rev-widg__body { display: block !important; height: auto !important; position: relative; transition: opacity 0.25s ease; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__body[data-tfh-h] { height: var(--tfh-pg-h) !important; overflow: clip; }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__paginate-spinner-wrapper { display: none !important; }
body.template-product #judgeme_product_reviews[data-tfh-paging] .jdgm-rev-widg__body { opacity: 0.45; pointer-events: none; }
body.template-product #judgeme_product_reviews[data-tfh-paging] .jdgm-rev-widg__body::before {
  content: ''; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 2px; background: var(--color-button-primary-background);
  transform-origin: 0 50%; animation: tfh-pg-line 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes tfh-pg-line { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tfh-pg-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.template-product #judgeme_product_reviews .jdgm-paginate { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
body.template-product #judgeme_product_reviews .jdgm-paginate__page { border-radius: 6px; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
body.template-product #judgeme_product_reviews .jdgm-paginate__page.jdgm-curt { color: var(--color-button-primary-background); text-decoration-thickness: 2px; }
@media (hover: hover) { body.template-product #judgeme_product_reviews .jdgm-paginate__page:not(.jdgm-curt):hover { color: var(--color-links); background: var(--pdp-oat); } }
body.template-product #judgeme_product_reviews .jdgm-paginate__page:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  body.template-product #judgeme_product_reviews .jdgm-rev-widg__body { transition: none; }
  body.template-product #judgeme_product_reviews[data-tfh-paging] .jdgm-rev-widg__body::before { animation: none; opacity: 0.7; }
}
@media (max-width: 749px) {
  /* phones: while the next page loads in, only its first three rows show, as they will once the "Show more" button is in place */
  body.template-product #judgeme_product_reviews[data-tfh-paging] .jdgm-rev-widg__reviews > .jdgm-rev:nth-of-type(n+4) { display: none; }
}

/* ---------- Trust strip: Abbie on video, rating link (D-112) ---------- */
body.template-product .tfh-pdp-ab__v {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: calc(var(--vfx, 46) * 1%) calc(var(--vfy, 24) * 1%);
  transform-origin: calc(var(--vfx, 46) * 1%) calc(var(--vfy, 24) * 1%);
  transform: translate(calc((50 - var(--vfx, 46)) * 1%), min(calc((50 - var(--vfy, 24)) * 1%), calc(var(--vfy, 24) * (var(--vz, 1.5) - 1) * 1%))) scale(var(--vz, 1.5));
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none; background: transparent;
}
body.template-product .tfh-pdp-ab__v.is-on { opacity: 1; }
body.template-product .tfh-pdp-ab.is-live { animation: tfh-ab-breathe 3.8s ease-in-out infinite; }
@keyframes tfh-ab-breathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--color-background), 0 0 0 4px var(--color-links); }
  50% { box-shadow: 0 0 0 3px var(--color-background), 0 0 0 5px color-mix(in srgb, var(--color-links) 55%, transparent), 0 0 0 9px color-mix(in srgb, var(--color-links) 14%, transparent); }
}
body.template-product .tfh-pdp-facts__a { color: var(--color-links); text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body.template-product .tfh-pdp-facts__a b { font-weight: 700; }
@media (hover: hover) { body.template-product .tfh-pdp-facts__a:hover { text-decoration: underline; } }
body.template-product .tfh-pdp-facts__a:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  body.template-product .tfh-pdp-ab__v { display: none; }
  body.template-product .tfh-pdp-ab.is-live { animation: none; }
}

/* ---------- Customer photos & videos: larger tiles (D-114). Judge.me's own viewer still opens on click. ---------- */
body.template-product #judgeme_product_reviews .jdgm-gallery { width: 100% !important; max-width: none !important; gap: 12px; padding: 4px 0 8px; min-height: 168px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
body.template-product #judgeme_product_reviews .jdgm-gallery > .jdgm-gallery__thumbnail-link { position: relative; width: 156px; height: 156px; flex: 0 0 156px; border-radius: var(--pdp-radius); overflow: hidden; cursor: pointer; }
body.template-product #judgeme_product_reviews .jdgm-gallery__thumbnail-wrapper { width: 100%; height: 100%; }
body.template-product #judgeme_product_reviews .jdgm-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.94; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 0.3s ease; }
@media (hover: hover) { body.template-product #judgeme_product_reviews .jdgm-gallery__thumbnail-link:hover img { transform: scale(1.04); opacity: 1; } }
body.template-product #judgeme_product_reviews .jdgm-gallery__thumbnail-link:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: 2px; }
/* the "See more" tile: an Oat tile with a hairline and a sage label, the size of the photos (only when more photos follow it) */
body.template-product #judgeme_product_reviews .jdgm-gallery.jdgm-gallery .jdgm-gallery__thumbnail-link:nth-child(8):not(:last-child) .jdgm-gallery__thumbnail-wrapper.jdgm-gallery__thumbnail-wrapper::before {
  content: 'See all photos \2192'; position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; text-align: center;
  background: var(--pdp-oat); border: 1px solid var(--pdp-line); border-radius: var(--pdp-radius); color: var(--color-links); font: 700 15px/1.3 var(--font-base); letter-spacing: 0; text-transform: none; text-decoration: none; opacity: 1;
}
body.template-product #judgeme_product_reviews .jdgm-gallery.jdgm-gallery .jdgm-gallery__thumbnail-link:nth-child(8):not(:last-child) img { opacity: 0; }
body.template-product #judgeme_product_reviews .jdgm-gallery__thumbnail-link:nth-child(8):last-child .jdgm-gallery__thumbnail-wrapper::before { content: none !important; }
body.template-product #judgeme_product_reviews .jdgm-row-media:has(.jdgm-gallery) { min-height: 224px; }
@media (max-width: 749px) {
  body.template-product #judgeme_product_reviews .jdgm-gallery { gap: 10px; min-height: 124px; }
  body.template-product #judgeme_product_reviews .jdgm-gallery > .jdgm-gallery__thumbnail-link { width: 112px; height: 112px; flex-basis: 112px; }
  body.template-product #judgeme_product_reviews .jdgm-gallery.jdgm-gallery .jdgm-gallery__thumbnail-link:nth-child(8):not(:last-child) .jdgm-gallery__thumbnail-wrapper.jdgm-gallery__thumbnail-wrapper::before { font-size: 14px; }
  body.template-product #judgeme_product_reviews .jdgm-row-media:has(.jdgm-gallery) { min-height: 188px; }
}
@media (prefers-reduced-motion: reduce) { body.template-product #judgeme_product_reviews .jdgm-gallery img { transition: none; } }

/* ---------- Reviews band (D-116): the summary starts on the 32px grid, actions end on it ---------- */
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary { align-items: flex-start; }
body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper { justify-content: flex-end; gap: 28px; }
body.template-product #judgeme_product_reviews .jdgm-widget-actions-wrapper > * { margin-left: 0; margin-right: 0; }
body.template-product #judgeme_product_reviews .jdgm-ask-question-btn { margin: 0 !important; }
body.template-product [id$="__reviews_head"] .tfh-head-sec__aside { max-width: 60ch; }

/* ---------- Sold-out alternatives (D-116): one link signal per row; only the title draws its underline on hover/focus, the price never does ---------- */
body.template-product .tfh-soldout__list a, body.template-product .tfh-soldout__list a:hover, body.template-product .tfh-soldout__list a:focus-visible { text-decoration: none !important; }
body.template-product .tfh-soldout__list .tfh-alt__p { text-decoration: none !important; background: none; }
body.template-product .tfh-soldout__list a:focus-visible .tfh-alt__t { background-size: 100% 1px; }

/* ---------- Gallery badge: only on the first slide (D-116) ---------- */
body.template-product gallery-section .card__badges--product { transition: opacity 0.2s ease; }
body.template-product gallery-section .card__badges--product.tfh-badge-away { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.template-product gallery-section .card__badges--product { transition: none; } }

/* zero-review line: one line at 375 (D-116) */
body.template-product .tfh-pdp-storerating { white-space: nowrap; font-size: 14px; }
@media (max-width: 380px) { body.template-product .tfh-pdp-storerating { font-size: 13.5px; } }
body.template-product #judgeme_product_reviews .jdgm-rev-widg__summary-text { justify-content: flex-start !important; text-align: left !important; }

/* ---------- Category link at the end of the buy box: an outline button (D-127) ---------- */
body.template-product .tfh-pdp-catlink { margin: 30px 0 0; }
body.template-product .tfh-pdp-catlink a.tfh-btn, body.template-product .tfh-pdp-catlink a.tfh-btn:hover { text-decoration: none !important; font: 700 13px/1.2 var(--font-base); letter-spacing: 1.2px; color: #8A4526; border-color: #8A4526; }
@media (hover: hover) { body.template-product .tfh-pdp-catlink a.tfh-btn:hover { background: #A0532E; border-color: #A0532E; color: #fff; } }

/* ---------- Better together: what the bundle already contains (Batch J) ---------- */
body.template-product .tfh-up-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--pdp-muted); }
body.template-product .tfh-up-note b { color: var(--color-headings-text); font-weight: 700; }
body.template-product .tfh-up-save { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 3px; background: color-mix(in srgb, var(--color-button-primary-background) 12%, transparent); color: #8A4526; font: 700 12px/1.2 var(--font-base); letter-spacing: 0.8px; text-transform: uppercase; }

/* focused elements are never hidden under the sticky bar */
html:has(body.template-product .wt-product__sticky-buy) { scroll-padding-bottom: 96px; }

/* ---------- D-091 on the upsell ADD buttons and the sold-out VIEW buttons (Batch J) ---------- */
/* Wonder's fill-on-hover layer (an Oat ::after that sweeps up) is switched off, so the hover is the palette's own */
body.template-product .wt-product__upsell button.hero__button--secondary::before,
body.template-product .wt-product__upsell button.hero__button--secondary::after { content: none !important; display: none !important; }
body.template-product .wt-product__upsell button.hero__button--secondary { clip-path: none !important; background: transparent; color: #A0532E; border: 1px solid #A0532E; box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
body.template-product .wt-product__upsell button.hero__button--secondary .wt-newsletter__send__text, body.template-product .wt-product__upsell button.hero__button--secondary span { color: inherit; }
@media (hover: hover) {
  body.template-product .wt-product__upsell button.hero__button--secondary:hover { background: #A0532E; border-color: #A0532E; color: #fff; }
}
body.template-product .wt-product__upsell button.hero__button--secondary:active { background: #8A4526; border-color: #8A4526; color: #fff; transform: scale(0.98); }
body.template-product .wt-product__upsell button.hero__button--secondary:focus-visible { outline: 2px solid #A0532E; outline-offset: 3px; }
body.template-product .wt-product__upsell button.hero__button--secondary:is(.loading, [aria-busy='true'], .tfh-up-done) { background: #A0532E; border-color: #A0532E; color: #fff; }
body.template-product .tfh-alt__v { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
body.template-product .tfh-soldout__list a:focus-visible { outline: 2px solid #A0532E; outline-offset: 3px; }
body.template-product .tfh-soldout__list a:focus-visible .tfh-alt__v { background: #A0532E; color: #fff; }
body.template-product .tfh-soldout__list a:active .tfh-alt__v { background: #8A4526; border-color: #8A4526; color: #fff; }
@media (hover: hover) { body.template-product .tfh-soldout__list a:hover .tfh-alt__v { background: #A0532E; border-color: #A0532E; color: #fff; } }
@media (prefers-reduced-motion: reduce) { body.template-product .wt-product__upsell button.hero__button--secondary, body.template-product .tfh-alt__v { transition: none; } body.template-product .wt-product__upsell button.hero__button--secondary:active { transform: none; } }
body.template-product .wt-product__upsell button.hero__button--secondary.tfh-up-busy::before { content: '' !important; display: inline-block !important; width: 12px; height: 12px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tfh-spin 0.7s linear infinite; vertical-align: -2px; }
@keyframes tfh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.template-product .wt-product__upsell button.hero__button--secondary.tfh-up-busy::before { animation: none; border-right-color: currentColor; } }
/* VIEW rests on the Oat panel: deeper terracotta text keeps 4.5:1 (Batch J) */
body.template-product .tfh-soldout__list .tfh-alt__v { color: #8A4526; }
@media (hover: hover) { body.template-product .tfh-soldout__list a:hover .tfh-alt__v { color: #fff; } }
body.template-product .tfh-soldout__list a:focus-visible .tfh-alt__v, body.template-product .tfh-soldout__list a:active .tfh-alt__v { color: #fff; }

/* ---------- Related / recently viewed cards (Batch K): the homepage card, the photo fills the box; a much wider photo is scaled down onto an Oat ground ---------- */
.tfh-card .tfh-well--smart .tfh-img { inset: 0; width: 100%; height: 100%; max-height: none; translate: none; object-fit: cover; object-position: 50% 50%; mix-blend-mode: normal; border-radius: 0; box-shadow: none; }
.tfh-pdp-related .tfh-badge:not(.tfh-badge--preorder), .tfh-pdp-recent .tfh-badge:not(.tfh-badge--preorder) { background: var(--tfh-oat, #EDE4CC); color: var(--s-heading, #263128); box-shadow: inset 0 0 0 1px var(--tfh-hair, #D8CDB1); }

/* ---------- Gallery thumbnails are real buttons: the button covers the thumbnail, the ring is the terracotta focus ring (Batch L) ---------- */
body.template-product [data-thumbs] .thumbs-list-item { position: relative; }
body.template-product .tfh-thumb-btn { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--pdp-radius); background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
body.template-product .tfh-thumb-btn:focus-visible { outline: 2px solid var(--pdp-ring); outline-offset: 3px; }

/* ---------- Tap targets of 44px on phones (Batch L): the hit area grows, the layout does not (negative margins give the space back) ---------- */
@media (max-width: 1179px) {
  body.template-product .wt-product__info .wt-rating[role='link'] { display: flex; align-items: center; min-height: 44px; margin-block: -11px; }
  body.template-product .tfh-pdp-facts__a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  body.template-product .wt-product__info a.hero__button { display: inline-flex; align-items: center; min-height: 44px; margin-block: -4px; }
  body.template-product .wt-product__upsell .card__title a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
  body.template-product .js-counter-quantity { min-width: 44px; }
  body.template-product :is(.wt-product__info, .tfh-pdp-faq__a) p a:not(.hero__button):not(.tfh-link):not(.tfh-btn):not(.tfh-pdp-facts__a) { display: inline-block; padding-block: 13px; margin-block: -13px; }
  body.template-product .wt-product__sticky-buy__product .card__title a { display: block; padding-block: 14px; margin-block: -14px; }
  body.template-product :is(.tfh-pdp-related, .tfh-pdp-recent) .tfh-card__title a { display: block; padding-block: 11px; margin-block: -11px; }
}

/* ---------- Sticky bar on desktop: one row of 64-72px whatever the product photo's shape or the title's length (Batch L) ---------- */
@media (min-width: 900px) {
  body.template-product .wt-product__sticky-buy { padding: 10px 24px; }
  body.template-product .wt-product__sticky-buy__wrapper { align-items: center; gap: 24px; min-height: 0; }
  body.template-product .wt-product__sticky-buy__product { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
  body.template-product .wt-product__sticky-buy__product img { display: block; width: 48px; height: 48px; max-width: none; object-fit: cover; border-radius: var(--pdp-radius); flex: 0 0 auto; }
  body.template-product .wt-product__sticky-buy__product-info { margin: 0; min-width: 0; }
  body.template-product .wt-product__sticky-buy__product-info .card__title { margin: 0; font-size: 17px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.template-product .wt-product__sticky-buy__product-info .card__title a { color: var(--color-headings-text); text-decoration: none; }
  body.template-product .wt-product__sticky-buy__product-info .price { font-size: 15px; line-height: 1.3; }
  body.template-product .wt-product__sticky-buy__product-info .price .visually-hidden { display: none; }
  body.template-product .wt-product__sticky-buy__button { flex: 0 0 auto; width: auto; min-width: 240px; min-height: 48px; }
}
@media (max-width: 749px) { body.template-product .wt-product__info > .wt-button-section__container .hero__button--link { min-height: 44px; margin-block: -4px; } }

/* ---------- Batch M ---------- */
/* trust strip: the link is a flex box on phones (tap target), so the space between the bold number and the words is a gap, never a text space */
body.template-product .tfh-pdp-facts__a { gap: 0.3em; }
/* Better together: row 1 = thumb, title (2 lines at most), prices under it, ADD; row 2 = the "Includes..." note full width with the Save chip inline */
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .wt-product__upsell__content { align-items: center; column-gap: 14px; row-gap: 10px; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 0; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .price { margin-top: 4px; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .price__container { gap: 2px 10px; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .tfh-up-note { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid var(--pdp-line); }
/* Or add one: a little air between the title and its price */
body.template-product .wt-product__upsell .card__title { margin: 0 0 4px; line-height: 1.25; }
@media (max-width: 749px) {
  /* titles clamp to 2 lines; the 44px tap height comes from padding that margins give back */
  body.template-product .wt-product__upsell .card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 0; padding-block: 11px; margin-block: -11px; }
}
/* wide photos on the shelves: a matted print on Oat (12px inset, hairline, 4px radius), centred, multiplied into the Oat like the homepage packshots */
.tfh-card @media (max-width: 749px) { body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .card__title a { padding-block: 0; margin-block: 0; } }
body.template-product .tfh-up-note, body.template-product .tfh-up-note b { font-family: var(--font-base); }

/* ---------- Gallery on phones and tablets (up to 989px; phones added in round 21 so a slide change can never resize the box): one fixed box, so the title and the buy box never move while swiping ---------- */
@media (max-width: 989px) {
  body.template-product [data-gallery] { --tfh-gal-h: min(calc(100vw - 32px), 60vh); }
  @supports (height: 1svh) { body.template-product [data-gallery] { --tfh-gal-h: min(calc(100vw - 32px), 60svh); } }
  body.template-product [data-gallery]:not(.swiper-initialized) { aspect-ratio: auto; height: var(--tfh-gal-h); }
  body.template-product [data-gallery] .swiper-wrapper { height: var(--tfh-gal-h) !important; }
  body.template-product [data-gallery] .swiper-slide { height: var(--tfh-gal-h) !important; }
  body.template-product [data-gallery] .swiper-slide :is(a, picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* tall pictures (infographics) sit inside the box instead of being cropped (assets/tfh-pdp.js marks them) */
  body.template-product [data-gallery] .swiper-slide.tfh-gal-tall img { object-fit: contain; }
}

/* the "Mix any 3+" button keeps a 44px hit area on tablets (Wonder sets its height from 750px) */
@media (min-width: 750px) and (max-width: 1179px) { body.template-product .wt-product__info a.hero__button { min-height: 44px !important; margin-block: -4px; } }
@media (min-width: 750px) and (max-width: 1179px) { body.template-product .wt-product__upsell .card__title a { display: flex !important; align-items: center; min-height: 44px !important; margin-block: -11px; } }

/* the dark bands of the product page (Build my bundle, the final call to action): a cream focus ring, not terracotta on green */
body.template-product .tfh-scheme--evergreen :is(a, button):focus-visible { outline-color: #F9F4E7; }

/* Round 21 (AD #3): the old "Mix any 3+" bundle link (now the PDP bundle card, D-157) was the compact outline button of the system (44px, 13px label, #8A4526 on Buttermilk), left-aligned, 12px under the Add to cart row */
body.template-product .wt-product__info a.hero__button[href*="build-your-own-bundle"] {
  min-height: 44px !important; height: 44px; padding: 0 16px; font-size: 13px; letter-spacing: 1.2px; width: auto;
  background: transparent; color: #8A4526; border-color: #8A4526; margin-block: 4px 8px;
}
@media (hover: hover) {
  body.template-product .wt-product__info a.hero__button[href*="build-your-own-bundle"]:hover { background: #A0532E; border-color: #A0532E; color: #fff; }
}

/* Round 21 (P2): the facts links keep a 44px hit area on desktop too */
@media (min-width: 1180px) {
  body.template-product .tfh-pdp-facts__a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
}

/* Round 21 (P8): the Judge.me histogram rows (the filter by stars) are 24px tall targets, not 14px */
body.template-product #judgeme_product_reviews .jdgm-histogram__row { padding-block: 5px; }
body.template-product #judgeme_product_reviews .jdgm-histogram__frequency { white-space: nowrap; min-width: 4ch; }

/* Round 21 Batch B (P2): the related and recently viewed card titles keep a 44px hit area on desktop too */
@media (min-width: 1180px) {
  body.template-product :is(.tfh-pdp-related, .tfh-pdp-recent) .tfh-card__title a { display: block; padding-block: 11px; margin-block: -11px; }
}

/* ---------- Round 21 (Ruchi): fewer lines in the buy box. Kept: the purchase options box, the bundle card outline, the review card, the accordion rows.
   Everything else is whitespace: 20px between groups, 10-12px inside a group. ---------- */
/* the line above the promise strip goes (the bundle card's outline is its edge: 20px of space); the line under it stays, 16px above and 16px below */
body.template-product .tfh-pdp-trust { border-top: 0; padding-block: 6px 16px; margin-bottom: 2px; }
body.template-product .tfh-pdp-disclaimer { margin-top: -2px; padding-top: 0; border-top: 0; font-size: 13px; }
body.template-product .wt-product__upsell__content + .wt-product__upsell__content { border-top: 0; }

/* ---------- Round 21 Batch C ---------- */
/* P2: quote credits under the review card and the "Or add one" titles keep a 44px hit area on desktop too (the box grows, the margin gives the space back) */
body.template-product .tfh-cite__product { display: inline-block; padding-block: 14px; margin-block: -14px; }
@media (min-width: 1180px) {
  body.template-product .wt-product__upsell .card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-block: 11px; margin-block: -11px; }
}
/* "Better together" and "Or add one": no outline, 20px of space above and below, the rows keep their own spacing */
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] { border: 0; border-radius: 0; padding: 0; margin-bottom: 6px; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade']:has(+ .wt-product__upsell[data-block-id='pairs_with']:not([hidden])) { padding-bottom: 4px; margin-bottom: 0; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade']:not([hidden]) + .wt-product__upsell[data-block-id='pairs_with'] { border: 0; border-radius: 0; padding: 8px 0 0; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] { margin-bottom: 6px; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .tfh-up-note { border-top: 0; padding-top: 4px; }
/* "Better together" as an open list (Ruchi chose option B, 2026-10-10): a line above the block, a line between every row like the accordion rows below,
   one label style, every thumbnail 64px so the titles line up, titles use the full width. Mocks: agent-framework/rounds/round-21/upsell-options/ */
body.template-product .wt-product__upsell[data-block-id] .wt-product__upsell__content { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] :is(.wt-product__upsell__picture, .wt-product__upsell__image, .wt-product__upsell__content > a) { width: 64px; height: 64px; }
body.template-product .wt-product__upsell[data-block-id] :is(.wt-product__upsell__info, .card__title) { width: auto; max-width: none; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade']:not([hidden]) { border-top: 1px solid var(--pdp-line); padding-top: 20px; margin-top: 18px; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade'] .tfh-up-note { padding-top: 2px; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] { margin-top: 18px; padding: 0; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade']:not([hidden]) ~ .wt-product__upsell[data-block-id='pairs_with'] { margin-top: -14px; } /* cancels the info column's 14px flex gap so the two read as one list */
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__headline { margin: 0; padding-top: 16px; border-top: 1px solid var(--pdp-line); font: 700 var(--t-eyebrow)/1.4 var(--font-base); letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase; color: var(--pdp-muted); }
body.template-product .wt-product__upsell[data-block-id] .wt-product__upsell__content + .wt-product__upsell__content { border-top: 1px solid var(--pdp-line); }
/* "Or add one" as two compact oat tiles (Ruchi chose option B, 2026-10-10, D-155): no lines, image left, then name, price and a small Add button.
   Phones stack the image above the text inside each tile. Mocks: agent-framework/rounds/round-21/upsell-options/or-add-one-columns.png */
body.template-product .wt-product__upsell[data-block-id='pairs_with'] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__headline { grid-column: 1 / -1; }
body.template-product .wt-product__upsell[data-block-id='bundle_upgrade']:not([hidden]) ~ .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__headline { border-top: 0; padding-top: 14px; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 8px; align-items: start; padding: 12px; border-radius: var(--pdp-radius); background: var(--pdp-oat); }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content + .wt-product__upsell__content { border-top: 0; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content > a { grid-row: 1 / 3; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] :is(.wt-product__upsell__content > a, .wt-product__upsell__picture, .wt-product__upsell__image) { width: 72px; height: 72px; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .card__title { font-size: 16px; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__button { grid-column: 2; align-self: end; justify-self: start; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .hero__button--secondary { position: relative; min-height: 44px; padding: 0 14px; font-size: 12px; background: #F9F4E7; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content:nth-of-type(n+4) { display: none; } /* two tiles, one row (the headline is the first div) */
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding-block: 0; margin-block: 0; min-height: 0; }
@media (max-width: 749px) {
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] :is(.wt-product__upsell__content > a, .wt-product__upsell__picture, .wt-product__upsell__image) { width: 64px; height: 64px; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__info { flex: 1 1 auto; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .card__title { font-size: 15px; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__button { align-self: flex-start; margin: auto 0 0; }
}
/* price and Add share one row, Add on the right (Ruchi, 2026-10-10): the info box steps aside (display: contents) so the name spans the top
   and the price/Add row sits at the bottom of both tiles */
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: 1fr auto; row-gap: 6px; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__info { display: contents; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content > a { grid-column: 1; grid-row: 1 / 3; align-self: start; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .card__title { grid-column: 2 / 4; grid-row: 1; align-self: start; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content .price { grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__button { grid-column: 3; grid-row: 2; align-self: center; justify-self: end; margin: 0; }
@media (max-width: 749px) {
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 8px; align-items: start; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content > a { grid-column: 1 / -1; grid-row: 1; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .card__title { grid-column: 1 / -1; grid-row: 2; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__content .price { grid-column: 1; grid-row: 3; }
  body.template-product .wt-product__upsell[data-block-id='pairs_with'] .wt-product__upsell__button { grid-column: 2; grid-row: 3; margin: 0; align-self: center; }
}
/* upsell prices on one line: the struck-out compare price, then the sale price (Ruchi, 2026-10-10; Wonder stacks them as a reversed column) */
body.template-product .wt-product__upsell .price__sale { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
/* phones: the selected thumbnail gets its own terracotta outline (no sliding ring), so the mark always sits on the right photo (Round 21 final QA) */
@media (max-width: 749px) {
  html.tfh-pdpm body.template-product [data-thumbs] .tfh-thumb-ind { display: none; }
  body.template-product [data-thumbs] .tfh-thumb-btn[aria-current='true'] { box-shadow: inset 0 0 0 1.5px var(--color-button-primary-background); border-radius: 6px; }
}