/* tvs-store-sections.css — WooCommerce pages and the offers page: the shop
   grid and cards, the offers bundles, product-page reviews, related products,
   the cart block and the order handoff. Split out of tvs-professional-
   header.css by deploy-package/speed/split-header-css.php. */

/* ============================================================
   SHOP GRID — the catalogue now uses the same card anatomy as the
   home page plans: a cap band with a ghost numeral, a price block,
   a check list and a full-width CTA. Overrides the inline styles
   from tvstrong4k-smart-shop.php, which load earlier.
   ============================================================ */
.tvs-smart-shop ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: clamp(16px, 1.5vw, 24px) !important;
  width: min(var(--tvs-shell), 1240px);
  margin-inline: auto !important;
  padding: 0 !important;
  list-style: none;
}
.tvs-smart-shop ul.products::before,
.tvs-smart-shop ul.products::after { content: none !important; }

.tvs-smart-shop ul.products li.product {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 0 clamp(20px, 1.9vw, 26px) !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #161d28 0%, #0e131b 100%) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34) !important;
  transform: none !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tvs-smart-shop ul.products li.product:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 122, 0, .45) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 122, 0, .12) !important;
}
.tvs-smart-shop ul.products li.product.tvs-best-value {
  border-color: rgba(255, 122, 0, .55) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 122, 0, .18) !important;
}
.tvs-smart-shop ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none !important;
}

/* Cap band: the drawn "TV" is gone; a ghost numeral carries the duration. */
.tvs-smart-shop .tvs-plan-art {
  position: relative;
  height: auto !important;
  min-height: 118px;
  margin: 0 !important;
  padding: clamp(20px, 1.9vw, 26px) clamp(20px, 1.9vw, 26px) clamp(16px, 1.5vw, 20px) !important;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-block-end: 1px solid rgba(255, 255, 255, .07) !important;
  background:
    radial-gradient(120% 140% at 78% -20%, rgba(255, 122, 0, .16), transparent 60%),
    linear-gradient(180deg, #1b232f 0%, #141b25 100%) !important;
}
.tvs-smart-shop .tvs-plan-art::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: clamp(16px, 1.6vw, 24px);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .045);
  font: 900 clamp(76px, 7vw, 108px)/1 Cairo, system-ui, sans-serif;
  letter-spacing: -.04em;
  pointer-events: none;
}
.tvs-smart-shop .tvs-duration-3  .tvs-plan-art::before { content: "3"; }
.tvs-smart-shop .tvs-duration-6  .tvs-plan-art::before { content: "6"; }
.tvs-smart-shop .tvs-duration-12 .tvs-plan-art::before { content: "12"; }
.tvs-smart-shop .tvs-duration-15 .tvs-plan-art::before { content: "15"; }
.tvs-smart-shop .tvs-duration-24 .tvs-plan-art::before { content: "24"; }
.tvs-smart-shop .tvs-plan-art::after { content: none !important; }

.tvs-smart-shop .tvs-plan-duration {
  position: static !important;
  z-index: 1;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  color: #fff !important;
  font-size: clamp(24px, 2.1vw, 31px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.tvs-smart-shop .tvs-plan-status {
  position: absolute !important;
  inset-block-start: clamp(20px, 1.9vw, 26px);
  inset-inline-start: clamp(20px, 1.9vw, 26px);
  inset-block-end: auto !important;
  color: rgba(233, 238, 247, .45) !important;
  font-size: 11.5px !important;
}

/* Badge sits opposite the status line, matching the home page flag. */
.tvs-smart-shop .tvs-product-badge {
  position: absolute !important;
  inset-block-start: clamp(18px, 1.7vw, 24px) !important;
  inset-inline-end: clamp(18px, 1.7vw, 24px) !important;
  inset-inline-start: auto !important;
  z-index: 2;
  padding: 6px 13px !important;
  border: 1px solid rgba(255, 122, 0, .38) !important;
  border-radius: 999px !important;
  background: rgba(255, 122, 0, .14) !important;
  color: #ffa64d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}
.tvs-smart-shop .tvs-premium-combo .tvs-product-badge {
  border-color: rgba(255, 122, 0, .38) !important;
  background: rgba(255, 122, 0, .14) !important;
  color: #ffa64d !important;
}
.tvs-smart-shop .tvs-premium-combo .tvs-plan-art {
  background:
    radial-gradient(120% 140% at 78% -20%, rgba(255, 122, 0, .16), transparent 60%),
    linear-gradient(180deg, #1b232f 0%, #141b25 100%) !important;
}

/* Title is secondary to the duration — it repeats it, so it stays quiet. */
.tvs-smart-shop ul.products li.product .woocommerce-loop-product__title {
  order: 3;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(16px, 1.5vw, 20px) clamp(20px, 1.9vw, 26px) 0 !important;
  color: rgba(233, 238, 247, .5) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.6;
}

/* Price block */
.tvs-smart-shop ul.products li.product .price {
  order: 4;
  margin: 0 !important;
  padding: clamp(12px, 1.2vw, 16px) clamp(20px, 1.9vw, 26px) 0 !important;
  color: #fff !important;
  font-size: clamp(30px, 2.6vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
}
.tvs-smart-shop ul.products li.product .price .woocommerce-Price-currencySymbol {
  margin-inline: 0 8px;
  color: var(--tvs-accent);
  font-size: .46em;
  font-weight: 800;
  vertical-align: baseline;
}
.tvs-smart-shop ul.products li.product .price del { display: block; margin-block-start: 4px; opacity: .45; font-size: .42em; font-weight: 600; }
.tvs-smart-shop ul.products li.product .price ins { text-decoration: none; }
.tvs-smart-shop .tvs-price-caption {
  order: 5;
  padding: 8px clamp(20px, 1.9vw, 26px) 0 !important;
  color: rgba(233, 238, 247, .42) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* Feature list */
.tvs-smart-shop .tvs-plan-features {
  order: 6;
  margin: clamp(16px, 1.5vw, 20px) clamp(20px, 1.9vw, 26px) 0 !important;
  padding: clamp(16px, 1.5vw, 20px) 0 0 !important;
  border-block-start: 1px solid rgba(255, 255, 255, .07) !important;
  border-block-end: 0 !important;
  gap: 10px !important;
}
.tvs-smart-shop .tvs-plan-features li { color: rgba(233, 238, 247, .72) !important; font-size: 13px !important; }
.tvs-smart-shop .tvs-plan-features li::before {
  background: rgba(255, 122, 0, .14) !important;
  color: var(--tvs-accent-2) !important;
}

/* CTA */
.tvs-smart-shop ul.products li.product .button {
  margin: clamp(18px, 1.8vw, 24px) clamp(20px, 1.9vw, 26px) 0 !important;
  min-height: 52px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent)) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(255, 122, 0, .16);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.tvs-smart-shop ul.products li.product .button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  border: 0 !important;
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent)) !important;
  box-shadow: 0 8px 18px rgba(255, 122, 0, .26);
}

/* The smart finder's action button was purple against an orange brand. */
.tvs-smart-shop .tvs-recommend-btn {
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

@media (max-width: 1024px) {
  .tvs-smart-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .tvs-smart-shop ul.products { grid-template-columns: minmax(0, 1fr) !important; width: min(100% - 32px, 440px); }
  .tvs-smart-shop .tvs-plan-art::before { font-size: 82px; }
}

/* The plugin's ::before drew a fake TV — a fixed-size bordered box. Reusing it
   for the ghost numeral means clearing that geometry, not just the content. */
.tvs-smart-shop .tvs-plan-art::before {
  width: auto !important;
  height: auto !important;
  inset-inline-start: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}

/* WooCommerce's own sale flash sits where the status line does. Give each a
   corner of its own: sale at the inline-end, "ready" at the inline-start. */
.tvs-smart-shop ul.products li.product .onsale {
  position: absolute !important;
  inset-block-start: clamp(18px, 1.7vw, 24px) !important;
  inset-inline-end: clamp(18px, 1.7vw, 24px) !important;
  inset-inline-start: auto !important;
  z-index: 2;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46, 213, 115, .32) !important;
  background: rgba(46, 213, 115, .13) !important;
  color: #63d99a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

/* Was-price reads as a quiet note beside the current price, not above it. */
.tvs-smart-shop ul.products li.product .price del {
  display: inline !important;
  margin-inline-start: 10px;
  color: rgba(233, 238, 247, .38) !important;
  font-size: .38em !important;
  font-weight: 700 !important;
}
.tvs-smart-shop ul.products li.product .price del .woocommerce-Price-currencySymbol {
  font-size: .8em;
  color: inherit;
}
.tvs-smart-shop ul.products li.product .price ins {
  background: none !important;
  text-decoration: none !important;
}

/* Toolbar shares the grid's shell so the count and sorter line up with cards. */
.tvs-smart-shop .woocommerce-notices-wrapper,
.tvs-smart-shop .woocommerce-result-count,
.tvs-smart-shop .woocommerce-ordering,
.tvs-smart-shop .woocommerce-breadcrumb {
  width: min(var(--tvs-shell), 1240px);
  margin-inline: auto !important;
}
.tvs-smart-shop .woocommerce-ordering { float: none !important; text-align: start; }
.tvs-smart-shop .woocommerce-result-count { float: none !important; }

/* The shop hero drew its own flat "TV" out of divs. Reuse the composite the
   home page already ships instead — same scene, one download, and it is the
   image visitors have already seen on the landing page. */
.tvs-smart-shop .tvs-screen {
  aspect-ratio: 1022 / 796;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: center / contain no-repeat
    url('/wp-content/uploads/tvs-hero-assets/hero-device-scene.webp') !important;
  transform: none !important;
}
/* On a phone the scene is ~340 CSS px wide; the 720 px cut the home hero
   already ships (29 KB) covers it at 2x, the full frame is 67 KB.
   tvstrong4k-speed.php preloads whichever of the two the viewport takes —
   this is the shop page's LCP element and a background image is otherwise
   only discovered after the stylesheet has been parsed. */
@media (max-width: 640px) {
  .tvs-smart-shop .tvs-screen {
    background-image: url('/wp-content/uploads/tvs-hero-assets/hero-device-scene-720.webp') !important;
  }
}
.tvs-smart-shop .tvs-screen > * { display: none !important; }

/* Every plan gets the same call to action; the featured card is already marked
   out by its border and badge. */
.tvs-smart-shop ul.products li.product:not(.tvs-best-value) .button {
  border: 0 !important;
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent)) !important;
  color: #fff !important;
}
.tvs-smart-shop ul.products li.product:not(.tvs-best-value) .button:hover {
  border: 0 !important;
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent)) !important;
}

/* The finder's mark was purple against an orange brand. */
.tvs-smart-shop .tvs-ai-mark {
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent)) !important;
  color: #14100a !important;
}

/* Replaces the removed "how many screens" step: the terms are the same on
   every plan, so they are stated once instead of asked as a question. */
.tvs-smart-shop .tvs-finder-note {
  margin: 0;
  align-self: center;
  color: rgba(233, 238, 247, .55);
  font-size: 13px;
  line-height: 1.75;
}


/* ============================================================
   SHOP CARDS — the artwork is a full-bleed render per duration,
   sized to the same proportion the reference uses: image height
   is about 0.69 of the card width.
   ============================================================ */
.tvs-smart-shop ul.products li.product .tvs-plan-art {
  height: auto !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  display: block;
  position: relative;
  border: 0 !important;
  border-block-end: 1px solid rgba(255, 255, 255, .07) !important;
  background: none !important;
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.tvs-smart-shop ul.products li.product .tvs-plan-art::before,
.tvs-smart-shop ul.products li.product .tvs-plan-art::after { content: none !important; }

/* An inline `img, video, iframe { height: auto !important }` sits above the
   theme CSS, and the shop hides every product image to suppress the
   WooCommerce thumbnail — so this rule needs both the weight and the class. */
.tvs-smart-shop ul.products li.product img.tvs-plan-box {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 760 / 524;
  object-fit: cover;
  transition: transform .5s ease;
}
.tvs-smart-shop ul.products li.product:hover img.tvs-plan-box { transform: scale(1.035); }

.tvs-smart-shop ul.products li.product .tvs-plan-art .tvs-plan-status {
  position: absolute !important;
  inset-block-end: 12px;
  inset-inline-start: 14px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(6, 9, 14, .72);
  backdrop-filter: blur(6px);
}

.tvs-smart-shop ul.products li.product .woocommerce-loop-product__title {
  min-height: 0 !important;
  margin: 16px 0 0 !important;
  font-size: 16.5px !important;
  line-height: 1.5;
}
.tvs-smart-shop ul.products li.product .price { margin: 8px 0 0 !important; font-size: 28px !important; }
.tvs-smart-shop .tvs-price-caption { padding-block-start: 2px !important; }

/* The card is a flex column ordered by CSS `order`, not DOM position:
   title 3, price 4, caption 5, features 6. An element with no order value
   falls to 0 and jumps to the top, so the spec line is placed explicitly. */
.tvs-smart-shop ul.products li.product .tvs-shop-spec {
  order: 6;
  margin: 10px 24px 0 !important;
  color: rgba(233, 238, 247, .5);
  font-size: 12px;
  line-height: 1.7;
}
.tvs-smart-shop ul.products li.product .tvs-plan-features {
  order: 7 !important;
  margin: 14px 24px 16px !important;
}

/* The ask-us plan carries no figure, so the slot is set in the body size
   rather than the big price size — it is a prompt, not an amount. */
.tvs-smart-shop ul.products li.product .price.tvs-price-ask {
  font-size: 19px !important;
  color: #ffb164 !important;
}

/* The 24-month plan is quoted on WhatsApp, so its card shows a prompt where the
   others show a figure — set at prompt weight, not price weight. */
.page-id-20 .tvs-plan-ask {
  margin: 0;
  color: var(--tvs-accent-2);
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 800;
  line-height: 1.2;
}

/* ============================================================
   OFFERS PAGE — combined-bundle cards (/العروض/). Self-contained;
   same tokens and visual language as the plan cards.
   ============================================================ */
/* Offers page — self-contained so it does not depend on the home page's
   page-scoped card rules. Same tokens, same visual language. */
.tvs-bundles { max-width: 1180px !important; margin: 0 auto; padding: clamp(24px, 4vw, 56px) 16px clamp(40px, 6vw, 80px); color: var(--tvs-text, #f7f8fb); }
.tvs-bundles-head { text-align: center; max-width: 760px !important; margin: 0 auto clamp(28px, 4vw, 48px); }
.tvs-bundles-kicker { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border: 1px solid rgba(255,122,0,.35); border-radius: 999px; color: var(--tvs-accent-2, #ff9b33); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.tvs-bundles-head .tvs-bundles-title { margin: 0 0 12px; font-size: clamp(28px, 4vw, 46px); font-weight: 900; line-height: 1.2; }
.tvs-bundles-head .tvs-bundles-title span { color: var(--tvs-accent, #ff7a00); }
.tvs-bundles-head p { margin: 0; color: rgba(233,238,247,.7); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.8; }

.tvs-bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); max-width: 900px !important; margin: 0 auto; }
.tvs-bundle { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: linear-gradient(180deg, #161d28 0%, #0e131b 100%); box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.tvs-bundle:hover { transform: translateY(-4px); border-color: rgba(255,122,0,.35); }
.tvs-bundle-cap { position: relative; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) 18px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(135deg, rgba(255,122,0,.10), transparent 60%); }
.tvs-bundle-cap::after { content: attr(data-mark); position: absolute; inset-inline-end: 18px; top: 8px; font-size: 64px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.05); pointer-events: none; }
.tvs-bundle-label { display: block; margin-bottom: 8px; color: rgba(233,238,247,.55); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.tvs-bundle-cap h3 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; line-height: 1.25; }
.tvs-bundle-cap h3 b { color: var(--tvs-accent-2, #ff9b33); }
.tvs-bundle-tier { display: inline-block; padding: 4px 11px; border-radius: 999px; background: rgba(255,122,0,.14); color: var(--tvs-accent-2, #ff9b33); font-size: 12.5px; font-weight: 700; }
.tvs-bundle-body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: clamp(18px, 2.2vw, 26px); }
.tvs-bundle-price { display: flex; align-items: baseline; gap: 8px; }
.tvs-bundle-price b { font-size: clamp(34px, 3.6vw, 44px); font-weight: 900; line-height: 1; }
.tvs-bundle-price small { color: rgba(233,238,247,.55); font-size: 14px; }
.tvs-bundle-once { color: rgba(233,238,247,.5); font-size: 13px; margin-top: -8px; }
.tvs-bundle-pitch { margin: 0; color: rgba(233,238,247,.78); font-size: 15px; line-height: 1.8; }
.tvs-bundle-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tvs-bundle-feats li { position: relative; padding-inline-start: 24px; color: rgba(233,238,247,.82); font-size: 14.5px; line-height: 1.65; }
.tvs-bundle-feats li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; color: var(--tvs-accent, #ff7a00); font-weight: 900; }
.tvs-bundle-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); color: rgba(233,238,247,.6); font-size: 13px; line-height: 1.7; }
.tvs-bundle-actions { display: grid; gap: 10px; margin-top: auto; }
.tvs-bundle-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding-inline: 20px; border-radius: 13px; background: linear-gradient(155deg, var(--tvs-accent-2, #ff9b33), var(--tvs-accent, #ff7a00)); color: #fff !important; font-size: 15px; font-weight: 800; text-decoration: none !important; transition: filter .18s ease, transform .18s ease; }
.tvs-bundle-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.tvs-bundle-cta.ghost { background: transparent; border: 1px solid rgba(255,255,255,.18); color: #fff !important; }
.tvs-bundle-cta.ghost:hover { border-color: rgba(255,255,255,.4); }

.tvs-bundles-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px !important; margin: clamp(28px, 4vw, 48px) auto 0; }
.tvs-bundles-trust div { padding: 16px 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.03); }
.tvs-bundles-trust b { display: block; margin-bottom: 4px; font-size: 14.5px; }
.tvs-bundles-trust span { color: rgba(233,238,247,.6); font-size: 13.5px; line-height: 1.6; }

.tvs-bundles-foot { max-width: 760px !important; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; color: rgba(233,238,247,.5); font-size: 13.5px; line-height: 1.8; }
.tvs-bundles-foot a { color: var(--tvs-accent-2, #ff9b33); }
@media (max-width: 700px) { .tvs-bundle-grid, .tvs-bundles-trust { grid-template-columns: 1fr; } .tvs-bundle-cap::after { font-size: 48px; } }
.tvs-bundle-ask { display: flex; flex-direction: column; gap: 4px; }
.tvs-bundle-ask b { font-size: clamp(26px, 2.6vw, 32px); font-weight: 900; line-height: 1.15; color: var(--tvs-accent-2, #ff9b33); }
.tvs-bundle-ask small { color: rgba(233,238,247,.55); font-size: 13.5px; }

/* ============================================================
   PRODUCT REVIEWS — lifted out of the tab onto the page, so the
   summary, the reviews and the form are all visible without a
   click. Empty state is real: no reviews means it says so.
   ============================================================ */
.woocommerce div.product .tvs-pr {
  width: min(100%, 1180px);
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding-block-start: clamp(26px, 3vw, 40px);
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  clear: both;
  /* The product wrapper is a two-column grid and the theme spans only its own
     sections, so without this the reviews land in the gallery column. */
  grid-column: 1 / -1;
}
.tvs-pr-title {
  margin: 0 0 clamp(16px, 2vw, 24px) !important;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 900;
}

.tvs-pr-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  margin-block-end: clamp(20px, 2.4vw, 30px);
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: linear-gradient(180deg, #161d28 0%, #0e131b 100%);
}
.tvs-pr-score { display: flex; align-items: baseline; gap: 8px; }
.tvs-pr-score b { color: #fff; font-size: clamp(34px, 3.6vw, 46px); font-weight: 900; line-height: 1; }
.tvs-pr-score span { color: rgba(233, 238, 247, .5); font-size: 14px; }
.tvs-pr-meta { display: grid; gap: 6px; }
.tvs-pr-meta > span { color: rgba(233, 238, 247, .55); font-size: 13.5px; }
/* WooCommerce's star widget: it floats right by default and sizes to the text. */
.woocommerce div.product .tvs-pr-summary .star-rating {
  float: none !important;
  margin: 0 !important;
  font-size: 1.05em;
  color: #ffb02e;
}
.woocommerce div.product .tvs-pr-summary .star-rating::before { color: rgba(255, 255, 255, .22); }

.tvs-pr-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 14px;
  color: rgba(233, 238, 247, .58);
  font-size: 14.5px;
  line-height: 1.8;
}
.tvs-pr-empty p { margin: 0; }

/* The button the whole section exists for: visible, not behind a tab. */
.tvs-pr-write {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 22px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent));
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
  transition: filter .18s ease, transform .18s ease;
}
.tvs-pr-write:hover,
.tvs-pr-write:focus-visible { filter: brightness(1.07); transform: translateY(-1px); }

/* Once the row wraps, a half-width button stranded on its own line reads as a
   leftover; give it the full line instead. */
@media (max-width: 600px) {
  .tvs-pr-write {
    width: 100%;
    justify-content: center;
    margin-inline-start: 0;
  }
  .woocommerce div.product .tvs-pr .comment_container { flex-direction: column; gap: 10px; }
}

/* WooCommerce's own review list and form, brought into the dark theme. */
.woocommerce div.product .tvs-pr #reviews #comments h2 { display: none; }
/* Our empty state already says this; WooCommerce's line would repeat it. */
.woocommerce div.product .tvs-pr p.woocommerce-noreviews { display: none; }
.woocommerce div.product .tvs-pr ol.commentlist { margin: 0 !important; padding: 0 !important; list-style: none; display: grid; gap: 14px; }
.woocommerce div.product .tvs-pr ol.commentlist li { margin: 0 !important; }
.woocommerce div.product .tvs-pr .comment_container {
  display: flex;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: linear-gradient(180deg, #161d28 0%, #0e131b 100%);
}
/* WooCommerce absolutely positions the avatar out of the card; put it back. */
.woocommerce div.product .tvs-pr .comment_container img.avatar {
  position: static !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .06);
}
.woocommerce div.product .tvs-pr .comment-text { margin: 0 !important; border: 0 !important; padding: 0 !important; }
.woocommerce div.product .tvs-pr .comment-text p.meta { color: rgba(233, 238, 247, .5); font-size: 12.5px; margin-block-end: 6px; }
.woocommerce div.product .tvs-pr .comment-text p.meta strong { color: #fff; font-size: 14px; }
.woocommerce div.product .tvs-pr .comment-text p { color: rgba(233, 238, 247, .8); line-height: 1.85; }
.woocommerce div.product .tvs-pr .comment-text .star-rating { float: none; margin-block-end: 8px; color: #ffb02e; }

/* A reply is the shop answering, so it is indented and marked. */
.woocommerce div.product .tvs-pr li.tvs-pr-reply { margin-inline-start: clamp(18px, 3vw, 44px) !important; }
.woocommerce div.product .tvs-pr li.tvs-pr-reply .comment_container {
  background: rgba(255, 122, 0, .06);
  border-color: rgba(255, 122, 0, .2);
}

.woocommerce div.product .tvs-pr #review_form_wrapper {
  margin-block-start: clamp(20px, 2.4vw, 30px);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
}
.woocommerce div.product .tvs-pr #reply-title { color: #fff; font-size: 18px !important; font-weight: 800; }
.woocommerce div.product .tvs-pr .comment-form label { color: rgba(233, 238, 247, .7); font-size: 13.5px; }
.woocommerce div.product .tvs-pr .comment-form input[type=text],
.woocommerce div.product .tvs-pr .comment-form input[type=email],
.woocommerce div.product .tvs-pr .comment-form textarea {
  background: #0b0f15 !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
.woocommerce div.product .tvs-pr .comment-form .stars a { color: #ffb02e; }
/* WooCommerce ships `#respond input#submit` — two IDs — so this needs the flag. */
.woocommerce div.product .tvs-pr .comment-form input#submit {
  min-height: 48px;
  padding-inline: 28px;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(155deg, var(--tvs-accent-2), var(--tvs-accent)) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.woocommerce div.product .tvs-pr .comment-form input#submit:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* ============================================================
   RELATED PRODUCTS — the list is a grid, but WooCommerce still
   ships its float-era clearfix; ::before and ::after then become
   grid items and take the first cell, so the row starts one
   column in and the third card falls to a line of its own.
   ============================================================ */
.woocommerce div.product .related ul.products::before,
.woocommerce div.product .related ul.products::after,
.woocommerce div.product .upsells ul.products::before,
.woocommerce div.product .upsells ul.products::after {
  display: none;
}

/* ============================================================
   CART BLOCK — the theme's .alignwide pulls the block 80px past
   each edge; on phones and tablets that clipped the item and the
   checkout button off-screen. Keep it inside the viewport.
   ============================================================ */
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-cart.alignwide { margin-inline: 0 !important; max-width: 100% !important; }
@media (max-width: 1100px) {
  .wc-block-cart.is-medium .wc-block-components-sidebar-layout,
  .wc-block-components-sidebar-layout.is-medium { flex-direction: column !important; }
  .wc-block-components-sidebar-layout.is-medium .wc-block-components-main,
  .wc-block-components-sidebar-layout.is-medium .wc-block-components-sidebar { width: 100% !important; padding-inline: 0 !important; }
}

/* ============================================================
   ORDER HANDOFF — the thank-you page's single next step: one
   WhatsApp button carrying the order details.
   ============================================================ */
.tvs-handoff { margin: 18px 0 26px; padding: clamp(22px, 3vw, 32px); text-align: center; border: 1px solid rgba(37,211,102,.35); border-radius: 20px; background: linear-gradient(160deg, rgba(37,211,102,.12), rgba(37,211,102,.03)); }
.tvs-handoff-check { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 50%; background: #25d366; color: #fff; font-size: 22px; }
.tvs-handoff h2 { margin: 0 0 8px !important; font-size: clamp(22px, 2.6vw, 30px) !important; font-weight: 900; }
.tvs-handoff p { max-width: 560px; margin: 0 auto 18px; color: rgba(233,238,247,.8); font-size: 15px; line-height: 1.8; }
.tvs-handoff-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 14px; background: #25d366; color: #fff !important; font-size: 17px; font-weight: 900; text-decoration: none !important; box-shadow: 0 14px 34px rgba(37,211,102,.28); transition: filter .18s ease, transform .18s ease; }
.tvs-handoff-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tvs-handoff-btn i { font-size: 24px; }
.tvs-handoff small { display: block; margin-top: 14px; color: rgba(233,238,247,.6); font-size: 13.5px; }
.tvs-handoff small b { color: #fff; }
.tvs-thankyou-next a { display: none; }
@media (max-width: 600px) { .tvs-handoff-btn { width: 100%; } }


/* --- Product page: the blocks under the summary render as they come near ---
   Same technique as the home page (tvs-home-sections.css): the tabs, the
   guide cards and the reviews are far below the first screen on a phone, and
   content-visibility: auto keeps their style/layout/paint off the first
   frame (a full relayout measured 8.2 ms -> 2.5 ms on a desktop). The
   #reviews / #respond / #tab-description jumps and the tab switch were
   checked with it on. `.related.products` already carries the property
   from the inline style tvstrong4k-growth-suite.php prints. */
.single-product .woocommerce-tabs,
.single-product .tvs-guide-related--product,
.single-product .tvs-pr { content-visibility: auto; }
.single-product .woocommerce-tabs { contain-intrinsic-size: auto 3540px; }
.single-product .tvs-guide-related--product { contain-intrinsic-size: auto 1450px; }
.single-product .tvs-pr { contain-intrinsic-size: auto 1230px; }
@media (min-width: 1025px) {
  .single-product .woocommerce-tabs { contain-intrinsic-size: auto 2330px; }
  .single-product .tvs-guide-related--product { contain-intrinsic-size: auto 410px; }
  .single-product .tvs-pr { contain-intrinsic-size: auto 1100px; }
}

/* --- Product image visible from the first paint ---
   WooCommerce's gallery template prints the wrapper with an inline
   `opacity: 0` and wc-single-product.js turns it on once it has set the
   gallery up. On a phone that script runs in the deferred queue well after
   the first paint, so the product image — the LCP element — sat invisible
   for ~2 s after it had loaded (Lighthouse: "element render delay 2,060
   ms"). Every product here has one image and nothing to set up, so the
   wrapper is shown at once; the zoom and lightbox still attach on top. */
.single-product .woocommerce-product-gallery { opacity: 1 !important; }

/* --- No backdrop blur in the shop's first screen on phones ---
   The two floating cards over the shop hero carry a 14px backdrop blur
   (smart-shop inline CSS). Lighthouse's software renderer needed ~2.4 s to
   raster the first frame with them, so the hero — the LCP element — showed
   long after its bytes had arrived (score 79; 97 with the blur off, nothing
   else changed). A near-solid fill looks the same on a phone; desktop keeps
   the glass. The plan-card status pills get the same treatment. */
@media (max-width: 640px) {
  .tvs-smart-shop .tvs-float-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(13, 18, 27, .97) !important; }
  .tvs-smart-shop ul.products li.product .tvs-plan-art .tvs-plan-status { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 9, 14, .88); }
  /* The hero's two glow orbs are solid discs under filter: blur(65px) — a
     65px blur over 320x320 and 250x250 px is the single most expensive
     thing to rasterise on the first screen (Lighthouse's software renderer
     needed seconds for the frame). A radial gradient draws the same soft
     glow for free. */
  .tvs-smart-shop .tvs-orb { filter: none !important; opacity: 1 !important; }
  .tvs-smart-shop .tvs-orb-a { width: 520px !important; height: 520px !important; right: -190px !important; top: -190px !important; background: radial-gradient(circle, rgba(255, 122, 0, .2) 0, rgba(255, 122, 0, .08) 38%, rgba(255, 122, 0, 0) 68%) !important; }
  .tvs-smart-shop .tvs-orb-b { width: 420px !important; height: 420px !important; left: calc(10% - 85px) !important; bottom: -245px !important; background: radial-gradient(circle, rgba(37, 76, 255, .2) 0, rgba(37, 76, 255, .08) 38%, rgba(37, 76, 255, 0) 68%) !important; }
}