/*
Theme Name: RMX
Theme URI: https://roastmyex.com
Author: RoastMyEx
Description: Anti-Valentine luxury-meets-trash. Custom classic theme for roastmyex.com — huge condensed type, pink glow, certificate gold, and a cockroach that will not sit still.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rmx
Tags: e-commerce, custom-colors, custom-menu, one-column
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  --rmx-bg:        #0d0b0e;
  --rmx-bg-2:      #141117;
  --rmx-card:      #1e1822;
  --rmx-card-hi:   #272031;
  --rmx-pink:      #ff2e63;
  /* Same hue, 12% darker. White text on #ff2e63 is only 3.6:1 — short of
     WCAG AA's 4.5:1 — so solid pink fills carrying white text use this
     (4.55:1) instead. The bright pink stays for borders, glows, and headings
     on dark, where contrast is already comfortable. */
  --rmx-pink-solid: #e02857;
  --rmx-pink-dim:  #c41d4a;
  --rmx-cream:     #f5efe6;
  --rmx-muted:     #a89ba8;
  --rmx-gold:      #c9a227;
  --rmx-gold-lt:   #e6c65c;
  --rmx-line:      rgba(255, 46, 99, 0.22);
  --rmx-line-soft: rgba(245, 239, 230, 0.10);

  --rmx-glow:      0 0 40px rgba(255, 46, 99, 0.45);
  --rmx-glow-sm:   0 6px 24px rgba(255, 46, 99, 0.35);
  --rmx-shadow:    0 18px 50px rgba(0, 0, 0, 0.55);

  --rmx-display:   'Anton', 'Arial Narrow', Impact, sans-serif;
  --rmx-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rmx-script:    'Pinyon Script', 'Snell Roundhand', cursive;

  --rmx-radius:    18px;
  --rmx-radius-sm: 12px;
  --rmx-wrap:      1180px;
  --rmx-gut:       clamp(20px, 5vw, 48px);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--rmx-bg);
  color: var(--rmx-cream);
  font-family: var(--rmx-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--rmx-pink); text-decoration: none; transition: color .18s ease; }
a:hover { color: #ff6a8f; }

h1, h2, h3, h4 {
  font-family: var(--rmx-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(2.6rem, 7.5vw, 5.6rem); }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--rmx-pink); color: #fff; }

:focus-visible {
  outline: 3px solid var(--rmx-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

.rmx-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--rmx-pink-solid); color: #fff;
  padding: 12px 20px; z-index: 999; border-radius: 0 0 10px 0;
}
.rmx-skip:focus { left: 0; color: #fff; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.rmx-wrap {
  width: 100%;
  max-width: var(--rmx-wrap);
  margin: 0 auto;
  padding-inline: var(--rmx-gut);
}

.rmx-section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.rmx-section--tight { padding-block: clamp(48px, 6vw, 80px); }

/* Anchor jumps would otherwise park the section top behind the sticky header. */
.rmx-section[id] { scroll-margin-top: 74px; }

.rmx-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 5vw, 60px); }
.rmx-head p { color: var(--rmx-muted); font-size: 1.05rem; }

.rmx-grid { display: grid; gap: clamp(18px, 2.5vw, 28px); }
.rmx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rmx-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .rmx-grid--3, .rmx-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   4. TYPE HELPERS
   ============================================================ */
.rmx-pink  { color: var(--rmx-pink); }
.rmx-gold  { color: var(--rmx-gold); }
.rmx-muted { color: var(--rmx-muted); }

.rmx-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--rmx-body);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rmx-pink);
  background: rgba(255, 46, 99, .10);
  border: 1px solid var(--rmx-line);
  padding: 8px 16px;
  border-radius: 999px;
}

.rmx-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rmx-muted);
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.rmx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--rmx-body);
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.rmx-btn--primary {
  background: var(--rmx-pink-solid);
  color: #fff;
  box-shadow: var(--rmx-glow-sm);
}
.rmx-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(255, 46, 99, .55);
}

.rmx-btn--ghost {
  background: transparent;
  color: var(--rmx-cream);
  border-color: var(--rmx-line);
}
.rmx-btn--ghost:hover {
  color: var(--rmx-cream);
  border-color: var(--rmx-pink);
  transform: translateY(-2px);
  background: rgba(255, 46, 99, .07);
}

.rmx-btn--light {
  background: var(--rmx-cream); color: var(--rmx-bg);
}
.rmx-btn--light:hover { color: var(--rmx-bg); transform: translateY(-2px); }

.rmx-btn--sm { padding: 11px 22px; font-size: .85rem; }
.rmx-btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .rmx-btn:hover { transform: none; }
}

/* ============================================================
   6. CARDS
   ============================================================ */
.rmx-card {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  padding: clamp(24px, 3vw, 34px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rmx-card:hover {
  transform: translateY(-6px);
  border-color: var(--rmx-line);
  box-shadow: var(--rmx-shadow);
}
@media (prefers-reduced-motion: reduce) {
  .rmx-card:hover { transform: none; }
}

.rmx-card h3 { margin-bottom: .5em; }
.rmx-card p { color: var(--rmx-muted); font-size: .97rem; }

/* ============================================================
   7. HEADER / NAV
   ============================================================ */
.rmx-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(13, 11, 14, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rmx-line-soft);
}

.rmx-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 74px;
}

.rmx-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--rmx-display);
  /* "ROACH SOMEONE PROPERLY" is longer again than the "COCKROAST SOMEONE" it
     replaced, and the logo is nowrap, so it has to give more ground on a phone
     or it pushes the cart and the burger off the row. */
  font-size: clamp(.9rem, 3.5vw, 1.5rem); text-transform: uppercase;
  color: var(--rmx-cream); letter-spacing: .02em;
  white-space: nowrap;
}
.rmx-logo:hover { color: var(--rmx-cream); }
.rmx-logo svg { width: 30px; height: auto; }
.rmx-logo span { color: var(--rmx-pink); }

.rmx-nav { margin-left: auto; }
.rmx-nav > ul {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0; padding: 0;
}
.rmx-nav li { position: relative; }
.rmx-nav a {
  color: var(--rmx-cream);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  position: relative; padding-block: 6px;
}
.rmx-nav > ul > li > a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--rmx-pink);
  transition: width .22s ease;
}
.rmx-nav > ul > li > a:hover::after,
.rmx-nav > ul > .current-menu-item > a::after,
.rmx-nav > ul > .current-menu-ancestor > a::after { width: 100%; }

/* --- Dropdown ------------------------------------------------ */

/* The caret sits inside the parent link so it inherits the hover colour and
   never becomes its own tab stop. */
.rmx-nav .menu-item-has-children > a::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px; margin: -3px 0 0 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  opacity: .6;
  transition: opacity .2s ease, transform .2s ease;
}
.rmx-nav .menu-item-has-children:hover > a::before,
.rmx-nav .menu-item-has-children:focus-within > a::before { opacity: 1; }

.rmx-nav .sub-menu {
  position: absolute; top: 100%; left: -12px;
  min-width: 250px;
  list-style: none; margin: 0;
  /* Top padding doubles as the bridge between the link and the panel — with a
     gap here the panel closes the moment the pointer leaves the link. */
  padding: 14px 8px 8px;
  background: var(--rmx-bg-2);
  border: 1px solid var(--rmx-line);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 95;
}
.rmx-nav .menu-item-has-children:hover > .sub-menu,
.rmx-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.rmx-nav .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: .8rem; letter-spacing: .05em;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.rmx-nav .sub-menu a:hover,
.rmx-nav .sub-menu a:focus-visible,
.rmx-nav .sub-menu .current-menu-item > a {
  background: rgba(255, 46, 99, .12);
  color: var(--rmx-pink);
}

/* Injected by rmx.js; only ever used in the mobile drawer. */
.rmx-subtoggle { display: none; }

.rmx-header__actions { display: flex; align-items: center; gap: 14px; }

/* --- Desktop header width ------------------------------------
   The nav is seven items wide once the language switcher is counted, and at
   the 1180px content measure it needed 1169px of the 1084px it had. Flex took
   the difference out of the two longest items, so SHOP and THE FARM/LA FINCA
   rendered as two lines each while their neighbours stayed one — which is what
   read as the menu being out of alignment, rather than anything being mis-set.

   The header alone gets a wider measure; the page content below keeps 1180.
   nowrap on the top-level links makes the misalignment unrepresentable rather
   than merely unlikely, and the gap tightens before anything else gives, so a
   longer translated label has somewhere to go. Desktop only — below 900px the
   nav is the burger panel and none of this applies. */
@media (min-width: 901px) {
  .rmx-header .rmx-header__inner {
    max-width: min(1360px, 100%);
    gap: clamp(12px, 1.6vw, 24px);
  }
  .rmx-nav > ul { gap: clamp(12px, 1.5vw, 30px); }
  .rmx-nav > ul > li > a { white-space: nowrap; }
}

/* nowrap turns "it wrapped" into "it overflows", which is worse, so the band
   between the burger breakpoint and a comfortable desktop has to actually give
   ground: tighter gutters, a smaller logo, and a smaller nav type scale. Every
   number below was measured against the real menu at 901, 960, 1024 and 1200. */
@media (min-width: 901px) and (max-width: 1200px) {
  .rmx-header .rmx-header__inner { padding-inline: clamp(16px, 2.5vw, 32px); }
  .rmx-logo { font-size: 1.1rem; }
  .rmx-logo svg { width: 24px; }
  .rmx-nav a { font-size: .76rem; letter-spacing: .04em; }
}

@media (min-width: 901px) and (max-width: 1040px) {
  .rmx-logo { font-size: .98rem; }
  .rmx-logo svg { width: 21px; }
  .rmx-nav a { font-size: .7rem; letter-spacing: .02em; }
  .rmx-nav > ul { gap: 11px; }
}

.rmx-cart {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rmx-line-soft);
  border-radius: 999px;
  color: var(--rmx-cream);
  transition: border-color .2s ease, background .2s ease;
}
.rmx-cart:hover { border-color: var(--rmx-pink); background: rgba(255,46,99,.08); color: var(--rmx-cream); }
.rmx-cart__count {
  position: absolute; top: -5px; right: -5px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--rmx-pink-solid); color: #fff;
  font-size: .68rem; font-weight: 800;
  border-radius: 999px;
  border: 2px solid var(--rmx-bg);
}

.rmx-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--rmx-line-soft);
  border-radius: 999px;
  color: var(--rmx-cream);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.rmx-burger span,
.rmx-burger span::before,
.rmx-burger span::after {
  content: ''; display: block;
  width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.rmx-burger span::before { transform: translateY(-6px); }
.rmx-burger span::after  { transform: translateY(4px); }
.rmx-burger[aria-expanded="true"] span { background: transparent; }
.rmx-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.rmx-burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 860px) {
  .rmx-burger { display: grid; }
  /* The drawer hangs off the right edge, under the burger that opened it,
     rather than spanning the whole width: the tap that opens it and the items
     it reveals are then on the same side of the phone. The width is capped so
     it stays a panel; on a narrow phone the cap is the viewport less a sliver,
     so it still reads as something that dropped out of the button. */
  .rmx-nav {
    position: fixed; inset: 74px 0 auto auto;
    width: min(340px, 88vw);
    background: var(--rmx-bg-2);
    border-left: 1px solid var(--rmx-line);
    border-bottom: 1px solid var(--rmx-line);
    border-bottom-left-radius: 18px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
    padding: 18px var(--rmx-gut) 26px;
    margin: 0;
    display: none;
  }
  .rmx-nav.is-open { display: block; }
  /* Labels ranged right, against the edge the panel is pinned to, so they
     line up under the burger instead of pointing away from it. */
  .rmx-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .rmx-nav li { width: 100%; }
  .rmx-nav a {
    display: block; padding: 13px 0;
    font-size: 1.05rem;
    text-align: right;
    border-bottom: 1px solid var(--rmx-line-soft);
  }
  .rmx-nav a::after { display: none; }

  /* In the drawer the submenu is a plain nested list, opened by tapping the
     caret button — tapping "Shop" itself still goes to the shop page. */
  .rmx-nav .menu-item-has-children > a::before { display: none; }
  .rmx-nav .menu-item-has-children > a { padding-left: 52px; padding-right: 0; }

  .rmx-subtoggle {
    display: grid; place-items: center;
    position: absolute; top: 2px; left: 0;
    width: 44px; height: 44px;
    padding: 0;
    background: transparent; border: 0;
    color: var(--rmx-cream);
    cursor: pointer;
  }
  .rmx-subtoggle span {
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .22s ease;
  }
  .rmx-subtoggle[aria-expanded="true"] span { transform: translateY(2px) rotate(-135deg); }

  .rmx-nav .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 2px 16px 8px 0;
    background: transparent;
    border: 0; border-radius: 0;
    box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    transition: none;
  }
  .rmx-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
  .rmx-nav .sub-menu a {
    padding: 11px 0;
    font-size: .92rem;
    color: var(--rmx-muted);
    border-radius: 0;
    white-space: normal;
  }
  .rmx-nav .sub-menu a:hover,
  .rmx-nav .sub-menu a:focus-visible,
  .rmx-nav .sub-menu .current-menu-item > a { background: transparent; }
}

/* ============================================================
   8. HERO
   ============================================================ */
.rmx-hero {
  position: relative;
  padding-block: clamp(60px, 9vw, 118px) clamp(64px, 9vw, 110px);
  overflow: hidden;
  text-align: center;
  /* A backdrop video needs room to be seen. svh rather than vh so mobile
     browser chrome collapsing does not cause a jump. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fallback for browsers without svh. */
@supports not (height: 100svh) {
  .rmx-hero { min-height: 100vh; }
}

.rmx-hero::before {
  content: '';
  z-index: 1;
  position: absolute;
  top: -18%; left: 50%;
  width: min(1100px, 145vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
      rgba(255, 46, 99, .30) 0%,
      rgba(255, 46, 99, .12) 34%,
      rgba(255, 46, 99, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

/* Stacking: video backdrop 0, pink glow 1, content 2. */
.rmx-hero > * { position: relative; z-index: 2; }

.rmx-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* .rmx-hero__media is only a box. It used to paint the poster itself, and
   carry the blur, the dimming and the 1.05 scale — but the player is its
   child, so every one of those landed on the video too: the desktop embed was
   being blurred by 1.5px and scaled past its own pixels before anyone saw a
   frame of it. The poster is painted by ::before now, which is a sibling of
   the player rather than its parent, so softening the still leaves the moving
   picture alone. */
.rmx-hero__media {
  position: absolute;
  inset: 0;
}

/* The still. Painted here rather than through <video poster> because the
   player deliberately has no src until after load, and a source-less video
   does not reliably render its poster. */
.rmx-hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--rmx-hero-poster);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  opacity: .58;
  filter: saturate(.85) contrast(1.04) blur(1.5px);
  transform: scale(1.05); /* hides blur bleed at the edges */
}

/* The dimming the parent used to hand down. On the player itself now, so it
   can be tuned without touching the poster. */
.rmx-hero__yt { opacity: .62; }

/* Both cuts are fitted inside the hero rather than cropped to fill it, so
   whatever they leave over is still showing the poster. Blurred hard and
   dropped to a third so it reads as a glow around the picture instead of a
   second photograph arguing with it. */
.rmx-hero__media:has(.rmx-hero__yt :is(video, iframe))::before {
  filter: saturate(.85) contrast(1.04) blur(18px);
  opacity: .34;
  transform: scale(1.08);
}

/* On a portrait phone the hero box is 9:16 and the poster is shown close to
   1:1 with the viewport, which is the one case where the default 480x854 file
   is visibly soft — blur(1.5px) hides a lot, but not a 3x upscale. Serve the
   922x1652 criadero still there instead. Keyed on orientation as well as
   width so a landscape phone, where the poster is cropped to a band and the
   detail is thrown away anyway, keeps the smaller download. The video, once
   rmx.js injects it, covers both. */
@media (max-width: 780px) and (orientation: portrait) {
  .rmx-hero__media::before {
    background-image: var(--rmx-hero-poster-portrait, var(--rmx-hero-poster));
    background-position: center center;
  }
}

/* YouTube iframes letterbox their own content, so an iframe sized to the box
   would show bars. Instead it is oversized past the container in whichever
   dimension is short, pushing the bars outside the overflow:hidden parent —
   the iframe equivalent of object-fit: cover. */
.rmx-hero__yt {
  position: absolute;
  inset: 0;
}

.rmx-hero__yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* The embed is 16:9 and the hero box almost never is, so one of the two has
   to give. It used to be the video: height:100% plus min-width:100% oversized
   the iframe until it covered the box — 1653px of iframe across a 1280px
   window — and YouTube's stream was then upscaled by a third and cropped left
   and right on top of that. Hence the "big pixels".

   It is fitted instead. The frame is whole, it is never asked for more pixels
   than it has, and the poster behind fills what is left over. Which dimension
   binds depends on the window: wider than 16:9 and it is the height,
   otherwise the width.

   Both cuts are 16:9 — the mobile one is delivered as a Short, but that only
   describes its duration, not its shape. */
.rmx-hero__yt iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media (min-aspect-ratio: 16 / 9) {
  .rmx-hero__yt iframe {
    width: auto;
    height: 100%;
    max-width: 100%;
  }
}

@supports not (aspect-ratio: 16 / 9) {
  .rmx-hero__yt iframe { width: 100vw; height: 56.25vw; }
}

/* The phone cut is a real <video>, so it needs none of the iframe arithmetic
   above — it fills the box and object-fit does the rest. contain, not cover:
   the hero is sized to this file's own 9:16 on a phone (see the 760px block
   below), which makes the two identical there, and anywhere else it
   letterboxes into the scrim instead of throwing away the bottom of every
   frame. */
.rmx-hero__yt video {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border: 0;
}

.rmx-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(13, 11, 14, .55) 0%,
      rgba(13, 11, 14, .30) 34%,
      rgba(13, 11, 14, .76) 78%,
      rgba(13, 11, 14, .97) 100%),
    radial-gradient(ellipse 72% 56% at 50% 44%,
      rgba(13, 11, 14, .50) 0%,
      rgba(13, 11, 14, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* Still frame only; rmx.js also declines to mount the player at all. */
  .rmx-hero__media::before { opacity: .42; }
}

.rmx-hero h1 { margin: 26px 0 22px; }
.rmx-hero h1 .line-2 { color: var(--rmx-pink); display: block; }

.rmx-hero__sub {
  max-width: 620px; margin: 0 auto;
  color: #fff; font-size: clamp(1rem, 1.6vw, 1.13rem);
}

.rmx-hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 34px;
}

.rmx-proof {
  margin-top: 26px;
  font-size: .88rem; color: var(--rmx-muted);
  letter-spacing: .04em;
}
.rmx-proof .stars { color: var(--rmx-gold); letter-spacing: .12em; }

/* --- Roach mascot --- */
.rmx-roach {
  width: clamp(120px, 20vw, 190px);
  margin: 0 auto;
  color: var(--rmx-pink);
  filter: drop-shadow(0 0 22px rgba(255, 46, 99, .5));
  animation: rmx-skitter 3.4s ease-in-out infinite;
}
@keyframes rmx-skitter {
  0%, 100% { transform: translateX(-14px) rotate(-2deg); }
  50%      { transform: translateX(14px)  rotate(2deg); }
}
.rmx-roach__antenna { animation: rmx-wiggle 1.6s ease-in-out infinite; transform-origin: 50% 82%; }
@keyframes rmx-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rmx-roach, .rmx-roach__antenna { animation: none; }
}

/* --- Proof band ---
   The stars and the mascot used to close the hero. They open How it works
   now, so they need their own container: a column, so the roach sits over the
   rating rather than beside it, and space underneath so the pair reads as the
   top of this section instead of as something the hero left behind. */
.rmx-proofband {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.rmx-proofband .rmx-proof { margin-top: 0; }

/* --- Phone: the hero takes the shape of its backdrop cut ---
   assets/video/hero-product.mp4 is 720x1280. The hero was 100svh tall with
   that file laid over it full-bleed, so the box and the frame disagreed about
   shape and everything below the middle of the picture was thrown away.
   Under 760px - the same breakpoint rmx.js uses to decide to mount the phone
   cut - the hero takes the video's own 9:16 instead, so the whole frame is on
   screen with nothing cropped.

   The min-height is what makes the contain above behave like a cover: box and
   frame agree, so there is nothing to letterbox. Browsers without :has(), and
   any viewport where the copy grows the hero taller than 9:16, get bands of
   scrim top and bottom rather than a crop. */
@media (max-width: 760px) {
  .rmx-hero { padding-block: clamp(36px, 7vw, 64px); }

  /* Half the scrim. The desktop values were set against a poster that was
     mostly there to be dark; the phone cut is the actual film of the criadero
     and at .55/.30/.76 of black over it you could not see it was moving.
     Every stop is halved — except the last twelve per cent, which still ramps
     to opaque so the hero dissolves into the section under it instead of
     ending on a visible line. */
  .rmx-hero__bg::after {
    background:
      linear-gradient(180deg,
        rgba(13, 11, 14, .28) 0%,
        rgba(13, 11, 14, .15) 34%,
        rgba(13, 11, 14, .38) 78%,
        rgba(13, 11, 14, .55) 88%,
        rgba(13, 11, 14, .97) 100%),
      radial-gradient(ellipse 72% 56% at 50% 44%,
        rgba(13, 11, 14, .25) 0%,
        rgba(13, 11, 14, 0) 100%);
  }

  .rmx-hero:has(.rmx-hero__yt video) { min-height: calc(100vw * 16 / 9); }

}

/* ============================================================
   9. STEPS
   ============================================================ */
.rmx-step__num {
  font-family: var(--rmx-display);
  font-size: 2.6rem; line-height: 1;
  color: var(--rmx-pink);
  opacity: .85;
  margin-bottom: 14px;
  display: block;
}


/* ============================================================
   9b. AUDIENCE ROW  (hero)
   ------------------------------------------------------------
   Reconciles the brand name with the headline. RoastMyEx sells to people
   buying for a friend's birthday as much as to people buying about an ex, and
   without this row the visitor spends their first seconds working out which
   one the site is for. See the note in front-page.php.

   A <ul> because it is a list of who, not decoration: a screen reader should
   hear six items, not one run-on sentence. The bullets are removed rather than
   the semantics.
   ============================================================ */
.rmx-audience {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 26px auto 0;
  padding: 0;
  max-width: 720px;
}

.rmx-audience li {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rmx-cream);
  /* Quieter than .rmx-kicker on purpose. These sit directly under the primary
     button, and six pink pills there would out-shout it. */
  background: rgba(245, 239, 230, .06);
  border: 1px solid var(--rmx-line-soft);
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
}

/* The last item is the catch-all — "whoever earned it" — and is the one that
   gives permission to everyone the other five did not name. */
.rmx-audience li:last-child {
  color: var(--rmx-pink);
  border-color: var(--rmx-line);
  background: rgba(255, 46, 99, .09);
}

@media (max-width: 520px) {
  .rmx-audience { gap: 7px 8px; margin-top: 20px; }
  .rmx-audience li { font-size: .7rem; padding: 6px 12px; }
}


/* ============================================================
   9c. STEP COLUMNS  (how it works)
   ------------------------------------------------------------
   Three equal columns, each a pill, a heading, a line of copy and a
   photograph, closing on one shared button underneath.

   Layout note that matters: the photograph is LAST in each card and the cards
   stretch to equal height, so the images only line up along their tops if the
   text above them is the same height in every column. It is not — three
   headings and three sentences never wrap identically — so the media block is
   pushed to the bottom with `margin-top: auto` and the row of pictures lands
   on one baseline regardless of how the copy breaks. Remove that and the
   columns start looking subtly broken at some widths and fine at others,
   which is the worst kind of bug to be handed.

   It reuses .rmx-card, so hover lift, radius, border and padding all come
   from the one place they are defined.
   ============================================================ */
.rmx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
  /* Counter-reset is not needed — the pills carry their own labels as text so
     they survive translation and are readable to a screen reader. The <ol> is
     for order, not for numbering. */
}

.rmx-steps__card {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.rmx-steps__pill {
  align-self: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rmx-pink);
  background: rgba(255, 46, 99, .10);
  border: 1px solid var(--rmx-line);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 18px;
}

.rmx-steps__card h3 { margin-bottom: .55em; }

.rmx-steps__card p {
  color: var(--rmx-muted);
  font-size: .97rem;
  /* Stops a short sentence from stretching the full card width and reading as
     a caption rather than a paragraph. */
  max-width: 34ch;
  margin-inline: auto;
}

.rmx-steps__media {
  margin-top: auto;      /* see the layout note above */
  padding-top: 24px;
}

.rmx-steps__img {
  width: 100%;
  /* One ratio for all three, so a portrait photo of a nameplate and a
     landscape scan of a certificate still make a tidy row. The certificate is
     the one that suffers from the crop, which is why the same image is shown
     whole, and zoomable, in the Keepsake section further down. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rmx-radius-sm);
  border: 1px solid var(--rmx-line-soft);
  background: var(--rmx-bg-2);
}

/* A tall photograph whose subject sits low in the frame. object-fit: cover
   crops from the centre by default, which on the framed-certificate desk shot
   fills the card with bookshelves and cuts the certificates off at the knees.
   92% pulls the crop window down over them and still keeps the desk edge. */
.rmx-steps__img--low { object-position: center 92%; }

.rmx-steps__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 46px);
}

@media (max-width: 900px) {
  .rmx-steps { grid-template-columns: 1fr; }
  /* Stacked, the pictures no longer need to line up with each other, and a
     full 4:3 photograph between every paragraph turns the section into a very
     long scroll on a phone. */
  .rmx-steps__img { aspect-ratio: 16 / 9; }
  .rmx-steps__card p { max-width: none; }
}

/* ============================================================
   10. PRICING
   ============================================================ */
.rmx-tier { display: flex; flex-direction: column; position: relative; }

.rmx-tier--featured {
  border-color: var(--rmx-pink);
  background: linear-gradient(180deg, var(--rmx-card-hi), var(--rmx-card));
  box-shadow: 0 0 0 1px var(--rmx-line), 0 24px 60px rgba(255, 46, 99, .16);
}

.rmx-tier__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--rmx-pink-solid); color: #fff;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--rmx-glow-sm);
}

/* The photograph on each once-off tier card. Same treatment as the
   subscription card's .rmx-sub__media, minus the caption — three of these sit
   side by side and three captions turned the row into a wall of text.
   object-fit: cover against a fixed 16/9 box is what keeps the three cards'
   prices on the same line whatever each product's featured image measures. */
.rmx-tier__media {
  margin: 12px 0 4px;
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  overflow: hidden;
}

.rmx-tier__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.rmx-tier__price {
  font-family: var(--rmx-display);
  font-size: 3.4rem; line-height: 1;
  color: var(--rmx-cream);
  margin: 6px 0 4px;
}
.rmx-tier__price sup { font-size: 1.4rem; vertical-align: super; color: var(--rmx-muted); }

.rmx-tier ul {
  list-style: none; padding: 0;
  margin: 20px 0 26px;
  display: grid; gap: 11px;
  flex: 1;
}
.rmx-tier li {
  position: relative; padding-left: 28px;
  color: var(--rmx-muted); font-size: .94rem; line-height: 1.5;
}
.rmx-tier li::before {
  content: '';
  position: absolute; left: 0; top: .42em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--rmx-pink);
  border-bottom: 2px solid var(--rmx-pink);
  transform: rotate(-45deg);
}

/* ============================================================
   11. CERTIFICATE PREVIEW
   ============================================================ */
.rmx-certwrap { display: grid; place-items: center; perspective: 1000px; }

.rmx-cert {
  position: relative;
  width: min(980px, 100%);
  margin: 0;
  border-radius: 4px;
  transform: rotate(-1.5deg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.rmx-cert__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

@media (max-width: 700px) {
  .rmx-cert { transform: none; }
}

/* The whole certificate is the zoom trigger, so the button has to be invisible
   as a button. */
.rmx-cert__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  font: inherit;
  color: inherit;
}
.rmx-cert__zoom:focus-visible { outline: 3px solid var(--rmx-pink); outline-offset: 3px; }

.rmx-cert__hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 15px;
  background: rgba(13, 11, 14, .82);
  border: 1px solid var(--rmx-line);
  border-radius: 999px;
  color: var(--rmx-cream);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* On a desktop the spread is already legible, so the prompt would be noise. */
@media (min-width: 701px) {
  .rmx-cert__hint { display: none; }
}

/* ============================================================
   11b. IMAGE LIGHTBOX
   ============================================================ */
.rmx-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 9, .96);
  /* Panning the zoomed image is plain overflow scrolling — it works with a
     finger, a trackpad and a scrollbar, and needs no gesture handling. */
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.rmx-lb[hidden] { display: none; }

.rmx-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100vh;
  width: auto;
  height: auto;
  margin: auto;
  cursor: zoom-in;
}

/* Zoomed: drop the fit constraints so the image overflows and the container
   scrolls. 200% of the viewport width makes the spread's body copy readable on
   a phone without needing pinch gestures. */
.rmx-lb.is-zoomed .rmx-lb__img {
  max-width: none;
  max-height: none;
  width: 200vw;
  margin: 0;
  cursor: zoom-out;
}

.rmx-lb__close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(30, 24, 34, .9);
  border: 1px solid var(--rmx-line);
  border-radius: 50%;
  color: var(--rmx-cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.rmx-lb__close:hover { background: var(--rmx-pink-solid); border-color: var(--rmx-pink-solid); color: #fff; }
.rmx-lb__close:focus-visible { outline: 3px solid var(--rmx-pink); outline-offset: 2px; }

body.rmx-lb-open { overflow: hidden; }

/* ============================================================
   12. TESTIMONIALS
   ============================================================ */
/* The roach the review is about. A fixed 16:9 window with object-fit cover, so
   the handful of portrait sources in the library crop to the same band as the
   landscape ones instead of making one card in the row twice as tall. */
.rmx-quote__media {
  margin: -4px 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--rmx-bg-2);
  border: 1px solid var(--rmx-line-soft);
}
.rmx-quote__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 55%;
}

.rmx-quote__stars { color: var(--rmx-gold); letter-spacing: .16em; font-size: .9rem; margin-bottom: 12px; }
.rmx-quote p { color: var(--rmx-cream); font-size: 1.02rem; }
.rmx-quote footer {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--rmx-line-soft);
  font-size: .84rem; color: var(--rmx-muted);
}
.rmx-quote cite { font-style: normal; font-weight: 700; color: var(--rmx-cream); display: block; }
.rmx-quote__handle { display: block; color: var(--rmx-pink); font-size: .82rem; margin-top: 1px; }
.rmx-quote__tier { display: block; margin-top: 4px; }

/* Reviews slider. Twenty-odd cards will not sit in a grid, so they run on one
   horizontal snap track. Full-bleed on purpose: a card cut off by the right
   edge is the only affordance that reliably says "swipe". */
.rmx-slider { position: relative; }

.rmx-slider__track {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Breaks out of .rmx-wrap to the full viewport, then re-indents its contents
     so the first card still lines up with the heading above it. */
  padding-inline: max(var(--rmx-gut), calc((100vw - var(--rmx-wrap)) / 2 + var(--rmx-gut)));
  padding-block: 6px 10px;
}
.rmx-slider__track::-webkit-scrollbar { display: none; }
.rmx-slider__track:focus-visible { outline: 3px solid var(--rmx-pink); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .rmx-slider__track { scroll-behavior: auto; }
}

.rmx-slider__track .rmx-quote {
  flex: 0 0 min(370px, 84vw);
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* Pushes every footer to the same baseline regardless of quote length. */
.rmx-slider__track .rmx-quote footer { margin-top: auto; }

.rmx-slider__nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.rmx-slider__btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: 50%;
  color: var(--rmx-cream);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.rmx-slider__btn:hover { background: var(--rmx-card-hi); border-color: var(--rmx-line); }
.rmx-slider__btn:focus-visible { outline: 3px solid var(--rmx-pink); outline-offset: 2px; }
.rmx-slider__btn[disabled] { opacity: .35; cursor: default; }
.rmx-slider__btn[disabled]:hover { background: var(--rmx-card); border-color: var(--rmx-line-soft); }

/* ============================================================
   13. FAQ
   ============================================================ */
.rmx-faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }

.rmx-faq details {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  overflow: hidden;
  transition: border-color .2s ease;
}
.rmx-faq details[open] { border-color: var(--rmx-line); }

.rmx-faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 56px 20px 24px;
  font-weight: 700; font-size: 1.02rem;
  position: relative;
}
.rmx-faq summary::-webkit-details-marker { display: none; }
.rmx-faq summary::after {
  content: '+';
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--rmx-display);
  font-size: 1.5rem; color: var(--rmx-pink);
  transition: transform .22s ease;
  line-height: 1;
}
.rmx-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.rmx-faq summary:hover { color: var(--rmx-pink); }

.rmx-faq__body { padding: 0 24px 22px; color: var(--rmx-muted); font-size: .97rem; }

/* ============================================================
   14. CTA BAND
   ============================================================ */
.rmx-band {
  background: linear-gradient(115deg, var(--rmx-pink-dim) 0%, var(--rmx-pink) 55%, #ff5f86 100%);
  text-align: center;
  color: #fff;
  padding-block: clamp(56px, 8vw, 92px);
}
.rmx-band h2 { color: #fff; }
.rmx-band h2 .line-2 { display: block; opacity: .82; }
.rmx-band p { color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 28px; }

/* ============================================================
   15. FOOTER
   ============================================================ */
.rmx-footer {
  background: var(--rmx-bg-2);
  border-top: 1px solid var(--rmx-line-soft);
  padding-block: clamp(48px, 6vw, 72px) 34px;
  font-size: .9rem;
}
.rmx-footer__top {
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: flex-start; justify-content: space-between;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rmx-line-soft);
}
.rmx-footer__brand { max-width: 340px; }
.rmx-footer__brand p { color: var(--rmx-muted); margin-top: 12px; font-size: .88rem; }

.rmx-footer nav ul {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  list-style: none; margin: 0; padding: 0;
}
.rmx-footer nav a {
  color: var(--rmx-cream); font-size: .88rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.rmx-footer nav a:hover { color: var(--rmx-pink); }

.rmx-footer__legal {
  margin-top: 26px;
  color: var(--rmx-muted);
  font-size: .78rem; line-height: 1.7;
  max-width: 900px;
}
.rmx-footer__copy { margin-top: 18px; color: var(--rmx-muted); font-size: .8rem; }

/* ============================================================
   16. REGISTRY
   ============================================================ */
.rmx-registry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}

.rmx-roachcard {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  padding: 26px 24px;
  transition: transform .25s ease, border-color .25s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.rmx-roachcard:hover { transform: translateY(-5px); border-color: var(--rmx-line); }
.rmx-roachcard__name {
  font-family: var(--rmx-display);
  font-size: 1.5rem; text-transform: uppercase;
  color: var(--rmx-cream); line-height: 1.05;
}
.rmx-roachcard__meta {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rmx-muted);
}
.rmx-roachcard__roast {
  color: var(--rmx-muted); font-size: .94rem;
  border-left: 2px solid var(--rmx-pink);
  padding-left: 14px; font-style: italic;
}
.rmx-roachcard__cert {
  margin-top: auto; padding-top: 12px;
  font-size: .7rem; letter-spacing: .12em;
  color: var(--rmx-gold); text-transform: uppercase;
}

.rmx-empty {
  text-align: center; padding: 60px 20px;
  color: var(--rmx-muted);
  border: 1px dashed var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
}

/* ============================================================
   17. PAGE / POST CONTENT
   ============================================================ */
.rmx-page { padding-block: clamp(48px, 7vw, 90px); }
.rmx-page__head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }

.rmx-prose { max-width: 760px; margin: 0 auto; }
.rmx-prose h2 { margin-top: 1.8em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.rmx-prose h3 { margin-top: 1.6em; }
.rmx-prose ul, .rmx-prose ol { color: var(--rmx-muted); padding-left: 1.25em; }
.rmx-prose li { margin-bottom: .55em; }
.rmx-prose p { color: var(--rmx-muted); }
.rmx-prose strong { color: var(--rmx-cream); }
.rmx-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--rmx-pink);
  color: var(--rmx-cream); font-style: italic;
}
.rmx-prose hr { border: 0; border-top: 1px solid var(--rmx-line-soft); margin: 2.4em 0; }
.rmx-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.rmx-prose th, .rmx-prose td {
  border: 1px solid var(--rmx-line-soft); padding: 10px 14px; text-align: left;
}
.rmx-prose th { background: var(--rmx-card); color: var(--rmx-cream); }

.rmx-pagination {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 48px; flex-wrap: wrap;
}
.rmx-pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--rmx-line-soft); border-radius: 999px;
  color: var(--rmx-cream); font-weight: 600; font-size: .9rem;
}
.rmx-pagination .page-numbers:hover { border-color: var(--rmx-pink); color: var(--rmx-pink); }
.rmx-pagination .page-numbers.current {
  background: var(--rmx-pink-solid); border-color: var(--rmx-pink-solid); color: #fff;
}

/* 404 */
.rmx-404 { text-align: center; padding-block: clamp(70px, 12vw, 150px); }
.rmx-404__code {
  font-family: var(--rmx-display); font-size: clamp(5rem, 22vw, 13rem);
  line-height: .82; color: var(--rmx-pink);
  filter: drop-shadow(0 0 40px rgba(255,46,99,.4));
}

/* ============================================================
   18. COLONY GALLERY
   ============================================================ */
.rmx-gallery {
  display: grid;
  /* The colony shots are landscape, so they need room: one column on a phone,
     two from ~640px, three across the 1180px wrap — no media queries needed. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

/* Above phone width the track wrappers vanish and their figures become direct
   grid children again, so the desktop layout is untouched. */
.rmx-gallery__track { display: contents; }

@media (max-width: 700px) {
  .rmx-gallery { display: block; }

  .rmx-gallery__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Full-bleed: the slider runs to both screen edges so the next photo peeks
       in and the swipe is discoverable without a hint or an arrow. */
    margin-inline: calc(var(--rmx-gut) * -1);
    padding-inline: var(--rmx-gut);
    padding-bottom: 4px;
  }
  .rmx-gallery__track + .rmx-gallery__track { margin-top: 14px; }
  .rmx-gallery__track::-webkit-scrollbar { display: none; }

  .rmx-gallery__track .rmx-gallery__item {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  /* Without this the last card snaps flush to the edge with no breathing room. */
  .rmx-gallery__track::after {
    content: '';
    flex: 0 0 calc(var(--rmx-gut) - 12px);
  }
}

.rmx-gallery__item {
  margin: 0;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.rmx-gallery__item:hover {
  transform: translateY(-4px);
  border-color: var(--rmx-line);
}
@media (prefers-reduced-motion: reduce) {
  .rmx-gallery__item:hover { transform: none; }
}

.rmx-gallery__img {
  width: 100%;
  /* Matches the source photographs closely enough that the handwritten label
     on the right of each frame never gets cropped away. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.rmx-gallery__item figcaption {
  padding: 12px 14px 14px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--rmx-muted);
}

/* ============================================================
   18a. CRIADERO STRIP (portrait, homepage)
   ============================================================
   The only portrait gallery on the site. Six sources at 922x1652 and
   686x1228 — upscaled 2x from the originals, so there is a ceiling on how
   large the card can go before the interpolation shows.

   Three across the 1180px wrap puts the card at ~348px, which is 696px on a
   2x screen: as close to the 686px floor of the smaller pair as this can get
   without going soft. Do not widen past three columns' worth.

   Explicit column counts rather than auto-fit: six items in an auto-fit track
   land 5-across at desktop width and strand the sixth on a row of its own. */
.rmx-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
  /* Hard cap, not just the inherited 1180px measure. Product pages widen to
     1520px above 1200px viewports, which would push these cards to ~460px —
     920px on a 2x screen, well past what a 686px source can honestly fill.
     1120px holds the card at ~360px wherever the strip is used. */
  max-width: 1120px;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .rmx-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  /* Same full-bleed swipe treatment as the colony gallery, so the two
     sections behave identically under the thumb. */
  .rmx-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--rmx-gut) * -1);
    padding-inline: var(--rmx-gut);
    padding-bottom: 4px;
  }
  .rmx-strip::-webkit-scrollbar { display: none; }

  /* Narrower than the 86% of the landscape slider: these are tall, and a
     full-width portrait card would push its own caption off the screen. */
  .rmx-strip__item {
    flex: 0 0 62%;
    scroll-snap-align: center;
  }
  .rmx-strip::after {
    content: '';
    flex: 0 0 calc(var(--rmx-gut) - 12px);
  }
}

.rmx-strip__item {
  margin: 0;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.rmx-strip__item:hover {
  transform: translateY(-4px);
  border-color: var(--rmx-line);
}
@media (prefers-reduced-motion: reduce) {
  .rmx-strip__item:hover { transform: none; }
}

.rmx-strip__img {
  width: 100%;
  /* 3:4 rather than the native 9:16. The sources survive the modest top-and-
     bottom crop, and a true 9:16 card is tall enough on a phone to strand its
     own caption below the fold. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.rmx-strip__item figcaption {
  padding: 10px 12px 12px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--rmx-muted);
}

/* ============================================================
   18b. TEAM (contact page)
   ============================================================ */
.rmx-team {
  display: grid;
  /* Same auto-fit approach as the colony gallery, but with a wider floor: the
     cards carry three paragraphs under a 16:9 photo, and at 300px the bio turns
     into a column of two-word lines. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}

.rmx-team__card {
  display: flex;
  flex-direction: column;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.rmx-team__card:hover {
  transform: translateY(-4px);
  border-color: var(--rmx-line);
}
@media (prefers-reduced-motion: reduce) {
  .rmx-team__card:hover { transform: none; }
}

.rmx-team__media { position: relative; }

.rmx-team__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* object-position is set per person in page-contact.php — these are group
     photographs, and a centre crop puts half the team out of frame. */
  display: block;
}

.rmx-team__body { padding: 18px 20px 22px; }

.rmx-team__name {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--rmx-cream);
}

.rmx-team__role {
  margin: 4px 0 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rmx-pink);
}

.rmx-team__bio {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--rmx-muted);
}

.rmx-team__roach {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rmx-line-soft);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--rmx-cream);
  font-style: italic;
}
.rmx-team__roach span {
  display: block;
  margin-bottom: 4px;
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rmx-gold);
}

/* ============================================================
   19. REGISTRY TABLE
   ============================================================ */
.rmx-reg {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  table-layout: fixed;
}

/* The registry renders inside .rmx-prose, whose generic table styling adds a
   border to every cell and a card background to every th. Same specificity, so
   these later rules win — reset first, then re-apply only the horizontal rules
   this design actually wants. */
.rmx-reg th,
.rmx-reg td {
  border: 0;
  background: transparent;
}
.rmx-reg tbody td { border-bottom: 1px solid var(--rmx-line-soft); }

.rmx-reg thead th {
  padding: 0 18px 12px;
  text-align: left;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rmx-muted);
  border-bottom: 1px solid var(--rmx-line-soft);
  white-space: nowrap;
}

/* Fixed layout so the name column keeps its width regardless of how long an
   aka line runs. */
.rmx-reg thead th:nth-child(1) { width: 50%; }
.rmx-reg thead th:nth-child(2) { width: 18%; }
.rmx-reg thead th:nth-child(3) { width: 32%; }

.rmx-reg tbody tr {
  border-bottom: 1px solid var(--rmx-line-soft);
  transition: background .18s ease;
}
.rmx-reg tbody tr:hover { background: rgba(255, 46, 99, .045); }

.rmx-reg td {
  padding: 16px 18px;
  vertical-align: middle;
  word-break: break-word;
}

.rmx-reg__name {
  display: block;
  font-family: var(--rmx-display);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rmx-cream);
  line-height: 1.15;
}

.rmx-reg__aka {
  display: block;
  margin-top: 3px;
  font-size: .88rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--rmx-muted);
}

.rmx-reg__cell--date {
  font-size: .86rem;
  color: var(--rmx-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rmx-reg__badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  border: 1px solid transparent;
}
.rmx-reg__badge--captivity {
  background: rgba(245, 239, 230, .07);
  border-color: var(--rmx-line-soft);
  color: var(--rmx-cream);
}
.rmx-reg__badge--freed {
  background: rgba(86, 190, 120, .12);
  border-color: rgba(86, 190, 120, .38);
  color: #7fd79b;
}
.rmx-reg__badge--powder {
  background: rgba(255, 46, 99, .10);
  border-color: var(--rmx-line);
  color: #ff7d9d;
}

/* Mobile: a real table cannot hold three columns at 390px without horizontal
   scrolling, so each row collapses into a card. Labels come from data-label —
   and the name cell has none, so rows open on the roach's name. */
@media (max-width: 760px) {
  .rmx-reg,
  .rmx-reg tbody,
  .rmx-reg tr,
  .rmx-reg td { display: block; width: 100%; }

  .rmx-reg thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

  .rmx-reg tr {
    margin-bottom: 12px;
    padding: 6px 0;
    background: var(--rmx-card);
    border: 1px solid var(--rmx-line-soft);
    border-radius: var(--rmx-radius-sm);
  }

  .rmx-reg td { padding: 8px 18px; }
  .rmx-reg td:first-child { padding-top: 16px; }
  .rmx-reg td:last-child { padding-bottom: 16px; }

  .rmx-reg td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6f6474;
  }
}

/* ============================================================
   20. PRICING TABS + SUBSCRIPTION
   ============================================================ */
.rmx-tabs { display: flex; justify-content: center; margin-bottom: clamp(28px, 4vw, 44px); }

.rmx-tabs__list {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: 999px;
  max-width: 100%;
}

.rmx-tabs__tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px clamp(16px, 3vw, 30px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rmx-muted);
  font-family: var(--rmx-body);
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, color .2s ease;
}
.rmx-tabs__tab:hover { color: var(--rmx-cream); }

.rmx-tabs__tab.is-active {
  background: var(--rmx-pink-solid);
  color: #fff;
  box-shadow: var(--rmx-glow-sm);
}
.rmx-tabs__tab.is-active .rmx-tabs__note { color: rgba(255, 255, 255, .82); }

.rmx-tabs__title {
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rmx-tabs__note {
  font-size: .72rem;
  line-height: 1.35;
  color: var(--rmx-muted);
  font-weight: 500;
  max-width: 26ch;
}

/* Panels are toggled with the hidden attribute, so they stay in the DOM and
   remain findable by in-page search and assistive tech. */
.rmx-tabs__panel[hidden] { display: none; }

/* --- subscription card --- */
.rmx-sub { display: flex; justify-content: center; }
.rmx-sub__card { max-width: 560px; width: 100%; }

/* Colony photo at the top of the subscription card. Same 16/9 crop as the
   gallery, for the same reason: the handwritten label sits on the right of
   the frame and must not be cropped away. */
.rmx-sub__media {
  margin: 14px 0 18px;
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  overflow: hidden;
}

.rmx-sub__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.rmx-sub__media figcaption {
  padding: 10px 14px 12px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--rmx-muted);
}

.rmx-tier__per {
  font-family: var(--rmx-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rmx-muted);
  letter-spacing: 0;
  margin-left: 4px;
}

.rmx-sub__lede {
  color: var(--rmx-cream);
  font-size: 1rem;
  margin: 10px 0 4px;
}

.rmx-sub__endings {
  margin: 4px 0 24px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
}

.rmx-sub__endings-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.rmx-sub__endings-grid span {
  position: relative;
  padding-left: 20px;
  font-size: .88rem;
  color: var(--rmx-muted);
}
.rmx-sub__endings-grid span::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rmx-pink);
}

.rmx-sub__terms {
  margin-top: 16px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--rmx-muted);
}

@media (max-width: 620px) {
  .rmx-tabs__list { width: 100%; flex-direction: column; border-radius: var(--rmx-radius); }
  .rmx-tabs__tab { border-radius: var(--rmx-radius-sm); }
  .rmx-tabs__note { max-width: none; }
}