/* =============================================================================
   HOMEPAGE
   Hero grid values are COPIED VERBATIM from the source's own inline
   <style data-shopify> block (scrape/source-curl/home.html, the
   .hero-grid-template--…__hero_grid_nDjcYi rules) — not measured, not guessed.
   ============================================================================= */

/* ---------- #3 HERO GRID ---------- */
.th-hero { background-color: transparent; padding: 0; }

.th-hero .hero-grid-inner {
  width: 100%;
  max-width: calc(100% - 12px);
  /* ⚠ DO NOT centre this. The source does NOT — and the column percentages
     (50% + 23.77% + 26.22% = 100%) do not account for the two 6px gaps, so
     the grid lays out ~1440px of track inside a 1428px box. Left-aligned at
     x=0 that lands exactly on the viewport edge, which is what the source
     does. `margin-inline: auto` shifted it 6px right and pushed the last
     column OFF-SCREEN — 1446px of scrollWidth at a 1440 viewport.
     Caught by the side-by-side screenshot pass (build 1446px wide vs source
     1440px), never by the style diff, which only measures the components in
     its map. */
  display: grid;
  grid-template-columns: 50% 23.77% 26.22%;
  grid-template-rows: auto;
  column-gap: 6px;
  row-gap: 6px;
  grid-template-areas:
    "hero-grid-1 hero-grid-2 hero-grid-3"
    "hero-grid-1 hero-grid-2 hero-grid-4";
}

.th-hero .hero-card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 0;
  display: block;
}

/* Card 1 is `contain`, not `cover`, and is the element that sets the section's
   height via an aspect-ratio padding hack. Both straight from source. */
.th-hero .hero-grid-1 {
  grid-area: hero-grid-1;
  background-size: contain;
  padding-bottom: 75.83%;
}
.th-hero .hero-grid-2 { grid-area: hero-grid-2; }
.th-hero .hero-grid-3 { grid-area: hero-grid-3; }
.th-hero .hero-grid-4 { grid-area: hero-grid-4; }

/* -----------------------------------------------------------------------
   🔴 PROMO TILE REMOVED (owner: remove all discounts, 2026-10-08).

   hero-1.jpg carried "20% OFF 2 ITEMS | 25% OFF 3+ ITEMS | WITH CODE LIFTED"
   baked into the JPEG, so with the discount switched off it advertised an
   offer the checkout refuses. The tile is dropped rather than replaced with
   a duplicate of one of the three clean banners.

   ⚠ CARD 1 WAS ALSO THE SECTION'S HEIGHT DRIVER — it set the whole hero's
   height with `padding-bottom: 75.83%` while every other card just filled
   its row. Remove it and the section collapses to nothing, because no other
   card has an intrinsic height. The tall card (2) takes over that job here,
   at the ratio its own artwork needs.

   ⚠ TO RESTORE: drop a non-promotional banner in as hero-1.jpg, re-add slot
   1 in front-page.php and delete the --nopromo class. This block is then
   inert.
   ----------------------------------------------------------------------- */
/* The three remaining banners are ONE PORTRAIT (500x802) and TWO LANDSCAPE
   (500x362). No crop can fill a two-row grid with that mix without losing
   something: centred, the mushroom wordmark was sliced in half; anchored to
   the bottom, "THC GUMMIES" and "THC VAPE PENS" went instead, leaving two
   tiles of empty grass. `contain` shows every banner whole — title, product
   and call to action — and letterboxes against the section's own backdrop.
   The source used `contain` on its big tile for the same reason. */
/* The three remaining banners are ONE PORTRAIT (500x802, ratio 0.62) and TWO
   LANDSCAPE (500x362, ratio 1.38). Earlier attempts all failed on that mix:
     - cover, centred      -> the mushroom wordmark sliced in half
     - cover, bottom       -> "THC GUMMIES" / "THC VAPE PENS" lost instead
     - contain, 2x2 grid   -> everything visible but half the section black
   A SINGLE ROW sized in `fr` units that match the artwork's own ratios fits
   all three edge to edge with nothing cropped and nothing empty:
     0.62fr + 1.38fr + 1.38fr = 3.38fr across 1416px (1428 minus two 6px
     gaps) = 419px tall, which is each image's natural height at its width.
   `fr` is used rather than percentages precisely because it subtracts the
   gaps first — the percentage version is what pushed the old grid 6px wide
   and put a column off-screen. */
.th-hero--nopromo .hero-grid-inner {
  grid-template-columns: 0.62fr 1.38fr 1.38fr;
  grid-template-rows: auto;
  grid-template-areas: "hero-grid-2 hero-grid-3 hero-grid-4";
  background: none;
}
.th-hero--nopromo .hero-card {
  padding-bottom: 0;
  height: auto;
  background-size: cover;      /* box matches the art, so nothing is cut */
  background-position: center;
}
.th-hero--nopromo .hero-grid-2 { aspect-ratio: 500 / 802; }
.th-hero--nopromo .hero-grid-3,
.th-hero--nopromo .hero-grid-4 { aspect-ratio: 500 / 362; }

.th-hero .hero-mobile {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.th-hero .hero-mobile img { width: 100%; height: auto; display: block; }

/* The source does NOT reflow the grid on mobile — it hides it outright and
   swaps in a single pre-composed image. Replicate that, do not "improve" it. */
@media (max-width: 991px) {
  .th-hero .hero-grid-inner { display: none; }
  .th-hero .hero-mobile { display: block; }
}
@media (min-width: 992px) {
  .th-hero .hero-mobile { display: none; }
}
@media (max-width: 990px) {
  .th-hero .hero-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .th-hero .hero-grid-inner { grid-template-columns: 1fr; }
}

/* ---------- shared section title ---------- */
.th-section-title {
  font-size: var(--th-fs-h2);
  line-height: var(--th-lh-h2);
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
  text-align: center;
  margin: 0 0 24px;
}

/* ---------- #5 CATEGORY CARDS ---------- */
.th-catcards { padding: 32px 0; }

/* Measured on the source: a keen-slider track 1350x580 inside a 616px
   section — four IMAGE cards, not a text grid. Scroll-snap again rather than
   a slider library. */
.th-catcards__track {
  display: flex;
  align-items: stretch;   /* equal-height cards; the CTA pins to the bottom */
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  max-width: 100%;
}

.th-catcards__track > .th-catcard {
  flex: 0 0 calc(25% - 18px);
  max-width: calc(25% - 18px);
  scroll-snap-align: start;
}

/* Grey panel, centred content, CTA pinned to the bottom edge — and all four
   cards the same height regardless of copy length. */
.th-catcard {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #f4f4f4;
  text-align: center;
  height: 100%;
}

.th-catcard__media { display: block; padding: 24px 24px 8px; }

/* ⚠ `contain`, not `cover`. These are product group shots — cropping them
   cuts the packaging in half, which is the whole subject of the image. */
.th-catcard__media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.th-catcard__title {
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
  margin: 0;
  padding: 0 20px 12px;
}

.th-catcard__body {
  margin: 0;
  padding: 0 24px 20px;
  font-size: var(--th-fs-base);
  line-height: 1.6;
  color: var(--th-text);
}

/* Full-width magenta button flush to the card's bottom edge. `margin-top:auto`
   is what keeps it there when one card's copy is shorter than another's. */
.th-catcard__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Measured on the source: 45px tall, 18.08px/700 white on #b8006d. */
  min-height: 45px;
  padding: 10px 16px;
  background: var(--th-btn-bg);
  color: var(--th-btn-label);
  border: 1px solid var(--th-btn-border);
  border-radius: 0;
  font-size: var(--th-fs-card-cta);   /* 18.08px, steps to 16px at 38em */
  font-weight: var(--th-fw-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: stretch;
  transition: background var(--th-speed-fast), color var(--th-speed-fast);
}
.th-catcard__cta:hover {
  background: var(--th-btn-bg-hover);
  color: var(--th-btn-label-hover);
  text-decoration: none;
}

/* ⚠ The earlier text-link version of these rules lived HERE and, being later
   in the file at equal specificity, silently beat the real card styles above
   — the CTA rendered as a 126px black underlined link instead of a
   full-width white-on-magenta button. Deleted rather than overridden: two
   rule sets for one component is how that happens in the first place. */

/* Repeat BOTH selectors inside every breakpoint. Media queries add NO
   specificity, so a base rule of equal-or-higher specificity defined later
   would otherwise win and the responsive columns would never apply. That
   shipped five 50px-wide cards at 390px on a previous build. */
@media (max-width: 991px) {
  .th-catcards .th-catcards__track > .th-catcard { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}
/* ⚠ ON MOBILE THE CATEGORY CARDS STACK — they are NOT a carousel.
   Measured: the source's category section is 1849px tall at 375 (four cards
   of ~446px stacked), against 635px for our horizontal scroller. The user's
   own screenshots show one full-width card after another, scrolled
   vertically. Horizontal scrolling for four primary category entry points is
   also worse on a phone: three of them are invisible until you swipe. */
@media (max-width: 767px) {
  .th-catcards .th-catcards__track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .th-catcards .th-catcards__track > .th-catcard {
    flex: none;
    max-width: none;
    width: 100%;
  }

  /* Source card is 360 wide / 446 tall at a 375 viewport. Ours came out 532
     because the image stayed 1:1 — a square product shot eats ~70px more
     height than the source's landscape crop. Measured, then trimmed. */
  .th-catcards .th-catcard__media { padding: 16px 16px 4px; }
  .th-catcards .th-catcard__media img { aspect-ratio: 4 / 3; }
  .th-catcards .th-catcard__title { font-size: 2.4rem; padding-bottom: 8px; }
  .th-catcards .th-catcard__body { padding: 0 18px 16px; font-size: var(--th-fs-sm); }

  /* The source's cards run wider than the 25px container gutter allows, so
     the track breaks out of it on mobile. */
  .th-catcards .th-container { padding-inline: 8px; }
}

/* ---------- #6 PRODUCT GRID / CARD ---------- */
.th-favourites { padding: 40px 0; }

.th-pgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* 🔴 WOOCOMMERCE SIZES THE CARD, AND IT WINS.
   woocommerce-layout.css ships:
       .woocommerce ul.products li.product,
       .woocommerce-page ul.products li.product
       { float: left; margin: 0 3.8% 2.992em 0; width: 22.05% }
   specificity (0,3,2). The theme had NO width rule on the card at all, so
   inside every grid cell the card collapsed to 22% of it: at 375px the cells
   were a correct 179.5px wide and the cards were 40px, which wrapped every
   product title to one word per line. Broken at EVERY width, desktop
   included, on the main shop page.

   ⚠ The grid columns measuring correctly is why this hid for so long — the
   container was always right and the ITEM was wrong.

   Must out-specify (0,3,2): adding .th-pgrid to the chain gives (0,4,2).
   [[woocommerce-override-law]] — stock Woo UI is wrong on a replica until
   proven otherwise. */
.woocommerce ul.products.th-pgrid li.product,
.woocommerce-page ul.products.th-pgrid li.product,
ul.products.th-pgrid li.product,
.th-pgrid > .th-pcard {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ul.products carries a ::before/::after clearfix that becomes a real GRID
   ITEM and shifts every card one cell right. Killed globally in style.css;
   repeated here because this grid may render as ul.products on archives. */
.th-pgrid::before, .th-pgrid::after { content: none; }

/* MEASURED FROM THE LIVE SOURCE (tools/probe-selectors.mjs), not chosen.
   The source card is `product-card common-card trigger-floating-buttons
   text-center` at 278x518. Every value below was read off it. */
.th-pcard {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  text-align: center;        /* source: .text-center on the card root */
}

.th-pcard__link { display: flex; flex-direction: column; gap: 8px; }
.th-pcard__link:hover { text-decoration: none; }

.th-pcard__media { position: relative; overflow: hidden; }
.th-pcard__img { width: 100%; height: auto; display: block; }

/* ⚠ Source badges are BLACK on white text at 12px — NOT the brand magenta.
   Measured: .badge.new => bg rgb(0,0,0), color rgb(255,255,255), 12px.
   Using the accent here would have looked plausible and been wrong. */
.th-pcard__badge {
  position: absolute;
  top: 8px;
  padding: 4px 8px;
  background: #000;
  color: #fff;
  font-size: var(--th-fs-badge);   /* 12px -> 10px at 38em */
  font-weight: var(--th-fw-normal);
  line-height: 1;
  text-transform: none;
}
.th-pcard__badge--off { left: 8px; }
.th-pcard__badge--new { right: 8px; }

/* Measured: span.title => 16px / weight 400 / rgb(33,37,41), 19px line box.
   An earlier guess of 14px/700/#000 looked like a product title and was wrong
   on all three properties. */
.th-pcard__title {
  font-size: var(--th-fs-card-title);   /* 16px -> 14px at 38em */
  line-height: var(--th-lh-card-title);
  font-weight: var(--th-fw-normal);
  color: var(--th-text);
  margin: 0;
}

/* Measured: .price => 16px / weight 700 / rgb(33,37,41). */
.th-pcard__price {
  font-size: var(--th-fs-card-title);   /* tracks the title: 16 -> 14 */
  line-height: var(--th-lh-card-title);
  font-weight: var(--th-fw-bold);
  color: var(--th-text);
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* Woo renders the was/now pair as <del>/<ins>. 58% of this catalog is on
   sale, so this is the normal case. */
.th-pcard__price del { color: var(--th-muted); margin-right: 6px; text-decoration: line-through; }
.th-pcard__price ins { text-decoration: none; font-weight: var(--th-fw-bold); color: var(--th-heading); }

/* Measured: a.btn => bg rgb(184,0,109), white, weight 700, 18.08px, 45px tall. */
.th-pcard__cta {
  margin-top: auto;
  width: 100%;
  height: 45px;
  padding: 0 16px;
  font-size: var(--th-fs-card-cta);   /* 18.08px -> 16px at 38em */
  line-height: 1;
  font-weight: var(--th-fw-bold);
}

@media (max-width: 991px) {
  .th-favourites .th-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .th-favourites .th-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}


/* ---------- #8 COMMITMENT ---------- */
.th-commitment { padding: 32px 0; text-align: center; }

.th-commitment__body {
  max-width: 900px;
  margin: 0 auto 20px;
  font-size: var(--th-fs-base);
  line-height: var(--th-lh-base);
  color: var(--th-text);
}

.th-commitment__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 36px;
}

/* Icon LEFT of a two-line label on desktop; icon ABOVE a centred label on
   mobile, where the source lays them out as a 3-up grid rather than a
   vertical list. Our vertical stack made the section 582px against the
   source's 389px at 375. */
.th-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--th-fs-sm);
  font-weight: var(--th-fw-bold);
  letter-spacing: .02em;
  color: var(--th-heading);
  text-transform: uppercase;
  text-align: left;
}

.th-badge__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: block;
}

/* The source breaks each label onto two lines ("60-DAY / GUARANTEE"); a
   narrow box lets it wrap naturally rather than hard-coding a <br>. */
.th-badge__label {
  max-width: 11ch;
  line-height: 1.25;
}

/* ---------- SEO content zone (LOCKED #6) ---------- */
.th-seo-zone { padding: 32px 0 48px; }
.th-prose { max-width: 900px; margin-inline: auto; }
.th-prose h2 {
  font-size: var(--th-fs-h2);
  line-height: var(--th-lh-h2);
  margin: 0 0 16px;
}
.th-prose p { font-size: var(--th-fs-base); line-height: 1.6; color: var(--th-text); }

/* =============================================================================
   COLLECTION / ARCHIVE
   Measured on the live source (/collections/gummies):
     .page-hero  -> bg rgb(0,0,0), 196px tall
     h1          -> 40px / 700 / rgb(255,255,255) / text-align LEFT
     grid        -> .flex.flex-wrap at 1300px (flex, not CSS grid)
   ============================================================================= */
.th-collection-hero {
  background: #000;
  color: #fff;
}

.th-collection-hero__inner {
  min-height: 196px;
  display: flex;
  align-items: center;
}

.th-collection-hero__title {
  font-size: var(--th-fs-collection-h1);   /* 40px -> 32px at 38em, measured */
  line-height: 1;                          /* measured 1.0, not 1.1 */
  font-weight: var(--th-fw-bold);
  color: #fff;
  text-align: left;         /* measured: LEFT, not centred */
  margin: 0;
}

/* ⚠ padding-BLOCK, not the `padding` shorthand. This element also carries
   .th-container, which supplies the side gutter via `padding-inline`.
   The shorthand resets left/right to 0, and content then sits flush
   against both edges of a phone screen. That is how the shop grid came
   to touch the screen edges. */
.th-collection { padding-block: 32px 40px; }

/* The archive grid reuses the shared card. 4-up at desktop, matching
   loop_shop_columns. Repeat the parent selector in every breakpoint —
   media queries add NO specificity. */
.th-pgrid--archive {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* ⚠ THE BREAKPOINTS MUST NAME EVERY PLACE THIS GRID APPEARS.
   These were scoped to .th-collection only, so the PDP's "Customers Also
   Purchased" row — which uses the same .th-pgrid--archive — never stepped
   down and rendered FOUR columns at 375px: titles wrapped to five lines and
   the price lines overlapped each other. :is() keeps the specificity the
   base rule needs while covering both surfaces. Anything new that reuses
   .th-pgrid--archive must be added here too. */
@media (max-width: 991px) {
  :is(.th-collection, .th-related) .th-pgrid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :is(.th-collection, .th-related) .th-pgrid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Per-category SEO copy sits BELOW the grid on the source, not above. */
.th-cat-content { padding: 8px 0 48px; }
.th-cat-content .th-prose h2 { margin-top: 28px; }
.th-cat-content .th-prose h3 { margin-top: 22px; font-size: 2rem; }

/* New Arrivals row — fills the slot where the source runs a shoppable-video
   carousel we have no content for. Same grid as Customer Favorites. */
.th-newarrivals { padding: 40px 0; }
@media (max-width: 991px) {
  .th-newarrivals .th-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .th-newarrivals .th-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}


/* =============================================================================
   HOMEPAGE PRODUCT ROWS ARE CAROUSELS, NOT GRIDS.

   ⚠ Measured on the source: the Featured Products section is **678px tall
   with 10 cards in ONE ROW** at 278x518 on a Keen-Slider track. Our 4-column
   grid wrapped those into TWO rows and came out 1002px — 324px taller than
   the source, on a page that should have been SHORTER because we dropped
   reviews and the video carousel.

   The style diff never saw it: it compares the components in its map, and a
   grid that wraps still has a correct-looking card. It was caught by
   comparing screenshot HEIGHTS side by side.

   Implemented with scroll-snap rather than a slider library — no dependency,
   works without JS, and keyboard/touch scrolling comes free.
   ============================================================================= */
.th-pgrid--carousel {
  display: flex;
  grid-template-columns: none;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 12px;
}

.th-pgrid--carousel > .th-pcard {
  flex: 0 0 278px;      /* measured card width on the source */
  max-width: 278px;
  scroll-snap-align: start;
}

/* The row scrolls horizontally BY DESIGN, so it must not be reported as
   page overflow — the scroller clips its own content. */
.th-pgrid--carousel { max-width: 100%; }

@media (max-width: 767px) {
  .th-favourites .th-pgrid--carousel,
  .th-newarrivals .th-pgrid--carousel {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
  }
  /* ⚠ The card WIDTH is set once, higher up, from the measured source value
     (65vw). A second `72vw` rule used to live here and, being later in the
     file at equal specificity, silently won — the same duplicate-rule trap
     that made the category CTA render as a text link. One rule per value. */
}


/* =============================================================================
   SHOPPABLE VIDEO ROW
   Vertical video tiles, each with a product card beneath — as the source has
   it. Same scroll-snap carousel as the product rows.
   ============================================================================= */
.th-videos { padding: 40px 0; }

.th-videos__track {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.th-videos__item {
  flex: 0 0 300px;
  max-width: 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* ⚠ `position: relative` IS LOAD-BEARING, not cosmetic.
     WooCommerce's price markup contains
     <span class="screen-reader-text">Price range: …</span> at
     position:absolute (the standard a11y clip pattern). With NO positioned
     ancestor, those spans resolve against the INITIAL CONTAINING BLOCK —
     the document — not this scroll container, so they escape the clip and
     anchor at their static x inside the track. With 18 tiles that blew the
     document out to 5694px wide at a 1440 viewport: a horizontal scrollbar
     on the whole page, while every element individually measured fine and
     the track itself clipped correctly.

     `.th-pcard` already carries position:relative (for its badges), which is
     the only reason the product carousels never showed this. Any scroll
     container holding Woo price markup needs a positioned item wrapper. */
  position: relative;
}

.th-videos__media {
  position: relative;
  background: #000;
  aspect-ratio: 9 / 16;      /* the source's tiles are vertical video */
  overflow: hidden;
}

.th-videos__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- the product card under each video ---- */
.th-videos__product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--th-border);
  background: #fff;
}
.th-videos__product:hover { border-color: var(--th-btn-bg); text-decoration: none; }

.th-videos__thumb { flex: 0 0 48px; }
.th-videos__thumb img { width: 48px; height: auto; display: block; }

.th-videos__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.th-videos__name {
  font-size: var(--th-fs-xs);
  font-weight: var(--th-fw-bold);
  color: var(--th-heading);
  line-height: 1.3;
}

.th-videos__price { font-size: var(--th-fs-xs); color: var(--th-text); }
.th-videos__price del { color: var(--th-muted); margin-right: 5px; }
.th-videos__price ins { text-decoration: none; font-weight: var(--th-fw-bold); }

@media (max-width: 600px) {
  .th-videos .th-videos__item { flex: 0 0 72vw; max-width: 72vw; }
}

/* =============================================================================
   MOBILE CARD WIDTHS — measured off the source at 375.

   ⚠ THESE LIVE AT THE END OF THE FILE ON PURPOSE.
   Media queries add NO specificity. An identical selector declared LATER in
   the file wins regardless of the query, so this override sat before the base
   `.th-pgrid--carousel > .th-pcard { flex: 0 0 278px }` and silently lost —
   the card stayed at its desktop 278px on a 375 viewport. Same trap that has
   now bitten three times in this stylesheet; keep per-breakpoint overrides
   after the rule they override.
   ============================================================================= */
@media (max-width: 767px) {
  /* source: 242px of a 375 viewport = 65%, so the next card peeks in and the
     row reads as scrollable rather than looking like a single static card. */
  .th-pgrid--carousel > .th-pcard { flex: 0 0 65vw; max-width: 65vw; }
}

/* Commitment badges on mobile: 3-up grid, icon above a centred label. */
@media (max-width: 767px) {
  .th-commitment .th-commitment__badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 10px;
  }
  .th-commitment .th-badge {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .th-commitment .th-badge__label { max-width: none; font-size: var(--th-fs-xs); }
  .th-commitment .th-badge__icon { flex: 0 0 56px; width: 56px; height: 56px; }
}