/* Respilon KSA sections: the page level blocks the templates are assembled from (header, hero,
 * trust strip, product grid, split explainer, evidence band, routine list, product hero, sticky
 * buy bar, facts, footer). Built from tokens.css and the 12 components only. Logical properties
 * only, so one stylesheet serves RTL and LTR. Motion 300ms at most. */

/* ============ Header ============ */
.r-header { border-block-end: 1px solid var(--color-line); background: var(--color-white); }
.r-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 64px; }
.r-header__logo { display: inline-flex; align-items: center; min-block-size: var(--touch-min); }
.r-header__logo img { inline-size: 97px; block-size: 48px; }
.r-header__tools { display: flex; align-items: center; gap: var(--space-1); }
.r-nav { display: none; }
.r-nav__list { display: flex; align-items: center; gap: var(--space-8); }
.r-nav a, .r-lang {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-min);
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.r-nav a:hover, .r-lang:hover { text-decoration-line: underline; text-decoration-thickness: 1px; }
.r-lang { padding-inline: var(--space-3); font-size: var(--text-sm); }
.r-header .r-icon-btn { position: relative; }
.r-header .r-count { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
@media (min-width: 768px) {
  .r-header__bar { min-block-size: 72px; }
  .r-nav { display: block; }
  .r-header [data-menu-trigger] { display: none; }
}
.r-menu__list { display: grid; }
.r-menu__list a { display: flex; align-items: center; min-block-size: 56px; border-block-end: 1px solid var(--color-line); color: var(--color-navy); font-size: var(--text-md); font-weight: var(--weight-semibold); text-decoration: none; }

/* ============ Breadcrumbs ============ */
.r-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-1); }
.r-crumbs li { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.r-crumbs a { display: inline-flex; align-items: center; min-block-size: var(--touch-min); min-inline-size: var(--touch-min); color: var(--color-ink-muted); }
.r-crumbs [aria-current] { color: var(--color-navy); }
.r-crumbs .r-icon { color: var(--color-ink-subtle); }

/* ============ Section heads ============ */
.r-head { display: grid; gap: var(--space-3); margin-block-end: var(--space-10); }
.r-head--center { justify-items: center; text-align: center; }
.r-head .r-lead { max-inline-size: var(--measure); }

/* ============ Home hero ============ */
[data-section].r-hero { padding-block-start: var(--space-4); }
.r-hero__grid { display: grid; gap: var(--space-6); }
.r-hero__media { order: -1; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-cream); }
.r-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.r-hero__copy { display: grid; gap: var(--space-4); justify-items: start; }
.r-hero__copy .r-lead { color: var(--color-ink-muted); }
.r-hero__note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-hero__note .r-icon { color: var(--color-success); }
@media (min-width: 768px) {
  [data-section].r-hero { padding-block-start: var(--space-8); }
  .r-hero__grid { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--space-12); }
  .r-hero__media { order: 0; margin-inline: 0; border-radius: var(--radius-xl); }
  .r-hero__copy { gap: var(--space-6); }
}

/* ============ Trust strip ============ */
.r-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.r-trust__item { display: grid; align-content: start; gap: var(--space-2); }
.r-trust__item .r-icon { color: var(--color-blue); }
/* Body leading, not heading leading: a trust title is a p, and Arabic body text needs 1.6. */
.r-trust__title { font-size: var(--text-base); font-weight: var(--weight-bold); }
.r-trust__text { font-size: var(--text-sm); color: var(--color-ink-muted); }
@media (min-width: 768px) { .r-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ Product grid ============ */
.r-products { display: grid; gap: var(--space-10) var(--space-6); }
@media (min-width: 768px) { .r-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.r-card__cta { position: relative; z-index: 1; align-self: start; }

/* ============ Split: image beside text ============ */
.r-split { display: grid; gap: var(--space-8); }
.r-split__media { overflow: hidden; border-radius: var(--radius-xl); background: var(--color-cream); aspect-ratio: 1; }
.r-split__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.r-split__body { display: grid; align-content: center; gap: var(--space-6); }
@media (min-width: 768px) {
  .r-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-16); }
  .r-split--flip .r-split__media { order: 1; }
}

/* ============ Steps ============ */
.r-steps { counter-reset: r-step; display: grid; gap: var(--space-6); }
.r-steps > li { counter-increment: r-step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.r-steps > li::before {
  content: counter(r-step);
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.r-steps__title { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.r-steps__text { color: var(--color-ink-muted); }

/* ============ Evidence band ============ */
.r-stats { display: grid; gap: var(--space-8); }
.r-stat { display: grid; gap: var(--space-2); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-gold); }
.r-stat__num { font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-gold); }
.r-stat__label { font-size: var(--text-base); }
.r-source { margin-block-start: var(--space-10); max-inline-size: var(--measure); font-size: var(--text-sm); }
.r-source cite { font-style: normal; }
@media (min-width: 768px) {
  .r-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
  .r-stat__num { font-size: var(--text-5xl); }
}

/* Steps as a row of cards once four or five fit side by side (the product page's how to use). */
@media (min-width: 1024px) {
  .r-steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-6); }
  .r-steps--row > li { grid-template-columns: none; align-content: start; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
}

/* ============ Duo: a section's heading beside its body (product page) ============ */
/* Below 1024px the heading sits above the body as elsewhere. From 1024px it takes the start
   column and stays in view while a long body (the FAQ) scrolls past, and the body takes the
   rest, so a section of text fills the page instead of its start half. The body column stays
   under the 680px measure at the 1200px container. */
.r-duo { display: grid; gap: var(--space-8); }
.r-duo > .r-head { margin-block-end: 0; }
.r-duo__body { min-inline-size: 0; }
@media (min-width: 1024px) {
  .r-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--space-16); }
  .r-duo > .r-head { position: sticky; inset-block-start: var(--space-8); }
  .r-duo--cards { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .r-duo--cards .r-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ Name tiles (the ingredients a pack names, some with a note) ============ */
.r-names { display: grid; gap: var(--space-3); }
.r-names li { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-cream); }
.r-names__name { font-weight: var(--weight-bold); color: var(--color-navy); }
.r-names__note { font-size: var(--text-sm); color: var(--color-ink-muted); }
@media (min-width: 600px) { .r-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ Benefits: the trust strip as cards, so four short lines hold the row ============ */
/* One card a row on a phone, the icon beside the text: two up at 390px left 165px a card and
   broke every title over two lines. */
.r-benefits { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.r-benefits .r-trust__item { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-cream); }
.r-benefits .r-trust__item > .r-icon { grid-row: 1 / span 2; align-self: start; box-sizing: content-box; padding: var(--space-2); border-radius: var(--radius-pill); background: var(--color-white); }
@media (min-width: 600px) {
  .r-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .r-benefits { gap: var(--space-6); }
  .r-benefits .r-trust__item { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); }
  .r-benefits .r-trust__item > .r-icon { grid-row: auto; }
}
@media (min-width: 1024px) {
  .r-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============ Routine list (what is in the box) ============ */
.r-routine { display: grid; }
.r-routine li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--color-line); }
.r-routine li:first-child { border-block-start: 1px solid var(--color-line); }
.r-routine__name { font-weight: var(--weight-semibold); }
.r-routine__count { flex: none; color: var(--color-ink-muted); font-size: var(--text-sm); }
.r-routine li:has(.r-routine__text) { flex-wrap: wrap; row-gap: var(--space-1); }
.r-routine__text { flex-basis: 100%; color: var(--color-ink-muted); font-size: var(--text-sm); }

/* ============ Product hero ============ */
[data-section].r-pdp { padding-block-start: var(--space-2); }
.r-pdp__grid { display: grid; gap: var(--space-6); }
.r-pdp .r-gallery__track { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
/* 3:2 on a phone so the buy button stays inside an 844px fold; 4:3 once there is a column for it. */
.r-pdp .r-gallery__slide { aspect-ratio: 3 / 2; }
.r-pdp .r-gallery__thumbs { display: none; }
/* On a phone the arrows and the count sit on the picture, and the current page leaves the crumbs
   (the H1 names it right below), so the lead fits above the fold with the button. */
.r-pdp .r-gallery { position: relative; }
.r-pdp .r-gallery__bar { position: absolute; inset-inline: 0; inset-block-end: var(--space-2); padding-inline: var(--space-2); pointer-events: none; }
.r-pdp .r-gallery__bar > * { pointer-events: auto; }
.r-pdp .r-gallery__bar .r-icon-btn { background: var(--color-white); box-shadow: var(--shadow-sm); }
.r-pdp .r-gallery__bar .r-icon-btn:disabled { visibility: hidden; }
.r-pdp .r-gallery__count { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-navy); }
.r-pdp .r-crumbs li:last-child { display: none; }
.r-pdp .r-crumbs li:nth-last-child(2) .r-icon { display: none; }
.r-buy { display: grid; align-content: start; gap: var(--space-4); }
.r-buy__eyebrow { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-ink-muted); }
.r-buy h1 { font-size: var(--text-2xl); }
.r-buy__row { display: flex; align-items: center; gap: var(--space-3); }
/* The Arabic label is wider than the English one; tighter padding keeps it on one line beside the stepper at 390px. */
.r-buy__row .r-btn { flex: 1; padding-inline: var(--space-4); white-space: nowrap; }
.r-buy__lead { color: var(--color-ink-muted); }
/* A waitlist product's status: a quiet panel, not blue bold text that reads as a link. */
.r-buy .r-price__soon { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-blue-tint); color: var(--color-navy); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.r-buy__note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-buy__note .r-icon { flex: none; color: var(--color-success); }
/* Waitlist form (parts/waitlist-form.php): the field and the button on one row, the consent box
   and any error across both. The field's wrapper steps aside so its error can span the row. */
.r-waitlist__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); }
.r-waitlist__field { display: contents; }
.r-waitlist__form .r-input { grid-row: 1; grid-column: 1; }
.r-waitlist__form .r-btn { grid-row: 1; grid-column: 2; padding-inline: var(--space-4); white-space: nowrap; }
.r-waitlist__form .r-field__error, .r-waitlist__consent { grid-column: 1 / -1; }
.r-waitlist__consent { padding-block: 0; color: var(--color-ink-muted); }
.r-waitlist .r-notice { margin-block-end: 0; }
@media (max-width: 359px) {
  .r-waitlist__form { grid-template-columns: 1fr; }
  .r-waitlist__form .r-btn { grid-row: auto; grid-column: 1; }
}
@media (min-width: 768px) {
  [data-section].r-pdp { padding-block-start: var(--space-4); }
  .r-pdp__grid { grid-template-columns: 7fr 5fr; align-items: start; gap: var(--space-12); }
  .r-pdp .r-gallery__track { margin-inline: 0; border-radius: var(--radius-lg); }
  .r-pdp .r-gallery__slide { aspect-ratio: 4 / 3; }
  .r-pdp .r-gallery__thumbs { display: flex; }
  .r-pdp .r-gallery__bar { display: none; }
  .r-pdp .r-crumbs li:last-child { display: inline-flex; }
  .r-pdp .r-crumbs li:nth-last-child(2) .r-icon { display: inline; }
  .r-buy { gap: var(--space-6); padding-block-start: var(--space-4); }
  .r-buy h1 { font-size: var(--text-4xl); }
}

/* ============ Sticky buy bar (mobile, shown once the hero button leaves the view) ============ */
.r-sticky-buy {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--gutter);
  border-block-start: 1px solid var(--color-line);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  translate: 0 100%;
  visibility: hidden;
  transition: translate var(--motion-base) var(--ease-standard), visibility var(--motion-base);
}
.r-sticky-buy[data-shown] { translate: 0 0; visibility: visible; }
@media (min-width: 768px) { .r-sticky-buy { display: none; } }

/* ============ Facts (regulatory block) ============ */
.r-facts { display: grid; gap: var(--space-4); }
.r-facts div { display: grid; gap: var(--space-1); padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-line); }
.r-facts dt { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-ink-muted); }
@media (min-width: 768px) { .r-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); } }
.r-inci + .r-inci { margin-block-start: var(--space-4); }
.r-inci__name { font-weight: var(--weight-bold); color: var(--color-navy); }

/* ============ Footer ============ */
.r-footer { padding-block: var(--space-16) var(--space-10); }
.r-footer__grid { display: grid; gap: var(--space-10); }
.r-footer__brand { display: grid; justify-items: start; gap: var(--space-4); }
.r-footer__brand img { inline-size: 97px; block-size: 48px; }
.r-footer__title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.r-footer__links { display: grid; margin-block-start: var(--space-2); }
.r-footer__links a { display: inline-flex; align-items: center; min-block-size: var(--touch-min); min-inline-size: var(--touch-min); text-decoration: none; }
.r-footer__links a:hover { text-decoration-line: underline; }
.r-legal { display: grid; gap: var(--space-2); margin-block-start: var(--space-12); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-navy-hover); font-size: var(--text-sm); }
.r-legal address { font-style: normal; }
@media (min-width: 768px) { .r-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ============ Dark surface: muted greys fail contrast on navy, so secondary text goes white ============ */
[data-surface='dark'] .r-lead, [data-surface='dark'] .r-eyebrow, [data-surface='dark'] .r-muted { color: var(--color-white); }

/* ---- Content pages: prose rendered from content/<row>.<lang>.md by page.php ---- */
.r-prose ul, .r-prose ol { padding-inline-start: var(--space-6); }
.r-prose li + li { margin-block-start: var(--space-2); }
/* A link that is a list item's point ("Returns: the returns page") gets a 44px tap area; the
   negative margin keeps the line box, so the list does not move. */
.r-prose li > a { display: inline-block; padding-block: var(--space-2); margin-block: calc(-1 * var(--space-2)); }
.r-prose h3 { margin-block-start: var(--space-6); }
.r-after { margin-block-start: var(--space-8); }
.r-page .r-head { margin-block-end: 0; }
.r-cart-page .r-head { margin-block-end: var(--space-8); }

/* ============ Bag (page-cart.php and woocommerce/cart/): lines beside the totals ============ */
.r-cart { display: grid; gap: var(--space-10); }
.r-cart__list { display: grid; }
.r-cart .r-line__media { overflow: hidden; }
.r-cart .r-line__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.r-cart .r-line__name a { display: inline-flex; align-items: center; min-block-size: var(--touch-min); color: inherit; text-decoration: none; }
.r-cart .r-line__name a:hover { text-decoration-line: underline; }
.r-cart .r-line__info > .r-btn--link { justify-content: flex-start; }
.r-cart__lines[aria-busy='true'] { opacity: 0.6; cursor: progress; }
.r-totals { display: grid; align-content: start; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-cream); }
.r-totals__title { font-size: var(--text-lg); }
.r-totals__list { display: grid; gap: var(--space-3); }
.r-totals__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.r-totals__row dd { margin: 0; }
.r-totals__row--total { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-line); font-weight: var(--weight-bold); }
.r-totals__row--total .r-price__now { font-size: var(--text-xl); }
.r-totals__row--vat { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-totals__free { font-weight: var(--weight-bold); color: var(--color-success); }
.r-totals__note { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-totals__note-title { margin-block-end: var(--space-2); font-size: var(--text-base); color: var(--color-navy); }
.r-totals__note.r-prose ul { padding-inline-start: var(--space-4); }
/* The note is set small, so the prose rule's 8px pad leaves its policy link at 41px; 12px clears 44. */
.r-totals__note.r-prose li > a { padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
@media (min-width: 1200px) { .r-cart { grid-template-columns: minmax(0, 1fr) 384px; align-items: start; gap: var(--space-16); } }

/* ============ Checkout (page-checkout.php and woocommerce/checkout/): details beside the summary ============ */
.r-checkout-page .r-head { margin-block-end: var(--space-8); }
.r-checkout { display: grid; gap: var(--space-10); }
.r-checkout__title { margin-block-end: var(--space-6); font-size: var(--text-lg); }
.r-checkout__fields, .woocommerce-additional-fields__field-wrapper { display: grid; gap: var(--space-5); }
.woocommerce-additional-fields { margin-block-start: var(--space-5); }
.r-checkout .form-row { margin: 0; }
/* The city select's "another city" name field, shown only while that option is selected. A
 * browser without :has() drops the rule and always shows it, which still works. */
.r-city-other { margin-block-start: var(--space-3); }
.r-field:has(#billing_city option[value='other']:not(:checked)) .r-city-other { display: none; }
.r-checkout .woocommerce-input-wrapper { display: grid; }
/* Required is the default, so only optional fields are marked, as in the mock. */
.r-checkout .r-field__label .required { display: none; }
.r-checkout .r-field__label .optional { font-weight: var(--weight-regular); color: var(--color-ink-muted); }
.r-checkout .r-field__hint { display: block; }
.r-checkout .woocommerce-invalid .r-input { border-color: var(--color-error); }
.r-checkout .checkout-inline-error-message { font-size: var(--text-sm); color: var(--color-error); }
.r-consent { display: grid; gap: var(--space-1); margin-block-start: var(--space-6); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.r-consent .r-field__hint a, .r-payment__legal a { display: inline-block; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.r-summary { display: grid; gap: var(--space-6); }
.r-summary__list { display: grid; margin: 0; padding: 0; list-style: none; }
.r-summary .r-line__media { overflow: hidden; }
.r-summary .r-line__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.r-summary .r-line__qty { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-summary .r-line + .r-line { margin-block-start: var(--space-4); padding-block-start: var(--space-4); }
.r-payment { display: grid; gap: var(--space-4); margin-block-start: var(--space-6); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-line); }
.r-payment__title { font-size: var(--text-base); }
.r-payment__methods { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.r-payment__methods .r-notice { margin-block-end: 0; background: var(--color-white); }
.r-payment__method { padding-inline: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); }
.r-payment__box { padding-block-end: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-payment__place { display: grid; gap: var(--space-4); margin: 0; }
.r-payment__legal { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-payment__note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-grey); font-size: var(--text-sm); }
.r-payment__note .r-icon { flex: none; margin-block-start: 2px; }

/* Cash on delivery: the phone code under the method (parts/cod-box.php). */
.r-cod { display: grid; gap: var(--space-4); justify-items: start; padding-block-start: var(--space-2); color: var(--color-navy); }
.r-cod bdi { white-space: nowrap; }
.r-cod .r-field { justify-self: stretch; }
.r-cod__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.r-cod__code { font-size: var(--text-lg); text-align: center; font-variant-numeric: tabular-nums; }
.r-cod__done { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); color: var(--color-success); }
#place_order:disabled { background: var(--color-disabled); border-color: var(--color-disabled); color: var(--color-ink-subtle); cursor: not-allowed; }
.r-checkout .blockUI.blockOverlay { background: var(--color-cream) !important; }
@media (min-width: 600px) {
  .r-checkout__fields { grid-template-columns: 1fr 1fr; }
  .r-checkout__fields > .form-row { grid-column: 1 / -1; }
  .r-checkout__fields > .form-row-first { grid-column: 1; }
  .r-checkout__fields > .form-row-last { grid-column: 2; }
}
@media (min-width: 1200px) {
  .r-checkout { grid-template-columns: minmax(0, 1fr) 384px; align-items: start; gap: var(--space-16); }
  .r-checkout__side { position: sticky; inset-block-start: var(--space-6); }
}

.r-empty { display: grid; justify-items: start; gap: var(--space-4); padding-block-end: var(--space-10); }
.r-empty__title { font-size: var(--text-xl); }
.r-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============ Order received (woocommerce/checkout/thankyou.php): the summary beside the address and next steps ============ */
.r-order__lead { max-inline-size: var(--measure); margin-block-end: var(--space-8); }
.r-order { display: grid; gap: var(--space-10); }
.r-order__facts { display: grid; gap: var(--space-3); margin: 0; }
.r-order__facts div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.r-order__facts dt { color: var(--color-ink-muted); }
.r-order__facts dd { margin: 0; font-weight: var(--weight-bold); color: var(--color-navy); }
.r-order__side { display: grid; align-content: start; gap: var(--space-8); }
.r-order__title { margin-block-end: var(--space-3); font-size: var(--text-lg); }
.r-order__address { font-style: normal; }
.r-order__note { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-order__note:empty { display: none; }
@media (min-width: 1200px) {
  .r-order { grid-template-columns: minmax(0, 1fr) 384px; align-items: start; gap: var(--space-16); }
  .r-order__summary { grid-column: 2; grid-row: 1; }
  .r-order__side { grid-column: 1; grid-row: 1; }
}

/* Account while signed out (woocommerce/myaccount/form-login.php): the sign in card, then what the
   account holds; side by side from 1200px, the card first in reading order. */
.r-account__lead { max-inline-size: var(--measure); margin-block-end: var(--space-8); }
.r-account { display: grid; gap: var(--space-10); align-items: start; }
.r-account__card { display: grid; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-cream); }
.r-account__card .r-notice { margin-block-end: 0; }
.r-account__title { font-size: var(--text-lg); }
.r-account__form { display: grid; gap: var(--space-6); }
.r-account__sent bdi { white-space: nowrap; }
.r-account__code { font-size: var(--text-xl); text-align: center; font-variant-numeric: tabular-nums; }
.r-account__alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
@media (min-width: 1200px) {
  .r-account { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: var(--space-16); }
}

/* Account while signed in (woocommerce/myaccount/): the menu as a row of buttons above the page on
   a phone, a column beside it from 1200px; orders as cards; the overview's latest order and address
   side by side from 1200px. */
.r-acc { display: grid; gap: var(--space-8); align-items: start; margin-block-start: var(--space-8); }
.r-acc__menu { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.r-acc__link { display: inline-flex; align-items: center; min-block-size: var(--touch-min); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); color: var(--color-navy); font-weight: var(--weight-bold); text-decoration: none; }
.r-acc__link:hover { background: var(--color-grey); }
.r-acc__link[aria-current='page'] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.r-acc__link--out { border-color: transparent; color: var(--color-ink-muted); text-decoration: underline; }
.r-acc__lead { max-inline-size: var(--measure); margin-block-end: var(--space-8); }
.r-acc__lead bdi { white-space: nowrap; }
.r-acc__grid { display: grid; gap: var(--space-10); }
.r-acc__block { display: grid; gap: var(--space-4); align-content: start; }
.r-acc__block .r-order__title { margin-block-end: 0; }
.r-acc__block .r-btn, .r-acc__more { justify-self: start; }
.r-acc__more { display: inline-flex; align-items: center; min-block-size: var(--touch-min); font-weight: var(--weight-bold); }
.r-acc__orders { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.r-acc__pager { margin-block-start: var(--space-6); }
.r-acc__form { display: grid; gap: var(--space-6); max-inline-size: var(--measure); }
.r-acc__form .r-acc__lead { margin-block-end: 0; }
.r-acc__notes { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.r-acc__note-date { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-ordercard { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-white); }
.r-ordercard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.r-ordercard__title { font-size: var(--text-md); }
.r-ordercard__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.r-payment--pay { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
@media (min-width: 1200px) {
  .r-acc { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-16); }
  .r-acc__menu { flex-direction: column; }
  .r-acc__link { inline-size: 100%; border-radius: var(--radius-md); border-color: transparent; }
  .r-acc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); }
}

/* System states (page-system-states.php): each state shown in a frame, as the buyer meets it. */
.r-specimen { padding: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.r-specimen .r-empty { padding-block-end: 0; }
.r-specimen--flush { padding: 0; overflow: hidden; }

/* Offline banner: pinned over the top of the page while the browser has no connection. */
.r-offline { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-toast); }
.r-offline__bar { background: var(--color-navy); color: var(--color-white); }
.r-offline__bar[hidden] { display: none; }
.r-offline__inner { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--touch-min); padding-block: var(--space-2); }
.r-offline__inner .r-icon { flex: none; color: var(--color-gold); }
.r-offline__inner p { font-size: var(--text-sm); }

/* ============ Product search and the not found page (search.php, 404.php) ============ */
.r-search { max-inline-size: var(--measure); }
.r-search__row { display: flex; gap: var(--space-2); }
.r-search__row .r-input { flex: 1; min-inline-size: 0; appearance: none; }
.r-search__row .r-input::-webkit-search-cancel-button { appearance: none; }
.r-search__row .r-btn { flex: none; }
.r-links { display: grid; max-inline-size: var(--measure); border-block-start: 1px solid var(--color-line); }
.r-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--touch-min); padding-block: var(--space-2); border-block-end: 1px solid var(--color-line); color: var(--color-navy); font-weight: var(--weight-semibold); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
.r-links a:hover { color: var(--color-blue); }
.r-links .r-icon { color: var(--color-ink-subtle); }
/* Inside a content page's prose (the technology page's products) the prose list rules would indent
 * the rows and turn each link back into an inline block with its chevron wrapped under it. */
.r-prose .r-links { padding-inline-start: 0; }
.r-prose .r-links li + li { margin-block-start: 0; }
.r-prose .r-links li > a { display: flex; margin-block: 0; }

/* ============ Notices (woocommerce/notices/): added, updated, removed, errors ============ */
.r-notice { display: flex; align-items: flex-start; gap: var(--space-3); margin-block-end: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-blue-tint); color: var(--color-navy); }
.r-notice__icon { display: flex; flex: none; margin-block-start: var(--space-2); color: var(--color-blue); }
.r-notice__icon svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.r-notice__text { display: flex; flex: 1; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); min-block-size: var(--touch-min); }
.r-notice__text > li { flex-basis: 100%; }
.r-notice a { display: inline-flex; align-items: center; min-block-size: var(--touch-min); color: var(--color-blue); font-weight: var(--weight-bold); text-decoration-line: underline; text-underline-offset: 0.25em; }
.r-notice a:hover { color: var(--color-navy); text-decoration-thickness: 2px; }
.r-notice a.button { order: 1; }
.r-notice--ok { background: var(--color-success-tint); }
.r-notice--ok .r-notice__icon { color: var(--color-success); }
.r-notice--error { background: var(--color-error-tint); }
.r-notice--error .r-notice__icon { color: var(--color-error); }