/* ==========================================================================
/* T3 — co chu theo bac chieu cao: sm 40/12 · md 44/14 · lg 52/16 · xl 56/16.
 * Nhung nut duoc ghim o file nay cao dung bac nhung co chu thi khong. Phan lon
 * KHONG co luat font-size nao cua theme: chung dang an theo `button{font-size:1rem}`
 * trong stylesheet inline cua Astra — 16px o desktop va 14,592px tu 921px tro xuong
 * (Astra dat html{font-size:91.2%}). Mot class don la (0,1,0), du thang type selector
 * (0,0,1) do, nen khong can !important moi.
 * Icon role va link-button KHONG ghim, dung pham vi da chot. */
   BF365 Product Page — product.css
   Mobile-first. Tested at 360 / 390 / 430 / 768 / 1024 / 1280px.
   Design tokens come from tokens.css (loaded before this file).
   ========================================================================== */

/* ── 1. PDP shell layout (Sprint 4L — 2-column desktop hero) ─────────────
   ONE outer container `.bf-pdp` wraps breadcrumb + hero + below-hero sections.

   Desktop >=1024px — `.bf-pdp__hero` 2-column grid (~58% gallery | ~42% buy):
     gallery | main buy column (no third sidebar)

   Mobile — single column: gallery → main → sections. */

.single-product .product {
  padding-bottom: 0;
}

/* Astra / WooCommerce width resets — scoped to product page only */
.single-product .site-content > .ast-container,
.single-product .ast-woocommerce-container,
.single-product #primary,
.single-product .product {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

/* Astra dynamic CSS (.site .site-content #primary, .ast-woocommerce-container) — high-specificity top reset; .bf-pdp owns page rhythm */
body.single-product.ast-separate-container .site-content #primary .ast-woocommerce-container,
body.single-product .site .site-content > .ast-container,
body.single-product .site .site-content #primary,
body.single-product #content.site-content #primary,
body.single-product .site .site-content #primary .ast-woocommerce-container,
body.single-product #content.site-content #primary .ast-woocommerce-container,
body.single-product .site-main {
  padding-top: 0 !important;
  padding-block-start: 0 !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  /*
   * margin-bottom too. Astra sets #primary { margin: 4em 0 } above 993px
   * (main.min.css, .ast-separate-container), and resetting only the top half
   * left 60px of empty page between the last section and the footer on every
   * product. 60px is not a value from the spacing scale either — it is 4em of
   * the 15px root Astra uses.
   */
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

body.single-product .woocommerce-notices-wrapper:empty {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.single-product .summary.entry-summary {
  display: none !important;
  margin: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Shared outer container — width/gutters from global.css `.bf-pdp` */

.bf-pdp__hero {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-5);
}

.bf-pdp__gallery,
.bf-pdp__main,
.bf-pdp__sidebar {
  min-width: 0;
  width: 100%;
}

.bf-pdp__main > * {
  width: 100%;
  max-width: 100%;
}

.bf-pdp__sections {
  margin-top: var(--bf-space-6);
  display: flex;
  flex-direction: column;
  /*
   * --bf-space-3, not the literal 14px that used to sit here. 14 is not on
   * the spacing scale (4/8/12/16/20/24/32/40/48/64/80), so anyone adjusting
   * this rhythm with a token would have shifted it without meaning to. 12px
   * also matches the gap .bf-pdp__row already uses, so the vertical and
   * horizontal rhythm of this area are now one value.
   */
  gap: var(--bf-space-3);
}

/* Section row grids (3-col + 2-col per mockup) */
.bf-pdp__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-3);
  min-width: 0;
  align-items: stretch;
}

.bf-pdp__row > * {
  min-width: 0;
  height: 100%;
}

@media (min-width: 1024px) {
  .bf-pdp__sections {
    margin-top: var(--bf-space-6);
    gap: var(--bf-space-3);
  }

  /*
   * auto-fit, not a fixed 3. Two of the three children return early when
   * their data is missing (editorial review and quick comparison, both zero
   * rows in postmeta), so a hard repeat(3) left 893px of empty track beside
   * the info card on 256 of 256 products. auto-fit collapses the empty
   * tracks and hands the width to whoever actually rendered, and gives the
   * three columns straight back the day the data arrives.
   *
   * Leave .bf-pdp__row--2 alone: a more specific rule further down this file
   * already gives it a single 1fr track, so it never had the same hole.
   */
  .bf-pdp__row--3 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
  }

  .bf-pdp__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero goes 2-column only from 1100px up, so 1024–1099 stays single column
 * instead of cramping the buy panel right before the switch. Columns are fluid
 * (fr), so the two columns shrink/grow smoothly with the viewport above 1100px. */
@media (min-width: 1100px) {
  .bf-pdp__hero {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    column-gap: 28px;
    row-gap: 0;
    align-items: start;
  }
}

/* Breadcrumb above hero */
.bf-breadcrumb {
  margin: 0 0 14px;
  font-size: var(--bf-text-xs);
  color: var(--bf-text-secondary);
}

.bf-breadcrumb a {
  color: var(--bf-text-secondary);
  text-decoration: none;
}

.bf-breadcrumb a:hover {
  color: var(--bf-color-red);
}

/* `margin` da chuyen ve components.css — day la class dung chung cua ca ho,
   khong phai cua rieng trang san pham. Chi giu mau o lai. */
.bf-breadcrumb__sep {
  color: var(--bf-text-light);
}

/* Sidebar: stacked cards */
.bf-pdp__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
}

.bf-pdp__sidebar .bf-specs,
.bf-pdp__sidebar .bf-quick-compare,
.bf-pdp__sidebar .bf-size-guide,
.bf-pdp__sidebar .bf-policy {
  margin-top: 0;
  padding: var(--bf-space-4);
}

.bf-pdp__sidebar .bf-section-heading {
  font-size: var(--bf-text-xs);
  margin-bottom: var(--bf-space-3);
  padding-bottom: var(--bf-space-2);
}

.bf-pdp__sidebar .bf-specs__label {
  width: 45%;
  font-size: var(--bf-text-xs);
  white-space: normal;
}

.bf-pdp__sidebar .bf-specs__value {
  font-size: var(--bf-text-xs);
}

.bf-pdp__sidebar .bf-policy__list {
  gap: var(--bf-space-2);
}

.bf-pdp__sidebar .bf-policy__item-text strong {
  font-size: var(--bf-text-xs);
}

.bf-pdp__sidebar .bf-policy__item-text span {
  font-size: var(--bf-text-2xs);
}

/* Legacy alias — old hero class no longer output; keep rules harmless */
.bf-product-hero { display: contents; }

/* ── 2. Gallery ─────────────────────────────────────────────────────────── */

.bf-product-gallery {
  overflow: hidden;
}

/* Desktop: thumbs left column, main image right */
@media (min-width: 768px) {
  .bf-product-gallery {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--bf-space-3);
    align-items: start;
  }
}

/* Thumbnail strip — mobile: horizontal scroll below main image; desktop: vertical left */
.bf-product-gallery__thumbs {
  display: flex;
  flex-direction: row;
  gap: var(--bf-space-2);
  order: 1;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bf-product-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .bf-product-gallery {
    display: flex;
    flex-direction: column;
  }
  .bf-product-gallery__main {
    order: 0;
  }
  .bf-product-gallery__thumb {
    flex: 0 0 auto;
  }
}

@media (min-width: 768px) {
  .bf-product-gallery__thumbs {
    flex-direction: column;
    order: 0;
    margin-top: 0;
    overflow-x: visible;
  }
}

.bf-product-gallery__thumb {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid var(--bf-border-default);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-surface-media);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bf-product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bf-product-gallery__thumb.is-active,
.bf-product-gallery__thumb:focus-visible {
  border-color: var(--bf-color-red);
  box-shadow: 0 0 0 1px var(--bf-color-red);
  outline: none;
}

.bf-product-gallery__thumb:hover:not(.is-active) {
  border-color: var(--bf-border-strong-dark-ready);
  background: var(--bf-surface-media);
}

.bf-product-gallery__thumb:focus:not(:hover):not(.is-active) {
  background: var(--bf-surface-media);
  border-color: var(--bf-border-default);
}

.bf-product-gallery__thumb:active:not(.is-active) {
  background: var(--bf-surface-media);
  border-color: var(--bf-color-red);
}

.bf-product-gallery__thumb.is-active:hover,
.bf-product-gallery__thumb.is-active:focus,
.bf-product-gallery__thumb.is-active:active {
  background: var(--bf-surface-media);
  border-color: var(--bf-color-red);
}

/* Main image — border + radius aligned with v0 */
.bf-product-gallery__main {
  position: relative;
  background: var(--bf-surface-media);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Allow vertical page scroll + pinch; detect horizontal swipe in JS. */
  touch-action: pan-y pinch-zoom;
}

.bf-product-gallery__img {
  width: 100%;
  /*
   * height:auto, NOT 100%.
   *
   * With height:100% the <img> keeps the height the square frame gave
   * it and stops re-resolving when the frame gets shorter, so the
   * overflow:hidden on .bf-product-gallery__main silently crops the
   * bottom. Measured at 390px with the frame at 4/3: 80.5px of the
   * photo cut off, 76% left visible, and no error anywhere.
   */
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
  padding: var(--bf-space-2);
}

.bf-product-gallery__img.is-loading {
  opacity: 0.4;
}

/* Fallback / placeholder */
.bf-product-gallery__main--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bf-product-gallery__main--placeholder img {
  width: 60%;
  opacity: 0.4;
}

/* Sale badge overlay on gallery */
.bf-gallery-sale-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--bf-color-red);
  color: #fff;
  font-size: var(--bf-text-xs);
  line-height: 16px;
  font-weight: var(--bf-weight-black);
  letter-spacing: 0.02em;
  padding: var(--bf-space-1) 10px;
  border-radius: var(--bf-radius-sm);
  pointer-events: none;
}

/* ── Gallery: hover zoom (desktop only, pointer: fine devices) ───────────
   JS sets transform + transform-origin via inline style on mousemove.
   CSS `transition: transform` makes scale animate (smooth 0→1.85 on enter,
   1.85→0 on leave). transform-origin changes are intentionally instant
   (no transition on that property) so the zoom lens tracks the cursor.
   overflow: hidden on the wrapper prevents zoomed image from spilling out.
   cursor: zoom-in provides affordance without JS. */

@media (hover: hover) and (pointer: fine) {
  .bf-product-gallery__main {
    cursor: zoom-in;
  }

  .bf-product-gallery__img {
    transition: transform 0.15s ease;
    will-change: transform;
  }
}

/* Swipe hint (mobile) */
.bf-product-gallery__swipe-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bf-overlay);
  color: #fff;
  font-size: var(--bf-text-xs);
  line-height: 16px;
  padding: var(--bf-space-1) 10px;
  border-radius: var(--bf-radius-pill);
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.4s;
}

.bf-product-gallery__swipe-hint.is-hidden {
  display: none;
}

@media (min-width: 768px) {
  .bf-product-gallery__swipe-hint {
    display: none;
  }
}

/* ── 3. Product Summary ─────────────────────────────────────────────────── */

.bf-product-summary {
  padding: 0;
}

.bf-product-summary__brand {
  margin: 0 0 var(--bf-space-1);
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bf-text-secondary);
}

.bf-product-summary__title {
  margin: 0 0 10px;
  font-size: clamp(20px, 4.5vw, 32px);
  font-weight: var(--bf-weight-black);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bf-text-primary);
}

/* Rating + sold meta row */
.bf-product-summary__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-2) var(--bf-space-3);
  margin-bottom: var(--bf-space-3);
}

.bf-product-summary__meta-row .bf-product-summary__rating {
  margin-bottom: 0;
}

.bf-product-summary__sold {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  font-weight: var(--bf-weight-semibold);
}

.bf-product-summary__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bf-rating-stars .star-rating {
  font-size: var(--bf-text-sm);
  color: var(--bf-color-yellow);
}

.bf-product-summary__review-count {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
}

/* Price wrap — WC outputs <del> then <ins>; we reorder visually with flexbox
   so sale price (ins) appears first (left), strikethrough (del) after it on the
   same line — matching the BF365 mockup row layout.
   !important on display because Astra dynamic CSS may emit display:inline-flex. */
/* ── Purchase panel — mockup alignment ───────────────────────────────────── */

.single-product .bf-pdp .bf-purchase-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2px;
}

.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: var(--bf-space-2);
}

.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale,
.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale .woocommerce-Price-amount,
.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale .amount,
.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale bdi {
  font-size: clamp(28px, 7vw, 34px) !important;
  font-weight: var(--bf-weight-black) !important;
  color: var(--bf365-red) !important;
  line-height: 1.05 !important;
  text-decoration: none !important;
  letter-spacing: -0.02em;
}

.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular {
  align-self: baseline;
}

.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular del {
  text-decoration: line-through !important;
  opacity: 1 !important;
}

.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular .woocommerce-Price-amount,
.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular .amount,
.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular bdi {
  font-size: var(--bf-text-sm) !important;
  font-weight: var(--bf-weight-medium) !important;
  color: var(--bf365-muted) !important;
  text-decoration: line-through !important;
  line-height: 1.2;
}

.single-product .bf-pdp .bf-purchase-panel__savings {
  display: inline-block;
  margin-top: var(--bf-space-1);
  padding: 2px var(--bf-space-2);
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.3;
  color: var(--bf-color-red);
  background: var(--bf-color-red-soft);
  border-radius: var(--bf-radius-pill);
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector {
  margin-bottom: 0;
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-option {
  min-width: 56px;
  min-height: 50px;
  height: auto;
  padding: var(--bf-space-2) 10px 6px;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-surface-input);
  color: var(--bf-text-primary);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-black);
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-option:hover:not(.is-disabled):not(.is-selected) {
  border-color: rgba(230, 0, 18, 0.35);
  background: var(--bf-surface-input);
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-selected,
.single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-low-stock.is-selected {
  border-color: var(--bf-color-red);
  background: var(--bf-color-red-soft);
  color: var(--bf-color-red);
  box-shadow: none;
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-low-stock:not(.is-selected) {
  border-color: var(--bf-border-default);
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-low-stock .bf-size-option__badge {
  color: var(--bf-color-red);
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-black);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-disabled {
  opacity: 1;
  color: var(--bf-disabled-text);
  background: var(--bf-disabled-bg);
  border-color: var(--bf-border-default);
}

.single-product .bf-pdp .bf-purchase-panel__size .bf-size-urgency {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.45;
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-purchase-panel__cart form.cart {
  margin: 0;
  width: 100%;
}

/* WC wrapper chỉ chứa __actions — không flex đôi */
.single-product .bf-pdp .bf-purchase-panel__cart .woocommerce-variation-add-to-cart,
.single-product .bf-pdp .bf-purchase-panel__cart .variations_button {
  display: block !important;
  width: 100%;
}

.single-product .bf-pdp .bf-purchase-panel__cart .woocommerce-variation-add-to-cart-enabled {
  display: block !important;
  width: 100%;
}

/* [ THÊM VÀO GIỎ ] [ MUA NGAY ] [♡] */
.single-product .bf-pdp .bf-purchase-panel__actions {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--bf-space-2);
  width: 100%;
}

/* Shared button shell — cùng height/radius/font */ .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button {
  box-sizing: border-box;
  min-height: 56px;
  height: 56px;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: var(--bf-radius-sm) !important;
  font-family: inherit;
  font-size: var(--bf-text-base) !important;
  font-weight: var(--bf-weight-black) !important;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  background-image: none !important;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button:focus,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button:focus,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn:focus {
  outline: none;
}

.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button:focus-visible,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button:focus-visible,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn:focus-visible {
  outline: 2px solid var(--bf365-red, #e60012);
  outline-offset: 2px;
}

.single-product .bf-pdp .bf-purchase-panel .bf-pdp-btn__label {
  display: block;
  line-height: 1.15;
}

.single-product .bf-pdp .bf-purchase-panel .bf-pdp-btn__sub,
.single-product .bf-pdp .bf-purchase-panel .single_add_to_cart_button::after {
  display: block;
  margin-top: 2px;
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-medium);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  opacity: 0.9;
}

/* THÊM VÀO GIỎ — trắng + viền đỏ, chặn Astra xanh */
.single-product.woocommerce .bf-pdp .bf-purchase-panel .cart .single_add_to_cart_button.button.alt,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .cart button.single_add_to_cart_button,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .variations_button .single_add_to_cart_button {
  background: var(--bf-surface-elevated);
  background-color: var(--bf-surface-elevated);
  border: 1.5px solid var(--bf-color-red);
  color: var(--bf365-red);
}

.single-product .bf-pdp .bf-purchase-panel .single_add_to_cart_button::after {
  content: "Giao nhanh 1-4 ngày";
  color: var(--bf-color-red);
}

.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button:hover:not(.disabled):not(:disabled) {
  background: var(--bf-color-red-soft) !important;
  background-color: var(--bf-color-red-soft) !important;
  border-color: var(--bf-color-red-dark) !important;
  color: var(--bf-color-red-dark) !important;
}

/* MUA NGAY — BF365 primary (black → red hover) */ .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf365-buy-now-btn {
  background: var(--bf365-black);
  background-color: var(--bf365-black);
  border: 1.5px solid var(--bf365-black);
  color: var(--bf365-white);
}

.single-product .bf-pdp .bf-purchase-panel .bf-buy-now-button .bf-pdp-btn__sub {
  color: var(--bf-on-primary);
  opacity: 0.95;
}

.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button:hover:not(.disabled):not(:disabled) {
  background: var(--bf365-red) !important;
  background-color: var(--bf365-red) !important;
  border-color: var(--bf365-red) !important;
}

/* Disabled — giữ kích thước */
.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button.disabled,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button:disabled,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button.disabled,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed;
  min-height: 56px;
  height: 56px;
}

/* Wishlist — vuông 56px, icon đen/xám */
.single-product .bf-pdp .bf-purchase-panel .bf-pdp-btn--icon,
.single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn {
  flex: 0 0 56px;
  width: 56px;
  min-width: 56px;
  min-height: 56px;
  height: 56px;
  padding: 0 !important;
  background: var(--bf-surface-elevated);
  background-color: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  color: var(--bf-text-primary);
  opacity: 1;
  cursor: pointer;
}

.single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn svg {
  stroke: var(--bf-text-primary);
  fill: none;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn.is-active {
  color: var(--bf365-red) !important;
  border-color: var(--bf-color-red) !important;
  background: var(--bf-color-red-soft) !important;
  background-color: var(--bf-color-red-soft) !important;
}

.single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn.is-active svg {
  stroke: var(--bf-color-red);
  fill: var(--bf-color-red);
}

.single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 430px) {
  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__row {
    flex-wrap: wrap;
  }

  .single-product .bf-pdp .bf-purchase-panel__actions {
    flex-wrap: wrap;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button {
    flex: 1 1 calc(50% - 4px);
    min-height: 52px;
    height: 52px;
  }

  .single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    min-height: 52px;
    height: 52px;
  }
}

/* Legacy price selectors — sticky fallback only */
.single-product .bf-pdp .bf-price-block {
  margin-bottom: var(--bf-space-1);
}

.bf-price-sale-badge {
  display: inline-block;
  margin-top: var(--bf-space-2);
  background: var(--bf-color-red-soft);
  color: var(--bf-color-red);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  padding: 3px 10px;
  border-radius: var(--bf-radius-pill);
  line-height: 1.5;
}

/* ── 4. Size Selector ───────────────────────────────────────────────────── */

.bf-size-selector {
  margin-bottom: var(--bf-space-5);
}

.bf-size-selector__head,
.bf-size-selector__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-2);
  margin-bottom: var(--bf-space-3);
}

.bf-size-selector__label,
.bf-size-selector__title {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bf-text-primary);
}

.bf-wishlist-button:hover {
  background: var(--bf-surface-elevated);
  border-color: var(--bf-color-red, #e60012);
  color: var(--bf-color-red, #e60012);
}

.bf-wishlist-button:focus:not(:hover) {
  background: var(--bf-surface-elevated);
  border-color: var(--bf-border-default);
  color: var(--bf-text-primary);
}

.bf-wishlist-button:focus-visible {
  outline: 2px solid var(--bf-color-red, #e60012);
  outline-offset: 2px;
}

.bf-wishlist-button:active {
  background: var(--bf-surface-muted);
  border-color: var(--bf-color-red, #e60012);
}

.bf-wishlist-button:disabled,
.bf-wishlist-button[disabled] {
  background: var(--bf-disabled-bg);
  border-color: var(--bf-disabled-bg);
  color: var(--bf-disabled-text);
  cursor: not-allowed;
}

.bf-size-selector__guide-link:hover {
  background: none;
  color: var(--bf-color-red-dark, #c9000f);
}

.bf-size-selector__guide-link:focus:not(:hover) {
  background: none;
  color: var(--bf-color-red);
}

.bf-size-selector__guide-link:active {
  background: none;
  color: var(--bf-color-red-dark, #c9000f);
}

.bf-size-selector__guide-link {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--bf-text-xs);
  color: var(--bf-color-red);
  font-weight: var(--bf-weight-bold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bf-size-selector__label-mobile {
  display: none;
}

.bf-size-selector__guide-cta {
  display: none;
  /* Neutralize Astra `button { background: var(--ast-global-color-0) }` while hidden
     and before the mobile flex layout rule applies. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  box-shadow: none;
}

.bf-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
}

.bf-size-option {
  position: relative;
  min-width: 52px;
  height: 46px;
  padding: 0 var(--bf-space-3);
  border: 1.5px solid var(--bf-border-default);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-surface-input);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  color: var(--bf-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.bf-size-option:hover:not(.is-disabled) {
  border-color: var(--bf-border-strong-dark-ready);
  background: var(--bf-surface-muted);
}

.bf-size-option:focus {
  outline: none;
}

.bf-size-option.is-selected {
  border-color: var(--bf-color-red);
  color: var(--bf-color-red);
  background: var(--bf-color-red-soft);
  box-shadow: inset 0 0 0 1px var(--bf-color-red);
}

.bf-size-option.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: var(--bf-surface-muted);
  /* Diagonal strike-through via gradient — purely visual */
  background-image: linear-gradient(
    135deg,
    transparent calc(50% - 0.5px),
    var(--bf-border-strong-dark-ready) calc(50% - 0.5px),
    var(--bf-border-strong-dark-ready) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

.bf-size-option.is-low-stock {
  border-color: var(--bf-color-orange);
  color: var(--bf-color-orange);
}

/* Size option badge (Gần hết / Hết) */
.bf-size-option__badge {
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bf-color-orange);
  line-height: 1;
  /* "GẦN HẾT" fits one line at 9px but not at 11px, and wrapping it makes the
   * size chip taller than the chips beside it. The chip has room for the wider
   * single line; it has no room for a second one. */
  white-space: nowrap;
}

.bf-size-option__badge--out {
  color: var(--bf-text-light);
}

/* Notice line (e.g. "Vui lòng chọn size") — shown by JS */
.bf-size-selector__notice {
  margin: var(--bf-space-2) 0 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-red);
  font-weight: var(--bf-weight-bold);
}

/* Highlight pulse when scrolled-to from sticky btn */
@keyframes bf-highlight-pulse {
  0%, 100% { outline-color: transparent; }
  40% { outline-color: var(--bf-color-red); }
}

.bf-size-selector.bf-highlight {
  animation: bf-highlight-pulse 1.2s ease;
  outline: 2px solid var(--bf-color-red);
  outline-offset: 4px;
  border-radius: var(--bf-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .bf-product-gallery__img {
    transition: none;
  }

  .bf-size-selector.bf-highlight {
    animation: none;
  }
}

/* ── 4b. Size Guide Modal (Sprint 4N-SG) ─────────────────────────────────── */

.single-product .bf-size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bf-space-4);
}

.single-product .bf-size-guide-modal[hidden] {
  display: none !important;
}

.single-product .bf-size-guide-modal.is-open {
  display: flex;
}

.single-product .bf-size-guide-modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--bf-overlay);
  cursor: pointer;
}

.single-product .bf-size-guide-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 780px);
  max-height: min(90vh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: 20px;
  box-shadow: 0 24px 64px var(--bf-shadow-color);
  overflow: hidden;
}

.single-product .bf-size-guide-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding: 18px var(--bf-space-5) var(--bf-space-3);
  border-bottom: 1px solid var(--bf-border-default);
}

.single-product .bf-size-guide-modal__title {
  margin: 0;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-text-primary);
}

.single-product .bf-size-guide-modal__close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bf-border-default);
  border-radius: 10px;
  background: var(--bf-surface-input);
  color: var(--bf-text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.single-product .bf-size-guide-modal__close:hover {
  border-color: var(--bf-border-strong-dark-ready);
  background: var(--bf-surface-muted);
}

.single-product .bf-size-guide-modal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  padding: var(--bf-space-3) var(--bf-space-5) 0;
}

.single-product .bf-size-guide-modal__tab {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 10px var(--bf-space-3);
  border: 1.5px solid var(--bf-border-default);
  border-radius: 10px;
  background: var(--bf-surface-input);
  color: var(--bf-text-primary);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.single-product .bf-size-guide-modal__tab.is-active,
.single-product .bf-size-guide-modal__tab[aria-selected="true"] {
  border-color: var(--bf-color-red);
  color: var(--bf-color-red);
  background: var(--bf-surface-input);
}

.single-product .bf-size-guide-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--bf-space-4) var(--bf-space-5) var(--bf-space-5);
  -webkit-overflow-scrolling: touch;
}

.single-product .bf-size-guide-modal__panel[hidden] {
  display: none !important;
}

.single-product .bf-size-guide-modal__table-title {
  margin: 0 0 var(--bf-space-3);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-black);
  color: var(--bf-text-primary);
}

.single-product .bf-size-guide-modal__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--bf-space-3);
}

.single-product .bf-size-guide-modal__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--bf-text-xs);
  line-height: 1.45;
}

.single-product .bf-size-guide-modal__table th,
.single-product .bf-size-guide-modal__table td {
  border: 1px solid var(--bf-border-default);
  padding: 10px var(--bf-space-2);
  text-align: center;
  vertical-align: middle;
}

.single-product .bf-size-guide-modal__table th {
  font-weight: var(--bf-weight-black);
  background: var(--bf-surface-muted);
  color: var(--bf-text-primary);
}

.single-product .bf-size-guide-modal__table tbody tr td:first-child {
  font-weight: var(--bf-weight-black);
  text-align: left;
  background: var(--bf-surface-muted);
}

.single-product .bf-size-guide-modal__table-note {
  margin: 0 0 var(--bf-space-3);
  font-size: var(--bf-text-xs);
  color: var(--bf-text-secondary);
  line-height: 1.5;
}

.single-product .bf-size-guide-modal__measure-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding: 14px var(--bf-space-4);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-muted);
}

.single-product .bf-size-guide-modal__measure-cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-1);
  font-size: var(--bf-text-sm);
  color: var(--bf-text-primary);
}

.single-product .bf-size-guide-modal__inline-link,
.single-product .bf-size-guide-modal__video-cta {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--bf-color-red);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single-product .bf-size-guide-modal__measure-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bf-space-4);
  align-items: start;
  margin-bottom: var(--bf-space-4);
}

.single-product .bf-size-guide-modal__steps {
  margin: 0;
  padding-left: 18px;
  font-size: var(--bf-text-sm);
  line-height: 1.6;
  color: var(--bf-text-primary);
}

.single-product .bf-size-guide-modal__steps li {
  margin-bottom: 10px;
}

.single-product .bf-size-guide-modal__steps li:last-child {
  margin-bottom: 0;
}

.single-product .bf-size-guide-modal__illustration {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.single-product .bf-size-guide-modal__illustration-svg {
  width: 100%;
  height: auto;
  border: 1px solid var(--bf-border-default);
  border-radius: 10px;
  background: var(--bf-surface-muted);
}

.single-product .bf-size-guide-modal__video-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  width: 100%;
  justify-content: center;
  padding: var(--bf-space-3) var(--bf-space-4);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-input);
  text-decoration: none;
}

.single-product .bf-size-guide-modal__video-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bf-surface-muted);
  font-size: var(--bf-text-2xs);
}

.single-product .bf-size-guide-modal__video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--bf-radius-md);
  overflow: hidden;
}

.single-product .bf-size-guide-modal__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.single-product .bf-size-guide-modal__video-link a {
  color: var(--bf-color-red);
  font-weight: var(--bf-weight-bold);
}

.single-product .bf-size-guide-modal__empty {
  margin: 0;
  padding: 28px var(--bf-space-4);
  text-align: center;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  border: 1px dashed var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-muted);
}

body.bf-size-guide-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .single-product .bf-size-guide-modal {
    padding: 0;
    align-items: flex-end;
  }

  .single-product .bf-size-guide-modal__dialog {
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
  }

  .single-product .bf-size-guide-modal__tabs {
    flex-direction: column;
  }

  .single-product .bf-size-guide-modal__tab {
    flex: 1 1 auto;
    width: 100%;
  }

  .single-product .bf-size-guide-modal__measure-layout {
    grid-template-columns: 1fr;
  }
}

/* ── 5. WooCommerce form integration ────────────────────────────────────── */
/*
 * RULE: The .variations <table> is visually hidden so our BF365 size buttons
 * show instead, but the <select> elements inside MUST remain in the DOM and
 * receive programmatic value changes + events. display:none achieves this —
 * hidden elements are still readable/writable by JS.
 *
 * Do NOT add pointer-events:none or visibility:hidden to the form,
 * .single_variation_wrap, or .single_add_to_cart_button — WooCommerce
 * manages button enabled/disabled state itself after variation is found.
 */

.single-product .variations_form .variations {
  display: none !important;
}

/* Hide "Clear" link that WC renders below the variations table */
.single-product .reset_variations {
  display: none !important;
}

/* Ensure WC form and variation wrapper fill the full right column width.
   WC default CSS does not guarantee width: 100% on these elements. */
.single-product .single_variation_wrap {
  width: 100%;
}

.single-product .product form.cart {
  width: 100%;
}

/* Purchase button styles → .bf-purchase-panel foundation (Sprint 4N-Fix) */

/* Policy mini row in buy column */
.bf-policy-mini {
  margin-top: var(--bf-space-4);
  padding-top: 14px;
  border-top: 1px solid var(--bf-border-default);
}

.bf-policy-mini__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--bf-space-3);
}

@media (min-width: 768px) {
  .bf-policy-mini__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bf-policy-mini__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bf-space-1);
  text-align: center;
  min-width: 0;
}

.bf-policy-mini__icon {
  color: var(--bf-color-red);
  display: flex;
}

.bf-policy-mini__label {
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-bold);
  line-height: 1.25;
  color: var(--bf-text-secondary);
}

/* ── Size urgency note ──────────────────────────────────────────────────── */
.bf-size-urgency {
  margin-top: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-semibold);
  color: var(--bf-color-red);
  line-height: 1.4;
}

/* Quantity input — hidden; Astra may force display:inline-flex via dynamic CSS,
   so !important ensures our rule wins regardless of load order. */
.single-product .quantity {
  display: none !important;
}

/* WC variation price update — shown dynamically when a variation is selected */
.single-product .woocommerce-variation-price {
  font-size: var(--bf-text-sm);
  margin-top: var(--bf-space-2);
  color: var(--bf-text-secondary);
}

/* "Availability: X in stock" — stock state is conveyed via size button labels;
   the raw WC text line is redundant and not in the BF365 mockup layout. */
.single-product .woocommerce-variation-availability {
  display: none;
}

/* ── 6. Sticky ATC ──────────────────────────────────────────────────────── */

.bf-sticky-atc {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bf-surface-elevated);
  border-top: 1px solid var(--bf-border-default);
  box-shadow: 0 -4px 20px var(--bf-shadow-color);

  /* Hidden by default; JS adds .is-visible */
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px var(--bf-gutter-mobile);
  /*
   * Keeps the buy button clear of the iPhone home indicator. Every other
   * bottom-anchored panel in the theme already does this - the drawer, the
   * filter drawer, the mobile search - and this bar was the one that did not,
   * on the page 80.3% of visitors are on.
   */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  min-height: var(--bf-bottom-nav-height);
}

/* Show on mobile/tablet and desktop when scrolled past hero */
.bf-sticky-atc.is-visible {
  display: flex;
}

/*
 * Room for the bar to sit over.
 *
 * The bar is position: fixed, so it takes no space in the flow and simply
 * covered whatever ended the page - measured 37px of the footer underneath it,
 * with the payment badges at y=816 and the bar's top edge at y=779.
 *
 * Two things had to be right and the first attempt got neither:
 *
 *   WHERE. Padding .site-content does nothing for this, because the footer
 *   sits outside it - the bar covers the footer, not the article. Padding a
 *   block in the middle of the document only pushes the footer further down
 *   into the bar.
 *
 *   HOW HARD. ".single-product .site-content" is (0,2,0) and lost outright to
 *   global.css's "body.single-product #content.site-content" at (1,2,1), which
 *   sets the padding to 0. The rule was in the file, read correctly in the
 *   source, and computed to 0px. Matching the footer avoids that fight.
 *
 * Reserved from the same token the bar is sized with, plus the inset, so the
 * two cannot drift apart. .single-product only - nothing else renders this bar.
 */
.single-product .bf-site-footer {
  padding-bottom: calc(var(--bf-bottom-nav-height) + 20px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1025px) {
  /*
   * Desktop keeps the reservation: unlike the cart bar, this one stays visible
   * above 1025px, it just re-centres itself.
   */
  .single-product .bf-site-footer {
    padding-bottom: calc(var(--bf-bottom-nav-height) + 24px);
  }
}

@media (min-width: 1025px) {
  .bf-sticky-atc.is-visible {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100% - calc(var(--bf365-container-gutter-desktop) * 2), var(--bf365-container-max));
    border-left: 1px solid var(--bf-border-default);
    border-right: 1px solid var(--bf-border-default);
    border-radius: var(--bf-radius-lg) var(--bf-radius-lg) 0 0;
    padding: 12px var(--bf-gutter-desktop);
  }

}

.bf-sticky-atc__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--bf-radius-sm);
  overflow: hidden;
  background: var(--bf-surface-media);
  border: 1px solid var(--bf-border-default);
}

.bf-sticky-atc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bf-sticky-atc__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.bf-sticky-atc__name {
  margin: 0 0 1px;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bf-text-primary);
}

.bf-sticky-atc__price {
  margin: 0;
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-black);
  color: var(--bf-color-red);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.bf-sticky-atc__price .amount {
  font-size: var(--bf-text-base);
}

/* Remove WC del/ins decoration inside sticky price */
.bf-sticky-atc__price del {
  display: none;
}

.bf-sticky-atc__price ins {
  text-decoration: none;
}

.bf-sticky-atc__action {
  flex-shrink: 0;
}

.bf-sticky-atc__btn {
  white-space: nowrap;
  min-height: 44px;
  padding: 0 18px;
  font-size: var(--bf-text-sm);
  border-radius: var(--bf-radius-md);
}

/* ── 7. Trust Group wrapper ─────────────────────────────────────────────── */
/* Sprint 4F-3: trust group is now rendered inside .entry-summary (via
   woocommerce_single_product_summary p15), between product-summary and
   size-selector. No grid-column needed — it inherits .entry-summary flow. */

.bf-trust-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--bf-space-3);
  padding-bottom: var(--bf-space-3);
  border-bottom: 1px solid var(--bf-border-default);
}

/* ── 8. Trust Metrics — 4 compact stat cards ─────────────────────────────── */

.bf-trust-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border: none;
  border-radius: 0;
  overflow: visible;
}

@media (max-width: 767px) {
  .bf-trust-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}

.bf-trust-metrics__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
  padding: 6px var(--bf-space-1);
  gap: 1px;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-surface-elevated);
}

.bf-trust-metrics__stat {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  color: var(--bf-color-red);
  line-height: 1.1;
}

.bf-trust-metrics__label {
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-text-secondary);
  line-height: 1.2;
}

/* Legacy selector — kept for any residual CSS that references .bf-trust-badges */
.bf-trust-badges { display: none; }

/* ── 9. Why Price — collapsible hero card (Sprint 5E) ───────────────────── */

.bf-why-price {
  margin-top: var(--bf-space-4);
}

.bf-why-price__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding: var(--bf-space-4) 18px;
  cursor: pointer;
  user-select: none;
}

.bf-why-price__summary::-webkit-details-marker {
  display: none;
}

.bf-why-price__summary:hover {
  background: var(--bf-surface-muted);
}

.bf-why-price__summary-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bf-text-primary);
}

.bf-why-price__summary-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--bf-text-secondary);
  line-height: 0;
}

.bf-why-price__summary-icon-svg {
  display: block;
  width: 18px;
  height: 18px;
}

.bf-why-price__summary-text {
  min-width: 0;
}

.bf-why-price__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--bf-text-secondary);
  line-height: 0;
  transition: transform 0.2s ease;
}

.bf-why-price__chevron-svg {
  display: block;
  width: 18px;
  height: 18px;
}

.bf-why-price[open] .bf-why-price__chevron {
  transform: rotate(180deg);
}

.bf-why-price__content {
  padding: 0 18px 18px;
}

.bf-why-price__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: var(--bf-space-5);
  align-items: start;
}

.bf-why-price__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bf-why-price__point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--bf-text-sm);
  line-height: 1.45;
  color: var(--bf-text-primary);
}

.bf-why-price__point-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--bf365-success);
  line-height: 0;
  margin-top: 1px;
}

.bf-why-price__check-svg {
  display: block;
  width: 18px;
  height: 18px;
}

.bf-why-price__point-text {
  flex: 1 1 auto;
  min-width: 0;
}

.bf-why-price__media {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
  min-width: 0;
}

.bf-why-price__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.bf-why-price__media-preview {
  display: block;
}

.bf-why-price__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--bf-radius-md);
  overflow: hidden;
  background-color: var(--bf-skeleton-bg);
  background-image: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 100%);
  background-size: cover;
  background-position: center;
}

.bf-why-price__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.22);
  pointer-events: none;
}

.bf-why-price__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  line-height: 0;
}

.bf-why-price__play-svg {
  display: block;
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.bf-why-price__caption {
  margin: 0;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.35;
  color: var(--bf-text-secondary);
  text-align: left;
}

@media (max-width: 767px) {
  .bf-why-price__summary {
    padding: 14px var(--bf-space-4);
  }

  .bf-why-price__summary-label {
    font-size: var(--bf-text-sm);
  }

  .bf-why-price__content {
    padding: 0 var(--bf-space-4) var(--bf-space-4);
  }

  .bf-why-price__grid {
    grid-template-columns: 1fr;
    gap: var(--bf-space-4);
  }

  .bf-why-price__point {
    font-size: var(--bf-text-sm);
  }

  .bf-why-price__play-svg {
    width: 44px;
    height: 44px;
  }
}

/* ── 10. Policy Block ──────────────────────────────────────────────────────
   Sprint 4I: rendered after the action buttons (no longer pushes size/buttons
   down). Made more compact: tighter padding, and on desktop the commitments
   sit in a 2-column grid so the block stays short. */

.bf-policy {
  margin-top: var(--bf-space-4);
  padding: var(--bf-space-3) 14px;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface-elevated);
}

.bf-policy__title {
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bf-text-secondary);
  margin: 0 0 10px;
  padding-bottom: var(--bf-space-2);
  border-bottom: 1px solid var(--bf-border-default);
}

.bf-policy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
}

/* Desktop: 2-column grid keeps the policy block compact in the right column */
@media (min-width: 1024px) {
  .bf-policy__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bf-space-2) var(--bf-space-4);
  }
}

.bf-policy__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bf-policy__item-icon {
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  color: var(--bf-color-red);
}

.bf-policy__item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bf-policy__item-text strong {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-text-primary);
  line-height: 1.3;
}

.bf-policy__item-text span {
  font-size: var(--bf-text-xs);
  color: var(--bf-text-secondary);
  line-height: 1.4;
}

/* ── 11. Content Sections wrapper ───────────────────────────────────────── */

.bf-content-sections {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
  margin-top: var(--bf-space-8);
}

/* Shared section card style */
.bf-description,
.bf-specs,
.bf-size-guide,
.bf-faq {
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  padding: var(--bf-space-5);
}

/* Shared heading inside each section */
.bf-section-heading {
  display: block;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bf-text-primary);
  margin: 0 0 10px;
  padding: 0;
  border-bottom: none;
}

.bf-section-heading__text {
  color: var(--bf-text-primary);
}

/* ── 14. Size Guide ──────────────────────────────────────────────────────── */

.bf-size-guide__media {
  text-align: center;
}

.bf-size-guide__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bf-radius-md);
}

.bf-size-guide__content {
  font-size: var(--bf-text-sm);
  line-height: 1.7;
}

.bf-size-guide__intro {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  margin: 0 0 14px;
  line-height: 1.6;
}

.bf-size-guide__steps {
  margin: 0 0 14px;
  padding-left: var(--bf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
}

.bf-size-guide__steps li {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-primary);
  line-height: 1.5;
  padding-left: var(--bf-space-1);
}

.bf-size-guide__steps li::marker {
  color: var(--bf-color-red);
  font-weight: var(--bf-weight-black);
}

.bf-size-guide__note {
  font-size: var(--bf-text-xs);
  color: var(--bf-text-secondary);
  background: var(--bf-surface-muted);
  border-left: 3px solid var(--bf-color-red);
  padding: var(--bf-space-2) var(--bf-space-3);
  border-radius: 0 var(--bf-radius-xs) var(--bf-radius-xs) 0;
  margin: 0;
  line-height: 1.5;
}

/* ── 15. FAQ ─────────────────────────────────────────────────────────────── */

.bf-faq__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--bf-space-6);
}

@media (min-width: 1024px) {
  .bf-faq__columns {
    grid-template-columns: 1fr 1fr;
  }
}

.bf-faq__col {
  min-width: 0;
}

.bf-specs__empty,
.bf-quick-compare__empty {
  margin: 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  line-height: 1.6;
}

/* ── 17. Customer reviews (.bf-reviews) ────────────────────────────────── */

.bf-reviews {
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  padding: var(--bf-space-5);
  margin-top: var(--bf-space-4);
}

/* WC renders a wrapping <div id="reviews" class="woocommerce-Reviews"> */
.bf-reviews .woocommerce-Reviews {
  padding: 0;
  margin: 0;
}

/* Heading: "Đánh giá khách hàng (n)" — styled like bf-section-heading */
.bf-reviews .woocommerce-Reviews-title,
.bf-reviews #reviews > h2 {
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-text-primary);
  margin: 0 0 var(--bf-space-4);
  padding: 0;
}

/* Review list */
.bf-reviews .commentlist {
  list-style: none;
  margin: 0 0 var(--bf-space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

.bf-reviews .commentlist .comment_container {
  display: flex;
  gap: var(--bf-space-3);
  align-items: flex-start;
}

.bf-reviews .commentlist .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.bf-reviews .commentlist .comment-text {
  flex: 1;
  min-width: 0;
}

.bf-reviews .commentlist .meta {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  margin: var(--bf-space-1) 0 6px;
}

.bf-reviews .commentlist .woocommerce-review__author {
  font-weight: var(--bf-weight-semibold);
  color: var(--bf-text-primary);
}

.bf-reviews .commentlist .description p {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-primary);
  line-height: 1.6;
  margin: 0;
}

/* Star rating inside review list */
.bf-reviews .commentlist .star-rating {
  font-size: var(--bf-text-sm);
}

/* "No reviews yet" message */
.bf-reviews .woocommerce-noreviews {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  margin: 0 0 var(--bf-space-5);
}

/* Review form — basic styling, no pointer-events changes */
.bf-reviews #review_form_wrapper {
  border-top: 1px solid var(--bf-border-default);
  padding-top: var(--bf-space-5);
  margin-top: var(--bf-space-5);
}

.bf-reviews #review_form .comment-form-author label,
.bf-reviews #review_form .comment-form-email label,
.bf-reviews #review_form .comment-form-comment label {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-semibold);
  color: var(--bf-text-primary);
}

.bf-reviews #review_form input[type="text"],
.bf-reviews #review_form input[type="email"],
.bf-reviews #review_form textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--bf-text-sm);
  border: 1px solid var(--bf-border-default);
  border-radius: 11px;
  background: var(--bf-surface-input);
  color: var(--bf-text-primary);
  box-sizing: border-box;
}

.single-product .bf-pdp .bf-reviews #review_form #submit,
.single-product .bf-pdp .bf-reviews #respond input#submit,
.single-product .bf-pdp .bf-customer-proof .bf-reviews .form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px var(--bf-space-5) !important;
  font-size: var(--bf-text-sm) !important;
  font-weight: var(--bf-weight-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
  border-radius: 11px !important;
  background: var(--bf-color-red) !important;
  background-image: none !important;
  color: var(--bf-on-primary) !important;
  cursor: pointer;
  box-shadow: none !important;
}

.single-product .bf-pdp .bf-reviews #review_form #submit:hover,
.single-product .bf-pdp .bf-reviews #respond input#submit:hover {
  background: var(--bf-color-red-dark) !important;
}

.bf-reviews #review_form input[type="text"]:focus,
.bf-reviews #review_form input[type="email"]:focus,
.bf-reviews #review_form textarea:focus {
  outline: 2px solid var(--bf-color-red);
  outline-offset: 1px;
  border-color: var(--bf-color-red);
}

/* ── 18. Product grid (.bf-product-grid) ────────────────────────────────── */
/* Shared layout for related-products.php and cross-sell-products.php */

.bf-product-grid {
  list-style: none;
  margin: var(--bf-space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-space-3);
}

@media (min-width: 768px) {
  .bf-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bf-space-4);
  }

  /* Half-panel cards stay 2×2 compact — never 4-wide */
  .single-product .bf-pdp .bf-product-grid--compact,
  .single-product .bf-pdp .bf-pdp__row--2 .bf-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bf-space-2);
  }
}

/* Image container — square aspect ratio prevents jumpy placeholder.
 * flex:0 0 auto keeps the square from being shrunk if the card is ever a flex
 * column (Safari collapses aspect-ratio boxes under flex-shrink). */
.bf-product-grid .bf-product-card__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bf-surface-media);
  border-radius: var(--bf-radius-md, 8px);
  margin-bottom: var(--bf-space-2);
}

/*
 * contain, not cover, and today the two are the same picture.
 *
 * Every woocommerce_thumbnail on this site is 300x300 — WooCommerce hard-crops
 * it, wc_get_image_size reports crop: 1 — confirmed against the actual files on
 * disk with getimagesize(), not just the registered metadata, on all 256
 * products including the three whose original upload is not square (840x839,
 * 2000x1333, 1200x900). So in a square box both values scale the source to
 * exactly the box, and neither crops nor letterboxes it.
 *
 * That holds for the srcset WordPress serves too, not just the registered size.
 * wp_calculate_image_srcset() only offers candidates that share the aspect
 * ratio of the requested size, so whichever width Chromium's lazy-loading
 * picks — 150, 300, 600, even as large as 1536 for a product with a bigger
 * source — the file it actually paints is still square. Checked against every
 * srcset candidate on the site (1,992 URLs): 1,989 exactly square, 3 off by a
 * single rounding pixel (768x767 and similar, all from one product). A stray
 * pixel does not read as a crop.
 *
 * Do not compute the scale factor from the <img> element's naturalWidth to
 * check this — it lies here. WordPress 6.7+ adds sizes="auto" to lazy-loaded
 * images, and Chromium reports naturalWidth as the CSS box width rather than
 * the file's real pixel size until the browser has chosen a candidate the slow
 * way. Caught this by loading the painted currentSrc into a fresh Image() and
 * reading getimagesize() on the file it named: a card whose box was 247px
 * reported naturalWidth 247 while actually painting a 1024x1024 file. Pixel
 * comparison (pixelmatch) between cover and contain forced on that same file,
 * across 8 sample products at both breakpoints: 0 pixels different, including
 * the same-value control. cover and contain render identically today because
 * the source is square, not because of any browser-quirk-sized scale factor.
 *
 * contain is still the one to declare, because that squareness is not a
 * decision anyone made. woocommerce_thumbnail_cropping is an empty option;
 * the 1:1 comes from WooCommerce's default. Someone choosing "Uncropped" in
 * the Customizer would regenerate non-square thumbnails, and cover would
 * quietly start cutting them again. contain cannot: the worst it can do is
 * letterbox onto --bf-surface-media, which is visible and therefore fixable.
 */
.bf-product-grid .bf-product-card__media-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Card body */
.bf-product-grid .bf-product-card__body {
  padding: 0 2px;
}

.bf-product-grid .bf-product-card__title {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  line-height: 1.35;
  margin: 0 0 var(--bf-space-1);
  color: var(--bf-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-product .bf-pdp .bf-product-grid .bf-product-card__price {
  margin: 0;
  line-height: 1.3;
}

.single-product .bf-pdp .bf-card-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.single-product .bf-pdp .bf-card-price__sale,
.single-product .bf-pdp .bf-card-price__sale .amount,
.single-product .bf-pdp .bf-card-price__sale .woocommerce-Price-amount {
  font-size: var(--bf-text-sm) !important;
  font-weight: var(--bf-weight-black) !important;
  color: var(--bf365-red) !important;
  text-decoration: none !important;
}

.single-product .bf-pdp .bf-card-price__regular del,
.single-product .bf-pdp .bf-card-price__regular .amount {
  font-size: var(--bf-text-xs) !important;
  font-weight: var(--bf-weight-medium) !important;
  color: var(--bf-text-secondary) !important;
  text-decoration: line-through !important;
}

/* B1: chi con DINH VI. Day la cho DUY NHAT lam badge nay thanh pill 999px va
 * co chu 11px — do la ly do ho bf-badge-sale do ra hai gia tri khac nhau tuy trang.
 * Do hinh hoc: badge nay de len anh 100%, tam cach goc 37-50px, tuc bam goc anh,
 * nen no phai theo sm 8 nhu moi badge goc khac. */
.single-product .bf-pdp .bf-product-grid .bf-badge-sale {
  position: absolute;
  top: 8px;
  left: 8px;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
}

/* Legacy card price wrapper */
.bf-product-grid .bf-product-card__price {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-red);
  margin: 0;
}

/* Override anchor colour inside card */
.bf-product-grid .bf-product-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.bf-product-grid .bf-product-card__link:hover .bf-product-card__title {
  color: var(--bf-color-red);
}

/* ── 19–20. Related / cross-sell — layout in section 21 + Sprint 4N compact ─ */

/* ── 21. Below-hero section cards (inside .bf-pdp__sections) ───────────── */

.bf-pdp__sections > * {
  margin-top: 0;
}

/* Scool purchase sequence, translated to BF365's dark-red language. */
.single-product .bf-pdp .bf-purchase-panel {
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface-elevated);
}
.single-product .bf-pdp .bf-purchase-panel__cart {
  margin-top: var(--bf-space-2);
}
.single-product .bf-pdp .bf-purchase-panel__trust {
  padding-top: var(--bf-space-3);
  border-top: 1px solid var(--bf-border-default);
}
@media (max-width: 767px) {
  .single-product .bf-pdp .bf-purchase-panel { padding: var(--bf-space-3); }
}

.bf-customer-proof,
.bf-description,
.bf-specs,
.bf-editorial-review,
.bf-quick-compare,
.bf-related,
.bf-cross-sell,
.bf-faq,
.bf-footer-strip {
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: 14px;
  padding: var(--bf-space-4);
  box-shadow: none;
}

/* Nested reviews inside customer-proof — no double card */
.bf-customer-proof .bf-reviews {
  margin-top: var(--bf-space-3);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* 2-column row: product cards — compact 2×2 inside each half panel */
.bf-pdp__row--2 .bf-product-grid,
.bf-pdp__row--2 .bf-product-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-space-2);
  margin-top: 6px;
}

.bf-pdp__row--2 .bf-cross-sell,
.bf-pdp__row--2 .bf-related {
  margin-top: 0;
}

/* ── Sprint 4N: P1 compact polish ──────────────────────────────────────── */

.single-product .bf-pdp .bf-product-grid--compact {
  margin-top: 6px;
  gap: var(--bf-space-2);
}

/*
 * No aspect-ratio here on purpose — the square from .bf-product-grid above
 * stands. This block used to override it to 5 / 4, which cropped 20% off the
 * height of every card image: the thumbnails WooCommerce generates are 300x300
 * (woocommerce_thumbnail, crop 1), and a square source in a 5:4 box under
 * object-fit: cover is scaled to cover the width and then clipped top and
 * bottom. Measured at 1440: painted 247.19x247.19 inside a 197.75-tall box,
 * 49.44px gone; at 390 it was 29.61px.
 *
 * Worth knowing how invisible that was. Neither of the two checks that caught
 * the gallery crop can see this one — image-edge against box-edge, and
 * scrollHeight minus clientHeight, both read 0 on all 192 cards measured.
 * object-fit clips the content INSIDE the <img> element, and the element box
 * stays exactly flush with its container, so nothing overflows anything. The
 * tell is that the horizontal and vertical scale differ: 1.0008 against 0.8006.
 */
.single-product .bf-pdp .bf-product-grid--compact .bf-product-card__media {
  margin-bottom: var(--bf-space-1);
  border-radius: var(--bf-radius-sm);
}

.single-product .bf-pdp .bf-product-grid--compact .bf-product-card__body {
  padding: 0 1px;
}

.single-product .bf-pdp .bf-product-grid--compact .bf-product-card__title {
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.3;
  margin: 0 0 2px;
  -webkit-line-clamp: 2;
}

.single-product .bf-pdp .bf-product-grid--compact .bf-card-price__sale,
.single-product .bf-pdp .bf-product-grid--compact .bf-card-price__sale .amount {
  font-size: var(--bf-text-xs) !important;
}

.single-product .bf-pdp .bf-product-grid--compact .bf-card-price__regular del,
.single-product .bf-pdp .bf-product-grid--compact .bf-card-price__regular .amount {
  font-size: var(--bf-text-2xs) !important;
}

/* B1: bo co chu 11px, giu dinh vi va kich thuoc. */
.single-product .bf-pdp .bf-product-grid--compact .bf-badge-sale {
  top: 4px;
  left: 4px;
}

.single-product .bf-pdp .bf-cross-sell__empty,
.single-product .bf-pdp .bf-specs__empty,
.single-product .bf-pdp .bf-quick-compare__empty {
  margin: 0;
  padding: 10px var(--bf-space-3);
  font-size: var(--bf-text-xs);
  line-height: 1.5;
  color: var(--bf-text-secondary);
  text-align: center;
  background: var(--bf-surface-muted);
  border-radius: 10px;
}

.single-product .bf-pdp .bf-pdp__row--3 > .bf-specs,
.single-product .bf-pdp .bf-pdp__row--3 > .bf-product-info-card,
.single-product .bf-pdp .bf-pdp__row--3 > .bf-expert-review-card,
.single-product .bf-pdp .bf-pdp__row--3 > .bf-comparison-card {
  padding: 14px;
  min-height: 0;
}

.single-product .bf-pdp .bf-customer-proof__empty {
  margin: 0 0 var(--bf-space-2);
  font-size: var(--bf-text-xs);
  line-height: 1.55;
  color: var(--bf-text-secondary);
}

.single-product .bf-pdp .bf-customer-proof .bf-reviews {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-product-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bf-space-2);
  }
}

@media (max-width: 359px) {
  .single-product .bf-pdp .bf-pdp__row--2 .bf-product-grid--compact {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--bf-space-2);
    padding-bottom: 2px;
  }

  .single-product .bf-pdp .bf-pdp__row--2 .bf-product-grid--compact .bf-product-card {
    flex: 0 0 42%;
    max-width: 42%;
    scroll-snap-align: start;
  }
}

/* ── Editorial / detailed product review (Sprint 4K.5) ─────────────────── */

.bf-editorial-review__empty {
  margin: 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
  line-height: 1.6;
}

.bf-editorial-review__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-5);
  margin-top: var(--bf-space-1);
}

@media (min-width: 1024px) {
  .bf-editorial-review__grid:not(.bf-editorial-review__grid--no-media) {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.bf-editorial-review__title {
  margin: 0 0 var(--bf-space-3);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-black);
  line-height: 1.3;
  color: var(--bf-text-primary);
}

.bf-editorial-review__summary {
  font-size: var(--bf-text-sm);
  line-height: 1.7;
  color: var(--bf-text-secondary);
  margin-bottom: var(--bf-space-4);
}

.bf-editorial-review__summary p {
  margin: 0 0 10px;
}

.bf-editorial-review__details {
  margin: 0 0 var(--bf-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
}

.bf-editorial-review__detail {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--bf-space-2);
  font-size: var(--bf-text-sm);
}

.bf-editorial-review__detail dt {
  font-weight: var(--bf-weight-bold);
  color: var(--bf-text-secondary);
  margin: 0;
}

.bf-editorial-review__detail dd {
  margin: 0;
  color: var(--bf-text-primary);
}

.bf-editorial-review__pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-3);
}

@media (min-width: 768px) {
  .bf-editorial-review__pros-cons {
    grid-template-columns: 1fr 1fr;
  }
}

.bf-editorial-review__list-heading {
  margin: 0 0 var(--bf-space-2);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bf-text-primary);
}

.bf-editorial-review__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bf-editorial-review__list li {
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: var(--bf-text-secondary);
  padding-left: 14px;
  position: relative;
}

.bf-editorial-review__list-block--pros .bf-editorial-review__list li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--bf365-success);
  font-weight: var(--bf-weight-black);
}

.bf-editorial-review__list-block--cons .bf-editorial-review__list li::before {
  content: '−';
  position: absolute;
  left: 0;
  color: var(--bf-color-orange);
  font-weight: var(--bf-weight-black);
}

.bf-editorial-review__video-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--bf-radius-md);
  overflow: hidden;
  background: var(--bf-surface-media);
}

.bf-editorial-review__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bf-editorial-review__thumb-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1f2937, #050505);
}

.bf-editorial-review__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(230, 0, 18, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bf-editorial-review__video-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  color: #fff;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.35;
}

/* Quick comparison — full section width (moved from sidebar in 4K.5) */
.bf-pdp__sections .bf-quick-compare__grid {
  gap: var(--bf-space-4);
  margin-bottom: var(--bf-space-4);
}

.bf-pdp__sections .bf-quick-compare__card {
  padding: var(--bf-space-3);
}

.bf-pdp__sections .bf-quick-compare__name {
  font-size: var(--bf-text-sm);
}

.bf-pdp__sections .bf-quick-compare__table {
  font-size: var(--bf-text-sm);
}

.bf-customer-proof__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--bf-space-1);
}

.bf-customer-proof__score {
  font-size: 28px;
  font-weight: var(--bf-weight-black);
  line-height: 1;
}

.bf-customer-proof__stars .star-rating {
  font-size: var(--bf-text-base);
  color: var(--bf-color-yellow);
}

.bf-customer-proof__count {
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
}

.bf-customer-proof__empty {
  margin: 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-text-secondary);
}

.bf-customer-proof .bf-reviews {
  margin-top: var(--bf-space-4);
  padding: 0;
  border: none;
  background: transparent;
}

/* Footer policy strip */
.bf-footer-strip {
  background: var(--bf-surface-muted);
}

.bf-footer-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px var(--bf-space-3);
}

@media (min-width: 768px) {
  .bf-footer-strip__list {
    grid-template-columns: repeat(5, 1fr);
  }
}

.bf-footer-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.bf-footer-strip__icon {
  color: var(--bf-color-red);
  display: flex;
}

.bf-footer-strip__label {
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.3;
}

@media (max-width: 767px) {
  .bf-footer-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-footer-strip__item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 220px;
    width: 100%;
  }
}

/* ── 22. Overflow guards (360 / 390 / 430px) ────────────────────────────── */

.bf-pdp,
.bf-breadcrumb,
.bf-pdp__hero,
.bf-pdp__gallery,
.bf-pdp__main,
.bf-purchase-panel,
.bf-pdp__sidebar,
.bf-pdp__sections,
.bf-pdp__row,
.bf-product-gallery,
.bf-product-summary,
.bf-size-selector,
.bf-sticky-atc,
.bf-trust-group,
.bf-trust-badges,
.bf-why-price,
.bf-policy-mini,
.bf-description,
.bf-product-story,
.bf-product-info-card,
.bf-expert-review-card,
.bf-comparison-card,
.bf-specs,
.bf-size-guide,
.bf-faq,
.bf-reviews,
.bf-customer-proof,
.bf-editorial-review,
.bf-quick-compare,
.bf-footer-strip,
.bf-product-grid,
.bf-related,
.bf-cross-sell {
  max-width: 100%;
  overflow-x: hidden;
}

/* WC form inside purchase panel — no extra top margin */
.single-product .bf-pdp .bf-purchase-panel__cart form.cart {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Sprint 4N-HERO-POLISH — desktop hero only (>= 1024px) ───────────────── */

@media (min-width: 1024px) {
  /* Gallery — larger column, bigger main image frame */
  .single-product .bf-pdp .bf-product-gallery {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
  }

  .single-product .bf-pdp .bf-product-gallery__thumb {
    width: 80px;
    height: 80px;
    /*
     * flex-shrink: 0, or the rail never scrolls — it squashes. Once the rail
     * became a fixed-height scroll container the thumbnails, being flex items
     * in a column, simply compressed to fit: eleven of them shared 660px at
     * about 52px each instead of overflowing at 80px. Nothing was hidden, so
     * scrollHeight never exceeded clientHeight and the scrollbar never
     * appeared — the pictures just got smaller with no error anywhere.
     */
    flex-shrink: 0;
  }

  .single-product .bf-pdp .bf-product-gallery__main {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .single-product .bf-pdp .bf-product-gallery__img {
    padding: var(--bf-space-1);
    object-fit: contain;
  }

  /*
   * The thumbnail rail scrolls instead of setting the height of the row.
   *
   * The rail is 88px per thumbnail (80 + 8 gap) and the main image is a
   * square the width of its own column, so the two only matched at 7.59
   * thumbnails. Below that the rail left a gap under itself; above it the
   * rail was taller than the photo, pushed the whole hero row down and
   * opened 36-388px of nothing under the main image on 124 of 256 products.
   *
   * overflow-y: auto with min-height: 0 fixes it without a magic number: a
   * scroll container contributes nothing to intrinsic sizing in its scroll
   * axis, so the row is sized by the photo alone and the rail stretches to
   * exactly that. It stays correct at every viewport, which a fixed
   * max-height would not — the photo is 660px at 1440 but 567px at 1280.
   *
   * The cue is geometric and free: the rail height over the 88px pitch lands
   * on .5, so the next thumbnail is cut in half at the bottom edge. The thin
   * scrollbar is a second signal — the base rule hides scrollbars for the
   * horizontal mobile rail, which is right there and wrong here.
   */
  .single-product .bf-pdp .bf-product-gallery {
    position: relative;
  }

  .single-product .bf-pdp .bf-product-gallery__main {
    grid-column: 2;
  }

  .single-product .bf-pdp .bf-product-gallery__thumbs {
    position: absolute;
    inset: 0 auto 0 0;
    width: 80px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--bf-border-strong, #c4c4c4) transparent;
  }

  .single-product .bf-pdp .bf-product-gallery__thumbs::-webkit-scrollbar {
    display: block;
    width: 6px;
  }

  .single-product .bf-pdp .bf-product-gallery__thumbs::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--bf-border-strong, #c4c4c4);
  }

  /* Trust metrics — compact 4-card row */
  .single-product .bf-pdp .bf-trust-group {
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .single-product .bf-pdp .bf-trust-metrics {
    gap: 6px;
  }

  .single-product .bf-pdp .bf-trust-metrics__item {
    padding: 5px var(--bf-space-1);
    gap: 1px;
    border-radius: var(--bf-radius-sm);
  }

  .single-product .bf-pdp .bf-trust-metrics__stat {
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-black);
    line-height: 1.05;
  }

  .single-product .bf-pdp .bf-trust-metrics__label {
    font-size: var(--bf-text-2xs);
    font-weight: var(--bf-weight-medium);
    line-height: 1.2;
    color: var(--bf-text-secondary);
  }

  /* Purchase panel — tighter vertical rhythm */
  .single-product .bf-pdp .bf-purchase-panel {
    gap: 10px;
    margin-top: 0;
  }

  /* Sale price — balanced desktop size */
  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale,
  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale .woocommerce-Price-amount,
  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale .amount,
  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale bdi {
    font-size: var(--bf-text-4xl) !important;
    line-height: 1.05 !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular .woocommerce-Price-amount,
  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular .amount,
  .single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__regular bdi {
    font-size: var(--bf-text-sm) !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__savings {
    margin-top: 3px;
    padding: 2px var(--bf-space-2);
    font-size: var(--bf-text-2xs);
    font-weight: var(--bf-weight-semibold);
    line-height: 1.25;
    background: var(--bf-color-red-soft);
  }

  /* Size block → CTA: no phantom gap from WC variation price */
  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector {
    margin-bottom: 0;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__header,
  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__head {
    margin-bottom: 10px;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-urgency {
    margin: var(--bf-space-1) 0 0;
    padding: 0;
    font-size: var(--bf-text-2xs);
    font-weight: var(--bf-weight-semibold);
    line-height: 1.35;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-urgency[hidden] {
    display: none !important;
    margin: 0;
  }

  .single-product .bf-pdp .bf-purchase-panel .single_variation_wrap {
    margin: 0;
    padding: 0;
  }

  .single-product .bf-pdp .bf-purchase-panel .woocommerce-variation {
    margin: 0;
    padding: 0;
  }

  /* BF365 price block handles display — hide WC duplicate in hero */
  .single-product .bf-pdp .bf-purchase-panel .woocommerce-variation-price {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden;
  }

  .single-product .bf-pdp .bf-purchase-panel__cart {
    margin-top: 0;
  }

  /* CTA row — equal buttons + compact wishlist square */
  .single-product .bf-pdp .bf-purchase-panel__actions {
    gap: var(--bf-space-2);
    margin-top: 0;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button {
    min-height: 52px;
    height: 52px;
    padding: 6px var(--bf-space-2) !important;
    font-size: var(--bf-text-base) !important;
  }

  .single-product .bf-pdp .bf-purchase-panel .bf-pdp-btn__sub,
  .single-product .bf-pdp .bf-purchase-panel .single_add_to_cart_button::after {
    margin-top: 1px;
    font-size: var(--bf-text-2xs);
    line-height: 1.15;
  }

  .single-product .bf-pdp .bf-purchase-panel .bf-pdp-btn--icon,
  .single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 52px;
    height: 52px;
  }

  .single-product .bf-pdp .bf-purchase-panel .bf-wishlist-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   Sprint 4N-ROOT-FIX — Canonical Hero Price + Trust (single source of truth)
   Placed LAST so it wins over scattered legacy rules + WooCommerce .amount.
   ========================================================================== */

/* WC nested nodes inherit typography from bf-hero-price__* parents only */
.single-product.woocommerce .bf-pdp .bf-hero-price .woocommerce-Price-amount,
.single-product.woocommerce .bf-pdp .bf-hero-price .amount,
.single-product.woocommerce .bf-pdp .bf-hero-price bdi,
.single-product.woocommerce .bf-pdp .bf-hero-price .woocommerce-Price-currencySymbol {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  text-decoration: inherit !important;
}

.single-product.woocommerce .bf-pdp .bf-hero-price__row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: var(--bf-space-2);
}

.single-product.woocommerce .bf-pdp .bf-hero-price__sale {
  font-size: 28px !important;
  font-weight: var(--bf-weight-black) !important;
  color: var(--bf365-red) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  text-decoration: none !important;
}

.single-product.woocommerce .bf-pdp .bf-hero-price__regular {
  align-self: baseline;
  font-size: var(--bf-text-sm) !important;
  font-weight: var(--bf-weight-medium) !important;
  color: var(--bf365-muted) !important;
  line-height: 1.2 !important;
}

.single-product.woocommerce .bf-pdp .bf-hero-price__regular del {
  text-decoration: line-through !important;
  opacity: 1 !important;
}

.single-product.woocommerce .bf-pdp .bf-hero-price__saving {
  display: inline-block;
  margin-top: var(--bf-space-1);
  padding: var(--bf-space-1) var(--bf-space-2);
  font-size: var(--bf-text-xs) !important;
  font-weight: var(--bf-weight-semibold) !important;
  line-height: 16px !important;
  color: var(--bf365-red) !important;
  background: var(--bf-color-red-soft) !important;
  border-radius: var(--bf-radius-pill);
}

.single-product .bf-pdp .bf-hero-trust-group {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bf-border-default);
}

@media (min-width: 1024px) {
  .single-product.woocommerce .bf-pdp .bf-hero-price__sale {
    font-size: 34px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-price__regular {
    font-size: var(--bf-text-sm) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-price__saving {
    font-size: var(--bf-text-xs) !important;
    margin-top: 3px;
    padding: 2px var(--bf-space-2);
  }
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-hero-price__sale {
    font-size: 28px !important;
  }
}

/* ==========================================================================
   Sprint 4N-FINAL-PRICE-TRUST-TUNE — price only (trust → rebuild block below)
   ========================================================================== */

@media (min-width: 1024px) {
  .single-product .bf-pdp .bf-hero-price__sale {
    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  .single-product .bf-pdp .bf-hero-price__sale .amount,
  .single-product .bf-pdp .bf-hero-price__sale .woocommerce-Price-amount,
  .single-product .bf-pdp .bf-hero-price__sale bdi {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

/* ==========================================================================
   Sprint 4N-TRUST-METRICS-REBUILD — single framed row (canonical, last wins)
   ========================================================================== */

/* Neutralize legacy per-card trust rules in hero */
.single-product .bf-pdp .bf-hero-trust.bf-trust-metrics,
.single-product .bf-pdp .bf-trust-metrics.bf-hero-trust {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bf-border-default) !important;
  border-radius: 14px !important;
  background: var(--bf-surface-elevated) !important;
  overflow: hidden !important;
  min-height: 72px !important;
  max-height: 84px !important;
}

.single-product .bf-pdp .bf-hero-trust__item,
.single-product .bf-pdp .bf-trust-metrics__item.bf-hero-trust__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  padding: 10px var(--bf-space-3) !important;
  gap: var(--bf-space-1) !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.single-product .bf-pdp .bf-hero-trust__item + .bf-hero-trust__item {
  border-left: 1px solid var(--bf-border-default) !important;
}

.single-product .bf-pdp .bf-hero-trust__top {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--bf-space-1) !important;
  flex-wrap: nowrap !important;
}

.single-product .bf-pdp .bf-hero-trust__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  color: var(--bf365-success) !important;
  line-height: 0 !important;
}

.single-product .bf-pdp .bf-hero-trust__icon-svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}

.single-product .bf-pdp .bf-hero-trust__value,
.single-product .bf-pdp .bf-trust-metrics__stat.bf-hero-trust__value {
  font-size: var(--bf-text-2xl) !important;
  font-weight: var(--bf-weight-black) !important;
  color: var(--bf-text-primary) !important;
  line-height: 1.1 !important;
}

.single-product .bf-pdp .bf-hero-trust__label,
.single-product .bf-pdp .bf-trust-metrics__label.bf-hero-trust__label {
  font-size: var(--bf-text-xs) !important;
  font-weight: var(--bf-weight-semibold) !important;
  color: var(--bf-text-secondary) !important;
  line-height: 1.2 !important;
}

@media (min-width: 1024px) {
  .single-product .bf-pdp .bf-hero-trust.bf-trust-metrics {
    min-height: 76px !important;
    max-height: 84px !important;
  }

}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-hero-trust.bf-trust-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item:nth-child(2n + 1) {
    border-left: none !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item:nth-child(n + 3) {
    border-top: 1px solid var(--bf-border-default) !important;
  }

}

/* ==========================================================================
   Sprint 4N-HERO-REFERENCE-CORRECTION — canonical (last wins)
   ========================================================================== */

@media (min-width: 1024px) {
  .single-product.woocommerce .bf-pdp .bf-product-summary__title {
    font-size: clamp(22px, 2.1vw, 28px);
    margin-bottom: var(--bf-space-2);
    line-height: 1.12;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-price__sale {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-price__sale .amount,
  .single-product.woocommerce .bf-pdp .bf-hero-price__sale .woocommerce-Price-amount,
  .single-product.woocommerce .bf-pdp .bf-hero-price__sale bdi {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-price__regular {
    font-size: var(--bf-text-base) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-price__saving {
    font-size: var(--bf-text-xs) !important;
    padding: var(--bf-space-1) var(--bf-space-2) !important;
    margin-top: var(--bf-space-1) !important;
  }
}

.single-product .bf-pdp .bf-product-summary__meta-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--bf-border-strong-dark-ready);
  flex: 0 0 1px;
  align-self: center;
}

.single-product .bf-pdp .bf-product-summary__rating-score {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-semibold);
  color: var(--bf-text-secondary);
}

.single-product .bf-pdp .bf-purchase-panel__trust.bf-hero-trust-group,
.single-product .bf-pdp .bf-hero-trust-group.bf-purchase-panel__trust {
  margin: 6px 0 0;
  padding: 0;
  border-bottom: none;
}

.single-product .bf-pdp .bf-hero-trust {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid var(--bf-border-default) !important;
  border-radius: 14px !important;
  background: var(--bf-surface-elevated) !important;
  overflow: hidden !important;
  min-height: 58px !important;
  max-height: 66px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .bf-pdp .bf-hero-trust__item {
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 58px !important;
  max-height: 66px !important;
  height: auto !important;
  padding: var(--bf-space-2) 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  gap: 3px !important;
}

.single-product .bf-pdp .bf-hero-trust__item + .bf-hero-trust__item {
  border-left: 1px solid var(--bf-border-default) !important;
}

.single-product .bf-pdp .bf-hero-trust__top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.single-product .bf-pdp .bf-hero-trust__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  color: var(--bf365-success) !important;
  line-height: 0 !important;
}

.single-product .bf-pdp .bf-hero-trust__icon-svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
}

.single-product .bf-pdp .bf-hero-trust__value {
  font-size: 19px !important;
  line-height: 1.1 !important;
  font-weight: var(--bf-weight-black) !important;
  color: var(--bf-text-primary) !important;
}

.single-product .bf-pdp .bf-hero-trust__label {
  margin-top: 3px !important;
  font-size: var(--bf-text-2xs) !important;
  line-height: 1.15 !important;
  font-weight: var(--bf-weight-semibold) !important;
  color: var(--bf-text-secondary) !important;
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-hero-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item {
    min-height: 52px !important;
    max-height: 58px !important;
    padding: 6px var(--bf-space-2) !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item:nth-child(2n + 1) {
    border-left: none !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item:nth-child(n + 3) {
    border-top: 1px solid var(--bf-border-default) !important;
  }

  .single-product .bf-pdp .bf-hero-trust__value {
    font-size: 17px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__label {
    font-size: var(--bf-text-2xs) !important;
    margin-top: 2px !important;
  }
}

/* ==========================================================================
   Sprint 4N-TRUST-COMPACT-FIX — lower strip, nowrap values (last wins)
   ========================================================================== */

@media (min-width: 1024px) {
  .single-product .bf-pdp .bf-hero-trust {
    min-height: 56px !important;
    max-height: 64px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item {
    min-height: 56px !important;
    max-height: 64px !important;
    padding: 6px var(--bf-space-2) !important;
    gap: 2px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .single-product .bf-pdp .bf-hero-trust__icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__icon-svg {
    width: 16px !important;
    height: 16px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__value {
    font-size: var(--bf-text-lg) !important;
    line-height: 1 !important;
    font-weight: var(--bf-weight-black) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .single-product .bf-pdp .bf-hero-trust__label {
    margin-top: var(--bf-space-1) !important;
    font-size: var(--bf-text-2xs) !important;
    line-height: 1.15 !important;
    font-weight: var(--bf-weight-semibold) !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item:last-child .bf-hero-trust__value {
    font-size: var(--bf-text-base) !important;
  }
}

/* ==========================================================================
   Sprint 4N-TRUST-TINY-FIX — minimal trust strip (last wins)
   ========================================================================== */

@media (min-width: 1024px) {
  .single-product .bf-pdp .bf-hero-trust {
    min-height: 44px !important;
    max-height: 50px !important;
    height: 48px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__item {
    min-height: 44px !important;
    max-height: 50px !important;
    height: 48px !important;
    padding: var(--bf-space-1) 6px !important;
    gap: 1px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--bf-space-1) !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .single-product .bf-pdp .bf-hero-trust__icon {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__icon svg,
  .single-product .bf-pdp .bf-hero-trust__icon-svg {
    width: 13px !important;
    height: 13px !important;
  }

  .single-product .bf-pdp .bf-hero-trust__value,
  .single-product .bf-pdp .bf-hero-trust__item:last-child .bf-hero-trust__value {
    font-size: var(--bf-text-sm) !important;
    line-height: 1 !important;
    font-weight: var(--bf-weight-black) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .single-product .bf-pdp .bf-hero-trust__label {
    margin-top: 3px !important;
    font-size: var(--bf-text-2xs) !important;
    line-height: 1.1 !important;
    font-weight: var(--bf-weight-semibold) !important;
  }
}

/* ==========================================================================
   Sprint 4N-TRUST-VALUE-SMALL-FINAL — equal tiny values (last wins)
   ========================================================================== */

@media (min-width: 1024px) {
  .single-product.woocommerce .bf-pdp .bf-hero-trust {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__item {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 2px 5px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__icon,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__icon svg,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__icon-svg {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:first-child .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(2) .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(3) .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(4) .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:last-child .bf-hero-trust__value {
    font-size: var(--bf-text-2xs) !important;
    line-height: 1 !important;
    font-weight: var(--bf-weight-bold) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__label {
    margin-top: 2px !important;
    font-size: var(--bf-text-2xs) !important;
    line-height: 1.05 !important;
    font-weight: var(--bf-weight-medium) !important;
  }
}

/* ==========================================================================
   Sprint 4N-MOBILE-HERO-POLISH — compact trust, size, CTA (last wins)
   Tablet + mobile only; desktop (≥1024px) untouched.
   ========================================================================== */

@media (max-width: 1023px) {
  /* Tighter vertical rhythm in purchase panel */
  .single-product.woocommerce .bf-pdp .bf-purchase-panel {
    gap: var(--bf-space-2) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__trust.bf-hero-trust-group,
  .single-product.woocommerce .bf-pdp .bf-hero-trust-group.bf-purchase-panel__trust {
    margin: var(--bf-space-1) 0 0 !important;
    padding: 0 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-selector {
    margin-bottom: 0 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-selector__header,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-selector__head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--bf-space-1) var(--bf-space-2) !important;
    margin-bottom: var(--bf-space-2) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-selector__title,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-selector__label {
    font-size: var(--bf-text-xs) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-link {
    font-size: var(--bf-text-2xs) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-grid {
    gap: var(--bf-space-2) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-option {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 6px var(--bf-space-1) !important;
    border-radius: var(--bf-radius-md) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    gap: 2px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-option__badge {
    font-size: var(--bf-text-2xs) !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-urgency {
    margin-top: var(--bf-space-1) !important;
    font-size: var(--bf-text-2xs) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__cart {
    margin-top: 0 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--bf-space-2) !important;
    align-items: stretch !important;
    margin-top: 0 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button,
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: var(--bf-space-2) 10px !important;
    border-radius: var(--bf-radius-md) !important;
    font-size: var(--bf-text-base) !important;
    line-height: 1.1 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn__sub,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button::after {
    font-size: var(--bf-text-2xs) !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-wishlist-btn,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn--icon {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: var(--bf-radius-md) !important;
    padding: 0 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-wishlist-btn svg {
    width: 21px !important;
    height: 21px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-policy-mini {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  /* Trust — compact sizing (tablet keeps 4-col; mobile switches to 2×2 below) */
  .single-product.woocommerce .bf-pdp .bf-hero-trust,
  .single-product.woocommerce .bf-pdp .bf-hero-trust.bf-trust-metrics {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    border-radius: var(--bf-radius-md) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__item,
  .single-product.woocommerce .bf-pdp .bf-trust-metrics__item.bf-hero-trust__item {
    min-height: 38px !important;
    max-height: none !important;
    height: 40px !important;
    padding: var(--bf-space-1) 5px !important;
    gap: 1px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__top {
    gap: 3px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__icon,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__icon svg,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__icon-svg {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-trust-metrics__stat.bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:first-child .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(2) .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(3) .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(4) .bf-hero-trust__value,
  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:last-child .bf-hero-trust__value {
    font-size: var(--bf-text-2xs) !important;
    line-height: 1 !important;
    font-weight: var(--bf-weight-bold) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__label,
  .single-product.woocommerce .bf-pdp .bf-trust-metrics__label.bf-hero-trust__label {
    margin-top: 2px !important;
    font-size: var(--bf-text-2xs) !important;
    line-height: 1.05 !important;
    font-weight: var(--bf-weight-medium) !important;
  }
}

@media (max-width: 767px) {
  .single-product.woocommerce .bf-pdp .bf-hero-trust,
  .single-product.woocommerce .bf-pdp .bf-hero-trust.bf-trust-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: var(--bf-radius-md) !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(2n + 1) {
    border-left: none !important;
  }

  .single-product.woocommerce .bf-pdp .bf-hero-trust__item:nth-child(n + 3) {
    border-top: 1px solid var(--bf-border-default) !important;
  }
}

/* ==========================================================================
   Sprint 4N-SIMPLE-HERO-FIX — simple purchase panel (stock / CTA / spacing)
   ========================================================================== */

/* Simple product — same purchase panel rhythm as variable (no size block gap) */
.single-product.woocommerce .bf-pdp .bf-purchase-panel__cart--simple form.cart {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.single-product.woocommerce .bf-pdp .bf-purchase-panel__cart--simple form.cart > .stock,
.single-product.woocommerce .bf-pdp .bf-purchase-panel__cart form.cart > .stock {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-product.woocommerce .bf-pdp .bf-purchase-panel__cart--simple .bf-purchase-panel__actions {
  margin-top: 0 !important;
}

.single-product.woocommerce.product-type-simple .bf-pdp .bf-purchase-panel {
  gap: 10px;
}

.single-product.woocommerce.product-type-simple .bf-pdp .bf-purchase-panel__trust.bf-hero-trust-group,
.single-product.woocommerce.product-type-simple .bf-pdp .bf-hero-trust-group.bf-purchase-panel__trust {
  margin-bottom: 0 !important;
}

.single-product.woocommerce.product-type-simple .bf-pdp .bf-purchase-panel__cart {
  margin-top: 0 !important;
}

/* ==========================================================================
   Sprint 4P-REVIEW-MOCKUP — customer-proof card grid (last wins)
   ========================================================================== */

.single-product .bf-pdp .bf-customer-proof {
  margin: 0;
}

.single-product .bf-pdp .bf-customer-proof__shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.single-product .bf-pdp .bf-customer-proof__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title link"
    "filters filters";
  align-items: center;
  gap: 10px var(--bf-space-3);
  margin-bottom: var(--bf-space-3);
}

.single-product .bf-pdp .bf-customer-proof__title {
  grid-area: title;
  margin: 0;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-customer-proof__filters {
  grid-area: filters;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-2);
}

.single-product .bf-pdp .bf-customer-proof__filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px var(--bf-space-3);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-elevated);
  color: var(--bf-text-primary);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.single-product .bf-pdp .bf-customer-proof__filter:hover {
  border-color: var(--bf-border-strong-dark-ready);
}

.single-product .bf-pdp .bf-customer-proof__filter.is-active {
  border-color: var(--bf-color-red);
  color: var(--bf-color-red);
  background: var(--bf-surface-elevated);
}

.single-product .bf-pdp .bf-customer-proof__filter-icon {
  display: inline-flex;
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-customer-proof__view-all {
  grid-area: link;
  justify-self: end;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  color: var(--bf-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.single-product .bf-pdp .bf-customer-proof__view-all:hover {
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-customer-proof__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-2) 10px;
  margin: 0 0 var(--bf-space-3);
}

.single-product .bf-pdp .bf-customer-proof__score {
  font-size: 22px;
  font-weight: var(--bf-weight-black);
  line-height: 1;
}

.single-product .bf-pdp .bf-customer-proof__stars .star-rating {
  font-size: var(--bf-text-sm);
}

.single-product .bf-pdp .bf-customer-proof__count {
  font-size: var(--bf-text-xs);
  color: var(--bf-text-secondary);
}

.single-product .bf-pdp .bf-review-cards {
  overflow: hidden;
}

.single-product .bf-pdp .bf-review-cards__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 200px);
  gap: var(--bf-space-3);
  overflow-x: auto;
  padding-bottom: var(--bf-space-1);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.single-product .bf-pdp .bf-review-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 248px;
  padding: 10px;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-elevated);
}

.single-product .bf-pdp .bf-review-card.is-filter-hidden,
.single-product .bf-pdp .bf-review-card.is-limit-hidden,
.single-product .bf-pdp .bf-review-card.is-hidden {
  display: none !important;
}

.single-product .bf-pdp .bf-review-card--text {
  min-height: 180px;
  padding-top: var(--bf-space-3);
}

.single-product .bf-pdp .bf-review-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--bf-space-2);
  background: #111;
}

.single-product .bf-pdp .bf-review-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.single-product .bf-pdp .bf-review-card__thumb--fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2d2d2d 0%, #111 100%);
}

.single-product .bf-pdp .bf-review-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}

.single-product .bf-pdp .bf-review-card__play svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.single-product .bf-pdp .bf-review-card__duration {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: var(--bf-radius-xs);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-bold);
  line-height: 1.2;
}

.single-product .bf-pdp .bf-review-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.single-product .bf-pdp .bf-review-card__stars {
  margin-bottom: 6px;
}

.single-product .bf-pdp .bf-review-card__stars .star-rating {
  font-size: var(--bf-text-sm);
}

.single-product .bf-pdp .bf-review-card__text {
  margin: 0 0 10px;
  font-size: var(--bf-text-xs);
  line-height: 1.45;
  color: var(--bf-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-product .bf-pdp .bf-review-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.single-product .bf-pdp .bf-review-card__avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  line-height: 0;
}

.single-product .bf-pdp .bf-review-card__avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.single-product .bf-pdp .bf-review-card__author {
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-bold);
  color: var(--bf365-success);
}

.single-product .bf-pdp .bf-customer-proof__empty-wrap {
  padding: var(--bf-space-5) var(--bf-space-2);
  text-align: center;
}

.single-product .bf-pdp .bf-customer-proof__empty {
  margin: 0;
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: var(--bf-text-secondary);
}

@media (min-width: 768px) {
  .single-product .bf-pdp .bf-customer-proof__header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
    grid-template-areas: "title filters link";
    gap: var(--bf-space-3) var(--bf-space-4);
  }

  .single-product .bf-pdp .bf-customer-proof__filters {
    justify-content: center;
  }

  .single-product .bf-pdp .bf-review-cards__track {
    grid-auto-columns: minmax(180px, 220px);
  }
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-customer-proof__view-all {
    font-size: var(--bf-text-2xs);
  }

  .single-product .bf-pdp .bf-customer-proof__filter {
    font-size: var(--bf-text-2xs);
    padding: 5px 10px;
  }
}

/* ── Sprint 4R-PRODUCT-DESCRIPTION-TABS ──────────────────────────────────── */

.single-product .bf-pdp .bf-product-story {
  margin-top: 0;
}

.single-product .bf-pdp .bf-product-story__card {
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--bf-shadow-soft, 0 8px 24px var(--bf-shadow-color));
}

/*
 * When the card holds nothing but a picture, the card shrinks to the picture.
 *
 * fit-content on the body was only half the job: the body stopped being
 * 1328px wide, but the bordered card around it did not, so a 600px photo
 * still sat inside a full-width box with 346px of empty card on each side.
 * Shrinking the card itself is what closes it — the border now traces the
 * image instead of the column.
 *
 * :has() rather than a modifier class on the card, because the state lives on
 * the body: product-description-tabs.php:31 adds --media-only there, and the
 * card is written before the branch that decides it. A class would mean
 * touching the template for something CSS can already see.
 */
.single-product .bf-pdp .bf-product-story__card:has(.bf-product-story__body--media-only) {
  max-width: fit-content;
  margin-inline: auto;
}

.single-product .bf-pdp .bf-product-story__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bf-border-default);
  padding: 0 var(--bf-space-3);
}

.single-product .bf-pdp .bf-product-story__tabs::-webkit-scrollbar {
  display: none;
}

.single-product .bf-pdp .bf-product-story__tab {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px var(--bf-space-4) var(--bf-space-3);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--bf-text-primary);
  font: inherit;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.single-product .bf-pdp .bf-product-story__tab:hover {
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-product-story__tab.is-active,
.single-product .bf-pdp .bf-product-story__tab[aria-selected="true"] {
  color: var(--bf-color-red);
  border-bottom-color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-product-story__tabs--single {
  padding: 14px 18px 0;
  border-bottom: 1px solid var(--bf-border-default);
  overflow: visible;
}

.single-product .bf-pdp .bf-product-story__tabs--single .bf-product-story__tab {
  display: inline-block;
  margin: 0;
  padding: 0 0 var(--bf-space-3);
  cursor: default;
  font: inherit;
}

.single-product .bf-pdp .bf-product-story__body {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  gap: var(--bf-space-6);
  align-items: start;
  padding: var(--bf-space-5) 18px 22px;
}

.single-product .bf-pdp .bf-product-story__body--no-media {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * No max-width when the card holds nothing but the image.
 *
 * 55 of 256 products have an empty description, and for those the card
 * rendered as a 1328px bordered box containing one 484px image floated in
 * the middle with 404px of nothing on each side and no heading to explain
 * it. Letting the image use the width it is given turns a hole into a
 * picture.
 */
.single-product .bf-pdp .bf-product-story__body--media-only {
  grid-template-columns: minmax(0, 1fr);
  /*
   * fit-content, not a number. The old 520px cap left 404px of empty card on
   * each side of the image, but simply deleting it was worse: the picture
   * stretched to 1290px from an 840px source, a 1.54x upscale, and the card
   * grew to 1012px tall. fit-content makes the card exactly as wide as the
   * image actually is, whatever that image is, and never wider than the
   * space available.
   */
  max-width: fit-content;
  margin-inline: auto;
}

/*
 * And the image keeps its own proportions here.
 *
 * The ratio has to come off .bf-product-story__media-CARD, which is the
 * element that actually carries aspect-ratio: 4/3 and overflow: hidden. An
 * earlier version of this rule targeted .bf-product-story__media, the plain
 * wrapper, whose aspect-ratio is auto to begin with — so it changed nothing
 * while the sibling rule freed the image to its natural 840x840. The card
 * stayed 840x630 and quietly ate the bottom 210px, a clean 25% of every
 * picture, on all 55 products with an empty description. The scale check said
 * 1.0 the whole time: the image was not stretched, it was cut.
 *
 * object-fit: contain rather than the inherited cover, for the same reason.
 */
.single-product .bf-pdp .bf-product-story__body--media-only .bf-product-story__media-card {
  aspect-ratio: auto;
}

.single-product .bf-pdp .bf-product-story__body--media-only .bf-product-story__media-img {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  margin-inline: auto;
}

.single-product .bf-pdp .bf-product-story__content {
  min-width: 0;
}

.single-product .bf-pdp .bf-product-story__panel[hidden] {
  display: none !important;
}

.single-product .bf-pdp .bf-product-story__text {
  font-size: var(--bf-text-sm);
  line-height: 1.7;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-product-story__text p {
  margin: 0 0 var(--bf-space-3);
}

.single-product .bf-pdp .bf-product-story__text p:last-child {
  margin-bottom: 0;
}

.single-product .bf-pdp .bf-product-story__text strong {
  font-weight: var(--bf-weight-black);
}

.single-product .bf-pdp .bf-product-story__list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--bf-text-sm);
  line-height: 1.65;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-product-story__list li {
  margin-bottom: var(--bf-space-2);
}

.single-product .bf-pdp .bf-product-story__list li::marker {
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-product-story__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-3) 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.single-product .bf-pdp .bf-product-story__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  max-width: 110px;
  text-align: center;
}

.single-product .bf-pdp .bf-product-story__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-product-story__chip-label {
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.35;
  color: var(--bf-text-secondary);
}

.single-product .bf-pdp .bf-product-story__media {
  min-width: 0;
}

.single-product .bf-pdp .bf-product-story__media-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bf-surface-media);
  aspect-ratio: 4 / 3;
}

.single-product .bf-pdp .bf-product-story__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-product .bf-pdp .bf-product-story__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: background 0.15s ease;
}

.single-product .bf-pdp .bf-product-story__play:hover {
  background: rgba(0, 0, 0, 0.18);
}

.single-product .bf-pdp .bf-product-story__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bf-text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (max-width: 991px) {
  .single-product .bf-pdp .bf-product-story__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: var(--bf-space-4) 14px 18px;
  }

  .single-product .bf-pdp .bf-product-story__media {
    order: 2;
  }

  .single-product .bf-pdp .bf-product-story__content {
    order: 1;
  }

  .single-product .bf-pdp .bf-product-story__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bf-space-3);
  }

  .single-product .bf-pdp .bf-product-story__chip {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-product-story__card {
    border-radius: 14px;
  }

  /* Mobile tabs become individual pills: still native tab buttons, no JS fork. */
  .single-product .bf-pdp .bf-product-story__tabs {
    gap: var(--bf-space-2);
    padding: var(--bf-space-3);
    border-bottom: 0;
  }

  .single-product .bf-pdp .bf-product-story__tab {
    font-size: var(--bf-text-2xs);
    padding: 8px var(--bf-space-3);
    border: 1px solid var(--bf-border-default);
    border-radius: var(--bf-radius-pill);
    background: var(--bf-surface-muted);
  }

  .single-product .bf-pdp .bf-product-story__tab.is-active,
  .single-product .bf-pdp .bf-product-story__tab[aria-selected="true"] {
    border-color: var(--bf-color-red);
    background: var(--bf-color-red);
    color: var(--bf-on-primary);
  }

  .single-product .bf-pdp .bf-product-story__text,
  .single-product .bf-pdp .bf-product-story__list {
    font-size: var(--bf-text-sm);
  }
}

/* ── Sprint 4S-PRODUCT-INFO-CARD ─────────────────────────────────────────── */

.single-product .bf-pdp .bf-product-info-card {
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  padding: 26px var(--bf-space-6) 22px;
  box-shadow: var(--bf-shadow-soft, 0 8px 24px var(--bf-shadow-color));
  min-width: 0;
}

.single-product .bf-pdp .bf-product-info-card__title {
  margin: 0 0 var(--bf-space-4);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-product-info-card__empty {
  margin: 0;
  padding: var(--bf-space-3) 14px;
  font-size: var(--bf-text-sm);
  line-height: 1.55;
  color: var(--bf-text-secondary);
  background: var(--bf-surface-muted);
  border-radius: 10px;
}

.single-product .bf-pdp .bf-product-info-card__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.single-product .bf-pdp .bf-product-info-card__row {
  display: grid;
  grid-template-columns: minmax(108px, 44%) minmax(0, 1fr);
  gap: 10px 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px dotted var(--bf-border-default);
}

.single-product .bf-pdp .bf-product-info-card__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.single-product .bf-pdp .bf-product-info-card__extra .bf-product-info-card__row:first-child {
  padding-top: 11px;
  border-top: 1px dotted var(--bf-border-default);
}

.single-product .bf-pdp .bf-product-info-card__label {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.45;
  color: var(--bf-text-secondary);
}

.single-product .bf-pdp .bf-product-info-card__label::after {
  content: ':';
}

.single-product .bf-pdp .bf-product-info-card__value {
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  line-height: 1.45;
  color: var(--bf-text-primary);
  word-break: break-word;
}

.single-product .bf-pdp .bf-product-info-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bf-text-primary);
  font: inherit;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
}

.single-product .bf-pdp .bf-product-info-card__toggle:hover {
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-product-info-card__toggle-arrow {
  transition: transform 0.15s ease;
}

.single-product .bf-pdp .bf-product-info-card.is-expanded .bf-product-info-card__toggle-arrow {
  transform: rotate(90deg);
}

.single-product .bf-pdp .bf-pdp__row--3 > .bf-product-info-card {
  padding: 18px var(--bf-space-4) var(--bf-space-4);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-product-info-card__title {
  font-size: var(--bf-text-2xs);
  margin-bottom: var(--bf-space-3);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-product-info-card__label,
.single-product .bf-pdp .bf-pdp__row--3 .bf-product-info-card__value {
  font-size: var(--bf-text-2xs);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-product-info-card__row {
  padding: var(--bf-space-2) 0;
  grid-template-columns: minmax(88px, 46%) minmax(0, 1fr);
  gap: var(--bf-space-2) 10px;
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-product-info-card__toggle {
  font-size: var(--bf-text-2xs);
  margin-top: 10px;
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-product-info-card {
    padding: 18px var(--bf-space-4) var(--bf-space-4);
    border-radius: 16px;
  }

  .single-product .bf-pdp .bf-product-info-card__title {
    font-size: var(--bf-text-xs);
    margin-bottom: 14px;
  }

  .single-product .bf-pdp .bf-product-info-card__label,
  .single-product .bf-pdp .bf-product-info-card__value {
    font-size: var(--bf-text-sm);
  }
}

@media (max-width: 479px) {
  .single-product .bf-pdp .bf-product-info-card__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bf-space-1);
    padding: 10px 0;
  }

  .single-product .bf-pdp .bf-product-info-card__value {
    padding-left: 0;
  }
}

/* ── Sprint 4T-PRODUCT-EXPERT-REVIEW-CARD ──────────────────────────────── */

.single-product .bf-pdp .bf-expert-review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  padding: 26px var(--bf-space-6) 22px;
  box-shadow: var(--bf-shadow-soft, 0 8px 24px var(--bf-shadow-color));
  min-width: 0;
}

.single-product .bf-pdp .bf-expert-review-card__title {
  margin: 0 0 14px;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-expert-review-card__empty {
  margin: auto 0;
  padding: var(--bf-space-3) 14px;
  font-size: var(--bf-text-sm);
  line-height: 1.55;
  color: var(--bf-text-secondary);
  text-align: center;
  background: var(--bf-surface-muted);
  border-radius: 10px;
}

.single-product .bf-pdp .bf-expert-review-card__intro {
  margin: 0 0 var(--bf-space-4);
  font-size: var(--bf-text-sm);
  line-height: 1.65;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-expert-review-card__intro p {
  margin: 0 0 10px;
}

.single-product .bf-pdp .bf-expert-review-card__intro p:last-child {
  margin-bottom: 0;
}

.single-product .bf-pdp .bf-expert-review-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.single-product .bf-pdp .bf-expert-review-card__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.single-product .bf-pdp .bf-expert-review-card__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  line-height: 0;
}

.single-product .bf-pdp .bf-expert-review-card__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.single-product .bf-pdp .bf-expert-review-card__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.5;
  color: var(--bf-text-primary);
  word-break: break-word;
}

.single-product .bf-pdp .bf-expert-review-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--bf-space-1);
  color: var(--bf-text-primary);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease;
}

.single-product .bf-pdp .bf-expert-review-card__cta:hover {
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-expert-review-card__cta-arrow {
  transition: transform 0.15s ease;
}

.single-product .bf-pdp .bf-expert-review-card__cta:hover .bf-expert-review-card__cta-arrow {
  transform: translateX(2px);
}

.single-product .bf-pdp .bf-pdp__row--3 > .bf-expert-review-card {
  padding: 18px var(--bf-space-4) var(--bf-space-4);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-expert-review-card__title {
  font-size: var(--bf-text-2xs);
  margin-bottom: var(--bf-space-3);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-expert-review-card__intro {
  font-size: var(--bf-text-xs);
  margin-bottom: var(--bf-space-3);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-expert-review-card__list {
  gap: 10px;
  margin-bottom: 14px;
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-expert-review-card__text {
  font-size: var(--bf-text-2xs);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-expert-review-card__cta {
  font-size: var(--bf-text-2xs);
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-expert-review-card {
    padding: 18px var(--bf-space-4) var(--bf-space-4);
    border-radius: 16px;
  }

  .single-product .bf-pdp .bf-expert-review-card__title {
    font-size: var(--bf-text-xs);
  }

  .single-product .bf-pdp .bf-expert-review-card__intro {
    font-size: var(--bf-text-sm);
  }

  .single-product .bf-pdp .bf-expert-review-card__text {
    font-size: var(--bf-text-sm);
  }
}

/* ── Sprint 4U-PRODUCT-COMPARISON-CARD ───────────────────────────────────── */

.single-product .bf-pdp .bf-comparison-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-lg);
  padding: 26px var(--bf-space-6) 22px;
  box-shadow: var(--bf-shadow-soft, 0 8px 24px var(--bf-shadow-color));
  min-width: 0;
}

.single-product .bf-pdp .bf-comparison-card__title {
  margin: 0 0 var(--bf-space-4);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-comparison-card__head {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bf-space-2) var(--bf-space-3);
  align-items: start;
  margin-bottom: 18px;
  position: relative;
}

.single-product .bf-pdp .bf-comparison-card__head-spacer {
  display: block;
  min-width: 0;
}

.single-product .bf-pdp .bf-comparison-card__product {
  min-width: 0;
  text-align: center;
}

.single-product .bf-pdp .bf-comparison-card__product--current {
  grid-column: 2;
  grid-row: 1;
  padding-right: var(--bf-space-5);
}

.single-product .bf-pdp .bf-comparison-card__product--compare {
  grid-column: 3;
  grid-row: 1;
  padding-left: var(--bf-space-5);
}

.single-product .bf-pdp .bf-comparison-card__name {
  margin: 0 0 6px;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.35;
  color: var(--bf-text-primary);
  word-break: break-word;
}

.single-product .bf-pdp .bf-comparison-card__price {
  margin: 0;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.35;
}

.single-product .bf-pdp .bf-comparison-card__price-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--bf-space-1) 6px;
}

.single-product .bf-pdp .bf-comparison-card__price-regular,
.single-product .bf-pdp .bf-comparison-card__price-regular del,
.single-product .bf-pdp .bf-comparison-card__price-wrap--woo del {
  color: var(--bf-text-secondary);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  text-decoration: line-through;
}

.single-product .bf-pdp .bf-comparison-card__price-sale,
.single-product .bf-pdp .bf-comparison-card__price-current,
.single-product .bf-pdp .bf-comparison-card__price-wrap--woo ins,
.single-product .bf-pdp .bf-comparison-card__price-wrap--woo .woocommerce-Price-amount {
  color: var(--bf-color-red);
  font-weight: var(--bf-weight-black);
  text-decoration: none;
}

.single-product .bf-pdp .bf-comparison-card__price-wrap--woo .price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--bf-space-1) 6px;
  margin: 0;
}

.single-product .bf-pdp .bf-comparison-card__vs {
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  pointer-events: none;
  z-index: 1;
}

.single-product .bf-pdp .bf-comparison-card__vs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bf-text-primary);
  color: var(--bf-on-primary);
  font-size: var(--bf-text-2xs);
  font-weight: var(--bf-weight-black);
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 4px var(--bf-surface-elevated);
}

.single-product .bf-pdp .bf-comparison-card__matrix {
  min-width: 0;
}

.single-product .bf-pdp .bf-comparison-card__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--bf-space-4);
}

.single-product .bf-pdp .bf-comparison-card__row {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bf-space-2) var(--bf-space-3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--bf-border-default);
}

.single-product .bf-pdp .bf-comparison-card__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.single-product .bf-pdp .bf-comparison-card__label {
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-semibold);
  line-height: 1.4;
  color: var(--bf-text-secondary);
  text-align: left;
}

.single-product .bf-pdp .bf-comparison-card__value {
  min-width: 0;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  line-height: 1.45;
  color: var(--bf-text-primary);
  text-align: center;
  word-break: break-word;
}

.single-product .bf-pdp .bf-comparison-card__value--current {
  padding-right: var(--bf-space-2);
  border-right: 1px solid var(--bf-border-default);
}

.single-product .bf-pdp .bf-comparison-card__value--compare {
  padding-left: var(--bf-space-2);
}

.single-product .bf-pdp .bf-comparison-card__empty {
  color: var(--bf-text-secondary);
  font-weight: var(--bf-weight-semibold);
}

.single-product .bf-pdp .bf-comparison-card__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-1);
  width: 100%;
}

.single-product .bf-pdp .bf-comparison-card__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}

.single-product .bf-pdp .bf-comparison-card__dot--is-filled {
  background: var(--bf-text-primary);
}

.single-product .bf-pdp .bf-comparison-card__dot--is-empty {
  background: transparent;
  border: 1.5px solid var(--bf-border-strong-dark-ready);
}

.single-product .bf-pdp .bf-comparison-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--bf-space-1);
  border: 0;
  color: var(--bf-text-primary);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease;
}

.single-product .bf-pdp .bf-comparison-card__cta:hover {
  color: var(--bf-color-red);
}

.single-product .bf-pdp .bf-comparison-card__cta:focus {
  outline: none;
}

.single-product .bf-pdp .bf-comparison-card__cta:focus-visible {
  outline: 2px solid var(--bf-color-red);
  outline-offset: 3px;
  border-radius: var(--bf-radius-sm);
}

.single-product .bf-pdp .bf-comparison-card__cta-arrow {
  transition: transform 0.15s ease;
}

.single-product .bf-pdp .bf-comparison-card__cta:hover .bf-comparison-card__cta-arrow {
  transform: translateX(2px);
}

.single-product .bf-pdp .bf-pdp__row--3 > .bf-comparison-card {
  padding: 18px var(--bf-space-4) var(--bf-space-4);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__head {
  grid-template-columns: minmax(88px, 0.75fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px var(--bf-space-2);
  margin-bottom: var(--bf-space-3);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__title {
  font-size: var(--bf-text-2xs);
  margin-bottom: var(--bf-space-3);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__name {
  font-size: var(--bf-text-xs);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__price,
.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__price-regular,
.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__price-regular del {
  font-size: var(--bf-text-2xs);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__product--current {
  padding-right: 14px;
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__product--compare {
  padding-left: 14px;
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__vs-badge {
  width: 28px;
  height: 28px;
  font-size: var(--bf-text-2xs);
  box-shadow: 0 0 0 3px var(--bf-surface-elevated);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__row {
  grid-template-columns: minmax(88px, 0.75fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px var(--bf-space-2);
  padding: var(--bf-space-2) 0;
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__label,
.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__value {
  font-size: var(--bf-text-2xs);
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__dot {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
}

.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__cta {
  font-size: var(--bf-text-2xs);
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-comparison-card {
    padding: 18px var(--bf-space-5) var(--bf-space-5);
    border-radius: 16px;
    overflow-x: hidden;
    max-width: 100%;
  }

  .single-product .bf-pdp .bf-comparison-card__matrix {
    overflow-x: hidden;
    max-width: 100%;
  }

  .single-product .bf-pdp .bf-comparison-card__title {
    font-size: var(--bf-text-xs);
    margin-bottom: 14px;
  }

  .single-product .bf-pdp .bf-comparison-card__head {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: var(--bf-space-2) 10px;
    margin-bottom: var(--bf-space-4);
    position: static;
  }

  .single-product .bf-pdp .bf-comparison-card__head-spacer {
    display: none;
  }

  .single-product .bf-pdp .bf-comparison-card__product {
    min-width: 0;
  }

  .single-product .bf-pdp .bf-comparison-card__product--current {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .single-product .bf-pdp .bf-comparison-card__product--compare {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0;
  }

  .single-product .bf-pdp .bf-comparison-card__vs {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    padding-top: 0;
    margin: 0;
    z-index: auto;
    pointer-events: none;
  }

  .single-product .bf-pdp .bf-comparison-card__vs-badge {
    width: 42px;
    height: 42px;
    font-size: var(--bf-text-2xs);
    box-shadow: 0 0 0 3px var(--bf-surface-elevated);
    flex-shrink: 0;
  }

  .single-product .bf-pdp .bf-comparison-card__name {
    font-size: 17px;
    line-height: 1.22;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  .single-product .bf-pdp .bf-comparison-card__price {
    font-size: var(--bf-text-sm);
    text-align: center;
  }

  .single-product .bf-pdp .bf-comparison-card__price-wrap {
    justify-content: center;
    max-width: 100%;
  }

  .single-product .bf-pdp .bf-comparison-card__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px var(--bf-space-3);
    align-items: center;
    padding: var(--bf-space-3) 0;
    border-bottom: 1px solid var(--bf-border-default);
  }

  .single-product .bf-pdp .bf-comparison-card__label {
    grid-column: 1 / -1;
    margin-bottom: var(--bf-space-1);
    font-size: var(--bf-text-xs);
  }

  .single-product .bf-pdp .bf-comparison-card__value {
    font-size: var(--bf-text-xs);
    text-align: center;
  }

  .single-product .bf-pdp .bf-comparison-card__value--current {
    grid-column: 1;
    padding-right: var(--bf-space-2);
    border-right: 1px solid var(--bf-border-default);
  }

  .single-product .bf-pdp .bf-comparison-card__value--compare {
    grid-column: 2;
    padding-left: var(--bf-space-2);
  }

  .single-product .bf-pdp .bf-comparison-card__dots {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }

  .single-product .bf-pdp .bf-comparison-card__cta {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: var(--bf-text-sm);
  }

  .single-product .bf-pdp .bf-pdp__row--3 > .bf-comparison-card {
    padding: 18px var(--bf-space-4) var(--bf-space-4);
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__head {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 6px var(--bf-space-2);
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__name {
    font-size: var(--bf-text-base);
    line-height: 1.22;
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__price,
  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__price-regular,
  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__price-regular del {
    font-size: var(--bf-text-2xs);
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__product--current,
  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__product--compare {
    padding-left: 0;
    padding-right: 0;
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__vs {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__vs-badge {
    width: 36px;
    height: 36px;
    font-size: var(--bf-text-2xs);
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bf-space-2) 10px;
    padding: 10px 0;
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__label,
  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__value {
    font-size: var(--bf-text-2xs);
  }
}

@media (max-width: 420px) {
  .single-product .bf-pdp .bf-comparison-card {
    padding: var(--bf-space-4) 14px 18px;
  }

  .single-product .bf-pdp .bf-comparison-card__head {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: 6px var(--bf-space-2);
  }

  .single-product .bf-pdp .bf-comparison-card__vs-badge {
    width: 38px;
    height: 38px;
    font-size: var(--bf-text-2xs);
  }

  .single-product .bf-pdp .bf-comparison-card__name {
    font-size: var(--bf-text-base);
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__name {
    font-size: var(--bf-text-sm);
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__head {
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  }

  .single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__vs-badge {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   Sprint 5E-PDP-TRUST-METRICS-ROW-REFINE — single horizontal strip (last wins)
   ========================================================================== */

.single-product .bf-pdp .bf-hero-trust-row.bf-hero-trust.bf-trust-metrics {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bf-border-default) !important;
  border-radius: 14px !important;
  background: var(--bf-surface-elevated) !important;
  overflow: hidden !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  grid-template-columns: none !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust-row__item,
.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  min-height: 88px !important;
  max-height: none !important;
  height: auto !important;
  padding: 14px var(--bf-space-3) !important;
  gap: 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-right: 1px solid var(--bf-border-default) !important;
  border-left: none !important;
  border-top: none !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:last-child {
  border-right: 0 !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item + .bf-hero-trust__item {
  border-left: none !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__top {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--bf-space-2) !important;
  flex-wrap: nowrap !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  color: var(--bf365-success) !important;
  line-height: 0 !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__icon-svg,
.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__value,
.single-product .bf-pdp .bf-hero-trust-row .bf-trust-metrics__stat.bf-hero-trust__value,
.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:first-child .bf-hero-trust__value,
.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:nth-child(2) .bf-hero-trust__value,
.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:nth-child(3) .bf-hero-trust__value,
.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:nth-child(4) .bf-hero-trust__value,
.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:last-child .bf-hero-trust__value {
  font-size: var(--bf-text-lg) !important;
  font-weight: var(--bf-weight-black) !important;
  color: var(--bf-text-primary) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: normal !important;
}

.single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__label,
.single-product .bf-pdp .bf-hero-trust-row .bf-trust-metrics__label.bf-hero-trust__label {
  display: block !important;
  margin-top: 0 !important;
  font-size: var(--bf-text-xs) !important;
  font-weight: var(--bf-weight-semibold) !important;
  color: var(--bf-text-secondary) !important;
  line-height: 1.3 !important;
}

@media (min-width: 768px) {
  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust-row__item,
  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item {
    min-height: 92px !important;
    padding: var(--bf-space-4) 14px !important;
  }

  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__icon-svg,
  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__value,
  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:last-child .bf-hero-trust__value {
    font-size: var(--bf-text-xl) !important;
  }

}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-hero-trust-row.bf-hero-trust.bf-trust-metrics {
    flex-wrap: wrap !important;
  }

  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust-row__item,
  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item {
    flex: 1 1 calc(50% - 0px) !important;
    min-height: 80px !important;
    padding: var(--bf-space-3) 10px !important;
    border-right: 1px solid var(--bf-border-default) !important;
    border-top: none !important;
  }

  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:nth-child(2n) {
    border-right: 0 !important;
  }

  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:nth-child(n + 3) {
    border-top: 1px solid var(--bf-border-default) !important;
  }

  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__value,
  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__item:last-child .bf-hero-trust__value {
    font-size: 17px !important;
  }


  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__icon-svg,
  .single-product .bf-pdp .bf-hero-trust-row .bf-hero-trust__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ==========================================================================
   Sprint 5G — Mobile size selector refine (≤767px only; desktop untouched)
   ========================================================================== */

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector {
    margin-bottom: 0;
    padding: 14px var(--bf-space-4);
    background: var(--bf-surface-elevated);
    border: 1px solid var(--bf-border-default);
    border-radius: 16px;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__header,
  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__head {
    display: block !important;
    margin-bottom: 10px !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__label-desktop {
    display: none !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__label-mobile {
    display: inline !important;
    font-size: var(--bf-text-sm) !important;
    font-weight: var(--bf-weight-bold) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--bf-text-primary) !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-link--header {
    display: none !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--bf-space-2) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -2px;
    padding: 2px 2px var(--bf-space-1);
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-grid::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  /*
   * 11 of the 12 declarations that used to sit here were dead code and have
   * been removed. They lost to the block at (max-width: 1023px) above, which
   * is MORE specific: that selector is
   *   .single-product.woocommerce .bf-pdp .bf-purchase-panel__size .bf-size-option
   * = (0,5,0), against (0,4,0) here, and body carries .woocommerce on every
   * product page (verified in the browser, not assumed). Both blocks are
   * !important, so specificity decided it and this one never won: measured at
   * 390 and 414 the size button renders 52px tall, 10px radius, 19px text --
   * the other block's numbers, never the 46px / 11px / 18px declared here.
   * The (max-width: 1023px) block is also the ONLY one that applies in the
   * 768-1023px band, so nothing here ever ran at any width.
   *
   * `flex: 0 0 auto` is the one declaration that survives, and it is load-
   * bearing: the block above never sets flex, and this grid becomes a
   * horizontal scroller on mobile. Without it the buttons are flex items with
   * the default flex-shrink: 1, so they would silently SHRINK to fit instead
   * of overflowing into the scroller -- no scrollbar, no error, just smaller
   * buttons. Same trap already documented for the PDP thumbnail rail.
   */
  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-option {
    flex: 0 0 auto !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-option__badge {
    font-size: var(--bf-text-2xs) !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-selected,
  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-low-stock.is-selected {
    border-color: var(--bf365-success) !important;
    background: var(--bf365-success) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-selected .bf-size-option__badge,
  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-option.is-low-stock.is-selected .bf-size-option__badge {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-urgency {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    font-size: var(--bf-text-sm) !important;
    font-weight: var(--bf-weight-bold) !important;
    line-height: 1.35 !important;
    color: var(--bf365-red) !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-urgency[hidden] {
    display: none !important;
    margin: 0 !important;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-cta {
    display: flex;
    align-items: center;
    gap: var(--bf-space-3);
    width: 100%;
    margin-top: var(--bf-space-3);
    padding: var(--bf-space-3) 0 0;
    border: 0;
    border-top: 1px solid var(--bf-border-default);
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-cta-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--bf-text-primary);
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-cta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-cta-title {
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-black);
    line-height: 1.25;
    color: var(--bf-text-primary);
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-cta-link {
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-semibold);
    line-height: 1.3;
    color: var(--bf-color-red);
  }

  .single-product .bf-pdp .bf-purchase-panel__size .bf-size-selector__guide-cta-arrow {
    flex: 0 0 auto;
    font-size: var(--bf-text-lg);
    line-height: 1;
    color: var(--bf-text-secondary);
  }
}

/* ==========================================================================
   Sprint 5H — PDP product alert modal
   ========================================================================== */

body.bf-product-alert-open {
  overflow: hidden;
}

.bf-product-alert[hidden] {
  display: none !important;
}

.bf-product-alert {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bf-space-4);
}

.bf-product-alert__overlay {
  position: absolute;
  inset: 0;
  background: var(--bf-overlay);
}

.bf-product-alert__dialog {
  position: relative;
  width: min(420px, calc(100% - 32px));
  background: var(--bf-surface-elevated);
  border: 1px solid var(--bf-border-default);
  border-radius: 16px;
  padding: 22px var(--bf-space-5) 18px;
  box-shadow: 0 20px 40px var(--bf-shadow-color);
}

.bf-product-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--bf-space-3);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-red-soft);
  color: var(--bf-color-red);
}

.bf-product-alert__title {
  margin: 0 0 var(--bf-space-2);
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-black);
  line-height: 1.2;
  color: var(--bf-text-primary);
}

.bf-product-alert__message {
  margin: 0;
  font-size: var(--bf-text-sm);
  line-height: 1.55;
  color: var(--bf-text-secondary);
}

.bf-product-alert__actions {
  margin-top: 18px;
}

/*
 * product.js:912 injects class="bf-btn bf-btn--primary bf-product-alert__button",
 * so .bf-btn and .bf-btn--primary already supply every declaration this rule
 * used to restate. min-width and font-size are load-bearing: without them the
 * button collapses to ~94px and its size starts tracking Astra fluid body size
 * (14.6px mobile / 16px desktop).
 */
.bf-product-alert__button.bf-btn {
  width: 100%;
  min-width: 120px;
  font-size: var(--bf-text-sm);
}

@media (max-width: 767px) {
  .bf-product-alert__dialog {
    width: calc(100% - 32px);
    padding: var(--bf-space-5) 18px var(--bf-space-4);
  }

  .bf-product-alert__title {
    font-size: var(--bf-text-lg);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * BF365 PDP polish — section heading scale + recommendation rows
 * (appended last so it wins over earlier compact/small heading rules)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Section heading scale (BF365 rhythm, close to archive headings) ───── */
/* Full-width section headings via bf365_section_heading(): FAQ, cross-sell,
 * related, size guide. Sidebar keeps its compact label size (restored below). */
.single-product .bf-pdp .bf-section-heading {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: var(--bf-weight-black);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--bf-space-4);
}

/* Restore the compact sidebar heading label (unchanged from before). */
.single-product .bf-pdp__sidebar .bf-section-heading {
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin: 0 0 var(--bf-space-3);
}

/* "Khách hàng nói gì?" — matches the section scale. */
.single-product .bf-pdp .bf-customer-proof__title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: var(--bf-weight-black);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Card headings in the 3-up info row ("Thông tin sản phẩm", "Đánh giá chi
 * tiết", "So sánh nổi bật") — larger + consistent, still fit 3 columns. */
.single-product .bf-pdp .bf-product-info-card__title,
.single-product .bf-pdp .bf-expert-review-card__title,
.single-product .bf-pdp .bf-comparison-card__title,
.single-product .bf-pdp .bf-pdp__row--3 .bf-product-info-card__title,
.single-product .bf-pdp .bf-pdp__row--3 .bf-expert-review-card__title,
.single-product .bf-pdp .bf-pdp__row--3 .bf-comparison-card__title {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: var(--bf-weight-black);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 14px;
}

/* Standalone "So sánh nổi bật" placeholder (no comparison data available). */
.single-product .bf-pdp .bf-comparison-card--empty .bf-comparison-card__empty {
  margin: 0;
  padding: 14px var(--bf-space-4);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  line-height: 1.55;
  color: var(--bf-text-secondary);
  text-align: center;
  background: var(--bf-surface-muted);
  border-radius: 10px;
}

/* ── Recommendation rows: one horizontal scroll row each ───────────────── */
/* Stack the two recommendation sections so each spans full width as its own
 * single horizontal row (never a 2×2 grid). */
.single-product .bf-pdp .bf-pdp__row--2 {
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
}

.single-product .bf-pdp .bf-reco-track {
  display: flex !important;
  flex-wrap: nowrap;
  gap: var(--bf-space-3);
  margin-top: var(--bf-space-3);
  padding-bottom: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.single-product .bf-pdp .bf-reco-track .bf-product-card {
  flex: 0 0 calc((100% - 4 * 12px) / 5);
  min-width: 180px;
  max-width: none;
  scroll-snap-align: start;
}

.single-product .bf-pdp .bf-reco-track .bf-product-card[hidden] {
  display: none !important;
}

/* Full-width rows give room for a slightly larger card title. */
.single-product .bf-pdp .bf-reco-track .bf-product-card__title {
  font-size: var(--bf-text-sm);
}

@media (max-width: 1024px) {
  .single-product .bf-pdp .bf-reco-track .bf-product-card {
    flex-basis: calc((100% - 3 * 12px) / 4);
    min-width: 160px;
  }
}

@media (max-width: 767px) {
  .single-product .bf-pdp .bf-reco-track {
    scroll-snap-type: x mandatory;
  }
  .single-product .bf-pdp .bf-reco-track .bf-product-card {
    flex-basis: 46%;
    min-width: 150px;
  }
}

/* Recommendation section header: title left, "Xem tất cả" text button right. */
.single-product .bf-pdp .bf-reco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  margin: 0 0 var(--bf-space-4);
  flex-wrap: wrap;
}

.single-product .bf-pdp .bf-reco-header .bf-section-heading {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.single-product .bf-pdp .bf-reco-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  margin: 0;
  margin-left: auto;
  padding: 0 var(--bf-space-1);
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bf-color-red, #e60012);
  font-family: inherit;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-black);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.single-product .bf-pdp .bf-reco-toggle:hover {
  color: var(--bf-color-red-dark, #b8000e);
}

.single-product .bf-pdp .bf-reco-toggle:focus {
  outline: none;
}

.single-product .bf-pdp .bf-reco-toggle:focus-visible {
  outline: 2px solid var(--bf-color-red, #e60012);
  outline-offset: 3px;
  color: var(--bf-color-red, #e60012);
}

.single-product .bf-pdp .bf-reco-toggle[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .single-product .bf-pdp .bf-reco-toggle {
    transition: none;
  }
}

/* ── Reviews ("Khách hàng nói gì?") — button reset + filter/empty polish ── */

/* "Xem tất cả đánh giá" is now a real <button> — reset UA chrome. */
.single-product .bf-pdp .bf-customer-proof__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.single-product .bf-pdp .bf-customer-proof__view-all[hidden] {
  display: none;
}

.single-product .bf-pdp .bf-customer-proof__view-all-arrow {
  transition: transform 0.15s ease;
}

.single-product .bf-pdp .bf-customer-proof__view-all[aria-expanded="true"] .bf-customer-proof__view-all-arrow {
  transform: rotate(90deg);
}

/* Inactive filter hover → BF365 red (never blue). */
.single-product .bf-pdp .bf-customer-proof__filter:hover {
  border-color: var(--bf-color-red);
  color: var(--bf-color-red);
}

/* Active filter stays BF365 red outline (defined earlier); ensure no blue. */
.single-product .bf-pdp .bf-customer-proof__filter.is-active {
  border-color: var(--bf-color-red);
  color: var(--bf-color-red);
  background: var(--bf-surface-elevated);
}

/* Per-filter empty state — light BF365 card, muted text, no broken layout. */
.single-product .bf-pdp .bf-review-cards__empty {
  margin: var(--bf-space-3) 0 0;
  padding: var(--bf-space-4);
  font-size: var(--bf-text-sm);
  line-height: 1.55;
  color: var(--bf-text-secondary);
  text-align: center;
  background: var(--bf-surface-muted);
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-md);
}

.single-product .bf-pdp .bf-review-cards__empty[hidden] {
  display: none;
}

/*
 * The phone hero is square again, at the owner's call: 3/2 put the size grid
 * under 800px on all 30 products sampled, but it cost the photo. A square
 * source in a 3/2 frame 356px wide renders at 236.66px — 44% of the area it
 * had, with 59.7px of empty space each side — and that was too much to give
 * up for the scroll position.
 *
 * Where the size grid lands now, measured at 390px over 30 products:
 *
 *   1/1  877.7 - 917.7   <- this, accepted
 *   4/3  788.2 - 828.2
 *   3/2  758.4 - 798.4
 *
 * The 40px spread in each column is the product title wrapping to a second
 * line. If the grid ever has to come up again, that is the thing to shorten;
 * no gallery ratio recovers it.
 *
 * There is no media query here any more — the base rule's aspect-ratio: 1/1
 * applies at every width. The height fix on .bf-product-gallery__img stays
 * regardless: it is what keeps object-fit letterboxing instead of letting
 * overflow:hidden crop the photo, and that is true at any frame ratio.
 */

/* T2 xl step for the PDP purchase row.
 *
 * The wishlist button belongs to the icon role, and the icon role keeps its
 * height everywhere else in this pass. It is the ONE exception, and the reason
 * is layout, not role: these three buttons sit side by side on one row, so a
 * button that stays at 50/52 while its two neighbours go to 56 reads as a
 * mistake -- measured and looked at, the heart sat visibly low. A control that
 * shares a row follows the row.
 *
 * Its WIDTH is untouched (flex: 0 0 52px), so it stays a 52x56 icon button;
 * only the height joins the xl step.
 *
 * .bf-pdp-btn is still not listed by name: it is a shared class and naming it
 * would drag in any future button that borrows the shell. The three buttons on
 * this row are named one by one on purpose. */
@media (min-width: 1024px) {
  .single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-wishlist-btn,
  .single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-pdp-btn--icon {
    min-height: 56px;
    height: 56px;
  }
}

/* ========================================================================
   01b / Scool-look PDP purchase composition. BF365's real variation form,
   two CTAs and policy strings remain intact; this only ports the 7/5 frame,
   square media and compact decision-panel rhythm.
   ======================================================================== */
.single-product .bf-pdp { max-width: 1320px; }
.single-product .bf-pdp__hero { gap: 40px; align-items: start; }
.single-product .bf-pdp__gallery { min-width: 0; }
.single-product .bf-pdp .bf-product-gallery__main {
  overflow: hidden;
  border-radius: 20px;
  background: var(--bf-surface-media);
}
.single-product .bf-pdp .bf-product-gallery__img { aspect-ratio: 1 / 1; object-fit: cover; }
.single-product .bf-pdp .bf-product-gallery__thumbs { gap: 8px; margin-top: 8px; }
.single-product .bf-pdp .bf-product-gallery__thumb { border-radius: 8px; }
.single-product .bf-pdp .bf-product-summary { display: flex; flex-direction: column; gap: 8px; }
.single-product .bf-pdp .bf-product-summary__title { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.25; }
.single-product .bf-pdp .bf-purchase-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.single-product .bf-pdp .bf-purchase-panel__price .bf-price-block__sale { color: var(--bf-color-red) !important; }
.single-product .bf-pdp .bf-purchase-panel__actions { gap: 8px; }
.single-product.woocommerce .bf-pdp .bf-purchase-panel .single_add_to_cart_button {
  border-color: var(--bf-color-red);
  background: var(--bf-surface-elevated);
  color: var(--bf-color-red);
}
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button { background: var(--bf-color-red); border-color: var(--bf-color-red); }
.single-product.woocommerce .bf-pdp .bf-purchase-panel .bf-buy-now-button:hover:not(.disabled):not(:disabled) { background: var(--bf-color-red-dark) !important; border-color: var(--bf-color-red-dark) !important; }
.single-product .bf-pdp .bf-purchase-panel__trust { margin-top: 0; }
@media (min-width: 1024px) { .single-product .bf-pdp__hero { grid-template-columns: 7fr 5fr; } }
@media (max-width: 767px) {
  .single-product .bf-pdp__hero { gap: 24px; }
  .single-product .bf-pdp .bf-product-gallery__main { margin-inline: calc(-1 * var(--bf-gutter-mobile)); border-radius: 0; }
  .single-product .bf-pdp .bf-product-summary__title { font-size: 26px; }
  .single-product .bf-pdp .bf-purchase-panel { gap: 12px; }
}

/* 01b / Scool-look content cards: soft rectangular story card, red pills,
   and a true 2x2 mobile related grid (no fabricated review/sold modules). */
.single-product .bf-pdp__sections { gap: 40px; }
.single-product .bf-pdp .bf-product-story__card,
.single-product .bf-pdp .bf-related,
.single-product .bf-pdp .bf-cross-sell {
  border: 1px solid var(--bf-border-default);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(5, 5, 5, .05);
}
.single-product .bf-pdp .bf-product-story__tabs { gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--bf-border-default); }
.single-product .bf-pdp .bf-product-story__tab {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--bf-border-default);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-elevated);
  color: var(--bf-text-primary);
  font-size: 13px;
  font-weight: var(--bf-weight-bold);
}
.single-product .bf-pdp .bf-product-story__tab.is-active { border-color: var(--bf-color-red); background: var(--bf-color-red); color: var(--bf-on-primary); }
.single-product .bf-pdp .bf-product-story__panel[hidden],
.single-product .bf-pdp .bf-reco-track .bf-product-card[hidden] { display: none !important; }
.single-product .bf-pdp .bf-reco-track { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; overflow: visible; }
.single-product .bf-pdp .bf-reco-track .bf-product-card { min-width: 0; max-width: none; }
@media (max-width: 1023px) { .single-product .bf-pdp .bf-reco-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .single-product .bf-pdp__sections { gap: 28px; }
  .single-product .bf-pdp .bf-product-story__card,
  .single-product .bf-pdp .bf-related,
  .single-product .bf-pdp .bf-cross-sell { border-radius: 14px; padding: 14px; }
  .single-product .bf-pdp .bf-product-story__tabs { overflow-x: auto; flex-wrap: nowrap; }
  .single-product .bf-pdp .bf-reco-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}