/**
 * Shell: header, drawers, store modal, age gate, footer, search results.
 * Values copy React app src/layout/HomeLayout/** and the MUI components they use.
 * Breakpoints: MUI theme sx (sm 489, md 768, lg 1024, xl 1536, min-width) and
 * getDeviceSize() (xs below 600) for drawer anchors.
 */

/* ---------- Header: design 18 "Announcement banner + compact bar" ----------
   Chosen by Joshua on 2026-10-17 in place of React's HeaderItems.js layout; tightened to
   header design 7 "Search and sort share a row" on 2026-10-29 (dark banner strip, emblem
   with the name, Sort By beside the search field on the front page).
   Phone values first; from 768px (MUI md) the desktop sizes. */
.header { display: block; position: relative; }

.header__banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-bottom: 1px solid #16413f;
  background: #0d2b2a;
  color: #32beb9;
  font-family: var(--mui-font);
  font-size: 0.75rem;
  line-height: 1.35;
}
.header__banner .icon { font-size: 14px; fill: #32beb9; }
.header__banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header__banner-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 22px;
  padding: 0 4px;
  font-weight: 800;
  color: #32beb9;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.header__banner-link:hover { text-decoration: underline; }
.header__banner-info,
.header__banner-alert { display: flex; flex: 1; align-items: center; gap: inherit; min-width: 0; }
/* As tall as the alert's View link, so the banner keeps one height in both states. */
.header__banner-info { min-height: 22px; }
.header__banner-info[hidden],
.header__banner-alert[hidden] { display: none; }

/* Order alert (js/order-alert.js): the banner blinks red while customer pick-up orders wait.
   Both reds keep white text above 4.5:1 contrast. */
.header__banner--alert { border-bottom-color: transparent; color: #fff; font-weight: 600; animation: header-alert-blink 1.4s steps(1) infinite; }
.header__banner--alert .icon { fill: #fff; }
.header__banner--alert .header__banner-link { color: #fff; text-decoration: underline; }
@keyframes header-alert-blink {
  0%, 100% { background: #d32f2f; }
  50% { background: #a51d1d; }
}
@media (prefers-reduced-motion: reduce) {
  .header__banner--alert { animation: none; background: #d32f2f; }
}

/* Development-site notice (kure.dev, logged-in users on a dev site): a DEV tag and, for
   'manage metrc api' users, the METRC transmission switch (js/dev-banner.js). The banner
   wraps so on phones the notice takes its own line under the pick-up text. */
.header__banner:has(.header__dev) { flex-wrap: wrap; row-gap: 4px; }
.header__banner:has(.header__dev) > .header__banner-info,
.header__banner:has(.header__dev) > .header__banner-alert { flex-basis: 170px; }
.header__dev { display: flex; flex: none; align-items: center; gap: 6px; margin-left: auto; min-height: 22px; }
.header__dev-tag {
  padding: 2px 6px;
  border-radius: 4px;
  background: #b71c1c;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.header__dev-label { font-weight: 700; white-space: nowrap; }
.header__dev-seg { display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: rgba(50, 190, 185, 0.14); }
.header__dev-btn {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.header__dev-btn:hover { background: rgba(50, 190, 185, 0.16); }
.header__dev-btn[aria-pressed="true"] { background: #32beb9; color: #062322; cursor: default; }
.header__dev-btn .spinner { width: 10px; height: 10px; margin-right: 4px; }
.header__dev-seg[aria-busy="true"] .header__dev-btn:not([aria-busy]) { opacity: 0.5; pointer-events: none; }
.header__banner--alert .header__dev-tag { box-shadow: 0 0 0 1px #fff; }
.header__banner--alert .header__dev-seg { background: rgba(0, 0, 0, 0.22); }
.header__banner--alert .header__dev-btn[aria-pressed="true"] { background: #fff; color: #b71c1c; }

/* The bar wraps on phones so the search field and sort (.header__tools) take their own line
   under the icons; the first line is 52px (padding-top 6px + 40px icons + the 8px row gap less
   the 2px the icons leave). */
.header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 0;
  border-bottom: 1px solid #2c3232;
}
.header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.header__menu:hover { background-color: rgba(255, 255, 255, 0.06); }
.header__logo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-right: auto; color: #f7f7f7; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.header__emblem { display: block; flex: none; height: 34px; width: auto; }
.header__name { font-family: var(--mui-font); font-size: 17px; letter-spacing: 0.01em; white-space: nowrap; }
.header__name b { font-weight: 800; color: #fff; }

/* Phone gaps are tight so menu, logo and three icons (logged in) fit one 360 px line. */
.header__nav { display: flex; align-items: center; gap: 4px; }
.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #32beb9;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-action:hover { background-color: rgba(255, 255, 255, 0.06); }
.nav-action .icon { font-size: 28px; }
/* The logout shortcut's icon is 25% smaller than the other nav icons (decision native-header-logout-power-icon-beyond-react-parity). */
.nav-action--logout .icon { font-size: 21px; }
.nav-action[aria-busy="true"] .spinner { width: 22px; height: 22px; margin: 0; }
.nav-action[aria-busy="true"] .spinner + .icon { display: none; }
/* Press feedback (Joshua, 2026-10-29): js/shell.js sets .is-pressing at pointerdown for at least
   120 ms, because on phones :active starts too late for a quick tap. */
.header__menu, .header__logo, .nav-action {
  transition: scale var(--motion-out) var(--motion-ease-out), background-color var(--motion-out) var(--motion-ease-out), opacity var(--motion-out) var(--motion-ease-out);
}
.header__menu:active, .header__menu.is-pressing, .nav-action:active, .nav-action.is-pressing { scale: 0.88; background-color: rgba(50, 190, 185, 0.18); }
.header__logo:active, .header__logo.is-pressing { scale: 0.95; opacity: 0.7; }

/* Header search field (header search design 10) and the front page's Sort By menu (header
   design 7). Phones and tablets (below 1024 px): one full-width line under the bar's icons, field then sort; the results
   panel spans the whole line, so .header__tools is its positioned box there. */
.header__tools {
  position: relative;
  order: 3;
  display: flex;
  gap: 8px;
  flex: 0 0 calc(100% + 20px);
  min-width: 0; /* else the input's intrinsic width widens the line past the screen */
  margin: 0 -10px;
  padding: 0 10px 8px;
}
.header__search { flex: 1 1 0; min-width: 0; }
.header__sort { flex: 0 0 128px; }
/* Compact Sort By: no floating label (kept for screen readers), same height and radius as the field.
   .sort.sort--header outranks pages.css's .sort min-width (pages.css loads after this file). */
.sort.sort--header { min-width: 0; }
.sort--header .sort__label { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: -1px; transform: none; }
.sort--header .sort__select { height: 48px; padding: 0 30px 0 12px; border-radius: 10px; font-size: 0.8125rem; }
.sort__icon { display: none; }
/* Phones: the select shrinks to a 48 px square showing only the sort icon, so the search field
   keeps room for its whole placeholder; a teal dot marks any order other than Most Popular.
   The menu that opens (js/shell.js openSortMenu) still lists the full labels. */
@media (max-width: 767px) {
  .header__sort { flex: 0 0 48px; }
  .sort--header .sort__select { padding: 0; color: transparent; }
  .sort--header .sort__arrow { display: none; }
  .sort--header .sort__icon { display: block; position: absolute; inset: 0; margin: auto; font-size: 24px; color: #32beb9; pointer-events: none; }
  .sort--header:not(:has(option[value="sales_weekly"]:checked))::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #32beb9; pointer-events: none; }
}
.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px; /* 46 px inside the border: 8 px above and below the 30 px clear X */
  padding: 0 12px;
  border: 1px solid #2c3232;
  border-radius: 10px;
  background: #1e2222;
  cursor: text;
}
.header-search:focus-within { border-color: #32beb9; }
.header-search .icon { flex: none; font-size: 22px; color: #32beb9; }
.header-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #f7f7f7;
  font-family: var(--mui-font);
  font-size: 16px;
}
.header-search__input::placeholder { color: #8c8c8c; opacity: 1; }
/* The browser's own type=search clear button is replaced by .header-search__clear. */
.header-search__input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
/* Look comes from .x-btn (base.css); only placement here. */
.header-search__clear { margin-right: -4px; }

@media (min-width: 768px) {
  .header__banner { gap: 10px; padding: 4px 28px; font-size: 0.8125rem; }
  .header__banner-link { margin-left: 16px; }
  .header__bar { gap: 18px; padding: 6px 28px 0; }
  .header__logo { gap: 8px; }
  .header__emblem { height: 40px; }
  .header__name { font-size: 20px; }
  .header__nav { gap: 18px; }
  /* Tablets keep the phone layout (field and sort on their own line): in one row the field left
     too little room for the name and the placeholder. */
  .header__tools { flex-basis: calc(100% + 56px); margin: 0 -28px; padding: 0 28px 8px; }
  .header__sort { flex: 0 0 190px; }
}
@media (min-width: 1024px) {
  .header__bar { flex-wrap: nowrap; height: 68px; padding: 0 28px; }
  .header__logo { margin-right: 0; }
  /* In the bar, right-aligned next to the icons, with a divider line between them; the results
     dropdown is right-aligned under the field. */
  .header__tools {
    position: static;
    order: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0 18px 0 0;
    border-right: 1px solid #2c3232;
  }
  .header__search { position: relative; display: flex; flex: 0 1 460px; }
  .header-search { flex: 1 1 auto; min-width: 0; }
}


/* Header search results (header search design 3b, js/shell.js), ported from the approved mockup.
   Phones and tablets: full width under the field, down to the bottom of the screen (max-height
   set by JS); from 1024 px a right-aligned rounded dropdown. */
.hs-panel {
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1b1f1f;
  border-top: 1px solid #2c3232;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  color: #f7f7f7;
  font-family: var(--mui-font);
  font-size: 0.9375rem;
  line-height: 1.43;
}
.hs-panel[hidden] { display: none; }
.hs-panel button { font-family: inherit; cursor: pointer; }
.hs-panel button:disabled { opacity: 0.35; cursor: default; }
.hs-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a4242 transparent; }
/* Dark thin scrollbar, same look as the brand/strain checklist. */
.hs-scroll::-webkit-scrollbar { width: 6px; }
.hs-scroll::-webkit-scrollbar-track { background: transparent; }
.hs-scroll::-webkit-scrollbar-thumb { background: #3a4242; border-radius: 3px; }
.hs-scroll::-webkit-scrollbar-thumb:hover { background: #4f5959; }
.hs-empty { margin: 0; padding: 18px 14px; color: #9a9a9a; }
.hs-empty .spinner { vertical-align: -2px; }
.hs-label { margin: 10px 0 6px; color: #9a9a9a; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* Step 1: category tiles. */
.hs-step { padding: 12px 14px 14px; border-bottom: 1px solid #262b2b; }
.hs-step h5, .hs-sub h5 { margin: 0 0 10px; font-family: var(--mui-font); font-size: 1rem; font-weight: 700; }
.hs-step h5 span { margin-right: 6px; color: #32beb9; }
.hs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hs-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid #3a4040;
  border-radius: 10px;
  background: #232828;
  color: #f7f7f7;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}
.hs-tile .icon { width: 26px; height: 26px; fill: #32beb9; }
.hs-tile small { display: block; margin-top: 2px; color: #9a9a9a; font-size: 0.75rem; font-weight: 400; }
.hs-panel .hs-tile:disabled { opacity: 0.4; }
/* A category picked: its tile is highlighted and its filters open below the tiles. */
.hs-tile.is-on { border-color: #32beb9; background: #163533; box-shadow: 0 0 0 1px #32beb9 inset; }
.hs-sub { padding: 4px 14px 12px; border-bottom: 1px solid #262b2b; }
.hs-sub h5 { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
.hs-sub h5 .icon { width: 22px; height: 22px; fill: #32beb9; }
.hs-sub h5 small { color: #9a9a9a; font-size: 0.8125rem; font-weight: 400; }
.hs-group .hs-label { margin-top: 12px; }
/* Short groups sit side by side and wrap as whole units; wide groups (brand, strain, color) take a full row. */
.hs-groups { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 28px; }
.hs-group { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.hs-group--wide { flex-basis: 100%; }
.hs-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
/* Brand and strain checklist: find box, then a box of columns that scrolls sideways. */
.hs-list-head { display: flex; align-items: center; gap: 12px; }
.hs-list-head .hs-label { flex: none; }
.hs-find {
  width: 100%;
  max-width: 220px;
  margin: 10px 0;
  padding: 5px 12px;
  border: 1px solid #3a4040;
  border-radius: 999px;
  background: #121515;
  color: #f7f7f7;
  font: inherit;
  font-size: 0.8125rem;
}
.hs-find, .hs-list { color-scheme: dark; }
.hs-find::placeholder { color: #7d8686; }
.hs-find:focus { outline: none; border-color: #32beb9; }
.hs-list {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 4px 6px;
  border: 1px solid #262b2b;
  border-radius: 10px;
  background: #171a1a;
  scrollbar-width: thin;
  scrollbar-color: #3a4242 transparent;
}
/* Rows run top to bottom, then the next column; at most 5 rows (--hs-rows, set by JS), 4 columns in
   view on desktop and 2 on phones, the rest reached by scrolling sideways. */
.hs-list__cols {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--hs-rows, 5), auto);
  grid-auto-columns: calc((100% - 3 * 12px) / 4);
  column-gap: 12px;
}
.hs-list::-webkit-scrollbar { height: 6px; }
.hs-list::-webkit-scrollbar-track { background: transparent; }
.hs-list::-webkit-scrollbar-thumb { background: #3a4242; border-radius: 3px; }
.hs-list::-webkit-scrollbar-thumb:hover { background: #4f5959; }
.hs-check {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #e6eaea;
  font-size: 0.8125rem;
  text-align: left;
  break-inside: avoid;
}
.hs-check[hidden] { display: none; }
.hs-check span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-check small { flex: 1 0 auto; display: flex; align-items: center; gap: 6px; color: #8c9494; font-size: 0.75rem; }
/* Faint teal dashed line joining the name to the count; an accent only. */
.hs-check small::before {
  content: '';
  flex: 1;
  min-width: 8px;
  border-top: 1px dashed rgba(50, 190, 185, 0.3);
}
/* Dark box; filled teal with a dark tick when picked. */
.hs-check i {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #4a5353;
  border-radius: 4px;
  background: #0f1212;
  transition: background-color var(--motion-in) var(--motion-ease-out), border-color var(--motion-in) var(--motion-ease-out);
}
.hs-check.is-on i { border-color: #32beb9; background: #32beb9; }
.hs-check.is-on i::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #062a28;
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.hs-check.is-on span { color: #f7f7f7; font-weight: 600; }
.hs-check:not(:disabled):hover { background: #232828; }
.hs-check:not(:disabled):hover i { border-color: #6a7575; }
.hs-check.is-on:hover i { border-color: #32beb9; }
@media (max-width: 767px) {
  .hs-groups { column-gap: 20px; }
  .hs-list__cols { grid-auto-columns: calc((100% - 12px) / 2); }
}
.hs-none { margin: 8px 0 0; color: #9a9a9a; }
.hs-link { padding: 6px 2px; border: 0; background: none; color: #32beb9; font-size: 0.8125rem; }
.hs-chip, .hs-swatch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #3a4040;
  border-radius: 999px;
  background: #232828;
  color: #f7f7f7;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.hs-chip small { color: #8c9494; font-size: 0.75rem; }
.hs-chip.is-on { border-color: #32beb9; background: #32beb9; color: #062a28; font-weight: 600; }
.hs-chip.is-on small { color: #0d4b48; }
.hs-swatch { padding: 4px 10px 4px 5px; }
.hs-swatch i { flex: none; width: 20px; height: 20px; border: 1px solid #555; border-radius: 50%; }
/* Available colors read brighter than the dimmed ones: dark swatches (Dark Camo, Multi Camo) looked
   disabled on the dark chip (Joshua, 2026-10-29). */
.hs-swatch:not(:disabled) { border-color: #566060; background: #2c3232; }
.hs-swatch:not(:disabled) i { border-color: #c4cccc; filter: brightness(1.35) saturate(1.15); }
.hs-swatch:not(:disabled):hover { border-color: #7a8686; }
.hs-swatch.is-on { border-color: #32beb9; box-shadow: 0 0 0 1px #32beb9 inset; }
.hs-size { flex: none; min-width: 44px; height: 36px; padding: 0 10px; border: 1px solid #3a4040; border-radius: 8px; background: #232828; color: #f7f7f7; font-size: 0.8125rem; }
.hs-size.is-on { border-color: #32beb9; background: #32beb9; color: #062a28; font-weight: 700; }
/* Tiles, filter buttons and links ease on hover and press (Joshua, 2026-10-27). Each press rebuilds
   the panel, so drawSearch() in js/shell.js animates pressed-state changes and newly shown buttons. */
.hs-tile, .hs-chip, .hs-swatch, .hs-size, .hs-token, .hs-link, .hs-more, .hs-row {
  transition: background-color var(--motion-in) var(--motion-ease-out), border-color var(--motion-in) var(--motion-ease-out),
    color var(--motion-in) var(--motion-ease-out), box-shadow var(--motion-in) var(--motion-ease-out),
    opacity var(--motion-in) var(--motion-ease-out), scale var(--motion-out) var(--motion-ease-out);
}
.hs-chip small { transition: color var(--motion-in) var(--motion-ease-out); }
.hs-tile:not(:disabled):hover, .hs-chip:not(:disabled):hover, .hs-swatch:not(:disabled):hover, .hs-size:not(:disabled):hover, .hs-token:hover { border-color: #5f6a6a; }
.hs-tile.is-on:hover, .hs-chip.is-on:hover, .hs-swatch.is-on:hover, .hs-size.is-on:hover { border-color: #32beb9; }
/* .is-pressing is set on pointerdown by js/shell.js: on phones :active starts too late for a quick tap. */
.hs-tile:not(:disabled):active, .hs-chip:not(:disabled):active, .hs-swatch:not(:disabled):active, .hs-size:not(:disabled):active, .hs-token:active,
.hs-tile.is-pressing, .hs-chip.is-pressing, .hs-swatch.is-pressing, .hs-size.is-pressing, .hs-token.is-pressing { scale: 0.95; }
.hs-link:hover, .hs-more:hover { color: #5fd3cf; }
/* Picked filters, list head and result rows. */
.hs-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 0; color: #9a9a9a; font-size: 0.8125rem; }
.hs-token { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; font-size: 0.8125rem; border: 1px solid #3a4040; border-radius: 999px; background: #232828; color: #f7f7f7; }
.hs-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid #262b2b; color: #9a9a9a; font-size: 0.8125rem; }
.hs-sort { padding: 5px 8px; border: 1px solid #3a4040; border-radius: 8px; background: #232828; color: #f7f7f7; font: inherit; font-size: 0.8125rem; }
.hs-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #222727; color: inherit; text-decoration: none; }
.hs-row:hover { background: #232828; }
.hs-row[aria-busy="true"] { opacity: 0.7; }
.hs-row__img { flex: none; width: 48px; height: 48px; border-radius: 8px; background: #000 url('../images/kure_lm_default_product_image_thumb.jpg') center / cover no-repeat; object-fit: cover; }
.hs-row__text { flex: 1; min-width: 0; }
.hs-row__text b { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.hs-row__text mark { background: none; color: #32beb9; font-weight: 700; }
.hs-row__text small { color: #9a9a9a; font-size: 0.75rem; }
.hs-row__text em { color: #d77; font-style: normal; }
.hs-row__price { flex: none; display: flex; align-items: center; gap: 6px; }
.hs-row__price s { color: #8c8c8c; font-size: 0.8125rem; }
.hs-row__price .spinner { margin: 0; }
/* Staff: the Adjust product button sits beside the result link, not inside it. */
.hs-row-wrap { display: flex; align-items: center; border-bottom: 1px solid #222727; }
.hs-row-wrap .hs-row { flex: 1; min-width: 0; border-bottom: 0; }
.hs-row-wrap .adjust-trigger { position: static; flex: none; margin-right: 10px; }
.hs-more { display: block; font-size: inherit; width: 100%; padding: 12px; border: 0; border-top: 1px solid #262b2b; background: none; color: #32beb9; font-weight: 600; }
@media (min-width: 1024px) {
  .hs-panel {
    left: auto;
    right: 0;
    top: calc(100% + 8px);
    width: min(860px, calc(100vw - 32px));
    border: 1px solid #2c3232;
    border-radius: 12px;
  }
  .hs-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .hs-tile { flex-direction: row; align-items: center; gap: 10px; font-size: 0.875rem; }
}
/* MUI Badge, theme override (min 16px, padding 4px), color error. */
.nav-action__badge-wrap { position: relative; display: inline-flex; vertical-align: middle; flex-shrink: 0; }
/* Also styles the copy js/shell.js puts in the .cart-ghost bubble, outside .nav-action. */
.nav-action__badge-wrap { color: #32beb9; }
.nav-action__badge-wrap .icon { font-size: 28px; }
.nav-action__badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
  display: flex;
  flex-flow: row wrap;
  place-content: center;
  align-items: center;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 4px;
  border-radius: 10px;
  background-color: #ff4d4f;
  color: #fff;
  font-family: var(--mui-font);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  z-index: 1;
}
.nav-action__badge[hidden] { display: none; }

/* ---------- MUI Drawer / Modal mechanics ---------- */
.drawer, .modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  transition: visibility 0s linear 225ms;
}
.modal { z-index: 3000; }
.drawer:target, .drawer[data-open], .modal:target, .modal[data-open] {
  visibility: visible;
  transition: visibility 0s;
}
.drawer:target > .backdrop, .modal:target > .backdrop { opacity: 1; }
.drawer__paper {
  position: fixed;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  outline: 0;
  z-index: 1200;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  color: #262626;
  transition: transform 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.drawer:target .drawer__paper, .drawer[data-open] .drawer__paper {
  transform: none;
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
/* Anchors: bottom below 600px (getDeviceSize xs), else left/right. */
.drawer--menu .drawer__paper, .drawer--cart .drawer__paper {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  max-height: 100%;
  transform: translateY(100vh);
}
@media (min-width: 600px) {
  .drawer--menu .drawer__paper { top: 0; bottom: auto; right: auto; height: 100%; max-height: none; transform: translateX(-100%); }
  .drawer--cart .drawer__paper { top: 0; bottom: auto; left: auto; right: 0; height: 100%; max-height: none; transform: translateX(100%); }
}

/* ---------- Left menu drawer (DrawerMenuLeft.js) ----------
   Kure colors instead of React's red, blue and green accents (Joshua, 2026-10-17):
   the header's #121212 and #2c3232, teal var(--primary) accents, and the
   #262a2a hover of the Adjust product menu (css/card.css). */
.drawer--menu .drawer__paper.menu-paper {
  position: relative;
  background: #121212;
  width: 98vw;
  max-width: 380px;
  min-width: 280px;
  min-height: 100vh;
  padding: 0;
}
.menu-paper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  z-index: 1;
}
.menu-paper__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}
.menu-top {
  position: relative;
  height: 68px;
  flex-shrink: 0;
  background: #121212;
  border-bottom: 1px solid #2c3232;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 24px;
}
.menu-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(50, 190, 185, 0.6) 50%, transparent 100%);
}
.wrapper .menu-top__label, .menu-top__label {
  margin: 0;
  font-family: var(--mui-font);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.57;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.menu-top__close { display: flex; color: rgba(255, 255, 255, 0.5); }
.menu-top__close .icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.menu-top__close:hover .icon { color: var(--primary-hover); transform: rotate(180deg) scale(1.1); }

.menu-scroll {
  flex: 1;
  overflow: auto;
  padding: 16px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) rgba(255, 255, 255, 0.02);
}
.menu-scroll::-webkit-scrollbar { width: 6px; }
.menu-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 3px; }
.menu-scroll::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
.menu-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }
@media (max-width: 768px) {
  .menu-scroll { scrollbar-color: var(--primary) transparent; }
  .menu-scroll::-webkit-scrollbar { width: 4px; }
}
.menu-section--browse { margin-bottom: 24px; }
.menu-section__label {
  margin: 0 0 16px;
  padding: 0 24px;
  font-family: var(--mui-font);
  line-height: 1.57;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.menu-list { list-style: none; margin: 0; padding: 0; position: relative; }
.menu-list > li { display: flex; justify-content: flex-start; align-items: center; position: relative; width: 100%; margin-bottom: 4px; }
.menu-list--account > li { margin-bottom: 8px; }
.menu-item {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-width: 0;
  min-height: 14px;
  padding: 4px 16px;
  margin: 2px 16px;
  border-radius: 8px;
  text-align: left;
  text-decoration: none;
  font-family: var(--mui-font);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.57;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
/* ListItemText margins (4px top and bottom) around the 1.57 line box. */
.menu-item { padding-top: 8px; padding-bottom: 8px; }
.menu-item--account { font-size: 14px; padding-top: 4px; padding-bottom: 4px; }
.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  transition: height 0.3s ease;
}
.menu-item:hover { background-color: #262a2a; color: var(--primary-hover); transform: translateX(8px); }
.menu-item:hover::before { height: 70%; }
.menu-item:focus-visible { outline: none; background-color: rgba(50, 190, 185, 0.16); }
.menu-item:focus-visible::before { height: 70%; }
/* Design 26: two columns, each with a teal category icon; the current page is bold teal. */
.menu-list--browse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  padding: 4px 24px 4px;
}
.menu-list--browse > li { margin: 0; }
.menu-list--browse .menu-item {
  gap: 10px;
  margin: 0;
  padding: 9px 0;
  font-size: 15px;
  color: #d9e0e0;
  letter-spacing: normal;
}
.menu-list--browse .menu-item .icon { width: 18px; height: 18px; flex: none; color: var(--primary); opacity: 0.8; }
.menu-list--browse .menu-item[aria-current="page"] { color: var(--primary); font-weight: 700; }
.menu-list--browse .menu-item[aria-current="page"] .icon { opacity: 1; }
.menu-list--browse .menu-item:hover { background: none; transform: translateX(4px); }
.menu-list--browse .menu-item::before { display: none; }
.menu-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #2c3232 20%, #2c3232 80%, transparent 100%);
  margin: 24px;
}

/* ---------- Cart drawer (DrawerCheckout.js, DrawerAuth.js) ---------- */
.drawer--cart .drawer__paper.cart-paper { background: #383737fa; overflow-y: auto; }
.cart-paper__inner {
  width: 98vw;
  max-width: 600px;
  min-width: 250px;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 15px;
  color: white;
  outline: none;
  font-family: var(--mui-font);
}
.cart-top { padding-bottom: 16px; }
.cart-head {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: bold;
  line-height: 45px;
}
.cart-head__title {
  margin: 0;
  font-family: var(--mui-font);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  padding-right: 8px;
  min-width: 0;
  overflow-wrap: break-word;
}
.cart-head__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 0;
  min-width: 0;
  color: inherit;
  border-radius: 4px;
  line-height: 1.75;
}
.cart-head__close .icon { width: 50px; min-height: 50px; cursor: pointer; }
.drawer-auth__block { padding-top: 60px; }
.drawer-auth__title {
  margin: 0;
  font-family: var(--mui-font);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.27;
}
.drawer-auth__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 64px;
  margin-top: 24px;
  padding: 5px 15px;
  border: 1px solid;
  border-radius: 4px;
  background: #32beb9;
  color: white;
  font-family: var(--mui-font);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  text-decoration: none;
  text-transform: capitalize;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.drawer-auth__button--underline:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .cart-paper__inner { padding: 38px; }
  .cart-head { font-size: 36px; }
  .cart-head__title { font-size: 2.25rem; }
  .drawer-auth__title { font-size: 30px; }
}
.p65 { margin: 0; font-size: 0.875rem; line-height: 1.57; }
.p65[hidden] { display: none; }
.p65__icon { font-size: 1.25rem; color: #ff4d4f; position: relative; top: 5px; }
.p65 a { color: #32beb9; text-decoration: none; }
.p65 a:hover { text-decoration: underline; }

/* ---------- Pager (cart-tools.js) ---------- */
.pager { display: flex; justify-content: center; align-items: center; padding: 20px; }
.pager button {
  margin: 0 5px;
  height: 20px;
  min-width: 20px;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: inherit;
  color: inherit;
  font-family: var(--mui-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pager button.is-selected { color: #fff; background-color: #57c4c1; }
.pager button.pager__step { color: white; }
.pager button:disabled { color: rgba(0, 0, 0, 0.26); cursor: default; }

/* ---------- Store modal (StoreSelectModal.js) ---------- */
.store-modal__box {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  border: 1px solid gray;
  background-color: #272727;
  box-shadow: var(--shadow-24);
  border-radius: 20px;
  padding: 0;
  /* The staff store panel can be taller than a short screen. */
  max-height: 90vh;
  overflow-y: auto;
  font-family: var(--mui-font);
}
/* Eased with the backdrop (policy native-ui-motion-eased-show-hide-v2): fade and a slight grow in, faster fade out. */
.store-modal__box {
  opacity: 0;
  scale: 0.96;
  transition: opacity var(--motion-out) var(--motion-ease-in), scale var(--motion-out) var(--motion-ease-in);
}
.modal[data-open] .store-modal__box, .modal:target .store-modal__box {
  opacity: 1;
  scale: 1;
  transition-duration: var(--motion-in);
  transition-timing-function: var(--motion-ease-out);
}
@media (min-width: 489px) { .store-modal__box { width: 360px; } }
.store-modal__head { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px; }
.store-modal__title { margin: 0; color: white; font-family: var(--mui-font); }
.store-modal__close { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; padding: 0; min-width: 0; color: inherit; line-height: 1.75; }
.store-modal__close .icon { color: white; }
.store-list { list-style: none; margin: 0; padding: 8px 0; width: 100%; max-width: 360px; }
.store-list__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* React's bundle loads DashboardLayout/DSidebar/styles.css globally; its
     .MuiListItemButton-root rules win over the component sx and set these. */
  margin: 3px 18px;
  padding: 10px 18px;
  border-radius: 17px;
  text-decoration: none;
  color: inherit;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.store-list__item.is-selected,
.store-list__item:hover { background-color: #1c1b20; color: white; }
.store-list__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  border-radius: 50%;
  background-color: #bfbfbf;
  color: #000;
}
.store-list__item.is-selected svg,
.store-list__item:hover svg { fill: white; }
.store-list__text { flex: 1 1 auto; min-width: 0; margin: 6px 0; }
.store-list__name { display: block; color: white; font-size: 0.875rem; line-height: 1.57; }
.store-list__address { display: block; color: #8c8c8c; font-size: 0.75rem; line-height: 1.66; }
.store-list__item.is-selected .store-list__address,
.store-list__item:hover .store-list__address { color: white; }
/* Store rail and panels for users with shortcuts (not in React). */
.store-rail-layout { display: flex; gap: 8px; margin: 0 12px 14px; }
.store-rail { flex: 0 0 76px; display: flex; flex-direction: column; gap: 4px; }
.store-rail__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #8c8c8c;
  font-family: var(--mui-font);
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.store-rail__tab:hover { color: white; }
.store-rail__tab[aria-selected="true"] { background-color: #1c1b20; color: white; }
.store-rail__avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #bfbfbf; color: #000; }
.store-rail__avatar .icon { width: 20px; height: 20px; }
.store-rail__avatar.is-current svg { fill: white; }
.store-panel { flex: 1 1 auto; min-width: 0; padding: 10px 6px; border-radius: 14px; background-color: #1c1b20; }
.store-panel__name { margin: 0 8px; color: white; font-size: 0.875rem; line-height: 1.57; }
.store-panel__address { margin: 0 8px 6px; color: #8c8c8c; font-size: 0.75rem; line-height: 1.66; }
.store-panel__links { list-style: none; margin: 0; padding: 0; }
.store-panel__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  color: #d9d9d9;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
}
.store-panel__link .icon { flex: 0 0 auto; width: 18px; height: 18px; fill: #57c4c1; }
.store-panel__link:hover { background-color: #27262c; color: white; }
.store-panel__link--shop { margin-bottom: 4px; border-bottom: 1px solid #2e2d33; border-radius: 8px 8px 0 0; color: white; }
/* Pending store link (js/shell.js): the spinner takes the icon's place; the other links dim and stop taking presses. */
#store-modal [aria-busy="true"] .spinner + svg { display: none; }
.store-panel__link .spinner { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; color: #57c4c1; }
.store-list__avatar .spinner { width: 20px; height: 20px; margin: 0; color: white; }
#store-modal[data-busy] a[href^="/store-select/"] { cursor: progress; }
#store-modal[data-busy] a[href^="/store-select/"]:not([aria-busy="true"]) { opacity: 0.5; pointer-events: none; }
.store-rail__tab:focus-visible,
.store-panel__link:focus-visible { outline: 2px solid #57c4c1; outline-offset: 2px; }

/* ---------- Age gate (design 5 from tmp/age-gate-designs.html; departs from React's AgeGatePopup) ---------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 1300;
  overflow-y: auto;
  background-color: rgba(30, 30, 30, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #f7f7f7;
  font-family: var(--mui-font);
}
/* Scroll lock while the gate is open. */
body:has(.age-gate[data-open]) { overflow: hidden; }
.age-gate__container { min-height: 100%; display: flex; justify-content: center; }
.age-gate__content {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 22px 24px;
  text-align: center;
}
.age-gate__logo { width: 240px; max-width: 80%; }
.age-gate__welcome { margin: 14px 0 2px; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.age-gate__age { margin: 0; color: #bfbfbf; font-size: 0.9375rem; line-height: 1.4; }
.age-gate__age b { color: #52b4b1; font-weight: 700; }
.age-gate__label { margin: 22px 0 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8c8c8c; }
.age-gate__stores {
  width: 100%;
  padding: 6px;
  text-align: left;
  background: #272727;
  border: 1px solid #3a3a3a;
  border-radius: 16px;
}
.age-gate__store {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.age-gate__store[data-selected] { background: #1c2b2b; outline: 1px solid #52b4b1; }
.age-gate__store:focus-visible { outline: 2px solid #57c4c1; outline-offset: 2px; }
.age-gate__radio { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid #6b6b6b; border-radius: 50%; }
.age-gate__store[data-selected] .age-gate__radio { border-color: #52b4b1; background: #52b4b1; box-shadow: inset 0 0 0 4px #1c2b2b; }
.age-gate__store-text { flex: 1; min-width: 0; }
.age-gate__store-name { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.age-gate__store-address { display: block; color: #8c8c8c; font-size: 0.75rem; line-height: 1.4; }
.age-gate__enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #52b4b1;
  color: #0d0d0d;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.age-gate__enter:focus-visible { outline: 2px solid #f7f7f7; outline-offset: 2px; }
.age-gate__enter-label { display: inline-flex; align-items: center; }
.age-gate__enter-store { font-size: 0.75rem; font-weight: 500; opacity: 0.75; }
.age-gate__enter .spinner { width: 16px; height: 16px; color: #0d0d0d; }
/* Pending: the Enter press is navigating; the store list is locked. */
.age-gate[data-busy] .age-gate__stores { opacity: 0.5; pointer-events: none; }
.age-gate[data-busy] .age-gate__enter { pointer-events: none; }
.age-gate__legal { margin: 0; padding-top: 14px; color: #6b6b6b; font-size: 0.6875rem; line-height: 1.4; }

/* ---------- Footer (Footer/index.js, ContentFooter.js) ---------- */
.footer { padding: 16px; }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer__brand, .footer__col { width: 100%; }
@media (min-width: 489px) { .footer__brand, .footer__col { width: 40%; } }
@media (min-width: 1024px) { .footer__brand, .footer__col { width: auto; } }
.footer__logo-box { margin: 10px; }
.footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 1rem;
  color: inherit;
  text-decoration: none;
}
.footer__logo img { width: 225px; height: 113px; }
.wrapper .footer__copy { margin: 0 0 1rem 10px; }
/* The version shows on the front page only (main.home, kure-front.html.twig). */
.footer__version { display: none; }
.layout:has(main.home) .footer__version { display: inline; }
.footer__col { margin: 16px 8px; }
/* React's sx sets mb 0.5rem, but its global heading margin reset wins, so the title renders with no margin. */
.wrapper .footer__title { margin: 0; font-size: 20px; }
.footer__list { list-style: none; margin: 0; padding: 8px 0; position: relative; }
.footer__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: left;
}
.footer__item a { text-decoration: none; }
.footer__icon {
  display: inline-flex;
  flex-shrink: 0;
  min-width: 0;
  margin-right: 3px;
  padding-bottom: 3px;
  color: rgba(0, 0, 0, 0.54);
}
.footer__icon img { width: 16px; height: 16px; }
.footer__link {
  display: block;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 15px;
}
.footer__link .mui-body1 { display: block; line-height: 1.57; }
.footer__link--company { padding-top: 3px; }
.footer__link--hover:hover { text-decoration: underline; cursor: pointer; }
.footer__link:not(.footer__link--hover) { cursor: default; }

/* ---------- Add-to-cart flight (js/shell.js flyToCart, not in React) ---------- */
.cart-flyer { position: fixed; z-index: 9998; width: 72px; height: 72px; pointer-events: none; }
.cart-flyer img {
  display: block;
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background-color: #000;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(50, 190, 185, 0.6);
}
.cart-ghost {
  position: fixed;
  top: 12px;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid #2e3333;
  border-radius: 50%;
  background-color: #1c1c1c;
  box-shadow: var(--shadow-24);
  pointer-events: none;
}

/* Easter egg (js/joshua.js): full-screen hologram of the JoshIdeas logo; a tap closes it. */
.ji-egg { position: fixed; inset: 0; z-index: 10000; background: rgba(5, 5, 6, 0.94); cursor: pointer; outline: none; }
.ji-egg canvas { display: block; width: 100%; height: 100%; }