@layer reset, tokens, base, sections, overrides;@layer tokens{:root{--color-primary: #155eef;--color-on-primary: #fff;--color-on-surface: #0f172a;--color-secondary: #64748b;--color-surface: #fff;--color-background: #f6f8fb;--color-border: #e6eaf0;--dark: #0f172a;--dark-2: #1e293b;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--gutter: clamp(24px, 5vw, 80px);--radius-none: 0;--radius-sm: 8px;--radius-md: var(--radius, 12px);--radius-lg: 20px;--radius-full: 999px;--r: var(--radius-md);--border-width: 1px;--border-color: var(--color-border);--font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--font-heading: var(--font-body);--base: var(--base-size, 16px);--text-xs: 0.75rem;--text-sm: 0.875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.375rem;--text-2xl: 1.75rem;--text-3xl: 2.25rem;--text-4xl: 3rem;--weight-normal: 400;--weight-medium: 600;--weight-bold: 800;--leading: 1.55;--tracking-tight: -0.02em;--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);--shadow-md: 0 12px 30px rgba(15, 23, 42, 0.1);--shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);--maxw: 1536px}}@layer base{html{-webkit-text-size-adjust: 100%;font-size: var(--base)}body{margin: 0;background: var(--color-background)}.rt-storefront{font-family: var(--font-body);color: var(--color-on-surface);line-height: var(--leading);-webkit-font-smoothing: antialiased}img{max-width: 100%;display: block}a{color: inherit;text-decoration: none}}
@layer base{.rt-btn{display: inline-flex;align-items: center;gap: var(--space-2);background: var(--color-primary);color: var(--color-on-primary);font-family: var(--font-body);font-size: 0.95rem;font-weight: var(--weight-medium);padding: 13px 24px;border: 0;border-radius: 10px;cursor: pointer}.rt-btn:hover{filter: brightness(1.06)}.rt-btn-ghost{background: var(--color-surface);color: var(--color-on-surface);border: var(--border-width) solid var(--color-border)}.rt-btn-ghost:hover{background: var(--color-background)}}
@layer base{.rt-sec-head{display: flex;align-items: flex-end;justify-content: space-between;gap: 18px;margin-bottom: var(--space-6)}.rt-sec-head h2, .rt-heading{font-size: clamp(1.6rem, 3.5vw, 2.2rem);font-weight: var(--weight-bold)}.rt-sec-head p{color: var(--color-secondary);margin: 6px 0 0}.rt-sec-head .rt-link-u{font-size: 0.92rem;font-weight: var(--weight-medium);color: var(--color-primary)}.rt-count-txt{color: var(--color-secondary);font-size: 0.95rem}}
@layer base{.rt{max-width: var(--maxw);margin: 0 auto;padding: 0 var(--gutter)}.rt-sec{padding-block: 52px}}
@layer reset{*, *::before, *::after{box-sizing: border-box}}
@layer base{h1, h2, h3, h4{font-family: var(--font-heading);margin: 0;letter-spacing: var(--tracking-tight)}}
.rt-cart[hidden] {
  display: none;
}
.rt-cart {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-body, sans-serif);
}
.rt-cart__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  animation: rt-cart-fade 0.2s ease;
}
.rt-cart__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  background: var(--color-surface, #fff);
  color: var(--color-on-surface, #111);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
  animation: rt-cart-slide 0.25s ease;
}
.rt-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}
.rt-cart__title {
  font-weight: 600;
  font-size: 1.05rem;
}
.rt-cart__close {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}
.rt-cart__items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}
.rt-cart__line {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
}
.rt-cart__img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  flex: none;
}
.rt-cart__meta {
  flex: 1;
  min-width: 0;
}
.rt-cart__name {
  font-weight: 500;
}
.rt-cart__stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.rt-cart__step {
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.2));
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}
.rt-cart__count {
  min-width: 1.5em;
  text-align: center;
}
.rt-cart__qty {
  font-size: 0.85rem;
  opacity: 0.7;
}
.rt-cart__price {
  font-weight: 600;
  white-space: nowrap;
}
.rt-cart__foot {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}
.rt-cart__subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 12px;
}
.rt-cart__checkout {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--color-primary, #111);
  color: var(--color-on-primary, #fff);
  font-weight: 600;
  cursor: pointer;
}
.rt-cart__empty {
  padding: 40px 20px;
  text-align: center;
  opacity: 0.7;
}
html.rt-cart-open {
  overflow: hidden;
}
@keyframes rt-cart-slide {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}
@keyframes rt-cart-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Footer — dark, brand + link columns + legal row. */
@layer sections {
  .rt-ftr {
    background: var(--dark);
    color: #cbd5e1;
    margin-top: var(--space-2);
  }
  .rt-ftr-in {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding: 48px var(--gutter) 32px;
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .rt-ftr-brand {
    color: #fff;
    font-size: 1.4rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .rt-ftr-brand::before {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--color-primary);
    display: inline-block;
    flex: none;
  }
  .rt-ftr-about {
    font-size: 0.9rem;
    max-width: 32ch;
    color: #94a3b8;
  }
  .rt-ftr-col-h {
    display: block;
    color: #fff;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: var(--weight-medium);
  }
  .rt-ftr-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .rt-ftr-col li {
    margin: 9px 0;
  }
  .rt-ftr-col a {
    color: #cbd5e1;
    font-size: 0.92rem;
  }
  .rt-ftr-col a:hover {
    color: #fff;
  }
  .rt-ftr-legal {
    border-top: var(--border-width) solid var(--dark-2);
    padding: 18px var(--gutter) 40px;
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: 0.82rem;
    color: #94a3b8;
  }
  @media (min-width: 48rem) {
    .rt-ftr-in {
      grid-template-columns: 2fr 1fr 1fr 1fr;
    }
  }
}
/* Newsletter band — a dark full-width call to subscribe. */
@layer sections {
  .rt-band {
    background: var(--dark);
    border-radius: var(--radius-md);
    padding: 40px 28px;
    text-align: center;
    color: #fff;
  }
  .rt-band h3 {
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
  }
  .rt-band p {
    color: #cbd5e1;
    margin-bottom: var(--space-5);
  }
  .rt-band .rt-field {
    display: inline-flex;
    max-width: 440px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 5px 5px 5px 16px;
  }
  .rt-band .rt-field input {
    flex: 1;
    border: 0;
    background: transparent;
    font: inherit;
    outline: none;
    color: var(--color-on-surface);
  }
  .rt-band .rt-field .rt-go {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    cursor: pointer;
  }
}
/* Benefits bar — a strip of icon + label reassurance tiles. */
@layer sections {
  .rt-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .rt-benefit {
    background: var(--color-surface);
    padding: var(--space-5) 22px;
    display: flex;
    gap: var(--space-3);
    align-items: center;
  }
  .rt-benefit svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 1.7;
    flex: none;
  }
  .rt-benefit b {
    display: block;
    font-size: 0.95rem;
    font-weight: var(--weight-medium);
  }
  .rt-benefit span {
    font-size: 0.82rem;
    color: var(--color-secondary);
  }
  @media (min-width: 48rem) {
    .rt-benefits {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}
/* Category cards — image tiles with a gradient label. */
@layer sections {
  .rt-cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .rt-cat-card {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    background: var(--dark-2);
  }
  .rt-cat-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rt-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.62));
  }
  .rt-cat-card .rt-lbl {
    position: relative;
    z-index: 2;
  }
  .rt-cat-card .rt-lbl b {
    display: block;
    font-size: 1.15rem;
    font-weight: var(--weight-bold);
    color: #fff;
  }
  .rt-cat-card .rt-lbl span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.9);
  }
  @media (min-width: 48rem) {
    .rt-cats {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
/* Hero — headline + CTA row on the left, a tagged image card on the right. */
@layer sections {
  /* A link the merchant put in the subheading has to look like one. The same treatment the product
     description gets from .rt-rte — that rule lives in main-product's own stylesheet, which never loads
     on a page carrying the hero. */
  .rt-sub a {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .rt-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 44px;
    align-items: center;
  }
  .rt-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: #eff4ff;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-5);
  }
  .rt-hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    font-weight: var(--weight-bold);
    line-height: 1.05;
    margin-bottom: 18px;
    text-wrap: balance;
  }
  .rt-hero p {
    color: var(--color-secondary);
    font-size: 1.12rem;
    max-width: 46ch;
    margin-bottom: var(--space-6);
  }
  .rt-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }
  .rt-hero-card {
    border-radius: var(--radius-md);
    aspect-ratio: 4/3;
    background:
      radial-gradient(120% 120% at 100% 0, #dbeafe, transparent 55%),
      linear-gradient(160deg, #eef2f7, #cdd7e6);
    position: relative;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
  }
  .rt-hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rt-hero-card .rt-tagcard {
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: #fff;
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  }
  .rt-hero-card .rt-tagcard b {
    display: block;
    font-weight: var(--weight-bold);
  }
  .rt-hero-card .rt-tagcard span {
    font-size: 0.82rem;
    color: var(--color-secondary);
  }
  @media (min-width: 48rem) {
    .rt-hero {
      grid-template-columns: 1.05fr 1fr;
      gap: 52px;
      padding-block: 64px;
    }
  }
}
/* Header — brand + nav + search + actions, with the top announcement bar. */
@layer sections {
  .rt-topbar {
    background: var(--dark);
    color: #fff;
    text-align: center;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
  }

  .rt-hdr {
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .rt-hdr-in {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 70px;
  }
  .rt-hdr-brand {
    font-size: 1.4rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .rt-hdr-brand::before {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--color-primary);
    display: inline-block;
    flex: none;
  }
  .rt-hdr-nav {
    display: none;
    gap: 22px;
    margin-left: var(--space-2);
  }
  .rt-navlink {
    font-size: 0.92rem;
    font-weight: var(--weight-medium);
    color: var(--color-on-surface);
    white-space: nowrap;
  }
  .rt-navlink:hover {
    color: var(--color-primary);
  }
  .rt-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .rt-nav-item > .rt-navlink::after {
    content: '';
    /* A pseudo-element is inline by default, and width/height do not apply to an inline box — the two
       borders below then collapsed into one thin diagonal stroke, so the chevron rendered as a stray
       "|". It has to become a block box before it can be a 0.4em square. */
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    opacity: 0.5;
  }
  /* The panel is far wider than the link that opens it, so hover alone cannot hold it: aiming at any
     tile past the second one, the pointer leaves the link SIDEWAYS before it has descended into the
     panel, and for those few pixels neither is hovered. Measured on the dev store — the menu closed at
     (396, 83) while the link ended at x=394 and the panel began at y=84. There is no vertical gap to
     close; the dead zone is beside the link, and no amount of repositioning removes it: a trigger with
     a much wider panel under it is a T, and a straight line from the stem to the far end of the bar
     leaves the shape. Every menu on the web answers this with a grace period or with JavaScript, and
     the storefront CSP is `script-src 'none'`.

     So: opening is immediate, closing waits. `display` is transitioned with `allow-discrete`, which
     flips to `block` at the START and back to `none` at the END — the panel therefore stays rendered
     AND hittable for the grace period, and the pointer can cross the notch. `visibility` would have
     done the same and cost more: the panel would exist on every page load, and its eight banner images
     with it. A browser without allow-discrete ignores the line and behaves exactly as it does today. */
  .rt-nav-drop {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    opacity: 0;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    min-width: 200px;
    z-index: 30;
    /* The hide is delayed; the show (below) is not.
       The two halves are tuned against each other so the panel is never INVISIBLE AND STILL CLICKABLE:
       opacity holds at 1 for 0.26s, fades over 0.14s, and `display` flips to none at exactly 0.4s — the
       moment it finishes fading. A fade that finished earlier would leave an unseen panel swallowing
       clicks on the page behind it.
       0.4s because the grace has to outlast a whole diagonal, not just the notch: measured in a browser,
       a 440px crossing to the far tile of the widest base took ~250ms, and 0.22s lost it. */
    transition:
      opacity 0.14s ease 0.26s,
      display 0.4s allow-discrete;
  }
  .rt-nav-item:hover > .rt-nav-drop,
  .rt-nav-item:focus-within > .rt-nav-drop {
    display: block;
    opacity: 1;
    /* Opening has no transition at all, so the menu is there the moment the pointer arrives. Leaving
       falls back to the rule above, and it is that rule's transition which supplies the grace. */
    transition: none;
  }
  /* The grace period is for crossing a gap, not for standing somewhere else: with the pointer on a
     DIFFERENT top-level item, the one it left goes quickly, or two panels overlap while one fades.
     SHORTENED, not cancelled — and that distinction is the whole rule. Killing it outright reopened the
     original bug on the widest header: reaching a tile on the right means passing over the next item
     for a dozen milliseconds on the way down, and an instant close turned that brush into a dismissal.
     80ms is longer than a pass-through and shorter than anything a person reads as a delay; by the time
     it would fire, the pointer is inside this panel, which is hovered again and no longer matches. */
  .rt-hdr-nav:has(> .rt-nav-item:hover) .rt-nav-item:not(:hover):not(:focus-within) > .rt-nav-drop {
    transition:
      opacity 0.06s ease,
      display 0.08s allow-discrete;
  }
  .rt-nav-drop ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .rt-nav-drop a {
    display: block;
    padding: var(--space-2) 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--color-on-surface);
    white-space: nowrap;
  }
  /* MEGA: the same hover/focus-within panel as the dropdown above, laid out as a grid of pictures.
     No JS, because the storefront CSP is script-src 'none' — this menu opens the way the plain one
     already did. Anchored to the nav rather than the item so a wide grid is not clipped by a narrow
     parent, and capped so a long menu wraps instead of running off the viewport. */
  .rt-nav-mega {
    left: 0;
    right: auto;
    min-width: min(680px, 92vw);
    max-width: 92vw;
    padding: var(--space-3);
  }
  .rt-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
  }
  /* `.rt-nav-drop a { display: block }` above is specificity 0,1,1 and this was 0,1,0 — so the cell
     computed as a BLOCK, flex-direction went inert, and `margin-top: auto` on the label resolved to 0.
     Labels in a row then sat at three different baselines. Scoped to out-specify it, not reordered:
     source order would not have saved it. */
  .rt-nav-drop a.rt-mega-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    text-align: center;
    color: var(--color-on-surface);
    /* The dropdown's links are nowrap; a captioned tile needs the opposite or a two-word category
       spills out of its cell. */
    white-space: normal;
  }
  .rt-nav-drop a.rt-mega-cell:hover {
    background: var(--color-background);
    color: var(--color-primary);
  }
  .rt-mega-img {
    width: 100%;
    /* The merchant's pictures are BANNERS (measured: 850x450, 1522x476), not squares. Cropping them to
       a 1/1 tile cut the middle out of every one, text included. Their own ratio is kept and only the
       height is capped, so a tall picture cannot stretch the row. */
    height: auto;
    max-height: 120px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    display: block;
  }
  .rt-mega-label {
    font-size: 0.85rem;
    line-height: 1.25;
    /* Pushes the label to the bottom of its cell, so labels line up across a row whatever each
       picture's height is — and a cell with NO picture does not float its label up to the top. */
    margin-top: auto;
  }
  .rt-nav-drop a:hover {
    background: var(--color-background);
    color: var(--color-primary);
  }
  .rt-hdr-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  /* Mobile menu: a no-JS slide-in drawer toggled by a hidden checkbox (the hamburger is its <label>). The
     drawer + scrim are siblings of the checkbox so `:checked ~` reveals them. Desktop hides all of it. */
  .rt-menu-cb {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .rt-hdr-burger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 2px;
    cursor: pointer;
    color: inherit;
  }
  .rt-hdr-burger svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }
  .rt-hdr-scrim {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .rt-hdr-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 301;
    width: min(320px, 84vw);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-border);
    box-shadow: 24px 0 60px -24px rgba(0, 0, 0, 0.45);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .rt-menu-cb:checked ~ .rt-hdr-scrim {
    opacity: 1;
    visibility: visible;
  }
  .rt-menu-cb:checked ~ .rt-hdr-drawer {
    transform: translateX(0);
  }
  .rt-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
  }
  .rt-drawer-brand {
    font-size: 1.05rem;
    font-weight: var(--weight-bold, 700);
    letter-spacing: -0.01em;
    color: var(--color-on-surface, inherit);
    text-decoration: none;
  }
  .rt-drawer-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-secondary);
  }
  .rt-drawer-close svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }
  .rt-drawer-nav {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-top: var(--border-width) solid var(--color-border);
  }
  /* Each top-level entry is a bordered card; the expanded one drops its border (kept in the flow by the
     nav's gap) and highlights its head instead. `name` on the <details> makes them an exclusive
     accordion — only one section open at a time, no JS. */
  .rt-drawer-sec,
  .rt-drawer-item {
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .rt-drawer-sec-head,
  .rt-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    color: var(--color-on-surface, inherit);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }
  .rt-drawer-sec[open] > .rt-drawer-sec-head {
    background: var(--color-background);
  }
  .rt-drawer-sec-head::-webkit-details-marker {
    display: none;
  }
  .rt-drawer-sec-txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .rt-drawer-sec-title {
    font-size: 0.95rem;
    font-weight: var(--weight-bold, 600);
  }
  .rt-drawer-sec-meta {
    font-size: 0.72rem;
    color: var(--color-secondary);
  }
  .rt-drawer-chev {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-secondary);
    transition: transform 0.2s ease;
  }
  .rt-drawer-chev::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }
  .rt-drawer-sec[open] .rt-drawer-chev {
    transform: rotate(90deg);
  }
  .rt-drawer-sec-body {
    display: flex;
    flex-direction: column;
    padding: 0 8px 8px 18px;
  }
  .rt-drawer-sec-body a {
    padding: 6px 4px;
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 0.88rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .rt-hdr-scrim,
    .rt-hdr-drawer,
    .rt-drawer-chev {
      transition: none;
    }
  }
  @media (min-width: 64rem) {
    .rt-hdr-burger,
    .rt-hdr-scrim,
    .rt-hdr-drawer {
      display: none;
    }
  }

  /* Mobile-first: the search is a plain icon; tapping it submits the (empty) form → /search, so mobile
     search lives on the /search page. The inline box + focus popup is the desktop (min-width) treatment. */
  .rt-hdr-search {
    display: flex;
    position: relative;
    align-items: center;
    color: var(--color-secondary);
  }
  .rt-hdr-search svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-secondary);
    fill: none;
    stroke-width: 1.8;
  }
  .rt-hdr-search-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  /* Mobile: input + popup hidden (the icon navigates to /search). Both appear at the desktop breakpoint. */
  .rt-hdr-search input {
    display: none;
    border: 0;
    background: transparent;
    color: var(--color-on-surface, inherit);
    font: inherit;
    outline: none;
  }
  .rt-hdr-search input::placeholder {
    color: var(--color-secondary);
  }
  .rt-hdr-search-pop {
    display: none;
    padding: 16px;
    background: var(--color-surface);
    z-index: 60;
    cursor: default;
  }
  .rt-hdr-pop-head {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--weight-bold, 600);
    color: var(--color-secondary);
    margin-bottom: 12px;
  }
  .rt-hdr-pop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rt-hdr-pop-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--color-border);
    color: var(--color-on-surface, inherit);
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .rt-hdr-pop-chip:hover {
    background: var(--color-background);
  }
  /* Recommended-for-you strip: a horizontal-scroll row of product cards. */
  .rt-hdr-pop-head2 {
    margin-top: 18px;
  }
  .rt-hdr-pop-recs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 128px;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .rt-hdr-rec {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
  }
  .rt-hdr-rec:hover {
    background: var(--color-background);
  }
  .rt-hdr-rec-ph {
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-background);
    display: grid;
    place-items: center;
  }
  .rt-hdr-rec-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rt-hdr-rec-name {
    font-size: 0.78rem;
    color: var(--color-on-surface, inherit);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rt-hdr-rec-price {
    margin-top: 3px;
    font-size: 0.8rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface, inherit);
  }
  .rt-icon-link {
    position: relative;
    display: inline-flex;
  }
  .rt-icon-link svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-on-surface);
    fill: none;
    stroke-width: 1.7;
  }
  .rt-icon-link:hover svg {
    stroke: var(--color-primary);
  }
  .rt-count {
    position: absolute;
    top: -7px;
    right: -9px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.64rem;
    font-weight: var(--weight-bold);
    min-width: 16px;
    height: 16px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }
  @media (min-width: 48rem) {
    /* Tablet+: the search is the persistent inline pill, not a bare icon — there's room once the inline
       nav has moved to the desktop breakpoint. The focus popup is an absolutely-anchored dropdown, so it
       never overlays the page the way the old mobile treatment did. Phones below this keep the icon,
       which submits to /search (where the full search bar lives). */
    .rt-hdr-search {
      gap: var(--space-2);
      padding: 9px 16px;
      background: var(--color-background);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-full);
      min-width: 240px;
      font-size: 0.9rem;
    }
    .rt-hdr-search svg {
      width: 17px;
      height: 17px;
    }
    .rt-hdr-search-btn {
      width: auto;
      height: auto;
    }
    .rt-hdr-search input {
      display: block;
      flex: 1;
      min-width: 0;
      font-size: 0.9rem;
    }
    .rt-hdr-search:focus-within .rt-hdr-search-pop {
      display: block;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: min(520px, 92vw);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    }
    .rt-hdr-search:focus-within input:not(:placeholder-shown) ~ .rt-hdr-search-pop {
      display: none;
    }
    /* Typeahead dropdown — shown by the islands runtime when typing (the popup above auto-hides once the
       input has content), so the two never overlap: empty+focus → popular/recommended, typing → suggestions. */
    .rt-hdr-suggest {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: min(520px, 92vw);
      z-index: 30;
      background: var(--color-surface);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
      overflow: hidden;
    }
    .rt-hdr-suggest .rt-suggest-item {
      display: block;
      padding: 9px 14px;
      color: var(--color-on-surface);
      text-decoration: none;
      font-size: 0.85rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rt-hdr-suggest .rt-suggest-item:hover,
    .rt-hdr-suggest .rt-suggest-item[aria-selected='true'] {
      background: var(--color-bg);
    }
  }
  @media (min-width: 64rem) {
    /* The inline nav appears only where the hamburger disappears, so the two nav controls never show at
       once — below this the links live in the drawer. */
    .rt-hdr-nav {
      display: flex;
    }
  }
}

/* Account corner dropdown (signed-in): CSS-only, toggled by the native <details>. Lives in the header
   stylesheet — not the account section — because the corner is swapped into the header as an island
   fragment, so its styles must already be on the page. <details> hides the popover until opened. */
@layer sections {
  .rt-account-menu {
    position: relative;
    display: inline-flex;
  }
  .rt-account-menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
  }
  .rt-account-menu > summary::-webkit-details-marker {
    display: none;
  }
  .rt-account-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 168px;
    padding: 6px;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
    z-index: 60;
  }
  .rt-account-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-on-surface);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .rt-account-item:hover {
    background: var(--color-bg, var(--color-border));
    color: var(--color-primary);
  }
}
/* Account page. Each section is its own URL — the nav is real links, no JS. Uses theme tokens, so the
   same file adapts to each base's palette, radius and type. */
@layer sections {
  /* Same container as the header/footer (--maxw + --gutter) so the page edges line up with the chrome.
     width:100% is load-bearing: the :has() sticky-footer below makes .rt-storefront a flex column, and a
     flex item with auto side-margins would otherwise SHRINK to its content width (a narrow centered block)
     instead of filling — width:100% makes it stretch, then max-width caps + margin centers as normal. */
  .rt-account {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 28px var(--gutter);
    /* A flex column so the grid below can grow to the account's full (viewport-filled) height. */
    display: flex;
    flex-direction: column;
  }
  /* Fill the viewport so the footer sits at the bottom even when the account content is short. Scoped to
     the account page via :has(), so the global layout is untouched (older browsers just skip the fill). */
  .rt-storefront:has(> .rt-account) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  .rt-storefront:has(> .rt-account) .rt-account {
    flex: 1 0 auto;
  }
  /* Mobile-first: one column, a horizontal nav row; the two-column sidebar layout comes in at min-width.
     flex:1 lets the grid fill the account's height (so the desktop sidebar rail can run full-height). */
  .rt-acct-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    flex: 1;
  }

  .rt-acct-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .rt-acct-id {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .rt-acct-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    color: var(--color-primary);
    display: grid;
    place-items: center;
  }
  .rt-acct-avatar svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  .rt-acct-initials {
    font-size: 0.9rem;
    font-weight: var(--weight-bold, 600);
    line-height: 1;
  }
  .rt-acct-id-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .rt-acct-id-name {
    font-size: 0.85rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rt-acct-id-sub {
    font-size: 0.75rem;
    color: var(--color-secondary);
  }

  .rt-acct-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
  }
  .rt-acct-navlink {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-on-surface);
    font-size: 0.85rem;
    font-weight: var(--weight-medium, 500);
    text-decoration: none;
    white-space: nowrap;
  }
  .rt-acct-navlink:hover {
    background: var(--color-bg);
  }
  .rt-acct-navlink[aria-current='page'] {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    color: var(--color-primary);
  }
  .rt-acct-content {
    min-width: 0;
  }
  .rt-acct-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    margin: 0 0 16px;
  }
  .rt-acct-soon {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px 22px;
  }
  .rt-acct-soon-t {
    font-size: 0.9rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    margin: 0 0 4px;
  }
  .rt-acct-soon-d {
    font-size: 0.82rem;
    color: var(--color-secondary);
    margin: 0;
    max-width: 52ch;
  }

  /* Orders — a compact table (Order · Date · Total · Status), theme-tokenized. Wide content scrolls in its
     own container so the page body never scrolls sideways; the Date column hides on the narrowest screens. */
  .rt-acct-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .rt-acct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  .rt-acct-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--weight-bold, 600);
    color: var(--color-secondary);
    border-bottom: var(--border-width, 1px) solid var(--color-border);
    white-space: nowrap;
  }
  .rt-acct-table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: var(--border-width, 1px) solid var(--color-border);
  }
  .rt-acct-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .rt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .rt-acct-order-flex {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .rt-acct-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    color: var(--color-primary);
    display: grid;
    place-items: center;
  }
  .rt-acct-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rt-acct-thumb-ph {
    font-size: 0.85rem;
    font-weight: var(--weight-bold, 600);
  }
  .rt-acct-order-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .rt-acct-order-title {
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
  }
  .rt-acct-order-meta {
    font-size: 0.78rem;
    color: var(--color-secondary);
    white-space: nowrap;
  }
  .rt-acct-td-total {
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
  }
  .rt-acct-th-date,
  .rt-acct-td-date {
    color: var(--color-secondary);
    white-space: nowrap;
    display: none; /* mobile-first: Date appears at min-width below */
  }
  @media (min-width: 34rem) {
    .rt-acct-th-date,
    .rt-acct-td-date {
      display: table-cell;
    }
  }
  /* Items column — like Date, hidden on the narrowest screens (mobile-first). */
  .rt-acct-th-items,
  .rt-acct-td-items {
    display: none;
  }
  @media (min-width: 34rem) {
    .rt-acct-th-items,
    .rt-acct-td-items {
      display: table-cell;
    }
  }
  /* Row action (View → order detail). */
  .rt-acct-th-action {
    width: 1%;
  }
  .rt-acct-td-action {
    text-align: right;
    white-space: nowrap;
  }
  .rt-acct-view {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: var(--border-width, 1px) solid var(--color-border);
    color: var(--color-on-surface);
    font-size: 0.78rem;
    font-weight: var(--weight-medium, 500);
    text-decoration: none;
  }
  .rt-acct-view:hover {
    background: var(--color-bg);
  }
  .rt-acct-subtle {
    font-size: 0.82rem;
    color: var(--color-secondary);
    margin: -8px 0 18px;
  }
  .rt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Pager — plain ?page= links (no client JS). */
  .rt-acct-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
  }
  .rt-acct-pager-range {
    font-size: 0.8rem;
    color: var(--color-secondary);
  }
  .rt-acct-pager-nav {
    display: flex;
    gap: 6px;
  }
  .rt-acct-pager-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: var(--border-width, 1px) solid var(--color-border);
    color: var(--color-on-surface);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: var(--weight-medium, 500);
  }
  .rt-acct-pager-btn:hover {
    background: var(--color-bg);
  }
  .rt-acct-pager-btn.is-disabled {
    opacity: 0.4;
  }
  /* Status pills — outlined with a leading dot; colour by tone (green / amber / neutral), works on light
     and dark grounds because it tints text + border, never a solid fill. */
  .rt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: var(--weight-medium, 500);
    white-space: nowrap;
    border: var(--border-width, 1px) solid var(--color-border);
    color: var(--color-on-surface);
  }
  .rt-pill-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
  }
  .rt-pill-ok {
    color: #3f9142;
    border-color: color-mix(in srgb, #3f9142 40%, var(--color-border));
  }
  .rt-pill-warn {
    color: #c2790c;
    border-color: color-mix(in srgb, #c2790c 40%, var(--color-border));
  }
  .rt-pill-quiet {
    color: var(--color-secondary);
  }
  /* Order detail view. */
  .rt-acct-back {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--color-secondary);
    text-decoration: none;
    margin-bottom: 14px;
  }
  .rt-acct-back:hover {
    color: var(--color-on-surface);
  }
  .rt-acct-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .rt-acct-detail-head .rt-acct-title {
    margin: 0;
  }
  .rt-acct-ditems {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  .rt-acct-ditem {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: var(--border-width, 1px) solid var(--color-border);
  }
  .rt-acct-ditem:first-child {
    border-top: 0;
  }
  .rt-acct-thumb-lg {
    width: 48px;
    height: 48px;
  }
  .rt-acct-ditem-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }
  .rt-acct-ditem-price {
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .rt-acct-detail-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-top: var(--border-width, 1px) solid var(--color-border);
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
  }
  .rt-acct-detail-block {
    margin-top: 22px;
  }
  .rt-acct-detail-block .rt-acct-field-l {
    display: block;
    margin-bottom: 6px;
  }
  /* Details — labelled fields (from the most recent order until a profile API lands). */
  .rt-acct-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 420px;
  }
  .rt-acct-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .rt-acct-field-l {
    font-size: 0.72rem;
    font-weight: var(--weight-bold, 600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-secondary);
  }
  .rt-acct-field-v {
    font-size: 0.9rem;
    color: var(--color-on-surface);
  }

  /* Addresses — hairline cards in a responsive grid, the same surface language as the rest of the page. */
  .rt-acct-addrs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }
  .rt-acct-addr {
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--color-surface);
  }
  .rt-acct-addr-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .rt-acct-addr-name {
    font-size: 0.85rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
  }
  .rt-acct-addr-lines {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-secondary);
    margin: 0;
  }
  .rt-acct-addr-phone {
    font-size: 0.82rem;
    color: var(--color-secondary);
    margin: 8px 0 0;
  }

  /* Wider viewports: the two-column sidebar layout. grid-template-rows:1fr + align-items:stretch make the
     hairline right border run the full page height as a divider; the sidebar content (card, nav) stays
     grouped at the top. Logging out is done from the header account dropdown, not this page. */
  @media (min-width: 52rem) {
    .rt-acct-grid {
      grid-template-columns: 260px minmax(0, 1fr);
      grid-template-rows: 1fr;
      gap: 0 40px;
      align-items: stretch;
    }
    /* A hairline right border defines the full-height rail and separates it from the content. */
    .rt-acct-side {
      padding-right: 24px;
      border-right: var(--border-width, 1px) solid var(--color-border);
    }
    .rt-acct-id {
      display: flex;
    }
    .rt-acct-nav {
      flex-direction: column;
      overflow-x: visible;
      gap: 2px;
    }
  }
}
/* Product grid + the product card (shared by the collection page and the home
   collection rows). */
@layer sections {
  .rt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  /* The product card. Isolation comes from the .rt-card class prefix — every rule is scoped to a
     .rt-card subtree by naming — which works in EVERY browser. No @scope wrapper: older browsers drop
     an @scope block whole, which would render the cards completely unstyled (no graceful fallback). */
  .rt-card {
      background: var(--color-surface);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      /* resting elevation bridges the theme-owned card-elevation knob (config/tokens.json elevation.rt-card
         → --elevation-card); cards rest flat by default, so this is `none` until a merchant lifts them. */
      box-shadow: var(--elevation-card, none);
      transition:
        box-shadow 0.16s,
        transform 0.16s;
    }
    .rt-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .rt-card .rt-ph {
      aspect-ratio: 1;
      background: var(--color-background);
      position: relative;
    }
    .rt-card .rt-ph img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .rt-card .rt-b {
      padding: 14px;
    }
    .rt-card-name {
      font-size: 0.98rem;
      font-weight: var(--weight-medium);
      margin-bottom: 3px;
    }
    .rt-card .rt-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-3);
      gap: var(--space-3);
    }
    .rt-card .rt-price {
      font-weight: var(--weight-bold);
    }
    .rt-card .rt-price .rt-was,
    .rt-card .rt-price s {
      color: var(--color-secondary);
      font-weight: var(--weight-normal);
      font-size: 0.85em;
      margin-left: 6px;
    }
    .rt-card-atc button {
      background: var(--color-primary);
      color: #fff;
      border: 0;
      border-radius: var(--radius-sm);
      height: 36px;
      padding: 0 14px;
      font-family: var(--font-body);
      font-weight: var(--weight-medium);
      font-size: 0.85rem;
      cursor: pointer;
      white-space: nowrap;
    }
    .rt-card-atc button:hover {
      filter: brightness(1.06);
    }
  @media (min-width: 48rem) {
    .rt-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}
@layer sections {
  .rt-coll-head .rt-sort,
  .rt-sec-head .rt-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .rt-sort-sel {
    font: inherit;
    font-size: 0.85rem;
    padding: 7px 10px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: var(--color-surface, #fff);
    color: inherit;
  }
  .rt-sort-go {
    font: inherit;
    font-size: 0.8rem;
    padding: 7px 12px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .rt-sort-go:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}
@layer sections {
  .rt-coll-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
  @media (min-width: 768px) {
    .rt-coll-body {
      grid-template-columns: 232px 1fr;
    }
  }
  .rt-filters-form {
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--r, 10px);
    padding: 16px;
  }
  .rt-filter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .rt-filter-title {
    font-weight: 600;
    font-size: 1.05rem;
  }
  .rt-filter-clear {
    font-size: 0.8rem;
    color: var(--color-primary);
    text-decoration: none;
  }
  .rt-facet {
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    padding: 10px 0;
  }
  .rt-facet-sum {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    list-style: none;
  }
  .rt-facet-sum::-webkit-details-marker {
    display: none;
  }
  .rt-facet-sum::after {
    content: '+';
    margin-left: auto;
    opacity: 0.55;
  }
  .rt-facet[open] .rt-facet-sum::after {
    content: '\2212';
  }
  .rt-facet-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-size: 0.7rem;
    line-height: 1;
  }
  .rt-facet-vals {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .rt-facet-val {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .rt-facet-val input {
    accent-color: var(--color-primary);
  }
  .rt-facet-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-facet-count {
    margin-left: auto;
    opacity: 0.55;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
  }
  .rt-facet-val--off {
    opacity: 0.4;
  }
  .rt-facet-val--off input {
    cursor: not-allowed;
  }
  .rt-price-fields {
    display: flex;
    gap: 8px;
  }
  .rt-price-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    font-size: 12px;
  }
  .rt-price-fields input {
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
  }
  .rt-avail-toggle {
    margin: 10px 0;
  }
  .rt-filter-apply {
    margin-top: 14px;
    width: 100%;
    font: inherit;
    font-size: 0.85rem;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--r, 8px);
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    cursor: pointer;
  }
}
/* Product page — gallery + info column with trust badges. */
@layer sections {
  .rt-pdp {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 44px;
  }
  .rt-pdp .rt-ph {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(160deg, #eef2f7, #cdd7e6);
    border: var(--border-width) solid var(--color-border);
  }
  .rt-pdp .rt-ph:has(.rt-gal) {
    aspect-ratio: auto;
    overflow: visible;
    background: none;
    border: 0;
  }
  .rt-pdp .rt-gal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    aspect-ratio: 1;
    gap: 4px;
    border-radius: var(--radius-md);
    scrollbar-width: none;
  }
  .rt-pdp .rt-gal::-webkit-scrollbar {
    display: none;
  }
  .rt-pdp .rt-gal-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: center;
  }
  .rt-pdp .rt-gal-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rt-pdp .rt-gal-thumbs::-webkit-scrollbar {
    display: none;
  }
  .rt-pdp .rt-gal-thumb {
    flex: 0 0 auto;
    width: 58px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--color-border);
    opacity: 0.65;
    transition: opacity 0.15s;
  }
  .rt-pdp .rt-gal-thumb:hover,
  .rt-pdp .rt-gal-thumb:focus-visible {
    opacity: 1;
  }
  .rt-pdp .rt-gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .rt-pdp .rt-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rt-crumb {
    font-size: 0.82rem;
    color: var(--color-secondary);
  }
  .rt-pdp-info h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: var(--weight-bold);
    margin: var(--space-3) 0 var(--space-2);
  }
  .rt-pdp-info .rt-price {
    font-size: 1.7rem;
    font-weight: var(--weight-bold);
    margin-bottom: 18px;
  }
  .rt-pdp-info .rt-price .rt-was,
  .rt-pdp-info .rt-price s {
    color: var(--color-secondary);
    font-weight: var(--weight-normal);
    font-size: 1.05rem;
    margin-left: var(--space-2);
  }
  .rt-rte {
    color: var(--color-secondary);
    max-width: 48ch;
    margin-bottom: var(--space-6);
  }
  .rt-rte p {
    margin: 0 0 1em;
  }
  .rt-rte a {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .rt-atc-btn {
    padding: 14px 30px;
  }
  .rt-trust {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 22px;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-secondary);
    font-size: 0.85rem;
  }
  .rt-trust div {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .rt-trust svg {
    width: 17px;
    height: 17px;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 1.8;
  }
  @media (min-width: 48rem) {
    .rt-pdp {
      grid-template-columns: 1fr 1fr;
      gap: 52px;
    }
  }
}
@layer sections {
  .rt-pdp .rt-vopts {
    border: 0;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rt-pdp .rt-vopts-legend {
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
  }
  .rt-pdp .rt-vopt {
    position: relative;
    cursor: pointer;
  }
  .rt-pdp .rt-vopt-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .rt-pdp .rt-vopt-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 78px;
    padding: 9px 14px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    transition:
      border-color 0.15s,
      box-shadow 0.15s;
  }
  .rt-pdp .rt-vopt-radio:checked + .rt-vopt-box {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
  }
  .rt-pdp .rt-vopt-radio:focus-visible + .rt-vopt-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  .rt-pdp .rt-vopt-t {
    font-size: 0.9rem;
    font-weight: 500;
  }
  .rt-pdp .rt-vopt-p {
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-variant-numeric: tabular-nums;
  }
  .rt-pdp .rt-vopt--soldout {
    cursor: not-allowed;
  }
  .rt-pdp .rt-vopt--soldout .rt-vopt-box {
    opacity: 0.5;
  }
  .rt-pdp .rt-vopt--soldout .rt-vopt-t {
    text-decoration: line-through;
  }
}
@layer sections {
  .rt-pdp .rt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
/* /search results page. Self-styled (own classes) + theme-tokenized, so it renders on every base and
   re-skins per store. No client JS. */
@layer sections {
  .rt-search {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 28px var(--gutter);
    display: flex;
    flex-direction: column;
  }
  /* Fill the viewport so the footer sits at the bottom even when the search content is short (prompt /
     no-results). Scoped to the search page via :has(), so the global layout is untouched. */
  .rt-storefront:has(> .rt-search) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  .rt-storefront:has(> .rt-search) .rt-search {
    flex: 1 0 auto;
  }
  /* The in-page search bar is for MOBILE (where the header search is just an icon → /search). On desktop
     the header has its own search box, so this one is hidden to avoid two bars. */
  .rt-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 8px 8px 8px 16px;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    background: var(--color-surface);
    position: relative;
  }
  /* Typeahead dropdown — populated by the islands runtime from /search/suggest (no client JS shipped here;
     the runtime is the storefront's shared one). Hidden until it has items. */
  .rt-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--color-surface);
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .rt-suggest-item {
    display: block;
    padding: 9px 14px;
    color: var(--color-on-surface);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rt-suggest-item:hover,
  .rt-suggest-item[aria-selected='true'] {
    background: var(--color-bg);
  }
  @media (min-width: 48rem) {
    .rt-search-bar {
      display: none;
    }
  }
  .rt-search-bar svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--color-secondary);
    stroke-width: 1.8;
  }
  .rt-search-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-on-surface);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
  }
  .rt-search-go {
    flex-shrink: 0;
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: var(--weight-bold, 600);
  }
  /* Rail + results, side by side on desktop and stacked on mobile (rail first). */
  .rt-search-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 48rem) {
    .rt-search-body {
      grid-template-columns: 220px 1fr;
      align-items: start;
    }
  }
  .rt-search-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .rt-sf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .rt-sf-title {
    font-size: 0.9rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
  }
  .rt-sf-clear {
    font-size: 0.75rem;
    color: var(--color-secondary);
    text-decoration: underline;
  }
  .rt-sf-facet {
    border-top: var(--border-width, 1px) solid var(--color-border);
    padding-top: 10px;
  }
  .rt-sf-sum {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
    font-weight: var(--weight-medium, 500);
    color: var(--color-on-surface);
  }
  .rt-sf-sum::-webkit-details-marker {
    display: none;
  }
  .rt-sf-sum::after {
    content: "+";
    margin-left: auto;
    color: var(--color-secondary);
  }
  .rt-sf-facet[open] .rt-sf-sum::after {
    content: "−";
  }
  .rt-sf-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.68rem;
    line-height: 16px;
    text-align: center;
  }
  .rt-sf-vals {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
  }
  .rt-sf-val {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-on-surface);
  }
  .rt-sf-val input {
    flex-shrink: 0;
    accent-color: var(--color-primary);
  }
  .rt-sf-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rt-sf-count {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--color-secondary);
  }
  .rt-sf-price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }
  .rt-sf-price input {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-on-surface);
    font: inherit;
    font-size: 0.8rem;
  }
  .rt-sf-price-dash {
    color: var(--color-secondary);
  }
  .rt-sf-sortrow {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: var(--border-width, 1px) solid var(--color-border);
    padding-top: 10px;
    font-size: 0.82rem;
    font-weight: var(--weight-medium, 500);
    color: var(--color-on-surface);
  }
  .rt-sf-sort {
    height: 34px;
    padding: 0 8px;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-on-surface);
    font: inherit;
    font-size: 0.8rem;
  }
  .rt-sf-apply {
    height: 36px;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: var(--weight-bold, 600);
  }
  .rt-search-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    margin: 0 0 18px;
  }
  .rt-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22px 16px;
  }
  .rt-search-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .rt-search-thumb {
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    display: grid;
    place-items: center;
  }
  .rt-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* No-image placeholder icon (shared by the search grid + the header popup's recommended cards). */
  .rt-ph-ico {
    width: 34%;
    max-width: 40px;
    height: auto;
    stroke: var(--color-border);
    fill: none;
    stroke-width: 1.5;
  }
  .rt-search-title {
    font-size: 0.85rem;
    font-weight: var(--weight-medium, 500);
    color: var(--color-on-surface);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rt-search-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
  }
  .rt-search-price-now {
    font-size: 0.9rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
  }
  .rt-search-price-was {
    font-size: 0.8rem;
    color: var(--color-secondary);
    text-decoration: line-through;
  }
  .rt-search-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 24px;
    padding: 40px 24px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
  }
  .rt-search-empty-t {
    font-size: 1rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    margin: 0 0 6px;
  }
  .rt-search-empty-d {
    font-size: 0.85rem;
    color: var(--color-secondary);
    margin: 0;
  }
  /* No-query discovery: Popular chips + Recommended strip (OFCE-818) — the desktop header popup's content,
     as a page, so mobile (icon → /search) gets the same discovery. */
  .rt-search-disc {
    margin-top: 28px;
  }
  .rt-search-disc-head {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
    margin: 0 0 12px;
  }
  .rt-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .rt-search-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-full, 999px);
    border: var(--border-width, 1px) solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-on-surface);
    text-decoration: none;
    font-size: 0.82rem;
  }
  .rt-search-chip:hover {
    background: var(--color-bg);
  }
  /* Horizontal-scroll row of recommended cards (mirrors the header popup's strip). */
  .rt-search-recs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 128px;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .rt-search-rec {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .rt-search-rec-ph {
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    display: grid;
    place-items: center;
  }
  .rt-search-rec-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rt-search-rec-name {
    font-size: 0.8rem;
    color: var(--color-on-surface);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rt-search-rec-price {
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: var(--weight-bold, 600);
    color: var(--color-on-surface);
  }
  .rt-search-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
  }
  .rt-search-pager-range {
    font-size: 0.8rem;
    color: var(--color-secondary);
  }
  .rt-search-pager-nav {
    display: flex;
    gap: 6px;
  }
  .rt-search-pager-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: var(--border-width, 1px) solid var(--color-border);
    color: var(--color-on-surface);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: var(--weight-medium, 500);
  }
  .rt-search-pager-btn:hover {
    background: var(--color-bg);
  }
  .rt-search-pager-btn.is-disabled {
    opacity: 0.4;
  }
}
@layer sections {
  .rt-mc {
    margin-top: 40px;
  }
  .rt-mc-h {
    font-size: 1.4rem;
    font-weight: var(--weight-bold);
    margin-bottom: 18px;
  }
  .rt-mc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rt-mc-image {
    padding: 0;
    overflow: hidden;
  }
  .rt-mc-image a {
    color: inherit;
    text-decoration: none;
  }
  .rt-mc-img {
    display: block;
    width: 100%;
    height: auto;
  }
  .rt-mc-image .rt-mc-col-t {
    padding: 14px 18px;
    margin: 0;
  }
  .rt-mc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rt-mc-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }
  @media (min-width: 48rem) {
    .rt-mc-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
/* Order (thank-you) page. */
@layer sections {
  .rt-oc-main {
    padding-block: 56px;
    max-width: 600px;
  }
  .rt-oc-card {
    border: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 40px;
    text-align: center;
  }
  .rt-oc-title {
    font-size: 2rem;
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-2);
  }
  .rt-oc-sub {
    color: var(--color-secondary);
    margin: 0 0 28px;
  }
  .rt-oc-rows {
    text-align: left;
    border-top: var(--border-width) solid var(--color-border);
    margin-bottom: 28px;
  }
  .rt-oc-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: 0.95rem;
  }
  .rt-oc-row span:first-child {
    color: var(--color-secondary);
  }
}
@layer sections {
  .rt-mc-col {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
  }
  .rt-mc-icon {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 12px;
  }
  .rt-mc-col-t {
    font-weight: var(--weight-bold);
    margin-bottom: 6px;
  }
  .rt-mc-col-d {
    color: var(--color-secondary);
    margin: 0;
    font-size: 0.92rem;
  }
}