@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Stockwell Supply - deep spruce on warm paper. The palette this replaced was
     a purple/teal/yellow dark theme inherited from the previous gaming brand
     (cdn.eloboost24.eu listings); see README "What changed on 2026-10-16". */
  --bg: #faf7f1;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --bg-menu: #f3efe4;
  --bg-input: #ffffff;
  --border: #e4ddce;
  --border-strong: #cec4ae;
  --text: #14261f;
  --text-dim: #4f5f58;
  /* Dimmed ink for the 11-12px uppercase labels. Chosen against the lightest
     surface it can sit on (--bg-menu) as well as white: 5.30:1 on white,
     4.62:1 on --bg-menu, both clear of the 4.5:1 AA floor. */
  --text-faint: #5f6f68;
  --primary: #12433a;
  --primary-bright: #186354;
  --primary-deep: #0b2e28;
  --accent: #d99a2b;
  /* Brass is a fill colour. As 30px text (.modal-price) or a status line it is
     only ~2:1 on paper, so anything that renders accent AS text uses this
     darkened form: 6.88:1 on white, 6.44:1 on --bg. */
  --accent-ink: #7d5106;
  --green: #2f8f4e;
  --red: #b3261e;
  --shell: 1280px;
  --pad: 24px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --header-h: 68px;
  --scroll-track: transparent;
  --scroll-thumb: #cec4ae;
  --scroll-thumb-hi: #12433a;
  --scroll-w: 8px;
}

* { box-sizing: border-box; }

/* Author `display` declarations beat the UA sheet's [hidden] rule at equal
   specificity, so .cart-count etc. stayed visible while hidden. Keep this
   above them and !important so it wins regardless of source order. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  position: relative;
  isolation: isolate;
  color: var(--text);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Column + min-height so the footer sits flush at the bottom of a short page
     instead of hanging in the middle. The promo bar is the one fixed thing at
     the bottom edge, so the space for it is added only while it is showing -
     a permanent reserve left a gap under the footer on every other page. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.has-promo { padding-bottom: 42px; }

/* Two independent warm layers move at different speeds behind the whole
   storefront. On the old dark theme these were saturated purple aurora bands;
   on paper they are low-opacity spruce and brass washes, so the movement stays
   visible without tinting the product art or fighting the text. */
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: -24%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 17% 22%, rgba(18, 67, 58, .10), transparent 48%),
    radial-gradient(ellipse at 84% 18%, rgba(217, 154, 43, .12), transparent 42%),
    radial-gradient(ellipse at 56% 82%, rgba(18, 67, 58, .07), transparent 48%),
    linear-gradient(145deg, #faf7f1 0%, #f5f0e6 52%, #f8f4ec 100%);
  transform: translate3d(-4%, -2%, 0) scale(1.02) rotate(-1deg);
  animation: aurora-drift 31s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

body::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: -24%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 76% 39%, rgba(217, 154, 43, .10), transparent 39%),
    radial-gradient(ellipse at 31% 76%, rgba(24, 99, 84, .08), transparent 43%),
    radial-gradient(ellipse at 56% 13%, rgba(18, 67, 58, .06), transparent 38%);
  transform: translate3d(4%, 3%, 0) scale(.98) rotate(2deg);
  animation: aurora-wave 39s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0% { transform: translate3d(-5%, -3%, 0) scale(1.01) rotate(-1deg); }
  50% { transform: translate3d(1%, 3%, 0) scale(1.08) rotate(1deg); }
  100% { transform: translate3d(5%, -2%, 0) scale(1.12) rotate(-1deg); }
}

@keyframes aurora-wave {
  0% { transform: translate3d(4%, 3%, 0) scale(.98) rotate(2deg); }
  50% { transform: translate3d(-3%, 5%, 0) scale(1.07) rotate(-3deg); }
  100% { transform: translate3d(2%, -4%, 0) scale(1.13) rotate(4deg); }
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; line-height: 1.1; }

.shell {
  width: 100%;
  max-width: var(--shell);
  /* Logical properties are Chrome 87 / Safari 14.1; physical first. */
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* :focus-visible is Chrome 86. The :focus rule is the fallback; engines that
   understand :focus-visible drop the :not() rule as an invalid selector. */
:focus { outline: 2px solid var(--primary-bright); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary-bright);
  outline-offset: 2px;
}

/* header */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 247, 241, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
}
/* flex `gap` is Chrome 84 and @supports cannot distinguish it from grid gap, so
   spacing uses sibling margins: identical rendering on old and new engines. */
.header-inner > * + * { margin-left: 16px; }

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.brand > * + * { margin-left: 10px; }
.brand-mark {
  width: 38px;
  height: 38px;
  display: block;
  flex-shrink: 0;
}
#brand {
  /* Was a locally-installed pixel font ('Press Start 2P' / 'Silkscreen' /
     'Minecraft'), a game-UI cue that had no relationship to a shop selling
     physical goods. Now the same self-hosted Barlow as the rest of the site. */
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
  line-height: 1;
  /* Sweeps a darker/lighter spruce sheen across the word and back: the whole
     gradient stays inside the dark spruce range on purpose, so the shop name
     keeps its contrast against the paper at every frame. The brass lives in the
     mark, not in the lettering. Wider than the text (260%) and no-repeat, so the
     ramp is off the glyphs at the extremes instead of clipping mid-colour. */
  background-image: linear-gradient(100deg,
    #12433a 0%, #186354 30%, #0b2e28 50%, #186354 70%, #12433a 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-sweep 7s ease-in-out infinite;
}
@keyframes brand-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  #brand { animation: none; background-position: 35% 50%; }
}

/* promo bar */
.promo-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: linear-gradient(90deg, #e0a52f, #c8891a);
  border-top: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}
.promo-bar::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='hex' patternUnits='userSpaceOnUse' width='60' height='52'%3E%3Cpath d='M30 0 L60 13 L60 39 L30 52 L0 39 L0 13 Z' fill='none' stroke='rgba(255,255,255,.12)' stroke-width='1.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23hex)'/%3E%3C/svg%3E");
  animation: hexFloat 20s linear infinite;
}
@keyframes hexFloat {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 52px); }
}
.promo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 16px;
  color: #241703;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  transition: opacity .2s;
  position: relative;
  z-index: 1;
}
.promo-link:hover { opacity: .9; }
.promo-link:focus { outline: none; box-shadow: 0 0 0 3px rgba(36,23,3,.45); }
.promo-link svg { flex-shrink: 0; }
@media (max-width: 620px) {
  .promo-link { font-size: 13px; padding: 8px 12px; gap: 8px; }
}

.search-wrap { flex: 1 1 auto; min-width: 0; }
#search {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
#search::placeholder { color: var(--text-faint); }
#search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(18, 67, 58, .2);
}

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  background: var(--bg-menu);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.cart-btn > * + * { margin-left: 8px; }
.cart-btn:hover { background: var(--primary-deep); border-color: var(--primary); color: #fff; }
.cart-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-count {
  display: grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #241703;
  font-size: 12px;
  font-weight: 700;
}

/* WhatsApp support. Sized off .cart-btn so it reads as the same control family
   in the header. The brand green is the one hard colour on an otherwise purple
   surface, which is what makes it legible as "different kind of link". */
.wa-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  background: #25d366;
  border: 1px solid #1eb455;
  border-radius: 999px;
  color: #05330f;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  transition: filter .15s;
}
.wa-btn > * + * { margin-left: 8px; }
.wa-btn:hover,
.wa-btn:focus { filter: brightness(1.1); color: #05330f; }
.wa-btn svg { flex: 0 0 auto; }
.wa-btn-footer {
  height: 38px;
  margin-top: 14px;
  font-size: 14px;
}

/* hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 28px;
  background:
    radial-gradient(900px 340px at 12% 0%, rgba(18, 67, 58, .10), transparent 70%),
    radial-gradient(700px 300px at 88% 10%, rgba(217, 154, 43, .16), transparent 70%),
    linear-gradient(180deg, #f5f0e6, var(--bg));
  border-bottom: 1px solid var(--border);
}
.hero::after {
  content: '';
  position: absolute;
  top: auto; right: 0; bottom: -1px; left: 0;
  inset: auto 0 -1px 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  opacity: .65;
}
.hero-inner { position: relative; }
.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--primary-bright);
}
#heroTitle {
  /* clamp() is Chrome 79 */
  font-size: 40px;
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .95;
}
.hero-meta {
  margin: 12px 0 0;
  color: var(--text-dim);
  font-size: 16px;
  max-width: 60ch;
}

/* layout */
.layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 56px;
  padding-block: 28px 56px;
  /* Grows to fill a short viewport so the footer lands at the bottom rather
     than directly under a two-row catalogue. */
  flex: 1 0 auto;
}

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 12px;
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
}

/* Themed scrollbars: Firefox reads scrollbar-*, WebKit needs pseudo-elements. */
.sidebar,
.cart-items,
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.sidebar::-webkit-scrollbar,
.cart-items::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: var(--scroll-w);
}
.sidebar::-webkit-scrollbar-track,
.cart-items::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
.sidebar::-webkit-scrollbar-thumb,
.cart-items::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.cart-items::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hi);
  background-clip: padding-box;
}
.sidebar-title {
  margin: 0 0 12px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-faint);
}

.nav { display: flex; flex-direction: column; }
.nav > * + * { margin-top: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background .15s;
}
.nav-item > * + * { margin-left: 10px; }
.nav-item:hover { background: var(--bg-menu); }
.nav-item.is-active { background: var(--primary-deep); }
/* The active pill is a dark spruce fill. --text is dark on the light theme, so
   the label has to be told to go white explicitly or it renders dark-on-dark. */
.nav-item.is-active .nav-name { color: #fff; }
.nav-thumb {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-menu);
  display: grid;
  place-items: center;
}
.nav-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nav-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nav-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-meta { font-size: 12px; color: var(--text-faint); }
.nav-item.is-active .nav-meta { color: rgba(255, 255, 255, .7); }
.nav-arrow { color: var(--text-faint); font-size: 20px; line-height: 1; }
.nav-item.is-active .nav-arrow { color: #fff; }

/* toolbar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.count {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
}
.toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Inline filter fields: label + input on same line */
.field { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; height: 40px; }
.field > * + * { margin-top: 0; }
.field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-faint);
  white-space: nowrap;
}
/* min-width:0 on the select is load-bearing. A <select> sizes to its widest
   option by default, and inside .field (flex: 1 1 calc(50% - 4px), min-width
   140px) that intrinsic width overran the row on a 375px viewport, pushing the
   whole page 12px sideways. Without it the toolbar scrolls horizontally on
   phones. */
.field select {
  min-width: 0;
  flex: 1 1 auto;
  height: 40px;
  padding: 0 34px 0 12px;
  background: var(--bg-input) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6f68' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.field select:focus { outline: none; border-color: var(--primary); }

.field-range { display: inline-flex; align-items: center; gap: 10px; height: 40px; min-width: 0; }
#priceMax { flex: 1; min-width: 160px; height: 40px; accent-color: var(--primary); cursor: pointer; }
#priceMaxOut {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.check {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.check > * + * { margin-left: 8px; }
.check input { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

.btn-reset {
  height: 40px;
  padding: 0 18px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-reset:hover { background: var(--bg-menu); border-color: var(--primary); color: var(--text); }
.btn-reset:focus { outline: none; border-color: var(--primary); }

/* grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s, box-shadow .18s, background .18s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  background: var(--bg-raised);
  box-shadow: 0 14px 32px rgba(20, 38, 31, .14);
}

/* aspect-ratio is Chrome 88. Reserve the box with padding-top instead, then
   drop the padding where the real property exists. The media box has no
   intrinsic height, so the img must be absolutely positioned to fill it. */
.card-media {
  position: relative;
  padding-top: 75%;
  background: var(--bg-menu);
  overflow: hidden;
}
@supports (aspect-ratio: 1) {
  .card-media { padding-top: 0; aspect-ratio: 4 / 3; }
}
.card-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.badge {
  position: absolute;
  top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.badge-kind { left: 10px; background: rgba(18, 67, 58, .92); color: #fff; }
.badge-out { right: 10px; background: rgba(179, 38, 30, .92); color: #fff; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 13px 14px 14px;
}
.card-body > * + * { margin-top: 7px; }
.card-cat {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary-bright);
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* min-width:0 lets the price shrink instead of forcing the row wider than the
   card on narrow viewports; the button keeps its intrinsic width. */
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  margin-top: auto;
  padding-top: 4px;
}
.card-foot .price { min-width: 0; overflow-wrap: anywhere; }
.card-foot > * + * { margin-left: 10px; }
.price {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.btn-add {
  height: 34px;
  padding: 0 15px;
  background: var(--primary);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  transition: background .15s, transform .1s;
}
.btn-add:hover { background: var(--primary-bright); }
.btn-add:active { transform: scale(.95); }
.btn-add:disabled { opacity: .55; cursor: not-allowed; }

.empty {
  padding: 60px 20px;
  text-align: center;
  background: var(--bg-raised);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.empty h2 { font-size: 21px; margin-bottom: 8px; }
.empty p { margin: 0 0 20px; color: var(--text-dim); }

.noscript-note {
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  background: var(--bg-raised);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.noscript-note h2 { font-size: 20px; margin-bottom: 8px; }
.noscript-note p { margin: 0; color: var(--text-dim); }

/* buttons */
.btn-primary {
  height: 44px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--primary-bright), var(--primary-deep));
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: filter .15s, transform .1s;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn-primary:active:not(:disabled) { transform: scale(.98); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* pagination. app.js hides the whole bar while one page covers every result,
   so a small filtered catalogue never shows a dead Previous/Next pair. */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 28px 0 8px;
}
/* display:flex above outranks the UA [hidden] rule, so the hidden state has to
   be repeated here or the pager shows no matter what app.js sets. */
.pager[hidden] { display: none; }
.pager-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pager .btn-reset:disabled { opacity: .45; cursor: not-allowed; }
.pager .btn-reset:disabled:hover {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-dim);
}

.qty {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.qty > * + * { margin-left: 2px; }
.qty button {
  width: 28px; height: 28px;
  background: var(--bg-menu);
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background .15s;
}
.qty button:hover { background: var(--primary); color: #fff; }
.qty span { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty-lg button { width: 38px; height: 38px; font-size: 19px; }
.qty-lg span { min-width: 34px; font-size: 17px; }

/* modal */
.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 20, 18, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  /* min() is Chrome 79 */
  width: 100%;
  max-width: 940px;
  width: min(940px, 100%);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 38, 31, .28);
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--primary); color: #fff; }
.modal-media {
  position: relative;
  background: var(--bg-menu);
}
.modal-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.modal-body { padding: 26px 26px 24px; overflow-y: auto; max-height: 78vh; }
/* Photo attribution shown only for CC BY / CC BY-SA images. Faint but above the
   AA floor: --text-faint measures 5.30:1 on the raised panel. */
.modal-credit {
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
}
.modal-credit a { color: var(--primary-bright); }
.modal-eyebrow { display: flex; align-items: center; margin: 0 0 8px; }
.modal-eyebrow > * + * { margin-left: 10px; }
.modal-eyebrow .badge { position: static; }
.modal-title { font-size: 25px; font-weight: 700; line-height: 1.15; }
.modal-price {
  margin: 12px 0 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.modal-meta { margin: 18px 0 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.meta-row { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 9px 12px; background: var(--bg-card); }
.meta-row dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.meta-row dd { margin: 0; font-size: 14px; }
.modal-subtitle {
  margin: 22px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-faint);
}
.modal-desc {
  margin: 0;
  padding: 15px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}
.modal-actions { display: flex; align-items: center; margin-top: 22px; }
.modal-actions > * + * { margin-left: 14px; }

/* drawer */
.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  width: min(430px, 100%);
  height: 100%;
  background: var(--bg-raised);
  border-left: 1px solid var(--border-strong);
  box-shadow: -24px 0 60px rgba(20, 38, 31, .22);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.drawer-head h2 { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.drawer-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.drawer-close:hover { background: var(--primary); color: #fff; }

.cart-items { flex: 1 1 auto; margin: 0; padding: 8px 12px; list-style: none; overflow-y: auto; }
.cart-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px 8px;
  border-bottom: 1px solid var(--border);
}
.cart-row-media {
  position: relative;
  padding-top: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-menu);
}
@supports (aspect-ratio: 1) {
  .cart-row-media { padding-top: 0; aspect-ratio: 1; }
}
.cart-row-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cart-row-main { display: flex; flex-direction: column; min-width: 0; }
.cart-row-main > * + * { margin-top: 5px; }
.cart-row-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--primary-bright); }
.cart-row-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-row-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-row-end > * + * { margin-top: 6px; }
.cart-row-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.link-remove {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: underline;
}
.link-remove:hover { color: var(--red); }
.cart-empty { padding: 46px 16px; text-align: center; color: var(--text-faint); font-size: 14px; }

/* flex: 0 0 auto plus its own scroll keeps the delivery fields from pushing the
   cart list off a short (landscape phone) viewport. */
.drawer-foot {
  flex: 0 0 auto;
  max-height: 72%;
  overflow-y: auto;
  padding: 16px 20px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-menu);
}
.drawer-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.drawer-total span { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.drawer-total strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.drawer-note { margin: 12px 0 0; font-size: 11px; text-align: center; color: var(--text-faint); }

.paypal-host { margin-top: 12px; min-height: 48px; }

/* Delivery contact block: email + description. Sits above the subtotal and the
   PayPal buttons because fulfilment is by email, not by shipping. It leads the
   drawer footer, so it carries the space below it rather than above. */
.contact { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
}
.contact-input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.contact-input:focus { outline: none; border-color: var(--primary); }
.contact-input.is-invalid { border-color: var(--red); }
.contact-textarea { min-height: 64px; resize: vertical; }
.contact-error { font-size: 12px; color: var(--red); }

.paypal-status {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-faint);
  white-space: pre-line;
}
.paypal-status.is-error { color: var(--red); }
.paypal-status.is-pending { color: var(--accent-ink); }
.success-copy { margin: 12px 0 18px; color: var(--text-dim); }
.modal-panel-sm {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 460px;
  width: min(460px, 100%);
}

.scrim {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 92;
  background: rgba(12, 20, 18, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* footer */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-menu); }
.footer-inner { padding-top: 26px; padding-bottom: 34px; padding-block: 26px 34px; }
.footer-inner p { margin: 0 0 6px; font-size: 14px; color: var(--text-dim); }
.footer-muted { color: var(--text-faint) !important; font-size: 13px !important; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.footer-links a { color: var(--text-dim); font-size: 13px; text-decoration: none; }
.footer-links a:hover,
.footer-links a:focus { color: var(--primary-bright); text-decoration: underline; }

/* Seller disclosure: full name, tax id, both addresses, phone and email.
   Deliberately dimmer than the legal links above - this is disclosure, not
   navigation. In the Terms contact section it sits in body copy, so there the
   size is nudged up to match the surrounding text. */
.seller-details { margin: 14px 0 0; font-size: 12px; color: var(--text-faint); }
.seller-details p { margin: 0 0 4px; }
.seller-details strong { color: var(--text-dim); font-weight: 600; }
.seller-details a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.seller-details a:hover,
.seller-details a:focus { color: var(--primary-bright); }
.legal .seller-details { font-size: 14px; }

/* Fade the footer in when it is scrolled to. The `js` class is on <html> only
   when scripting ran, so with JS off the footer is simply visible and no
   content can be stranded at opacity 0. Scoped to #siteFooter so the footer on
   the legal pages, which never reveals, stays visible too. */
.js #siteFooter .footer-inner { opacity: 0; transition: opacity .45s ease; }
.js #siteFooter.is-revealed .footer-inner { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; transform: none; }
  .js #siteFooter .footer-inner { transition: none; }
}

/* cookie consent. Sits above the promo bar (z-index 100), so a choice cannot be
   blocked by it. */
.consent {
  position: fixed;
  /* right as well as left, so the box spans the gap instead of being width:100%
     of the viewport pushed 16px off the right edge on a narrow phone */
  left: 16px;
  right: 16px;
  bottom: 56px;
  z-index: 130;
  max-width: 380px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 18px 48px rgba(20, 38, 31, .22);
}
.consent-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
}
.consent-close:hover { color: var(--text); background: var(--bg-menu); }
.consent-title { margin: 0 0 8px; font-size: 16px; }
.consent-body { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.consent-body a { color: var(--primary-bright); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .btn-primary { flex: 1 1 auto; height: 40px; }
.consent-actions .btn-reset { flex: 0 0 auto; height: 40px; margin: 0; }

@media (min-width: 700px) {
  .consent { left: 24px; bottom: 64px; }
}

/* legal pages (terms / refund / privacy) */
.legal-body { background: var(--bg); }
.legal { padding-block: 34px 54px; }
.legal-title {
  margin: 18px 0 4px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.legal-updated { margin: 0 0 26px; font-size: 13px; color: var(--text-faint); }
.legal-lede { font-size: 16px; color: var(--text); }
.legal h2 {
  margin: 34px 0 10px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text);
}
.legal p, .legal li { font-size: 15px; line-height: 1.65; color: var(--text-dim); }
.legal p { margin: 0 0 12px; max-width: 70ch; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 22px; max-width: 70ch; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--text); }
.legal code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.legal h3 { margin: 22px 0 8px; font-size: 15px; color: var(--text); }
.legal a { color: var(--primary-bright); }
.legal-crumb { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal-crumb a { font-size: 13px; color: var(--text-dim); text-decoration: none; }
.legal-crumb a:hover,
.legal-crumb a:focus { color: var(--primary-bright); text-decoration: underline; }

/* responsive */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  /* One column, so the 28px gutter becomes the vertical space between the
     category row and the price/sort filters. Halved to keep them reading as one
     control group. */
  .layout { grid-template-columns: 1fr; row-gap: 14px; }

  /* Categories are a primary filter, not a menu. They used to sit behind the
     hamburger, which put two taps between the buyer and the Gift Cards or
     Game Keys row. The sidebar is already the first grid item, so showing it as
     a row of wrapping chips puts it directly above the price/stock/sort controls
     with no DOM change. */
  /* Card chrome dropped along with the sticky column: a bordered panel around a
     full-bleed chip row only clipped the first and last chip. */
  .sidebar {
    position: static;
    max-height: none;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    min-width: 0;
  }
  .sidebar-title {
    /* Kept as a heading for the section, but not as a visible label: the chip
       names are self-describing and the vertical space is scarce here. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav {
    /* Wrap rather than scroll. A hidden horizontal scrollbar gives no hint that
       17 more categories exist to the right, and on a narrow screen a chip the
       user cannot reach is a category they cannot buy from. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 2px 0 6px;
  }
  .nav > * + * { margin-top: 0; margin-left: 0; }
  .nav-item {
    width: auto;
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-raised);
    /* The chip is a label, not a row of left-aligned text with an icon after
       it. .nav-text is a flex child that grows, so without this the name sits
       hard against the left padding instead of in the middle of the pill. */
    justify-content: center;
    text-align: center;
  }
  .nav-item.is-active { border-color: transparent; }
  .nav-thumb { display: none; }
  /* .nav-text is the second child of .nav-item even with the thumbnail hidden,
     so it still picks up the desktop sibling margin and shifts every label off
     centre in the pill. */
  .nav-item > * + * { margin-left: 0; }
  .nav-text { flex: 0 1 auto; }
  .nav-meta, .nav-arrow { display: none; }
  .nav-name { white-space: nowrap; }
  .modal-panel { grid-template-columns: 1fr; }
  .modal-media { padding-top: 62.5%; }
  @supports (aspect-ratio: 1) {
    .modal-media { padding-top: 0; aspect-ratio: 16 / 10; }
  }
  .modal-body { max-height: none; padding: 20px; }
  .brand-mark { width: 34px; height: 34px; }
  #brand { font-size: 18px; }
}

@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  :root { --pad: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cart-btn span:not(.cart-count) { display: none; }
  .cart-btn { padding: 0 14px; }
  /* Same treatment: at 320px the header has brand + search + cart already, and
     a third full-width pill wraps the row and pushes the products down. The
     icon alone is unambiguous next to the cart glyph, and the footer copy of
     the same link still spells the name out for anyone who misses it. */
  .wa-btn span { display: none; }
  .wa-btn { padding: 0 13px; }
  .wa-btn-footer { padding: 0 16px; }
  .wa-btn-footer span { display: inline; }
  /* both start their own flex line once the header wraps, so the desktop
     sibling margin would indent them. .search-wrap also needs a top margin:
     it lands on a new line of its own, and a sibling margin-left does nothing
     for vertical rhythm, which left it touching the row above. */
  .search-wrap { order: 3; flex-basis: 100%; margin-left: 0; margin-top: 10px; }
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-block: 12px;
  }
  .hero { padding: 20px 0 18px; }
  .toolbar-controls { width: 100%; margin-top: 14px; gap: 8px; }
  .field { flex: 1 1 calc(50% - 4px); min-width: 140px; }
  .field-range { flex: 1 1 100%; }
  .check { flex: 1 1 calc(50% - 4px); min-width: 140px; justify-content: center; }
  .btn-reset { flex: 1 1 100%; }
  .card-title { font-size: 14px; }
  .price { font-size: 16px; }
  .btn-add { padding: 0 12px; font-size: 12px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn-lg { flex: 1 1 auto; }
  .meta-row { grid-template-columns: 1fr; gap: 2px; }
  .brand-mark { width: 32px; height: 32px; }
  #brand { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

.promo-bar { position: relative; }
.promo-close {
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  background: rgba(36,23,3,0.12);
  border: 1px solid rgba(36,23,3,0.28);
  color: #241703;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.promo-close:hover { background: rgba(36,23,3,0.22); }

/* ---------------------------------------------------------------- i18n ---
   Language switcher in the header of every page, plus the RTL mirror pass.
   The switcher borrows the .field select recipe so it reads as part of the
   toolbar. */
.lang-wrap { display: flex; align-items: center; }
.lang-pick {
  height: 36px;
  max-width: 130px;
  padding: 0 30px 0 10px;
  background: var(--bg-input) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6f68' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.lang-pick:hover { border-color: var(--border-strong); }
.lang-pick:focus { outline: none; border-color: var(--primary); }

/* Arabic mirrors the layout. Flex and grid flows follow <html dir="rtl"> on
   their own; only the physical properties below need an explicit mirror. */

/* Skip link parks off the reading-side edge. */
[dir=rtl] .skip-link { left: auto; right: -9999px; }
[dir=rtl] .skip-link:focus { right: 0; left: auto; }

/* Adjacency spacing runs on the inline-start side. */
[dir=rtl] .header-inner > * + *,
[dir=rtl] .brand > * + *,
[dir=rtl] .cart-btn > * + *,
[dir=rtl] .wa-btn > * + *,
[dir=rtl] .nav-item > * + *,
[dir=rtl] .check > * + *,
[dir=rtl] .card-foot > * + *,
[dir=rtl] .qty > * + *,
[dir=rtl] .modal-eyebrow > * + *,
[dir=rtl] .modal-actions > * + * { margin-left: 0; }
[dir=rtl] .header-inner > * + * { margin-right: 16px; }
[dir=rtl] .brand > * + * { margin-right: 10px; }
[dir=rtl] .cart-btn > * + * { margin-right: 8px; }
[dir=rtl] .wa-btn > * + * { margin-right: 8px; }
[dir=rtl] .nav-item > * + * { margin-right: 10px; }
[dir=rtl] .check > * + * { margin-right: 8px; }
[dir=rtl] .card-foot > * + * { margin-right: 10px; }
[dir=rtl] .qty > * + * { margin-right: 2px; }
[dir=rtl] .modal-eyebrow > * + * { margin-right: 10px; }
[dir=rtl] .modal-actions > * + * { margin-right: 14px; }

[dir=rtl] .nav-item { text-align: right; }

/* Corner badges swap reading-side edges. */
[dir=rtl] .badge-kind { left: auto; right: 10px; }
[dir=rtl] .badge-out { right: auto; left: 10px; }

/* The drawer slides in from the left; its border and shadow follow. */
[dir=rtl] .drawer { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border-strong); box-shadow: 24px 0 60px rgba(20, 38, 31, .22); }

/* Floating close buttons sit top-left of their panel. */
[dir=rtl] .modal-close { right: auto; left: 12px; }
[dir=rtl] .consent-close { right: auto; left: 8px; }
[dir=rtl] .promo-close { right: auto; left: max(8px, env(safe-area-inset-left)); }

/* Legal list indentation follows the reading direction. */
[dir=rtl] .legal ul, [dir=rtl] .legal ol { padding-left: 0; padding-right: 22px; }

/* The select arrow points from the trailing edge. */
[dir=rtl] .lang-pick, [dir=rtl] .field select { padding: 0 10px 0 30px; background-position: left 8px center; }