/* ==========================================================================
   RPLNSH theme base.

   Tokens and the generic vocabulary (buttons, headings, prose, schemes,
   spacing) reproduce the computed values measured off drinksult.com on
   2026-09-13, with RPLNSH's palette and type in place of SULT's. Authored
   fresh: the numbers are theirs, the code is ours.

   Colour rule (Ella, 23 Sept 2026): everywhere SULT runs its lime, RPLNSH
   runs --rp-cycle. It rests on RPLNSH's own green, #a8ff45, and holds still.
   It moves only on intent: pointing at or picking a flavour sets
   data-rp-flavour on the root (rplnsh.js), and the registered property
   transitions to that flavour, so the accent, the pack and the label all
   move together. No clock.
   ========================================================================== */

/* ---- Chivo, self-hosted (OFL). Variable weight covers the 400/500/600/700
        SULT loads as static instances. ---------------------------------- */
@font-face { font-family: 'Chivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('chivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('chivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('chivo-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Chivo'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('chivo-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chivo'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('chivo-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chivo'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('chivo-italic-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* ---- the colour cycle ------------------------------------------------- */
@property --rp-cycle { syntax: '<color>'; inherits: true; initial-value: #a8ff45; }

@keyframes rp-cycle-var {
  0%   { --rp-cycle: #fcbd2a; }
  25%  { --rp-cycle: #f9dfd2; }
  50%  { --rp-cycle: #b4e327; }
  75%  { --rp-cycle: #e74979; }
  100% { --rp-cycle: #fcbd2a; }
}

/* flavour intent. Set by rplnsh.js on hover, focus or pick; cleared on leave */
:root[data-rp-flavour="orange-mango"] { --rp-cycle: var(--rp-accent); }
:root[data-rp-flavour="lychee"]       { --rp-cycle: var(--rp-blush); }
:root[data-rp-flavour="green-apple"]  { --rp-cycle: var(--rp-green); }
:root[data-rp-flavour="watermelon"]   { --rp-cycle: var(--rp-pink); }

/* kept for the sections built before the shared clock existed */
@keyframes rp-cycle-bg {
  0%   { background-color: var(--rp-accent); }
  25%  { background-color: var(--rp-blush); }
  50%  { background-color: var(--rp-green); }
  75%  { background-color: var(--rp-pink); }
  100% { background-color: var(--rp-accent); }
}

@keyframes rp-cycle-fg {
  0%   { color: var(--rp-accent); }
  25%  { color: var(--rp-blush); }
  50%  { color: var(--rp-green); }
  75%  { color: var(--rp-pink); }
  100% { color: var(--rp-accent); }
}

/* ---- tokens ------------------------------------------------------------ */
:root {
  /* palette, locked 2026-09-06 */
  --rp-accent: #fcbd2a;
  --rp-blush:  #f9dfd2;
  --rp-green:  #b4e327;
  --rp-pink:   #e74979;
  --rp-ink:    #000000;
  --rp-paper:  #ffffff;
  --rp-hairline: rgba(0, 0, 0, 0.14);
  --rp-lime:   #a8ff45; /* RPLNSH's own green, off their live site. The resting accent (Ella, 23 Sept) */
  --rp-cycle: var(--rp-lime);
  /* 24 Sept (Ella: the flavour colour change was flashy): a slow blend, and a short wait so passing over a
     flavour on the way somewhere else changes nothing */
  transition: --rp-cycle 900ms var(--rp-ease-in-out) 120ms;

  /* motion. Four durations and three curves; nothing animates layout */
  --rp-dur-1: 280ms;  /* hover, press. 24 Sept (Ella: things flashed too quickly): was 160 */
  --rp-dur-2: 420ms;  /* state change: colour intent, toggles, fades. 24 Sept: was 240 */
  --rp-dur-3: 520ms;  /* panels and dialogs opening. 24 Sept: was 360 */
  --rp-dur-4: 700ms;  /* a section arriving */
  --rp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rp-ease-emph: cubic-bezier(0.3, 1.25, 0.5, 1); /* one small overshoot, for a confirmation */

  /* type. Chivo throughout, the same roles SULT gives it */
  --rp-ui: 'Chivo', sans-serif;
  --rp-display: 'Chivo', sans-serif;
  --rp-body: 'Chivo', sans-serif;

  --subheading-font-family: 'Chivo', sans-serif;
  --subheading-font-weight: 400;
  --subheading-font-style: normal;
  --subheading-font-size: 0.6875rem;
  --subheading-text-transform: uppercase;
  --subheading-letter-spacing: -0.01em;

  --heading-font-family: 'Chivo', sans-serif;
  --heading-font-weight: 400;
  --heading-font-style: normal;
  --heading-text-transform: uppercase;
  --heading-letter-spacing: -0.05em;
  --heading-line-height: 0.95;

  --text-font-family: 'Chivo', sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --text-transform: none;
  --text-letter-spacing: 0em;
  --text-line-height: 1.6;
  --text-font-medium-weight: 500;
  --text-font-bold-weight: 500;

  /* body scale (item 27). drinksult.com re-measured twice on 23 Sept: paragraph
     copy is 14px at 400, line-height 1.6, on home and product, 390 and 1440 (the
     queue's 16px figure was the body element, not the copy). Ours was 15px at
     350 and 14px at 600. Body copy is 14px at 400; anything at body scale
     heavier than that is a label, at 500 */
  --rp-fs-body: 0.875rem;
  --rp-fs-small: 0.8125rem;
  --rp-fs-label: 0.8125rem;
  --rp-fs-caption: 0.75rem;
  --rp-fw-body: 400;
  --rp-fw-label: 500;

  --button-font: var(--text-font-style) var(--text-font-weight) var(--button-font-size) / normal var(--text-font-family);
  --button-text-transform: uppercase;
  --button-letter-spacing: 0em;
  --button-font-size: 0.6875rem;

  /* heading scale: the same fluid clamps, scaled by the same factor */
  --text-heading-size-factor: 0.70;
  --text-display-xl: max(0.75rem, clamp(3.5rem, 1.9223rem + 6.7314vw, 10rem) * var(--text-heading-size-factor));
  --text-display-l: max(0.75rem, clamp(3.375rem, 2.1311rem + 5.3074vw, 8.5rem) * var(--text-heading-size-factor));
  --text-display-m: max(0.75rem, clamp(3.25rem, 2.3701rem + 3.7540vw, 6.875rem) * var(--text-heading-size-factor));
  --text-h1: max(0.75rem, clamp(3rem, 2.3325rem + 2.8479vw, 5.75rem) * var(--text-heading-size-factor));
  --text-h2: max(0.75rem, clamp(2.5rem, 1.9539rem + 2.3301vw, 4.75rem) * var(--text-heading-size-factor));
  --text-h3: max(0.75rem, clamp(2rem, 1.6359rem + 1.5534vw, 3.5rem) * var(--text-heading-size-factor));
  --text-h4: max(0.75rem, clamp(1.75rem, 1.4466rem + 1.2945vw, 3rem) * var(--text-heading-size-factor));
  --text-h5: max(0.75rem, clamp(1.375rem, 1.2233rem + 0.6472vw, 2rem) * var(--text-heading-size-factor));
  --text-h6: max(0.75rem, clamp(1.1875rem, 1.1117rem + 0.3236vw, 1.5rem) * var(--text-heading-size-factor));
  --text-h7: max(0.75rem, clamp(1rem, 0.9545rem + 0.1942vw, 1.1875rem) * var(--text-heading-size-factor));
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;

  /* container and spacing */
  --container-max-width: 100%;
  --container-gutter: 2rem;
  --section-vertical-spacing: 4.75rem;
  --section-stack-row-gap: 2rem;
  --section-disable-padding-collapsing: 1;

  /* forms */
  --form-gap: 1rem;
  --fieldset-gap: 0.5rem;
  --form-control-gap: 0.5rem;
  --checkbox-control-gap: 0.75rem;
  --input-padding-block: 0.65rem;
  --input-padding-inline: 1rem;
  --checkbox-size: 0.875rem;

  /* radii. Three values, nothing else: surfaces, small controls, pills */
  --rounded-full: 9999px;
  --rp-r-lg: 16px;
  --rp-r-sm: 8px;
  --rp-r-pill: 999px;
  --subheading-border-radius: var(--rp-r-pill);
  --button-border-radius: var(--rp-r-pill);
  --input-border-radius: var(--rp-r-pill);

  /* depth. Two steps: resting surface, lifted surface */
  --rp-shadow-1: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 20px -8px rgb(0 0 0 / 0.10);
  --rp-shadow-2: 0 2px 4px rgb(0 0 0 / 0.05), 0 20px 44px -14px rgb(0 0 0 / 0.18);

  /* the header sits over the page, so nothing below reserves room for it */
  --announcement-bar-height: 42px;
  --header-height: 0px;
  --sticky-area-height: 0px;
  --sticky-offset: 0px;
  --header-group-height: var(--announcement-bar-height);

  --transform-logical-flip: 1;
  --transform-origin-start: left;
  --transform-origin-end: right;
  --icon-stroke-width: 1px;

  /* status and product colours */
  --page-overlay: 0 0 0 / 0.4;
  --dialog-backdrop-blur: 12px;
  --success-background: 227 240 232;
  --success-text: 22 131 66;
  --warning-background: 253 241 224;
  --warning-text: 237 138 0;
  --error-background: 251 224 224;
  --error-text: 224 0 0;
  --on-sale-text: 250 63 63;
  --on-sale-badge-background: 250 63 63;
  --on-sale-badge-text: 255 255 255;
  --sold-out-badge-background: 0 0 0;
  --sold-out-badge-text: 255 255 255;
  --custom-badge-background: 224 72 55;
  --custom-badge-text: 255 255 255;
  --star-color: 0 0 0;
  --default-color-scheme-background: 252 252 252;
  --default-color-scheme-text-color: 0 0 0;
  --page-background: var(--default-color-scheme-background);

  color-scheme: light;
}

@media screen and (min-width: 700px) {
  :root {
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --subheading-font-size: 0.75rem;
    --container-gutter: 2.5rem;
    --form-gap: 1.25rem;
    --fieldset-gap: 0.75rem;
    --input-padding-block: 0.75rem;
    --button-font-size: 0.75rem;
  }
}

@media screen and (min-width: 1000px) {
  :root {
    --section-vertical-spacing: 6.5rem;
    --section-stack-row-gap: 3rem;
  }
}

@media screen and (min-width: 1399px) {
  :root {
    --section-vertical-spacing: 8rem;
    --container-gutter: 4.5rem;
  }
}

/* ---- colour schemes. Triplets stay triplets so rgb(var(--x) / .6) works;
        anything that was SULT's lime is a colour value on the cycle. -------- */
.color-scheme {
  background-color: rgb(var(--background));
  background-image: var(--background-gradient);
  color: rgb(var(--text-color));
  border-color: rgb(var(--border-color));
}

.color-scheme--scheme-1 {
  --accent-color: var(--rp-cycle);
  --background: 252 252 252;
  --background-gradient: ;
  --background-secondary: 245 245 245;
  --text-color: 0 0 0;
  --border-color: 231 231 233;
  --subheading-background: 0 0 0 / 0;
  --subheading-border: none;
  --subheading-text-color: 0 0 0;
  --subheading-has-padding: 0;
  --heading-highlight-accent-color: 0 0 0;
  --heading-highlight-text-color: 255 255 255;
  --button-bg: var(--rp-cycle);
  --button-fg: rgb(0 0 0);
  --button-text-primary: 0 0 0;
  --input-background: 255 255 255;
  --input-text-color: 0 0 0;
}

.color-scheme--scheme-2 {
  --accent-color: rgb(0 0 0);
  --background: 252 189 42;
  --background-gradient: ;
  --background-secondary: 236 235 233;
  --text-color: 0 0 0;
  --border-color: 0 0 0 / 0.14;
  --subheading-background: 0 0 0 / 0;
  --subheading-border: none;
  --subheading-text-color: 255 255 255;
  --subheading-has-padding: 0;
  --heading-highlight-accent-color: 255 255 255;
  --heading-highlight-text-color: 255 255 255;
  --button-bg: rgb(0 0 0);
  --button-fg: var(--rp-cycle);
  --button-text-primary: 0 0 0;
  --input-background: 255 255 255;
  --input-text-color: 0 0 0;
  background-color: var(--rp-cycle);
}

/* SULT draws scheme-2 borders in its lime, so ours follow the cycle */
.color-scheme--scheme-2, .color-scheme--scheme-2 * { border-color: var(--rp-cycle); }

.color-scheme--scheme-3 {
  --accent-color: var(--rp-cycle);
  --background: 229 227 221;
  --background-gradient: ;
  --background-secondary: 240 240 240;
  --text-color: 0 0 0;
  --border-color: 206 204 199;
  --subheading-background: 0 0 0 / 0;
  --subheading-border: none;
  --subheading-text-color: 0 0 0;
  --subheading-has-padding: 0;
  --heading-highlight-accent-color: 0 0 0;
  --heading-highlight-text-color: 255 255 255;
  --button-bg: var(--rp-cycle);
  --button-fg: rgb(0 0 0);
  --button-text-primary: 0 0 0;
  --input-background: 255 255 255;
  --input-text-color: 0 0 0;
}

.color-scheme--scheme-4 {
  --accent-color: rgb(0 0 0);
  --background: 236 235 233;
  --background-gradient: ;
  --background-secondary: 255 255 255;
  --text-color: 255 255 255;
  --border-color: 238 237 235;
  --subheading-background: 0 0 0 / 0;
  --subheading-border: none;
  --subheading-text-color: 255 255 255;
  --subheading-has-padding: 0;
  --heading-highlight-accent-color: 0 0 0;
  --heading-highlight-text-color: 255 255 255;
  --button-bg: rgb(0 0 0);
  --button-fg: rgb(255 255 255);
  --button-text-primary: 255 255 255;
  --input-background: 255 255 255;
  --input-text-color: 0 0 0;
}

/* ---- element defaults --------------------------------------------------- */
*, ::before, ::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: rgb(var(--border-color)); /* outside a colour scheme this is invalid and falls back to currentcolor, as on SULT */
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
  scroll-padding-top: calc(var(--sticky-area-height) + 20px);
  line-height: 1.5;
}

body {
  margin: 0;
  position: relative;
  background: rgb(var(--page-background));
  color: rgb(var(--default-color-scheme-text-color));
  font: var(--text-font-style) var(--text-font-weight) var(--text-base) / var(--text-line-height) var(--text-font-family);
  text-transform: var(--text-transform);
  letter-spacing: var(--text-letter-spacing);
  -webkit-font-smoothing: antialiased;
}

hr { border-top-width: 1px; height: 0; justify-self: stretch; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; width: 100%; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; color: inherit; margin: 0; padding: 0; }
select { white-space: nowrap; text-overflow: ellipsis; }
summary { list-style-type: none; }
summary::-webkit-details-marker { display: none; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ul, ol, menu { margin: 0; padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: rgb(var(--text-color) / 0.5); }
/* page to page (24 Sept, Ella: "Read the article" flashed on click). Same-site moves cross-fade where the
   browser supports it; elsewhere the page changes as before. No grey tap box on iPhone; focus rings stay. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--rp-ease-out); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } :root { transition: none; } }
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* 10% side tab (24 Sept, Ella): black, white type set sideways, pinned to the right edge at mid height on
   every page and width. 26px wide so it sits in the page gutter, never over the main message. It steps
   aside while the menu, zoom, a drawer or a pop-up is open. The old pop-up tab (.rp-ep__tab) is retired. */
.rp-offer-tab {
  position: fixed;
  right: 0; /* physical: pinned to the right edge in any writing mode */
  top: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 14px 0;
  border: 0;
  border-radius: 8px 0 0 8px;
  background: var(--rp-ink);
  color: var(--rp-paper);
  font-size: var(--rp-fs-caption);
  font-weight: var(--rp-fw-label);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity var(--rp-dur-2) var(--rp-ease-out), color var(--rp-dur-1) var(--rp-ease-out);
}
/* the sideways type sits on an inner span: older Safari will not set writing-mode on a button itself */
.rp-offer-tab__label { display: block; writing-mode: vertical-rl; transform: rotate(180deg); }
.rp-offer-tab:focus-visible { outline: 2px solid var(--rp-lime); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rp-offer-tab:hover { color: var(--rp-lime); } }
html:is(.rp-menu-lock, .rp-zoom-lock) .rp-offer-tab,
body:has(dialog[open]) .rp-offer-tab,
body:has(cart-drawer[open]) .rp-offer-tab { opacity: 0; pointer-events: none; }
.rp-ep__tab { display: none !important; }

/* iPhone Safari zooms the whole page when a focused field's text is under 16px (24 Sept, Ella: the contact
   box zoomed). Touch screens hold every typed or picked field at 16px; desktop keeps each section's size.
   !important because section rules (.section-x .field) outrank a base rule. No maximum-scale on the
   viewport: that would also stop pinch zoom. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="radio"], [type="checkbox"], [type="range"], [type="submit"], [type="button"], [type="hidden"]), select, textarea { font-size: 16px !important; }
}
:disabled { cursor: default !important; }
picture, img, svg, video, canvas, audio, iframe, embed, object { display: block; }
img { color: transparent; object-fit: cover; object-position: center; max-width: 100%; height: auto; max-height: 100%; }
picture { height: inherit; width: inherit; }
picture source { display: contents; }
picture img, figure img { height: inherit; width: inherit; }
video { max-width: 100%; height: auto; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  z-index: 999;
  padding: 1rem;
  background: var(--rp-paper);
  color: var(--rp-ink);
}
.skip-link:focus { position: fixed; inset-block-start: 0; inset-inline-start: 0; }

/* ---- type ---------------------------------------------------------------- */
.heading, .display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7, .prose :where(h1, h2, h3, h4, h5, h6) {
  display: block;
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-text-transform);
  line-height: var(--heading-line-height);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
.display-xl { font-size: var(--text-display-xl); }
.display-l { font-size: var(--text-display-l); }
.display-m { font-size: var(--text-display-m); }
.h1, :where(.prose h1) { font-size: var(--text-h1); }
.h2, :where(.prose h2) { font-size: var(--text-h2); }
.h3, :where(.prose h3) { font-size: var(--text-h3); }
.h4, :where(.prose h4) { font-size: var(--text-h4); line-height: calc(var(--heading-line-height) + 0.1); }
.h5, :where(.prose h5) { font-size: var(--text-h5); line-height: calc(var(--heading-line-height) + 0.1); }
.h6, :where(.prose h6) { font-size: var(--text-h6); line-height: calc(var(--heading-line-height) + 0.1); }
.h7 { font-size: var(--text-h7); line-height: calc(var(--heading-line-height) + 0.1); }

.subheading {
  font: var(--subheading-font-style) var(--subheading-font-weight) var(--subheading-font-size) / normal var(--subheading-font-family);
  letter-spacing: var(--subheading-letter-spacing);
  text-transform: var(--subheading-text-transform);
}
.subheading-xs { font-size: calc(var(--subheading-font-size) - 1px); }
.subheading-badge {
  display: flex;
  align-items: center;
  max-width: max-content;
  padding: calc(var(--subheading-has-padding) * 0.3rem) calc(var(--subheading-has-padding) * 0.75rem);
  border: var(--subheading-border);
  border-radius: var(--subheading-border-radius);
  background: rgb(var(--subheading-background));
  color: rgb(var(--subheading-text-color));
  white-space: break-spaces;
  vertical-align: middle;
  transition: opacity var(--rp-dur-1) var(--rp-ease-in-out), transform var(--rp-dur-1) var(--rp-ease-in-out);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xxs { font-size: 10px; }
.bold { font-weight: var(--text-font-bold-weight); }
.medium { font-weight: var(--text-font-medium-weight); }
.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-balance { text-wrap: balance; }
.text-subdued { color: rgb(var(--text-color) / 0.6); }

/* the SULT marker highlight, on the cycle */
.rp-highlight {
  color: var(--rp-ink);
  background: none;
  background-image: linear-gradient(var(--rp-cycle), var(--rp-cycle));
  background-size: 100% 88%;
  background-repeat: no-repeat;
  background-position: 0 60%;
  padding: 0 4px;
  border-radius: 4px;
  box-shadow: inset 0 -0.15em 0 0 transparent, 0 0 0 0 transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- links --------------------------------------------------------------- */
.link, .prose a:not(.display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7, .button) {
  position: relative;
  background: linear-gradient(to right, currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  background-position-x: var(--transform-origin-start);
  text-decoration: none;

}
@media screen and (pointer: fine) {
  :is(.link, .prose a:not(.display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7, .button)):not([aria-current="true"]):hover { background-size: 0% 1px; background-position-x: var(--transform-origin-end); }
}
.link-reversed {
  background: linear-gradient(to right, currentColor, currentColor) 0 100% / 0 1px no-repeat;
  background-position-x: var(--transform-origin-end);
  text-decoration: none;

}
.link-reversed[aria-current="true"], .link-reversed[aria-selected="true"] { background-size: 100% 1px; }
@media screen and (pointer: fine) {
  .link-reversed:not([aria-current="true"], [aria-selected="true"]):hover { background-size: 100% 1px; background-position-x: var(--transform-origin-start); }
}
.link-faded { color: rgb(var(--text-color) / 0.6);  }
.link-faded[aria-current="true"] { color: rgb(var(--text-color)); }
@media screen and (pointer: fine) { .link-faded:hover { color: rgb(var(--text-color)); } }
.link-faded-reverse { }
@media screen and (pointer: fine) { .link-faded-reverse:hover { color: rgb(var(--text-color) / 0.6); } }

/* ---- buttons ------------------------------------------------------------- */
.button {
  --button-padding-block: 0.75rem;
  --button-padding-inline: 1.5rem;
  --button-border-color: 0 0 0 / 0;
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  background: var(--button-bg);
  border: 1px solid rgb(var(--button-border-color));
  border-radius: var(--button-border-radius);
  color: var(--button-fg);
  font: var(--button-font);
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  text-shadow: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity var(--rp-dur-1) var(--rp-ease-out), transform var(--rp-dur-1) var(--rp-ease-out);
}
@media (pointer: fine) { .button:hover { transform: translateY(-1px); } }
.button:active { transform: scale(0.98); }
.button:not(:has(.button__content)) { padding: var(--button-padding-block) var(--button-padding-inline); }
.button--outline { color: var(--button-fg); border-color: var(--button-fg); background: none; }
.button--sm { --button-padding-block: 0.625rem; --button-padding-inline: 1.25rem; font-size: 0.6875rem; }
.button__content { display: flex; justify-content: safe center; align-items: center; column-gap: 0.75rem; padding: var(--button-padding-block) var(--button-padding-inline); }
@media screen and (min-width: 700px) {
  .button:not(.button--sm) { --button-padding-block: 0.875rem; --button-padding-inline: 2.5rem; }
}
@media screen and (pointer: fine) {
  .button__content[glowing]::after {
    --glowing-shape-width: min(40px, 60%);
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    clip-path: polygon(calc(var(--glowing-shape-width) * 0.25) 0%, var(--glowing-shape-width) 0%, calc(var(--glowing-shape-width) * 0.75) 100%, 0% 100%);
    background-color: rgb(0 0 0 / 0.1);
    transform: translate(calc(-1 * var(--glowing-shape-width)));
    transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .button:has(.button__content[glowing]):hover .button__content[glowing]::after { transform: translate(100%); }
}
.button-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.button-group > * { margin: 0 !important; }
.button-group--same-width { display: inline-grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
@media screen and (min-width: 700px) { .button-group { gap: 1.25rem; } }

/* ---- the add button (moved from snippets/rp-product-card, 24 Sept) ------- */
/* The add button, shared by the card, the subscribe chooser and the drawer's
   bottle rows. Four labels share one grid cell, so the button is always as
   wide as its widest label and never changes size between states. Only
   opacity moves; the busy label waits 150ms so a fast add never flickers. */
.rp-add {
  display: inline-grid;
  grid-template-areas: "stack";
  place-items: center;
}

.rp-add > span {
  grid-area: stack;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: opacity var(--rp-dur-1) var(--rp-ease-out);
}

.rp-add__busy,
.rp-add__done,
.rp-add__error { opacity: 0; }

.rp-add[data-state="busy"] { cursor: progress; }
.rp-add[data-state="busy"] .rp-add__label { opacity: 0; transition-delay: 150ms; }
.rp-add[data-state="busy"] .rp-add__busy { opacity: 1; transition-delay: 150ms; }
.rp-add[data-state="done"] .rp-add__label,
.rp-add[data-state="error"] .rp-add__label { opacity: 0; }
.rp-add[data-state="done"] .rp-add__done,
.rp-add[data-state="error"] .rp-add__error { opacity: 1; }

.rp-add__spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
}

.rp-add[data-state="busy"] .rp-add__spinner { animation: rp-add-turn 700ms linear infinite; }

@keyframes rp-add-turn { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .rp-add > span { transition: none; }
  .rp-add[data-state="busy"] .rp-add__spinner { animation: none; }
}

/* ---- layout -------------------------------------------------------------- */
.container {
  --container-gutter-context: var(--container-gutter);
  --distance-to-bleed: max(var(--container-gutter-context), 50% - var(--container-max-width) / 2);
  margin-inline-start: max(var(--container-gutter-context), 50% - var(--container-max-width) / 2);
  margin-inline-end: max(var(--container-gutter-context), 50% - var(--container-max-width) / 2);
}
/* SULT adds this page-wide on top of the margins: the container is inset by one gutter twice */
.container { max-width: var(--container-max-width); padding-inline: var(--container-gutter); }
.container--narrow { --container-gutter-context: min(1.75rem, var(--container-gutter)); }
.full-bleed { margin-inline: calc(-1 * var(--distance-to-bleed, var(--container-gutter))); }
.section-spacing {
  padding-block-start: calc(var(--section-disable-padding-collapsing) * var(--section-vertical-spacing-block-start, var(--section-vertical-spacing)));
  padding-block-end: var(--section-vertical-spacing-block-end, var(--section-vertical-spacing));
}
.section-spacing--tight {
  padding-block-start: min(3rem, var(--section-disable-padding-collapsing) * var(--section-vertical-spacing-block-start, var(--section-vertical-spacing)));
  padding-block-end: min(3rem, var(--section-vertical-spacing-block-end, var(--section-vertical-spacing)));
}
.section-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 2.25rem; margin-inline: var(--container-gutter); }
@media screen and (min-width: 700px) { .section-header { grid-auto-columns: auto; grid-auto-flow: column; gap: 2rem; } }
.section-stack { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--section-stack-row-gap); }
.section-stack--tight { row-gap: min(2rem, var(--section-stack-row-gap)); }
.v-stack { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: inherit; }
.h-stack { display: flex; align-items: center; justify-content: inherit; }
.gap-0\.5 { gap: 0.125rem; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; } .gap-3\.5 { gap: 0.875rem; } .gap-4 { gap: 1rem; } .gap-4\.5 { gap: 1.125rem; } .gap-5 { gap: 1.25rem; }
.gap-5\.5 { gap: 1.375rem; } .gap-6 { gap: 1.5rem; } .gap-7 { gap: 1.75rem; } .gap-8 { gap: 2rem; } .gap-9 { gap: 2.25rem; }
.gap-10 { gap: 2.5rem; } .gap-11 { gap: 2.75rem; } .gap-12 { gap: 3rem; } .gap-14 { gap: 3.5rem; } .gap-16 { gap: 4rem; } .gap-20 { gap: 5rem; } .gap-24 { gap: 6rem; }
.justify-start { justify-content: start; } .justify-center { justify-content: safe center; } .justify-end { justify-content: safe end; }
.justify-between { justify-content: space-between; } .justify-evenly { justify-content: space-evenly; }
.justify-items-start { justify-items: start; } .justify-items-center { justify-items: safe center; } .justify-items-end { justify-items: safe end; }
.justify-self-start { justify-self: start; } .justify-self-center { justify-self: center; } .justify-self-end { justify-self: end; }
.align-center { align-items: center; }
.align-self-stretch { align-self: stretch; } .align-self-start { align-self: start; } .align-self-center { align-self: center; } .align-self-end { align-self: end; }
.place-self-start { place-self: start; } .place-self-start-center { place-self: start center; } .place-self-start-end { place-self: start end; }
.place-self-center { place-self: center; } .place-self-center-start { place-self: center start; } .place-self-center-end { place-self: center end; }
.place-self-end { place-self: end; } .place-self-end-start { place-self: end start; } .place-self-end-center { place-self: end center; }
.shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; } .h-full { height: 100%; }
.mx-auto { margin-inline: auto; }
.block { display: block; } .inline-block { display: inline-block; } .grid { display: grid; } .flex { display: flex; } .contents { display: contents; }
.relative { position: relative; }
.hidden, .empty\:hidden:empty { display: none; }
.rounded-full { border-radius: var(--rounded-full); }
.opacity-0 { opacity: 0; }
.max-w-full { max-width: 100%; } .max-w-xs { max-width: 26.5rem; } .max-w-sm { max-width: 36rem; } .max-w-md { max-width: 48rem; }
.max-w-lg { max-width: 60rem; } .max-w-xl { max-width: 68rem; } .max-w-2xl { max-width: 78rem; }
.min-h-fill { min-height: calc(100svh - var(--sticky-area-height, 0px)); }
.unstyled-list { list-style: none; }
:where(ol, ul):not(.unstyled-list) li { margin-block-start: 0; padding-inline-start: 1ch; }
.scroll-area { overflow: auto hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.scroll-area::-webkit-scrollbar { display: none; }
.snap-x { scroll-snap-type: x mandatory; } .snap-y { scroll-snap-type: y mandatory; }
.snap-start { scroll-snap-align: start; scroll-snap-stop: always; } .snap-center { scroll-snap-align: center; scroll-snap-stop: always; }

.sr-only, .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.tap-area { --tap-area-size: 2.25rem; position: relative; }
.tap-area::before { content: ""; position: absolute; width: var(--tap-area-size); height: var(--tap-area-size); top: calc(50% - var(--tap-area-size) / 2); left: calc(50% - var(--tap-area-size) / 2); }
.tap-area--sm { --tap-area-size: 1rem; }

/* ---- small components ---------------------------------------------------- */
.icon { height: auto; width: var(--icon-mobile-max-width, var(--icon-max-width, auto)); transition: transform var(--rp-dur-1) var(--rp-ease-out); }
@media screen and (min-width: 700px) { .icon { width: var(--icon-max-width, auto); } }
.text-with-icon { --text-with-icon-gap: 0.5rem; display: flex; align-items: center; gap: var(--text-with-icon-gap); }
.text-with-icon > svg { flex-shrink: 0; }
@media screen and (min-width: 700px) { .text-with-icon { --text-with-icon-gap: 1rem; } }
.rating-badge { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.375rem; line-height: normal; }
.rating-badge__stars { display: flex; column-gap: 0.125rem; }
.constrained-image { width: var(--image-mobile-max-width, var(--image-max-width)); flex-shrink: 0; max-width: 100%; }
@media screen and (min-width: 700px) { .constrained-image { width: var(--image-max-width); } }
.with-overlay::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: var(--gradient-overlay, rgb(var(--overlay, 0 0 0 / 0.3))); }
.discount-badge { display: flex; align-items: center; column-gap: 0.5rem; justify-self: baseline; padding: 0.375rem; background: rgb(var(--text-color)); color: #fff; }
.badge {
  display: block;
  width: max-content;
  padding: 0.15rem 0.375rem;
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: 0.5625rem;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 700px) { .badge { font-size: 0.625rem; } }
.badge--on-sale { background: rgb(var(--on-sale-badge-background)); color: rgb(var(--on-sale-badge-text)); }
.badge--sold-out { background: rgb(var(--sold-out-badge-background)); color: rgb(var(--sold-out-badge-text)); }
.badge-list { display: flex; flex-wrap: wrap; align-items: start; gap: 0.25rem; }
.empty-state { display: grid; place-items: center; position: relative; text-align: center; padding-block: 7.5rem; }
@media screen and (min-width: 1000px) { .empty-state { padding-block: 12.5rem; } }
@media screen and (min-width: 1150px) { .empty-state:not(.empty-state--sm) { padding-block: 17.5rem; } }

/* content box: a media layer under a padded content grid */
.content-box {
  --content-box-spacing: max(1.5rem, var(--container-gutter));
  --content-box-enable-transparent-header-compensation: 0;
  position: relative;
  display: grid;
  grid-template-rows: [full-start] calc(var(--content-box-spacing-block-start, var(--content-box-block-spacing, var(--content-box-spacing))) + var(--content-box-enable-transparent-header-compensation) * var(--header-height, 0px)) [inner-start] minmax(0, 1fr) [inner-end] var(--content-box-spacing-block-end, var(--content-box-block-spacing, var(--content-box-spacing))) [full-end];
  grid-template-columns: [full-start] var(--content-box-spacing-inline-start, var(--content-box-inline-spacing, var(--content-box-spacing))) [inner-start] minmax(0, 1fr) [inner-end] var(--content-box-spacing-inline-end, var(--content-box-inline-spacing, var(--content-box-spacing))) [full-end];
}
.content-box > * { isolation: isolate; grid-area: inner-start / inner-start / inner-end / inner-end; }
.content-box__background-media { display: grid; grid-area: full-start / full-start / full-end / full-end; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); align-items: stretch; width: 100%; height: 100%; }
.content-box[class*="min-h-"]:not(.min-h-auto) .content-box__background-media { position: absolute; inset: 0; }
.content-box__background-media > * { width: 100%; height: 100%; }
.content-box__background-media img { pointer-events: none; }

/* marquee */
.scrolling-content {
  --scrolling-content-calculated-gap: var(--scrolling-content-gap, 2ch);
  display: block;
  position: relative;
  overflow: hidden;
  text-align: start;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
@supports (overflow: clip) { .scrolling-content { overflow: clip visible; } }
.scrolling-content[direction="end-to-start"] { text-align: end; }
.scrolling-content::part(scroller) { display: flex; width: max-content; margin-inline: inherit; }
.scrolling-content__item { display: grid; grid-auto-flow: column; align-items: center; width: max-content; gap: var(--scrolling-content-calculated-gap); padding-inline-end: var(--scrolling-content-calculated-gap); }
.scrolling-content__text { display: flex; align-items: center; column-gap: min(0.8em, 2rem); }
.scrolling-content__text-icon { width: auto; height: 1em; }
.prose .scrolling-content__text > * { margin-block-start: 0 !important; }

/* ---- prose spacing system ------------------------------------------------- */
.prose {
  --prose-default-spacing: 1.5rem;
  --prose-heading-spacing: clamp(0px, 1.5em, 3.25rem);
  --prose-subheading-spacing: 2.5rem;
  --prose-button-spacing: 1.5rem;
  --prose-media-spacing: 1.75rem;
  --prose-adjacent-heading-spacing: 1em;
  --prose-combination-display-heading-paragraph-spacing: 1.875rem;
  --prose-combination-subheading-heading-spacing: 2rem;
  --prose-combination-subheading-paragraph-spacing: 1.5rem;
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 1000px) {
  .prose {
    --prose-default-spacing: 2rem;
    --prose-heading-spacing: clamp(0px, 1.25em, 4.25rem);
    --prose-button-spacing: 2rem;
    --prose-media-spacing: 2.5rem;
    --prose-combination-display-heading-paragraph-spacing: 2.5rem;
    --prose-combination-subheading-heading-spacing: 2.5rem;
  }
}
.prose--compact {
  --prose-default-spacing: 1rem;
  --prose-heading-spacing: 1rem;
  --prose-subheading-spacing: 1rem;
  --prose-button-spacing: 1rem;
  --prose-media-spacing: 1.25rem;
  --prose-adjacent-heading-spacing: 0.5em;
  --prose-combination-display-heading-paragraph-spacing: 1rem;
  --prose-combination-subheading-heading-spacing: 1rem;
  --prose-combination-subheading-paragraph-spacing: 1rem;
}
@media screen and (min-width: 1000px) {
  .prose--compact {
    --prose-default-spacing: 1.25rem;
    --prose-heading-spacing: 1.5rem;
    --prose-subheading-spacing: 1.5rem;
    --prose-button-spacing: 1.25rem;
    --prose-media-spacing: 1.5rem;
    --prose-combination-display-heading-paragraph-spacing: 1.75rem;
    --prose-combination-subheading-heading-spacing: 1.25rem;
  }
}
.prose > :first-child, .prose > div:first-child > :first-child { margin-block-start: 0; }
.prose > :last-child, .prose > div:last-child > :last-child { margin-block-end: 0; }
.prose :where(p, div):empty { display: none; }
.prose :where(p, ol, ul, form, hr, table, .accordion) { margin-block-start: var(--prose-default-spacing); }
.prose :where(h1, h2, h3, h4, h5, h6, .display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7) { margin-block-start: var(--prose-heading-spacing); }
.prose :where(:where(img, picture, figure, video, object, svg):not(.icon)) { margin-block: var(--prose-media-spacing); }
.prose :where(figure, picture) :where(img, svg, video) { margin-block: 0; }
.prose :where(.link, .link-reversed, .link-faded) { display: inline-block; }
.prose :where(br) { margin-block: 0 !important; }
.prose :where(.subheading) { margin-block-start: var(--prose-subheading-spacing); }
.prose :where(.icon, .link) { margin-block-start: var(--prose-default-spacing); }
.prose :where(button, .button-group, .button) { margin-block-start: var(--prose-button-spacing); }
.prose :where(h1, h2, h3, h4, h5, h6, .display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7) + :where(h1, h2, h3, h4, h5, h6, .display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7) { margin-block-start: var(--prose-adjacent-heading-spacing); }
.prose :where(.subheading) + :where(h1, h2, h3, h4, h5, h6, .display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7) { margin-block-start: min(0.8em, var(--prose-combination-subheading-heading-spacing)); }
.prose :where(.subheading, .icon) + :where(.subheading, .icon) { margin-block-start: var(--prose-combination-subheading-heading-spacing); }
.prose :where(.display-xl, .display-l, .display-m) + :where(p:not(.display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7)) { margin-block-start: var(--prose-combination-display-heading-paragraph-spacing); }
.prose :where(.subheading, .subheading-badge) + :where(p:not(.display-xl, .display-l, .display-m, .h1, .h2, .h3, .h4, .h5, .h6, .h7)) { margin-block-start: var(--prose-combination-subheading-paragraph-spacing); }
.prose-justify-start, .prose-justify-left { text-align: start; }
:where(:is(.prose-justify-start, .prose-justify-left) > *) { margin-inline: 0 auto; }
.prose-justify-center { text-align: center; }
:where(.prose-justify-center > *) { margin-inline: auto; }
.prose-justify-center .button-group { justify-content: safe center; }
.prose-justify-end, .prose-justify-right { text-align: end; }
:where(:is(.prose-justify-end, .prose-justify-right) > *) { margin-inline: auto 0; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }

/* ---- placeholders. Anything RPLNSH cannot back is marked, never faked. ---- */
/* placeholders are marked in the markup (data-placeholder, .rp-placeholder) for the report; nothing is drawn on the page (Ella, 2026-09-14) */

/* ---- motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* motion (2026-09-14): one reveal per section, added by rplnsh.js only to sections below the first screen */
.rp-reveal { opacity: 0; transform: translate3d(0, 28px, 0); }
.rp-reveal.is-revealed { opacity: 1; transform: none; transition: opacity var(--rp-dur-4) var(--rp-ease-out), transform var(--rp-dur-4) var(--rp-ease-out); }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { .rp-reveal { opacity: 1; transform: none; } }
/* headings wrap to balanced lines: no one-word last line, no two-word fragments (2026-09-14) */
:where(.heading, h1, h2, h3, .product-title, .rp-fp__card-title) { text-wrap: balance; }