/* Roots Glass category template V2 (#6905). Built from cat-v2/proto/src by tools/wp_bundle.py. */
/* ===== base.css ===== */
/* Category V2 base: tokens + page frame. Owned by the orchestrator; builders do not edit. */
.elementor-6905 {
  --rg-ink: #292929; --rg-muted: #6E6E6E; --rg-tint: #F5F5F5; --rg-line: #EAEAEA;
  --rg-accent: #79ED8F; --rg-star: #FFBC00; --rg-white: #FFFFFF;
  --rgcat-max: 1320px; --rgcat-gutter: 24px; --rgcat-rail: 248px;
  font-family: 'Poppins', sans-serif; color: var(--rg-ink); background: var(--rg-white);
}
@media (max-width: 767px) { .elementor-6905 { --rgcat-gutter: 16px; } }
/* every parent container is full width in Elementor; center the content */
.elementor-6905 > .e-con.e-parent { padding-left: var(--rgcat-gutter); padding-right: var(--rgcat-gutter); }
.elementor-6905 > .e-con.e-parent > * { max-width: var(--rgcat-max); }
.elementor-6905 > .e-con.e-parent:not(.rgcat-faq):not(.rgcat-trust) { margin-left: auto; margin-right: auto; max-width: calc(var(--rgcat-max) + 2 * var(--rgcat-gutter)); }
/* the old subcategory pill bar a hook prints inside the grid widget: replaced by [rg_cat_chips].
   Import note: unhook it for this template instead of hiding it. */
.elementor-6905 .rgcat-grid nav.rg-cat-bar { display: none !important; }
/* trust strip above the FAQ (Jared 2026-10-12): the template has FAQ then trust; the page is a column, FAQ goes last */
.elementor-6905 { display: flex; flex-direction: column; }
.elementor-6905 > .e-con.e-parent { flex: none; width: 100%; }
.elementor-6905 > .e-con.e-parent.rgcat-faq { order: 1; }

/* ===== p1-head.css ===== */
/* Piece 1: category header (.rgcat-head) + chip bar (.rgcat-chips). Scoped to .elementor-6905. */

/* ---------- header frame ---------- */
.elementor-6905 .rgcat-head.e-con {
  --flex-direction: row; flex-direction: row; flex-wrap: nowrap; align-items: flex-start;
  gap: 56px; padding-top: 28px; padding-bottom: 0;
}
.elementor-6905 .rgcat-head > .rgcat-head-main.e-con { flex: 1 1 0; min-width: 0; gap: 0; }
.elementor-6905 .rgcat-head > .rgcat-sidecats { flex: 0 0 min(392px, 31%); width: auto; max-width: none; margin: 0; }
.elementor-6905 .rgcat-head .elementor-widget-container { margin: 0; padding: 0; }

/* breadcrumb (native Woo markup, restyled) */
.elementor-6905 .rgcat-crumbs .woocommerce-breadcrumb {
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400; line-height: 20px;
  color: var(--rg-muted); margin: 0; padding: 0; text-transform: none; letter-spacing: 0;
}
.elementor-6905 .rgcat-crumbs .woocommerce-breadcrumb a {
  color: var(--rg-muted); text-decoration: none; font-weight: 400;
  border-radius: 999px; transition: color .15s ease;
}
.elementor-6905 .rgcat-crumbs .woocommerce-breadcrumb a:hover { color: var(--rg-ink); text-decoration: underline; text-underline-offset: 3px; }
.elementor-6905 .rgcat-crumbs .woocommerce-breadcrumb a:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }

/* H1: Jost 600, ~3.5x body, sentence case */
.elementor-6905 .rgcat-title .elementor-heading-title {
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 56px; line-height: 1.04;
  letter-spacing: -0.015em; text-transform: none; color: var(--rg-ink); margin: 8px 0 14px;
}

/* ---------- intro + "Learn more" ---------- */
/* Collapsed = the first paragraph of the term description only (the guide is not rendered), and that
   paragraph is capped at --rgcat-lines line-heights. line-height is unitless, so the cap is always a
   line-box edge: a short intro ends on its own last line, a long one is cut between two lines, never
   through glyphs. Pure CSS (no measuring), so it holds before fonts load and without JS.
   The fade is a mask on the text itself: the last line dissolves to nothing (the one above only
   softens at its foot), so the copy reads as running on under "Learn more". */
.elementor-6905 .rgcat-introbox { position: relative; max-width: 760px; --rgcat-lines: 4; }
.elementor-6905 .rgcat-introbox__clip {
  position: relative;
  font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.7; color: var(--rg-ink);
  overflow: hidden; --rgcat-lh: 1.7em;
}
.elementor-6905 .rgcat-introbox.is-capped:not(.is-open) .rgcat-introbox__guide { display: none; }
.elementor-6905 .rgcat-introbox.is-capped:not(.is-open) .rgcat-introbox__lead > p {
  max-height: calc(var(--rgcat-lines) * var(--rgcat-lh)); overflow: hidden; margin-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(41,41,41,1) 0, rgba(41,41,41,1) calc(100% - 1.5 * var(--rgcat-lh)),
    rgba(41,41,41,.5) calc(100% - .7 * var(--rgcat-lh)), rgba(41,41,41,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(41,41,41,1) 0, rgba(41,41,41,1) calc(100% - 1.5 * var(--rgcat-lh)),
    rgba(41,41,41,.5) calc(100% - .7 * var(--rgcat-lh)), rgba(41,41,41,0) 100%);
}
.elementor-6905 .rgcat-introbox__clip p { margin: 0 0 14px; font-size: inherit; line-height: inherit; color: var(--rg-ink); text-wrap: pretty; }
.elementor-6905 .rgcat-introbox__clip a {
  color: var(--rg-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 400;
}
.elementor-6905 .rgcat-introbox__clip a:hover { text-decoration-thickness: 2px; }
.elementor-6905 .rgcat-introbox__clip strong { font-weight: 600; color: var(--rg-ink); }
.elementor-6905 .rgcat-introbox__guide { padding-top: 4px; }
.elementor-6905 .rgcat-introbox__guide .rgcat-guide__h {
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.25; text-transform: none;
  letter-spacing: 0; color: var(--rg-ink); margin: 26px 0 10px;
}
.elementor-6905 .rgcat-introbox__guide .rgcat-guide__h:first-child { margin-top: 6px; }
.elementor-6905 .rgcat-introbox__guide ul { list-style: none; margin: 0 0 16px; padding: 0; }
.elementor-6905 .rgcat-introbox__guide li { position: relative; padding-left: 22px; margin: 0 0 8px; }
.elementor-6905 .rgcat-introbox__guide li::before {
  content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 999px; background: var(--rg-ink);
}

.elementor-6905 .rgcat-introbox__toggle {
  display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1;
  margin: 16px 0 0; height: 40px; padding: 0 18px 0 20px; border-radius: 999px;
  border: 1px solid var(--rg-ink); background: var(--rg-white); color: var(--rg-ink);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; line-height: 1; text-transform: none; letter-spacing: 0;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.elementor-6905 .rgcat-introbox__toggle:hover,
.elementor-6905 .rgcat-introbox__toggle:focus-visible { background: var(--rg-ink); color: var(--rg-white); }
.elementor-6905 .rgcat-introbox__toggle:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 3px; }
.elementor-6905 .rgcat-introbox__toggle .rgcat-ico { transition: transform .2s ease; }
.elementor-6905 .rgcat-introbox__toggle[aria-expanded="true"] .rgcat-ico { transform: rotate(180deg); }
.elementor-6905 .rgcat-introbox__less,
.elementor-6905 .rgcat-introbox__toggle[aria-expanded="true"] .rgcat-introbox__more { display: none; }
.elementor-6905 .rgcat-introbox__toggle[aria-expanded="true"] .rgcat-introbox__less { display: inline; }

/* ---------- side category list (desktop) ---------- */
.elementor-6905 .rgcat-sidecats__panel {
  background: var(--rg-tint); border-radius: 20px; padding: 16px 10px 8px;
}
.elementor-6905 .rgcat-sidecats__title {
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--rg-ink);
  text-transform: none; letter-spacing: 0; margin: 0 12px 6px;
}
.elementor-6905 .rgcat-sidecats__list { list-style: none; margin: 0; padding: 0; }
.elementor-6905 .rgcat-sidecats__list > li { margin: 0; padding: 0; border-top: 1px solid var(--rg-line); }
.elementor-6905 .rgcat-sidecats__list > li:first-child { border-top: 0; }
.elementor-6905 .rgcat-sidecats__row {
  display: flex; align-items: center; gap: 10px; min-height: 35px; padding: 0 12px; margin: 0;
  border-radius: 999px; color: var(--rg-ink); text-decoration: none;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.3;
  transition: background-color .15s ease;
}
.elementor-6905 .rgcat-sidecats__row:hover { background: var(--rg-white); color: var(--rg-ink); }
.elementor-6905 .rgcat-sidecats__row:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: -2px; }
.elementor-6905 .rgcat-sidecats__name { flex: 1 1 auto; min-width: 0; }
.elementor-6905 .rgcat-sidecats__row--all .rgcat-sidecats__name { font-weight: 500; }
.elementor-6905 .rgcat-sidecats__count { font-size: 13px; line-height: 1; color: var(--rg-muted); font-variant-numeric: tabular-nums; }
.elementor-6905 .rgcat-sidecats__row .rgcat-ico { flex: 0 0 auto; color: var(--rg-ink); transition: transform .15s ease; }
.elementor-6905 .rgcat-sidecats__row:hover .rgcat-ico { transform: translateX(2px); }
/* a type with 0 matches under the other active filters: muted, still clickable */
.elementor-6905 .rgcat-sidecats__row.is-empty .rgcat-sidecats__name { color: var(--rg-muted); }
.elementor-6905 .rgcat-sidecats__row.is-empty .rgcat-ico { color: var(--rg-muted); }
/* selected type (synced with the rail): ink pill row, white label + count + check (same language as
   the active chip), the hairlines either side of it drop out so it reads as one solid pill */
.elementor-6905 .rgcat-sidecats__row .rgcat-ico--check { display: none; }
.elementor-6905 .rgcat-sidecats__row.is-active,
.elementor-6905 .rgcat-sidecats__row.is-active:hover { background: var(--rg-ink); color: var(--rg-white); }
.elementor-6905 .rgcat-sidecats__row.is-active .rgcat-sidecats__name,
.elementor-6905 .rgcat-sidecats__row.is-active.is-empty .rgcat-sidecats__name { font-weight: 500; color: var(--rg-white); }
.elementor-6905 .rgcat-sidecats__row.is-active .rgcat-sidecats__count { color: var(--rg-white); }
.elementor-6905 .rgcat-sidecats__row.is-active .rgcat-ico { display: none; }
.elementor-6905 .rgcat-sidecats__row.is-active .rgcat-ico--check { display: block; transform: none; color: var(--rg-white); }
.elementor-6905 .rgcat-sidecats__row.is-active:focus-visible { outline-offset: 2px; }
.elementor-6905 .rgcat-sidecats__list > li:has(> .rgcat-sidecats__row.is-active),
.elementor-6905 .rgcat-sidecats__list > li:has(> .rgcat-sidecats__row.is-active) + li { border-top-color: transparent; }

/* nothing matches the other filters (every type would count 0): counts step aside, a one-line note
   says so, and the rows start a fresh search (type alone; "Shop all" clears every filter) */
.elementor-6905 .rgcat-sidecats__none {
  display: block; margin: 0 12px 8px;
  font-family: 'Poppins', sans-serif; font-size: 13px; line-height: 1.45; color: var(--rg-muted); text-wrap: balance;
}
.elementor-6905 .rgcat-sidecats__none[hidden] { display: none; }
.elementor-6905 .rgcat-sidecats__panel.is-none .rgcat-sidecats__count { display: none; }

/* grouped types (D.cat.type_groups, Accessories: 16 types): "Shop all" on top, then the groups side
   by side, each a small heading over its own rows, so the panel stays about as tall as the Bongs one
   (tallest group = 9 rows) instead of a 17-row wall. The panel widens to hold two columns. */
.elementor-6905 .rgcat-head > .rgcat-sidecats:has(.rgcat-sidecats__panel--grouped) { flex-basis: min(600px, 46%); }
.elementor-6905 .rgcat-sidecats__list--all { margin-bottom: 4px; }
.elementor-6905 .rgcat-sidecats__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; align-items: start; }
.elementor-6905 .rgcat-sidecats__group { min-width: 0; }
.elementor-6905 .rgcat-sidecats__group-h {
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--rg-muted);
  text-transform: none; letter-spacing: 0; margin: 8px 12px 4px; padding: 0 0 6px; border-bottom: 1px solid var(--rg-line);
}
.elementor-6905 .rgcat-sidecats__panel--grouped .rgcat-sidecats__row { min-height: 34px; }
.elementor-6905 .rgcat-sidecats__panel--grouped .rgcat-sidecats__name { overflow-wrap: anywhere; }
@media (min-width: 900px) and (max-width: 1199px) {
  /* narrower columns: the chevron goes invisible but keeps its slot, so the active row's check never
     re-wraps a name and shifts the layout on click; long names wrap */
  .elementor-6905 .rgcat-head > .rgcat-sidecats:has(.rgcat-sidecats__panel--grouped) { flex-basis: 50%; }
  .elementor-6905 .rgcat-sidecats__panel--grouped { padding-left: 8px; padding-right: 8px; }
  .elementor-6905 .rgcat-sidecats__groups { column-gap: 6px; }
  .elementor-6905 .rgcat-sidecats__panel--grouped .rgcat-sidecats__row {
    font-size: 14px; gap: 8px; padding: 6px 10px; line-height: 1.25;
  }
  .elementor-6905 .rgcat-sidecats__panel--grouped .rgcat-sidecats__row .rgcat-ico:not(.rgcat-ico--check) { visibility: hidden; }
  .elementor-6905 .rgcat-sidecats__group-h { margin-left: 10px; margin-right: 10px; }
}

/* ---------- chip bar ---------- */
.elementor-6905 .rgcat-chips.e-con { padding-top: 22px; padding-bottom: 20px; }
.elementor-6905 .rgcat-chips .elementor-widget-container { margin: 0; padding: 0; }
/* row = scrolling viewport + (only when it overflows) an arrow pair beside it, never on top of it */
.elementor-6905 .rgcat-chipbar { display: flex; align-items: center; gap: 12px; }
.elementor-6905 .rgcat-chipbar__viewport { position: relative; flex: 1 1 auto; min-width: 0; }
.elementor-6905 .rgcat-chipbar__track {
  position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding: 2px 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.elementor-6905 .rgcat-chipbar__track::-webkit-scrollbar { display: none; }
.elementor-6905 .rgcat-chipbar__track > li { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.elementor-6905 .rgcat-chipbar__label {
  font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; color: var(--rg-ink);
  padding: 0 4px 0 4px; white-space: nowrap;
}
.elementor-6905 .rgcat-chipbar__sep { width: 1px; height: 24px; background: var(--rg-line); margin: 0 8px; }

.elementor-6905 .rgcat-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; box-sizing: border-box;
  border-radius: 999px; white-space: nowrap; text-decoration: none; text-transform: none; letter-spacing: 0;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 400; line-height: 1; color: var(--rg-ink);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.elementor-6905 .rgcat-chip:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-6905 .rgcat-chip .rgcat-ico { flex: 0 0 auto; }
/* every chip is an outline pill: white fill, 1px ink border (the outline-button rule), ink label.
   Type chips select the Type filter (fallback = the sub-category page); filter chips carry a "+". */
.elementor-6905 .rgcat-chip--type,
.elementor-6905 .rgcat-chip--tag { background: var(--rg-white); border: 1px solid var(--rg-ink); color: var(--rg-ink); }
.elementor-6905 .rgcat-chip--tag { padding: 0 18px 0 14px; }
@media (hover: hover) {
  .elementor-6905 .rgcat-chip--type:hover,
  .elementor-6905 .rgcat-chip--tag:hover { background: var(--rg-tint); color: var(--rg-ink); }
}
/* selected = solid ink pill, white label; a selected filter chip swaps its "+" for an "x" */
.elementor-6905 .rgcat-chip--type.is-active,
.elementor-6905 .rgcat-chip--type.is-active:hover,
.elementor-6905 .rgcat-chip--tag.is-active,
.elementor-6905 .rgcat-chip--tag.is-active:hover { background: var(--rg-ink); border-color: var(--rg-ink); color: var(--rg-white); }
.elementor-6905 .rgcat-chip--tag .rgcat-ico--x,
.elementor-6905 .rgcat-chip--tag.is-active .rgcat-ico--plus { display: none; }
.elementor-6905 .rgcat-chip--tag.is-active .rgcat-ico--x { display: block; }
/* "All <category>" chip (= clear Type) leads the type group, which shows only below 900px */
.elementor-6905 .rgcat-chip--all { font-weight: 500; }
/* grouped type chips (Accessories, below 900px): "For flower" / "For dabs" labels read quieter than
   the filter group labels, since the chips beside them are the thing */
.elementor-6905 .rgcat-chipbar__label--type { color: var(--rg-muted); }

/* "Features" group label: a plain label in place; on desktop it is pinned to the row's right edge
   (sticky) while its group is still off to the right, and then reads as a "Features >" jump pill */
.elementor-6905 .rgcat-chipbar__jump {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; margin: 0; padding: 0 2px 0 4px;
  border: 0; border-radius: 999px; background: transparent; color: var(--rg-ink); cursor: default;
  font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; line-height: 1; text-transform: none; letter-spacing: 0;
  transition: background-color .15s ease, color .15s ease, padding .15s ease;
}
.elementor-6905 .rgcat-chipbar__jump .rgcat-ico { display: none; }
.elementor-6905 .rgcat-chipbar__label--tags { padding: 0; }
@media (min-width: 900px) {
  /* the "Shop by type" panel shows from 900px (same split as piece 2's rail): types live there,
     the chip row carries only filter chips (Joint size + Features) */
  .elementor-6905 .rgcat-chipbar__item--typegroup { display: none; }
  /* without filter chips (2026-10-12) the row holds only type chips, which desktop shows in the panel: no row */
  .elementor-6905 > .e-con.rgcat-chips { display: none; }
  .elementor-6905 .rgcat-chipbar__label--tags { position: sticky; right: 0; z-index: 2; background: var(--rg-white); }
  .elementor-6905 .rgcat-chipbar.tags-pinned .rgcat-chipbar__label--tags { padding-left: 10px; }
  .elementor-6905 .rgcat-chipbar.tags-pinned .rgcat-chipbar__label--tags::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 64px; pointer-events: none;
    background: linear-gradient(to left, #FFFFFF 20%, rgba(255,255,255,0));
  }
  .elementor-6905 .rgcat-chipbar.tags-pinned .rgcat-chipbar__jump {
    background: var(--rg-tint); color: var(--rg-ink); padding: 0 12px 0 16px; cursor: pointer;
  }
  .elementor-6905 .rgcat-chipbar.tags-pinned .rgcat-chipbar__jump .rgcat-ico { display: block; }
  .elementor-6905 .rgcat-chipbar.tags-pinned .rgcat-chipbar__jump:hover { background: var(--rg-ink); color: var(--rg-white); }
}

/* edge fades (inside the viewport) + arrow pair (beside it), only when the row overflows */
.elementor-6905 .rgcat-chipbar__viewport::before,
.elementor-6905 .rgcat-chipbar__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 72px; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .2s ease;
}
.elementor-6905 .rgcat-chipbar__viewport::before { left: 0; background: linear-gradient(to right, #FFFFFF 30%, rgba(255,255,255,0)); }
.elementor-6905 .rgcat-chipbar__viewport::after { right: 0; background: linear-gradient(to left, #FFFFFF 30%, rgba(255,255,255,0)); }
.elementor-6905 .rgcat-chipbar.is-overflow:not(.at-start) .rgcat-chipbar__viewport::before,
.elementor-6905 .rgcat-chipbar.is-overflow:not(.at-end):not(.tags-pinned) .rgcat-chipbar__viewport::after { opacity: 1; }
.elementor-6905 .rgcat-chipbar__arrows { display: flex; gap: 8px; flex: 0 0 auto; }
.elementor-6905 .rgcat-chipbar__arrows[hidden] { display: none; }
.elementor-6905 .rgcat-chipbar__arrow {
  width: 40px; height: 40px; margin: 0; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--rg-ink); background: var(--rg-white); color: var(--rg-ink);
  cursor: pointer; transition: opacity .2s ease, background-color .15s ease, color .15s ease;
}
.elementor-6905 .rgcat-chipbar__arrow:hover:not(:disabled) { background: var(--rg-ink); color: var(--rg-white); }
.elementor-6905 .rgcat-chipbar__arrow:disabled { opacity: .3; cursor: default; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .elementor-6905 .rgcat-head.e-con { gap: 32px; }
  .elementor-6905 .rgcat-title .elementor-heading-title { font-size: 48px; }
}

/* ---------- below 900px: no panel, no rail (piece 2's drawer) ---------- */
@media (max-width: 899px) {
  /* "Learn more" as a quiet text link with a chevron (44px tap height), not a second pill; it sits
     in its own band below the dissolved last line */
  .elementor-6905 .rgcat-introbox__toggle {
    height: 44px; margin: 4px 0 0; padding: 0 4px 0 0; border: 0; border-radius: 999px; background: transparent;
    color: var(--rg-ink); font-size: 15px; gap: 6px;
  }
  .elementor-6905 .rgcat-introbox__toggle:hover,
  .elementor-6905 .rgcat-introbox__toggle:focus-visible { background: transparent; color: var(--rg-ink); text-decoration: underline; text-underline-offset: 4px; }
  .elementor-6905 .rgcat-head.e-con { flex-direction: column; gap: 0; padding-top: 18px; padding-bottom: 0; }
  .elementor-6905 .rgcat-head > .rgcat-head-main.e-con { flex: 0 0 auto; width: 100%; }
  /* the side list folds into the chip row ("All <category>" + one chip per type) */
  .elementor-6905 .rgcat-head > .rgcat-sidecats { display: none; }

  .elementor-6905 .rgcat-chips.e-con { padding-top: 20px; padding-bottom: 12px; }
  /* the row bleeds to the screen edge so the last chip is cut off: the swipe cue */
  .elementor-6905 .rgcat-chipbar__track {
    margin: 0 calc(-1 * var(--rgcat-gutter)); padding: 2px var(--rgcat-gutter);
    scroll-padding: 0 var(--rgcat-gutter); gap: 8px;
  }
  .elementor-6905 .rgcat-chip { height: 44px; padding: 0 16px; }
  .elementor-6905 .rgcat-chip--tag { padding: 0 16px 0 13px; }
  /* each filter group opens with a divider + its label, so the label reads as a group heading */
  .elementor-6905 .rgcat-chipbar__sep { height: 28px; margin: 0 2px 0 6px; }
  .elementor-6905 .rgcat-chipbar__label { padding: 0 2px 0 0; }
  .elementor-6905 .rgcat-chipbar__jump { height: 44px; padding: 0 2px 0 0; }
  .elementor-6905 .rgcat-chipbar__viewport::before,
  .elementor-6905 .rgcat-chipbar__viewport::after,
  .elementor-6905 .rgcat-chipbar__arrows { display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .elementor-6905 .rgcat-head.e-con { padding-top: 14px; }
  .elementor-6905 .rgcat-crumbs .woocommerce-breadcrumb a {
    display: inline-block; padding: 12px 2px; margin: -12px -2px; /* 44px tap height, no layout shift */
  }
  .elementor-6905 .rgcat-title .elementor-heading-title { font-size: 40px; margin: 6px 0 12px; }
  .elementor-6905 .rgcat-introbox__clip { font-size: 15px; line-height: 1.65; --rgcat-lh: 1.65em; }
  .elementor-6905 .rgcat-introbox__guide .rgcat-guide__h { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-6905 .rgcat-chip, .elementor-6905 .rgcat-introbox__toggle .rgcat-ico,
  .elementor-6905 .rgcat-sidecats__row .rgcat-ico { transition: none; }
}

/* ===== p2-toolbar.css ===== */
/* Piece 2: toolbar [rg_cat_toolbar] (+ active-filter pills), filter rail [rg_cat_filters], .rgcat-shop row
   layout, mobile filter drawer (.rgcat-drawer, moved to body by JS), empty state. Rail from 900px up.
   Hover fills only on devices that really hover (no grey residue after a tap on touch screens). */

/* ---------- shared atoms ---------- */
.elementor-6905 .rgcat-sr, .rgcat-drawer .rgcat-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.elementor-6905 .rgcat-tb .rgcat-ico, .rgcat-drawer .rgcat-ico { flex: 0 0 auto; display: block; }
.elementor-6905 .rgcat-chev, .rgcat-drawer .rgcat-chev { flex: 0 0 auto; display: block; transition: transform .18s ease; }
.elementor-6905 .rgcat-ff [hidden], .elementor-6905 .rgcat-tb [hidden], .rgcat-drawer [hidden],
.elementor-6905 .rgcat-grid .rgcat-empty [hidden] { display: none !important; }

/* pill control (toolbar): tint fill, no border, no shadow */
.elementor-6905 .rgcat-pill {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 0; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--rg-tint); color: var(--rg-ink);
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 16px; line-height: 1;
  letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  cursor: pointer; box-shadow: none; transition: background-color .15s ease;
  width: auto !important;
}
.elementor-6905 .rgcat-pill:focus { outline: none; background: var(--rg-tint); color: var(--rg-ink); text-decoration: none; }
.elementor-6905 .rgcat-pill:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }

/* ---------- toolbar ---------- */
.elementor-6905 .rgcat-toolbar .rgcat-toolbar-slot { width: 100%; }
.elementor-6905 .rgcat-tb {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  min-height: 72px; margin: 12px 0 28px; padding: 13px 0;
  border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line);
  box-sizing: border-box;
}
.elementor-6905 .rgcat-tb__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.elementor-6905 .rgcat-tb__open, .elementor-6905 .rgcat-tb__sortm { display: none; }
/* active-filter count on the phone Filter pill */
.elementor-6905 .rgcat-pill__n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; background: var(--rg-ink); color: var(--rg-white);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; line-height: 1;
}
.elementor-6905 .rgcat-tb__count {
  margin: 0; flex: 0 0 auto;
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--rg-muted);
}

/* active filters: removable pills + Clear all, a second row inside the toolbar's hairlines */
.elementor-6905 .rgcat-active {
  order: 3; flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.elementor-6905 .rgcat-active__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none;
}
.elementor-6905 .rgcat-active__list li { margin: 0; padding: 0; list-style: none; flex: 0 0 auto; }
.elementor-6905 a.rgcat-af {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 16px;
  border-radius: 999px; background: var(--rg-tint); color: var(--rg-ink); text-decoration: none; white-space: nowrap;
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px; line-height: 1;
}
.elementor-6905 a.rgcat-af:focus { outline: none; color: var(--rg-ink); text-decoration: none; }
.elementor-6905 a.rgcat-af:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-6905 .rgcat-af__x { flex: 0 0 auto; display: block; }
.elementor-6905 .rgcat-active__clear { flex: 0 0 auto; }

/* sort */
.elementor-6905 .rgcat-sort { position: relative; }
.elementor-6905 .rgcat-sort__k { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px; color: var(--rg-muted); }
.elementor-6905 .rgcat-sort__v { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 16px; }
.elementor-6905 .rgcat-sort__btn[aria-expanded="true"] .rgcat-chev { transform: rotate(180deg); }
.elementor-6905 .rgcat-sort__menu {
  display: none; position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  min-width: 232px; margin: 0; padding: 8px; list-style: none;
  background: var(--rg-white); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(41, 41, 41, .14), 0 1px 3px rgba(41, 41, 41, .08);
}
.elementor-6905 .rgcat-sort.is-open .rgcat-sort__menu,
.elementor-6905 .rgcat-sort:not(.is-js):focus-within .rgcat-sort__menu { display: block; }
.elementor-6905 .rgcat-sort__menu li { margin: 0; padding: 0; list-style: none; }
.elementor-6905 .rgcat-sort__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.2;
  color: var(--rg-ink); text-decoration: none; white-space: nowrap;
}
.elementor-6905 .rgcat-sort__opt:focus { background: var(--rg-tint); color: var(--rg-ink); text-decoration: none; outline: none; }
.elementor-6905 .rgcat-sort__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--rg-ink); }
.elementor-6905 .rgcat-sort__opt[aria-checked="true"] { font-weight: 600; }
.elementor-6905 .rgcat-sort__tick { width: 10px; height: 5px; margin-top: -3px; }
.elementor-6905 .rgcat-sort__opt[aria-checked="true"] .rgcat-sort__tick {
  border-left: 2px solid var(--rg-ink); border-bottom: 2px solid var(--rg-ink); transform: rotate(-45deg);
}

/* ---------- shop row: rail left, grid right ---------- */
.elementor-6905 .rgcat-shop { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 0 40px; }
.elementor-6905 .rgcat-shop > .rgcat-filters {
  flex: 0 0 var(--rgcat-rail); width: var(--rgcat-rail); max-width: var(--rgcat-rail); min-width: 0;
  /* sticky rail: bounded by .rgcat-shop, so it stops where the gallery ends. The live header is an
     Elementor sticky section; JS publishes its height as --rgcat-header-h (fallback 138px). */
  position: -webkit-sticky; position: sticky; align-self: flex-start;
  top: var(--rgcat-sticky-top, calc(var(--rgcat-header-h, 138px) + 24px));
  /* no JS: the whole rail scrolls inside itself when it is taller than the screen */
  max-height: calc(100vh - var(--rgcat-sticky-top, calc(var(--rgcat-header-h, 138px) + 24px)) - 24px);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--rg-ink) 22%, transparent) transparent;
}
/* JS (.is-fit, see the rail section in p2-toolbar.js): groups fold to fit the screen; if the list is still
   too tall it becomes the scroller, its height (--rgcat-rail-h) trimmed so it starts and ends on whole
   groups, with the "More filters" bar under it */
.elementor-6905 .rgcat-shop > .rgcat-filters:has(.rgcat-ff.is-fit) { max-height: none; overflow: visible; }
.elementor-6905 .rgcat-ff.is-fit .rgcat-ff__groups {
  max-height: var(--rgcat-rail-h, none); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--rg-ink) 22%, transparent) transparent;
}
.elementor-6905 .rgcat-shop > .rgcat-grid { flex: 1 1 0; min-width: 0; width: auto; }
.elementor-6905 .rgcat-shop:has(.rgcat-ff.is-collapsed) > .rgcat-filters { display: none; }

/* ---------- filter form + groups (rail and drawer) ---------- */
.elementor-6905 .rgcat-ff { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.elementor-6905 .rgcat-ff__groups { display: flex; flex-direction: column; gap: 8px; }

/* rail is compact (it has to fit beside the gallery while stuck); the drawer keeps its 48-56px rows */
.elementor-6905 .rgcat-ff .rgcat-fg__head { min-height: 46px; }
.elementor-6905 .rgcat-ff .rgcat-fg__body { padding-bottom: 10px; }
.elementor-6905 .rgcat-ff .rgcat-opt { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
.elementor-6905 .rgcat-ff .rgcat-more { min-height: 32px; margin-top: 2px; }
.elementor-6905 .rgcat-ff .rgcat-price .rgcat-price__f input.rgcat-price__in { height: 40px; }
.elementor-6905 .rgcat-ff .rgcat-price__cur { height: 40px; }
.elementor-6905 .rgcat-ff .rgcat-price__dash { margin-bottom: 19px; }

/* "More filters" bar: under the group list, only while the list is taller than the screen; the list's
   window is trimmed so the bar always sits under a whole group, never under a slice */
.elementor-6905 .rgcat-ff__nextbar { margin: -4px 0 0; padding: 0; }
.elementor-6905 .rgcat-ff__nextbar[hidden] { display: none; }
.elementor-6905 .rgcat-ff__next {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; width: 100% !important; min-height: 44px; margin: 0; padding: 0 16px 0 18px;
  border: 1px solid var(--rg-ink); border-radius: 999px; background: var(--rg-white); color: var(--rg-ink);
  box-shadow: none; cursor: pointer; text-align: left;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0; text-transform: none;
  transition: background-color .15s ease, color .15s ease;
}
.elementor-6905 .rgcat-ff__next:focus { background: var(--rg-white); color: var(--rg-ink); border-color: var(--rg-ink); outline: none; }
.elementor-6905 .rgcat-ff__next:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-6905 .rgcat-ff__next-t { flex: 0 0 auto; white-space: nowrap; }
.elementor-6905 .rgcat-ff__next-n {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 400; font-size: 13px; color: var(--rg-muted);
}
.elementor-6905 .rgcat-ff__next .rgcat-chev { margin-left: auto; }
.elementor-6905 .rgcat-ff__next[data-dir="up"] .rgcat-chev { transform: rotate(180deg); }

.elementor-6905 .rgcat-fg, .rgcat-drawer .rgcat-fg {
  margin: 0; padding: 0; border: 0; border-radius: 16px; background: var(--rg-tint);
}
.elementor-6905 .rgcat-fg__head, .rgcat-drawer .rgcat-fg__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 18px; margin: 0; border-radius: 16px;
  list-style: none; cursor: pointer; background: transparent; color: var(--rg-ink);
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.2;
}
.elementor-6905 .rgcat-fg__head::-webkit-details-marker, .rgcat-drawer .rgcat-fg__head::-webkit-details-marker { display: none; }
.elementor-6905 .rgcat-fg__head::marker, .rgcat-drawer .rgcat-fg__head::marker { content: ''; }
.elementor-6905 .rgcat-fg__head::after, .rgcat-drawer .rgcat-fg__head::after { content: none; }
.elementor-6905 .rgcat-fg__head:focus, .rgcat-drawer .rgcat-fg__head:focus { outline: none; }
.elementor-6905 .rgcat-fg__head:focus-visible, .rgcat-drawer .rgcat-fg__head:focus-visible { box-shadow: inset 0 0 0 2px var(--rg-ink); }
.elementor-6905 .rgcat-fg[open] > .rgcat-fg__head .rgcat-chev, .rgcat-drawer .rgcat-fg[open] > .rgcat-fg__head .rgcat-chev { transform: rotate(180deg); }
.elementor-6905 .rgcat-fg__body, .rgcat-drawer .rgcat-fg__body { padding: 0 10px 12px; }
.elementor-6905 .rgcat-fg__opts, .rgcat-drawer .rgcat-fg__opts { display: flex; flex-direction: column; }
.elementor-6905 .rgcat-fg__body.is-clamped .rgcat-opt--extra, .rgcat-drawer .rgcat-fg__body.is-clamped .rgcat-opt--extra { display: none; }

/* option row: custom rounded checkbox + label + live count */
.elementor-6905 .rgcat-opt, .rgcat-drawer .rgcat-opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 40px; margin: 0; padding: 4px 8px; border-radius: 12px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.3; color: var(--rg-ink);
  text-transform: none; letter-spacing: 0;
}
/* the real input covers the whole row (invisible, clicks fall through to the label) so any click or
   scroll-into-view lands inside the row, never on whatever sits under a 1px box */
.elementor-6905 .rgcat-opt input.rgcat-opt__in, .rgcat-drawer .rgcat-opt input.rgcat-opt__in,
.rgcat-drawer .rgcat-sortpill input.rgcat-opt__in {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0; border: 0;
  pointer-events: none; background: transparent; color: var(--rg-ink); box-shadow: none;
  scroll-margin: calc(var(--rgcat-header-h, 0px) + 16px) 0 24px;
}
.elementor-6905 .rgcat-opt__box, .rgcat-drawer .rgcat-opt__box {
  position: relative; flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box;
  border: 1.5px solid var(--rg-ink); border-radius: 6px; background: var(--rg-white);
  transition: background-color .12s ease;
}
.elementor-6905 .rgcat-opt__in:checked + .rgcat-opt__box, .rgcat-drawer .rgcat-opt__in:checked + .rgcat-opt__box { background: var(--rg-ink); }
.elementor-6905 .rgcat-opt__in:checked + .rgcat-opt__box::after, .rgcat-drawer .rgcat-opt__in:checked + .rgcat-opt__box::after {
  content: ''; position: absolute; left: 5px; top: 3px; width: 6px; height: 10px;
  border: solid var(--rg-white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.elementor-6905 .rgcat-opt__in:focus-visible + .rgcat-opt__box, .rgcat-drawer .rgcat-opt__in:focus-visible + .rgcat-opt__box { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-6905 .rgcat-opt__label, .rgcat-drawer .rgcat-opt__label { flex: 1 1 auto; min-width: 0; }
.elementor-6905 .rgcat-opt__n, .rgcat-drawer .rgcat-opt__n {
  flex: 0 0 auto; margin-left: auto; font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--rg-muted);
  font-variant-numeric: tabular-nums;
}
/* 0 matches with the other groups' selections: muted, still clickable */
.elementor-6905 .rgcat-opt.is-zero .rgcat-opt__label, .rgcat-drawer .rgcat-opt.is-zero .rgcat-opt__label { color: var(--rg-muted); }
.elementor-6905 .rgcat-opt.is-zero .rgcat-opt__box, .rgcat-drawer .rgcat-opt.is-zero .rgcat-opt__box { border-color: var(--rg-muted); }

/* "Show more" */
.elementor-6905 .rgcat-more, .rgcat-drawer .rgcat-more {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; margin: 4px 0 0; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--rg-ink); box-shadow: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; line-height: 1; text-transform: none; letter-spacing: 0;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  width: auto !important;
}
.elementor-6905 .rgcat-more[hidden], .rgcat-drawer .rgcat-more[hidden] { display: none; }
.elementor-6905 .rgcat-more:focus, .rgcat-drawer .rgcat-more:focus { background: transparent; color: var(--rg-ink); outline: none; }
.elementor-6905 .rgcat-more:focus-visible, .rgcat-drawer .rgcat-more:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 1px; }
.elementor-6905 .rgcat-more[aria-expanded="true"] .rgcat-chev, .rgcat-drawer .rgcat-more[aria-expanded="true"] .rgcat-chev { transform: rotate(180deg); }

/* price: empty by default (placeholders show the category range); "$" prefix only once a value is typed */
.elementor-6905 .rgcat-price, .rgcat-drawer .rgcat-price { display: flex; align-items: flex-end; gap: 8px; padding: 0 8px 4px; }
.elementor-6905 .rgcat-price__f, .rgcat-drawer .rgcat-price__f { position: relative; flex: 1 1 0; min-width: 0; margin: 0; display: block; }
.elementor-6905 .rgcat-price__k, .rgcat-drawer .rgcat-price__k {
  display: block; margin: 0 0 6px 4px; font-family: 'Poppins', sans-serif; font-size: 13px; line-height: 1.2; color: var(--rg-muted);
}
.elementor-6905 .rgcat-price__cur, .rgcat-drawer .rgcat-price__cur {
  position: absolute; left: 16px; bottom: 0; height: 44px; display: flex; align-items: center;
  font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--rg-ink); pointer-events: none;
}
.elementor-6905 .rgcat-price__f:has(input:placeholder-shown) .rgcat-price__cur,
.rgcat-drawer .rgcat-price__f:has(input:placeholder-shown) .rgcat-price__cur { display: none; }
.elementor-6905 .rgcat-price .rgcat-price__f input.rgcat-price__in, .rgcat-drawer .rgcat-price .rgcat-price__f input.rgcat-price__in {
  -webkit-appearance: none; appearance: none; -moz-appearance: textfield; box-sizing: border-box;
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px 0 28px;
  border: 1px solid var(--rg-muted); border-radius: 999px; background: var(--rg-white); color: var(--rg-ink);
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1; box-shadow: none;
}
.elementor-6905 .rgcat-price .rgcat-price__f input.rgcat-price__in:placeholder-shown,
.rgcat-drawer .rgcat-price .rgcat-price__f input.rgcat-price__in:placeholder-shown { padding-left: 16px; }
.elementor-6905 .rgcat-price .rgcat-price__f input.rgcat-price__in::placeholder,
.rgcat-drawer .rgcat-price .rgcat-price__f input.rgcat-price__in::placeholder { color: var(--rg-muted); opacity: 1; }
.elementor-6905 .rgcat-price .rgcat-price__f input.rgcat-price__in::-webkit-outer-spin-button, .elementor-6905 .rgcat-price .rgcat-price__f input.rgcat-price__in::-webkit-inner-spin-button,
.rgcat-drawer .rgcat-price .rgcat-price__f input.rgcat-price__in::-webkit-outer-spin-button, .rgcat-drawer .rgcat-price .rgcat-price__f input.rgcat-price__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.elementor-6905 .rgcat-price .rgcat-price__f input.rgcat-price__in:focus, .rgcat-drawer .rgcat-price .rgcat-price__f input.rgcat-price__in:focus { outline: 2px solid var(--rg-ink); outline-offset: 1px; border-color: var(--rg-ink); }
.elementor-6905 .rgcat-price__dash, .rgcat-drawer .rgcat-price__dash { flex: 0 0 8px; height: 1.5px; margin-bottom: 21px; background: var(--rg-muted); border-radius: 999px; }
.elementor-6905 .rgcat-price__note, .rgcat-drawer .rgcat-price__note {
  margin: 8px 8px 2px; font-family: 'Poppins', sans-serif; font-size: 13px; line-height: 1.4; color: var(--rg-ink);
}

/* apply (no-JS rail) / show results (drawer): ink fill pill; accent is reserved for the reel CTA */
.elementor-6905 .rgcat-apply, .rgcat-drawer .rgcat-apply {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
  margin: 0; padding: 0 24px; border: 1px solid var(--rg-ink); border-radius: 999px;
  background: var(--rg-ink); color: var(--rg-white); box-shadow: none; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0; text-transform: none;
  transition: background-color .15s ease;
}
.elementor-6905 .rgcat-apply:focus, .rgcat-drawer .rgcat-apply:focus { background: var(--rg-ink); color: var(--rg-white); border-color: var(--rg-ink); outline: none; }
.elementor-6905 .rgcat-apply:focus-visible, .rgcat-drawer .rgcat-apply:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-6905 .rgcat-ff__actions {
  position: sticky; bottom: 0; z-index: 2; padding: 10px 0 16px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--rg-white) 0%, transparent), var(--rg-white) 10px);
}
.elementor-6905 a.rgcat-clear, .rgcat-drawer a.rgcat-clear {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; color: var(--rg-ink); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
.elementor-6905 a.rgcat-clear:focus-visible, .rgcat-drawer a.rgcat-clear:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }

/* ---------- drawer (moved to body by JS; also opens via :target without JS) ---------- */
.rgcat-drawer {
  --rg-ink: #292929; --rg-muted: #6E6E6E; --rg-tint: #F5F5F5; --rg-line: #EAEAEA; --rg-white: #FFFFFF;
  position: fixed; inset: 0; z-index: 100000; display: none;
  font-family: 'Poppins', sans-serif; color: var(--rg-ink);
}
.rgcat-drawer.is-open, .rgcat-drawer:not(.is-js):target { display: block; }
.rgcat-drawer .rgcat-drawer__scrim { position: absolute; inset: 0; display: block; background: rgba(41, 41, 41, .5); cursor: default; }
.rgcat-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
  width: min(420px, calc(100% - 40px)); margin: 0; background: var(--rg-white);
  border-radius: 0 20px 20px 0; box-shadow: 0 0 40px rgba(41, 41, 41, .22); overflow: hidden;
  animation: rgcat-drawer-in .24s ease-out;
}
@keyframes rgcat-drawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rgcat-drawer__panel { animation: none; } }
.rgcat-drawer__head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--rg-line);
}
.rgcat-drawer .rgcat-drawer__title {
  margin: 0; padding: 0; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2;
  color: var(--rg-ink); text-transform: none; letter-spacing: 0;
}
.rgcat-drawer .rgcat-drawer__title:focus { outline: none; }
.rgcat-drawer .rgcat-drawer__close {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
  width: 44px; height: 44px; border-radius: 999px; background: var(--rg-tint); color: var(--rg-ink);
}
.rgcat-drawer .rgcat-drawer__close:focus { background: var(--rg-tint); color: var(--rg-ink); outline: none; }
.rgcat-drawer .rgcat-drawer__close:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.rgcat-drawer__body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 0; padding: 4px 20px 24px;
}
/* sort first and compact: pill radios in one wrap, above Availability */
.rgcat-drawer .rgcat-dsort { flex: 0 0 auto; padding: 14px 4px 16px; border-bottom: 1px solid var(--rg-line); }
.rgcat-drawer .rgcat-dsort__title {
  margin: 0 0 12px; padding: 0; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.2;
  color: var(--rg-ink); text-transform: none; letter-spacing: 0;
}
.rgcat-drawer .rgcat-sortpills { display: flex; flex-wrap: wrap; gap: 8px; }
.rgcat-drawer .rgcat-sortpill {
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 16px;
  border: 1px solid var(--rg-ink); border-radius: 999px; background: var(--rg-white); color: var(--rg-ink); cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.rgcat-drawer .rgcat-sortpill:has(input:checked) { background: var(--rg-ink); color: var(--rg-white); font-weight: 600; }
.rgcat-drawer .rgcat-sortpill:has(input:focus-visible) { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.rgcat-drawer .rgcat-fg { flex: 0 0 auto; }
/* inside the white drawer: white groups split by hairlines (no grey-in-grey nesting) */
.rgcat-drawer .rgcat-drawer__body .rgcat-fg { background: var(--rg-white); border-radius: 0; border-bottom: 1px solid var(--rg-line); }
.rgcat-drawer .rgcat-drawer__body .rgcat-fg:last-child { border-bottom: 0; }
.rgcat-drawer .rgcat-drawer__body .rgcat-fg__head { padding: 0 4px; border-radius: 12px; }
.rgcat-drawer .rgcat-drawer__body .rgcat-fg__body { padding: 0 0 14px; }
.rgcat-drawer .rgcat-drawer__body .rgcat-price { padding: 0 0 4px; }
.rgcat-drawer .rgcat-drawer__body .rgcat-price__note { margin-left: 0; }
.rgcat-drawer .rgcat-drawer__body .rgcat-opt { padding: 4px; }
.rgcat-drawer .rgcat-fg__head { min-height: 56px; }
.rgcat-drawer .rgcat-opt { min-height: 48px; font-size: 16px; }
.rgcat-drawer .rgcat-more { min-height: 44px; }
.rgcat-drawer .rgcat-clear { min-height: 44px; }
.rgcat-drawer__foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rg-line); background: var(--rg-white);
}
.rgcat-drawer__foot .rgcat-apply { flex: 1 1 auto; width: auto; }
.rgcat-lock { overflow: hidden !important; }

/* ---------- hover fills: real pointers only (touch taps leave no grey residue) ---------- */
@media (hover: hover) and (pointer: fine) {
  .elementor-6905 .rgcat-pill:hover { background: color-mix(in srgb, var(--rg-ink) 9%, var(--rg-tint)); color: var(--rg-ink); text-decoration: none; }
  .elementor-6905 .rgcat-sort__btn:hover .rgcat-sort__k { color: color-mix(in srgb, var(--rg-muted) 80%, var(--rg-ink)); }
  .elementor-6905 .rgcat-sort__opt:hover { background: var(--rg-tint); color: var(--rg-ink); text-decoration: none; }
  .elementor-6905 a.rgcat-af:hover { background: color-mix(in srgb, var(--rg-ink) 9%, var(--rg-tint)); color: var(--rg-ink); }
  .elementor-6905 .rgcat-opt:hover, .rgcat-drawer .rgcat-opt:hover { background: color-mix(in srgb, var(--rg-ink) 5%, var(--rg-tint)); }
  .rgcat-drawer .rgcat-drawer__body .rgcat-opt:hover { background: var(--rg-tint); }
  .elementor-6905 .rgcat-more:hover, .rgcat-drawer .rgcat-more:hover { background: var(--rg-white); color: var(--rg-ink); }
  .rgcat-drawer .rgcat-drawer__body .rgcat-more:hover { background: var(--rg-tint); }
  .rgcat-drawer .rgcat-sortpill:not(:has(input:checked)):hover { background: var(--rg-tint); }
  .elementor-6905 .rgcat-apply:hover, .rgcat-drawer .rgcat-apply:hover { background: color-mix(in srgb, var(--rg-ink) 85%, var(--rg-white)); color: var(--rg-white); border-color: var(--rg-ink); }
  .elementor-6905 a.rgcat-clear:hover, .rgcat-drawer a.rgcat-clear:hover { background: var(--rg-tint); color: var(--rg-ink); }
  .elementor-6905 .rgcat-ff__next:hover { background: var(--rg-ink); color: var(--rg-white); border-color: var(--rg-ink); }
  .elementor-6905 .rgcat-ff__next:hover .rgcat-ff__next-n { color: var(--rg-white); }
  .rgcat-drawer .rgcat-drawer__close:hover { background: color-mix(in srgb, var(--rg-ink) 9%, var(--rg-tint)); color: var(--rg-ink); }
  .elementor-6905 .rgcat-grid .rgcat-empty .rgcat-empty__btn:hover { background: var(--rg-ink); color: var(--rg-white); border-color: var(--rg-ink); }
  .elementor-6905 .rgcat-grid .rgcat-empty a.rgcat-empty__chip:hover { background: var(--rg-ink); color: var(--rg-white); }
}

/* ---------- below 900px: rail -> drawer ---------- */
@media (max-width: 899px) {
  .elementor-6905 .rgcat-shop > .rgcat-filters { display: none; }
  .elementor-6905 .rgcat-tb__filter, .elementor-6905 .rgcat-sort { display: none; }
  .elementor-6905 .rgcat-tb__open, .elementor-6905 .rgcat-tb__sortm { display: inline-flex; }
  .elementor-6905 .rgcat-tb__sortm { min-width: 0; }
  .elementor-6905 .rgcat-tb__sortm .rgcat-sort__v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
  /* active pills: one row that scrolls sideways inside itself */
  .elementor-6905 .rgcat-active { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .elementor-6905 .rgcat-active::-webkit-scrollbar { display: none; }
  /* the list keeps its full width so the row scrolls and Clear all follows the last pill (QA: it overprinted it) */
  .elementor-6905 .rgcat-active__list { flex-wrap: nowrap; flex: 0 0 auto; }
  .elementor-6905 a.rgcat-af, .elementor-6905 .rgcat-active__clear { min-height: 44px; }
}
@media (max-width: 767px) {
  /* count on its own line, then Filter + Sort pills across the full width (fits 320px), then active pills */
  .elementor-6905 .rgcat-tb { flex-wrap: wrap; min-height: 0; margin: 4px 0 20px; padding: 12px 0 14px; gap: 8px 0; }
  .elementor-6905 .rgcat-tb__count { order: -1; width: 100%; font-size: 13px; line-height: 20px; }
  .elementor-6905 .rgcat-tb__left { flex: 1 1 100%; gap: 8px; }
  .elementor-6905 .rgcat-tb__open, .elementor-6905 .rgcat-tb__sortm { min-height: 48px; padding: 0 14px; gap: 6px; }
  .elementor-6905 .rgcat-tb__open { flex: 0 0 auto; }
  .elementor-6905 .rgcat-tb__sortm { flex: 1 1 0; justify-content: center; }
  .elementor-6905 .rgcat-tb__sortm .rgcat-sort__k { font-size: 13px; }
  .elementor-6905 .rgcat-tb__sortm .rgcat-sort__v { font-size: 15px; }
  .elementor-6905 .rgcat-active { margin-top: 4px; }
  /* phones: drawer is full width, no backdrop strip */
  .rgcat-drawer .rgcat-drawer__panel { width: 100%; border-radius: 0; box-shadow: none; }
}

/* ---------- empty state (our node after ul.products when 0 products match) ---------- */
.elementor-6905 .rgcat-grid .rgcat-empty {
  display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 8px 0 0; padding: 48px 24px 40px;
  border-radius: 20px; background: var(--rg-tint); text-align: center;
}
.elementor-6905 .rgcat-grid .rgcat-empty__t {
  margin: 0; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--rg-ink);
}
.elementor-6905 .rgcat-grid .rgcat-empty .rgcat-empty__btn {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; 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); box-shadow: none; cursor: pointer; width: auto;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0; text-transform: none;
  transition: background-color .15s ease, color .15s ease;
}
.elementor-6905 .rgcat-grid .rgcat-empty .rgcat-empty__btn:focus { background: var(--rg-white); color: var(--rg-ink); border-color: var(--rg-ink); outline: none; }
.elementor-6905 .rgcat-grid .rgcat-empty .rgcat-empty__btn:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-6905 .rgcat-grid .rgcat-empty__try { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; max-width: 640px; }
.elementor-6905 .rgcat-grid .rgcat-empty__k { margin: 0; font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--rg-muted); }
.elementor-6905 .rgcat-grid .rgcat-empty__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.elementor-6905 .rgcat-grid .rgcat-empty__chips li { margin: 0; padding: 0; list-style: none; }
.elementor-6905 .rgcat-grid .rgcat-empty a.rgcat-empty__chip {
  box-sizing: border-box; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--rg-ink); border-radius: 999px; background: var(--rg-white); color: var(--rg-ink); text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px; line-height: 1; white-space: nowrap;
}
.elementor-6905 .rgcat-grid .rgcat-empty a.rgcat-empty__chip:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
@media (max-width: 767px) {
  .elementor-6905 .rgcat-grid .rgcat-empty { padding: 36px 16px 32px; }
  .elementor-6905 .rgcat-grid .rgcat-empty a.rgcat-empty__chip { min-height: 44px; }
}

/* ===== p3-grid.css ===== */
/* Piece 3: product grid cards, spec chip, shoppable reel tile.
   Scope: everything inside .rgcat-grid except nav.woocommerce-pagination (piece 4) and nav.rg-cat-bar.
   Column count follows the grid's own width (container query), so it works whatever width piece 2's rail leaves. */

.elementor-6905 .rgcat-grid .woocommerce { container-type: inline-size; container-name: rgcatgrid; }

/* ---------- grid ---------- */
.elementor-6905 .rgcat-grid .woocommerce ul.products.elementor-grid,
.elementor-6905 .rgcat-grid .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px; row-gap: 40px; /* = Elementor's own gaps for this widget (post-6905 css); stated here so the
     result is the same whichever stylesheet loads last (the prototype was judged at 20/40) */
  margin: 0; padding: 0; list-style: none;
}
.elementor-6905 .rgcat-grid ul.products::before,
.elementor-6905 .rgcat-grid ul.products::after { content: none; display: none; }

.elementor-6905 .rgcat-grid ul.products li.product {
  float: none; width: auto; max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; min-width: 0;
  text-align: left; background: var(--rg-white); border: 0; box-shadow: none;
}

/* ---------- card body: image / title (2-line box) / price + stars + count on one line, one rhythm per row.
   A card without reviews keeps the same line (price alone), so nothing shifts and no blank line is reserved. ---------- */
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.woocommerce-LoopProduct-link {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  column-gap: 0;
  color: var(--rg-ink); text-decoration: none;
}
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .rg-hover-wrap { grid-column: 1 / -1; grid-row: 1; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .woocommerce-loop-product__title { grid-column: 1 / -1; grid-row: 2; align-self: start; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .star-rating { grid-column: 2; grid-row: 3; margin-left: 12px; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .rgcat-rcount { grid-column: 3; grid-row: 3; margin-left: 6px; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .price { grid-column: 1; grid-row: 3; align-self: center; }

/* image frame */
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1; border-radius: 14px;
  background: var(--rg-white);
  margin: 0 0 14px;
}
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap img {
  display: block; width: 100%; height: 100%; max-width: none;
  aspect-ratio: 1 / 1; object-fit: contain; margin: 0; border-radius: 0;
}
/* keep the live second-image hover: same box as the main image, live opacity transition untouched */
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap img.rg-hover-img {
  position: absolute; inset: 0; height: 100%;
}
/* the frame's hairline sits above both images */
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--rg-line); pointer-events: none; z-index: 2;
}

/* title */
.elementor-6905 .rgcat-grid ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Jost', sans-serif !important; font-weight: 600 !important; font-size: 17px; line-height: 1.3;
  color: var(--rg-ink); text-transform: none; letter-spacing: 0; text-decoration: none;
  margin: 0 0 6px; padding: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; min-height: calc(2 * 1.3em);
}
.elementor-6905 .rgcat-grid ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title { text-decoration: none; color: var(--rg-ink); }

/* stars: native .star-rating restyled as a CSS image (no icon font) */
.elementor-6905 .rgcat-grid ul.products li.product .star-rating {
  float: none; position: relative; display: block; overflow: hidden;
  width: 75px; height: 13px; margin: 0; padding: 0; align-self: center;
  font-size: 0; line-height: 0; font-family: inherit; letter-spacing: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13'><path fill='%23EAEAEA' d='M7 .6l1.9 4.1 4.5.5-3.4 3 1 4.4L7 10.3 3 12.6l1-4.4-3.4-3 4.5-.5z'/></svg>") left center / 15px 13px repeat-x;
}
.elementor-6905 .rgcat-grid ul.products li.product .star-rating::before { content: none; display: none; }
.elementor-6905 .rgcat-grid ul.products li.product .star-rating span {
  position: absolute; top: 0; left: 0; height: 100%; padding: 0; overflow: hidden; float: none;
  font-size: 0; color: transparent;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13'><path fill='%23FFBC00' d='M7 .6l1.9 4.1 4.5.5-3.4 3 1 4.4L7 10.3 3 12.6l1-4.4-3.4-3 4.5-.5z'/></svg>") left center / 15px 13px repeat-x;
}
.elementor-6905 .rgcat-grid ul.products li.product .star-rating span::before { content: none; display: none; }
.elementor-6905 .rgcat-grid ul.products li.product .rgcat-rcount {
  align-self: center; font-family: 'Poppins', sans-serif; font-size: 13px; line-height: 1;
  color: var(--rg-muted);
}

/* price: the strongest line under the title. A live rule paints bdi/amount #0a0a0a, so every price node is forced to
   ink, and a live inline rule sets `.woocommerce ul.products li.product .price { font-size: 16px !important }`, so the
   size answers with !important too (see import-p3.md) */
.elementor-6905 .rgcat-grid ul.products li.product .price {
  display: block; margin: 0; padding: 0; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 19px !important; line-height: 1.25 !important;
  color: var(--rg-ink) !important;
}
.elementor-6905 .rgcat-grid ul.products li.product .price .amount,
.elementor-6905 .rgcat-grid ul.products li.product .price bdi,
.elementor-6905 .rgcat-grid ul.products li.product .price .woocommerce-Price-currencySymbol,
.elementor-6905 .rgcat-grid ul.products li.product .price ins,
.elementor-6905 .rgcat-grid ul.products li.product .price ins .amount {
  color: var(--rg-ink) !important; font-family: inherit; font-weight: 600; font-size: inherit;
  text-decoration: none; background: none;
}
.elementor-6905 .rgcat-grid ul.products li.product .price del,
.elementor-6905 .rgcat-grid ul.products li.product .price del .amount,
.elementor-6905 .rgcat-grid ul.products li.product .price del bdi,
.elementor-6905 .rgcat-grid ul.products li.product .price del .woocommerce-Price-currencySymbol {
  color: var(--rg-muted) !important; font-weight: 400; font-size: 15px; opacity: 1;
}
.elementor-6905 .rgcat-grid ul.products li.product .price del { margin-right: 6px; text-decoration: line-through; }

/* Swatchly loop form: hidden on cards (shelf rhythm). Production: turn it off at source, see import-p3.md */
.elementor-6905 .rgcat-grid ul.products li.product .swatchly_loop_variation_form { display: none; }

/* ---------- badges: one style, two corners. Sale top-left, "Sold out" top-RIGHT (Jared 2026-10-07: "a little sold
   out on products at the top right"), so the two never stack. Text is the plugins' own. ---------- */
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .wcsob_soldout,
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .onsale {
  position: absolute; top: 10px; bottom: auto; z-index: 3;
  display: inline-flex; align-items: center; width: auto; height: auto; min-width: 0; min-height: 0;
  margin: 0; padding: 4px 10px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 11.5px; line-height: 1.2;
  text-transform: none; letter-spacing: 0;
  background: var(--rg-ink); color: var(--rg-white); border: 1px solid var(--rg-ink); box-shadow: none;
}
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .onsale { left: 10px; right: auto; }
.elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .wcsob_soldout { right: 10px; left: auto; }

/* ---------- spec chip (hook): a small label tucked into the bottom-left corner ---------- */
.elementor-6905 .rgcat-grid ul.products li.product .rgcat-spec {
  position: absolute; left: 8px; bottom: 8px; z-index: 4; pointer-events: none;
  display: inline-flex; align-items: center;
  max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 9px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 12px; line-height: 1.25; letter-spacing: .01em;
  color: var(--rg-ink); background: var(--rg-white); border: 1px solid var(--rg-line);
}

/* the live kit (elementor-kit-22) styles every Woo button with !important (ink fill, 4px radius, green hover),
   so the template has to answer with !important on the same properties */
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.button {
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; min-height: 44px !important; margin: 16px 0 0; padding: 10px 16px !important;
  border: 1px solid var(--rg-ink) !important; border-radius: 999px !important;
  background: var(--rg-white) !important; background-color: var(--rg-white) !important; color: var(--rg-ink) !important;
  font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.2 !important;
  text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; text-align: center;
  box-shadow: none; transition: background-color .2s ease, color .2s ease;
}
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.button:hover,
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.button:focus-visible {
  background: var(--rg-ink) !important; background-color: var(--rg-ink) !important; color: var(--rg-white) !important; border-color: var(--rg-ink) !important;
}
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.button.loading { opacity: .6; }
.elementor-6905 .rgcat-grid ul.products li.product.outofstock > a.button { color: var(--rg-muted) !important; }
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.button.added::after { margin-left: 6px; }
.elementor-6905 .rgcat-grid ul.products li.product > a.added_to_cart {
  display: block; margin: 8px 0 0; text-align: center;
  font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--rg-ink); text-decoration: underline;
}
.elementor-6905 .rgcat-grid ul.products li.product a:focus-visible,
.elementor-6905 .rgcat-grid ul.products li.product button:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 3px; }

/* ---------- reel tile (hook) ----------
   Jared 2026-10-08: the video tile is the size of ONE product card ("I don't want it to take up the whole screen").
   It fills one grid cell exactly: the card beside it sets the row height and the tile stretches to it (size
   containment keeps it out of the row sizing; the estimate below only applies when it has the row to itself).
   Jared 2026-10-11: nothing may cover the video ("the button shouldn't obstruct the actual video"). The shopping part
   sits below or beside the footage, never on it; only the small credit and Sound controls stay on the footage.
   Jared picked the caption-strip layout (2026-10-11, concepts in renders/video-concepts/): the tile is one dark card,
   footage on top, a strip under it with the product in white and the one green CTA.
   The tile is its own size container (rgreel), so the strip answers to the cell it actually has. */
.elementor-6905 .rgcat-grid ul.products li.product.rgcat-reel {
  grid-column: auto; grid-row: auto; align-self: stretch; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  width: auto; height: auto; min-height: 0; aspect-ratio: auto; padding: 0;
  container: rgreel / size; contain-intrinsic-block-size: calc((100cqw - 40px) / 3 + 148px);
  border-radius: 14px; overflow: hidden; background: var(--rg-ink); box-shadow: none; isolation: isolate;
}
/* filtered-out / off-page cards and an empty-result reel: the hidden attribute must win over display: grid */
.elementor-6905 .rgcat-grid ul.products > li.product[hidden] { display: none !important; }

.elementor-6905 .rgcat-reel__in {
  grid-area: 1 / 1; min-width: 0; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
}
.elementor-6905 .rgcat-reel__media {
  grid-row: 1; grid-column: 1; position: relative; min-width: 0; min-height: 0;
  background: var(--rg-ink); overflow: hidden;
}
.elementor-6905 .rgcat-reel__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: var(--rg-ink); }

/* sound toggle: 44px hit area, 32px white circle, top-right of the footage (state via aria-pressed; the visually
   hidden "Sound" label is its accessible name) */
.elementor-6905 .rgcat-grid .rgcat-reel__sound {
  position: absolute; top: 4px; right: 4px; z-index: 3; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; min-width: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: none; color: var(--rg-ink); box-shadow: none;
  font-size: 0; line-height: 1; text-transform: none; letter-spacing: 0;
}
.elementor-6905 .rgcat-grid .rgcat-reel__sound::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--rg-white); z-index: -1;
}
.elementor-6905 .rgcat-grid .rgcat-reel__sound:hover::before { background: color-mix(in srgb, var(--rg-ink) 6%, var(--rg-white)); }
.elementor-6905 .rgcat-grid .rgcat-reel__sound:focus-visible { outline: 2px solid var(--rg-white); outline-offset: 1px; }
.elementor-6905 .rgcat-reel__sound-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.elementor-6905 .rgcat-reel__sound-ico {
  width: 16px; height: 14px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'><path d='M2.5 5.5h3l4-3.2v11.4l-4-3.2h-3z' fill='%23292929'/><path d='M13 5.5l4.5 5M17.5 5.5l-4.5 5' stroke='%23292929' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 14px no-repeat;
}
.elementor-6905 .rgcat-reel__sound[aria-pressed="true"] .rgcat-reel__sound-ico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'><path d='M2.5 5.5h3l4-3.2v11.4l-4-3.2h-3z' fill='%23292929'/><path d='M12.5 5.3a3.6 3.6 0 0 1 0 5.4M15 3a7 7 0 0 1 0 10' fill='none' stroke='%23292929' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
/* creator credit: a small ink scrim pill in the footage's top-left corner */
.elementor-6905 .rgcat-grid .rgcat-reel__caption {
  position: absolute; top: 10px; left: 10px; z-index: 3; margin: 0;
  display: block; height: 28px; line-height: 28px; max-width: calc(100% - 64px); padding: 0 11px; border-radius: 999px;
  background: rgba(41, 41, 41, .72); color: var(--rg-white);
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.elementor-6905 .rgcat-reel__handle { font-weight: 600; color: var(--rg-white); }
.elementor-6905 .rgcat-reel__by { display: inline; }

/* product strip under the footage, white on the dark card: name + price/stars on the left, the green CTA beside them
   (stacked in a column on narrow cells) */
.elementor-6905 .rgcat-reel__panel {
  grid-row: 2; grid-column: 1; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cta" "meta cta"; column-gap: 14px;
  margin: 0; padding: 14px 14px 16px 16px; background: none; color: var(--rg-white); border: 0; border-radius: 0; box-shadow: none;
}
.elementor-6905 .rgcat-grid .rgcat-reel__name {
  grid-area: name; display: block; margin: 0 0 2px; min-height: 0;
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--rg-white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.elementor-6905 .rgcat-reel__meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; min-height: 0; }
.elementor-6905 .rgcat-reel__price,
.elementor-6905 .rgcat-reel__price .amount,
.elementor-6905 .rgcat-reel__price bdi,
.elementor-6905 .rgcat-reel__price .woocommerce-Price-currencySymbol,
.elementor-6905 .rgcat-reel__price ins {
  font-family: 'Jost', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25;
  color: var(--rg-white) !important; text-decoration: none; background: none; white-space: nowrap;
}
.elementor-6905 .rgcat-reel__price del,
.elementor-6905 .rgcat-reel__price del .amount,
.elementor-6905 .rgcat-reel__price del bdi,
.elementor-6905 .rgcat-reel__price del .woocommerce-Price-currencySymbol { color: rgba(255, 255, 255, .62) !important; font-weight: 400; font-size: 14px; }
.elementor-6905 .rgcat-reel__price del { margin-right: 6px; text-decoration: line-through; }
.elementor-6905 .rgcat-reel__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.elementor-6905 .rgcat-reel__sub { font-family: 'Poppins', sans-serif; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.elementor-6905 .rgcat-reel__rating { display: inline-flex; align-items: center; gap: 6px; }
.elementor-6905 .rgcat-stars {
  position: relative; display: block; width: 75px; height: 13px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13'><path fill='%23EAEAEA' d='M7 .6l1.9 4.1 4.5.5-3.4 3 1 4.4L7 10.3 3 12.6l1-4.4-3.4-3 4.5-.5z'/></svg>") left center / 15px 13px repeat-x;
}
.elementor-6905 .rgcat-stars > span {
  position: absolute; top: 0; left: 0; height: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13'><path fill='%23FFBC00' d='M7 .6l1.9 4.1 4.5.5-3.4 3 1 4.4L7 10.3 3 12.6l1-4.4-3.4-3 4.5-.5z'/></svg>") left center / 15px 13px repeat-x;
}
.elementor-6905 .rgcat-reel__rcount { font-family: 'Poppins', sans-serif; font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1; }
.elementor-6905 .rgcat-grid a.rgcat-reel__cta {
  grid-area: cta; align-self: center;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; width: auto;
  height: 44px; min-height: 44px; margin: 0; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--rg-accent); color: var(--rg-ink);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2;
  text-transform: none; letter-spacing: 0; text-decoration: none;
  transition: background-color .2s ease;
}
.elementor-6905 .rgcat-grid a.rgcat-reel__cta:hover { background: color-mix(in srgb, var(--rg-accent) 86%, var(--rg-white)); color: var(--rg-ink); }
.elementor-6905 .rgcat-grid a.rgcat-reel__cta:focus-visible { outline: 2px solid var(--rg-white); outline-offset: 2px; }

/* narrow cells (~170-260px: the in-between grid beside the rail, and the 2-column phone grid): the strip stacks
   (two-line name, price + stars may wrap, full-width 44px CTA), the credit drops "Video by" */
@container rgreel (max-width: 279px) {
  .elementor-6905 .rgcat-reel__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meta" "cta"; padding: 10px 10px 10px 12px; }
  .elementor-6905 .rgcat-grid .rgcat-reel__name {
    margin-bottom: 4px; font-size: 14px; line-height: 1.25;
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .elementor-6905 .rgcat-reel__meta { gap: 2px 8px; }
  .elementor-6905 .rgcat-reel__price,
  .elementor-6905 .rgcat-reel__price .amount,
  .elementor-6905 .rgcat-reel__price bdi,
  .elementor-6905 .rgcat-reel__price .woocommerce-Price-currencySymbol,
  .elementor-6905 .rgcat-reel__price ins { font-size: 15px; }
  .elementor-6905 .rgcat-reel__price del,
  .elementor-6905 .rgcat-reel__price del .amount,
  .elementor-6905 .rgcat-reel__price del bdi { font-size: 12px; }
  .elementor-6905 .rgcat-stars, .elementor-6905 .rgcat-stars > span { height: 11px; background-size: 11.2px 11px; }
  .elementor-6905 .rgcat-stars { width: 56px; }
  .elementor-6905 .rgcat-reel__rcount { font-size: 11.5px; }
  .elementor-6905 .rgcat-reel__sub { font-size: 12px; }
  .elementor-6905 .rgcat-grid a.rgcat-reel__cta { width: 100%; margin-top: 8px; padding: 0 8px; font-size: 13px; }
  .elementor-6905 .rgcat-grid .rgcat-reel__caption { top: 8px; left: 8px; height: 26px; line-height: 26px; max-width: calc(100% - 56px); padding: 0 9px; font-size: 11px; font-weight: 500; }
  .elementor-6905 .rgcat-reel__by { display: none; }
  .elementor-6905 .rgcat-grid .rgcat-reel__sound { top: 0; right: 0; }
}

/* ---------- in-between grid (3 columns, but under 900px wide, e.g. a 1024 window beside the rail: ~216px cards):
   a price range + stars + count no longer fit one line, so the stars + count drop to a reserved line under the
   price (the same rhythm as the narrow grid; a card without reviews keeps the empty line, so buttons still align) */
@container rgcatgrid (min-width: 600px) and (max-width: 899px) {
  .elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.woocommerce-LoopProduct-link { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 20px; }
  .elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .price { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
  .elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .star-rating { grid-column: 1; grid-row: 4; margin: 4px 0 0; }
  .elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .rgcat-rcount { grid-column: 2; grid-row: 4; margin: 4px 0 0 6px; }
}

/* ---------- narrow grid (mobile, or a narrow column beside the rail) ---------- */
@container rgcatgrid (max-width: 599px) {
  .elementor-6905 .rgcat-grid .woocommerce ul.products.elementor-grid,
  .elementor-6905 .rgcat-grid .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; } /* = Elementor's widget gaps, as judged */

  .elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap { border-radius: 12px; margin-bottom: 10px; }
  .elementor-6905 .rgcat-grid ul.products li.product .woocommerce-loop-product__title { font-size: 15px; margin-bottom: 6px; -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: normal; hyphens: none; }
  /* narrow cards: price straight under the title box, stars + count on the line below it (a card without
     reviews leaves that last line empty, below the price, so title -> price never has more than one blank line) */
  .elementor-6905 .rgcat-grid ul.products li.product .price { font-size: 17px !important; margin-top: 0; }
  .elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .price { grid-column: 1 / -1; grid-row: 3; align-self: start; white-space: normal; }
  .elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .star-rating { grid-column: 1; grid-row: 4; margin: 4px 0 0; }
  .elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .rgcat-rcount { grid-column: 2; grid-row: 4; margin: 4px 0 0 6px; }
  .elementor-6905 .rgcat-grid ul.products li.product .price del,
  .elementor-6905 .rgcat-grid ul.products li.product .price del .amount,
  .elementor-6905 .rgcat-grid ul.products li.product .price del bdi { font-size: 13px; }
  .elementor-6905 .rgcat-grid ul.products li.product .price del { margin-right: 4px; }
  .elementor-6905 .rgcat-grid ul.products li.product .rgcat-rcount { font-size: 12px; }
  .elementor-6905 .rgcat-grid ul.products li.product .star-rating { width: 70px; background-size: 14px 12px; height: 12px; }
  .elementor-6905 .rgcat-grid ul.products li.product .star-rating span { background-size: 14px 12px; }
  .elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.woocommerce-LoopProduct-link { flex: 1 1 auto; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto 20px; align-content: stretch; }
  .elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.button { margin-top: 12px; font-size: 13px !important; padding: 8px 10px !important; }
  .elementor-6905 .rgcat-grid ul.products li.product .rgcat-spec { left: 6px; bottom: 6px; font-size: 11px; padding: 2px 8px; }
  .elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .wcsob_soldout,
  .elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .onsale { top: 8px; font-size: 11px; padding: 3px 8px; }
  .elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .onsale { left: 8px; }
  .elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap .wcsob_soldout { right: 8px; }

  /* reel: one cell of the 2-column grid, as tall as the card beside it (Jared 2026-10-08) */
  .elementor-6905 .rgcat-grid ul.products li.product.rgcat-reel {
    contain-intrinsic-block-size: calc((100cqw - 20px) / 2 + 170px); border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-6905 .rgcat-grid ul.products li.product > a.button,
  .elementor-6905 .rgcat-grid a.rgcat-reel__cta { transition: none; }
}

/* touch screens: never show the second image (a tap leaves :hover stuck on the faded hover shot) */
@media (hover: none), (pointer: coarse) {
  .elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap img.rg-hover-img,
  .elementor-6905 .rgcat-grid ul.products li.product .rg-hover-wrap:hover img.rg-hover-img { opacity: 0; }
}

/* no JS yet: cards the server marked as not matching the address bar's filters (rg-cat-v2-ssr.php); once the script
   runs it hides cards with [hidden] itself */
html:not(.rgcat-ready) .elementor-6905 .rgcat-grid ul.products > li.rgcat-nojs-out { display: none; }

/* ===== p4-after.css ===== */
/* Piece 4: after the grid. Native pagination (CSS only), FAQ band [rg_cat_faq], trust strip [rg_cat_trust]. */

/* ---------- Pagination (native WooCommerce markup, restyled) ---------- */
/* The live site runs BeRocket "Load More Products" (type more_button): its JS sets an inline
   display:none on the pagination and appends div.lmp_load_more_button. The brief wants numbered
   pagination, so inside this template the nav is forced visible and the plugin button hidden.
   Import note: exclude this template from BeRocket LMP (or set its type to "pagination") and drop
   the !important + the hide rule. */
.elementor-6905 .rgcat-grid nav.woocommerce-pagination {
  display: block !important;
  margin: 48px 0 8px; padding: 0; border: 0; text-align: center;
}
.elementor-6905 .rgcat-grid .lmp_load_more_button,
.elementor-6905 .rgcat-grid .lmp_products_loading { display: none !important; }
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  margin: 0; padding: 0; border: 0; list-style: none; white-space: normal;
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li {
  float: none; display: block; margin: 0; padding: 0; border: 0; overflow: visible; list-style: none;
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid transparent; border-radius: 999px; background: var(--rg-tint);
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; line-height: 1;
  color: var(--rg-ink); text-decoration: none; text-transform: none; letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
  background: var(--rg-line); color: var(--rg-ink);
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
  outline: 2px solid var(--rg-ink); outline-offset: 2px;
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
  background: var(--rg-ink); border-color: var(--rg-ink); color: var(--rg-white); font-weight: 600;
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
  min-width: 24px; padding: 0 4px; color: var(--rg-muted); background: transparent;
}
/* Prev / next: live markup prints arrows ("←" / "→"). Show words + a CSS chevron in a pill outline.
   Import note: set prev_text/next_text via woocommerce_pagination_args and drop the ::before labels. */
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.next,
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev {
  font-size: 0; gap: 10px; padding: 0 20px; border-color: var(--rg-ink); background: var(--rg-white);
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.next { margin-left: 8px; }
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev { margin-right: 8px; flex-direction: row-reverse; }
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.next::before { content: "Next"; font-size: 15px; font-weight: 600; }
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev::before { content: "Previous"; font-size: 15px; font-weight: 600; }
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.next::after,
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev::after {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
}
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.next::after { transform: rotate(-45deg); margin-left: -2px; }
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev::after { transform: rotate(135deg); margin-right: -2px; }
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover,
.elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover {
  background: var(--rg-ink); border-color: var(--rg-ink); color: var(--rg-white);
}
@media (max-width: 767px) {
  .elementor-6905 .rgcat-grid nav.woocommerce-pagination { margin-top: 36px; }
  .elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers { gap: 6px; }
  .elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.next { margin-left: 4px; }
  .elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev { margin-right: 4px; }
}

/* ---------- Full-bleed containers: the band owns its own padding ---------- */
.elementor-6905 > .e-con.e-parent.rgcat-faq,
.elementor-6905 > .e-con.e-parent.rgcat-trust { padding-left: 0; padding-right: 0; }
.elementor-6905 > .e-con.e-parent.rgcat-faq > .rgcat-faq-slot,
.elementor-6905 > .e-con.e-parent.rgcat-trust > .rgcat-trust-slot { max-width: none; width: 100%; margin: 0; }

/* ---------- FAQ band ---------- */
.elementor-6905 .rgcat-faqband {
  box-sizing: border-box; width: 100%; margin-top: 72px; padding: 80px var(--rgcat-gutter) 88px;
  background: var(--rg-tint);
}
.elementor-6905 .rgcat-faqband__inner { max-width: 770px; margin: 0 auto; }
.elementor-6905 .rgcat-faqband .rgcat-faqband__title {
  margin: 0 0 28px; padding: 0; font-family: 'Jost', sans-serif; font-weight: 600;
  font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; color: var(--rg-ink); text-transform: none;
}
.elementor-6905 .rgcat-faq__list { display: flex; flex-direction: column; gap: 10px; }
.elementor-6905 .rgcat-faq__item {
  margin: 0; padding: 0; border: 0; border-radius: 16px; background: var(--rg-white);
  transition: box-shadow .15s ease;
}
.elementor-6905 .rgcat-faq__item > summary.rgcat-faq__q {
  box-sizing: border-box; display: flex; align-items: center; gap: 14px; min-height: 64px;
  padding: 16px 16px 16px 20px; margin: 0; cursor: pointer; list-style: none; border-radius: 16px;
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.35;
  color: var(--rg-ink); text-transform: none; background: transparent;
}
.elementor-6905 .rgcat-faq__item > summary.rgcat-faq__q::-webkit-details-marker { display: none; }
.elementor-6905 .rgcat-faq__item > summary.rgcat-faq__q::marker { content: ""; }
.elementor-6905 .rgcat-faq__item > summary.rgcat-faq__q:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.elementor-6905 .rgcat-faq__qicon { flex: none; color: var(--rg-ink); }
.elementor-6905 .rgcat-faq__qtext { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.elementor-6905 .rgcat-faq__chev {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; background: var(--rg-tint); color: var(--rg-ink);
  transition: background-color .15s ease, color .15s ease;
}
.elementor-6905 .rgcat-faq__chev svg { transition: transform .2s ease; }
.elementor-6905 .rgcat-faq__item > summary.rgcat-faq__q:hover .rgcat-faq__chev { background: var(--rg-line); }
.elementor-6905 .rgcat-faq__item[open] > summary.rgcat-faq__q .rgcat-faq__chev { background: var(--rg-ink); color: var(--rg-white); }
.elementor-6905 .rgcat-faq__item[open] > summary.rgcat-faq__q .rgcat-faq__chev svg { transform: rotate(180deg); }
.elementor-6905 .rgcat-faq__a {
  margin: 0 20px; padding: 16px 0 22px 36px; border-top: 1px solid var(--rg-line);
  font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 1.7; color: var(--rg-ink);
}
.elementor-6905 .rgcat-faq__a > * { margin: 0 0 10px; }
.elementor-6905 .rgcat-faq__a > *:last-child { margin-bottom: 0; }
.elementor-6905 .rgcat-faq__a ul,
.elementor-6905 .rgcat-faq__a ol { padding-left: 20px; }
.elementor-6905 .rgcat-faq__a strong { font-weight: 600; color: var(--rg-ink); }
.elementor-6905 .rgcat-faq__a a {
  color: var(--rg-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.elementor-6905 .rgcat-faq__a a:hover { text-decoration-thickness: 2px; }
@media (max-width: 767px) {
  .elementor-6905 .rgcat-faqband { margin-top: 48px; padding: 48px var(--rgcat-gutter) 56px; }
  .elementor-6905 .rgcat-faqband .rgcat-faqband__title { font-size: 26px; margin-bottom: 20px; }
  .elementor-6905 .rgcat-faq__list { gap: 8px; }
  .elementor-6905 .rgcat-faq__item > summary.rgcat-faq__q { gap: 12px; min-height: 60px; padding: 14px 12px 14px 16px; font-size: 16px; }
  .elementor-6905 .rgcat-faq__qicon { width: 20px; height: 20px; }
  .elementor-6905 .rgcat-faq__chev { width: 32px; height: 32px; }
  .elementor-6905 .rgcat-faq__a { margin: 0 16px; padding: 14px 0 18px; font-size: 15px; }
}

/* ---------- Trust strip ---------- */
.elementor-6905 .rgcat-trustbar {
  box-sizing: border-box; width: 100%; padding: 40px var(--rgcat-gutter); background: var(--rg-ink); color: var(--rg-white);
  border-bottom: 1px solid color-mix(in srgb, var(--rg-white) 16%, var(--rg-ink)); /* ends the strip above the equally dark site footer */
}
/* same content width as the page (1320px); 4 equal columns. Round 8: items start a fixed 28px after their divider
   (the first one on the content edge), so every gutter is the same; centring them left uneven gaps (~85px vs ~20px) */
.elementor-6905 .rgcat-trustbar__list {
  box-sizing: border-box; max-width: var(--rgcat-max); margin: 0 auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.elementor-6905 .rgcat-trustbar__item {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0; padding: 6px 12px 6px 28px; list-style: none;
  border-left: 1px solid color-mix(in srgb, var(--rg-white) 16%, var(--rg-ink));
}
.elementor-6905 .rgcat-trustbar__item:first-child { border-left: 0; padding-left: 0; }
.elementor-6905 .rgcat-trustbar__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px; color: var(--rg-white);
  background: color-mix(in srgb, var(--rg-white) 9%, var(--rg-ink));
}
.elementor-6905 .rgcat-trustbar__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.elementor-6905 .rgcat-trustbar__title {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.3;
  color: var(--rg-white); text-transform: none; letter-spacing: 0;
}
.elementor-6905 .rgcat-trustbar__text {
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--rg-line); text-wrap: balance;
}
@media (max-width: 1024px) {
  .elementor-6905 .rgcat-trustbar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .elementor-6905 .rgcat-trustbar__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
/* mobile: one clean list, fixed icon column, hairline between rows */
@media (max-width: 767px) {
  .elementor-6905 .rgcat-trustbar { padding: 12px var(--rgcat-gutter) 16px; }
  .elementor-6905 .rgcat-trustbar__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .elementor-6905 .rgcat-trustbar__item {
    justify-content: flex-start; gap: 16px; min-height: 76px; padding: 14px 0; border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--rg-white) 16%, var(--rg-ink));
  }
  .elementor-6905 .rgcat-trustbar__item:first-child { border-top: 0; }
  .elementor-6905 .rgcat-trustbar__icon { width: 44px; height: 44px; }
  .elementor-6905 .rgcat-trustbar__title { font-size: 15px; }
  .elementor-6905 .rgcat-trustbar__text { font-size: 14px; text-wrap: pretty; }
}
@media (max-width: 359px) {
  .elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers { gap: 4px; }
  .elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.next,
  .elementor-6905 .rgcat-grid nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev { padding: 0 14px; margin-left: 0; margin-right: 0; }
}

/* trust strip above the FAQ (Jared 2026-10-12; order set in base.css): the gap under the grid moves from the FAQ
   band to the strip, and the band follows the strip directly */
.elementor-6905 > .e-con.e-parent.rgcat-trust { margin-top: 72px; }
.elementor-6905 .rgcat-faqband { margin-top: 0; }
@media (max-width: 767px) {
  .elementor-6905 > .e-con.e-parent.rgcat-trust { margin-top: 48px; }
  .elementor-6905 .rgcat-faqband { margin-top: 0; }
}

/* wholesale (2026-10-17, Jared): no category image or second description box above the grid (belt and braces for a
   cached page; the box is also taken off its hooks in rg-cat-v2.php) */
.elementor-6905 .rg-archive-hero { display: none !important; }
/* logged-out cards show "Login / Register to View Prices" where retail shows a number: same ink and weight, sized to fit the card */
.elementor-6905 .rgcat-grid ul.products li.product .price:not(:has(.amount)) {
  font-size: 14px !important; line-height: 1.35 !important; white-space: normal; letter-spacing: 0;
}

/* wholesale QA 2026-10-20: logged-out price text ("Login / Register to View Prices") is wider than the card, so the price takes the full row and rating sits under it, at every width */
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.woocommerce-LoopProduct-link { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 20px; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .price { grid-column: 1 / -1; grid-row: 3; white-space: normal; align-self: start; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .star-rating { grid-column: 1; grid-row: 4; margin: 4px 0 0; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link > .rgcat-rcount { grid-column: 2; grid-row: 4; margin: 4px 0 0 6px; }

/* wholesale quick add (2026-10-21, Jared): card controls + Quick view window. Same pill language as the card button. */
.elementor-6905 .rgcat-grid ul.products li.product.has-qa > a.button { display: none !important; }
.elementor-6905 .rgcat-qa { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
html body .rgcat-qa__qty { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--rg-ink, #292929); border-radius: 999px; overflow: hidden; background: #fff; }
html body .rgcat-qa__step { appearance: none !important; border: 0 !important; background: transparent !important; color: var(--rg-ink, #292929) !important; width: 34px !important; min-height: 44px !important; font: 600 16px/1 'Poppins', sans-serif !important; cursor: pointer !important; padding: 0 !important; }
html body .rgcat-qa__step:hover { background: var(--rg-tint, #F5F5F5) !important; }
html body .rgcat-qa__n { appearance: textfield !important; -moz-appearance: textfield !important; width: 38px !important; border: 0 !important; background: transparent !important; text-align: center !important; font: 600 14px 'Poppins', sans-serif !important; color: var(--rg-ink, #292929) !important; padding: 0 !important; margin: 0 !important; min-height: 44px !important; }
html body .rgcat-qa__n::-webkit-outer-spin-button, html body .rgcat-qa__n::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
html body .rgcat-qa__btn { appearance: none !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 44px !important; padding: 10px 14px !important; border-radius: 999px !important; border: 1px solid var(--rg-ink, #292929) !important; background: var(--rg-ink, #292929) !important; color: #fff !important; font: 600 14px/1.2 'Poppins', sans-serif !important; cursor: pointer !important; text-align: center !important; transition: background-color .2s ease, color .2s ease !important; }
html body .rgcat-qa__btn:hover:not(:disabled), html body .rgcat-qa__btn:focus-visible { background: var(--rg-accent, #79ED8F) !important; color: var(--rg-ink, #292929) !important; }
html body .rgcat-qa__btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }
html body .rgcat-qa__btn.is-added { background: var(--rg-accent, #79ED8F) !important; color: var(--rg-ink, #292929) !important; opacity: 1 !important; }
html body .rgcat-qa__btn--view { background: #fff !important; color: var(--rg-ink, #292929) !important; }
html body .rgcat-qa__btn--view:hover:not(:disabled), html body .rgcat-qa__btn--view:focus-visible { background: var(--rg-ink, #292929) !important; color: #fff !important; }
html body .rgcat-qa__step:focus-visible, html body .rgcat-qa__n:focus-visible, html body .rgcat-qa__btn:focus-visible, html body .rgcat-qv__pill:focus-visible, html body .rgcat-qv__x:focus-visible { outline: 2px solid var(--rg-ink, #292929) !important; outline-offset: 2px !important; }
@media (max-width: 767px) {
  .elementor-6905 .rgcat-qa { gap: 6px; margin-top: 12px; }
html body .rgcat-qa__step { width: 30px !important; }
html body .rgcat-qa__n { width: 30px !important; font-size: 13px !important; }
html body .rgcat-qa__btn { font-size: 13px !important; padding: 8px 8px !important; }
}
@media (max-width: 420px) { .elementor-6905 .rgcat-qa { flex-wrap: wrap; } .elementor-6905 .rgcat-qa .rgcat-qa__qty { flex: 1 1 100%; justify-content: space-between; } }

.rgcat-qv { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Poppins', sans-serif; color: #292929; }
.rgcat-qv[hidden] { display: none; }
.rgcat-qv__bg { position: absolute; inset: 0; background: rgba(20, 20, 20, .55); }
.rgcat-qv__win { position: relative; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); outline: none; }
html body .rgcat-qv__x { position: absolute !important; top: 10px !important; right: 12px !important; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 50% !important; background: #F5F5F5 !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer !important; color: #292929 !important; }
.rgcat-qv__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rgcat-qv__img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 12px; box-shadow: inset 0 0 0 1px #EAEAEA; }
.rgcat-qv__title { font: 600 24px/1.2 'Jost', sans-serif; margin: 6px 40px 8px 0; }
.rgcat-qv__price { font: 600 18px 'Jost', sans-serif; margin-bottom: 14px; }
.rgcat-qv__opt { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.rgcat-qv__opt legend { font: 600 14px 'Poppins', sans-serif; padding: 0; margin-bottom: 8px; }
html body .rgcat-qv__pills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
html body .rgcat-qv__pill { appearance: none !important; min-height: 40px !important; padding: 8px 14px !important; border-radius: 999px !important; border: 1px solid #292929 !important; background: #fff !important; color: #292929 !important; font: 500 14px 'Poppins', sans-serif !important; cursor: pointer !important; }
html body .rgcat-qv__pill.is-on { background: #292929 !important; color: #fff !important; }
html body .rgcat-qv__pill.is-out { opacity: .4 !important; text-decoration: line-through !important; cursor: not-allowed !important; border-color: #BDBDBD !important; }
.rgcat-qv__buy { display: flex; gap: 8px; margin-top: 4px; }
.rgcat-qv__msg { min-height: 20px; margin: 10px 0 0; font-size: 13px; color: #6E6E6E; }
html body .rgcat-qv__more { display: inline-block !important; margin-top: 6px !important; font-size: 14px !important; font-weight: 500 !important; color: #292929 !important; text-underline-offset: 3px !important; }
.rgcat-qv__load { grid-column: 1 / -1; margin: 40px 0; text-align: center; color: #6E6E6E; }
html.rgcat-qv-open { overflow: hidden; }
@media (max-width: 640px) {
  .rgcat-qv { align-items: flex-end; padding: 0; }
  .rgcat-qv__win { width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .rgcat-qv__body { grid-template-columns: 1fr; gap: 14px; }
  .rgcat-qv__img img { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .rgcat-qa__btn { transition: none; } }

/* the live kit uppercases and squares every <button>: reset on ours */
html body .rgcat-qa button, html body .rgcat-qv button, html body .rgcat-qa input { text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
html body .rgcat-qa__qty .rgcat-qa__n { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
html body .rgcat-qa__qty .rgcat-qa__step { border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #292929 !important; }
html body .rgcat-qa__qty .rgcat-qa__step:hover { background: #F5F5F5 !important; }
html body .rgcat-qv__pill:hover:not(.is-out) { background: #F5F5F5 !important; color: #292929 !important; }
html body .rgcat-qv__pill.is-on, html body .rgcat-qv__pill.is-on:hover { background: #292929 !important; color: #fff !important; }

/* 2026-10-21 (Jared): two buttons on a card, so smaller ones; variable cards stack Quick view over Add to cart */
html body .elementor-6905 .rgcat-qa { margin-top: 10px; gap: 6px; }
html body .elementor-6905 .rgcat-qa--stack { flex-direction: column; }
html body .rgcat-qa__btn { min-height: 38px !important; padding: 7px 12px !important; font-size: 13px !important; }
html body .rgcat-qa__step { min-height: 38px !important; width: 30px !important; }
html body .rgcat-qa__n { min-height: 38px !important; width: 32px !important; font-size: 13px !important; }
@media (max-width: 767px) {
  html body .rgcat-qa__btn { min-height: 36px !important; padding: 6px 8px !important; font-size: 12.5px !important; }
  html body .rgcat-qa__step { min-height: 36px !important; width: 28px !important; }
  html body .rgcat-qa__n { min-height: 36px !important; width: 28px !important; font-size: 12.5px !important; }
}

html body .elementor-6905 .rgcat-qa__row { display: flex; align-items: stretch; gap: 6px; }
@media (max-width: 520px) { html body .elementor-6905 .rgcat-qa__row { flex-wrap: wrap; } html body .elementor-6905 .rgcat-qa__row .rgcat-qa__qty { flex: 1 1 100%; justify-content: space-between; } html body .elementor-6905 .rgcat-qa__row .rgcat-qa__btn { flex: 1 1 100%; } }

/* 2026-10-21 (Jared): when the price is a number, the review stars sit on the same line, on the opposite (right) side.
   Logged-out cards keep the long "Login / Register to View Prices" line with the stars under it. */
.elementor-6905 .rgcat-grid ul.products li.product:not(.rgcat-reel) > a.woocommerce-LoopProduct-link:has(> .price .amount) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link:has(> .price .amount) > .price { grid-column: 1; grid-row: 3; align-self: center; white-space: nowrap; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link:has(> .price .amount) > .star-rating { grid-column: 2; grid-row: 3; margin: 0 0 0 12px; align-self: center; justify-self: end; }
.elementor-6905 .rgcat-grid ul.products li.product > a.woocommerce-LoopProduct-link:has(> .price .amount) > .rgcat-rcount { grid-column: 3; grid-row: 3; margin: 0 0 0 6px; align-self: center; }

/* sticky rail 2026-10-21 (Jared): the first filter box pins with its top edge just under the header, 18px gap, whole box visible */
.elementor-6905 .rgcat-shop > .rgcat-filters {
  top: calc(var(--rgcat-header-h, 138px) + 18px);
  max-height: calc(100vh - var(--rgcat-header-h, 138px) - 36px);
}