/* ==========================================================================
   Orbelle — shared design system
   Cream / Ink / Gold palette, DM Sans + DM Serif Display
   ========================================================================== */

:root {
  --cream:        #FAF6EE;
  --cream-soft:    #F3ECDD;
  --cream-deep:    #EAE0C9;
  --ink:           #211D17;
  --ink-soft:      #55503F;
  --ink-faint:     #8B8571;
  --gold:          #B9924D;
  --gold-deep:     #93732F;
  --gold-soft:     #E4D3AE;
  --white:         #FFFFFF;
  --line:          rgba(33, 29, 23, 0.12);
  --shadow:        0 20px 45px rgba(33, 29, 23, 0.10);
  --shadow-sm:     0 6px 16px rgba(33, 29, 23, 0.08);
  --radius:        14px;
  --radius-sm:     8px;
  /* Content width. Fluid so the page actually fills a wide screen instead of
     sitting in a narrow column with big empty margins, capped so it doesn't
     sprawl on a very large monitor. Prose still caps itself at 760px
     (.content-block) so line length stays readable. */
  --max:           min(1800px, 94vw);
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:  'DM Serif Display', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--gold-deep); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-deep); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-outline-light { background: transparent; color: var(--cream); border-color: rgba(250,246,238,0.5); }
.btn-outline-light:hover { background: var(--cream); color: var(--ink); }

/* ---------- Header ---------- */
.announce {
  background: var(--ink);
  color: var(--cream-soft);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 9px 16px;
}
.announce strong { color: var(--gold-soft); }

header.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: var(--max);
  margin: 0 auto;
  gap: 24px;
}
.logo-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-link img {
  height: 64px;
  width: auto;
  mix-blend-mode: multiply;
}
.logo-fallback {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.logo-fallback span { color: var(--gold); }

nav.primary-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
nav.primary-nav > ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}
nav.primary-nav > ul > li { position: relative; }
nav.primary-nav > ul > li > a {
  display: block;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.primary-nav > ul > li > a:hover,
nav.primary-nav > ul > li.active > a { background: var(--ink); color: var(--cream); }

.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 230px;
  padding: 8px;
  display: none;
  z-index: 50;
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 9px 12px;
  font-size: 0.87rem;
  border-radius: 6px;
  color: var(--ink-soft);
  font-weight: 600;
}
.dropdown a:hover { background: var(--cream-soft); color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-phone { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.header-phone a { color: var(--gold-deep); }
.retailer-portal-link { padding: 9px 18px; font-size: 0.8rem; white-space: nowrap; }
.mobile-only-nav-item { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: 0.2s;
}

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: var(--cream-soft);
  margin-top: 90px;
}
.footer-top {
  padding: 60px 32px 40px;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 700;
  margin-bottom: 16px;
}
.footer-logo img { height: 40px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-col p, .footer-col a {
  color: rgba(250,246,238,0.72);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 9px;
}
.footer-col a:hover { color: var(--gold-soft); }
.footer-bottom {
  border-top: 1px solid rgba(250,246,238,0.14);
  padding: 20px 28px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(250,246,238,0.5);
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--cream) 55%, var(--gold-soft) 140%);
  padding: 64px 0 76px;
  overflow: hidden;
}
/* The photo column is deliberately wider than the copy — the room shots are the
   thing people came to look at. align-items:start rather than center because a
   centred copy column pushed "Shop Bunk & Teen Beds" below the fold on a laptop. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.hero-copy p.lead { font-size: 1.08rem; max-width: 460px; }
.hero-cta { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-badges {
  display: flex;
  gap: 26px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.hero-badge { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.hero-image-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3.1;
  background: var(--white);
}
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Auto-crossfading hero slideshow (bunk + teen bed room shots) */
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(33, 29, 23, 0.78);
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
.hero-slide-label .arrow { color: var(--gold-soft); }
.hero-slide:hover .hero-slide-label { background: rgba(33, 29, 23, 0.92); }
.hero-dots {
  position: absolute;
  right: 16px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 7px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(33, 29, 23, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dot:hover { transform: scale(1.25); }
.hero-dot.active { background: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ---------- Simple hero (interior pages) ---------- */
.page-hero {
  background: var(--ink);
  color: var(--cream);
  padding: 56px 0 46px;
  text-align: center;
}
.page-hero h1 { color: var(--cream); }
.page-hero p { color: rgba(250,246,238,0.75); max-width: 560px; margin: 0 auto; }
.breadcrumb {
  font-size: 0.78rem;
  color: rgba(250,246,238,0.55);
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.breadcrumb a { color: rgba(250,246,238,0.8); }
.breadcrumb a:hover { color: var(--gold-soft); }

/* ---------- Sections ---------- */
section { padding: 80px 0; }
.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 46px;
}
.section-head.left { text-align: left; margin: 0 0 40px; }
.bg-soft { background: var(--cream-soft); }
.bg-ink { background: var(--ink); color: var(--cream); }
.bg-ink h2, .bg-ink h3 { color: var(--cream); }
.bg-ink p { color: rgba(250,246,238,0.72); }

/* ---------- Category grid (home) ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* ---------- Product search ---------- */
.product-search {
  position: relative;
  max-width: 620px;
  margin: 0 auto 34px;
}
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.search-field:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(185, 146, 77, 0.16), var(--shadow-sm);
}
.search-field .search-icon {
  width: 19px;
  height: 19px;
  flex: none;
  margin-left: 20px;
  color: var(--ink-faint);
}
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--ink);
  padding: 15px 12px;
}
.search-input::placeholder { color: var(--ink-faint); }
.search-clear {
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-faint);
  padding: 0 18px 3px 6px;
}
.search-clear:hover { color: var(--ink); }

.search-results {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  text-align: left;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.search-result:hover,
.search-result.is-active { background: var(--cream-soft); }
.search-result img,
.search-result .sr-noimg {
  width: 52px;
  height: 46px;
  flex: none;
  object-fit: contain;
  border-radius: 6px;
  background: var(--cream-soft);
  display: block;
}
.search-result .sr-text { min-width: 0; }
.search-result .sr-cat {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep);
}
.search-result .sr-name {
  font-weight: 700;
  font-size: 0.93rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result .sr-model { font-size: 0.8rem; color: var(--ink-faint); }
.search-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
@media (max-width: 640px) {
  .search-result img { width: 44px; height: 40px; }
  .search-input { font-size: 0.92rem; padding: 13px 10px; }
  .search-field .search-icon { margin-left: 16px; }
}

.cat-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--line);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-card .cat-img {
  aspect-ratio: 1/0.85;
  background: var(--cream-soft);
  overflow: hidden;
}
.cat-card .cat-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
/* Lifestyle/room photos fill the frame edge-to-edge instead of being
   letterboxed like the studio cutouts the default rule above is built for. */
.cat-card.cat-card--photo .cat-img img { object-fit: cover; padding: 0; }
.cat-card .cat-label {
  padding: 14px 16px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-card .cat-label .arrow { color: var(--gold); font-size: 1.1rem; }

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.product-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card .product-img {
  aspect-ratio: 1/1;
  background: var(--cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card .product-img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.product-body { padding: 18px 20px 22px; }
.product-body .model { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 4px; }
.product-body h3 { margin-bottom: 6px; font-size: 1.08rem; }
.product-body p { font-size: 0.88rem; margin-bottom: 12px; }
.product-card.no-photo .product-img { background: var(--cream-deep); }
.product-card.no-photo .icon-placeholder {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold);
  opacity: 0.5;
}
.product-slider.no-photo .slider-viewport {
  aspect-ratio: 4 / 3.1;
  background: var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-slider.no-photo .icon-placeholder {
  font-family: var(--font-display);
  font-size: 3.6rem;
  color: var(--gold);
  opacity: 0.5;
}

/* ---------- Best sellers strip ---------- */
.strip-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ---------- Story / split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
/* Product detail pages: the copy column holds only a short description and
   two buttons, so give the photo the extra width instead of leaving it
   empty. Stacks to one column at the .split breakpoint below. */
.split--detail {
  grid-template-columns: 1.7fr 1fr;
  gap: 48px;
}
.video-embed {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--ink);
}
.video-embed img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
/* Self-hosted <video> uses the same frame as the YouTube thumbnail link */
video.video-embed { object-fit: cover; }
.video-embed:hover img { transform: scale(1.03); }
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(33, 29, 23, 0.75);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-embed:hover .video-play-btn { background: var(--gold-deep); transform: translate(-50%, -50%) scale(1.08); }
.stat-row { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-deep); }
.stat span { font-size: 0.82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Trust bar ---------- */
.trust-bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px;
  padding: 34px 28px;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); flex: 1; min-width: 200px; }
.trust-item .num { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); white-space: nowrap; }

/* ---------- Category chips (product listing pages) ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
  justify-content: center;
}
.chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.chip.active, .chip:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(120deg, var(--ink) 0%, #3a3325 100%);
  border-radius: var(--radius);
  padding: 54px 50px;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-banner h2 { color: var(--cream); margin-bottom: 6px; }
.cta-banner p { color: rgba(250,246,238,0.7); margin: 0; }

/* Three buttons no longer fit beside the text at the default size, and the
   whole group was dropping onto its own line. Keep it on the right and make
   the buttons compact enough to sit in a single row. */
.cta-banner > div:first-child { flex: 1 1 320px; min-width: 0; }
.cta-actions { display: flex; gap: 10px; flex-wrap: nowrap; flex: 0 0 auto; }
.cta-actions .btn {
  padding: 11px 18px;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---------- Content page (warranty / dimensions / etc.) ---------- */
.content-block {
  max-width: 760px;
  margin: 0 auto;
}
.content-block h2 { margin-top: 1.6em; }
.content-block ul { color: var(--ink-soft); padding-left: 20px; }
.content-block li { margin-bottom: 8px; }
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.info-card h3 { display: flex; align-items: center; gap: 10px; }
.info-card h3 .tag { font-size: 0.68rem; background: var(--gold-soft); color: var(--gold-deep); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Size guide (spec table in a modal) ---------- */
.sg-open {
  /* sits in .hero-cta beside "Ask a Question", so no extra top margin —
     the flex row's own gap handles spacing */
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sg-open svg { width: 17px; height: 17px; }
.sg-modal { position: fixed; inset: 0; z-index: 200; }
.sg-modal[hidden] { display: none; }
.sg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(33, 29, 23, 0.55);
  backdrop-filter: blur(2px);
}
.sg-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 30px 26px;
}
.sg-x {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 4px 8px;
}
.sg-x:hover { color: var(--ink); }
.sg-head { margin-bottom: 20px; }
.sg-head h3 { margin: 6px 0 2px; }
.sg-model { color: var(--ink-faint); font-size: 0.85rem; margin: 0; }
.sg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.sg-tab {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.sg-tab:hover { border-color: var(--gold); }
.sg-tab.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.sg-panel.is-hidden { display: none; }
.sg-table { width: 100%; border-collapse: collapse; }
.sg-table thead th {
  background: var(--cream-soft);
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 11px 14px;
}
.sg-table thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.sg-table thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.sg-table th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 14px;
  border-bottom: 1px solid var(--line);
  width: 56%;
}
.sg-table td {
  font-weight: 700;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.sg-table tbody tr:last-child th,
.sg-table tbody tr:last-child td { border-bottom: 0; }
.sg-foot {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sg-foot a { color: var(--gold-deep); font-weight: 700; }
@media (max-width: 520px) {
  .sg-dialog { padding: 26px 18px 20px; }
  .sg-table th[scope="row"], .sg-table td { padding: 11px 9px; font-size: 0.88rem; }
}

/* ---------- Product detail photo slider ---------- */
.product-slider { position: relative; }
.slider-viewport {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--white);
}
.slider-track {
  display: flex;
  transition: transform 0.35s ease;
}
.slide {
  flex: 0 0 100%;
  min-width: 0;
}
.slide-img {
  /* Close to the native ratio of most of the product photography, so
     landscape room shots fill the frame with minimal letterboxing. */
  aspect-ratio: 4/3;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slide-img img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.slide-caption { font-size: 0.82rem; color: var(--ink-soft); padding: 12px 4px 0; text-align: center; }
.slider-prev, .slider-next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: 1.1rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-prev:hover, .slider-next:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.slider-prev { left: 12px; }
.slider-next { right: 12px; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.slider-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  cursor: pointer;
  padding: 0;
}
.slider-dots .dot.active { background: var(--gold); }

/* ---------- Color swatches (one product, several color variants) ---------- */
.color-panels .color-panel.is-hidden { display: none; }
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.color-swatch:hover { border-color: var(--gold); }
.color-swatch.active { border-color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-deep); }
.color-swatch img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.color-swatch .icon-placeholder { font-size: 1.6rem; color: var(--gold); opacity: 0.5; }
.color-swatch span {
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
}
.color-swatch.active span { color: var(--ink); font-weight: 700; }

/* ---------- Lightbox (click a product photo to enlarge) ---------- */
body.lightbox-locked { overflow: hidden; }
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 17, 12, 0.94);
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}
.lightbox.open { display: flex; }
.lightbox-figure {
  max-width: 92vw;
  max-height: 88vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: default;
}
.lightbox-caption { color: var(--cream-soft); font-size: 0.9rem; text-align: center; }
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(250, 246, 238, 0.35);
  background: transparent;
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: var(--cream); color: var(--ink); }
.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(250, 246, 238, 0.35);
  background: transparent;
  color: var(--cream);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-prev:hover, .lightbox-next:hover { background: var(--cream); color: var(--ink); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 720px) {
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* ---------- Product detail gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.gallery-thumb {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.gallery-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--cream-soft); display: block; }
.gallery-thumb .gallery-caption { display: block; font-size: 0.76rem; color: var(--ink-faint); padding: 8px 10px; }
.doc-row { text-decoration: none; display: flex; }
.doc-row:hover { border-color: var(--gold); }
/* A row that is NOT a link — used for pieces that ship fully assembled, so
   there is no manual to open. No hover lift and no "PDF ->" affordance:
   nothing on these pages should look clickable without being clickable. */
.doc-row--static { cursor: default; background: var(--cream); }
.doc-row--static:hover { border-color: var(--line); }
.doc-note {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold-deep);
  white-space: nowrap;
}
.doc-subhead { font-size: 1.05rem; margin: 34px 0 6px; }
.size-block { margin-bottom: 20px; }
.size-block:last-child { margin-bottom: 0; }
.size-block h4 { font-size: 0.95rem; margin-bottom: 8px; color: var(--ink); font-family: var(--font-body); font-weight: 700; }

/* ---------- Doc list (instructions) ---------- */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.doc-row .doc-name { font-weight: 700; font-size: 0.92rem; }
.doc-row .doc-model { font-size: 0.78rem; color: var(--ink-faint); }
.doc-row .doc-dl { font-size: 0.78rem; font-weight: 700; color: var(--gold-deep); white-space: nowrap; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 50px;
  align-items: start;
}
.contact-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--cream-soft);
  color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; background: var(--white); }
.field textarea { resize: vertical; min-height: 120px; }
.form-msg { font-size: 0.85rem; margin-top: 10px; display: none; }
.form-msg.ok { color: #4a7a4a; }
.form-msg.err { color: #a14b3f; }

.contact-info-list { display: flex; flex-direction: column; gap: 20px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-item .ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.contact-info-item h4 { margin: 0 0 4px; font-size: 0.95rem; }
.contact-info-item p { margin: 0; font-size: 0.9rem; }
.map-frame { border-radius: var(--radius); overflow: hidden; margin-top: 24px; border: 1px solid var(--line); }
.map-frame iframe { width: 100%; height: 260px; border: 0; display: block; }

/* ---------- Retailer grid (where to buy) ---------- */
.retailer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.retailer-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px 18px;
  text-align: center;
  font-weight: 700;
  font-size: 0.98rem;
  transition: 0.2s;
}
.retailer-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.retailer-card .r-sub { display: block; font-weight: 500; font-size: 0.76rem; color: var(--ink-faint); margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .split--detail, .contact-grid { grid-template-columns: 1fr; }
  .hero-image-frame { order: -1; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-4 { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .retailer-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  nav.primary-nav { display: none; }
  .nav-toggle { display: block; }
  .header-phone { display: none; }
  .retailer-portal-link { display: none; }
  .cat-grid, .strip-4, .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .cta-banner { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-actions { flex-wrap: wrap; }
  .retailer-grid { grid-template-columns: 1fr 1fr; }
  section { padding: 56px 0; }
  .hero { padding: 56px 0 60px; }
}

/* Mobile nav open state */
body.nav-open nav.primary-nav {
  display: block;
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--cream);
  padding: 90px 28px 28px;
  z-index: 90;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.nav-open nav.primary-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
body.nav-open .mobile-only-nav-item { display: block; }
body.nav-open .has-dropdown .dropdown { position: static; display: block; box-shadow: none; border: none; padding: 4px 0 4px 14px; }

/* ---------- Dimension drawings inside the Dimensions card ---------- */
.dims-figures {
  display: grid;
  gap: 16px;
  margin: 0 0 20px;
}
.dims-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.dims-figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  padding: 8px;
  display: block;
}
.dims-figure figcaption {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 9px 10px 11px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------
   Replacement-part request form — Customer Care > Hardware & Parts.
   Two linked <select> dropdowns (product -> part) feeding a Web3Forms
   submission, so a customer never has to know what a part is called.
   --------------------------------------------------------------- */
.pt-heading { font-size: 1.6rem; margin: 8px 0 6px; }
.pt-intro { color: var(--ink-soft); max-width: 62ch; margin: 0 0 22px; }
.pt-foot { color: var(--ink-soft); font-size: 0.92rem; margin-top: 18px; max-width: 62ch; }
.pt-foot a { color: var(--gold-deep); font-weight: 700; }

.pr-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 26px 22px;
  max-width: 760px;
}
.pr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
/* The two dropdowns get full width of their own: part labels run long
   ("8 — Barrel nut M6 x 13mm · 34 pcs in carton") and a native select
   truncates whatever doesn't fit its collapsed box. */
.pr-stack .field { width: 100%; }
.pr-row .field { min-width: 0; }
.pr-qty { max-width: 190px; }
.pr-opt { font-weight: 400; color: var(--ink-soft); }

.pr-form .field { margin-bottom: 16px; }
.pr-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.pr-form select,
.pr-form input,
.pr-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pr-form textarea { resize: vertical; }
.pr-form select {
  /* Native control, custom chevron. appearance:none keeps the arrow
     consistent across browsers; padding-right leaves room for it. */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235d574a' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}
.pr-form select:disabled {
  color: var(--ink-soft);
  opacity: 0.7;
  cursor: not-allowed;
  background-color: #f4f1ea;
}
.pr-form select:focus,
.pr-form input:focus,
.pr-form textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(138, 109, 59, 0.14);
}
.pr-form optgroup { font-style: normal; font-weight: 700; color: var(--ink-soft); }
.pr-form option { font-weight: 400; color: var(--ink); }

.pr-note {
  background: var(--cream);
  border-left: 3px solid var(--gold-deep);
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.pr-form .btn { margin-top: 4px; }

@media (max-width: 640px) {
  .pr-form { padding: 20px 18px 18px; }
  .pr-row { grid-template-columns: 1fr; gap: 0; }
  .pr-qty { max-width: none; }
}

/* Picker + added-parts list ------------------------------------- */
.pr-picker {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px 16px;
  margin: 0 0 22px;
  background: var(--cream);
}
.pr-legend {
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0 8px;
  margin-left: -8px;
}
.pr-picker select { background: var(--white); }
.pr-addrow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pr-addrow .field { margin-bottom: 0; }
.pr-addrow .pr-qty { flex: 0 0 110px; max-width: 110px; }
.pr-add { white-space: nowrap; }
.pr-add:disabled { opacity: 0.45; cursor: not-allowed; }
.pr-hint { font-size: 0.85rem; color: var(--ink-soft); margin: 12px 0 0; }

.pr-cartwrap { margin: 0 0 22px; }
.pr-carttitle { font-size: 1rem; margin: 0 0 10px; }
.pr-count { font-weight: 400; color: var(--ink-soft); font-size: 0.88rem; }
.pr-cart { list-style: none; margin: 0; padding: 0; }
.pr-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 4px 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.pr-line + .pr-line { margin-top: 8px; }
.pr-linetext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-linetext strong { font-size: 0.94rem; font-weight: 700; }
.pr-linemeta { font-size: 0.82rem; color: var(--ink-soft); }
.pr-lineqty {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}
.pr-remove {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  margin-right: 8px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pr-remove:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pr-remove:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.pr-empty {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--cream);
}

@media (max-width: 640px) {
  .pr-picker { padding: 16px 14px 14px; }
  .pr-addrow { gap: 10px; }
  .pr-addrow .pr-qty { flex: 0 0 92px; max-width: 92px; }
  .pr-add { flex: 1 1 auto; }
  .pr-line { gap: 10px; padding-left: 12px; }
}

/* ==========================================================================
   ACCESSIBILITY TOOLBAR
   Effects are applied as classes on <html>, so they reach every component.
   Because all type is sized in rem, scaling html{font-size} scales the site.
   ========================================================================== */

.a11y-root { position: fixed; left: 0; bottom: 18px; z-index: 900; }

.a11y-toggle {
  width: 46px; height: 46px; border: 0; cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.a11y-toggle svg { width: 24px; height: 24px; fill: currentColor; }
.a11y-toggle:hover { background: var(--gold-deep); }
.a11y-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.a11y-panel {
  position: absolute; left: 0; bottom: 56px; width: 246px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.a11y-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--ink); color: var(--cream);
}
.a11y-title { font-weight: 700; font-size: 0.9rem; letter-spacing: .02em; }
.a11y-close {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 2px 6px;
}
.a11y-close:focus-visible { outline: 2px solid var(--gold); }

.a11y-list { list-style: none; margin: 0; padding: 6px; }
.a11y-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.86rem; color: inherit; text-align: left;
  border-radius: var(--radius-sm);
}
.a11y-item:hover { background: var(--cream-soft); }
.a11y-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.a11y-item[aria-pressed="true"] { background: var(--gold-soft); font-weight: 700; }
.a11y-glyph {
  font-weight: 700; font-size: 0.78rem; opacity: .55;
  min-width: 1.2em; text-align: center;
}
.a11y-item[aria-pressed="true"] .a11y-glyph { opacity: 1; }

/* --- text scaling (rem-based, so this reaches everything) --- */
html[data-a11y-text="1"] { font-size: 112.5%; }
html[data-a11y-text="2"] { font-size: 125%; }
html[data-a11y-text="3"] { font-size: 140%; }
html[data-a11y-text="-1"] { font-size: 92%; }

/* --- readable font --- */
html.a11y-readable-font,
html.a11y-readable-font body,
html.a11y-readable-font .a11y-panel {
  font-family: Verdana, 'DejaVu Sans', Tahoma, sans-serif !important;
}
html.a11y-readable-font h1, html.a11y-readable-font h2,
html.a11y-readable-font h3, html.a11y-readable-font h4,
html.a11y-readable-font .logo, html.a11y-readable-font .footer-logo {
  font-family: Verdana, 'DejaVu Sans', Tahoma, sans-serif !important;
  letter-spacing: 0;
}

/* --- highlight links --- */
html.a11y-highlight-links a:not(.a11y-item):not(.a11y-toggle) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 2px solid var(--gold-deep); outline-offset: 2px;
  background: #FFF8E1;
}

/* --- grayscale (skips the toolbar so its own controls stay legible) --- */
html.a11y-grayscale body > *:not(.a11y-root) { filter: grayscale(1); }

/* --- high contrast: redefine the palette, don't invert --- */
html.a11y-contrast {
  --cream: #000000; --cream-soft: #111111; --cream-deep: #1c1c1c;
  --ink: #FFFFFF; --ink-soft: #EDEDED; --ink-faint: #CFCFCF;
  --gold: #FFD24A; --gold-deep: #FFC107; --gold-soft: #3a2f00;
  --white: #000000; --line: rgba(255,255,255,0.45);
}
html.a11y-contrast body { background: #000; color: #fff; }
html.a11y-contrast img { filter: brightness(1.06) contrast(1.06); }
/* The wordmark is dark artwork on transparency, so on a black ground it
   vanishes. Inverting it did NOT work (Chromium composites the filter so the
   glyphs stayed black), so give it a white plate instead — guaranteed legible
   whatever the filter engine does. */
/* Neither inverting nor a white plate made the PNG paint on the black
   ground, so stop fighting the image: hide it and draw the wordmark as text,
   which takes its colour from the palette and therefore cannot go invisible. */
html.a11y-contrast .logo-link img,
html.a11y-contrast .footer-logo img { display: none; }
html.a11y-contrast .logo-link::after,
html.a11y-contrast .footer-logo::after {
  content: "orbelle.";
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
html.a11y-contrast .footer-logo::after { font-size: 1.7rem; }

/* --- black on yellow --- */
html.a11y-blackyellow {
  --cream: #FFFF00; --cream-soft: #FFF37A; --cream-deep: #F2E400;
  --ink: #000000; --ink-soft: #111111; --ink-faint: #333333;
  --gold: #000000; --gold-deep: #000000; --gold-soft: #FFF37A;
  --white: #FFFF00; --line: rgba(0,0,0,0.55);
}
html.a11y-blackyellow body { background: #FFFF00; color: #000; }

/* --- keyboard navigation: make focus impossible to lose --- */
html.a11y-keyboard :focus {
  outline: 3px solid #1769FF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9) !important;
}
html.a11y-keyboard a, html.a11y-keyboard button { scroll-margin: 100px; }

/* --- stop animations --- */
html.a11y-no-anim *,
html.a11y-no-anim *::before,
html.a11y-no-anim *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (max-width: 640px) {
  .a11y-panel { width: 218px; }
  .a11y-root { bottom: 12px; }
}