/* ============================================================
   RMX — WooCommerce skin
   Loaded only when WooCommerce is active.
   ============================================================ */

.woocommerce-page .rmx-page,
.woocommerce .rmx-page { padding-block: clamp(40px, 6vw, 76px); }

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-top: 3px solid var(--rmx-pink);
  border-radius: var(--rmx-radius-sm);
  color: var(--rmx-cream);
  padding: 18px 22px;
  margin: 0 0 26px;
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: .95rem;
}
.woocommerce-error { border-top-color: #ff4d4d; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ---------- Buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  background: var(--rmx-pink-solid);
  color: #fff;
  font-family: var(--rmx-body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 15px 32px;
  line-height: 1.2;
  box-shadow: var(--rmx-glow-sm);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #ff4a78;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(255, 46, 99, .5);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  background: var(--rmx-card-hi);
  color: var(--rmx-muted);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* Secondary / ghost buttons */
.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward,
.woocommerce-cart .return-to-shop .button {
  background: transparent;
  color: var(--rmx-cream);
  border-color: var(--rmx-line);
  box-shadow: none;
}
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce-cart .return-to-shop .button:hover {
  background: rgba(255, 46, 99, .08);
  border-color: var(--rmx-pink);
  color: var(--rmx-cream);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover { transform: none; }
}

/* ---------- Form fields ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input[type="number"],
.select2-container--default .select2-selection--single,
.rmx-field input[type="text"],
.rmx-field input[type="email"],
.rmx-field textarea,
.rmx-field select {
  width: 100%;
  background: #15111a;
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  color: var(--rmx-cream);
  font-family: var(--rmx-body);
  font-size: 1rem;
  padding: 14px 16px;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce form .form-row textarea,
.rmx-field textarea { min-height: 118px; resize: vertical; }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.rmx-field input:focus,
.rmx-field textarea:focus,
.rmx-field select:focus {
  outline: none;
  border-color: var(--rmx-pink);
  box-shadow: 0 0 0 3px rgba(255, 46, 99, .22);
}

.woocommerce form .form-row input::placeholder,
.rmx-field input::placeholder,
.rmx-field textarea::placeholder { color: #6f6474; }

.woocommerce form .form-row label,
.rmx-field label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin-bottom: 8px;
}
.woocommerce form .form-row .required { color: var(--rmx-pink); border: 0; }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #ff4d4d; }

.rmx-field { margin-bottom: 22px; }
.rmx-field__hint {
  display: block;
  margin-top: 7px;
  font-size: .8rem;
  color: var(--rmx-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
/* Label on the left, "Inspire me" on the right, sharing the row the label
   used to have to itself. */
.rmx-field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rmx-field__labelrow label { margin-bottom: 0; }

.rmx-inspire {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--rmx-line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--rmx-pink);
  font-family: var(--rmx-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.rmx-inspire:hover { border-color: var(--rmx-pink); background: rgba(255, 46, 99, .1); }
.rmx-inspire:focus-visible { outline: 2px solid var(--rmx-pink); outline-offset: 2px; }
.rmx-inspire[disabled] { opacity: .55; cursor: default; }
.rmx-inspire.is-loading .rmx-inspire__label::after {
  content: '…';
}
.rmx-inspire.is-failed {
  border-color: #ff4d4d;
  color: #ff4d4d;
}
.rmx-inspire.is-failed .rmx-inspire__label::after {
  content: ' — try again';
  text-transform: none;
  letter-spacing: 0;
}

.rmx-field__counter { font-variant-numeric: tabular-nums; }
.rmx-field__counter.is-over { color: #ff4d4d; }

/* Checkbox rows */
.rmx-check {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  padding: 16px 18px;
}
.rmx-check input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--rmx-pink);
  flex: 0 0 auto;
}
.rmx-check label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

/* The registry opt-in got a heading in August 2026, when it stopped being a
   Premium-only extra and became a step every product page offers — same shape
   as the adoption form's "The public registry" section. */
.rmx-dedication__heading {
  font-family: var(--rmx-display);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin: 0 0 12px;
}
.rmx-field--registry {
  border-top: 1px solid var(--rmx-line-soft);
  padding-top: 22px;
  margin-top: 22px;
}

/* Postal address for the printed certificate */
/* The hard-copy upsell is the last block of the dedication form, directly above
   the add-to-cart button. It needs its own edges — loose among the other fields
   it read as a stray checkbox with a second price hanging off it. Matches
   .rmx-adopt__step, which is the same offer on the adoption form. */
/* WooCommerce floats the add-to-cart button and the quantity box left. That
   was invisible while the button was the last thing in the form; now that the
   hard-copy block follows it, the block does not clear the float and renders
   ABOVE the button. The button is full width here, so the float buys nothing —
   drop it, and keep the clear as a belt-and-braces guard. */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .quantity { float: none; }
.woocommerce div.product form.cart .button { width: 100%; }

.rmx-dedication--hardcopy {
  clear: both;
  margin-top: 26px;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  padding: clamp(18px, 3vw, 26px);
}
.rmx-dedication--hardcopy .rmx-field:last-child { margin-bottom: 0; }
.rmx-hardcopy__title {
  font-family: var(--rmx-display);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin: 0 0 12px;
}

/* Same treatment on the adoption form's copy of the block. */
.rmx-adopt__step--after { margin-top: 26px; margin-bottom: 0; }

.rmx-shipping {
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  padding: 18px;
  margin-top: 14px;
}
.rmx-shipping[hidden] { display: none; }

.rmx-shipping__legend {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin-bottom: 14px;
}

/* auto-fit rather than a media query: this block sits in the product summary
   column, which is narrow on desktop long before the viewport is. Pairs of
   fields only sit side by side when there is genuinely room for them. */
.rmx-shipping__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
}
.rmx-shipping__row { margin: 0; }
.rmx-shipping__row--wide { grid-column: 1 / -1; }
.rmx-shipping__row label { margin-bottom: 6px; }
.rmx-shipping__row input,
.rmx-shipping__row select { width: 100%; }

/* select2 (checkout country/state) */
.select2-container--default .select2-selection--single { height: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--rmx-cream); line-height: 1.4; padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 10px; }
.select2-dropdown {
  background: var(--rmx-card);
  border-color: var(--rmx-line);
  color: var(--rmx-cream);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--rmx-pink-solid); color: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: #15111a; border: 1px solid var(--rmx-line-soft); color: var(--rmx-cream);
  border-radius: 8px; padding: 9px 11px;
}

/* ---------- Single product ---------- */

/* The 1180px site measure is set for running prose. A product page is two
   columns of gallery and summary plus a full-width tab panel, and at 1180 it
   leaves a stripe of empty page down each side on any normal desktop. Widened
   here only — the marketing pages keep the narrower, more readable measure. */
@media (min-width: 1200px) {
  .single-product #rmx-main > .rmx-wrap { max-width: 1520px; }
}

/* The single column below 900px needs `minmax(0, 1fr)` for the same reason the
   two-column rule below does. Without a template this is one implicit `auto`
   column, which sizes to the widest item's MAX-content — so any horizontally
   scrolling child in the summary (the registry sample strip) sets the column to
   its full scroll width, the gallery is dragged to the same width because it
   shares that column, and the whole page needs pinch-zooming to read. Capping
   the column lets the overflow container scroll on its own again. */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 54px);
}
@media (min-width: 900px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
  .woocommerce div.product div.summary { grid-column: 2; margin: 0; }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .up-sells,
  /* The criadero strip is hooked onto woocommerce_after_single_product_summary,
     which makes it a direct child of this grid. Without a column it is
     auto-placed into the 0.9fr gallery column and its three cards collapse to
     ~122px. It is a full-width band like the tabs, so it spans both. */
  .woocommerce div.product > #criadero { grid-column: 1 / -1; }
}

/* Already inside #rmx-main > .rmx-wrap on a product page, so the section's own
   wrap must not add a second gutter or a second, narrower measure. */
.woocommerce div.product > #criadero > .rmx-wrap {
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

/* These two carry `div.images` / `div.summary` at (0,3,2) in
   woocommerce-layout.css, both set to `width: 48%; float: …` for Woo's original
   float layout. A `.woocommerce-product-gallery` selector scores (0,3,1) and
   quietly loses, which left each column filling 48% of its own grid cell and
   put a dead stripe down the middle of every product page. Matching the
   qualified form takes the specificity back. FlexSlider measures the gallery at
   init, so this also has to be right on first paint, not just after a resize. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary {
  float: none;
  width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery__image { border-radius: var(--rmx-radius); overflow: hidden; }

/* Every slide is the same 16/9 box whatever shape the file is.
   Without this a portrait frame is as tall as it is wide, the slider re-measures
   to the tallest slide, and the whole column jumps each time the rotation
   reaches one — which is what "portrait images break the gallery" actually
   meant. `contain` rather than `cover`: these are hand-lettered signs and
   certificates, and cropping one to fill the box cuts off the writing that is
   the entire point of the photograph. */
.woocommerce div.product .woocommerce-product-gallery__image > a,
.woocommerce div.product .woocommerce-product-gallery__image > img {
  display: block;
  width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #0f0d11;
}

/* The thumbnail strip crops instead — a 16/9 sliver of a tall photo is too
   little to recognise at that size, and these are square-ish already. */
.woocommerce div.product .flex-control-thumbs img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.woocommerce div.product .product_title {
  font-family: var(--rmx-display);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  text-transform: uppercase;
  line-height: .98;
  color: var(--rmx-cream);
  margin-bottom: .3em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--rmx-display);
  font-size: 2.4rem;
  color: var(--rmx-pink);
  line-height: 1.1;
  margin-bottom: .4em;
}
.woocommerce div.product p.price del { color: var(--rmx-muted); opacity: .6; font-size: .6em; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product .woocommerce-product-details__short-description { color: var(--rmx-muted); }

/* The first line of every short description says who the product is for, which
   is a different job from the paragraph under it — it is a label, not prose, so
   it does not read in the same muted body grey. */
.rmx-forwhom {
  color: var(--rmx-cream);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 0 0 14px;
}

/* Variations table */
.woocommerce div.product form.cart .variations {
  margin-bottom: 22px;
  border: 0;
  width: 100%;
}
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 14px; }
.woocommerce div.product form.cart .variations td { display: block; padding: 0; border: 0; }
.woocommerce div.product form.cart .variations th.label {
  display: block; padding: 0 0 8px; border: 0; text-align: left;
}
.woocommerce div.product form.cart .variations label {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rmx-cream);
}

/* The variation <select> lives outside .form-row, so the generic field styles
   above never reach it — without this it renders as dark-on-dark and is
   effectively invisible. The arrow is an inline SVG data URI because
   appearance:none removes the native one. */
.woocommerce div.product form.cart .variations select {
  width: 100%;
  background-color: #15111a;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23ff2e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  color: var(--rmx-cream);
  font-family: var(--rmx-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 46px 15px 16px;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce div.product form.cart .variations select:hover {
  border-color: var(--rmx-line);
}
.woocommerce div.product form.cart .variations select:focus {
  outline: none;
  border-color: var(--rmx-pink);
  box-shadow: 0 0 0 3px rgba(255, 46, 99, .22);
}

/* Native dropdown list: browsers render these with the OS palette, so the
   options need explicit colours or they come out black-on-white. */
.woocommerce div.product form.cart .variations select option {
  background: #15111a;
  color: var(--rmx-cream);
}
.woocommerce div.product form.cart .reset_variations {
  display: inline-block; margin-top: 8px;
  font-size: .8rem; color: var(--rmx-muted);
}
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 16px; }

.woocommerce div.product form.cart { margin-top: 8px; }
.woocommerce div.product form.cart .button { width: 100%; padding: 18px 32px; font-size: 1rem; }

/* Quantity */
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity input[type="number"] { width: 88px; text-align: center; padding: 14px 8px; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0; margin: 0 0 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
  border-bottom: 1px solid var(--rmx-line-soft);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  /* WooCommerce ships `li.active { background: #fff }`, which the old
     `li`-only override did not reach — so the selected tab was a white slab
     carrying cream text and read as blank. The active tab is now a deliberate
     cream chip with black lettering. */
  background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0;
}
/* `li:not(.active) a` rather than `li a`, so exactly one rule ever sets the
   colour of the selected tab. With both rules in play the active label was
   landing on the muted grey and reading as unselected. */
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a {
  color: var(--rmx-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 20px;
  font-weight: 700;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  border-radius: var(--rmx-radius-sm) var(--rmx-radius-sm) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--rmx-cream); border-bottom-color: var(--rmx-pink);
}
/* Set on the li as well as the anchor: WooCommerce ships
   `li.active a { color: inherit }`, so whichever of the two rules the cascade
   settles on, the selected tab label ends up black on the cream chip. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { color: #000; }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:focus {
  background: var(--rmx-cream);
  color: #000;
  border-bottom-color: var(--rmx-pink);
}
/* Share */
.rmx-share { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--rmx-line-soft); }

.rmx-share__label {
  margin: 0 0 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rmx-muted);
}

.rmx-share__list { display: flex; flex-wrap: wrap; gap: 10px; }

.rmx-share__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  font-family: var(--rmx-body);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--rmx-cream);
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.rmx-share__btn:hover,
.rmx-share__btn:focus-visible {
  color: var(--rmx-cream);
  background: var(--rmx-card-hi);
  border-color: var(--rmx-line);
}
.rmx-share__btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* The copy buttons swap their own label for a confirmation, so the width would
   jump around without a floor. */
.rmx-share__btn[data-rmx-copy] { min-width: 128px; justify-content: center; }
.rmx-share__btn.is-copied { color: var(--rmx-gold-lt); border-color: var(--rmx-gold); }

.rmx-share__note { margin: 12px 0 0; font-size: .78rem; line-height: 1.5; color: var(--rmx-muted); }

.woocommerce div.product .woocommerce-tabs .panel { color: var(--rmx-muted); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.5rem; color: var(--rmx-cream); }

/* ---------- Cart ---------- */
.woocommerce table.shop_table {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: var(--rmx-cream);
}
.woocommerce table.shop_table th {
  background: rgba(255, 255, 255, .03);
  color: var(--rmx-cream);
  font-size: .76rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rmx-line-soft);
}
.woocommerce table.shop_table td {
  padding: 18px;
  border-top: 1px solid var(--rmx-line-soft);
  color: var(--rmx-muted);
}
.woocommerce table.shop_table td.product-name a { color: var(--rmx-cream); font-weight: 700; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--rmx-pink); }
.woocommerce table.shop_table .product-total,
.woocommerce table.shop_table .order-total .amount { color: var(--rmx-cream); font-weight: 700; }
.woocommerce table.shop_table_responsive tr td::before { color: var(--rmx-cream); }

/* Item meta (our roach fields) */
.woocommerce .variation,
.woocommerce ul.wc-item-meta {
  margin: 8px 0 0; padding: 0; list-style: none;
  font-size: .84rem; color: var(--rmx-muted);
}
.woocommerce ul.wc-item-meta li { margin: 0 0 4px; }
.woocommerce ul.wc-item-meta li p,
.woocommerce ul.wc-item-meta li strong { display: inline; margin: 0; }
.woocommerce ul.wc-item-meta strong,
.woocommerce .variation dt { color: var(--rmx-cream); font-weight: 700; }
.woocommerce .variation dd { margin: 0 0 4px; }

.woocommerce a.remove {
  color: var(--rmx-muted) !important;
  font-size: 1.4rem; line-height: 1;
  width: 26px; height: 26px;
}
.woocommerce a.remove:hover { background: var(--rmx-pink-solid); color: #fff !important; }

.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce-cart .cart-collaterals { display: grid; gap: 24px; margin-top: 34px; }
@media (min-width: 900px) {
  .woocommerce-cart .cart-collaterals { grid-template-columns: 1fr minmax(340px, 420px); justify-content: end; }
  .woocommerce-cart .cart-collaterals .cart_totals { grid-column: 2; }
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--rmx-display);
  font-size: 1.5rem; text-transform: uppercase;
  color: var(--rmx-cream); margin-bottom: 18px;
}
.woocommerce .checkout-button { margin-top: 8px; display: block; text-align: center; }
.woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce .coupon .input-text { flex: 1 1 180px; }

/* ---------- Checkout ---------- */

/* Every field says what belongs in it, in grey, so the form reads without
   relying on the label alone. Browsers do not inherit placeholder colour, so
   each engine needs telling. */
.woocommerce input::placeholder,
.woocommerce textarea::placeholder,
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: var(--rmx-muted);
  opacity: .75;
}
.woocommerce input::-webkit-input-placeholder,
.woocommerce-checkout input::-webkit-input-placeholder { color: var(--rmx-muted); opacity: .75; }
.woocommerce input:-ms-input-placeholder,
.woocommerce-checkout input:-ms-input-placeholder { color: var(--rmx-muted); opacity: .75; }

.woocommerce-checkout .col2-set { display: grid; gap: 26px; width: 100%; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
@media (min-width: 980px) {
  .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
  .woocommerce-checkout form.checkout .col2-set { grid-column: 1; }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; }
}
.woocommerce-checkout #order_review {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  padding: 26px;
  position: sticky; top: 96px;
}
.woocommerce-checkout #order_review table.shop_table { background: transparent; border: 0; }

.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  border: 0; padding: 0; margin: 0 0 18px; list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  padding: 15px 18px; margin-bottom: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li label { display: inline; color: var(--rmx-cream); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--rmx-pink); margin-right: 8px; }
.woocommerce-checkout #payment div.payment_box {
  background: #15111a;
  border-radius: var(--rmx-radius-sm);
  color: var(--rmx-muted);
  font-size: .9rem;
  margin-top: 12px;
  padding: 16px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .form-row.place-order { padding: 0; margin-top: 18px; }
.woocommerce-checkout #payment #place_order { width: 100%; padding: 18px; font-size: 1.05rem; }
.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-wrapper p { color: var(--rmx-muted); font-size: .85rem; }

/* Stripe card element */
.wc-stripe-elements-field,
.wc-stripe-iban-element-field,
#wc-stripe-card-element {
  background: #15111a !important;
  border: 1px solid var(--rmx-line-soft) !important;
  border-radius: var(--rmx-radius-sm) !important;
  padding: 15px 16px !important;
}
.wc-stripe-elements-field.focused,
#wc-stripe-card-element.focused {
  border-color: var(--rmx-pink) !important;
  box-shadow: 0 0 0 3px rgba(255, 46, 99, .22);
}

/* ---------- Thank you / order received ---------- */
.woocommerce-order { max-width: 820px; margin: 0 auto; }
.woocommerce ul.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  padding: 0; margin: 0 0 30px;
  list-style: none;
  overflow: hidden;
}
.woocommerce ul.order_details li {
  float: none; border: 0; margin: 0;
  padding: 20px 18px;
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rmx-muted);
}
.woocommerce ul.order_details li strong {
  display: block; margin-top: 8px;
  font-family: var(--rmx-display); font-size: 1.25rem;
  letter-spacing: .01em; color: var(--rmx-cream);
  text-transform: none;
}
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details { margin-top: 34px; }
.woocommerce .woocommerce-column__title,
.woocommerce .woocommerce-order-details__title {
  font-family: var(--rmx-display); font-size: 1.4rem;
  text-transform: uppercase; color: var(--rmx-cream);
}
.woocommerce .woocommerce-thankyou-order-received {
  font-family: var(--rmx-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
  line-height: 1.05;
  margin-bottom: 22px;
}

/* Certificate callout on thank-you page + emails */
.rmx-cert-callout {
  background: linear-gradient(140deg, rgba(201,162,39,.14), rgba(255,46,99,.10));
  border: 1px solid var(--rmx-gold);
  border-radius: var(--rmx-radius);
  padding: 28px;
  margin: 0 0 30px;
  text-align: center;
}
.rmx-cert-callout h3 { color: var(--rmx-gold); margin-bottom: .5em; }
.rmx-cert-callout p { color: var(--rmx-muted); margin-bottom: 18px; }
.rmx-cert-callout ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }

/* Option lists on the adoption product page. Same content as the setup form's
   radio cards, minus the radios — this is the menu, not the order. */
.rmx-optionlist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
  display: grid;
  gap: 8px;
}
.rmx-optionlist li {
  padding: 13px 16px;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-left: 3px solid var(--rmx-pink);
  border-radius: var(--rmx-radius-sm);
  margin: 0;
}
.rmx-optionlist strong { display: block; color: var(--rmx-cream); font-weight: 600; }
.rmx-optionlist span { display: block; margin-top: 2px; color: var(--rmx-muted); font-size: .88rem; line-height: 1.5; }

/* ---------- Adoption setup (post-payment) ---------- */
.rmx-adopt { max-width: 720px; margin: 0 auto; }

.rmx-adopt__errors {
  background: rgba(255, 46, 99, .12);
  border: 1px solid var(--rmx-line);
  border-radius: var(--rmx-radius-sm);
  padding: 14px 18px;
  margin-bottom: 26px;
}
.rmx-adopt__errors p { margin: 0; color: var(--rmx-cream); }

.rmx-adopt__step {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  padding: clamp(20px, 3vw, 30px);
  margin-bottom: 22px;
}
.rmx-adopt__step h2 {
  font-family: var(--rmx-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin: 0 0 6px;
}
.rmx-adopt__lede { color: var(--rmx-muted); font-size: .9rem; margin: 0 0 18px; }

.rmx-choices { display: grid; gap: 10px; }

.rmx-choice { position: relative; }
.rmx-choice input {
  position: absolute; top: 18px; left: 16px;
  width: 18px; height: 18px; margin: 0;
  accent-color: var(--rmx-pink-solid);
}
.rmx-choice label {
  display: block;
  padding: 15px 18px 15px 46px;
  background: #15111a;
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.rmx-choice label:hover { border-color: var(--rmx-line); }
/* :has is the only way to style the label from the input's state without a
   wrapper class and a script to maintain it. Unsupported browsers simply get
   the unhighlighted card, which is still perfectly usable. */
.rmx-choice:has(input:checked) label {
  border-color: var(--rmx-pink);
  background: var(--rmx-card-hi);
}
.rmx-choice:has(input:focus-visible) label { box-shadow: 0 0 0 3px rgba(255, 46, 99, .25); }
.rmx-choice label strong { display: block; color: var(--rmx-cream); font-weight: 600; }
.rmx-choice label small { display: block; margin-top: 3px; color: var(--rmx-muted); font-size: .84rem; line-height: 1.5; }

.rmx-adopt__terms { color: var(--rmx-muted); font-size: .8rem; line-height: 1.55; margin: 14px 0 0; text-align: center; }

/* On the product page the form sits in the summary column, where the card
   chrome would nest a box inside a box. */
.rmx-adopt--checkout { max-width: none; }
.rmx-adopt--checkout .rmx-adopt__step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rmx-line-soft);
  border-radius: 0;
  padding: 22px 0 0;
  margin-bottom: 18px;
}
.rmx-adopt--checkout .rmx-adopt__step:first-child { border-top: 0; padding-top: 0; }

.rmx-adopt__summary {
  display: grid;
  gap: 1px;
  background: var(--rmx-line-soft);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  overflow: hidden;
  margin: 26px 0;
  text-align: left;
}
.rmx-adopt__summary > div { background: var(--rmx-card); padding: 14px 18px; }
.rmx-adopt__summary dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rmx-muted);
}
.rmx-adopt__summary dd { margin: 3px 0 0; color: var(--rmx-cream); }

.rmx-adopt--done { text-align: center; }
.rmx-adopt--done h2 {
  font-family: var(--rmx-display);
  font-size: clamp(2rem, 5vw, 3rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
}
.rmx-adopt--done p { color: var(--rmx-muted); }

/* The printed certificate is not covered by the subscription payment, so its
   outstanding-balance panel has to read as an action, not a receipt line. */
.rmx-adopt__hardcopy {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-pink);
  border-radius: var(--rmx-radius);
  padding: clamp(20px, 3vw, 28px);
  margin: 26px 0;
  text-align: left;
}
.rmx-adopt__hardcopy h3 {
  font-family: var(--rmx-display);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin: 0 0 10px;
}
.rmx-adopt__hardcopy p { margin: 0 0 14px; }
.rmx-adopt__hardcopy p:last-child { margin-bottom: 0; }
.rmx-adopt__hardcopy-address {
  color: var(--rmx-cream);
  font-size: .92rem;
  line-height: 1.6;
}
.rmx-adopt__hardcopy-address strong {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rmx-muted);
  margin-bottom: 4px;
}

/* ---------- Shop archive ---------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px; margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }

/* The `[class*="columns-"]` form is what woocommerce-layout.css and
   woocommerce-smallscreen.css both use to set `width: 48%; float: left` for the
   old float grid. It outscores a plain `ul.products li.product`, so the tiles
   sat at 48% of their own grid cell — worst on phones, where smallscreen.css
   made it a half-width card in a single-column grid. Match the attribute
   selector and the grid gets its cells back. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product {
  width: 100%; margin: 0; float: none;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
  padding: 20px;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); border-color: var(--rmx-line); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--rmx-display); font-size: 1.3rem;
  text-transform: uppercase; color: var(--rmx-cream); padding: 14px 0 6px;
}
.woocommerce ul.products li.product .price { color: var(--rmx-pink); font-weight: 700; }
.woocommerce ul.products li.product img { border-radius: var(--rmx-radius-sm); margin-bottom: 4px; }

/* The tiles are links to the product page, not add-to-cart, so they get the
   full-width primary treatment rather than Woo's inline text button. */
.woocommerce ul.products li.product .button.rmx-loop-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 15px 22px;
  background: var(--rmx-pink-solid);
  color: #fff;
  font-family: var(--rmx-body);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  border-radius: 999px;
  text-align: center;
}
.woocommerce ul.products li.product .button.rmx-loop-btn:hover {
  background: var(--rmx-pink);
  color: #fff;
}

/* Recurring price marker, so $9 does not read as the cheapest one-off. */
.rmx-per-month {
  color: var(--rmx-muted);
  font-weight: 400;
  font-size: .62em;
  letter-spacing: .04em;
}

/* Phones: one product per row, so each tile is big enough to read and tap
   instead of two cramped columns. */
@media (max-width: 700px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .woocommerce ul.products li.product { padding: 16px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.6rem; }
  .woocommerce ul.products li.product .price { font-size: 1.25rem; }
  .woocommerce ul.products li.product .button.rmx-loop-btn { padding: 17px 22px; font-size: 1rem; }
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--rmx-muted); font-size: .88rem; }

/* Hide storefront noise we don't need on a one-product store */
.woocommerce .woocommerce-breadcrumb { color: var(--rmx-muted); font-size: .82rem; margin-bottom: 22px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--rmx-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--rmx-pink); }

/* ---------- My account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: 10px 18px;
  border: 1px solid var(--rmx-line-soft); border-radius: 999px;
  color: var(--rmx-cream); font-size: .85rem; font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--rmx-pink-solid); border-color: var(--rmx-pink-solid); color: #fff;
}

/* Prefixed input (Instagram handle). The @ sits inside the field so the
   value the customer types matches exactly what we store. */
.rmx-inputgroup {
  display: flex;
  align-items: stretch;
  background: #15111a;
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.rmx-inputgroup:focus-within {
  border-color: var(--rmx-pink);
  box-shadow: 0 0 0 3px rgba(255, 46, 99, .22);
}
.rmx-inputgroup__prefix {
  display: grid;
  place-items: center;
  padding-inline: 14px 0;
  color: var(--rmx-muted);
  font-weight: 700;
  font-size: 1rem;
  user-select: none;
}
.rmx-inputgroup input[type="text"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 6px !important;
  border-radius: 0 !important;
}

/* ---------- /thanks confirmation ---------- */
.rmx-thanks { max-width: 620px; }
.rmx-thanks__lead {
  font-family: var(--rmx-display);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.2;
  color: var(--rmx-cream);
  margin: 0 0 24px;
}
.rmx-thanks__meta {
  list-style: none;
  margin: 0 0 30px;
  padding: 18px 20px;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  display: grid;
  gap: 12px;
}
.rmx-thanks__meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.rmx-thanks__meta span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rmx-muted);
}
.rmx-thanks__meta strong { color: var(--rmx-cream); text-align: right; word-break: break-word; }
.rmx-thanks--empty { color: var(--rmx-muted); }

/* ---------- the printed-certificate offer ----------
   Shown on /thanks/ and on the adoption confirmation, both of which load the
   theme. The certificate page carries its own copy of these rules inline,
   because it is a standalone document with no theme stylesheet at all. */
.rmx-upsell {
  max-width: 620px;
  margin: 34px 0 0;
  padding: clamp(20px, 4vw, 28px);
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius);
}
.rmx-upsell__title {
  font-family: var(--rmx-display);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin: 0 0 10px;
}
.rmx-upsell__lede,
.rmx-upsell__address,
.rmx-upsell__note {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--rmx-muted);
  margin: 0 0 18px;
}
.rmx-upsell__note { font-size: .8rem; margin-bottom: 0; }
.rmx-upsell__address strong {
  color: var(--rmx-cream);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rmx-upsell__errors {
  border: 1px solid rgba(255, 77, 77, .5);
  background: rgba(255, 77, 77, .08);
  border-radius: var(--rmx-radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
}
.rmx-upsell__errors p { margin: 0; font-size: .88rem; color: #ffb3b3; }
.rmx-upsell .rmx-field:last-of-type { margin-bottom: 0; }
.rmx-upsell__submit { margin-top: 20px; width: 100%; justify-content: center; }

/* ---------- the adoption call to action ----------
   Under the printed-certificate offer on /thanks/ and on the certificate page
   (which, again, carries its own inline copy of these rules). Outlined in pink
   rather than the neutral card border above it, because it is the one thing on
   a receipt that is actually asking for something. */
.rmx-adoptcta {
  max-width: 620px;
  margin: 26px 0 0;
  padding: clamp(20px, 4vw, 28px);
  background: var(--rmx-card);
  border: 1px solid rgba(255, 46, 99, .38);
  border-radius: var(--rmx-radius);
}
.rmx-adoptcta__title {
  font-family: var(--rmx-display);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin: 0 0 10px;
}
.rmx-adoptcta__lede {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--rmx-muted);
  margin: 0 0 18px;
}
.rmx-adoptcta__btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--rmx-pink-solid);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.rmx-adoptcta__btn:hover,
.rmx-adoptcta__btn:focus-visible { background: #ff4d7a; color: #fff; }
.rmx-adoptcta__note {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--rmx-muted);
  margin: 14px 0 0;
}

/* ---------- Cart and checkout are not prose ----------
   page.php wraps post content in .rmx-prose, which caps the measure at 760px so
   long-form copy stays readable. The checkout is not copy: inside that cap its
   two columns came out 412px and 304px on a 1440px screen, which is narrower
   than the fields it has to hold. Desktop only — the single-column phone layout
   was never affected by the cap. */
@media (min-width: 980px) {
  body.woocommerce-checkout .rmx-prose,
  body.woocommerce-cart .rmx-prose { max-width: none; }

  /* Checkout and cart break out of the page measure entirely and sit flush
     left, rather than centred. The order table has to hold a full product name
     — "Premium Roast — Name a Cockroach After Your Friend or Your Ex" — next to
     a price, twice over on a two-roach order, and the 1180px centred measure
     left it about 360px to do it in.

     margin-inline: 0 is what moves it left; without it the max-width just grows
     around a still-centred block. The cap keeps the billing fields from running
     to silly lengths on an ultrawide monitor. */
  body.woocommerce-checkout .rmx-page > .rmx-wrap,
  body.woocommerce-cart .rmx-page > .rmx-wrap {
    max-width: min(1560px, 100%);
    margin-inline: 0;
  }

  /* Even columns rather than a wide form and a squeezed summary: the billing
     fields are short and stack happily, the order table is the one that needs
     the room. minmax(0, …) so a long unbroken product name cannot blow the
     column out past its share. */
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  /* Long names wrap instead of forcing the table wider than its column. */
  .woocommerce-checkout #order_review table.shop_table th,
  .woocommerce-checkout #order_review table.shop_table td { overflow-wrap: anywhere; }
}

/* ---------- Product gallery arrows ----------
   FlexSlider's own prev/next, switched on in rmx_product_carousel_options().
   Desktop only: on a phone the slider is swiped, and two tap targets floating
   over the photograph cost more than they buy. */
@media (max-width: 899px) {
  .woocommerce div.product .flex-direction-nav { display: none; }
}

@media (min-width: 900px) {
  .woocommerce div.product .woocommerce-product-gallery { position: relative; }

  .woocommerce div.product .flex-direction-nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .woocommerce div.product .flex-direction-nav li { margin: 0; }

  .woocommerce div.product .flex-direction-nav a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 0;
    background: var(--rmx-pink-solid);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    /* The theme label is replaced by an arrow glyph below, so the original
       "Previous"/"Next" text is pushed out of the box rather than hidden —
       screen readers still read it. */
    font-size: 0;
    text-decoration: none;
    /* Always on, not hover-revealed: a control nobody can see is a control
       nobody uses, and the strip of thumbnails underneath already reads as
       decoration rather than navigation. */
    opacity: 1;
    transition: background .18s ease, transform .18s ease;
  }
  .woocommerce div.product .flex-direction-nav a::before {
    font-size: 1.45rem;
    line-height: 1;
    font-family: inherit;
  }
  .woocommerce div.product .flex-direction-nav .flex-prev { left: 12px; }
  .woocommerce div.product .flex-direction-nav .flex-prev::before { content: '←'; }
  .woocommerce div.product .flex-direction-nav .flex-next { right: 12px; }
  .woocommerce div.product .flex-direction-nav .flex-next::before { content: '→'; }

  .woocommerce div.product .flex-direction-nav a:hover,
  .woocommerce div.product .flex-direction-nav a:focus-visible {
    background: #ff4d7a;
    transform: translateY(-50%) scale(1.06);
  }
  .woocommerce div.product .flex-direction-nav a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* FlexSlider marks an arrow disabled at the ends of the track, because its
     own animationLoop is off on purpose — see rmx_product_carousel_options().
     rmx.js wraps those clicks around by hand, so the class is a lie here and
     the arrow stays fully live in both directions. */
  .woocommerce div.product .flex-direction-nav a.flex-disabled {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   Live preview + registry samples (product form)
   ============================================================ */

.rmx-preview {
  margin: 0 0 26px;
  padding: 18px 18px 14px;
  background: var(--rmx-bg-2);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
}
.rmx-preview__lede,
.rmx-preview__foot {
  margin: 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--rmx-muted);
}
.rmx-preview__lede {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rmx-cream);
  margin-bottom: 14px;
}
.rmx-preview__foot { margin-top: 12px; }

/* Measured off the preview's own box, not the viewport: this sits in the Woo
   product summary column, which is ~615px wide on a 1280px desktop, so a
   viewport media query would break at the wrong moment. */
.rmx-preview { container-type: inline-size; container-name: rmxpreview; }

.rmx-preview__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* The certificate is 9:16 now, so width is what has to be held back: at the
   full 615px column it would stand 1093px tall and swallow the form. Capped at
   330px it is ~587px tall, and the registry row fits beside it. */
.rmx-preview__item--cert { width: min(100%, 330px); }

@container rmxpreview (min-width: 520px) {
  .rmx-preview__grid {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    align-items: start;
    justify-items: stretch;
  }
}

/* The registry card rendered on its own, beside its opt-in on the adoption
   page, rather than as the second cell of the preview grid. No grid to sit in,
   so it just takes the reveal's width. */
.rmx-preview--inline {
  margin-bottom: 14px;
}
.rmx-preview--inline .rmx-preview__item--registry {
  width: 100%;
  opacity: 1;
}

.rmx-preview__item { margin: 0; }
.rmx-preview__item figcaption {
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rmx-muted);
}

/* The certificate half of the preview is styled by the plugin's shared
   certificate.css — it IS the real document, not a lookalike. Only the registry
   card below is the theme's to style. */
.rmx-mini {
  container-type: inline-size;
  position: relative;
}

/* ---------- registry row ---------- */
.rmx-mini__reg {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
  padding: 16px 16px 14px;
  display: grid;
  gap: 12px;
}
.rmx-mini__reg .rmx-mini__kicker { color: var(--rmx-muted); font-size: .66rem; }
.rmx-mini__regrow {
  display: grid;
  gap: 8px;
  padding: 14px 0 0;
  border-top: 1px solid var(--rmx-line-soft);
}
.rmx-mini__regname strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--rmx-cream);
  word-break: break-word;
}
.rmx-mini__aka {
  display: block;
  margin-top: 3px;
  font-size: .82rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--rmx-muted);
}
.rmx-mini__regdate {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rmx-muted);
}
.rmx-mini__note {
  margin: 0;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--rmx-muted);
}

/* Off until the opt-in is ticked — the row is a preview of something the buyer
   has not asked for yet, so it must not read as already done. */
.rmx-preview__item--registry .rmx-mini { transition: opacity .2s ease; }
.rmx-preview__item--registry:not(.is-on) .rmx-mini { opacity: .42; }
.rmx-preview__item--registry.is-locked .rmx-mini { opacity: .42; }

/* ---------- sample strip ---------- */
/* Belt and braces against the grid trap fixed on div.product above: an
   overflow container must never be allowed to publish its scroll width as a
   layout minimum. */
.rmx-samples,
.rmx-samples__track { min-width: 0; max-width: 100%; }
.rmx-samples { margin-top: 16px; }
.rmx-samples__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rmx-samples__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rmx-muted);
}
.rmx-samples__nav { display: flex; gap: 6px; }
.rmx-samples__btn {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--rmx-line-soft);
  background: var(--rmx-card);
  color: var(--rmx-cream);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.rmx-samples__btn:hover { border-color: var(--rmx-line); background: var(--rmx-card-hi); }
.rmx-samples__btn[disabled] { opacity: .35; cursor: default; }

.rmx-samples__track {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.rmx-samples__card {
  flex: 0 0 auto;
  width: min(240px, 72vw);
  scroll-snap-align: start;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px 14px;
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: var(--rmx-radius-sm);
}
.rmx-samples__name {
  font-size: .95rem;
  line-height: 1.3;
  color: var(--rmx-cream);
  word-break: break-word;
}
.rmx-samples__aka {
  font-size: .78rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--rmx-muted);
}
.rmx-samples__date {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rmx-muted);
}
.rmx-samples__card .rmx-reg__badge {
  justify-self: start;
  font-size: .64rem;
  padding: 4px 9px;
}
.rmx-samples__all {
  display: inline-block;
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--rmx-pink);
  text-decoration: none;
}
.rmx-samples__all:hover { text-decoration: underline; }

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

/* ============================================================
   Mobile video hero + mobile source order (product pages)
   ============================================================ */

/* Desktop never sees it, and rmx.js never builds the player there either, so
   no YouTube request is made on a viewport that would not show it. */
.rmx-vhero { display: none; }

@media (max-width: 899px) {
  .rmx-vhero {
    display: block;
    position: relative;
    /* Full-bleed out of .rmx-wrap's gutters. The 50% resolves against the grid
       column, which is the gutter-inset content width. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* 90% of the viewport, so a sliver of the page shows under the hero and it
       reads as scrollable. svh is the viewport WITHOUT the mobile browser's
       collapsing URL bar, so the hero does not jump as the bar hides on
       scroll; the vh line above it is the fallback for anything without svh. */
    height: 90vh;
    height: 90svh;
    overflow: hidden;
    background: #0d0b0e center / cover no-repeat url('../video/hero-product-poster.jpg');
    isolation: isolate;
  }

  .rmx-vhero__media { position: absolute; inset: 0; overflow: hidden; }

  /* A real <video> can object-fit, which is the whole cover problem solved in
     one line — the oversize-and-centre arithmetic an iframe needed is gone.
     The source is 9:16 and the box is taller than 9:16 is wide, so the crop
     falls on the left and right edges; the captions burned along the bottom of
     the video are never cut. */
  .rmx-vhero__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Nothing to tap, and a stray tap must not pause the loop. */
    pointer-events: none;
  }

  .rmx-vhero__veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .30);
  }

  /* The title sits well clear of the bottom edge: the video has its own
     captions burned into the lower third, and the product title was landing on
     top of them. */
  .rmx-vhero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 var(--rmx-gut) clamp(150px, 30vh, 340px);
  }

  .rmx-vhero__title {
    margin: 0;
    font-family: var(--rmx-display);
    /* The tier alone is two words, not eight, so it can afford to be bigger. */
    font-size: clamp(2.2rem, 11vw, 3.4rem);
    line-height: 1.02;
    text-transform: uppercase;
    text-align: center;
    color: var(--rmx-pink);
    /* 30% is a light veil by design, and a bright frame can still swallow
       white type, so the shadow carries the contrast rather than a darker
       overlay the brief did not ask for. */
    text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .6);
  }

  /* The video hero that used to carry the title was unhooked in August, so the
     real <h1> is the only title left on the page — show it. It sits first in
     the summary (priority 5), with the gallery slot straight beneath it at
     priority 6, which is the order the phone layout wants. */
  .woocommerce div.product .summary > .product_title {
    font-size: clamp(2.1rem, 9vw, 2.9rem);
    text-align: center;
    margin-bottom: .25em;
  }

  /* Source order: hero, then everything up to and including the buy button,
     then the gallery. Only two items need moving; the rest keep the default
     order of 0 and so follow in DOM order (gallery, tabs, related). */
  .woocommerce div.product > .rmx-vhero { order: -2; }
  .woocommerce div.product > .summary   { order: -1; }

  /* The gallery is no longer the first thing on the page, so it does not need
     to hold the top margin. */
  .woocommerce div.product .woocommerce-product-gallery { margin-top: 0; }

  /* rmx.js moves the gallery in here, under the email opt-in — the last field
     of the form — so it is still selling while the buyer fills the form in.
     The slot only takes up room once it has the gallery in it. */
  .rmx-gallery-slot:not(:empty) { margin: 26px 0 4px; }
}

/* A looping background video is precisely what this setting is about: the
   player is never built, and the hero stays a still, dark band. */
@media (prefers-reduced-motion: reduce) {
  .rmx-vhero__media { display: none; }
}


/* The homepage hero's phone video used to be sized here, with object-fit:
   cover, and this sheet loads after style.css — so it quietly won over the
   hero's own rules and cropped the cut. It lives with the rest of the hero in
   style.css now; nothing about it was ever WooCommerce's business. */


/* --- Product gallery ----------------------------------------------
   The thumbnail row used to be hidden here, on the grounds that a
   bare swipeable frame reads as a lookbook rather than a shop
   listing. The comment that replaced it claimed the dots stayed —
   they did not. FlexSlider's thumbnails ARE its pager, so hiding
   them left a six-photograph gallery with nothing at all to say so,
   and five of the six were never seen.

   They are back, but as a strip of three rather than a row of every
   image: three is enough to promise there is more without turning
   the column into a contact sheet, and the rest arrive on their own
   as the slider rotates (three seconds — see
   rmx_product_carousel_options()). Overflow scrolls, so the row can
   also be dragged by hand. */
/* Qualified with .woocommerce-product-gallery for the same reason the gallery
   rule higher up this file is: WooCommerce's own sheet claims
   `div.product div.images .flex-control-thumbs` at (0,3,2) and sets overflow
   and the margins there, so anything shorter than that loses and the strip
   silently refuses to scroll. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* The strip is a peek at the roll, not a scrollbar to operate. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
  /* Exactly three in view, whatever the column is doing. */
  flex: 0 0 calc((100% - 20px) / 3);
  margin: 0;
  scroll-snap-align: start;
}

/* Woo prints width/height attributes on these from an inline onload handler,
   so the box has to be taken back in CSS. Square crops, because a mixed
   portrait-and-landscape roll makes the strip jump about otherwise. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: var(--rmx-radius-sm);
  border: 1px solid transparent;
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img:hover {
  opacity: .85;
  transform: translateY(-2px);
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--rmx-pink);
}

.woocommerce div.product .woocommerce-product-gallery {
  position: relative;
}

/* The gallery sits directly under the title on a phone — see the
   slot printed by rmx_product_gallery_slot(). It is the full width
   of the summary column there, so it needs no side gutter. */
.rmx-gallery-slot:not(:empty) { margin: 18px 0 26px; }

.rmx-gallery-slot .woocommerce-product-gallery { margin: 0; }



/* --- Tag demo -------------------------------------------------------
   The example post under the handle field. Sits inside [data-rmx-ig], so
   it is shown and hidden by the tagging checkbox along with the handle.
   Capped narrow: it is an illustration beside a form field, not a
   feature of the page in its own right. */
.rmx-igdemo {
  margin: 16px 0 0;
  max-width: 340px;
}

.rmx-igdemo__card {
  background: var(--rmx-card);
  border: 1px solid var(--rmx-line-soft);
  border-radius: 14px;
  overflow: hidden;
}

.rmx-igdemo__head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
}

.rmx-igdemo__avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rmx-card-hi);
  border: 1px solid var(--rmx-line);
  font-size: .9rem;
}

.rmx-igdemo__who { display: flex; flex-direction: column; line-height: 1.25; }
.rmx-igdemo__who strong { color: var(--rmx-cream); font-size: .82rem; }
.rmx-igdemo__who small  { color: var(--rmx-muted); font-size: .7rem; }

.rmx-igdemo__card img {
  display: block; width: 100%; height: auto;
}

.rmx-igdemo__body { padding: 9px 11px 12px; }

.rmx-igdemo__acts {
  display: flex; gap: 11px;
  font-size: 1rem; line-height: 1;
  margin-bottom: 7px;
  color: var(--rmx-cream);
}
.rmx-igdemo__heart { color: var(--rmx-pink); }

.rmx-igdemo__likes {
  margin: 0 0 4px;
  font-size: .8rem; color: var(--rmx-cream);
}

.rmx-igdemo__cap {
  margin: 0;
  font-size: .78rem; line-height: 1.45;
  color: var(--rmx-muted);
}
.rmx-igdemo__cap strong { color: var(--rmx-cream); }
.rmx-igdemo__tag { color: var(--rmx-gold-lt); }

.rmx-igdemo__note {
  margin-top: 7px;
  font-size: .7rem; letter-spacing: .02em;
  color: var(--rmx-muted);
}