/* Roots Glass Header + Homepage V2 (preview). Built from home-v2/proto/src by tools/wp_bundle.py. */
/* ===== base.css ===== */
/* Header V2 + Homepage V2 base: tokens only. Owned by the orchestrator; builders do not edit.
 * Values = home-v2/design-system.md. Tokens live on the two roots, never :root, so nothing leaks sitewide. */
.rgn,
.rgm {
  --rg-ink: #292929;
  --rg-muted: #6E6E6E;
  --rg-tint: #F5F5F5;
  --rg-line: #EAEAEA;
  --rg-accent: #79ED8F;
  --rg-star: #FFBC00;
  --rg-white: #FFFFFF;
  --rg-on-ink-2: color-mix(in srgb, #FFFFFF 75%, #292929);
  --rg-font-display: "Jost", sans-serif;
  --rg-font-body: "Poppins", sans-serif;
  --rg-max: 1320px;
  --rg-gutter: 24px;
}
@media (max-width: 767px) {
  .rgn,
  .rgm { --rg-gutter: 16px; }
}
.rgn *,
.rgm * { box-sizing: border-box; }

/* ===== h-header.css ===== */
/* Header V2 for rootsglass.com retail: marquee, header card, nav, Shop panel, search/account/cart, phone drawer.
 * Every rule sits under .rgn; the .elementor-location-header wrapper is styled only for stickiness.
 * Colours are base.css tokens or color-mix() of tokens. Behaviour: h-header.js. */

/* ---------------------------------------------------------------------------------------------
 * Wrapper: sticky. The whole header (promise strip and card) pins at the top, below the WP admin
 * bar, and looks the same on scroll as it does at the top of the page (Jared 2026-10-13).
 * ------------------------------------------------------------------------------------------- */
.elementor-location-header {
  position: sticky;
  top: var(--rgn-admin, 0px);
  z-index: 1000;
  pointer-events: none; /* the header's own parts take events back (below) */
}
@media (min-width: 783px) {
  .elementor-location-header:where(.admin-bar *) { --rgn-admin: 32px; }
}
@media (min-width: 601px) and (max-width: 782px) {
  .elementor-location-header:where(.admin-bar *) { --rgn-admin: 46px; }
}

/* ---------------------------------------------------------------------------------------------
 * Root and resets. The site kit styles bare buttons (ink fill, uppercase 12px, 15x28 padding, white
 * on hover/focus) and links (mint); everything is reset here, then each component sets its own look.
 * Button components are written as `.rgn button.rgn-*` so they outrank the hover/focus reset.
 * ------------------------------------------------------------------------------------------- */
.rgn {
  --rgn-mq-h: 44px;
  /* The bar is sized by the logo's INK (box top to roots tip, transparent PNG edges trimmed) plus one
   * equal padding above and below, so the logo sits vertically symmetric: bar = ink + 2 x pad. */
  /* Jared 2026-10-13: logo ~72% of round 5's size with more air; the row never drops below the 44px
   * controls, and the logo centres in it, so the space above the box and below the roots stays equal */
  --rgn-ink: 52px;
  --rgn-pad: 14px;
  --rgn-r: 20px;
  --rgn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative;
  background: var(--rg-ink);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.rgn > * { pointer-events: auto; }
.rgn a,
.rgn a:hover,
.rgn a:focus,
.rgn a:active,
.rgn a:visited {
  color: inherit;
  text-decoration: none;
}
.rgn a { transition: none; }
.rgn button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  line-height: inherit;
  min-height: 0;
  cursor: pointer;
}
.rgn button:hover,
.rgn button:focus,
.rgn button:active {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}
.rgn ul,
.rgn li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rgn p { margin: 0; }
/* panel and drawer headings are real h2/h3 for the outline; the site kit's heading styles are reset
 * here and each component sets its own type */
.rgn h2,
.rgn h3 {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.rgn img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
}
.rgn svg { display: block; flex: none; }
.rgn .rgn-i { width: 24px; height: 24px; }
.rgn [hidden] { display: none; }
.rgn .rgn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rgn :focus { outline: none; }
.rgn :focus-visible {
  outline: 2px solid var(--rg-ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
 * Marquee: full-bleed ink strip, three promises with line icons and dot separators, scrolling.
 * ------------------------------------------------------------------------------------------- */
.rgn .rgn-mq {
  position: relative;
  z-index: 3;
  height: var(--rgn-mq-h);
  overflow: hidden;
  background: var(--rg-ink);
  color: var(--rg-on-ink-2);
  font-size: 13px;
  line-height: 1;
}
.rgn .rgn-mq__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: rgn-mq 72s linear infinite;
}
/* pointing at a promise pauses the strip so it can be read */
.rgn .rgn-mq__track:has(.rgn-mq__item:hover) { animation-play-state: paused; }
.rgn .rgn-mq__set {
  display: flex;
  flex: none;
  align-items: center;
}
.rgn .rgn-mq__item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.rgn .rgn-mq__item::after {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 22px 0 14px;
  border-radius: 50%;
  background: var(--rg-on-ink-2);
}
.rgn .rgn-mq__item .rgn-i {
  width: 18px;
  height: 18px;
  color: var(--rg-accent); /* mint line icons on the ink strip: Jared's exception to "mint is fill only" (2026-10-13) */
}
.rgn .rgn-mq__item strong {
  color: var(--rg-white);
  font-weight: 500;
}
@keyframes rgn-mq {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
/* phones: the three promises on one static line (shown in the phone block below) */
.rgn .rgn-mq__line { display: none; }
/* tablets (768-1024): the strip stops and shows all three promises at once, centred; the longer
 * second halves stay for screen readers only, so nothing is cut off at the screen edge */
@media (min-width: 768px) and (max-width: 1024px) {
  .rgn .rgn-mq__track {
    justify-content: center;
    width: auto;
    animation: none;
  }
  .rgn .rgn-mq__set[aria-hidden="true"] { display: none; }
  .rgn .rgn-mq__set .rgn-mq__item:last-child::after { display: none; }
  .rgn .rgn-mq__item::after { margin: 0 16px 0 12px; }
  .rgn .rgn-mq__item:not(:first-child) .rgn-mq__rest {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------------------------
 * Header card: white bar with rounded top corners on the ink strip.
 * ------------------------------------------------------------------------------------------- */
.rgn .rgn-bar {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--rg-line);
  background: var(--rg-white);
  border-radius: var(--rgn-r) var(--rgn-r) 0 0;
}
/* --rgn-lk/lt/lb/ll/lr come from the markup (h_header._ink_vars): image height and trimmed
 * top/bottom/left/right, each as a fraction of the ink height. All 1/0 for the trimmed high-res logo;
 * the old 300x150 PNG fallback carries its measured transparent margins. */
.rgn .rgn-bar__in {
  --rgn-lk: 1;
  --rgn-lt: 0;
  --rgn-lb: 0;
  --rgn-ll: 0;
  --rgn-lr: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  width: min(100% - 2 * var(--rg-gutter), var(--rg-max));
  margin-inline: auto;
  padding-block: var(--rgn-pad);
}
.rgn .rgn-logo {
  justify-self: start;
  display: block;
  margin-block: calc(-1 * max(0px, (44px - var(--rgn-ink)) / 2));
  padding-block: max(0px, (44px - var(--rgn-ink)) / 2);
  border-radius: 6px;
  line-height: 0;
}
.rgn .rgn-logo picture { display: block; }
/* the image is cropped to its ink with negative margins, so the link box IS the visible logo */
.rgn .rgn-logo img {
  display: block;
  width: auto;
  max-width: none;
  height: calc(var(--rgn-ink) * var(--rgn-lk));
  margin: calc(var(--rgn-ink) * var(--rgn-lt) * -1) calc(var(--rgn-ink) * var(--rgn-lr) * -1)
    calc(var(--rgn-ink) * var(--rgn-lb) * -1) calc(var(--rgn-ink) * var(--rgn-ll) * -1);
}
/* the nav and the icons centre on the bar itself (align-items: center above) */

/* ---- nav: quiet, centred; hover = tint pill, the open item = ink pill */
.rgn .rgn-nav { justify-self: center; }
.rgn .rgn-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.rgn .rgn-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.rgn .rgn-nav__link:hover { background: var(--rg-tint); }
.rgn .rgn-nav__link .rgn-i {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.rgn .rgn-nav__chev { transition: transform 0.2s ease-out; }
.rgn .rgn-nav__shop[aria-expanded="true"],
.rgn .rgn-nav__shop[aria-expanded="true"]:hover {
  background: var(--rg-ink);
  color: var(--rg-white);
}
.rgn .rgn-nav__shop[aria-expanded="true"] .rgn-nav__chev { transform: rotate(180deg); }

/* ---- actions: search, account, cart, menu button */
.rgn .rgn-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rgn .rgn-iconbtn,
.rgn button.rgn-iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--rg-ink);
  transition: background-color 0.15s ease-out;
}
.rgn .rgn-iconbtn:hover,
.rgn button.rgn-iconbtn:hover { background: var(--rg-tint); }
.rgn .rgn-actions .rgn-iconbtn .rgn-i {
  width: 22px;
  height: 22px;
  stroke-width: 1.9; /* 24-unit viewBox at 22px: renders 1.75px, matched to the nav label weight */
}
.rgn button.rgn-burger { display: none; }

/* search: a quiet icon; it opens the field as a row under the bar (at 992px and under FiboSearch's own
 * full-screen search takes over) */
.rgn .rgn-search {
  display: flex;
  align-items: center;
}
.rgn .rgn-search__field {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding: 14px var(--rg-gutter) 18px;
  border-top: 1px solid var(--rg-line);
  border-radius: 0 0 24px 24px;
  background: var(--rg-white);
  box-shadow: 0 20px 32px -20px color-mix(in srgb, var(--rg-ink) 45%, transparent);
}
.rgn.is-search-open .rgn-search__field { display: block; }
.rgn .rgn-search__box {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.rgn .rgn-search__glyph {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 14px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  pointer-events: none;
  color: var(--rg-ink);
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  text-align: left;
}
.rgn [data-rgn="search"] .dgwt-wcas-search-form { margin: 0; }
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  height: 48px;
  margin: 0;
  padding: 0 40px 0 48px;
  border: 0;
  border-radius: 999px;
  background: var(--rg-tint);
  box-shadow: none;
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 48px;
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rg-ink) 22%, transparent);
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
  outline: none;
  background: var(--rg-white);
  box-shadow: inset 0 0 0 2px var(--rg-ink);
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
  color: var(--rg-muted);
  font-style: normal;
  font-weight: 400;
  opacity: 1;
}
.rgn [data-rgn="search"] input[type="search"]::-webkit-search-cancel-button,
.rgn [data-rgn="search"] input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  position: absolute;
  z-index: 1;
  top: 2px;
  right: auto;
  left: 2px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  animation: none;
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg,
.rgn [data-rgn="search"] .dgwt-wcas-voice-search { display: none; }
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-preloader {
  right: 12px;
  margin-right: 0;
}
.rgn [data-rgn="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-close path { fill: var(--rg-ink); }

/* cart: the link is the control (keyboard + no-JS); FunnelKit's toggler underneath keeps the live count */
.rgn .rgn-cart {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}
.rgn .rgn-cart__link {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.rgn [data-rgn="cart"] .fkcart-mini-toggler {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.rgn [data-rgn="cart"] .fkcart-mini-toggler .fkcart-shortcode-icon-wrap {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
}
.rgn [data-rgn="cart"] .fkcart-mini-toggler .fkcart-shortcode-icon-wrap svg,
.rgn [data-rgn="cart"] .fkcart-mini-toggler .fkcart-shortcode-price { display: none; }
.rgn [data-rgn="cart"] .fkcart-mini-toggler .fkcart-shortcode-count {
  position: absolute;
  z-index: 2;
  top: 3px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  width: auto;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rg-ink);
  box-shadow: 0 0 0 2px var(--rg-white);
  color: var(--rg-white);
  font-family: var(--rg-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.rgn [data-rgn="cart"] .fkcart-mini-toggler .fkcart-shortcode-count[data-item-count="0"] { display: none; }

/* ---------------------------------------------------------------------------------------------
 * Shop panel (desktop/tablet): a rail of 6 picture tabs; the open tab shows its name and "Shop all"
 * pill, its link groups flowed into four even columns, and four category tiles.
 * ------------------------------------------------------------------------------------------- */
.rgn .rgn-scrim {
  position: fixed;
  z-index: 1;
  inset: 0;
  background: color-mix(in srgb, var(--rg-ink) 30%, transparent);
}
/* The panel is one white overlay with rounded corners on the element itself. Its top 16px tuck
 * under the bar's lower edge (transparent there, events pass through), so the bar and the panel
 * read as one card and the bottom corners stay round. */
.rgn .rgn-panel {
  position: absolute;
  top: calc(100% - 16px);
  left: 0;
  right: 0;
  max-height: calc(var(--rgn-panel-max, calc(100vh - 136px)) + 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 16px;
  border-radius: 16px 16px 24px 24px;
  background: linear-gradient(to bottom, transparent 16px, var(--rg-white) 16px);
  box-shadow: 0 30px 44px -26px color-mix(in srgb, var(--rg-ink) 45%, transparent);
  text-align: left;
  pointer-events: none;
}
.rgn .rgn-panel::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rg-line);
}
.rgn .rgn-panel > * { pointer-events: auto; }
.rgn .rgn-panel[hidden] { display: none; }
.rgn .rgn-panel__in {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  column-gap: 48px;
  width: min(100% - 2 * var(--rg-gutter), var(--rg-max));
  margin-inline: auto;
  padding: 24px 0 32px;
}

/* rail */
.rgn .rgn-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rgn .rgn-rail__tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rgn button.rgn-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 4px 16px 4px 4px;
  border-radius: 999px;
  background: transparent;
  color: var(--rg-muted);
  font-family: var(--rg-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.rgn button.rgn-tab[aria-selected="true"] {
  background: var(--rg-tint);
  color: var(--rg-ink);
}
.rgn .rgn-tab__label { flex: 1; min-width: 0; }
.rgn .rgn-tab__chev {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.rgn button.rgn-tab[aria-selected="true"] .rgn-tab__chev {
  opacity: 1;
  transform: none;
}
.rgn .rgn-disc {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rg-tint);
  transition: background-color 0.15s ease-out;
}
.rgn button.rgn-tab[aria-selected="true"] .rgn-disc { background: var(--rg-accent); }
/* cutouts are mostly tall: fit the height so every picture sits evenly in its disc; a wide one is
 * capped by max-width and contained */
.rgn .rgn-disc__img {
  width: auto;
  max-width: 38px;
  height: 38px;
  object-fit: contain;
}
.rgn .rgn-rail__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  margin: 0 0 0 6px;
  padding: 12px 12px 0 0;
  border-top: 1px solid var(--rg-line);
  font-size: 16px;
  font-weight: 600;
}
.rgn .rgn-rail__all .rgn-i {
  width: 20px;
  height: 20px;
  transition: transform 0.15s ease-out;
}
.rgn .rgn-rail__all:hover .rgn-i { transform: translateX(3px); }

/* tabpanel: head row (name + Shop all), four even link columns, four category tiles */
.rgn .rgn-tp {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.rgn .rgn-panel__body { display: grid; }
.rgn .rgn-tp { grid-area: 1 / 1; }
/* every tab panel shares one cell and keeps its size while hidden, so the panel never changes
 * height between tabs; hidden ones are invisible, inert and out of the accessibility tree */
.rgn .rgn-tp[hidden] {
  display: flex;
  visibility: hidden;
}
.rgn .rgn-tp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rg-line);
}
.rgn .rgn-tp__name {
  font-family: var(--rg-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}
.rgn .rgn-tp__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 18px;
}
.rgn .rgn-tp__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rgn .rgn-tp__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rgn .rgn-col { min-width: 0; }
/* headings and links share one 32px row, so the four columns line up row for row */
.rgn .rgn-col__h {
  padding: 5px 0;
  color: var(--rg-ink);
  font-family: var(--rg-font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
}
.rgn .rgn-col--span2 { grid-column: span 2; }
.rgn .rgn-col--span2 .rgn-col__list {
  columns: 2;
  column-gap: 28px;
}
.rgn .rgn-col__list li { break-inside: avoid; }
.rgn .rgn-col__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rgn .rgn-col__go .rgn-i {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  transition: transform 0.15s ease-out;
}
.rgn .rgn-col__go:hover .rgn-i { transform: translateX(2px); }
.rgn .rgn-col__h a:hover,
.rgn .rgn-col__list a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rgn .rgn-col__list a {
  display: inline-block;
  padding: 5px 0;
  color: var(--rg-ink);
  font-size: 16px;
  line-height: 22px;
}

/* secondary pill: 1px ink outline (design-system rule 5) */
.rgn .rgn-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  color: var(--rg-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.rgn .rgn-pill .rgn-i { width: 18px; height: 18px; }
.rgn .rgn-pill:hover {
  background: var(--rg-ink);
  color: var(--rg-white);
}

/* category tiles: white cards, 1px line border (design-system rule 6) */
/* the tile row follows the links and grows to the panel's bottom edge: a shorter tab's spare height
 * goes into larger tile photos, not into a gap or white under the cards (the panel height stays
 * constant across tabs) */
.rgn .rgn-tp__tiles {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.rgn .rgn-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--rg-line);
  border-radius: 16px;
  background: var(--rg-white);
  transition: border-color 0.15s ease-out;
}
.rgn .rgn-tile:hover { border-color: var(--rg-ink); }
.rgn .rgn-tile__img {
  display: block;
  flex: none;
  width: auto;
  height: 100%;
  min-height: 84px;
  max-height: 104px;
  aspect-ratio: 1;
  overflow: hidden;
  contain: size; /* the photo never sizes the row: the row sets the box, the photo fits it */
  border-radius: 10px;
  background: var(--rg-white);
}
.rgn .rgn-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* catalogue photos sit on off-white studio grounds: multiply melts that box into the white tile */
  transition: transform 0.25s ease-out;
}
.rgn .rgn-tile:hover .rgn-tile__img img { transform: scale(1.06); }
.rgn .rgn-tile__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rgn .rgn-tile__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.rgn .rgn-tile__count {
  color: var(--rg-muted);
  font-size: 13px;
  line-height: 1.3;
}

/* opening: the content fades in, staggered (about 250ms in all). h-header.js sets .is-panel-in for the
 * length of the entrance only, so a later display change (a resize) never replays it. */
.rgn.is-panel-in .rgn-scrim { animation: rgn-fade 0.2s ease-out both; }
.rgn.is-panel-in .rgn-rail__tabs > .rgn-tab,
.rgn.is-panel-in .rgn-rail__all,
.rgn.is-panel-in .rgn-tp:not([hidden]) .rgn-tp__head,
.rgn.is-panel-in .rgn-tp:not([hidden]) .rgn-col,
.rgn.is-panel-in .rgn-tp:not([hidden]) .rgn-tile { animation: rgn-rise 0.26s var(--rgn-ease) both; }
.rgn.is-panel-in .rgn-rail__tabs > .rgn-tab:nth-child(2) { animation-delay: 20ms; }
.rgn.is-panel-in .rgn-rail__tabs > .rgn-tab:nth-child(3) { animation-delay: 40ms; }
.rgn.is-panel-in .rgn-rail__tabs > .rgn-tab:nth-child(4) { animation-delay: 60ms; }
.rgn.is-panel-in .rgn-rail__tabs > .rgn-tab:nth-child(5) { animation-delay: 80ms; }
.rgn.is-panel-in .rgn-rail__tabs > .rgn-tab:nth-child(6) { animation-delay: 100ms; }
.rgn.is-panel-in .rgn-rail__all { animation-delay: 120ms; }
.rgn.is-panel-in .rgn-tp:not([hidden]) .rgn-col:nth-child(2) { animation-delay: 30ms; }
.rgn.is-panel-in .rgn-tp:not([hidden]) .rgn-col:nth-child(3) { animation-delay: 60ms; }
.rgn.is-panel-in .rgn-tp:not([hidden]) .rgn-col:nth-child(4) { animation-delay: 90ms; }
.rgn.is-panel-in .rgn-tp:not([hidden]) .rgn-tile { animation-delay: 100ms; }
@keyframes rgn-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rgn-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* switching tabs: the new tab's content fades in (h-header.js sets .is-in briefly) */
.rgn .rgn-tp.is-in { animation: rgn-fade 0.18s ease-out both; }
@keyframes rgn-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rgn-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------------------------
 * Phone drawer: a bottom sheet in the top layer (popover), with scrim, grab handle and accordions.
 * ------------------------------------------------------------------------------------------- */
.rgn .rgn-drawer {
  position: fixed;
  inset: 0;
  display: none;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--rg-ink);
}
.rgn .rgn-drawer:is(:popover-open, .is-open) { display: block; }
.rgn .rgn-drawer.is-open { z-index: 2147483000; }
.rgn .rgn-drawer:focus-visible { outline: none; }
.rgn .rgn-drawer__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--rg-ink) 55%, transparent);
  transition: opacity 0.25s ease-out;
}
.rgn .rgn-drawer__sheet {
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px 24px 0 0;
  background: var(--rg-white);
  box-shadow: 0 -18px 40px -20px color-mix(in srgb, var(--rg-ink) 60%, transparent);
  transition: transform 0.3s var(--rgn-ease);
}
@starting-style {
  .rgn .rgn-drawer:is(:popover-open, .is-open) .rgn-drawer__sheet { transform: translateY(100%); }
  .rgn .rgn-drawer:is(:popover-open, .is-open) .rgn-drawer__scrim { opacity: 0; }
}
.rgn .rgn-drawer.is-closing .rgn-drawer__sheet {
  transform: translateY(100%);
  transition-duration: 0.22s;
}
.rgn .rgn-drawer.is-closing .rgn-drawer__scrim {
  opacity: 0;
  transition-duration: 0.22s;
}
.rgn .rgn-drawer__top {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 20px 10px 4px var(--rg-gutter);
}
.rgn .rgn-drawer__grab {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 999px;
  background: var(--rg-line);
}
.rgn button.rgn-drawer__close { background: var(--rg-tint); }
@media (hover: hover) {
  .rgn button.rgn-drawer__close:hover { background: var(--rg-line); }
}
.rgn .rgn-drawer__close .rgn-i { width: 22px; height: 22px; }
.rgn .rgn-drawer__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--rg-gutter) calc(8px + env(safe-area-inset-bottom, 0px));
}
.rgn .rgn-dshop {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.rgn .rgn-dshop__h {
  font-family: var(--rg-font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}
.rgn .rgn-dshop__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
}
.rgn .rgn-dshop__all .rgn-i { width: 18px; height: 18px; }
.rgn .rgn-dsecs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}
.rgn button.rgn-dsec__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 6px 4px 6px 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}
.rgn .rgn-dsec__label { flex: 1; min-width: 0; }
.rgn .rgn-dsec__pm {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rg-tint);
  color: var(--rg-ink);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.rgn .rgn-dsec__pm .rgn-i { width: 18px; height: 18px; }
.rgn .rgn-dsec__pm .rgn-i__v {
  transform-origin: 12px 12px;
  transition: transform 0.2s ease-out;
}
.rgn button.rgn-dsec__row[aria-expanded="true"] .rgn-dsec__pm {
  background: var(--rg-ink);
  color: var(--rg-white);
}
.rgn button.rgn-dsec__row[aria-expanded="true"] .rgn-i__v { transform: rotate(90deg) scaleY(0); }
.rgn .rgn-dsec__body {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  visibility: hidden;
  transition: grid-template-rows 0.26s var(--rgn-ease), visibility 0s linear 0.26s;
}
.rgn button.rgn-dsec__row[aria-expanded="true"] + .rgn-dsec__body {
  grid-template-rows: minmax(0, 1fr);
  visibility: visible;
  transition: grid-template-rows 0.26s var(--rgn-ease), visibility 0s;
}
.rgn .rgn-dsec__inner {
  min-height: 0;
  overflow: hidden;
  padding-left: 62px;
}
.rgn .rgn-dsec__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rg-line);
  font-size: 15px;
  font-weight: 600;
}
.rgn .rgn-dsec__all .rgn-i { width: 18px; height: 18px; }
.rgn .rgn-dgrp { padding: 4px 0 8px; }
.rgn .rgn-dgrp__h {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--rg-font-display);
  font-size: 16px;
  font-weight: 500;
}
.rgn .rgn-dgrp__h .rgn-i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.rgn .rgn-dgrp__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.3;
}
.rgn .rgn-drows { border-top: 1px solid var(--rg-line); }
.rgn .rgn-drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--rg-line);
  font-size: 16px;
  font-weight: 500;
}
.rgn .rgn-drow .rgn-i { width: 20px; height: 20px; }
.rgn .rgn-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 8px;
  padding: 12px 12px 12px 20px;
  border-radius: 20px;
  background: var(--rg-tint);
}
.rgn .rgn-drawer__follow {
  font-size: 15px;
  font-weight: 500;
}
.rgn .rgn-drawer__soc {
  display: flex;
  gap: 8px;
}
.rgn .rgn-soc {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rg-white);
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.rgn .rgn-soc:hover {
  background: var(--rg-ink);
  color: var(--rg-white);
}
.rgn .rgn-soc .rgn-i { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------------------------
 * Narrower desktops and tablets.
 * ------------------------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .rgn .rgn-bar__in { column-gap: 16px; }
  .rgn .rgn-nav__link {
    padding: 0 13px;
    font-size: 15px;
  }
  /* the narrower rail: a long name wraps to two lines (the 54px row holds both) instead of running
   * under the chevron */
  .rgn .rgn-tab__label { white-space: normal; }
  .rgn .rgn-panel__in {
    grid-template-columns: 248px minmax(0, 1fr);
    column-gap: 36px;
  }
  .rgn .rgn-tp__cols { column-gap: 20px; }
  .rgn .rgn-col__list a { font-size: 15px; }
  .rgn .rgn-col__h { font-size: 16px; }
  /* tiles stack (photo over name) so four still fit in one row */
  .rgn .rgn-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 8px 12px;
  }
  .rgn .rgn-tile__img {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 72px;
    max-height: none;
    aspect-ratio: auto;
  }
  .rgn .rgn-tile__txt {
    flex: none;
    padding: 0 4px;
  }
}
@media (max-width: 1023px) {
  .rgn {
    --rgn-ink: 40px;
    --rgn-pad: 10px;
  }
  .rgn .rgn-bar__in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rgn .rgn-nav__list { gap: 0; }
  .rgn .rgn-nav__link {
    padding: 0 10px;
    font-size: 14px;
  }
  .rgn .rgn-nav__link .rgn-nav__ext {
    width: 12px;
    height: 12px;
  }
  .rgn .rgn-nav__link:has(.rgn-nav__ext) { gap: 3px; }
  .rgn .rgn-actions { gap: 0; }
  .rgn .rgn-panel__in {
    grid-template-columns: 224px minmax(0, 1fr);
    column-gap: 28px;
  }
  .rgn button.rgn-tab {
    gap: 10px;
    font-size: 15px;
  }
  .rgn .rgn-tp__cols,
  .rgn .rgn-tp__cols--3,
  .rgn .rgn-tp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* one row of two tiles: the links already list every category, and a second row only made the
   * panel taller than the screen */
  .rgn .rgn-tp__tiles .rgn-tile:nth-child(n + 3) { display: none; }
  /* two columns: a two-column group takes a full row, and the next one-column group back-fills the
   * free cell beside the group before it, so no column is left empty */
  .rgn .rgn-tp__cols { grid-auto-flow: row dense; }
}

/* small tablets: the full logo and the new-tab cue both stay, so the nav pills tighten */
@media (min-width: 768px) and (max-width: 899px) {
  .rgn .rgn-bar__in { column-gap: 20px; }
  .rgn .rgn-nav__link { padding: 0 7px; }
}
/* the narrowest tablets: one size smaller nav text buys the logo ~25px of air (pills stay 44px tall) */
@media (min-width: 768px) and (max-width: 839px) {
  .rgn .rgn-nav__link { font-size: 13px; }
}

/* ---------------------------------------------------------------------------------------------
 * Phone < 768: logo, search, cart, menu button; the drawer replaces the nav and the panel.
 * The promise strip shows all three promises at once.
 * ------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .rgn {
    --rgn-mq-h: 36px;
    --rgn-ink: 36px;
    --rgn-pad: 7px;
  }
  .rgn .rgn-mq__track { display: none; }
  .rgn .rgn-mq {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: var(--rgn-mq-h);
    padding: 4px 8px;
  }
  .rgn .rgn-mq__line {
    display: block;
    color: var(--rg-white);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
  }
  .rgn .rgn-mq__line > span > span { white-space: nowrap; }
  .rgn .rgn-mq__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 6px;
    border-radius: 50%;
    background: var(--rg-on-ink-2);
    vertical-align: middle;
  }
  .rgn .rgn-bar__in {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
  }

  .rgn .rgn-nav,
  .rgn .rgn-account,
  .rgn .rgn-panel,
  .rgn .rgn-scrim { display: none; }
  .rgn button.rgn-burger { display: inline-grid; }
  .rgn .rgn-actions { margin-right: -6px; }
}
@media (max-width: 379px) {
  .rgn .rgn-mq__line { font-size: 12px; }
}

/* ---------------------------------------------------------------------------------------------
 * Reduced motion: the marquee stops (its items stay readable and scroll by hand); nothing slides.
 * ------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rgn .rgn-mq {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rgn .rgn-mq::-webkit-scrollbar { display: none; }
  .rgn .rgn-mq__track {
    margin-inline: auto;
    padding: 0 var(--rg-gutter);
    animation: none;
  }
  .rgn .rgn-mq__set[aria-hidden="true"] { display: none; }
  .rgn .rgn-mq__set .rgn-mq__item:last-child::after { display: none; }
  .rgn .rgn-mq:focus-visible {
    outline: 2px solid var(--rg-white);
    outline-offset: -4px;
  }
  .rgn *,
  .rgn *::before,
  .rgn *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------------------------
 * No JavaScript (scripting: none). Shop still links to the shop; hovering or focusing it shows the
 * panel as a full category map. The drawer opens natively (popover) with every section expanded.
 * ------------------------------------------------------------------------------------------- */
@media (scripting: none) {
  .rgn .rgn-panel,
  .rgn .rgn-panel[hidden] {
    display: block;
    visibility: hidden;
    max-height: calc(100vh - 136px);
    transition: visibility 0s linear 0.35s;
  }
  .rgn .rgn-nav:has(.rgn-nav__shop:hover) .rgn-panel,
  .rgn .rgn-nav:focus-within .rgn-panel,
  .rgn .rgn-panel:hover {
    visibility: visible;
    transition-delay: 0s;
  }
  .rgn .rgn-panel__in {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
  .rgn .rgn-rail__tabs { display: none; }
  .rgn .rgn-rail__all {
    justify-content: flex-start;
    gap: 8px;
    padding-top: 0;
    border-top: 0;
  }
  .rgn .rgn-panel__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 40px;
  }
  .rgn .rgn-tp,
  .rgn .rgn-tp[hidden] {
    display: block;
    grid-area: auto;
    visibility: visible;
    animation: none;
  }
  .rgn .rgn-col__list { columns: auto; }
  .rgn .rgn-tp__head {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .rgn .rgn-tp__name { font-size: 20px; }
  .rgn .rgn-pill { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .rgn .rgn-tp__cols { display: block; }
  .rgn .rgn-col__h {
    margin-top: 6px;
    font-size: 15px;
  }
  .rgn .rgn-col__list a {
    padding: 2px 0;
    font-size: 14px;
  }
  .rgn .rgn-tp__tiles,
  .rgn .rgn-dsec__pm { display: none; }
  .rgn .rgn-dsec__body {
    grid-template-rows: minmax(0, 1fr);
    visibility: visible;
  }
  .rgn .rgn-search:focus-within .rgn-search__field { display: block; }
}

/* ===== m-home.css ===== */
/* Homepage V2 (rootsglass.com retail): every rule is scoped under .rgm; tokens come from base.css.
 * Closed palette: tokens, ink at an alpha, or color-mix() of two tokens in 5% steps. No resting shadows.
 * The live site leaks styles onto bare elements (Elementor kit 22, Hello theme): headings, links (a:hover is
 * (0,2,1)), and [type=button]:hover (0,2,0). Every link and button component below therefore sets its own
 * colours, including :hover, at (0,3,0) or higher. */

/* ------------------------------------------------------------------ root + resets */
.rgm {
  --rgm-sec: 96px;
  --rgm-gap: 20px;
  --rgm-wrapw: min(var(--rg-max), 100% - 2 * var(--rg-gutter));
  --rgm-ink-2: color-mix(in srgb, var(--rg-white) 10%, var(--rg-ink));
  --rgm-ink-3: color-mix(in srgb, var(--rg-white) 20%, var(--rg-ink));
  --rgm-dot: color-mix(in srgb, var(--rg-white) 40%, var(--rg-ink));
  display: block;
  position: relative;
  overflow-x: clip;
  background: var(--rg-white);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.rgm *,
.rgm *::before,
.rgm *::after { box-sizing: border-box; }
.rgm [hidden] { display: none !important; }
.rgm h1, .rgm h2, .rgm h3, .rgm h4, .rgm p, .rgm ul, .rgm ol, .rgm li,
.rgm figure, .rgm blockquote { margin: 0; padding: 0; }
.rgm ul, .rgm ol { list-style: none; }
.rgm h1, .rgm h2, .rgm h3, .rgm h4 {
  font-family: var(--rg-font-display);
  font-weight: 600;
  color: var(--rg-ink);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
}
.rgm a,
.rgm a:visited,
.rgm a:hover,
.rgm a:focus,
.rgm a:active { color: inherit; text-decoration: none; }
.rgm img,
.rgm video { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; }
.rgm button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-transform: none;
  letter-spacing: 0;
  text-align: inherit;
  white-space: normal;
  width: auto;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  transition: none;
}
.rgm strong { font-weight: 600; }
.rgm del { text-decoration: line-through; }
.rgm .rgm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rgm .rgm-ico { display: block; flex: none; }

/* focus: a visible ring on every control (white on ink grounds) */
.rgm a:focus-visible,
.rgm button:focus-visible,
.rgm summary:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 3px; }
.rgm .rgm-band--ink a:focus-visible,
.rgm .rgm-band--ink button:focus-visible,
.rgm .rgm-hero a:focus-visible,
.rgm .rgm-hero button:focus-visible { outline-color: var(--rg-white); }

/* ------------------------------------------------------------------ layout */
.rgm .rgm-wrap { width: var(--rgm-wrapw); margin-left: auto; margin-right: auto; }
/* Vertical rhythm: white sections carry half the gap above and below, so two white sections sit one full gap apart
   and every section box has air on both sides. Bands carry the full gap inside and half outside. Sections that hold
   a character get extra room on the edge it grips (noted per section). */
.rgm .rgm-sec { position: relative; padding: calc(var(--rgm-sec) / 2) 0; }
.rgm .rgm-band { padding: var(--rgm-sec) 0; margin: calc(var(--rgm-sec) / 2) 0; }
.rgm .rgm-band + .rgm-band { margin-top: 0; }
.rgm .rgm-band:has(+ .rgm-band) { margin-bottom: 0; }
.rgm .rgm-band:last-child { margin-bottom: 0; }
.rgm .rgm-band--ink { background: var(--rg-ink); color: var(--rg-white); }
.rgm .rgm-band--tint { background: var(--rg-tint); }

/* section opening: large heading left, controls right */
.rgm .rgm-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.rgm .rgm-head__title { position: relative; min-width: 0; }
.rgm .rgm-h2 {
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--rg-ink);
}
.rgm .rgm-band--ink .rgm-h2 { color: var(--rg-white); }
.rgm .rgm-h2 { text-wrap: balance; }
.rgm .rgm-head__ctrls { display: flex; align-items: center; gap: 16px; flex: none; }
.rgm .rgm-arrows { display: inline-flex; gap: 10px; }

.rgm .rgm-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--rg-muted);
}
.rgm .rgm-eyebrow__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rg-muted); flex: none; }
.rgm .rgm-eyebrow--icon { color: var(--rg-ink); }

/* ------------------------------------------------------------------ buttons (pills) */
.rgm .rgm-btn,
.rgm .rgm-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.rgm .rgm-btn .rgm-ico { transition: transform .2s ease-out; }
.rgm .rgm-btn:hover .rgm-ico { transform: translateX(3px); }
.rgm .rgm-btn--lg,
.rgm .rgm-btn--lg:visited { min-height: 52px; padding: 0 30px; font-size: 16px; }
.rgm .rgm-btn--block { display: flex; width: 100%; }
.rgm .rgm-btn--accent,
.rgm .rgm-btn--accent:visited,
.rgm .rgm-btn--accent:hover,
.rgm .rgm-btn--accent:focus { background: var(--rg-accent); color: var(--rg-ink); }
.rgm .rgm-btn--accent:hover { background: color-mix(in srgb, var(--rg-accent) 75%, var(--rg-white)); }
.rgm .rgm-btn--ink,
.rgm .rgm-btn--ink:visited,
.rgm .rgm-btn--ink:hover,
.rgm .rgm-btn--ink:focus { background: var(--rg-ink); color: var(--rg-white); }
.rgm .rgm-btn--ink:hover { background: color-mix(in srgb, var(--rg-ink) 85%, var(--rg-white)); }
.rgm .rgm-btn--outline,
.rgm .rgm-btn--outline:visited,
.rgm .rgm-btn--outline:focus { background: transparent; color: var(--rg-ink); border-color: var(--rg-ink); }
.rgm .rgm-btn--outline:hover { background: var(--rg-ink); color: var(--rg-white); border-color: var(--rg-ink); }
.rgm .rgm-btn--outline-light,
.rgm .rgm-btn--outline-light:visited,
.rgm .rgm-btn--outline-light:focus { background: transparent; color: var(--rg-white); border-color: var(--rg-white); }
.rgm .rgm-btn--outline-light:hover { background: var(--rg-white); color: var(--rg-ink); border-color: var(--rg-white); }

/* round icon buttons (rail and hero arrows) */
.rgm .rgm-iconbtn,
.rgm .rgm-iconbtn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--rg-ink);
  border-radius: 50%;
  background: var(--rg-white);
  color: var(--rg-ink);
  cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.rgm .rgm-iconbtn:hover { background: var(--rg-ink); color: var(--rg-white); }
.rgm .rgm-iconbtn--light,
.rgm .rgm-iconbtn--light:focus { border-color: var(--rg-white); background: transparent; color: var(--rg-white); }
.rgm .rgm-iconbtn--light:hover { background: var(--rg-white); color: var(--rg-ink); }
/* disabled rail arrows: muted, but the ring stays clearly visible */
.rgm .rgm-iconbtn[aria-disabled="true"],
.rgm .rgm-iconbtn[aria-disabled="true"]:hover {
  opacity: .4;  /* the ink ring at 40%: a token colour, no off-palette grey */
  border-color: var(--rg-ink);
  background: var(--rg-white);
  color: var(--rg-ink);
  cursor: default;
}
.rgm .rgm-iconbtn--light[aria-disabled="true"],
.rgm .rgm-iconbtn--light[aria-disabled="true"]:hover {
  opacity: .45;
  border-color: var(--rg-white);
  background: transparent;
  color: var(--rg-white);
}

/* ------------------------------------------------------------------ rails (scroll inside themselves) */
.rgm .rgm-rail {
  --rgm-cols: 4;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--rgm-cols) - 1) * var(--rgm-gap)) / var(--rgm-cols));
  gap: var(--rgm-gap);
  margin: 0;
  padding: 6px calc((100% - var(--rgm-wrapw)) / 2) 14px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc((100% - var(--rgm-wrapw)) / 2);
  scroll-padding-right: calc((100% - var(--rgm-wrapw)) / 2);
  scrollbar-width: none;
}
.rgm .rgm-rail::-webkit-scrollbar { display: none; }
.rgm .rgm-rail > li { scroll-snap-align: start; min-width: 0; }
/* loop rails: the cloned card before the first one would show as a sliver in the left gutter; the gutter is
   masked so the rail's left edge lines up with the heading, as on the other rails */
.rgm .rgm-rail--loop {
  -webkit-mask-image: linear-gradient(to right, transparent calc((100% - var(--rgm-wrapw)) / 2 - var(--rgm-gap)), #000 calc((100% - var(--rgm-wrapw)) / 2));
  mask-image: linear-gradient(to right, transparent calc((100% - var(--rgm-wrapw)) / 2 - var(--rgm-gap)), #000 calc((100% - var(--rgm-wrapw)) / 2));
}
/* no JavaScript: no arrows, so show a thin native scrollbar for mouse users */
.rgm:not(.rgm--js) .rgm-rail { scrollbar-width: thin; }

/* ------------------------------------------------------------------ stars (rating only) */
.rgm .rgm-stars {
  position: relative;
  display: inline-block;
  flex: none;
  width: 80px;
  height: 15px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'><path fill='%23EAEAEA' d='M8 .7l2.1 4.4 4.8.6-3.5 3.3.9 4.8L8 11.5l-4.3 2.3.9-4.8L1.1 5.7l4.8-.6z'/></svg>") left center / 16px 15px repeat-x;
}
.rgm .rgm-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'><path fill='%23FFBC00' d='M8 .7l2.1 4.4 4.8.6-3.5 3.3.9 4.8L8 11.5l-4.3 2.3.9-4.8L1.1 5.7l4.8-.6z'/></svg>") left center / 16px 15px repeat-x;
}
.rgm .rgm-stars--lg { width: 105px; height: 20px; background-size: 21px 20px; }
.rgm .rgm-stars--lg .rgm-stars__fill { background-size: 21px 20px; }

/* ------------------------------------------------------------------ prices (ink, Jost 600) */
.rgm .rgm-cost { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.rgm .rgm-price {
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--rg-ink);
}
.rgm .rgm-price-was {
  font-family: var(--rg-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: var(--rg-muted);
  text-decoration: line-through;
}
.rgm .rgm-cost--lg .rgm-price { font-size: 19px; }

/* ------------------------------------------------------------------ characters (decorative, never over content) */
.rgm .rgm-char {
  position: absolute;
  z-index: 3;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity .15s ease-out;
}
.rgm .rgm-sign { position: absolute; z-index: 3; pointer-events: none; transition: opacity .15s ease-out; }
/* m-home.js: a character passing beneath the sticky site header fades out rather than sitting under its controls */
.rgm .rgm-char.is-under,
.rgm .rgm-sign.is-under { opacity: 0; }
.rgm .rgm-sign .rgm-char { position: static; display: block; width: 100%; }
.rgm .rgm-sign::after {
  content: attr(data-word);
  position: absolute;
  left: 44.8%;
  top: 72.1%;
  transform: translate(-50%, -50%);
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--rg-ink);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ hero: one immersive photo card per slide */
.rgm .rgm-hero { padding: 16px 0 8px; }
.rgm .rgm-hero__viewport { position: relative; }
.rgm .rgm-hero__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 24px;
}
.rgm .rgm-hero__track::-webkit-scrollbar { display: none; }
.rgm .rgm-hero__slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  height: 620px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--rg-ink);
  color: var(--rg-white);
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.rgm .rgm-hero__img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--rgm-pos, 50% 50%);
}
.rgm .rgm-hero__img--flip { transform: scaleX(-1); }
/* a tall subject in a wide card: the whole photo at the card's height, set to the right, its open side fading into
   the ink ground (the photo is flipped, so its local right edge is the visible left edge) */
.rgm .rgm-hero__slide--contain .rgm-hero__img {
  left: auto;
  right: 11%;
  width: auto;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--rg-ink) 38%, var(--rg-ink) 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, var(--rg-ink) 38%, var(--rg-ink) 86%, transparent 100%);
}
.rgm .rgm-hero__slide--contain .rgm-hero__img--flip {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, var(--rg-ink) 38%, var(--rg-ink) 86%, transparent 100%);
  mask-image: linear-gradient(to left, transparent 0%, var(--rg-ink) 38%, var(--rg-ink) 86%, transparent 100%);
}
/* split slides (1200px photos): solid ink type panel on the left, the photo on the right, hard edge, never wider
   than 1200px; a corner scrim keeps the pager readable on light photos */
.rgm .rgm-hero__pic { display: contents; }
.rgm .rgm-hero__slide--split .rgm-hero__img {
  left: auto;
  right: 0;
  width: min(60%, 1200px);
}
/* the seam: a short ink fade over the photo's left edge (the photo itself is never stretched) */
.rgm .rgm-hero__slide--split .rgm-hero__scrim { display: none; }  /* a clean hard edge: ink panel, then photo */
/* the studio photo's far edge is near black: the ground darkens to meet it, so its fade leaves no band */
.rgm .rgm-hero__slide--contain { background: linear-gradient(90deg, var(--rg-ink) 0%, var(--rg-ink) 40%, color-mix(in srgb, var(--rg-ink) 25%, #000) 86%, color-mix(in srgb, var(--rg-ink) 25%, #000) 100%); }
.rgm .rgm-hero__slide--split .rgm-hero__copy { max-width: 40%; }
@media (min-width: 768px) {
  /* copy in the upper middle of the ink, the pager on the ink under it (never on the product) */
  .rgm .rgm-hero__slide { align-items: center; }
  .rgm .rgm-hero__copy { padding-top: 48px; padding-bottom: 116px; }
  .rgm .rgm-hero__slide--split .rgm-hero__title { font-size: 60px; }
}
.rgm .rgm-hero__shop { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.rgm .rgm-hero__shop-label { flex: none; font-weight: 500; font-size: 15px; color: var(--rg-ink); }
.rgm .rgm-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rgm .rgm-chiplink,
.rgm .rgm-chiplink:visited {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rg-line);
  border-radius: 999px;
  background: var(--rg-white);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--rg-ink);
  white-space: nowrap;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.rgm .rgm-chiplink:hover { border-color: var(--rg-ink); background: var(--rg-ink); color: var(--rg-white); }
/* with JavaScript: slides stack in one cell and cross-fade; only the active one is visible and reachable */
.rgm .rgm-hero--js .rgm-hero__track {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}
.rgm .rgm-hero--js .rgm-hero__slide {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-out, visibility 0s linear .3s;
}
.rgm .rgm-hero--js .rgm-hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease-out, visibility 0s linear 0s;
}
/* ink scrim under the type: from the bottom-left corner, clear over the subject */
.rgm .rgm-hero__scrim {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rg-ink) 70%, transparent) 0%, color-mix(in srgb, var(--rg-ink) 35%, transparent) 38%, transparent 60%),
    linear-gradient(0deg, color-mix(in srgb, var(--rg-ink) 65%, transparent) 0%, transparent 55%);
}
.rgm .rgm-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
  padding: 56px 56px 52px;
}
.rgm .rgm-hero__title {
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--rg-white);
}
.rgm .rgm-hero__line { display: block; }
.rgm .rgm-hero__sub {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--rg-white);
}
.rgm .rgm-hero__cta,
.rgm .rgm-hero__cta:visited { margin-top: 28px; min-width: 224px; }
/* the pager sits apart from the CTA: bottom-right of the card, on its line */
.rgm .rgm-hero__ctrls {
  position: absolute;
  z-index: 3;
  left: 56px;
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
}
.rgm .rgm-hero__arrows { display: inline-flex; gap: 10px; }
.rgm .rgm-hero__dots { display: inline-flex; align-items: center; }
.rgm .rgm-hero__dot,
.rgm .rgm-hero__dot:focus,
.rgm .rgm-hero__dot:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.rgm .rgm-hero__dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rgm-dot);
  transition: width .25s ease-out, background-color .25s ease-out;
}
.rgm .rgm-hero__dot:hover span { background: var(--rg-on-ink-2); }
/* keyboard focus only, and the ring hugs the dot (it stays inside the phone pill) */
.rgm .rgm-hero__dot:focus,
.rgm .rgm-hero__dot:focus-visible { outline: none; }
.rgm .rgm-hero__dot:focus-visible span { outline: 2px solid var(--rg-white); outline-offset: 2px; }
.rgm .rgm-hero__dot[aria-current="true"] span { width: 24px; background: var(--rg-white); }

/* ------------------------------------------------------------------ trust row */
.rgm .rgm-trust { padding-top: 8px; }
.rgm .rgm-trust__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--rg-tint);
}
.rgm .rgm-trust__item { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 4px 8px; }
.rgm .rgm-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rg-white);
  color: var(--rg-ink);
}
.rgm .rgm-trust__text { min-width: 0; }
.rgm .rgm-trust__title {
  display: block;
  font-family: var(--rg-font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  color: var(--rg-ink);
}
.rgm .rgm-trust__sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--rg-muted);
}
/* intro under the promises: what we sell, with live category links */
.rgm .rgm-trust__intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 64px;
  align-items: start;
  margin-top: 76px;
}
.rgm .rgm-trust__copy { padding-top: 6px; font-size: 18px; line-height: 1.7; color: var(--rg-ink); }
.rgm .rgm-trust__copy a,
.rgm .rgm-trust__copy a:visited,
.rgm .rgm-trust__copy a:hover {
  color: var(--rg-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rgm .rgm-trust__copy a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ categories */
.rgm .rgm-cat__link,
.rgm .rgm-cat__link:hover {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rg-line);
  border-radius: 16px;
  background: var(--rg-white);
  color: var(--rg-ink);
  transition: border-color .2s ease-out;
}
.rgm .rgm-cat__link:hover { border-color: var(--rg-ink); }
/* portrait 4:5 frames: m_home.py places each square photo (inline width/left/top) so the glass fills the frame;
   only empty white ground falls outside it */
.rgm .rgm-cat__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  background: var(--rg-tint);
  isolation: isolate;
}
.rgm .rgm-cat__media img {
  position: absolute;
  height: auto;
  max-width: none;
  mix-blend-mode: darken;
  transition: transform .35s ease-out;
}
.rgm .rgm-cat__link:hover .rgm-cat__media img { transform: scale(1.04); }
.rgm .rgm-cat__body { display: flex; align-items: center; gap: 12px; padding: 18px 18px 20px 20px; }
.rgm .rgm-cat__text { flex: 1; min-width: 0; }
.rgm .rgm-cat__name {
  display: block;
  font-family: var(--rg-font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  color: var(--rg-ink);
}
.rgm .rgm-cat__count {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  color: var(--rg-ink);
}
.rgm .rgm-cat__line {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  color: var(--rg-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rgm .rgm-cat__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rg-ink);
  border-radius: 50%;
  color: var(--rg-ink);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.rgm .rgm-cat__link:hover .rgm-cat__go { background: var(--rg-ink); color: var(--rg-white); }

/* ------------------------------------------------------------------ product cards */
/* New arrivals: its sign character stands beside the heading and reaches ~54px above it */
.rgm .rgm-products--new { padding-top: 60px; }
.rgm .rgm-feature { padding-bottom: 36px; }
.rgm .rgm-pcard__link,
.rgm .rgm-pcard__link:hover { display: flex; flex-direction: column; height: 100%; color: var(--rg-ink); }
.rgm .rgm-pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rg-line);
  border-radius: 14px;
  background: var(--rg-tint);
  isolation: isolate;
}
.rgm .rgm-pcard__img,
.rgm .rgm-pcard__img2 {
  mix-blend-mode: darken;
  transition: transform .35s ease-out, opacity .3s ease-out;
}
.rgm .rgm-pcard__img { position: absolute; height: auto; max-width: none; }
.rgm .rgm-pcard__img2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.rgm .rgm-pcard__link:hover .rgm-pcard__img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) {
  .rgm .rgm-pcard__link:hover .rgm-pcard__img2.is-ready { opacity: 1; }
  .rgm .rgm-pcard__link:hover .rgm-pcard__media:has(.rgm-pcard__img2.is-ready) .rgm-pcard__img { opacity: 0; }
}
.rgm .rgm-badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--rg-ink);
  color: var(--rg-white);
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
}
.rgm .rgm-pcard__cat {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--rg-muted);
}
.rgm .rgm-pcard__title {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  min-height: 2.8em;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--rg-ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.rgm .rgm-pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.rgm .rgm-pcard__rating { display: inline-flex; align-items: center; gap: 6px; }
.rgm .rgm-pcard__rc { font-size: 13px; line-height: 1; color: var(--rg-muted); }

/* ------------------------------------------------------------------ reels (ink band) */
/* the featured gallery below has a character peeking over its top edge: 80 + 48 = 128px of air */
.rgm .rgm-reels { padding: 64px 0 44px; margin-bottom: 80px; }
.rgm .rgm-reviews { padding: 64px 0 40px; }
.rgm .rgm-rail--reels { --rgm-cols: 5; }
.rgm .rgm-reel { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--rgm-ink-2); }
.rgm .rgm-reel__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: inherit; background: var(--rgm-ink-2); }
/* the lazy poster sits under the video; the video stays transparent until it has frames */
.rgm .rgm-reel__poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  pointer-events: none;
}
.rgm .rgm-reel__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  background: transparent;
}
.rgm .rgm-reel__credit {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rg-ink) 80%, transparent);
  color: var(--rg-white);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* play/pause: the same ink plate as the credit, so it reads on white studio clips and dark ones alike */
.rgm .rgm-reel__play,
.rgm .rgm-reel__play:focus,
.rgm .rgm-reel__play:hover {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--rg-ink) 80%, transparent);
  color: var(--rg-white);
  cursor: pointer;
  transition: background-color .2s ease-out;
}
.rgm .rgm-reel__play:hover { background: var(--rg-ink); }
.rgm .rgm-reel.is-playing .rgm-reel__play { opacity: 0; transition: opacity .2s ease-out, background-color .2s ease-out; }
.rgm .rgm-reel.is-playing .rgm-reel__media:hover .rgm-reel__play,
.rgm .rgm-reel.is-playing .rgm-reel__play:focus-visible { opacity: 1; }
.rgm .rgm-reel__video { cursor: pointer; }
.rgm .rgm-reel__play-on,
.rgm .rgm-reel__play-off { display: inline-flex; }
.rgm .rgm-reel__play-off { display: none; }
.rgm .rgm-reel.is-playing .rgm-reel__play-on { display: none; }
.rgm .rgm-reel.is-playing .rgm-reel__play-off { display: inline-flex; }
.rgm .rgm-reel__product,
.rgm .rgm-reel__product:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 12px 12px;
  color: var(--rg-white);
}
.rgm .rgm-reel__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--rg-white);
}
.rgm .rgm-reel__name {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--rg-white);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.rgm .rgm-reel__go { flex: none; color: var(--rg-on-ink-2); transition: transform .2s ease-out, color .2s ease-out; }
.rgm .rgm-reel__product:hover .rgm-reel__go { color: var(--rg-white); transform: translateX(3px); }

/* ------------------------------------------------------------------ featured product */
.rgm .rgm-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.rgm .rgm-feature__gallery { position: relative; min-width: 0; }
.rgm .rgm-feature__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rg-line);
  border-radius: 20px;
  background: var(--rg-tint);
  isolation: isolate;
}
.rgm .rgm-feature__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rgm .rgm-feature__track::-webkit-scrollbar { display: none; }
.rgm .rgm-feature__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  scroll-snap-align: start;
}
.rgm .rgm-feature__slide img { width: auto; height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: darken; }
.rgm .rgm-feature__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.rgm .rgm-feature__thumb,
.rgm .rgm-feature__thumb:hover {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rg-line);
  border-radius: 12px;
  background: var(--rg-tint);
  isolation: isolate;
  transition: border-color .2s ease-out;
}
.rgm .rgm-feature__thumb:hover { border-color: var(--rg-muted); }
.rgm .rgm-feature__thumb[aria-current="true"] { border-color: var(--rg-ink); }
.rgm .rgm-feature__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: darken; }
.rgm .rgm-feature__info { min-width: 0; }
.rgm .rgm-feature__title {
  margin-top: 12px;
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.rgm .rgm-feature__title a,
.rgm .rgm-feature__title a:hover { color: var(--rg-ink); text-decoration: none; }
.rgm .rgm-feature__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; }
.rgm .rgm-feature__score { font-weight: 500; font-size: 15px; line-height: 1; color: var(--rg-ink); }
.rgm .rgm-feature__rc { font-size: 14px; line-height: 1; color: var(--rg-muted); }
.rgm .rgm-feature__buy { margin-top: 18px; }
.rgm .rgm-feature__points { display: grid; gap: 10px; margin-top: 22px; }
.rgm .rgm-feature__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--rg-ink); }
.rgm .rgm-feature__points .rgm-ico { margin-top: 3px; }
.rgm .rgm-feature__opts { margin-top: 24px; }
.rgm .rgm-feature__optlabel { margin-bottom: 10px; font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--rg-ink); }
.rgm .rgm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rgm .rgm-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--rg-tint);
  font-size: 14px;
  line-height: 1.3;
  color: var(--rg-ink);
}
.rgm .rgm-feature__info .rgm-btn--block { margin-top: 28px; }
.rgm .rgm-feature__promises {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--rg-tint);
}
.rgm .rgm-feature__promises li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--rg-ink); }
/* hero: a stump leaning round the card's right edge, hand over the edge (8% of its width), body in the white gutter.
   Desktop only, and only where the gutter is wide enough to hold him whole (Jared 2026-10-13); hidden = never loaded (lazy) */
/* the white sticker trim along his body starts 41px into the 440px art (9.3% of his width): pulled in by exactly that
   (whole px per size), the trim's outer edge lands on the photo's right edge and only the hand wraps over (Jared) */
.rgm .rgm-char--hero { display: none; top: 20%; left: calc(100% - 10px); width: 110px; }
@media (min-width: 1560px) { .rgm .rgm-char--hero { display: block; } }
@media (min-width: 1700px) { .rgm .rgm-char--hero { left: calc(100% - 13px); width: 140px; } }
@media (min-width: 1900px) { .rgm .rgm-char--hero { left: calc(100% - 16px); width: 170px; } }
.rgm .rgm-char--feature { top: 0; right: 14%; width: 140px; transform: translateY(-90%); }  /* waving mossy stump (Jared 2026-10-13, was the beaker) */

/* ------------------------------------------------------------------ New arrivals sign */
.rgm .rgm-char--new-wrap { left: calc(100% + 32px); bottom: -24px; width: 92px; }
.rgm .rgm-char--new-wrap::after { font-size: 20px; }

/* ------------------------------------------------------------------ reviews (ink band) */
.rgm .rgm-review { display: flex; flex-direction: column; min-width: 0; }
.rgm .rgm-review__fig {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  background: var(--rgm-ink-2);
}
/* the whole customer photo, on ink: no glass cut off */
.rgm .rgm-review__photo { position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.rgm .rgm-review__blur {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  max-width: none;
  object-fit: cover;
  filter: blur(22px) brightness(.55) saturate(1.1);
  pointer-events: none;
}
/* product_photo reviews: the product's catalog photo set like the product cards (no white box on the ink band):
   the photo's white ground is blended away (darken) into a soft studio sweep, the product centred from its
   measured box, the same 3:4 frame and radius as the customer photos */
.rgm .rgm-review__fig--catalog {
  isolation: isolate;
  /* a grey studio sweep, light behind the glass and falling off to the edges, so the card sits in the ink band */
  background: radial-gradient(115% 85% at 50% 40%, var(--rg-tint) 0%, color-mix(in srgb, var(--rg-tint) 84%, var(--rg-ink)) 66%, color-mix(in srgb, var(--rg-tint) 62%, var(--rg-ink)) 100%);
}
.rgm .rgm-review__catalog { position: absolute; height: auto; max-width: none; mix-blend-mode: darken; }
/* video reviews: the clip cover-fitted in the same 3:4 frame; the lazy poster sits under the (transparent) video */
.rgm .rgm-review__poster,
.rgm .rgm-review__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.rgm .rgm-review__video { z-index: 1; background: transparent; cursor: pointer; }
.rgm .rgm-review--video.is-playing .rgm-reel__play { opacity: 0; transition: opacity .2s ease-out, background-color .2s ease-out; }
.rgm .rgm-review--video.is-playing .rgm-review__fig:hover .rgm-reel__play,
.rgm .rgm-review--video.is-playing .rgm-reel__play:focus-visible { opacity: 1; }
.rgm .rgm-review--video.is-playing .rgm-reel__play-on { display: none; }
.rgm .rgm-review--video.is-playing .rgm-reel__play-off { display: inline-flex; }
/* name and product link pinned to the card foot, so they line up across cards */
.rgm .rgm-review__foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.rgm .rgm-review__product--plain { display: flex; min-height: 44px; align-items: center; }
/* photo-only cards: the same 3:4 photo frame as the quote cards, a quiet caption right under it */
.rgm .rgm-review__cap { font-size: 14px; line-height: 1.4; color: var(--rg-on-ink-2); }
.rgm .rgm-review__body.rgm-review__body--product { gap: 4px; }
.rgm .rgm-review__body--product .rgm-review__product,
.rgm .rgm-review__body--product .rgm-review__product:hover { margin-top: 0; padding-top: 0; min-height: 0; color: var(--rg-white); font-weight: 500; }
.rgm .rgm-review__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 20px 2px 0; }
.rgm .rgm-review__quote p {
  font-family: var(--rg-font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  color: var(--rg-white);
}
.rgm .rgm-review__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; line-height: 1.4; color: var(--rg-on-ink-2); }
.rgm .rgm-review__name { font-weight: 500; color: var(--rg-white); }
.rgm .rgm-review__product,
.rgm .rgm-review__product:hover {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--rg-on-ink-2);
}
.rgm .rgm-review__product:hover { color: var(--rg-white); }
.rgm .rgm-review__product .rgm-ico { transition: transform .2s ease-out; }
.rgm .rgm-review__product:hover .rgm-ico { transform: translateX(3px); }
/* no one-word last lines in card titles and descriptors */
.rgm .rgm-pcard__title,
.rgm .rgm-cat__line,
.rgm .rgm-reel__name,
.rgm .rgm-guide__title { text-wrap: balance; }

/* ------------------------------------------------------------------ free gifts (tint band) */
.rgm .rgm-gifts__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: end;
}
.rgm .rgm-gifts__intro .rgm-h2 { margin-top: 14px; }
.rgm .rgm-gifts__lead { margin-top: 16px; max-width: 34ch; font-size: 17px; line-height: 1.55; color: var(--rg-ink); }
.rgm .rgm-gifts__intro .rgm-btn { margin-top: 28px; }
.rgm .rgm-gifts__fine { margin-top: 16px; max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--rg-muted); }
/* the ladder: one step per rung, each a little higher than the last */
.rgm .rgm-gifts__ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.rgm .rgm-gifts__ladder--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rgm .rgm-gifts__ladder--5 { grid-template-columns: minmax(0, .68fr) repeat(4, minmax(0, 1fr)); gap: 12px; }
.rgm .rgm-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 18px 18px;
  border: 1px solid var(--rg-line);
  border-radius: 20px;
  background: var(--rg-white);
}
.rgm .rgm-tier:nth-child(1) { margin-bottom: 0; }
.rgm .rgm-tier:nth-child(2) { margin-bottom: 28px; }
.rgm .rgm-tier:nth-child(3) { margin-bottom: 56px; }
.rgm .rgm-tier:nth-child(4) { margin-bottom: 84px; }
.rgm .rgm-gifts__ladder--5 .rgm-tier:nth-child(1) { margin-bottom: 0; }
.rgm .rgm-gifts__ladder--5 .rgm-tier:nth-child(2) { margin-bottom: 22px; }
.rgm .rgm-gifts__ladder--5 .rgm-tier:nth-child(3) { margin-bottom: 44px; }
.rgm .rgm-gifts__ladder--5 .rgm-tier:nth-child(4) { margin-bottom: 66px; }
.rgm .rgm-gifts__ladder--5 .rgm-tier:nth-child(5) { margin-bottom: 88px; }
/* the sticker step: a mini tier, the sticker as its mark */
.rgm .rgm-tier--sticker { align-items: flex-start; padding: 16px 14px 16px; border-radius: 16px; }
.rgm .rgm-tier__sticker { display: block; width: 52px; height: auto; }
.rgm .rgm-tier--sticker .rgm-tier__pick { margin-top: 10px; font-size: 15px; line-height: 1.3; }
.rgm .rgm-tier--ship .rgm-tier__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: 18px;
  border-radius: 50%;
  background: var(--rg-tint);
  color: var(--rg-ink);
}
.rgm .rgm-tier__amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.rgm .rgm-tier__num {
  font-family: var(--rg-font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--rg-ink);
}
.rgm .rgm-tier__cur { position: relative; top: -0.6em; margin-right: 2px; font-size: .48em; }
.rgm .rgm-tier__plus { font-size: 14px; line-height: 1.3; color: var(--rg-muted); }
.rgm .rgm-tier__note { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--rg-muted); }
.rgm .rgm-tier__pick { margin-top: 10px; font-family: var(--rg-font-display); font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--rg-ink); }
.rgm .rgm-tier__thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.rgm .rgm-tier__thumbs li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 12%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--rg-tint);
  isolation: isolate;
}
.rgm .rgm-tier__thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: darken; }
.rgm .rgm-tier__more span { font-weight: 500; font-size: 15px; line-height: 1; color: var(--rg-ink); }
.rgm .rgm-char--gifts { top: 0; right: 14px; width: 112px; transform: translateY(-90%); }

/* ------------------------------------------------------------------ guides */
.rgm .rgm-guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rgm .rgm-guide__link,
.rgm .rgm-guide__link:hover { display: flex; flex-direction: column; height: 100%; color: var(--rg-ink); }
.rgm .rgm-guide__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rg-line);
  border-radius: 14px;
  background: var(--rg-tint);
}
.rgm .rgm-guide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease-out; }
.rgm .rgm-guide__link:hover .rgm-guide__media img { transform: scale(1.03); }
.rgm .rgm-guide__cat { display: block; margin-top: 16px; font-size: 13px; line-height: 1.3; color: var(--rg-muted); }
.rgm .rgm-guide__title {
  display: block;
  margin-top: 6px;
  font-family: var(--rg-font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
  color: var(--rg-ink);
}
.rgm .rgm-guide__excerpt {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
  color: var(--rg-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.rgm .rgm-guide__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  color: var(--rg-ink);
}
.rgm .rgm-guide__more .rgm-ico { transition: transform .2s ease-out; }
.rgm .rgm-guide__link:hover .rgm-guide__more .rgm-ico { transform: translateX(3px); }

/* ------------------------------------------------------------------ story */
.rgm .rgm-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.rgm .rgm-story__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--rg-tint); }
.rgm .rgm-story__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }  /* the bowls span the photo's full width: any taller crop cuts glass */
.rgm .rgm-story__copy { min-width: 0; }
.rgm .rgm-story__copy .rgm-h2 { margin-top: 12px; }
.rgm .rgm-story__text { display: grid; gap: 16px; margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--rg-ink); }
.rgm .rgm-story__copy .rgm-btn { margin-top: 32px; }

/* ------------------------------------------------------------------ FAQ (tint band) */
.rgm .rgm-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
}
.rgm .rgm-faq__more { margin-top: 18px; max-width: 30ch; font-size: 15px; line-height: 1.6; color: var(--rg-muted); }
.rgm .rgm-faq__more a,
.rgm .rgm-faq__more a:hover {
  color: var(--rg-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rgm .rgm-faq__card {
  position: relative;
  padding: 40px 32px 12px;
  border: 1px solid var(--rg-line);
  border-radius: 20px;
  background: var(--rg-white);
}
.rgm .rgm-faq__item { border-top: 1px solid var(--rg-line); }
.rgm .rgm-faq__item:first-child { border-top: 0; }
.rgm .rgm-faq__q,
.rgm .rgm-faq__q:hover,
.rgm .rgm-faq__q:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  background: transparent;
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  color: var(--rg-ink);
}
.rgm .rgm-faq__q::-webkit-details-marker { display: none; }
.rgm .rgm-faq__q::marker { content: ""; }
.rgm .rgm-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--rg-ink);
  border-radius: 50%;
  color: var(--rg-ink);
  transition: transform .2s ease-out, background-color .2s ease-out, color .2s ease-out;
}
.rgm .rgm-faq__q:hover .rgm-faq__icon { background: var(--rg-ink); color: var(--rg-white); }
.rgm .rgm-faq__item[open] .rgm-faq__icon { transform: rotate(45deg); }
.rgm .rgm-faq__a { overflow: hidden; }
.rgm .rgm-faq__a p { padding: 0 52px 20px 0; font-size: 16px; line-height: 1.65; color: var(--rg-muted); }
/* with JS the icon follows .is-open, set the moment a question opens or starts closing (the [open] attribute
   itself stays on until the close animation ends) */
.rgm.rgm--js .rgm-faq__item[open]:not(.is-open) .rgm-faq__icon { transform: none; }
.rgm.rgm--js .rgm-faq__item.is-open .rgm-faq__icon { transform: rotate(45deg); }
.rgm .rgm-faq__icon { transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .2s ease-out, color .2s ease-out; }
@media (hover: none) {
  /* touch: no sticky hover fill after a tap */
  .rgm .rgm-faq__q:hover .rgm-faq__icon { background: transparent; color: var(--rg-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .rgm .rgm-faq__icon { transition: none; }
}
.rgm .rgm-char--faq { top: 0; right: 40px; width: 116px; transform: translateY(-64%); }  /* hands grip the card edge (hand row ~64-66% of the webp), base sits just below the line: no hover gap */

/* ------------------------------------------------------------------ 1024-1199: three cards per rail */
@media (max-width: 1199px) {
  .rgm .rgm-rail { --rgm-cols: 3; }
  .rgm .rgm-rail--reels { --rgm-cols: 4; }
  .rgm .rgm-hero__title { font-size: 48px; }
  .rgm .rgm-feature__grid { gap: 48px; }
  .rgm .rgm-gifts__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
  .rgm .rgm-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
}

/* ------------------------------------------------------------------ under 960: stacked hero and two-column blocks */
@media (max-width: 959px) {
  .rgm .rgm-hero__slide { height: 540px; }
  .rgm .rgm-hero__copy { padding: 40px 40px 40px; }
  .rgm .rgm-hero__ctrls { left: 40px; bottom: 32px; }
  .rgm .rgm-hero__copy { padding-bottom: 100px; }
  .rgm .rgm-feature__grid,
  .rgm .rgm-story__grid,
  .rgm .rgm-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rgm .rgm-story__media { aspect-ratio: 4 / 3; }
  .rgm .rgm-story__media img { object-position: 50% 50%; }
  .rgm .rgm-trust__intro { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 56px; }
  .rgm .rgm-faq__grid { gap: 28px; }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 767px) {
  .rgm { --rgm-sec: 64px; --rgm-gap: 12px; font-size: 15px; }
  .rgm .rgm-h2 { font-size: 28px; }
  .rgm .rgm-head { align-items: center; margin-bottom: 20px; }
  .rgm .rgm-head__ctrls .rgm-arrows { display: none; }
  .rgm .rgm-btn,
  .rgm .rgm-btn:visited { min-height: 48px; padding: 0 22px; }
  .rgm .rgm-head .rgm-btn,
  .rgm .rgm-head .rgm-btn:visited { min-height: 44px; padding: 0 18px; font-size: 14px; }

  .rgm .rgm-rail { grid-auto-columns: calc((100% - var(--rgm-gap)) / 1.45); padding-bottom: 10px; }
  .rgm .rgm-rail--reviews { grid-auto-columns: calc((100% - var(--rgm-gap)) / 1.22); }

  .rgm .rgm-hero { padding: 12px 0 6px; }
  .rgm .rgm-hero__shop { gap: 10px; margin-top: 10px; margin-right: calc(-1 * var(--rg-gutter)); }
  .rgm .rgm-hero__chips { flex-wrap: nowrap; overflow-x: auto; padding-right: var(--rg-gutter); scrollbar-width: none; }
  .rgm .rgm-hero__chips::-webkit-scrollbar { display: none; }
  .rgm .rgm-chiplink,
  .rgm .rgm-chiplink:visited { min-height: 44px; padding: 0 14px; }
  .rgm .rgm-hero__track,
  .rgm .rgm-hero__slide { border-radius: 20px; }
  /* phone: a portrait photo card, type at its foot, the pager above the full-width CTA */
  /* the photo fills the top of the card and fades into the ink ground, so the type sits on ink, clear of the glass */
  .rgm .rgm-hero__slide { height: 600px; }
  .rgm .rgm-hero__img,
  .rgm .rgm-hero__slide--contain .rgm-hero__img {
    left: 0;
    right: auto;
    width: 100%;
    height: 54%;
    object-fit: cover;
    object-position: var(--rgm-mpos, 50% 50%);
    -webkit-mask-image: linear-gradient(to bottom, var(--rg-ink) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--rg-ink) 72%, transparent 100%);
  }
  .rgm .rgm-hero__slide--contain .rgm-hero__img--flip {
    -webkit-mask-image: linear-gradient(to bottom, var(--rg-ink) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--rg-ink) 72%, transparent 100%);
  }
  .rgm .rgm-hero__scrim { background: linear-gradient(0deg, var(--rg-ink) 0%, var(--rg-ink) 30%, transparent 48%); }
  /* split slides on a phone: the photo on top with a clean edge (no fade), the type on solid ink below it */
  .rgm .rgm-hero__slide--contain { background: var(--rg-ink); }
  .rgm .rgm-hero__slide--split { flex-direction: column; align-items: stretch; }
  .rgm .rgm-hero__slide--split .rgm-hero__img {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    right: auto;
    width: 100%;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rgm .rgm-hero__slide--split .rgm-hero__scrim { display: none; }
  .rgm .rgm-hero__slide--split .rgm-hero__copy { max-width: none; }
  .rgm .rgm-hero__copy { width: 100%; max-width: none; align-items: stretch; padding: 20px; }
  .rgm .rgm-hero__title { font-size: 34px; line-height: 1.06; }
  .rgm .rgm-hero__sub { margin-top: 10px; margin-bottom: 22px; font-size: 15px; }
  .rgm .rgm-hero__cta,
  .rgm .rgm-hero__cta:visited { margin-top: 0; min-width: 0; }
  /* phone pager: top-right of the card on an ink plate, away from the CTA */
  .rgm .rgm-hero__ctrls { left: auto; right: 0; top: 0; bottom: auto; height: 44px; gap: 0; padding: 0; background: none; }
  .rgm .rgm-hero__slide--split .rgm-hero__scrim { display: none; }
  /* a slim pill drawn behind the dots; each dot keeps a 44x44 hit area, overlapped so the dots sit close */
  .rgm .rgm-hero__dots { position: relative; }
  .rgm .rgm-hero__dots::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 20px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--rg-ink) 60%, transparent);
  }
  .rgm .rgm-hero__dot + .rgm-hero__dot { margin-left: -16px; }
  .rgm .rgm-hero__arrows { display: none; }
  .rgm .rgm-hero__dot,
  .rgm .rgm-hero__dot:focus,
  .rgm .rgm-hero__dot:hover { width: 44px; }

  .rgm .rgm-trust { padding-top: 6px; }
  .rgm .rgm-trust__list { gap: 8px; padding: 14px 12px; border-radius: 16px; }
  .rgm .rgm-trust__item { gap: 10px; padding: 2px; }
  .rgm .rgm-trust__icon { width: 40px; height: 40px; }
  .rgm .rgm-trust__icon .rgm-ico { width: 20px; height: 20px; }
  .rgm .rgm-trust__title { font-size: 15px; line-height: 1.25; }
  .rgm .rgm-trust__sub { display: none; }
  .rgm .rgm-trust__intro { grid-template-columns: minmax(0, 1fr); margin-top: 48px; gap: 14px; }
  .rgm .rgm-trust__copy { padding-top: 0; font-size: 16px; line-height: 1.65; }

  .rgm .rgm-cat__body { padding: 14px 14px 16px 16px; gap: 10px; }
  .rgm .rgm-cat__name { font-size: 19px; }
  .rgm .rgm-cat__go { width: 36px; height: 36px; }
  .rgm .rgm-cat__line { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

  .rgm .rgm-products--new { padding-top: 32px; }
  .rgm .rgm-feature { padding-bottom: 32px; }
  .rgm .rgm-pcard__cat { margin-top: 12px; }
  .rgm .rgm-pcard__title { font-size: 14px; }
  .rgm .rgm-price { font-size: 17px; }
  .rgm .rgm-price-was { font-size: 14px; }

  /* the featured gallery's peeking character needs ~104px above it: 76 + 32 */
  .rgm .rgm-reels { padding: 44px 0 28px; margin-bottom: 76px; }
  .rgm .rgm-reviews { padding: 44px 0 24px; }
  .rgm .rgm-rail--reels { grid-auto-columns: calc((100% - var(--rgm-gap)) / 1.55); }
  .rgm .rgm-reel__product { min-height: 64px; padding: 10px 12px 12px; gap: 10px; }
  .rgm .rgm-reel__thumb { width: 40px; height: 40px; }
  .rgm .rgm-reel__name { font-size: 13px; }
  .rgm .rgm-reel__go { display: none; }

  .rgm .rgm-feature__title { font-size: 28px; }
  .rgm .rgm-feature__slide { aspect-ratio: 1 / 1; }
  .rgm .rgm-feature__thumbs { gap: 8px; }
  .rgm .rgm-feature__thumb { border-radius: 10px; }
  .rgm .rgm-feature__points li { font-size: 15px; }
  .rgm .rgm-char--feature { right: 10%; width: 112px; }

  .rgm .rgm-char--new-wrap { visibility: hidden; }

  .rgm .rgm-review__body { gap: 10px; padding-top: 16px; }
  .rgm .rgm-review__quote p { font-size: 18px; }

  .rgm .rgm-gifts__ladder,
  .rgm .rgm-gifts__ladder--4,
  .rgm .rgm-gifts__ladder--5 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rgm .rgm-gifts__ladder--5 .rgm-tier:nth-child(n) { margin-bottom: 0; }
  .rgm .rgm-tier:nth-child(n) { margin-bottom: 0; }
  .rgm .rgm-tier { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 16px 16px 16px 18px; }
  .rgm .rgm-tier__amt { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: 2px; }
  .rgm .rgm-tier__num { font-size: 34px; }
  .rgm .rgm-tier__pick { margin-top: 0; }
  .rgm .rgm-tier__thumbs { grid-column: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; gap: 6px; }
  .rgm .rgm-tier__thumbs li { border-radius: 10px; }
  .rgm .rgm-tier--ship .rgm-tier__badge { grid-column: 2; width: 44px; height: 44px; margin-top: 4px; }
  /* phone: the sticker sits in the figure column, the line beside it; a slimmer row than the tiers */
  .rgm .rgm-tier--sticker { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 10px 16px 10px 18px; border-radius: 16px; }
  .rgm .rgm-tier__sticker { width: 44px; }
  .rgm .rgm-tier--sticker .rgm-tier__pick { margin-top: 0; font-size: 16px; }
  .rgm .rgm-gifts__lead { font-size: 16px; }
  .rgm .rgm-char--gifts { visibility: hidden; }

  .rgm .rgm-guides__grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    gap: var(--rgm-gap);
    margin: 0 calc(-1 * var(--rg-gutter));
    padding: 4px var(--rg-gutter) 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rg-gutter);
    scrollbar-width: none;
  }
  .rgm .rgm-guides__grid::-webkit-scrollbar { display: none; }
  .rgm .rgm-guides__grid > li { scroll-snap-align: start; min-width: 0; }
  .rgm .rgm-guide__title { font-size: 19px; }

  .rgm .rgm-story__text { font-size: 15px; }
  .rgm .rgm-story__copy .rgm-btn { display: flex; width: 100%; }

  /* the sitting character's head and shoulders rise ~68px above the card: keep that clear of the intro text */
  .rgm .rgm-faq__grid { gap: 84px; }
  .rgm .rgm-faq__card { padding: 24px 18px 4px; border-radius: 16px; }  /* the first row starts below the dangling legs */
  .rgm .rgm-faq__q,
  .rgm .rgm-faq__q:hover,
  .rgm .rgm-faq__q:focus { align-items: flex-start; gap: 14px; min-height: 0; padding: 19px 0; font-size: 16px; line-height: 1.4; }
  /* 32px ring centred on the first line (16px x 1.4 = 22.4px): it stays put when a question wraps */
  .rgm .rgm-faq__icon { width: 32px; height: 32px; margin: -4.8px 0; }
  .rgm .rgm-faq__icon .rgm-ico { width: 18px; height: 18px; stroke-width: 1.95; }  /* same ~1.45px line as desktop */
  .rgm .rgm-faq__a p { padding-right: 8px; }
  .rgm .rgm-faq__a p { font-size: 15px; }
  /* phone: the character sits on the card's edge rather than dangling into a blank band */
  .rgm .rgm-char--faq { right: 64px; width: 92px; transform: translateY(-64%); }  /* seat line on the card edge, legs left of the toggle */
}

@media (max-width: 359px) {
  .rgm .rgm-hero__title { font-size: 30px; }
  .rgm .rgm-trust__title { font-size: 14px; }
  .rgm .rgm-trust__list { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  .rgm *,
  .rgm *::before,
  .rgm *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .rgm .rgm-cat__link:hover .rgm-cat__media img,
  .rgm .rgm-pcard__link:hover .rgm-pcard__img,
  .rgm .rgm-guide__link:hover .rgm-guide__media img,
  .rgm .rgm-btn:hover .rgm-ico,
  .rgm .rgm-reel__product:hover .rgm-reel__go,
  .rgm .rgm-guide__link:hover .rgm-guide__more .rgm-ico { transform: none; }
}

/* ================================================================== "All reviews" pop-up (port of PDP V4's
   "Show all" modal). Built by m-home.js on first open and appended to <body>; its root carries .rgm so the
   tokens and resets apply, and every rule is prefixed .rgm.rgm-rmodal. No open/close animation (as the PDP). */
.rgm.rgm-rmodal {
  --rgm-rtext: "Poppins", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  padding: 24px;
  overflow: visible;
  background: transparent;
  font-family: var(--rgm-rtext);
  font-size: 14px;
  line-height: 1.5;
}
.rgm.rgm-rmodal[hidden] { display: none !important; }
.rgm.rgm-rmodal .rgm-rm__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--rg-ink) 60%, transparent); }
.rgm.rgm-rmodal .rgm-rm__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(630px, 100%);
  height: min(960px, calc(100vh - 48px));
  height: min(960px, calc(100dvh - 48px));
  margin: auto;
  overflow: hidden;
  border-radius: 16px;
  background: var(--rg-white);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--rg-ink) 30%, transparent);
}
.rgm.rgm-rmodal .rgm-rm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 16px;
  padding: 16px 20px 16px 28px;
  border-bottom: 1px solid var(--rg-line);
}
.rgm.rgm-rmodal .rgm-rm__title { min-width: 0; font: 600 22px/1.25 var(--rg-font-display); color: var(--rg-ink); }
.rgm.rgm-rmodal .rgm-rm__title:focus { outline: none; }
.rgm.rgm-rmodal .rgm-rm__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-tint);
  color: var(--rg-ink);
}
.rgm.rgm-rmodal .rgm-rm__close:hover { background: var(--rg-line); }
.rgm.rgm-rmodal .rgm-rm__close::before,
.rgm.rgm-rmodal .rgm-rm__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.rgm.rgm-rmodal .rgm-rm__close::after { transform: rotate(-45deg); }
.rgm.rgm-rmodal .rgm-rm__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px 32px;
}
.rgm.rgm-rmodal .rgm-rm__status { padding: 32px 0; font-size: 15px; color: var(--rg-muted); text-align: center; }
.rgm.rgm-rmodal .rgm-rm__status a { color: var(--rg-ink); text-decoration: underline; text-underline-offset: 3px; }
/* summary: big average + one star + "N ratings" | 5-to-1 histogram */
.rgm.rgm-rmodal .rgm-rm__summary { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 24px; }
.rgm.rgm-rmodal .rgm-rm__avg { text-align: center; }
.rgm.rgm-rmodal .rgm-rm__score { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rgm.rgm-rmodal .rgm-rm__star {
  display: inline-block;
  width: 30px;
  height: 28px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'><path fill='%23FFBC00' d='M8 .7l2.1 4.4 4.8.6-3.5 3.3.9 4.8L8 11.5l-4.3 2.3.9-4.8L1.1 5.7l4.8-.6z'/></svg>") center / contain no-repeat;
}
.rgm.rgm-rmodal .rgm-rm__num { font: 600 44px/1 var(--rg-font-display); color: var(--rg-ink); }
.rgm.rgm-rmodal .rgm-rm__ratings { margin-top: 8px; font-size: 13px; color: var(--rg-muted); }
.rgm.rgm-rmodal .rgm-rm__hist { display: grid; gap: 4px; }
.rgm.rgm-rmodal .rgm-rm__hrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 13px; line-height: 26px; }
.rgm.rgm-rmodal .rgm-rm__hlabel { color: var(--rg-ink); white-space: nowrap; }
.rgm.rgm-rmodal .rgm-rm__bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--rg-line); }
.rgm.rgm-rmodal .rgm-rm__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--rg-star); }
.rgm.rgm-rmodal .rgm-rm__bar > span.has-count { min-width: 4px; }
.rgm.rgm-rmodal .rgm-rm__pct { color: var(--rg-muted); text-align: right; white-space: nowrap; }
/* sort / filter chips: quiet 1px ink outlines; selected = ink label + a second inner ink line, never a fill */
.rgm.rgm-rmodal .rgm-rm__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.rgm.rgm-rmodal .rgm-rm__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-muted);
  font: 600 13px/1 var(--rgm-rtext);
  white-space: nowrap;
  transition: color .15s ease;
}
.rgm.rgm-rmodal .rgm-rm__chip:hover { color: var(--rg-ink); }
.rgm.rgm-rmodal .rgm-rm__chip[aria-pressed="true"],
.rgm.rgm-rmodal .rgm-rm__chip--select.is-active { color: var(--rg-ink); box-shadow: inset 0 0 0 1px var(--rg-ink); }
.rgm.rgm-rmodal .rgm-rm__chip:focus-visible,
.rgm.rgm-rmodal .rgm-rm__chip--select:has(select:focus-visible) { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.rgm.rgm-rmodal .rgm-rm__chip--select { padding: 0; overflow: hidden; }
.rgm.rgm-rmodal .rgm-rm__chip--select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.rgm.rgm-rmodal .rgm-rm__select {
  display: block;
  height: 100%;
  margin: 0;
  padding: 0 38px 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rgm.rgm-rmodal .rgm-rm__select:focus { outline: none; }
/* photo strip: every review photo, newest first; each jumps to its review */
.rgm.rgm-rmodal .rgm-rm__photos { position: relative; margin-top: 20px; }
.rgm.rgm-rmodal .rgm-rm__ptrack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 96px;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rgm.rgm-rmodal .rgm-rm__ptrack::-webkit-scrollbar { display: none; }
.rgm.rgm-rmodal .rgm-rm__ptrack:focus { outline: none; }
.rgm.rgm-rmodal .rgm-rm__ptrack:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 2px; }
.rgm.rgm-rmodal .rgm-rm__ptrack > li { scroll-snap-align: start; }
.rgm.rgm-rmodal .rgm-rm__photo { display: block; width: 96px; height: 96px; overflow: hidden; border-radius: 10px; background: var(--rg-tint); }
.rgm.rgm-rmodal .rgm-rm__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .25s ease; }
.rgm.rgm-rmodal .rgm-rm__photo:hover img { transform: scale(1.04); }
.rgm.rgm-rmodal .rgm-rm__photo:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: -2px; }
.rgm.rgm-rmodal .rgm-rm__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  transform: translateY(-50%);
}
.rgm.rgm-rmodal .rgm-rm__arrow:hover { background: var(--rg-tint); }
.rgm.rgm-rmodal .rgm-rm__arrow--prev { left: 8px; }
.rgm.rgm-rmodal .rgm-rm__arrow--next { right: 8px; }
.rgm.rgm-rmodal .rgm-rm__arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.rgm.rgm-rmodal .rgm-rm__arrow--prev::before { margin-left: 4px; transform: rotate(-135deg); }
/* review list */
.rgm.rgm-rmodal .rgm-rm__list { margin-top: 12px; }
.rgm.rgm-rmodal .rgm-rm__row { padding: 24px 0; border-top: 1px solid var(--rg-line); scroll-margin-top: 8px; }
.rgm.rgm-rmodal .rgm-rm__row:first-child { border-top: 0; }
.rgm.rgm-rmodal .rgm-rm__row:focus { outline: none; }
.rgm.rgm-rmodal .rgm-rm__row:focus-visible { outline: 2px solid var(--rg-ink); outline-offset: 4px; border-radius: 4px; }
.rgm.rgm-rmodal .rgm-rm__row.is-flash { animation: rgm-rm-flash 1.8s ease; }
@keyframes rgm-rm-flash { from { background: var(--rg-tint); } to { background: transparent; } }
.rgm.rgm-rmodal .rgm-rm__row .rgm-stars { display: block; margin-bottom: 10px; }
.rgm.rgm-rmodal .rgm-rm__who { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; }
.rgm.rgm-rmodal .rgm-rm__avatar {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rg-tint);
  color: var(--rg-ink);
  font: 500 14px/1 var(--rg-font-display);
}
.rgm.rgm-rmodal .rgm-rm__line { display: flex; align-items: center; min-width: 0; font-size: 13px; color: var(--rg-muted); }
.rgm.rgm-rmodal .rgm-rm__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--rg-ink); }
.rgm.rgm-rmodal .rgm-rm__date { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
.rgm.rgm-rmodal .rgm-rm__date::before { content: ""; width: 1px; height: 12px; margin: 0 5px; background: color-mix(in srgb, var(--rg-ink) 30%, var(--rg-white)); }
.rgm.rgm-rmodal .rgm-rm__item {
  display: block;
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--rg-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.rgm.rgm-rmodal a.rgm-rm__item:hover,
.rgm.rgm-rmodal a.rgm-rm__item:focus { color: var(--rg-ink); text-decoration: underline; }
.rgm.rgm-rmodal .rgm-rm__content { display: flex; align-items: flex-start; gap: 16px; margin-top: 12px; }
.rgm.rgm-rmodal .rgm-rm__text { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--rg-ink); white-space: pre-line; overflow-wrap: break-word; }
.rgm.rgm-rmodal .rgm-rm__thumb { position: relative; display: block; flex: none; width: 80px; height: 80px; margin-left: auto; overflow: hidden; border-radius: 8px; background: var(--rg-tint); }
.rgm.rgm-rmodal .rgm-rm__thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .25s ease; }
.rgm.rgm-rmodal .rgm-rm__thumb:hover img { transform: scale(1.04); }
.rgm.rgm-rmodal .rgm-rm__thumbmore {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rg-ink) 80%, transparent);
  color: var(--rg-white);
  font: 600 12px/20px var(--rgm-rtext);
}
.rgm.rgm-rmodal .rgm-rm__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--rg-line); }
.rgm.rgm-rmodal .rgm-rm__count { font-size: 13px; color: var(--rg-muted); }
.rgm.rgm-rmodal .rgm-rm__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid var(--rg-ink);
  border-radius: 999px;
  background: var(--rg-white);
  color: var(--rg-ink);
  font: 600 14px/1.2 var(--rgm-rtext);
  white-space: nowrap;
}
.rgm.rgm-rmodal .rgm-rm__more:hover { background: var(--rg-tint); }
@media (max-width: 767px), (pointer: coarse) {
  .rgm.rgm-rmodal .rgm-rm__chip { height: 44px; }
}
/* phones: a full-screen sheet */
@media (max-width: 640px) {
  .rgm.rgm-rmodal { padding: 0; }
  .rgm.rgm-rmodal .rgm-rm__panel { align-self: flex-start; width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
  .rgm.rgm-rmodal .rgm-rm__head { padding: 10px 12px 10px 16px; }
  .rgm.rgm-rmodal .rgm-rm__title { font-size: 20px; }
  .rgm.rgm-rmodal .rgm-rm__body { padding: 20px 16px 28px; }
  .rgm.rgm-rmodal .rgm-rm__summary { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .rgm.rgm-rmodal .rgm-rm__num { font-size: 36px; }
  .rgm.rgm-rmodal .rgm-rm__score { gap: 6px; }
  .rgm.rgm-rmodal .rgm-rm__star { width: 24px; height: 23px; }
  .rgm.rgm-rmodal .rgm-rm__hrow { grid-template-columns: 48px minmax(0, 1fr) 34px; gap: 10px; }
  .rgm.rgm-rmodal .rgm-rm__controls { margin-top: 24px; }
  .rgm.rgm-rmodal .rgm-rm__arrow--prev { left: 4px; }
  .rgm.rgm-rmodal .rgm-rm__arrow--next { right: 4px; }
  .rgm.rgm-rmodal .rgm-rm__thumb { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .rgm.rgm-rmodal .rgm-rm__row.is-flash { animation: none; }
  .rgm.rgm-rmodal .rgm-rm__photo img,
  .rgm.rgm-rmodal .rgm-rm__thumb img { transition: none; }
}

/* ===== agegate.css ===== */
/* Age gate (Age Verification plugin, .avwp-*) in the V2 theme. The plugin positions the box with inline
   top/left from its own JS; we re-centre it in CSS so our sizing can't push it off-centre. */
.avwp-av-overlay {
  background: rgba(41, 41, 41, 0.62) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.avwp-av {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  padding: 44px 32px 32px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  text-align: center;
  font-family: "Poppins", sans-serif;
  overflow: visible !important;
}
/* a stump peeks over the card's top edge (library art, hands on the edge) */
.avwp-av::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 128px;
  height: 110px;
  transform: translate(-50%, -88%);
  background: url("/wp-content/uploads/rg-home-v2/icons/webp-small/peek-thumbs-stump.webp") center bottom / contain no-repeat;
  pointer-events: none;
}
.avwp-av h2 {
  margin: 0 0 8px !important;
  font-family: "Jost", sans-serif !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  color: #292929 !important;
  text-transform: none !important;
}
.avwp-av p {
  margin: 0 0 24px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #6E6E6E !important;
}
.avwp-av p:last-child { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; }
.avwp-av strong { color: #292929 !important; font-weight: 600 !important; }
.avwp-av button {
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: "Jost", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.avwp-av button.yes { background: #79ED8F !important; color: #292929 !important; }
.avwp-av button.yes:hover { background: #6BDD81 !important; }
.avwp-av button.no { background: transparent !important; color: #292929 !important; box-shadow: inset 0 0 0 1.5px #EAEAEA; }
.avwp-av button.no:hover { box-shadow: inset 0 0 0 1.5px #292929; }
.avwp-av button:focus-visible { outline: 2px solid #292929; outline-offset: 3px; }

/* ===== wp-extra.css (WordPress only; appended by tools/wp_bundle.py, not part of the proto) =====
 * WebP Express (Alter HTML, picture tags) wraps every <img> of the live page in a bare <picture> and marks the
 * <img> .webpexpress-processed. The proto markup has the <img> as the direct child (flex slides, absolute card
 * images), so the inserted wrapper must not take part in layout. Our own <picture> elements are left alone. */
.rgn picture:has(> img.webpexpress-processed),
.rgm picture:has(> img.webpexpress-processed) { display: contents; }