/* RG PDP V4 (draft template #14536). Built by pdp-v4/import/build_bundle.py; do not edit here. */
/* ---- base.css ---- */
/* PDP V4 base: tokens only. Owned by the orchestrator. Values = design-system.md.
 * Tokens are scoped to the template root and the modal, never :root, so nothing leaks sitewide. */
.elementor-14536,
.rgv4-scope {
  --rg-ink: #292929;
  --rg-muted: #6E6E6E;
  --rg-tint: #F5F5F5;
  --rg-line: #EAEAEA;
  --rg-accent: #79ED8F;
  --rg-star: #FFBC00;
  --rg-white: #FFFFFF;
  --rg-font-display: "Jost", sans-serif;
  --rg-font-body: "Poppins", sans-serif;
}
.elementor-14536 *,
.rgv4-scope * { box-sizing: border-box; }

/* ---- p1-top.css ---- */
/* PDP V4, piece 1: top of the page (gallery + buy box), desktop and mobile.
 * Owner: P1 builder. Ships inside template 14536, so every selector starts with .elementor-14536.
 * Colours come only from the tokens in base.css. Native widget markup is untouched: this file
 * only restyles it. Several site rules use !important or long selectors (noted inline); the
 * overrides below are sized to beat them without touching anything outside the template.
 *
 * Type scale used in this piece (A7): 13px small, 15px body, 18px sub-headings,
 * plus the title (30/24px) and the price (28/24px). */

/* ------------------------------------------------------------------ */
/* 0. Local layout values                                               */
/* ------------------------------------------------------------------ */
.elementor-14536 .rgv4-top {
  --rgv4-header-h: 138px;           /* live sticky header (Elementor section b51a7f8) at >=1025px */
  --rgv4-sticky-gap: 24px;
  --rgv4-col-gap: 48px;
}
.elementor-14536:where(.admin-bar *) .rgv4-top { --rgv4-header-h: 170px; } /* + 32px WP admin bar */

/* ------------------------------------------------------------------ */
/* 1. Layout of .rgv4-top                                              */
/* ------------------------------------------------------------------ */
.elementor-14536 .rgv4-top.e-con {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: 16px 24px 56px;
}
.elementor-14536 .rgv4-top.e-con > .elementor-element {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
/* mobile / tablet: DOM order = gallery, buy box, reviews, accordions */
.elementor-14536 .rgv4-top.e-con > .rgv4-gallery { margin-bottom: 20px; }
.elementor-14536 .rgv4-top.e-con > .rgv4-buybox { margin-bottom: 48px; }
.elementor-14536 .rgv4-top.e-con > .rgv4-reviews { margin-bottom: 48px; }

@media (max-width: 767px) {
  .elementor-14536 .rgv4-top.e-con { padding: 12px 16px 48px; }
  .elementor-14536 .rgv4-top.e-con > .rgv4-gallery { margin-bottom: 16px; }
  .elementor-14536 .rgv4-top.e-con > .rgv4-buybox,
  .elementor-14536 .rgv4-top.e-con > .rgv4-reviews { margin-bottom: 40px; }
}

/* desktop: 55/45 grid, story under the photos, sticky buy box, full-height hairline */
@media (min-width: 1025px) {
  .elementor-14536 .rgv4-top.e-con {
    grid-template-columns: minmax(0, 11fr) 1px minmax(0, 9fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: var(--rgv4-col-gap);
    row-gap: 56px;
    max-width: 1320px;
    padding: 24px 40px 72px;
  }
  /* the column divider is a grid item of its own, so it runs the full height of all three rows */
  .elementor-14536 .rgv4-top.e-con::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    width: 1px;
    background: var(--rg-line);
  }
  .elementor-14536 .rgv4-top.e-con > .rgv4-gallery { grid-column: 1; grid-row: 1; margin: 0; }
  .elementor-14536 .rgv4-top.e-con > .rgv4-reviews { grid-column: 1; grid-row: 2; margin: 0; }
  .elementor-14536 .rgv4-top.e-con > .rgv4-accordions { grid-column: 1; grid-row: 3; margin: 0; }
  /* Sticky under the live header. If the box is taller than the space below the header
   * (--rgv4-bb-h is measured by the init in slots/pairs.js), it scrolls until its bottom is in
   * view and pins there instead, so "Goes well with" is never cut off. Without the measurement
   * this falls back to plain top pinning. */
  .elementor-14536 .rgv4-top.e-con > .rgv4-buybox {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: min(
      calc(var(--rgv4-header-h) + var(--rgv4-sticky-gap)),
      calc(100vh - var(--rgv4-bb-h, 0px) - var(--rgv4-sticky-gap))
    );
    margin: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Gallery (native Woo flexslider, CSS only)                        */
/* ------------------------------------------------------------------ */
/* overflow-x: clip is a safety net: nothing in the gallery may widen the page (flexslider's track
 * is many slides wide). clip, not hidden: it creates no scroll container. */
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images {
  position: relative;
  width: 100%;
  float: none;
  margin: 0;
  overflow-x: clip;
}
/* The photo sits in a padded box with a hairline frame, so a tightly cropped photo (product 9334) can't run
 * into the thumbnails or the zoom button.
 * - The frame goes on flexslider's viewport, or on the wrapper when there is no slider (one photo).
 * - The padding goes on the link inside each slide, never on the slide itself: flexslider reads a
 *   slide's padding/border as "box padding" and shrinks every slide by it, which misaligns them.
 * - Padding is in px: a % would resolve against flexslider's very wide wrapper. */
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery .flex-viewport,
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  margin: 0 0 16px;
  border: 1px solid var(--rg-line);
  border-radius: 16px;
  background: var(--rg-white);
  overflow: hidden;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { margin-bottom: 0; }
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images .woocommerce-product-gallery__image > a {
  display: block;
  padding: 40px;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}
/* zoom trigger: a quiet 44px circle, top right, magnifier in ink (Woo draws it in pure black) */
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images a.woocommerce-product-gallery__trigger {
  position: absolute;
  display: block;
  top: 12px;
  right: 12px;
  z-index: 3;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  text-indent: -9999px;
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  transition: background-color .15s ease;
}
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images a.woocommerce-product-gallery__trigger:hover {
  background: var(--rg-tint);
}
/* the trigger's aria-hidden emoji is already visually hidden by Woo; it has an aria-label */
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images a.woocommerce-product-gallery__trigger span[aria-hidden="true"] {
  display: none;
}
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images a.woocommerce-product-gallery__trigger:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
/* the magnifier is drawn here in full (not only recoloured), so it doesn't depend on Woo's sheet */
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images a.woocommerce-product-gallery__trigger::before {
  content: "";
  position: absolute;
  display: block;
  box-sizing: content-box;
  left: 12px;
  top: 12px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--rg-ink);
  border-radius: 100%;
}
.elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images a.woocommerce-product-gallery__trigger::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: content-box;
  left: 26px;
  top: 23px;
  height: 7px;
  width: 2px;
  border-radius: 6px;
  background: var(--rg-ink);
  transform: rotate(-45deg);
}
/* sale / sold-out badges printed by Woo and the sold-out snippet */
.elementor-14536 .rgv4-gallery span.onsale,
.elementor-14536 .rgv4-gallery .wcsob_soldout {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--rg-ink);
  color: var(--rg-white);
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

/* Prev/next arrows on the main photo (Jared #1, 2026-10-07: on, in our arrow style). Flexslider prints
 * ul.flex-direction-nav once production turns on directionNav (woocommerce_single_product_carousel_options,
 * see notes/p1-import.md). The list is laid over the square main photo so the arrows centre on it,
 * and lets clicks through to the photo (zoom) except on the arrows themselves. */
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav li {
  position: static;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0;
  overflow: hidden;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  text-indent: -9999px;
  text-decoration: none;
  opacity: 1;
  pointer-events: auto;
  transition: background-color .15s ease, opacity .15s ease;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a.flex-prev { left: 12px; }
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a.flex-next { right: 12px; }
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--rg-ink);
  border-right: 2px solid var(--rg-ink);
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a.flex-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a.flex-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a:hover { background: var(--rg-tint); }
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav a.flex-disabled {
  opacity: .3;
  pointer-events: none;
}
@media (max-width: 1024px) {
  /* touch screens swipe the photo; the thumbnails row shows where you are */
  .elementor-14536 .rgv4-gallery .woocommerce-product-gallery ul.flex-direction-nav { display: none; }
}

/* Thumbnails: one row that scrolls inside itself. Every photo sits in the same tile (hairline frame,
 * equal inner padding, object-fit: contain, centred), so tight detail shots and full-product shots
 * read evenly. The active photo's tile turns ink (2px, with 1px less padding so nothing shifts). */
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 6 * 12px) / 7);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav::-webkit-scrollbar { display: none; }
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav > li {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav > li > img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: 50% 50%;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--rg-line);
  border-radius: 10px;
  background: var(--rg-white);
  opacity: 1;
  cursor: pointer;
  transition: border-color .15s ease;
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav > li > img:hover {
  border-color: var(--rg-ink);
}
.elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav > li > img.flex-active {
  padding: 7px;
  border: 2px solid var(--rg-ink);
}
@media (max-width: 767px) {
  .elementor-14536 .rgv4-gallery .woocommerce-product-gallery .flex-viewport,
  .elementor-14536 .rgv4-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    margin-bottom: 12px;
    border-radius: 12px;
  }
  .elementor-14536 .rgv4-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { margin-bottom: 0; }
  .elementor-14536 .rgv4-gallery div.woocommerce-product-gallery.images .woocommerce-product-gallery__image > a { padding: 20px; }
  .elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav {
    grid-auto-columns: calc((100% - 4 * 10px) / 5.4);
    gap: 10px;
  }
  .elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav > li > img {
    padding: 5px;
    border-radius: 8px;
  }
  .elementor-14536 .rgv4-gallery .woocommerce-product-gallery ol.flex-control-thumbs.flex-control-nav > li > img.flex-active {
    padding: 4px;
  }
}

/* ------------------------------------------------------------------ */
/* 3. Buy box                                                          */
/* ------------------------------------------------------------------ */
.elementor-14536 .rgv4-top .rgv4-buybox.e-con {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-width: 0;
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
}
.elementor-14536 .rgv4-buybox.e-con > .elementor-element {
  width: 100%;
  max-width: 100%;
  margin: 0;
  flex: 0 0 auto;
}
/* visual order (bar A2): ... highlights, meta (SKU), then "Goes well with" last.
 * Production: drag the Product Meta widget above the pairs shortcode and drop these order rules. */
.elementor-14536 .rgv4-buybox.e-con > .rgv4-crumbs { order: 1; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-title { order: 2; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-pricerow { order: 3; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-stock { order: 4; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-atc { order: 5; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-highlights { order: 6; margin-top: 22px; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-meta { order: 7; margin-top: 20px; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-pairs { order: 8; margin-top: 24px; }
.elementor-14536 .rgv4-buybox.e-con > .rgv4-pairs:not(:has(.rgv4-gww)) { display: none; }

/* 3a. Breadcrumb: small, muted, and it ends at the category. The current-page crumb (the product
 * name, which is the H1 right below) is the bare text node after the last link, together with its
 * separator. CSS can't select a text node, so the trail's own text is set to font-size 0, the links
 * get their size back, and the separators are redrawn between the links (empty alt text, so screen
 * readers don't hear them twice; they still read the original trail). The live script that wraps
 * the last crumb in span.rg-bc-current doesn't matter: the span inherits the 0 size too.
 * Production equivalent: drop the last crumb with a woocommerce_get_breadcrumb filter
 * (notes/p1-import.md). */
.elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--rg-font-body);
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb::before,
.elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb::after { content: none; display: none; }
.elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb .rg-bc-current { display: none; }
.elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb a {
  display: inline-block;
  font-size: 13px;
  line-height: 20px;
  color: var(--rg-muted);
  text-decoration: none;
}
.elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb a + a::before {
  content: "/";
  content: "/" / "";
  display: inline-block;
  margin: 0 6px;
  color: var(--rg-muted);
  text-decoration: none;
}
.elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb a:hover {
  color: var(--rg-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  /* 44px tap height on the crumb links without making the row look taller */
  /* one line that scrolls sideways: deep trails never wrap into an orphaned "/" row (round 8) */
  .elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb {
    margin: 0 0 2px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* the trail fades out at the right edge when it runs past it, so it reads as scrollable */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  }
  .elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
  .elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb a { padding: 12px 0; }
}

/* 3b. Title */
.elementor-14536 .rgv4-title .product_title {
  margin: 0;
  font-family: var(--rg-font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rg-ink);
}

/* 3c. Price + rating on one line, hairline under it */
.elementor-14536 .rgv4-buybox .rgv4-pricerow.e-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 10px 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--rg-line);
}
.elementor-14536 .rgv4-buybox .rgv4-pricerow.e-con > .elementor-element {
  width: auto;
  max-width: 100%;
  margin: 0;
  flex: 0 1 auto;
}
.elementor-14536 .rgv4-pricerow .rgv4-price .price {
  margin: 0;
  font-family: var(--rg-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-pricerow .rgv4-price .price .amount,
.elementor-14536 .rgv4-pricerow .rgv4-price .price ins {
  color: var(--rg-ink);
  background: none;
  text-decoration: none;
  font-weight: 600;
}
.elementor-14536 .rgv4-pricerow .rgv4-price p.price del,
.elementor-14536 .rgv4-pricerow .rgv4-price p.price del .amount {
  margin-right: 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--rg-muted);
  opacity: 1;
}
.elementor-14536 .rgv4-rating .cr-reviews-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  line-height: 1;
}
.elementor-14536 .rgv4-rating .cr-reviews-rating .crstar-rating-svg { margin: 0; }
.elementor-14536 .rgv4-rating .cr-reviews-rating .crstar-rating-svg .cr-rating-icon-base,
.elementor-14536 .rgv4-rating .cr-reviews-rating .crstar-rating-svg .cr-rating-icon-frnt {
  height: 16px;
  column-gap: 2px;
}
.elementor-14536 .rgv4-rating .cr-reviews-rating .crstar-rating-svg .cr-rating-icon-base .cr-rating-icon-bg,
.elementor-14536 .rgv4-rating .cr-reviews-rating .crstar-rating-svg .cr-rating-icon-frnt .cr-rating-icon {
  width: 16px;
  height: 16px;
}
/* site paints the empty-star outline light grey !important; keep it in the star colour */
.elementor-14536 .rgv4-rating .cr-reviews-rating .crstar-rating-svg .cr-rating-icon-base svg path:not([stroke="none"]) {
  stroke: var(--rg-star) !important;
}
.elementor-14536 .rgv4-rating .cr-reviews-rating .crstar-rating-svg .cr-rating-icon-frnt svg path:not([stroke="none"]) {
  fill: var(--rg-star) !important;
  stroke: var(--rg-star) !important;
}
.elementor-14536 .rgv4-rating .cr-reviews-rating a.cr-review-link {
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--rg-muted);
  text-decoration: none;
  white-space: nowrap;
}
.elementor-14536 .rgv4-rating .cr-reviews-rating a.cr-review-link:hover {
  color: var(--rg-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 3d. Stock line (simple products when low/out of stock) */
.elementor-14536 .rgv4-stock .stock {
  margin: 0 0 16px;
  font-family: var(--rg-font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-stock .stock.out-of-stock { color: var(--rg-ink); font-weight: 600; }

/* 3e. Variations: "Color" label above Swatchly chips */
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations {
  width: 100%;
  margin: 0 0 18px;
  border: 0;
  border-collapse: collapse;
  background: none;
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations tbody { display: block; }
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations tr {
  position: relative;
  row-gap: 10px;
  margin: 0 0 16px;
  background: none;
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations tr:last-child { margin-bottom: 0; }
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations th.label,
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations td.value {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 20px;
  text-align: left;
}
/* flex: Swatchly appends <span> : Green</span> after a choice; flex trims its leading space
 * so it reads "Color: Green" (label stays full width) */
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations th.label label {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations th.label label .swatchly_selected_variation_name {
  font-weight: 400;
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations td.value select { display: none; }
/* "Clear" sits at the right end of the label line, so it never reserves a row of its own */
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations a.reset_variations {
  position: absolute;
  top: -12px;
  right: 0;
  margin: 0;
  padding: 12px 0 12px 16px;
  font-family: var(--rg-font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--rg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart table.variations a.reset_variations:hover { color: var(--rg-ink); }

/* Chips wrap as balanced lines (text-wrap: balance), so no chip is left alone on the last line
 * (product 1050 desktop: 4 + 2 instead of 5 + 1). That needs inline chips, so the wrapper is a block with
 * font-size 0 (drops the template whitespace between chips) and spacing comes from chip margins.
 * Browsers without text-wrap: balance wrap normally. */
.elementor-14536 .rgv4-atc .swatchly-type-wrap {
  display: block;
  margin: 0 0 -8px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-wrap: balance;
}
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  margin: 0 8px 8px 0;
  padding: 0 16px;
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch .swatchly-content {
  padding: 0;
  border: 0;
  background: none;
}
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch .swatchly-text {
  font: inherit;
  color: inherit;
  white-space: nowrap;
}
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch:hover { border-color: var(--rg-ink); }
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch.swatchly-selected {
  border-color: var(--rg-ink);
  box-shadow: inset 0 0 0 1px var(--rg-ink);
}
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
/* sold out: lighter than a buyable chip (no fill, hairline edge, muted struck label); a grey fill read as
 * the heaviest chip in the row, and a fill usually means "selected" (round 9 craft) */
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch.swatchly-disabled {
  opacity: 1;
  border-color: var(--rg-line);
  background: var(--rg-white);
  color: var(--rg-muted);
  text-decoration: line-through;
}
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch .swatchly-content::before,
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch .swatchly-content::after { display: none; }
.elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch .swatchly-tooltip { display: none; }

/* variation price / availability that Woo shows after a choice */
.elementor-14536 .rgv4-atc .single_variation_wrap { margin: 0; }
.elementor-14536 .rgv4-atc .woocommerce-variation.single_variation > div:not(:empty) { margin: 0 0 12px; }
.elementor-14536 .rgv4-atc .woocommerce-variation-price .price,
.elementor-14536 .rgv4-atc .woocommerce-variation-price .price .amount {
  font-family: var(--rg-font-display) !important;
  font-size: 22px;
  font-weight: 600 !important;
  color: var(--rg-ink) !important;
}
.elementor-14536 .rgv4-atc .woocommerce-variation-availability .stock,
.elementor-14536 .rgv4-atc .woocommerce-variation-description p {
  margin: 0;
  font-family: var(--rg-font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-atc .woocommerce-variation-availability .stock.out-of-stock { color: var(--rg-ink); font-weight: 600; }

/* 3f. The one filled button, full width. The quantity field is hidden in the V4 buy box (DankGeek
 * has none). Production: switch off "Quantity" in the Add to Cart widget (Elementor then hides it
 * with its own !important rule). The hidden input still posts quantity 1. !important is needed:
 * on variable products Woo calls jQuery .show() on .quantity after each choice (inline display).
 * Fill: ink with a white label (14:1, and a hard edge on white). The mint accent read too soft as
 * the main action (about 1.5:1 against the page); the design system allows either. */
.elementor-14536 .rgv4-atc .elementor-add-to-cart .quantity { display: none !important; }
.elementor-14536 .rgv4-atc .elementor-add-to-cart .woocommerce-variation-add-to-cart,
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
}
/* Woo's clearfix pseudo-elements would become empty flex items */
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart:not(.variations_form)::before,
.elementor-14536 .rgv4-atc .elementor-add-to-cart form.cart:not(.variations_form)::after,
.elementor-14536 .rgv4-atc .elementor-add-to-cart .woocommerce-variation-add-to-cart::before,
.elementor-14536 .rgv4-atc .elementor-add-to-cart .woocommerce-variation-add-to-cart::after {
  content: none;
  display: none;
}
/* site rule: body.single-product .single_add_to_cart_button {... !important} (fill, shadow, padding) */
.elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button {
  flex: 1 1 100%;
  float: none !important;
  width: 100%;
  min-height: 52px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rg-ink) !important;
  color: var(--rg-white) !important;
  font-family: var(--rg-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
/* keeps its ink after a tap (focus); only a real mouse hover lightens it (round 8: a tapped button sat
 * mid-grey and looked disabled) */
.elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button:focus {
  background: var(--rg-ink) !important;
  color: var(--rg-white) !important;
}
@media (hover: hover) {
  .elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button:hover {
    background: color-mix(in srgb, var(--rg-ink) 85%, var(--rg-white)) !important;
    color: var(--rg-white) !important;
  }
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--rg-ink) !important;
  outline-offset: 2px;
}
/* No option picked yet (Jared decision #1: no default colour, the shopper picks one). The button
 * stays solid and clickable; a click before a pick shows the "Choose a color" line and flags the
 * option row (pairs.js) instead of Woo's browser alert. Only a sold-out choice reads as unavailable. */
.elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button.disabled {
  background: var(--rg-ink) !important;
  color: var(--rg-white) !important;
  opacity: 1 !important;
  cursor: pointer;
}
@media (hover: hover) {
  .elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button.disabled:hover {
    background: color-mix(in srgb, var(--rg-ink) 85%, var(--rg-white)) !important;
  }
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button.wc-variation-is-unavailable {
  opacity: .45 !important;
  cursor: not-allowed;
}
/* the message line below the button (empty = no space), so the button never moves under the cursor */
.elementor-14536 .rgv4-atc .single_variation_wrap .rgv4-pick {
  margin: 0;
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-atc .single_variation_wrap .rgv4-pick:not(:empty) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}
/* small ink "i" disc in front of the message (CSS shape, no icon font) */
.elementor-14536 .rgv4-atc .single_variation_wrap .rgv4-pick:not(:empty)::before {
  content: "i";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rg-ink);
  color: var(--rg-white);
  font-family: var(--rg-font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
/* the option row asks for a pick: its label reads "Color - choose one" (painted; the real message line is
 * the role=status text under the button). Chips keep their resting edge, so none reads as selected, and
 * nothing moves (Jared #4; round 8 craft: a tint panel looked lopsided and crowded the button). */
.elementor-14536 .rgv4-atc .rgv4-need-pick table.variations th.label label::after {
  content: "\00B7  choose one";
  margin-left: 6px;
  color: var(--rg-ink);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor-14536 .rgv4-atc .elementor-add-to-cart .single_add_to_cart_button.loading { opacity: .7 !important; }

/* 3g. The live trust row (.rg-bb-trust, sandbox rg-buybox-trust.php) stays (Jared #3, 2026-10-07), in
 * our style: ink ticks instead of the live #36c95f green, Poppins 13px ink, 2x2 grid under a hairline.
 * Its own inline <style> is body.single-product-scoped (0,2,2); these rules outrank it. */
.elementor-14536 .rgv4-buybox .rg-bb-trust {
  display: grid;
  grid-template-columns: repeat(2, max-content); /* each column as wide as its longest line */
  justify-content: start;
  gap: 10px 32px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rg-line);
}
.elementor-14536 .rgv4-buybox .rg-bb-trust .rg-bb-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-buybox .rg-bb-trust .rg-bb-item svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--rg-ink);
}

/* 3h. Highlights = the short description (list on current products, raw line on legacy ones) */
/* Bold inside the live short description is SEO keyword markup (e.g. #2112 "The <strong>14mm Horn Screen
 * Bowl</strong> is..."): it reads as plain text, the same rule the story panel uses (P2). */
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description strong,
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description b {
  font-weight: inherit;
}
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description {
  font-family: var(--rg-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description::before {
  content: "Highlights";
  display: block;
  margin: 0 0 8px;
  font-family: var(--rg-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description li,
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description > p {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  border: 0;
  list-style: none;
}
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description > p + p { margin-top: 4px; }
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description li::first-letter,
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description > p::first-letter {
  text-transform: uppercase;
}
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description li::before,
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description > p::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rg-ink);
  box-shadow: none;
}
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description p a,
.elementor-14536 .rgv4-highlights .woocommerce-product-details__short-description li a {
  color: var(--rg-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 3i. Meta: SKU only (categories and tags already live in the breadcrumb and the category row) */
.elementor-14536 .rgv4-meta .product_meta {
  display: block;
  padding: 14px 0 0;
  border-top: 1px solid var(--rg-line);
  font-family: var(--rg-font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-meta .product_meta > .posted_in,
.elementor-14536 .rgv4-meta .product_meta > .tagged_as { display: none; }
.elementor-14536 .rgv4-meta .product_meta .detail-container { position: static; }
.elementor-14536 .rgv4-meta .product_meta .detail-container::after { content: none; display: none; }
/* flex drops the template whitespace around "SKU", so the colon sits tight against it */
.elementor-14536 .rgv4-meta .product_meta .sku_wrapper {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.elementor-14536 .rgv4-meta .product_meta .detail-label {
  display: inline-flex;
  font-weight: 400;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-meta .product_meta .sku_wrapper .detail-label::after { content: ":"; }
.elementor-14536 .rgv4-meta .product_meta .sku { color: var(--rg-muted); }

/* 3j. Kit card (Jared 2026-10-11): a banger that is also sold as a kit shows the kit as its own small
 * card right above the SKU: photo, "Also sold as a kit", name, price and a "Shop the kit" pill. Same look
 * as the "Goes well with" cards (tint card, white photo tile, Poppins 500 name, Jost 600 price); the
 * whole card is one link, the pill is the secondary style (rule 5: 1px ink outline), 44px on phones. */
.elementor-14536 .rgv4-meta .rgv4-kit {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "thumb body" "thumb cta";
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
  margin: 0 0 14px;
  padding: 10px;
  border-radius: 16px;
  background: var(--rg-tint);
  color: var(--rg-ink);
  text-decoration: none;
}
.elementor-14536 .rgv4-meta .rgv4-kit:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-meta .rgv4-kit__thumb {
  grid-area: thumb;
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--rg-white);
}
.elementor-14536 .rgv4-meta .rgv4-kit__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}
.elementor-14536 .rgv4-meta .rgv4-kit__body {
  grid-area: body;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.elementor-14536 .rgv4-meta .rgv4-kit__note {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-meta .rgv4-kit__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-meta .rgv4-kit__price {
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-meta .rgv4-kit__price .amount,
.elementor-14536 .rgv4-meta .rgv4-kit__price ins {
  color: var(--rg-ink);
  background: none;
  text-decoration: none;
}
.elementor-14536 .rgv4-meta .rgv4-kit__price del,
.elementor-14536 .rgv4-meta .rgv4-kit__price del .amount {
  margin-right: 4px;
  font-weight: 400;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-meta .rgv4-kit__cta {
  grid-area: cta;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.elementor-14536 .rgv4-meta .rgv4-kit__cta::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) {
  .elementor-14536 .rgv4-meta .rgv4-kit:hover .rgv4-kit__name { text-decoration: underline; text-underline-offset: 3px; }
  .elementor-14536 .rgv4-meta .rgv4-kit:hover .rgv4-kit__cta { background: var(--rg-line); }
}
@media (max-width: 767px) {
  .elementor-14536 .rgv4-meta .rgv4-kit__cta { min-height: 44px; }
}

/* ------------------------------------------------------------------ */
/* 4. "Goes well with" (slot [rg_pdp_pairs], markup in slots/pairs.js)  */
/* ------------------------------------------------------------------ */
.elementor-14536 .rgv4-gww { margin: 0; }
.elementor-14536 .rgv4-gww__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.elementor-14536 .rgv4-gww .rgv4-gww__title {
  margin: 0;
  font-family: var(--rg-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-gww__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.elementor-14536 .rgv4-gww--fits .rgv4-gww__nav { display: none; }
.elementor-14536 .rgv4-gww .rgv4-gww__arrow {
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.elementor-14536 .rgv4-gww .rgv4-gww__arrow:hover,
.elementor-14536 .rgv4-gww .rgv4-gww__arrow:focus {
  background: var(--rg-tint);
  border-color: var(--rg-ink);
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-gww .rgv4-gww__arrow:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-gww .rgv4-gww__arrow:disabled,
.elementor-14536 .rgv4-gww .rgv4-gww__arrow:disabled:hover {
  background: var(--rg-white);
  border-color: var(--rg-ink);
  color: var(--rg-ink);
  opacity: .3;
  cursor: default;
}
.elementor-14536 .rgv4-gww .rgv4-gww__arrow svg { width: 18px; height: 18px; display: block; }

/* position: relative matters: it makes the track the containing block for anything absolutely
 * positioned inside the cards (the CTA's screen-reader text). Without it, those boxes escape the
 * track's overflow clipping and widen the page on phones (layout 690-1225px wide, found round 3). */
.elementor-14536 .rgv4-gww .rgv4-gww__track {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.elementor-14536 .rgv4-gww .rgv4-gww__track::-webkit-scrollbar { display: none; }
.elementor-14536 .rgv4-gww .rgv4-gww__item {
  flex: 0 0 88%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
.elementor-14536 .rgv4-gww--single .rgv4-gww__item { flex-basis: 100%; }
/* Card: thumbnail left; name + price, then the quick-add row under them (desktop). Phones put the
 * quick-add row across the full card width under thumbnail + text (see the phone block). */
.elementor-14536 .rgv4-gww .rgv4-gww__card {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "thumb body" "thumb buy";
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  height: 100%;
  padding: 10px;
  border-radius: 16px;
  background: var(--rg-tint);
}
.elementor-14536 .rgv4-gww .rgv4-gww__thumb {
  grid-area: thumb;
  align-self: center;
  display: block;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--rg-white);
}
.elementor-14536 .rgv4-gww .rgv4-gww__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}
.elementor-14536 .rgv4-gww .rgv4-gww__body {
  grid-area: body;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.elementor-14536 .rgv4-gww .rgv4-gww__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  /* loop/carousel card titles: Poppins 500 (design-system rule 2, clarified 2026-10-07). !important:
   * the kit sets .elementor-kit-22 h1-h6 { font-family: Jost !important } (P3 related cards do the same). */
  font-family: var(--rg-font-body) !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-gww .rgv4-gww__name a {
  color: var(--rg-ink);
  text-decoration: none;
}
.elementor-14536 .rgv4-gww .rgv4-gww__name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elementor-14536 .rgv4-gww .rgv4-gww__price {
  font-family: var(--rg-font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-gww .rgv4-gww__price .amount,
.elementor-14536 .rgv4-gww .rgv4-gww__price ins {
  color: var(--rg-ink);
  background: none;
  text-decoration: none;
}
.elementor-14536 .rgv4-gww .rgv4-gww__price del,
.elementor-14536 .rgv4-gww .rgv4-gww__price del .amount {
  margin-right: 4px;
  font-weight: 400;
  color: var(--rg-muted);
}
/* quick-add row: [option picker] [Add to cart], or the button alone */
.elementor-14536 .rgv4-gww .rgv4-gww__buy {
  grid-area: buy;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.elementor-14536 .rgv4-gww .rgv4-gww__sel {
  position: relative;
  flex: 1 1 96px;
  min-width: 0;
}
/* chevron: CSS border shape (design-system rule 10) */
.elementor-14536 .rgv4-gww .rgv4-gww__sel::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid var(--rg-ink);
  border-bottom: 1.5px solid var(--rg-ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.elementor-14536 .rgv4-gww select.rgv4-gww__opt {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 32px 0 14px;
  border: 1px solid var(--rg-muted);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  cursor: pointer;
}
.elementor-14536 .rgv4-gww .rgv4-gww__buy:not(.is-chosen) select.rgv4-gww__opt { color: var(--rg-muted); }
.elementor-14536 .rgv4-gww select.rgv4-gww__opt:hover { border-color: var(--rg-ink); }
.elementor-14536 .rgv4-gww select.rgv4-gww__opt:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-gww .rgv4-gww__buy.is-missing select.rgv4-gww__opt {
  border-color: var(--rg-ink);
  box-shadow: inset 0 0 0 1px var(--rg-ink);
}
.elementor-14536 .rgv4-gww .rgv4-gww__fixed {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--rg-font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--rg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elementor-14536 .rgv4-gww .rgv4-gww__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0 0 0 auto;
  padding: 0 16px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.elementor-14536 .rgv4-gww .rgv4-gww__cta:hover {
  background: var(--rg-tint);
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-gww .rgv4-gww__cta:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-gww .rgv4-gww__cta.is-loading { cursor: progress; }
/* "Added": same outline pill and width (the buy box keeps one filled button), a CSS tick in front */
.elementor-14536 .rgv4-gww .rgv4-gww__cta.is-added,
.elementor-14536 .rgv4-gww .rgv4-gww__cta.is-added:hover {
  gap: 8px;
  background: var(--rg-white);
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-gww .rgv4-gww__cta.is-added::before {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -3px;
  border-right: 2px solid var(--rg-ink);
  border-bottom: 2px solid var(--rg-ink);
  transform: rotate(45deg);
}
.elementor-14536 .rgv4-gww a:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-gww .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* tablet (single column, wide buy box): about two cards plus a peek */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-14536 .rgv4-gww .rgv4-gww__item { flex-basis: 46%; }
  .elementor-14536 .rgv4-gww--single .rgv4-gww__item { flex-basis: 100%; }
}
/* phones: about 1.4 cards at 390; never narrower than thumb + CTA (248px), so the pill always fits */
@media (max-width: 767px) {
  .elementor-14536 .rgv4-gww .rgv4-gww__arrow { width: 44px; height: 44px; }
  .elementor-14536 .rgv4-gww .rgv4-gww__item { flex-basis: max(69%, 248px); }
  .elementor-14536 .rgv4-gww--single .rgv4-gww__item { flex-basis: 100%; }
  .elementor-14536 .rgv4-gww .rgv4-gww__card {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "thumb body" "buy buy";
    column-gap: 12px;
    padding: 10px;
  }
  .elementor-14536 .rgv4-gww .rgv4-gww__body { align-self: center; }
  .elementor-14536 .rgv4-gww .rgv4-gww__buy { align-self: end; flex-wrap: nowrap; }
  .elementor-14536 .rgv4-gww .rgv4-gww__thumb { width: 80px; height: 80px; }
  .elementor-14536 .rgv4-gww select.rgv4-gww__opt { height: 44px; line-height: 42px; }
  .elementor-14536 .rgv4-gww .rgv4-gww__cta { min-height: 44px; padding: 0 14px; }

}

/* ------------------------------------------------------------------ */
/* 5. Phone sizes                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-14536 .rgv4-title .product_title { font-size: 24px; line-height: 1.25; }
  .elementor-14536 .rgv4-pricerow .rgv4-price .price { font-size: 24px; }
  .elementor-14536 .rgv4-atc .swatchly-type-wrap .swatchly-swatch { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-14536 .rgv4-gww .rgv4-gww__track { scroll-behavior: auto; }
  .elementor-14536 .rgv4-gallery *,
  .elementor-14536 .rgv4-gallery *::before,
  .elementor-14536 .rgv4-gallery *::after,
  .elementor-14536 .rgv4-buybox *,
  .elementor-14536 .rgv4-buybox *::before,
  .elementor-14536 .rgv4-buybox *::after { transition: none !important; }
}

/* 320-359px phones: the trust row stacks so no item wraps */
@media (max-width: 359px) {
  .elementor-14536 .rgv4-buybox .rg-bb-trust { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* ---- p2-accordions.css ---- */
/* PDP V4, piece 2: the accordion stack ([rg_pdp_accordions] inside .rgv4-accordions).
 * One row rhythm: every header is the same Jost 600 row, chevron at the right edge, --rg-line
 * hairlines, ~96px pitch on desktop and ~72px on mobile. Panel bodies are 15px.
 * Type sizes: titles 22/20px (= the reviews heading), story subheads 18/17px, body 15px.
 * Every selector starts with .elementor-14536 (ships sitewide on import). Tokens: src/base.css. */

.elementor-14536 .rgv4-acc {
  --acc-pad-y: 33px;      /* 22px x 1.3 title + 2 x 33px + 1px hairline = ~96px row pitch */
  --acc-title: 22px;
  --acc-sub: 18px;
  --acc-text: 15px;
  --acc-gap: 14px;
  interpolate-size: allow-keywords;   /* lets the panel height animate to auto (Chromium) */
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--rg-font-body);
  font-size: var(--acc-text);
  color: var(--rg-ink);
  text-align: left;
}

/* ---------- Rows ---------------------------------------------------------------------------- */

.elementor-14536 .rgv4-acc__item {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rg-line);
  background: none;
  scroll-margin-top: calc(var(--rgv4-header-h, 0px) + 16px);   /* hash links clear the sticky header */
}
.elementor-14536 .rgv4-acc__item:first-child { border-top: 1px solid var(--rg-line); }

.elementor-14536 .rgv4-acc__sum {
  display: block;
  position: relative;
  margin: 0;
  padding: var(--acc-pad-y) 56px var(--acc-pad-y) 0;
  list-style: none;
  cursor: pointer;
  color: var(--rg-ink);
  background: none;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.elementor-14536 .rgv4-acc__sum::-webkit-details-marker { display: none; }
.elementor-14536 .rgv4-acc__sum::marker { content: ""; }
.elementor-14536 .rgv4-acc__sum:focus { outline: none; }
.elementor-14536 .rgv4-acc__sum:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 4px; }

/* Jost 600: the bar's "bold display face", and the same weight as the reviews heading right
 * above the stack. Story subheads inside panels stay Jost 500. */
.elementor-14536 .rgv4-acc__title {
  margin: 0;
  padding: 0;
  font-family: var(--rg-font-display);
  font-size: var(--acc-title);
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--rg-ink);
}

/* Chevron: a CSS border shape (the theme strips fills from inline SVG). It sits in a 32px circle
 * that tints on hover; the circle overhangs by 8px so the chevron lines up with the hairline end. */
.elementor-14536 .rgv4-acc__chev {
  position: absolute;
  top: 50%;
  right: -8px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 999px;
  background: transparent;
  pointer-events: none;
}
.elementor-14536 .rgv4-acc__chev::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -7px 0 0 -5px;
  border-right: 1.5px solid var(--rg-ink);
  border-bottom: 1.5px solid var(--rg-ink);
  transform: rotate(45deg);
}
.elementor-14536 .rgv4-acc__item[open] > .rgv4-acc__sum .rgv4-acc__chev::before {
  margin-top: -2px;
  transform: rotate(-135deg);
}
@media (hover: hover) {
  .elementor-14536 .rgv4-acc__sum:hover .rgv4-acc__chev { background: var(--rg-tint); }
}

/* ---------- Panel body ---------------------------------------------------------------------- */

.elementor-14536 .rgv4-acc__body {
  margin: 0;
  padding: 0 0 36px;
  font-family: var(--rg-font-body);
  font-size: var(--acc-text);
  font-weight: 400;
  line-height: 1.7;
  color: var(--rg-ink);
  overflow-wrap: break-word;
}
.elementor-14536 .rgv4-acc__body p {
  margin: 0 0 var(--acc-gap);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.elementor-14536 .rgv4-acc__body > :last-child,
.elementor-14536 .rgv4-acc__body > :last-child > :last-child { margin-bottom: 0; }

/* Links in copy: ink with a quiet underline (the kit paints body links blue, the short
 * description green; neither belongs here). */
.elementor-14536 .rgv4-acc__body a {
  color: var(--rg-ink);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--rg-ink) 45%, var(--rg-white));
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.elementor-14536 .rgv4-acc__body a:hover,
.elementor-14536 .rgv4-acc__body a:focus-visible {
  color: var(--rg-ink);
  text-decoration-color: var(--rg-ink);
}
.elementor-14536 .rgv4-acc__body a:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; border-radius: 2px; }

/* ---------- Story: whatever format the description arrives in -------------------------------- */

/* Keyword bold inside sentences is SEO markup: plain text here, so paragraphs read cleanly.
 * Lead-ins (bold that opens a paragraph or list item, marked by the renderer) stay bold. */
.elementor-14536 .rgv4-acc__story strong,
.elementor-14536 .rgv4-acc__story b { font-weight: inherit; color: inherit; }
.elementor-14536 .rgv4-acc__story .rgv4-acc__lead { font-weight: 600; }
.elementor-14536 .rgv4-acc__story em { font-style: italic; }
.elementor-14536 .rgv4-acc__story > :last-child { margin-bottom: 0; }

/* Copy that starts lowercase (#1255 "upgrade your Dabbing Experience", #9334 "quality puffco peak
 * top upgrade") gets a capital first letter. The words stay exactly as written. */
.elementor-14536 .rgv4-acc__title::first-letter,
.elementor-14536 .rgv4-acc__story .rgv4-acc__sub::first-letter,
.elementor-14536 .rgv4-acc__story li::first-letter { text-transform: uppercase; }

/* Default view (JS adds .is-clamped): the opening paragraph, the main list with its subhead, and
 * the closing line. Every other block (.rgv4-acc__extra) waits behind "Read more" and is revealed
 * in place, so the full story keeps its order. Without JS the whole story shows.
 * .rgv4-acc__tail is the last block of the default view. */
.elementor-14536 .rgv4-acc__story.is-clamped > .rgv4-acc__extra { display: none; }
.elementor-14536 .rgv4-acc__story.is-clamped > .rgv4-acc__tail { margin-bottom: 0; }

/* "Read more" moves focus and scroll to the first revealed block: clear the sticky header, and
 * show an ink ring only to keyboard users. */
.elementor-14536 .rgv4-acc__story > * { scroll-margin-top: calc(var(--rgv4-header-h, 0px) + 24px); }
.elementor-14536 .rgv4-acc__story > [tabindex="-1"]:focus { outline: none; }
.elementor-14536 .rgv4-acc__story > [tabindex="-1"]:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 6px;
  border-radius: 4px;
}

/* "Read more": secondary pill under the default view. */
.elementor-14536 .rgv4-acc__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 22px 0 0;
  padding: 0 24px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  box-shadow: none;
  font-family: var(--rg-font-body);
  font-size: var(--acc-text);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--rg-ink);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.elementor-14536 .rgv4-acc__more[hidden] { display: none; }
.elementor-14536 .rgv4-acc__more:hover,
.elementor-14536 .rgv4-acc__more:focus-visible {
  background: var(--rg-ink);
  border-color: var(--rg-ink);
  color: var(--rg-white);
}
.elementor-14536 .rgv4-acc__more:focus { outline: none; }
.elementor-14536 .rgv4-acc__more:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 3px; }

.elementor-14536 .rgv4-acc__story .rgv4-acc__sub {
  margin: 30px 0 10px;
  padding: 0;
  font-family: var(--rg-font-display);
  font-size: var(--acc-sub);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-acc__story .rgv4-acc__sub strong,
.elementor-14536 .rgv4-acc__story .rgv4-acc__sub b { font-weight: inherit; }
.elementor-14536 .rgv4-acc__story > .rgv4-acc__sub:first-child { margin-top: 0; }

.elementor-14536 .rgv4-acc__story ul,
.elementor-14536 .rgv4-acc__story ol {
  margin: 0 0 var(--acc-gap);
  padding: 0;
  list-style: none;
}
.elementor-14536 .rgv4-acc__story li {
  position: relative;
  margin: 0 0 6px;
  padding: 0 0 0 22px;
  font-size: inherit;
  line-height: inherit;
}
.elementor-14536 .rgv4-acc__story li:last-child { margin-bottom: 0; }
.elementor-14536 .rgv4-acc__story li > p { margin: 0; }
.elementor-14536 .rgv4-acc__story ul > li::before {
  content: "";
  position: absolute;
  top: calc(0.85em - 2.5px);
  left: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rg-ink);
}
.elementor-14536 .rgv4-acc__story ol { counter-reset: rgv4-acc-ol; }
.elementor-14536 .rgv4-acc__story ol > li { counter-increment: rgv4-acc-ol; padding-left: 26px; }
.elementor-14536 .rgv4-acc__story ol > li::before {
  content: counter(rgv4-acc-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
}
.elementor-14536 .rgv4-acc__story img,
.elementor-14536 .rgv4-acc__story video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 12px;
}
.elementor-14536 .rgv4-acc__story iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 20px 0;
  border: 0;
  border-radius: 12px;
}
.elementor-14536 .rgv4-acc__story table { display: block; max-width: 100%; overflow-x: auto; }

/* ---------- Specifications ------------------------------------------------------------------ */

/* Keys never wrap, so every row keeps the same rhythm. Auto layout lets the key column grow past
 * its 36% to fit the longest key when the column is narrow (mobile hugs the keys, below); values
 * wrap instead, and overflow-wrap: anywhere keeps them from widening the table (no side scroll). */
.elementor-14536 .rgv4-acc__specs {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background: none;
  font-size: var(--acc-text);
}
.elementor-14536 .rgv4-acc__specs th,
.elementor-14536 .rgv4-acc__specs td {
  padding: 12px 16px;
  border: 0;
  background: transparent;
  font-family: var(--rg-font-body);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.elementor-14536 .rgv4-acc__specs th { width: 36%; white-space: nowrap; color: var(--rg-muted); }
.elementor-14536 .rgv4-acc__specs td { color: var(--rg-ink); overflow-wrap: anywhere; }
.elementor-14536 .rgv4-acc__specs tr:nth-child(odd) > th,
.elementor-14536 .rgv4-acc__specs tr:nth-child(odd) > td { background: var(--rg-tint); }
.elementor-14536 .rgv4-acc__specs tr > th { border-radius: 8px 0 0 8px; }
.elementor-14536 .rgv4-acc__specs tr > td { border-radius: 0 8px 8px 0; }

/* ---------- Numbered steps (How to use, Care & cleaning) ------------------------------------ */

.elementor-14536 .rgv4-acc__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rgv4-acc-step;
}
.elementor-14536 .rgv4-acc__steps > li {
  position: relative;
  min-height: 28px;
  margin: 0 0 var(--acc-gap);
  padding: 1px 0 0 44px;
  counter-increment: rgv4-acc-step;
}
.elementor-14536 .rgv4-acc__steps > li:last-child { margin-bottom: 0; }
.elementor-14536 .rgv4-acc__steps > li::before {
  content: counter(rgv4-acc-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  font-family: var(--rg-font-display);
  font-size: var(--acc-text);
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  color: var(--rg-ink);
}

/* ---------- What's included ------------------------------------------------------------------ */

.elementor-14536 .rgv4-acc__group + .rgv4-acc__group { margin-top: 18px; }
/* "Not included" sits apart in a tint panel, so it can't be read as part of the box contents. */
.elementor-14536 .rgv4-acc__group--not {
  padding: 14px 18px 16px;
  border-radius: 12px;
  background: var(--rg-tint);
}
.elementor-14536 .rgv4-acc__body .rgv4-acc__label {
  margin: 0 0 6px;
  font-weight: 500;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-acc__checks,
.elementor-14536 .rgv4-acc__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-14536 .rgv4-acc__checks > li,
.elementor-14536 .rgv4-acc__bullets > li {
  position: relative;
  margin: 0 0 8px;
  padding: 0 0 0 30px;
}
.elementor-14536 .rgv4-acc__checks > li:last-child,
.elementor-14536 .rgv4-acc__bullets > li:last-child { margin-bottom: 0; }
/* check mark */
.elementor-14536 .rgv4-acc__checks > li::before {
  content: "";
  position: absolute;
  top: calc(0.85em - 8px);
  left: 6px;
  width: 6px;
  height: 11px;
  border-right: 1.5px solid var(--rg-ink);
  border-bottom: 1.5px solid var(--rg-ink);
  transform: rotate(45deg);
}
/* cross for "Not included" */
.elementor-14536 .rgv4-acc__checks--not > li::before,
.elementor-14536 .rgv4-acc__checks--not > li::after {
  content: "";
  position: absolute;
  top: calc(0.85em - 0.75px);
  left: 3px;
  width: 13px;
  height: 0;
  border: 0;
  border-top: 1.5px solid var(--rg-ink);
  transform: rotate(45deg);
}
.elementor-14536 .rgv4-acc__checks--not > li::after { transform: rotate(-45deg); }
/* plain bullets (Shipping & returns) */
.elementor-14536 .rgv4-acc__bullets > li { padding-left: 22px; }
.elementor-14536 .rgv4-acc__bullets > li::before {
  content: "";
  position: absolute;
  top: calc(0.85em - 2.5px);
  left: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rg-ink);
}

/* ---------- Text links (guide, policies) and category chips ---------------------------------- */

.elementor-14536 .rgv4-acc__body .rgv4-acc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 18px 0 0;
}
.elementor-14536 .rgv4-acc__body .rgv4-acc__link {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  text-decoration-color: var(--rg-ink);
}
.elementor-14536 .rgv4-acc__body .rgv4-acc__link:hover { text-decoration-thickness: 2px; }

.elementor-14536 .rgv4-acc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.elementor-14536 .rgv4-acc__chips > li { margin: 0; padding: 0; }
.elementor-14536 .rgv4-acc__body .rgv4-acc__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  font-family: var(--rg-font-body);
  font-size: var(--acc-text);
  font-weight: 600;
  line-height: 1.2;
  color: var(--rg-ink);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.elementor-14536 .rgv4-acc__body .rgv4-acc__chip:hover,
.elementor-14536 .rgv4-acc__body .rgv4-acc__chip:focus-visible {
  background: var(--rg-ink);
  color: var(--rg-white);
  text-decoration: none;
}

/* ---------- Motion (progressive: Chromium animates height, others open instantly) ----------- */

@media (prefers-reduced-motion: no-preference) {
  .elementor-14536 .rgv4-acc__chev { transition: background-color .2s ease; }
  .elementor-14536 .rgv4-acc__chev::before { transition: transform .3s ease, margin .3s ease; }
}
@media (prefers-reduced-motion: no-preference) {
  .elementor-14536 .rgv4-acc__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }
  .elementor-14536 .rgv4-acc__item[open]::details-content { block-size: auto; }
  .elementor-14536 .rgv4-acc.is-instant .rgv4-acc__item::details-content { transition: none; }
}
.elementor-14536 .rgv4-acc.is-instant .rgv4-acc__chev::before { transition: none; }

/* ---------- Mobile ---------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .elementor-14536 .rgv4-acc {
    --acc-pad-y: 23px;    /* 20px x 1.3 + 2 x 23px + 1px = ~73px row pitch */
    --acc-title: 20px;
    --acc-sub: 17px;
    /* 16px gutter from the screen edge, whatever padding the column already has (none if it
     * already gives 16px or more). */
    padding-left: max(0px, calc(16px - (100vw - 100%) / 2));
    padding-right: max(0px, calc(16px - (100vw - 100%) / 2));
  }
  .elementor-14536 .rgv4-acc__sum { padding-right: 48px; }
  .elementor-14536 .rgv4-acc__body { padding-bottom: 28px; }
  .elementor-14536 .rgv4-acc__specs th { width: 1%; }   /* hug the longest key; values get the rest */
  .elementor-14536 .rgv4-acc__specs th,
  .elementor-14536 .rgv4-acc__specs td { padding: 11px 12px; }
  .elementor-14536 .rgv4-acc__body .rgv4-acc__links { gap: 0 24px; margin-top: 8px; }
  .elementor-14536 .rgv4-acc__body .rgv4-acc__link { min-height: 44px; }
}

/* ---- p3-below.css ---- */
/* PDP V4, piece 3: everything below the product area.
 *   .rgv4-faq      FAQ band (tint)            slot [rg_pdp_faq]
 *   .rgv4-trust    trust strip (white)        slot [rg_pdp_trust]
 *   .rgv4-cats     related categories (tint)  slot [rg_pdp_cats]
 *   .rgv4-related  "You may also like" (white) = native Woo related-products widget, CSS only
 * Bands alternate tint / white. Every selector is scoped under .elementor-14536; colours come
 * from the base.css tokens only. Type scale for this piece: section heading (28/22px), body
 * (16px), small (14px); prices are Jost 600.
 */

/* ------------------------------------------------------------------ band shells */
.elementor-14536 .rgv4-faq.e-con,
.elementor-14536 .rgv4-trust.e-con,
.elementor-14536 .rgv4-cats.e-con,
.elementor-14536 .rgv4-related.e-con {
  --rgv4-max: 1280px;
  --rgv4-gut: 24px;
  /* side padding that centres a --rgv4-max column; only valid on full-band-width boxes */
  --rgv4-pad: max(var(--rgv4-gut), calc((100% - var(--rgv4-max)) / 2));
  --rgv4-band-y: 88px;
  --rgv4-head-gap: 36px;
  --rgv4-h2: 28px;
  --rgv4-t1: 16px;
  --rgv4-t2: 14px;
  --rgv4-hair: var(--rg-line);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: var(--rgv4-band-y) 0;
  gap: 0;
  border: 0;
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
}
.elementor-14536 .rgv4-faq.e-con { background-color: var(--rg-tint); }
.elementor-14536 .rgv4-trust.e-con { background-color: var(--rg-white); --rgv4-band-y: 72px; }
.elementor-14536 .rgv4-cats.e-con { background-color: var(--rg-tint); }
.elementor-14536 .rgv4-related.e-con { background-color: var(--rg-white); }

/* the single widget inside each band spans the band */
.elementor-14536 .rgv4-faq.e-con > .elementor-widget,
.elementor-14536 .rgv4-trust.e-con > .elementor-widget,
.elementor-14536 .rgv4-cats.e-con > .elementor-widget,
.elementor-14536 .rgv4-related.e-con > .elementor-widget {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* an empty slot (no FAQ, no trust items, no categories, no related products) hides its band */
.elementor-14536 .rgv4-faq.e-con:not(:has(.rgv4-faqs)),
.elementor-14536 .rgv4-trust.e-con:not(:has(.rgv4-trusts)),
.elementor-14536 .rgv4-cats.e-con:not(:has(.rgv4-catlist)),
.elementor-14536 .rgv4-related.e-con:not(:has(li.product)) {
  display: none;
}

/* shared section heading */
.elementor-14536 .rgv4-faqs__title,
.elementor-14536 .rgv4-trusts__title,
.elementor-14536 .rgv4-catlist__title {
  margin: 0;
  padding: 0;
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: var(--rgv4-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rg-ink);
}

/* inline line icons inherit ink */
.elementor-14536 .rgv4-faqs svg,
.elementor-14536 .rgv4-trusts svg,
.elementor-14536 .rgv4-catlist svg {
  display: block;
  flex: none;
  color: var(--rg-ink);
  overflow: visible;
}

/* ------------------------------------------------------------------ 1. FAQ band */
.elementor-14536 .rgv4-faqs {
  max-width: calc(770px + 2 * var(--rgv4-gut));
  margin: 0 auto;
  padding: 0 var(--rgv4-gut);
}
.elementor-14536 .rgv4-faqs__title {
  max-width: 660px;
  margin: 0 auto var(--rgv4-head-gap);
  text-align: center;
  text-wrap: balance;
}
.elementor-14536 .rgv4-faqs__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rgv4-hair);
}
.elementor-14536 .rgv4-faqs__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rgv4-hair);
}
.elementor-14536 .rgv4-faqs__q {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  margin: 0;
  padding: 18px 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rgv4-t1);
  line-height: 1.45;
  color: var(--rg-ink);
  -webkit-tap-highlight-color: transparent;
}
.elementor-14536 .rgv4-faqs__q::-webkit-details-marker { display: none; }
.elementor-14536 .rgv4-faqs__q::marker { content: ""; }
.elementor-14536 .rgv4-faqs__qtext {
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s ease;
}
.elementor-14536 .rgv4-faqs__q:hover .rgv4-faqs__qtext {
  text-decoration-color: color-mix(in srgb, var(--rg-ink) 45%, transparent);
}
.elementor-14536 .rgv4-faqs__q:focus { outline: none; }
.elementor-14536 .rgv4-faqs__q:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
  border-radius: 8px;
}
.elementor-14536 .rgv4-faqs__qicon { width: 22px; height: 22px; }
.elementor-14536 .rgv4-faqs__chev {
  width: 20px;
  height: 20px;
  transition: transform .25s ease;
}
.elementor-14536 .rgv4-faqs__item[open]:not(.is-closing) .rgv4-faqs__chev { transform: rotate(180deg); }
.elementor-14536 .rgv4-faqs__a {
  overflow: hidden;
  padding: 0 36px 22px 38px;
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rgv4-t1);
  line-height: 1.65;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-faqs__a p,
.elementor-14536 .rgv4-faqs__a ul,
.elementor-14536 .rgv4-faqs__a ol {
  margin: 0 0 12px;
  padding: 0;
  font: inherit;
  color: inherit;
}
.elementor-14536 .rgv4-faqs__a ul,
.elementor-14536 .rgv4-faqs__a ol { padding-left: 20px; }
.elementor-14536 .rgv4-faqs__a > :last-child { margin-bottom: 0; }
.elementor-14536 .rgv4-faqs__a a {
  color: var(--rg-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.elementor-14536 .rgv4-faqs__a a:hover { text-decoration-thickness: 2px; }

/* store-policy group under its own subheading, same band */
.elementor-14536 .rgv4-faqs__group { margin-top: 56px; }
.elementor-14536 .rgv4-faqs__group--solo { margin-top: 0; }
.elementor-14536 .rgv4-faqs__sub {
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: var(--rgv4-t1);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-faqs__more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 18px 0 0;
  padding: 0;
}
.elementor-14536 .rgv4-faqs__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rgv4-t2);
  line-height: 1.3;
  color: var(--rg-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.elementor-14536 .rgv4-faqs__link:hover { color: var(--rg-ink); text-decoration-thickness: 2px; }
.elementor-14536 .rgv4-faqs__link:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; border-radius: 4px; }
.elementor-14536 .rgv4-faqs__arrow { width: 16px; height: 16px; transition: transform .2s ease; }
.elementor-14536 .rgv4-faqs__link:hover .rgv4-faqs__arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------ 2. trust strip */
.elementor-14536 .rgv4-trusts {
  max-width: calc(var(--rgv4-max) + 2 * var(--rgv4-gut));
  margin: 0 auto;
  padding: 0 var(--rgv4-gut);
}
.elementor-14536 .rgv4-trusts__title {
  margin: 0 0 var(--rgv4-head-gap);
  text-align: center;
}
/* desktop: four promises at their own width with equal space before, between and after them
 * (space-evenly), so the gaps match whatever the text lengths are */
.elementor-14536 .rgv4-trusts__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-14536 .rgv4-trusts__item {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-14536 .rgv4-trusts__item::before,
.elementor-14536 .rgv4-trusts__item::marker { content: none; }
.elementor-14536 .rgv4-trusts__icon { display: block; flex: 0 0 36px; width: 36px; height: 36px; }
.elementor-14536 .rgv4-trusts__icon svg { width: 36px; height: 36px; }
.elementor-14536 .rgv4-trusts__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.elementor-14536 .rgv4-trusts__name {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: var(--rgv4-t1);
  line-height: 1.35;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-trusts__line {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rgv4-t2);
  line-height: 1.45;
  color: var(--rg-muted);
}

/* ------------------------------------------------------------------ 3. related categories */
.elementor-14536 .rgv4-catlist { margin: 0; padding: 0; }
.elementor-14536 .rgv4-catlist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin: 0 0 var(--rgv4-head-gap);
  padding: 0 var(--rgv4-pad);
}
.elementor-14536 .rgv4-catlist__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -12px 0;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rgv4-t2);
  line-height: 1.3;
  color: var(--rg-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.elementor-14536 .rgv4-catlist__all:hover { color: var(--rg-ink); text-decoration-thickness: 2px; }
.elementor-14536 .rgv4-catlist__all:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; border-radius: 4px; }
.elementor-14536 .rgv4-catlist__allicon { width: 16px; height: 16px; transition: transform .2s ease; }
.elementor-14536 .rgv4-catlist__all:hover .rgv4-catlist__allicon { transform: translateX(3px); }

.elementor-14536 .rgv4-catlist__row {
  --rgv4-cat-gap: 32px;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--rgv4-cat-gap);
  margin: 0;
  padding: 4px var(--rgv4-pad) 6px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rgv4-pad);
  scrollbar-width: none;
}
.elementor-14536 .rgv4-catlist__row::-webkit-scrollbar { display: none; }
/* a row that fits spreads edge to edge (first tile under the heading, last under "Shop all");
 * an overflowing row has no free space, so space-between behaves as flex-start and scrolls.
 * One or two tiles stay at the start rather than splitting to the far edges. */
.elementor-14536 .rgv4-catlist__row { justify-content: space-between; }
.elementor-14536 .rgv4-catlist__row:not(:has(> .rgv4-catlist__item:nth-child(3))) { justify-content: flex-start; }
.elementor-14536 .rgv4-catlist__item {
  flex: 0 0 calc((100% - 4 * var(--rgv4-cat-gap)) / 5);
  max-width: 200px;          /* tile = circle width, so the outer circles line up with the edges */
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
.elementor-14536 .rgv4-catlist__item::before,
.elementor-14536 .rgv4-catlist__item::marker { content: none; }
.elementor-14536 .rgv4-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 0 4px;
  text-align: center;
  text-decoration: none;
  color: var(--rg-ink);
  -webkit-tap-highlight-color: transparent;
}
.elementor-14536 .rgv4-cat:focus { outline: none; }
/* the photo sits on the bottom of the circle: some category photos crop the product at their
 * bottom edge (Puffco bases), and anchored there that crop lands on the circle's own edge
 * instead of showing as a flat cut inside it */
.elementor-14536 .rgv4-cat__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 0 10px;
  border: 1px solid var(--rg-line);
  border-radius: 50%;
  background: var(--rg-white);
  overflow: hidden;
  transition: border-color .25s ease;
}
/* the photo fills the whole circle (round 8: square category art on a dark or full-bleed ground showed
 * as an inset "tombstone" at 84% contain) */
.elementor-14536 .rgv4-cat__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 100%;
  transition: transform .35s ease;
}
.elementor-14536 .rgv4-cat__initial {
  align-self: center;
  font-family: var(--rg-font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-cat:hover .rgv4-cat__media { border-color: color-mix(in srgb, var(--rg-ink) 40%, var(--rg-line)); }
.elementor-14536 .rgv4-cat:hover .rgv4-cat__media img { transform: scale(1.05); }
.elementor-14536 .rgv4-cat:focus-visible .rgv4-cat__media { outline: 2px solid var(--rg-ink); outline-offset: 3px; }
/* every caption box is two lines tall, so the "View collection" links line up across tiles;
 * a one-line name is centred in that box instead of leaving a gap under it */
.elementor-14536 .rgv4-cat__name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.6em;
  max-width: 100%;
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: var(--rgv4-t1);
  line-height: 1.3;
  color: var(--rg-ink);
  overflow-wrap: anywhere;
}
.elementor-14536 .rgv4-cat__nametext {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
}
.elementor-14536 .rgv4-cat__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rgv4-t2);
  line-height: 1.4;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-cat__ctatext {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.elementor-14536 .rgv4-cat:hover .rgv4-cat__ctatext { text-decoration-color: var(--rg-ink); }
.elementor-14536 .rgv4-cat__go { width: 18px; height: 18px; transition: transform .2s ease; }
.elementor-14536 .rgv4-cat:hover .rgv4-cat__go { transform: translateX(2px); }

/* progress bar under the row (only when the row overflows) */
.elementor-14536 .rgv4-catlist__bar {
  position: relative;
  height: 3px;
  margin: 28px var(--rgv4-pad) 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--rg-ink) 12%, var(--rg-tint));
  cursor: pointer;
  display: none;
}
.elementor-14536 .rgv4-catlist__bar::before {      /* taller hit area for mouse dragging */
  content: "";
  position: absolute;
  inset: -10px 0;
}
.elementor-14536 .rgv4-catlist[data-rgv4-scrolls] .rgv4-catlist__bar { display: block; }
.elementor-14536 .rgv4-catlist__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--rgv4-p, 0) * (100% - var(--rgv4-t, .3) * 100%));
  width: calc(var(--rgv4-t, .3) * 100%);
  border-radius: 3px;
  background: var(--rg-ink);
}
.elementor-14536 .rgv4-catlist.is-dragging .rgv4-catlist__row { scroll-snap-type: none; }
.elementor-14536 .rgv4-catlist.is-dragging { user-select: none; }

/* ------------------------------------------------------------------ 4. you may also like (native) */
/* markup: .rgv4-related-grid.elementor-wc-products > .elementor-widget-container >
 *         section.related.products > h2 + ul.products > li.product                      */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products {
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* heading: the site prints "Related products"; we show "You may also like" (CSS only, the
 * text node is zero-sized). Production should rename it with the Woo heading filter instead. */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > h2 {
  margin: 0 !important;
  padding: 0 var(--rgv4-pad) var(--rgv4-head-gap);
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0;
  text-align: left !important;
  text-transform: none;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > h2::before {
  content: "You may also like";
  display: block;
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: var(--rgv4-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  text-transform: none;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > h2::after {
  content: none;
  display: none;
}

/* the list becomes a scroll-snap row that bleeds to the right edge; the first card lines up
 * with the heading. */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products {
  --rgv4-card-gap: 20px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--rgv4-card-gap);
  grid-template-columns: none;
  width: 100%;
  margin: 0;
  padding: 6px var(--rgv4-pad) 16px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rgv4-pad);
  scrollbar-width: none;
  background: none;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products::-webkit-scrollbar { display: none; }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products::before,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products::after {
  content: none;
  display: none;
}
/* progress bar = the section's ::after (a pseudo-element, so the native markup is untouched
 * and Elementor's lazy-background rule, which matches elements only, cannot blank it).
 * 3px line inside 12px of padding that doubles as the mouse drag zone. */
.elementor-14536 .rgv4-related[data-rgv4-scrolls] .rgv4-related-grid.elementor-wc-products section.related.products::after {
  content: "";
  display: block;
  box-sizing: content-box;
  height: 3px;
  margin: 0 var(--rgv4-pad);
  padding: 12px 0;
  background-image:
    linear-gradient(var(--rg-ink), var(--rg-ink)),
    linear-gradient(var(--rg-line), var(--rg-line));
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  background-size: calc(var(--rgv4-t, .3) * 100%) 3px, 100% 3px;
  background-position: calc(var(--rgv4-p, 0) * 100%) 0, 0 0;
  cursor: pointer;
}
.elementor-14536 .rgv4-related.is-dragging .rgv4-related-grid.elementor-wc-products section.related.products > ul.products {
  scroll-snap-type: none;
  user-select: none;
}
.elementor-14536 .rgv4-related.is-dragging { cursor: grabbing; }

/* card */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products > li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 4 * var(--rgv4-card-gap)) / 4.5);
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 12px 12px 14px;
  float: none;
  clear: none;
  border: 1px solid var(--rg-line);
  border-radius: 16px;
  background: var(--rg-white);
  box-shadow: none;
  text-align: left;
  scroll-snap-align: start;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products > li.product:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rg-ink) 22%, var(--rg-line));
  box-shadow: 0 14px 24px -18px color-mix(in srgb, var(--rg-ink) 55%, transparent);
}
/* one rhythm for every card: image, chip row (or the same height of space when a product has
 * no options), title (2 lines), price with the stars on its right, then the button. Nothing
 * optional sits above the button, so the space above it is the same in every card. */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products > li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--rg-ink);
  text-decoration: none;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .rg-hover-wrap {
  order: 0;
  flex: 0 0 100%;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 12px;
  border-radius: 10px;
  background: var(--rg-white);
  overflow: hidden;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .rg-hover-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .rg-hover-wrap img {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .rg-hover-wrap img:not(.rg-hover-img) { display: block; }

/* badges: site prints "Sale!" (Woo) and "Sold out!" (sold-out badge plugin) */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .onsale,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .wcsob_soldout {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  bottom: auto;
  z-index: 3;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: var(--rgv4-t2);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .onsale {
  border: 1px solid var(--rg-ink);
  background: var(--rg-ink);
  color: var(--rg-white);
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .wcsob_soldout {
  border: 1px solid var(--rg-line);
  background: var(--rg-white);
  color: var(--rg-ink);
}

/* title */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .woocommerce-loop-product__title {
  order: 2;
  flex: 0 0 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0;
  padding: 0;
  font-family: var(--rg-font-body) !important;   /* card text = Poppins (site loop rule is !important too) */
  font-weight: 500;
  font-size: var(--rgv4-t1);
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  color: var(--rg-ink);
}

/* stars: Woo's .star-rating (span width = rating %) drawn with a star mask, no icon font.
 * Desktop: on the price line, right-aligned, so a missing rating changes no heights. */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .star-rating {
  --rgv4-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.47 5.18 5.68.74-4.15 3.93 1.05 5.63L10 14.33l-5.05 2.75 1.05-5.63L1.85 7.52l5.68-.74z'/%3E%3C/svg%3E");
  order: 4;
  flex: none;
  position: relative;
  display: block;
  float: none;
  width: 80px;
  height: 16px;
  margin: 8px 0 0 auto;
  padding: 0;
  overflow: hidden;
  font-family: var(--rg-font-body);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  color: transparent;
  background: var(--rg-line);
  -webkit-mask: var(--rgv4-star) 0 0 / 16px 16px repeat-x;
  mask: var(--rgv4-star) 0 0 / 16px 16px repeat-x;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .star-rating::before,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .star-rating span::before {
  content: none !important;
  display: none !important;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .star-rating > span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  float: none;
  height: 100%;
  padding: 0;
  overflow: hidden;
  font-family: var(--rg-font-body);
  font-size: 0;
  color: transparent;
  background: var(--rg-star);
}

/* price */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .price {
  order: 3;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--rg-font-display) !important;
  font-weight: 600 !important;
  font-size: var(--rgv4-t1) !important;
  line-height: 1.3 !important;
  color: var(--rg-ink) !important;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .price .amount,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .price bdi {
  font: inherit;
  color: inherit;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .price del {
  order: 2;
  opacity: 1;
  font-weight: 400 !important;
  font-size: var(--rgv4-t2);
  color: var(--rg-muted);
  text-decoration: line-through;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .price del .amount { font-weight: 400; color: var(--rg-muted); }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .price ins {
  order: 1;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: none;
  color: var(--rg-ink);
}

/* Swatchly loop swatches: one full-height chip row directly under the image (no clip): the first
 * two options plus a "+N" chip counting the rest (one option plus "+N" on mobile).
 * The live site makes these table rows grids with !important
 * (.single-product .variations_form .variations tr {display:grid !important}) and pads the
 * cells (.swatchly_loop_variation_form table td {padding:0 5px 0 0 !important}); that grid
 * centred an over-wide cell and pushed chips past the card edge, hence the !important here. */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form {
  order: 1;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  padding: 0;
  text-align: left;
}
/* a product without options keeps the chip row's height as space under its image */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product:not(:has(.swatchly-swatch)) .rg-hover-wrap {
  margin-bottom: 50px;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form table.variations,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form table.variations tbody,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form table.variations tr,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form table.variations td {
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form .swatchly_default_select { display: none; }
/* one option row per card: a second attribute (e.g. colour + joint size) would wrap and push the title out
 * of line (round 8). The product page shows every option. */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form table.variations tr:not(:first-child) { display: none !important; }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  counter-reset: rgv4-more;
}
/* the first chip keeps its width (up to 60% of the row); a long second one shrinks with an ellipsis */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap > .swatchly-swatch:first-child {
  flex-shrink: 0;
  max-width: 60%;
}
/* options beyond the second stay in the DOM but are hidden and counted */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap > .swatchly-swatch:nth-child(n+3) {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  counter-increment: rgv4-more;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap:has(> .swatchly-swatch:nth-child(3))::after {
  content: "+" counter(rgv4-more);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  background: var(--rg-white);
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rgv4-t2);
  line-height: 1;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-swatch {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  height: 28px;
  min-height: 28px;          /* Swatchly ships min-height:33px */
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  background: var(--rg-white);
  box-shadow: none;
  color: var(--rg-ink);
  cursor: pointer;
  transition: border-color .2s ease;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-swatch .swatchly-content {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-swatch .swatchly-text {
  font-family: var(--rg-font-body);
  font-weight: 400;
  font-size: var(--rgv4-t2);
  line-height: 1;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-swatch:hover { border-color: color-mix(in srgb, var(--rg-ink) 45%, var(--rg-line)); }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-swatch.swatchly-selected,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-swatch[aria-checked="true"] { border-color: var(--rg-ink); }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-swatch:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 1px; }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .reset_variations {
  display: none !important;
}

/* card button: secondary outline pill, ink fill on hover. The Elementor kit forces filled
 * square loop buttons with !important (.elementor-kit-22 .woocommerce ul.products li.product
 * .button), hence the !important here. */
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product > a.button {
  order: 5;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px !important;
  margin: 14px 0 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--rg-ink) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--rg-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--rgv4-t2) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  color: var(--rg-ink) !important;
  transition: background-color .2s ease, color .2s ease;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product > a.button:hover,
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product > a.button:focus-visible {
  background: var(--rg-ink) !important;
  color: var(--rg-white) !important;
}
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product > a.button:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product > a.button.loading { opacity: .6; }
.elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product > a.added_to_cart {
  order: 6;
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 4px 0 0;
  padding: 0;
  background: none;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: var(--rgv4-t2);
  color: var(--rg-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* product 9437 never appears in a slider (production: also exclude it in the related query) */
.elementor-14536 .rgv4-related ul.products > li.post-9437 { display: none !important; }

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1024px) {
  .elementor-14536 .rgv4-faq.e-con,
  .elementor-14536 .rgv4-trust.e-con,
  .elementor-14536 .rgv4-cats.e-con,
  .elementor-14536 .rgv4-related.e-con {
    --rgv4-band-y: 72px;
    --rgv4-h2: 26px;
  }
  .elementor-14536 .rgv4-trust.e-con { --rgv4-band-y: 60px; }
  /* tablet/mobile: icon above text, centred in equal columns */
  .elementor-14536 .rgv4-trusts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
  .elementor-14536 .rgv4-trusts__item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: center;
  }
  .elementor-14536 .rgv4-trusts__text { align-items: center; }
  .elementor-14536 .rgv4-catlist__row { --rgv4-cat-gap: 24px; }
  .elementor-14536 .rgv4-catlist__item { flex-basis: calc((100% - 3 * var(--rgv4-cat-gap)) / 4.3); }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products { --rgv4-card-gap: 16px; }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products > li.product {
    flex-basis: calc((100% - 3 * var(--rgv4-card-gap)) / 3.3);
  }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 767px) {
  .elementor-14536 .rgv4-faq.e-con,
  .elementor-14536 .rgv4-trust.e-con,
  .elementor-14536 .rgv4-cats.e-con,
  .elementor-14536 .rgv4-related.e-con {
    --rgv4-gut: 16px;
    --rgv4-band-y: 56px;
    --rgv4-head-gap: 24px;
    --rgv4-h2: 22px;
    --rgv4-t1: 15px;
    --rgv4-t2: 13px;
  }
  .elementor-14536 .rgv4-trust.e-con { --rgv4-band-y: 48px; }

  .elementor-14536 .rgv4-faqs__title { margin-bottom: 28px; }
  .elementor-14536 .rgv4-faqs__q { gap: 12px; min-height: 60px; padding: 15px 0; }
  .elementor-14536 .rgv4-faqs__a { padding: 0 4px 20px 34px; }
  .elementor-14536 .rgv4-faqs__group { margin-top: 44px; }

  .elementor-14536 .rgv4-trusts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }
  .elementor-14536 .rgv4-trusts__icon,
  .elementor-14536 .rgv4-trusts__icon svg { width: 32px; height: 32px; flex-basis: 32px; }

  .elementor-14536 .rgv4-catlist__row { --rgv4-cat-gap: 16px; }
  .elementor-14536 .rgv4-catlist__item { flex-basis: calc((100% - 2 * var(--rgv4-cat-gap)) / 2.35); }
  .elementor-14536 .rgv4-cat__cta { min-height: 32px; }
  .elementor-14536 .rgv4-catlist__bar { margin-top: 24px; }

  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products {
    --rgv4-card-gap: 12px;
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products > li.product {
    flex-basis: calc((100% - 2 * var(--rgv4-card-gap)) / 2.2);
    padding: 10px 10px 12px;
    border-radius: 14px;
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .rg-hover-wrap { margin-bottom: 10px; }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly_loop_variation_form { margin-bottom: 8px; }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product:not(:has(.swatchly-swatch)) .rg-hover-wrap { margin-bottom: 46px; }
  /* narrow cards: price on its own line, stars under it; a product without a rating keeps
   * that line's height so every card's button sits at the same distance */
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .price { flex: 0 0 100%; }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product:not(:has(.star-rating)) .price { margin-bottom: 20px; }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .woocommerce-loop-product__title {
    -webkit-line-clamp: 3;
    min-height: 3.9em;
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .star-rating {
    width: 70px;
    height: 14px;
    margin: 6px 0 0;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product > a.button {
    padding: 10px 6px !important;
  }
  /* ~150px cards: the first option plus a "+N" chip counting the rest (CSS counter over the
   * other swatches, which stay in the DOM but are hidden), all on one line inside the card */
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap {
    flex-wrap: nowrap;
    counter-reset: rgv4-more;
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap > .swatchly-swatch:first-child {
    flex-shrink: 1;
    max-width: calc(100% - 46px);
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap > .swatchly-swatch:nth-child(n+2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    counter-increment: rgv4-more;
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products li.product .swatchly-type-wrap:has(> .swatchly-swatch:nth-child(2))::after {
    content: "+" counter(rgv4-more);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--rg-line);
    border-radius: 999px;
    background: var(--rg-white);
    font-family: var(--rg-font-body);
    font-weight: 400;
    font-size: var(--rgv4-t2);
    line-height: 1;
    color: var(--rg-ink);
  }
}

@media (max-width: 374px) {
  .elementor-14536 .rgv4-cat__go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-14536 .rgv4-faqs__chev,
  .elementor-14536 .rgv4-cat__media,
  .elementor-14536 .rgv4-cat__media img,
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products > li.product {
    transition: none;
  }
  .elementor-14536 .rgv4-related .rgv4-related-grid.elementor-wc-products section.related.products > ul.products > li.product:hover { transform: none; }
}

/* ---- p4-reviews.css ---- */
/* PDP V4, piece 4: Etsy-style review strip + "Show all" modal ([rg_pdp_reviews] in .rgv4-reviews).
 * Strip selectors start with .elementor-14536. The modal is moved to <body> on first open (out of
 * the Elementor columns), so its selectors start with .rgv4-scope (the modal root carries it).
 * Tokens come from src/base.css. No inline SVG: stars are a CSS mask over a token gradient,
 * chevrons and the close X are CSS shapes (the theme strips SVG fills). */

/* ======================================================================= shared atoms ===== */

.elementor-14536 .rgv4-sr,
.rgv4-scope .rgv4-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Stars: one element per rating. The gradient paints --rg-star up to rating/5 and --rg-line after
 * it; the mask cuts it into 5 stars (mask-repeat: space spreads the leftover width as gaps). */
.elementor-14536 .rgv4-stars,
.rgv4-scope .rgv4-stars {
  --rgv4-s: 16px;
  --rgv4-g: 2px;
  position: relative;
  display: block;
  flex: none;
  width: calc(5 * var(--rgv4-s) + 4 * var(--rgv4-g));
  height: var(--rgv4-s);
  background: linear-gradient(90deg, var(--rg-star) calc(var(--rgv4-r, 5) * 20%), var(--rg-line) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") 0 0 / var(--rgv4-s) var(--rgv4-s) space no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") 0 0 / var(--rgv4-s) var(--rgv4-s) space no-repeat;
}
.elementor-14536 .rgv4-stars--one,
.rgv4-scope .rgv4-stars--one {
  --rgv4-r: 5;
  display: inline-block;
  width: var(--rgv4-s);
}

/* Chevron (CSS border shape, stroke = currentColor = ink) */
.elementor-14536 .rgv4-chev,
.rgv4-scope .rgv4-chev {
  display: block;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.elementor-14536 .rgv4-chev--prev,
.rgv4-scope .rgv4-chev--prev {
  margin-left: 4px;
  transform: rotate(-135deg);
}

/* Round icon button (rail arrows, close). Arrows are floating overlay controls: white disc with
 * a soft shadow (cards themselves stay shadowless). The close button is a tinted disc. */
.elementor-14536 .rgv4-iconbtn,
.rgv4-scope .rgv4-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.elementor-14536 .rgv4-iconbtn:focus,
.rgv4-scope .rgv4-iconbtn:focus {
  background: var(--rg-white);
  color: var(--rg-ink);
  outline: none;
}
.elementor-14536 .rgv4-iconbtn:hover,
.rgv4-scope .rgv4-iconbtn:hover {
  background: var(--rg-tint);
  color: var(--rg-ink);
  box-shadow: none;
}
.elementor-14536 .rgv4-iconbtn:focus-visible,
.rgv4-scope .rgv4-iconbtn:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-iconbtn[hidden],
.rgv4-scope .rgv4-iconbtn[hidden] { display: none; }

/* Horizontal rail: the track scrolls inside itself; arrows float over its edges */
.elementor-14536 .rgv4-rail,
.rgv4-scope .rgv4-rail { position: relative; }
.elementor-14536 .rgv4-rail__prev,
.elementor-14536 .rgv4-rail__next,
.rgv4-scope .rgv4-rail__prev,
.rgv4-scope .rgv4-rail__next {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}
.elementor-14536 .rgv4-rail__prev,
.rgv4-scope .rgv4-rail__prev { left: 8px; }
.elementor-14536 .rgv4-rail__next,
.rgv4-scope .rgv4-rail__next { right: 8px; }
/* Strip: the cut-off card is a fixed 124px sliver (track sizing below), wide enough to show its
 * whole star row (ends 94px into the card) and the reviewer's name. Only the last 20px (about 16%
 * of the sliver) fades to white under the arrow; the peek still shows its card edge and stars.
 * Arrows sit vertically centred, below the star row. From 768px up both arrows float half
 * outside the column, over the fade, clear of all card text (the column has >= 24px side padding
 * there, piece 1, so no page overflow). Phones: "next" sits just inside the edge; "previous" is
 * hidden (swipe back). */
.elementor-14536 .rgv4-rv__rail::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  /* wide enough that the next-arrow (right 12px, 44px wide) sits on near-white, never on readable
   * words of the peek card (round 11 craft: a 20px fade left fragments either side of the arrow) */
  width: 112px;
  background: linear-gradient(90deg, transparent 0, var(--rg-white) 55%);
  pointer-events: none;
  transition: opacity .2s ease;
}
.elementor-14536 .rgv4-rv__rail.is-end::after { opacity: 0; }
/* arrows float inside the strip, over the peek card (Etsy pattern), never past its edge */
.elementor-14536 .rgv4-rv__rail .rgv4-rail__next { right: 12px; }
.elementor-14536 .rgv4-rv__rail .rgv4-rail__prev { left: 12px; }

/* Photo thumb (card and modal row): square, rounded, first photo; "+N" when there are more */
.elementor-14536 .rgv4-thumb,
.rgv4-scope .rgv4-thumb {
  position: relative;
  display: block;
  flex: none;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--rg-tint);
}
.elementor-14536 .rgv4-thumb img,
.rgv4-scope .rgv4-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform .25s ease;
}
.elementor-14536 .rgv4-thumb:hover img,
.rgv4-scope .rgv4-thumb:hover img { transform: scale(1.04); }
.elementor-14536 .rgv4-thumb:focus-visible,
.rgv4-scope .rgv4-thumb:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.elementor-14536 .rgv4-thumb__more,
.rgv4-scope .rgv4-thumb__more {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rg-ink) 80%, transparent);
  color: var(--rg-white);
  font: 600 12px/20px var(--rgv4-text);
}

/* Reviewer block: round initial avatar spanning "Name | Date" and the item link */
.elementor-14536 .rgv4-who,
.rgv4-scope .rgv4-who {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  min-width: 0;
}
.elementor-14536 .rgv4-who__avatar,
.rgv4-scope .rgv4-who__avatar {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rg-tint);
  color: var(--rg-ink);
  font: 500 14px/1 var(--rg-font-display);
}
.elementor-14536 .rgv4-who__line,
.rgv4-scope .rgv4-who__line {
  display: flex;
  align-items: center;
  min-width: 0;
  font: 400 13px/1.5 var(--rgv4-text);
  color: var(--rg-muted);
}
.elementor-14536 .rgv4-who__name,
.rgv4-scope .rgv4-who__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-who__date,
.rgv4-scope .rgv4-who__date {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
}
.elementor-14536 .rgv4-who__date::before,
.rgv4-scope .rgv4-who__date::before {
  content: "";
  width: 1px;
  height: 12px;
  margin: 0 5px;
  background: color-mix(in srgb, var(--rg-ink) 30%, var(--rg-white));
}
.elementor-14536 .rgv4-who__item,
.rgv4-scope .rgv4-who__item {
  display: block;
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 13px/1.5 var(--rgv4-text);
  color: var(--rg-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.elementor-14536 a.rgv4-who__item:hover,
.elementor-14536 a.rgv4-who__item:focus,
.rgv4-scope a.rgv4-who__item:hover,
.rgv4-scope a.rgv4-who__item:focus { color: var(--rg-ink); }
.elementor-14536 a.rgv4-who__item:focus-visible,
.rgv4-scope a.rgv4-who__item:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 1px;
}

/* ========================================================================== the strip ===== */

/* Body face for this piece: Poppins, then colour-emoji fonts so customer emoji render as written
 * (characters Poppins lacks fall through to them). Declared on both roots: the strip section and
 * the modal (which lives in <body> once opened). */
.elementor-14536 .rgv4-rv,
.rgv4-scope.rgv4-modal {
  --rgv4-text: "Poppins", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* No outer spacing: the column layout (piece 1) sets the gap above and below this slot.
 * Size container for the card track. Safe because piece 1 gives this slot a definite width (grid
 * item, width:100%); inline-size containment only stops the width depending on the content. */
.elementor-14536 .rgv4-rv {
  container: rgv4rv / inline-size;
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-margin-top: 150px; /* CusRev "15 reviews" link -> #reviews; clears the 138px sticky header */
  font-family: var(--rgv4-text);
  color: var(--rg-ink);
  text-align: left;
}
.elementor-14536 .rgv4-rv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.elementor-14536 .rgv4-rv__title {
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 600 19px/1.3 var(--rg-font-display); /* quieter than the modal title: the cards lead */
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-rv__ts { display: none; } /* short title: phones only */
/* "Show all": secondary pill, 1px ink outline */
.elementor-14536 .rgv4-rv__all {
  position: relative; /* anchors its visually hidden " 377 reviews" text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 40px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font: 600 14px/1.2 var(--rgv4-text);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.elementor-14536 .rgv4-rv__all:focus {
  background: var(--rg-white);
  color: var(--rg-ink);
  border-color: var(--rg-ink);
  outline: none;
}
.elementor-14536 .rgv4-rv__all:hover {
  background: var(--rg-tint);
  color: var(--rg-ink);
  border-color: var(--rg-ink);
}
.elementor-14536 .rgv4-rv__all:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}

.elementor-14536 .rgv4-rv__rail { margin-top: 16px; } /* heading line -> card row */

/* One row of equal cards sized from the strip's own width (container query on .rgv4-rv), so the
 * cut-off card is always a 124px sliver: its 14px star row ends 94px in and the 20px fade starts
 * at 104px, so all five stars and the name stay readable. Under 600px: one card + sliver (phones,
 * and the desktop column at 1025-1265px viewports). From 600px: two cards + sliver (desktop
 * column, tablets). The 55% floor only matters on 320px phones. */
.elementor-14536 .rgv4-rv__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(calc(100% - 136px), 55%);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
@container rgv4rv (min-width: 600px) {
  .elementor-14536 .rgv4-rv__track { grid-auto-columns: min(calc((100% - 148px) / 2), 300px); }
}
.elementor-14536 .rgv4-rv__track::-webkit-scrollbar { display: none; }
.elementor-14536 .rgv4-rv__track:focus { outline: none; }
.elementor-14536 .rgv4-rv__track:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}

.elementor-14536 .rgv4-rv__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 16px 16px 14px;
  border: 1px solid var(--rg-line);
  border-radius: 12px;
  background: var(--rg-white);
  scroll-snap-align: start;
}
.elementor-14536 .rgv4-rv__card .rgv4-stars { margin: 0 0 8px; }
.elementor-14536 .rgv4-rv__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 80px; /* 4 lines of 13/20px: keeps every footer on one baseline */
}
.elementor-14536 .rgv4-rv__body .rgv4-thumb {
  width: min(64px, 28%); /* scales down on narrow phone cards so the text keeps ~70% */
  height: auto;
  aspect-ratio: 1;
}
.elementor-14536 .rgv4-rv__card .rgv4-stars { --rgv4-s: 14px; }
.elementor-14536 .rgv4-rv__card .rgv4-who { column-gap: 7px; } /* avatar centred across name/date + item, as in the modal rows */
/* Phone-width strips (under 390px: phones up to 414px wide): the initial avatar is decorative;
 * drop it so "Anonymous | Aug 6, 2026" and similar footers fit without truncation. */
@container rgv4rv (max-width: 389px) {
  .elementor-14536 .rgv4-rv__card .rgv4-who { grid-template-columns: minmax(0, 1fr); }
  .elementor-14536 .rgv4-rv__card .rgv4-who__avatar { display: none; }
  .elementor-14536 .rgv4-rv__card .rgv4-who__item { grid-column: 1; }
}
.elementor-14536 .rgv4-rv__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 400 13px/20px var(--rgv4-text); /* round 9 craft: 14px held about one sentence in 4 lines */
  color: var(--rg-ink);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.elementor-14536 .rgv4-rv__card .rgv4-who {
  margin-top: auto;
  padding-top: 16px;
}

/* Lead photos card: the strip's visual anchor. Same column as a review card; everything inside is
 * absolutely placed, so the review cards set the row height and this card stretches to it.
 * 2x2 mosaic; 3x2 (six photos) when the card is 300px+ wide (one-card strips, 1025-1265px
 * viewports). The last visible tile carries "+N photos". Opens the modal at its photo strip. */
.elementor-14536 .rgv4-rv__pcard {
  container: rgv4pc / inline-size;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  scroll-snap-align: start;
}
/* same 1px edge as the review cards, drawn over the photos so the card system stays one family */
.elementor-14536 .rgv4-rv__pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--rg-line);
  border-radius: 12px;
  pointer-events: none;
}
.elementor-14536 .rgv4-rv__mosaic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--rg-ink); /* under the photos; the "+N photos" text sits on a dark scrim */
  color: var(--rg-white);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.elementor-14536 .rgv4-rv__mosaic:hover,
.elementor-14536 .rgv4-rv__mosaic:focus {
  background: var(--rg-ink);
  color: var(--rg-white);
  box-shadow: none;
  outline: none;
}
.elementor-14536 .rgv4-rv__mgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  height: 100%;
  background: var(--rg-white); /* the 2px gutters between photos stay white */
}
.elementor-14536 .rgv4-rv__tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--rg-tint);
}
.elementor-14536 .rgv4-rv__tile:nth-child(n+5) { display: none; }
.elementor-14536 .rgv4-rv__tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform .25s ease;
}
.elementor-14536 .rgv4-rv__mosaic:hover .rgv4-rv__tile img { transform: scale(1.04); }
.elementor-14536 .rgv4-rv__mmore {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: color-mix(in srgb, var(--rg-ink) 58%, transparent);
  color: var(--rg-white);
  transition: background-color .15s ease;
}
.elementor-14536 .rgv4-rv__mosaic:hover .rgv4-rv__mmore { background: color-mix(in srgb, var(--rg-ink) 68%, transparent); }
.elementor-14536 .rgv4-rv__mmore--6 { display: none; }
.elementor-14536 .rgv4-rv__mn { font: 600 22px/1 var(--rg-font-display); }
.elementor-14536 .rgv4-rv__ml { font: 600 12px/1.3 var(--rgv4-text); }
@container rgv4pc (min-width: 300px) {
  .elementor-14536 .is-6 .rgv4-rv__mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .elementor-14536 .is-6 .rgv4-rv__tile:nth-child(n+5) { display: block; }
  .elementor-14536 .is-6 .rgv4-rv__mmore--4 { display: none; }
  .elementor-14536 .is-6 .rgv4-rv__mmore--6 { display: flex; }
}
/* Focus ring drawn inside the card: the track clips anything outside it. White inner ring keeps it
 * visible over dark photos. */
.elementor-14536 .rgv4-rv__mosaic:focus-visible::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--rg-ink), inset 0 0 0 4px var(--rg-white);
  pointer-events: none;
}

/* ========================================================================== the modal ===== */

.rgv4-scope.rgv4-modal[hidden] { display: none; }
.rgv4-scope.rgv4-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  padding: 24px;
  font-family: var(--rgv4-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rg-ink);
  text-align: left;
}
.rgv4-scope .rgv4-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--rg-ink) 60%, transparent);
}
.rgv4-scope .rgv4-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(630px, 100%);
  height: min(960px, calc(100vh - 48px));
  height: min(960px, calc(100dvh - 48px));
  margin: auto; /* centres; resolves to 0 (top) if the panel is ever taller than the screen */
  overflow: hidden;
  border-radius: 16px;
  background: var(--rg-white);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--rg-ink) 30%, transparent); /* the one overlay shadow */
}
/* No open/close animation on purpose: a finished opacity/transform animation leaves the backdrop
 * and panel on compositor layers, and Chromium then paints the backdrop over the panel in
 * beyond-viewport captures (the harness's full-modal shot). Instant open is also Etsy's behaviour. */

.rgv4-scope .rgv4-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 16px;
  padding: 16px 20px 16px 28px;
  border-bottom: 1px solid var(--rg-line);
}
.rgv4-scope .rgv4-modal__title {
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 600 22px/1.25 var(--rg-font-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
.rgv4-scope .rgv4-modal__title:focus { outline: none; }

/* Close: a tinted disc in the header (not a floating control, so no shadow) */
.rgv4-scope .rgv4-modal__close,
.rgv4-scope .rgv4-modal__close:focus {
  background: var(--rg-tint);
  box-shadow: none;
}
.rgv4-scope .rgv4-modal__close:hover {
  background: var(--rg-line);
  box-shadow: none;
}

/* Close X: two CSS bars */
.rgv4-scope .rgv4-x {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.rgv4-scope .rgv4-x::before,
.rgv4-scope .rgv4-x::after {
  content: "";
  position: absolute;
  top: 7px;
  left: -1px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.rgv4-scope .rgv4-x::after { transform: rotate(-45deg); }

.rgv4-scope .rgv4-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px 32px;
  -webkit-overflow-scrolling: touch;
}

/* Summary: big average + one star + "N ratings" | 5-to-1 histogram */
.rgv4-scope .rgv4-modal__summary {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}
.rgv4-scope .rgv4-modal__avg { text-align: center; }
.rgv4-scope .rgv4-modal__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.rgv4-scope .rgv4-modal__score .rgv4-stars--one { --rgv4-s: 30px; }
.rgv4-scope .rgv4-modal__num {
  font: 600 44px/1 var(--rg-font-display);
  color: var(--rg-ink);
}
.rgv4-scope .rgv4-modal__ratings {
  margin: 8px 0 0;
  font: 400 13px/1.5 var(--rgv4-text);
  color: var(--rg-muted);
}
.rgv4-scope .rgv4-modal__hist {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rgv4-scope .rgv4-modal__hrow {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 400 13px/26px var(--rgv4-text);
}
.rgv4-scope .rgv4-modal__hlabel {
  color: var(--rg-ink);
  white-space: nowrap;
}
.rgv4-scope .rgv4-modal__bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--rg-line);
}
.rgv4-scope .rgv4-modal__bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--rg-star);
}
.rgv4-scope .rgv4-modal__bar > span.has-count { min-width: 4px; }
.rgv4-scope .rgv4-modal__pct {
  color: var(--rg-muted);
  text-align: right;
  white-space: nowrap;
}

/* Sort / filter chips: quiet outlines, never filled, so nothing competes with the 4.91 summary.
 * Resting: grey hairline, muted label. Selected (aria-pressed, or a rating filter in use): ink
 * hairline, ink label. Labels stay Poppins 600 in every state, so nothing shifts on toggle. */
.rgv4-scope .rgv4-modal__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 28px 0 0;
}
.rgv4-scope .rgv4-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--rg-ink); /* design-system rule 5: secondary pill = 1px ink outline */
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-muted);
  font: 600 13px/1 var(--rgv4-text);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rgv4-scope .rgv4-chip:focus {
  background: var(--rg-white);
  color: var(--rg-muted);
  border-color: var(--rg-ink);
  outline: none;
}
.rgv4-scope .rgv4-chip:hover {
  background: var(--rg-white);
  color: var(--rg-ink);
  border-color: var(--rg-ink);
}
/* selected: ink label plus a second inner ink line (the buy-box option chips' selected look), never a fill */
.rgv4-scope .rgv4-chip[aria-pressed="true"],
.rgv4-scope .rgv4-chip--select.is-active {
  background: var(--rg-white);
  color: var(--rg-ink);
  border-color: var(--rg-ink);
  box-shadow: inset 0 0 0 1px var(--rg-ink);
}
.rgv4-scope .rgv4-chip:focus-visible,
.rgv4-scope .rgv4-chip--select:has(select:focus-visible) {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.rgv4-scope .rgv4-chip--select {
  padding: 0;
  overflow: hidden;
}
.rgv4-scope .rgv4-chip--select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.rgv4-scope .rgv4-select {
  display: block;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 38px 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rgv4-scope .rgv4-select:focus { outline: none; }
.rgv4-scope .rgv4-select option {
  background: var(--rg-white);
  color: var(--rg-ink);
}

/* Photo strip */
.rgv4-scope .rgv4-modal__photos { margin: 20px 0 0; }
.rgv4-scope .rgv4-modal__ptrack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 96px; /* 5 thumbs + about half a sixth in the 574px desktop column */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rgv4-scope .rgv4-modal__ptrack::-webkit-scrollbar { display: none; }
.rgv4-scope .rgv4-modal__ptrack:focus { outline: none; }
.rgv4-scope .rgv4-modal__ptrack:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.rgv4-scope .rgv4-modal__ptrack > li {
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
.rgv4-scope .rgv4-modal__photo {
  display: block;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--rg-tint);
}
.rgv4-scope .rgv4-modal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform .25s ease;
}
.rgv4-scope .rgv4-modal__photo:hover img { transform: scale(1.04); }
.rgv4-scope .rgv4-modal__photo:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: -2px;
}

/* Review list */
.rgv4-scope .rgv4-modal__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.rgv4-scope .rgv4-modal__row {
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--rg-line);
  scroll-margin-top: 8px;
}
.rgv4-scope .rgv4-modal__row:first-child { border-top: 0; }
.rgv4-scope .rgv4-modal__row:focus { outline: none; }
.rgv4-scope .rgv4-modal__row:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 4px;
  border-radius: 4px;
}
.rgv4-scope .rgv4-modal__row.is-flash { animation: rgv4-flash 1.8s ease; }
@keyframes rgv4-flash { from { background: var(--rg-tint); } to { background: transparent; } }
.rgv4-scope .rgv4-modal__row .rgv4-stars { margin: 0 0 10px; }
.rgv4-scope .rgv4-modal__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 12px 0 0;
}
.rgv4-scope .rgv4-modal__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: 400 15px/1.6 var(--rgv4-text);
  color: var(--rg-ink);
  white-space: pre-line;
  overflow-wrap: break-word;
}
.rgv4-scope .rgv4-modal__content .rgv4-thumb {
  width: 80px;
  height: 80px;
  margin-left: auto;
}

.rgv4-scope .rgv4-modal__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0 0;
  border-top: 1px solid var(--rg-line);
}
.rgv4-scope .rgv4-modal__count {
  margin: 0;
  font: 400 13px/1.5 var(--rgv4-text);
  color: var(--rg-muted);
}
.rgv4-scope .rgv4-modal__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font: 600 14px/1.2 var(--rgv4-text);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.rgv4-scope .rgv4-modal__more:focus {
  background: var(--rg-white);
  color: var(--rg-ink);
  border-color: var(--rg-ink);
  outline: none;
}
.rgv4-scope .rgv4-modal__more:hover {
  background: var(--rg-tint);
  color: var(--rg-ink);
  border-color: var(--rg-ink);
}
.rgv4-scope .rgv4-modal__more:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.rgv4-scope .rgv4-modal__more[hidden] { display: none; }

/* "Write a review" (Jared decision #8): a quiet text button under "N ratings", so it never
 * competes with the 4.91 score; the form opens between the summary and the sort chips. */
.rgv4-scope .rgv4-modal__write {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 10px 0 0;
  padding: 0 16px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font: 600 13px/1.2 var(--rgv4-text);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.rgv4-scope .rgv4-modal__write:hover,
.rgv4-scope .rgv4-modal__write:focus {
  background: var(--rg-tint);
  color: var(--rg-ink);
}
.rgv4-scope .rgv4-modal__write:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.rgv4-scope .rgv4-modal__form {
  margin: 24px 0 0;
  padding: 20px;
  border-radius: 16px;
  background: var(--rg-tint);
}
.rgv4-scope .rgv4-modal__form[hidden] { display: none; }
.rgv4-scope .rgv4-modal__ftitle {
  margin: 0 0 16px;
  font: 600 18px/26px var(--rg-font-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--rg-ink);
}
.rgv4-scope .rgv4-modal__flabel {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font: 600 13px/20px var(--rgv4-text);
  color: var(--rg-ink);
}
.rgv4-scope .rgv4-rate {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;
}
/* 1..5 in reading order: a checked or hovered star lights itself and every star before it */
.rgv4-scope .rgv4-rate__stars {
  display: inline-flex;
  gap: 4px;
}
.rgv4-scope .rgv4-rate__stars label {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
}
.rgv4-scope .rgv4-rate__stars label::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 6px;
  background: color-mix(in srgb, var(--rg-ink) 35%, var(--rg-white)); /* pickable, not disabled-looking */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rgv4-scope .rgv4-rate__stars:has(input[value="1"]:checked) label:nth-of-type(-n+1)::before,
.rgv4-scope .rgv4-rate__stars:has(input[value="2"]:checked) label:nth-of-type(-n+2)::before,
.rgv4-scope .rgv4-rate__stars:has(input[value="3"]:checked) label:nth-of-type(-n+3)::before,
.rgv4-scope .rgv4-rate__stars:has(input[value="4"]:checked) label:nth-of-type(-n+4)::before,
.rgv4-scope .rgv4-rate__stars:has(input[value="5"]:checked) label:nth-of-type(-n+5)::before { background: var(--rg-star); }
.rgv4-scope .rgv4-rate__stars:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1)::before,
.rgv4-scope .rgv4-rate__stars:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2)::before,
.rgv4-scope .rgv4-rate__stars:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3)::before,
.rgv4-scope .rgv4-rate__stars:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4)::before,
.rgv4-scope .rgv4-rate__stars:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5)::before { background: color-mix(in srgb, var(--rg-star) 70%, var(--rg-white)); }
.rgv4-scope .rgv4-rate__stars input:focus-visible + label {
  outline: 2px solid var(--rg-ink);
  outline-offset: -2px;
  border-radius: 8px;
}
.rgv4-scope .rgv4-modal__field { margin: 0 0 16px; }
.rgv4-scope .rgv4-modal__form textarea,
.rgv4-scope .rgv4-modal__form input[type="text"],
.rgv4-scope .rgv4-modal__form input[type="email"] {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--rg-muted);
  border-radius: 12px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font: 400 15px/24px var(--rgv4-text);
  box-shadow: none;
}
.rgv4-scope .rgv4-modal__form textarea { min-height: 112px; resize: none; }
.rgv4-scope .rgv4-modal__form textarea:focus,
.rgv4-scope .rgv4-modal__form input[type="text"]:focus,
.rgv4-scope .rgv4-modal__form input[type="email"]:focus {
  border-color: var(--rg-ink);
  outline: 1px solid var(--rg-ink);
  outline-offset: 0;
}
.rgv4-scope .rgv4-modal__fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.rgv4-scope .rgv4-modal__fnote {
  margin: -4px 0 16px;
  font: 400 13px/20px var(--rgv4-text);
  color: var(--rg-muted);
}
.rgv4-scope .rgv4-modal__fopt { font-weight: 400; color: var(--rg-muted); }
/* Photos or video (CusRev upload): 72px tiles, an "Add" tile last */
.rgv4-scope .rgv4-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rgv4-scope .rgv4-media__add,
.rgv4-scope .rgv4-media__item {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
.rgv4-scope .rgv4-media__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--rg-muted);
  background: var(--rg-white);
  color: var(--rg-ink);
  font: 600 13px/1 var(--rgv4-text);
  cursor: pointer;
}
.rgv4-scope .rgv4-media__add[hidden] { display: none; }
.rgv4-scope .rgv4-media__add:hover { border-color: var(--rg-ink); }
.rgv4-scope .rgv4-media__add:has(input:focus-visible) {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.rgv4-scope .rgv4-media__plus {
  position: relative;
  width: 16px;
  height: 16px;
}
.rgv4-scope .rgv4-media__plus::before,
.rgv4-scope .rgv4-media__plus::after,
.rgv4-scope .rgv4-media__del::before,
.rgv4-scope .rgv4-media__del::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 1px;
  background: var(--rg-ink);
}
.rgv4-scope .rgv4-media__plus::after { transform: rotate(90deg); }
.rgv4-scope .rgv4-media__item { background: var(--rg-ink); }
.rgv4-scope .rgv4-media__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rgv4-scope .rgv4-media__vid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--rg-white);
  font: 600 13px/1 var(--rgv4-text);
}
.rgv4-scope .rgv4-media__item.is-loading img,
.rgv4-scope .rgv4-media__item.is-loading .rgv4-media__vid { opacity: 0.45; }
.rgv4-scope .rgv4-media__item.is-loading::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rg-white) 40%, transparent 40%) 0 0 / 200% 100% no-repeat, color-mix(in srgb, var(--rg-white) 35%, transparent);
  animation: rgv4-upload 1.1s linear infinite;
}
@keyframes rgv4-upload { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .rgv4-scope .rgv4-media__item.is-loading::after { animation: none; }
}
.rgv4-scope .rgv4-media__del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rg-ink);
  border-radius: 50%;
  background: var(--rg-white);
  box-shadow: none;
  cursor: pointer;
}
.rgv4-scope .rgv4-media__del::before,
.rgv4-scope .rgv4-media__del::after { width: 12px; margin-left: -6px; transform: rotate(45deg); }
.rgv4-scope .rgv4-media__del::after { transform: rotate(-45deg); }
.rgv4-scope .rgv4-media__del:hover,
.rgv4-scope .rgv4-media__del:focus { background: var(--rg-tint); }
.rgv4-scope .rgv4-media__del:focus-visible {
  outline: 2px solid var(--rg-white);
  outline-offset: 0;
}
.rgv4-scope .rgv4-modal__ferr {
  margin: 0 0 12px;
  font: 600 13px/20px var(--rgv4-text);
  color: var(--rg-ink);
}
.rgv4-scope .rgv4-modal__ferr:empty { display: none; }
.rgv4-scope .rgv4-modal__submit:disabled { cursor: progress; }
.rgv4-scope .rgv4-modal__factions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.rgv4-scope .rgv4-modal__submit {
  min-height: 48px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--rg-ink);
  color: var(--rg-white);
  font: 600 15px/1.2 var(--rgv4-text);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.rgv4-scope .rgv4-modal__submit:hover,
.rgv4-scope .rgv4-modal__submit:focus {
  background: color-mix(in srgb, var(--rg-ink) 85%, var(--rg-white));
  color: var(--rg-white);
}
.rgv4-scope .rgv4-modal__submit:focus-visible,
.rgv4-scope .rgv4-modal__cancel:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
.rgv4-scope .rgv4-modal__cancel {
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--rg-ink);
  font: 600 13px/20px var(--rgv4-text);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
  cursor: pointer;
}
.rgv4-scope .rgv4-modal__ftitle:focus { outline: none; }
.rgv4-scope .rgv4-modal__cancel:hover,
.rgv4-scope .rgv4-modal__cancel:focus { background: none; color: var(--rg-ink); }
.rgv4-scope .rgv4-modal__fdone {
  margin: 0;
  font: 400 15px/24px var(--rgv4-text);
  color: var(--rg-ink);
}
.rgv4-scope .rgv4-modal__fdone:empty { display: none; }
.rgv4-scope .rgv4-modal__form.is-done > :not(.rgv4-modal__fdone) { display: none; }
@media (max-width: 767px), (pointer: coarse) {
  .rgv4-scope .rgv4-modal__write { min-height: 44px; }
}
@media (max-width: 640px) {
  .rgv4-scope .rgv4-modal__form { padding: 16px; }
  .rgv4-scope .rgv4-modal__fgrid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .rgv4-scope .rgv4-modal__submit { flex: 1 1 auto; }
}

/* ==================================================================== phones + touch ===== */

@media (max-width: 767px), (pointer: coarse) {
  .elementor-14536 .rgv4-rv__all { min-height: 44px; }
  .rgv4-scope .rgv4-chip { height: 44px; }
}

@media (max-width: 767px) {
  .elementor-14536 .rgv4-rv__title { font-size: 19px; }
  .rgv4-scope .rgv4-rail__prev { left: 4px; }
  .rgv4-scope .rgv4-rail__next { right: 4px; }
  /* 16px phone gutter: "next" stays inside the edge (still below the star row) */
  .elementor-14536 .rgv4-rv__rail .rgv4-rail__next { right: 4px; }
  /* phones swipe back; a prev arrow here would sit on the first card's text */
  .elementor-14536 .rgv4-rv__rail .rgv4-rail__prev { display: none; }
}
@media (max-width: 479px) {
  .elementor-14536 .rgv4-rv__tl { display: none; }
  .elementor-14536 .rgv4-rv__ts { display: inline; }
  .elementor-14536 .rgv4-rv__head { gap: 12px; }
}
@media (max-width: 359px) {
  .elementor-14536 .rgv4-rv__title { font-size: 18px; }
  .elementor-14536 .rgv4-rv__all { padding: 0 16px; }
}

/* Full-screen sheet on phones */
@media (max-width: 640px) {
  .rgv4-scope.rgv4-modal:not([hidden]) { padding: 0; }
  .rgv4-scope .rgv4-modal__panel {
    align-self: flex-start; /* height comes from height:100%, never from flex stretch */
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .rgv4-scope .rgv4-modal__head { padding: 10px 12px 10px 16px; }
  .rgv4-scope .rgv4-modal__title { font-size: 20px; }
  .rgv4-scope .rgv4-modal__body { padding: 20px 16px 28px; }
  .rgv4-scope .rgv4-modal__summary {
    grid-template-columns: auto minmax(0, 1fr); /* the average sizes to its content: never past the gutter */
    gap: 16px;
  }
  .rgv4-scope .rgv4-modal__num { font-size: 36px; }
  .rgv4-scope .rgv4-modal__score { gap: 6px; }
  .rgv4-scope .rgv4-modal__score .rgv4-stars--one { --rgv4-s: 24px; }
  .rgv4-scope .rgv4-modal__hrow {
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    gap: 10px;
  }
  .rgv4-scope .rgv4-modal__controls { margin-top: 24px; }
  .rgv4-scope .rgv4-modal__ptrack { grid-auto-columns: 96px; }
  .rgv4-scope .rgv4-modal__photo {
    width: 96px;
    height: 96px;
  }
  .rgv4-scope .rgv4-modal__content .rgv4-thumb {
    width: 72px;
    height: 72px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rgv4-scope .rgv4-modal__row.is-flash { animation: none; }
  .elementor-14536 .rgv4-rv__tile img,
  .elementor-14536 .rgv4-thumb img,
  .rgv4-scope .rgv4-thumb img,
  .rgv4-scope .rgv4-modal__photo img { transition: none; }
}

/* ---- import/src/prod.css ---- */
/* Production-only rules (not in the prototype).
 * [rg_pdp_accordions] prints the full description inside .rgv4-slot--seo so the text is in the
 * HTML for search engines; rgv4.js replaces it with the panels on load. Kept out of view meanwhile. */
.elementor-14536 .rgv4-slot--seo {
  display: block;
  max-height: 0;
  overflow: hidden;
}

/* Critics 2026-10-12. */
/* Sold-out line where the Add to cart button would be (rgv4-pdp.php prints the Sold Out Badge text). */
.elementor-14536 .rgv4-atc .rgv4-soldout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--rg-tint);
  color: var(--rg-ink);
  font: 600 16px/1.2 var(--rg-font-body);
  letter-spacing: 0;
}
/* Goes-well-with quick add: inline cue when no option is picked yet. */
.elementor-14536 .rgv4-gww__hint {
  flex: 1 0 100%;
  order: 3;
  margin: 6px 0 0;
  font: 600 12px/16px var(--rg-font-body);
  color: var(--rg-ink);
}
.elementor-14536 .rgv4-gww__hint[hidden] { display: none; }
/* No reviews yet: the empty stars row is hidden by rgv4.js. */
.elementor-14536 .rgv4-rating[hidden] { display: none !important; }
/* Keyboard focus on the main Add to cart, in ink like every other control. */
.elementor-14536 .rgv4-atc .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}
@media (max-width: 767px), (pointer: coarse) {
  /* 24px minimum tap targets on the small text links */
  .elementor-14536 .rgv4-rating a.cr-review-link,
  .elementor-14536 .rgv4-who__item { display: inline-block; padding-block: 4px; }
  /* the breadcrumb scrolls sideways on phones: fade the end so a cut word reads as "more" */
  .elementor-14536 .rgv4-crumbs .woocommerce-breadcrumb {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}