/* ==========================================================================
   The Lavish Leaf store shell.

   2026-09-30: the owner asked for the store to look like the Symphonymph
   app: a Home of shelves, a sidebar that is always there on a wide screen,
   and a top bar with search and the cart.

   2026-10-01, the owner: "make the store background color match the grey
   from the rest of the website", "remove the settings on the online store
   page. We will just set what that store page looks like." So there is ONE
   look now, on the site's own palette (CLAUDE.md rule 1): the page grey
   #3d3d3d (the sidebar too, owner 2026-10-01), cards on #474747, green
   fills #4AB73C with #14261A ink that lighten on hover, green text #6FD65F.
   The visitor can still drag the sidebar wider or narrower (store.js keeps
   the width in localStorage), and wish lists stay.

   This page loads style.css FIRST, for the site's own header, page hero,
   Contact & Newsletter band and footer. Two stylesheets on one page share
   variable names, so every store rule is scoped to .ss-shell or a dialog,
   and the names style.css uses (--leaf, --white, --card ...) are remapped
   inside those scopes only.
   ========================================================================== */

:root {
  --font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mark: 'Sriracha', cursive;
  --radius: 12px;
  --radius-sm: 8px;
  --side-w: 390px;
  --top-h: 64px;
  --ease: 180ms cubic-bezier(.2,.7,.2,1);

  /* The site's greys (style.css :root), named for the shell. */
  --surface: #3d3d3d;
  --surface-2: #2e2e2e;
  --surface-3: #474747;
  --surface-4: #525252;
  --border: #565656;
  --border-soft: #4a4a4a;
  --text: #F2F4F2;
  --muted: #C8CFC8;
  --faint: #B4BAB4;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.18);
  --ss-shadow-md: 0 10px 30px rgba(0,0,0,.4);
  --scrim: rgba(0,0,0,.55);

  /* Green: --accent is TEXT (#6FD65F), --accent-fill is a FILL (#4AB73C,
     4.21:1, never text), lightening to --accent-fill-hover. */
  --accent: #6FD65F;
  --accent-fill: #4AB73C;
  --accent-fill-hover: #6FD65F;
  --accent-soft: rgba(74,183,60,.18);
  --on-accent: #14261A;
}

/* The names style.css and cart.js were written against, mapped onto this
   page's tokens INSIDE the shell and its dialogs only. */
.ss-shell, .ss-dialog, .cart-panel, .cart-banner, .ss-toast, .cart-toast, .cart-doc, .sp-pop {
  --leaf: var(--accent-fill);
  --leaf-bright: var(--accent);
  --ink: var(--on-accent);
  --card: var(--surface-3);
  --white: var(--text);
  --gray: var(--muted);
  --rule: var(--border);
  --rule-soft: var(--border-soft);
  --bg-3: var(--surface-4);
  --field: var(--surface-2);
  --field-rule: var(--border);
  --field-ink: var(--text);
}

/* ----------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.store-shell { background: var(--surface); }
.ss-shell, .ss-dialog, .cart-panel, .ss-toast, .cart-toast, .cart-doc, .sp-pop {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
/* :where() keeps these at element specificity, so a component's own class
   (.ss-item, .ss-icon ...) still decides its colour. */
:where(.ss-shell, .ss-dialog, .cart-panel) ul { padding: 0; list-style: none; }
:where(.ss-shell, .ss-dialog, .cart-panel) a { color: var(--accent); text-decoration: none; }
:where(.ss-shell, .ss-dialog, .cart-panel) a:hover { text-decoration: underline; }
:where(.ss-shell, .ss-dialog) button { font: inherit; color: inherit; }
:where(.ss-shell) img { display: block; max-width: 100%; }
:where(.ss-shell, .ss-dialog) svg { display: block; }
.ss-shell :focus-visible, .ss-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:where(.ss-shell, .ss-dialog) :is(h2, h3) { letter-spacing: 0; text-wrap: initial; }
[hidden] { display: none !important; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  padding: 10px 14px; background: var(--accent-fill); color: var(--on-accent); border-radius: var(--radius-sm);
}
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------- buttons */
.ss-shell .btn, .ss-dialog .btn, .cart-panel .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 18px;
  border: 0; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent);
  font-weight: 800; font-size: .92rem; letter-spacing: .01em;
  cursor: pointer; text-decoration: none;
  transition: background var(--ease), transform var(--ease);
}
.ss-shell .btn:hover, .ss-dialog .btn:hover, .cart-panel .btn:hover { text-decoration: none; background: var(--accent-fill-hover); color: var(--on-accent); transform: none; }
.ss-shell .btn:active, .ss-dialog .btn:active { transform: translateY(1px); }
.ss-shell .btn:disabled, .cart-panel .btn:disabled { opacity: .5; cursor: default; }
.ss-shell .btn-sm, .ss-dialog .btn-sm { min-height: 36px; padding: 7px 16px; font-size: .88rem; }
.ss-shell .btn-wide, .cart-panel .btn-wide { width: 100%; display: flex; }
.ss-shell .btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
.ss-shell .btn-ghost:hover { background: var(--accent-fill); color: var(--on-accent); }

/* ----------------------------------------------------------- sidebar */
/* Three columns: the sidebar, the drag handle, the store. */
.ss-shell {
  display: grid; grid-template-columns: var(--side-w) 8px minmax(0, 1fr); align-items: start;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}
.ss-side {
  grid-column: 1;
  position: sticky; top: var(--site-h, 96px); z-index: 5;
  height: calc(100vh - var(--site-h, 96px));
  width: var(--side-w);
  display: flex; flex-direction: column;
  background: var(--surface);
  overflow-y: auto; overscroll-behavior: contain;
  transition: transform var(--ease);
}
.ss-resize {
  grid-column: 2;
  position: sticky; top: var(--site-h, 96px); z-index: 6;
  height: calc(100vh - var(--site-h, 96px));
  cursor: col-resize; touch-action: none;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.ss-resize::after {
  content: ''; width: 4px; height: 44px; border-radius: 4px;
  background: var(--border); transition: background var(--ease), height var(--ease);
}
.ss-resize:hover::after, .ss-resize:focus-visible::after, body.ss-resizing .ss-resize::after { background: var(--accent-fill); height: 64px; }
.ss-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.ss-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.ss-resizing .ss-side { transition: none; }

.ss-side-head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px 24px 16px; text-align: center;
}
.ss-brand-line { font-size: .88rem; line-height: 1.5; color: var(--muted); max-width: 30ch; }
.ss-logo { flex: 0 0 auto; width: 150px; transition: transform var(--ease); }
.ss-logo:hover { transform: scale(1.03); }
.ss-logo img { width: 100%; height: auto; }

.ss-side-actions { padding: 2px 16px 14px; border-bottom: 1px solid var(--border-soft); }
.ss-action {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; margin: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text); font-weight: 600; font-size: .95rem; text-align: left; cursor: pointer;
  transition: background var(--ease);
}
.ss-action:hover { background: var(--accent-soft); text-decoration: none; color: var(--text); }
.ss-action svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); fill: currentColor; }
.ss-action-note { margin: -4px 10px 6px 42px; font-size: .78rem; line-height: 1.4; color: var(--faint); }

.ss-nav { padding: 10px 12px 18px; flex: 1 1 auto; }
.ss-heading {
  margin: 18px 12px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.ss-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 11px 14px; margin: 2px 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--text); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.ss-item:hover { background: var(--surface-4); text-decoration: none; }
.ss-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.ss-item svg { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; opacity: .9; }
.ss-item-sub { font-weight: 500; color: var(--muted); font-size: .94rem; }
.ss-item-sub:hover { color: var(--text); }
.ss-item .ss-n { margin-left: auto; font-size: .8rem; color: var(--faint); font-weight: 600; }
.ss-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent);
  font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center;
}

.ss-scrim { position: fixed; inset: 0; z-index: 1100; background: var(--scrim); }

/* ----------------------------------------------------------- main + top bar */
.ss-main { grid-column: 3; min-width: 0; min-height: calc(100vh - var(--site-h, 96px)); display: flex; flex-direction: column; }
.ss-top {
  position: sticky; top: var(--site-h, 96px); z-index: 20;
  display: flex; align-items: center; gap: 10px;
  height: var(--top-h); padding: 0 16px 0 24px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.ss-title { font-size: 1.3rem; font-weight: 700; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ss-top-right { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
.ss-icon {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.ss-icon:hover { background: var(--surface-4); text-decoration: none; color: var(--text); }
.ss-icon[aria-current="page"] { color: var(--accent); }
.ss-icon svg { width: 22px; height: 22px; fill: currentColor; }
.ss-icon .ss-badge { position: absolute; top: 4px; right: 2px; }
.ss-menu {
  display: none; align-items: center; gap: 8px; flex: 0 0 auto;
  min-height: 40px; padding: 6px 14px 6px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text); font-weight: 700; font-size: .9rem; cursor: pointer;
}
.ss-menu:hover { background: var(--surface-4); }
.ss-menu svg { width: 20px; height: 20px; }

/* The search field, typed into right in the top bar. */
.ss-search {
  display: flex; align-items: center; gap: 8px;
  width: 340px; max-width: 100%; min-width: 0; height: 42px;
  padding: 0 4px 0 14px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ss-search:focus-within { border-color: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-soft); }
.ss-search svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.ss-search input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: .98rem;
}
.ss-search input::placeholder { color: var(--faint); }
.ss-search input:focus { outline: none; }
.ss-search input::-webkit-search-cancel-button { display: none; }
.ss-search button {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.ss-search button:hover { background: var(--surface-4); color: var(--text); }

.ss-content { padding: 8px 0 48px; flex: 1 1 auto; }
.view { animation: rise .22s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- shelves */
.shelf { padding: 16px 0 4px; }
.shelf-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 28px 8px 32px;
}
.shelf-head h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
/* "See all" stands out (owner, 2026-10-11): bigger, bold, a pill. */
.shelf-all {
  font-size: 1rem; font-weight: 900; text-decoration: none; white-space: nowrap;
  padding: 7px 16px; border-radius: 999px; border: 2px solid var(--accent); color: var(--accent);
  transition: background var(--ease), color var(--ease);
}
.shelf-all:hover, .shelf-all:focus-visible { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.shelf-row {
  display: flex; gap: 14px;
  padding: 4px 32px 16px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 32px;
  scrollbar-width: auto; scrollbar-color: var(--border) transparent;
}
.shelf-row::-webkit-scrollbar { height: 14px; }
.shelf-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.shelf-row::-webkit-scrollbar-thumb:hover { background-color: var(--accent-fill); }
.shelf[data-empty] .shelf-row { display: none; }
/* Shelf arrows (owner, 2026-10-02), drawn by store.js. Hidden at either end. */
.shelf-track { position: relative; }
.shelf-arrow {
  position: absolute; top: 50%; transform: translateY(-60%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--ss-shadow-md);
  transition: background var(--ease), color var(--ease);
}
.shelf-arrow:hover { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.shelf-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shelf-arrow[hidden] { display: none; }
.shelf-arrow svg { width: 30px; height: 30px; }
.shelf-arrow-left { left: 6px; }
.shelf-arrow-right { right: 6px; }
.shelf[data-empty] .shelf-arrow { display: none; }
@media (hover: none) { .shelf-arrow { display: none; } }

/* A compact card (owner, 2026-10-01: "they take up too much space"): 180px
   wide with a 4:3 photo, and the button on its own full-width line under
   the price so a long label like "Player Registration" stays inside. */
.sp-card {
  flex: 0 0 180px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 8px 8px 10px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--surface-3);
  box-shadow: var(--shadow);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.sp-card:hover { transform: translateY(-2px); border-color: var(--border); box-shadow: var(--ss-shadow-md); }
.sp-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 7px; background: var(--surface-4);
  display: flex; align-items: center; justify-content: center;
}
.sp-media img { width: 100%; height: 100%; object-fit: cover; }
.sp-icon { font-size: 2.2rem; }
.sp-wish {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ease), transform var(--ease);
}
.sp-wish svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-wish:hover { background: rgba(0,0,0,.7); transform: scale(1.08); }
.sp-wish[aria-pressed="true"] { color: var(--accent); }
.sp-wish[aria-pressed="true"] svg { fill: currentColor; }
.sp-name { margin: 8px 2px 0; font-size: .86rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.sp-blurb {
  margin: 4px 2px 0; font-size: .76rem; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: auto 2px 0; padding-top: 10px; }
.sp-price { font-weight: 800; font-size: .88rem; }
.sp-price .old-price { margin-left: 6px; font-weight: 500; color: var(--faint); text-decoration: line-through; }
.ss-shell .sp-foot .btn {
  width: 100%; min-height: 32px; padding: 6px 10px;
  font-size: .8rem; line-height: 1.2; text-align: center; white-space: normal;
}

/* The lists shelf: one tile per wish list, like the app's playlists row. */
.sp-list {
  flex: 0 0 170px; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 96px; padding: 14px;
  border: 0; border-radius: var(--radius); text-align: left; cursor: pointer;
  background: var(--accent-soft); color: var(--accent);
  transition: transform var(--ease), filter var(--ease);
}
.sp-list:hover { transform: translateY(-2px); filter: brightness(1.08); text-decoration: none; }
.sp-list svg { width: 22px; height: 22px; fill: currentColor; }
.sp-list-name { font-weight: 800; font-size: .95rem; }
.sp-list-n { font-size: .78rem; color: var(--muted); font-weight: 600; }
.sp-list-new { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); color: var(--muted); }
.sp-list-new:hover { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }

.ss-home-foot { padding: 22px 32px 0; font-size: .88rem; color: var(--faint); max-width: 60ch; }

/* ----------------------------------------------------------- search results */
#view-search, #view-list { padding: 18px 32px 0; max-width: 1040px; }

.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  font-weight: 600; font-size: .88rem; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.ss-chip:hover { background: var(--surface-4); }
.ss-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-fill); color: var(--accent); }
.ss-chip[aria-pressed="true"]::before { content: '\2713'; font-size: .85em; }

.ss-sortrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.ss-sortlabel { font-size: .88rem; color: var(--muted); font-weight: 700; }
.ss-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.ss-seg button {
  min-height: 34px; padding: 6px 14px; border: 0; background: transparent; color: var(--muted);
  font-size: .84rem; font-weight: 600; cursor: pointer; transition: background var(--ease), color var(--ease);
}
.ss-seg button + button { border-left: 1px solid var(--border); }
.ss-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.ss-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); font-weight: 600; margin-left: auto; cursor: pointer; }
.ss-check input { width: 18px; height: 18px; accent-color: var(--accent-fill); }
.ss-count { margin: 16px 0 6px; font-size: .86rem; color: var(--faint); }

.ss-results { display: flex; flex-direction: column; }
.ss-result {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 10px; border-radius: var(--radius); transition: background var(--ease);
}
.ss-result:hover { background: var(--surface-3); }
.ss-result-thumb {
  width: 64px; height: 64px; border-radius: 9px; overflow: hidden; background: var(--surface-4);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.ss-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-result-title { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.ss-result-meta { margin-top: 4px; font-size: .84rem; color: var(--muted); }
.ss-result-meta mark { background: transparent; color: var(--accent); font-weight: 700; }
.ss-result-title mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.ss-result-side { display: flex; align-items: center; gap: 6px; }
.ss-result-side .sp-wish { position: static; background: transparent; color: var(--muted); }
.ss-result-side .sp-wish:hover { background: var(--surface-4); color: var(--text); }
.ss-result-side .sp-wish[aria-pressed="true"] { color: var(--accent); }

.ss-empty { padding: 36px 0; color: var(--muted); font-size: .98rem; max-width: 50ch; }

/* ----------------------------------------------------------- a list / a shelf page */
.ss-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ss-list-kicker { font-size: .88rem; color: var(--muted); }
.ss-list-actions { display: flex; gap: 8px; }
.ss-grid { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 10px; }
.ss-grid .sp-card { flex: 0 1 180px; }

/* ----------------------------------------------------------- dialogs */
.ss-dialog {
  margin: auto; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 22px 22px 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-3); color: var(--text); box-shadow: var(--ss-shadow-md);
}
.ss-dialog-sm { width: min(400px, calc(100vw - 32px)); }
.ss-dialog::backdrop { background: var(--scrim); }
.ss-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-dialog-head h2 { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.ss-dialog-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.ss-dialog-close:hover { background: var(--surface-4); color: var(--text); }
.ss-dialog-p { margin-top: 8px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.ss-dialog label { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: .86rem; font-weight: 700; color: var(--muted); }
.ss-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-dialog input, .ss-dialog textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 1rem;
}
.ss-dialog input:focus, .ss-dialog textarea:focus { outline: none; border-color: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-soft); }
.ss-dialog textarea { resize: vertical; min-height: 110px; }
.ss-dialog-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.ss-dialog-status { font-size: .88rem; color: var(--accent); font-weight: 600; }
.ss-pick { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.ss-pick button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text); font-weight: 600; text-align: left; cursor: pointer;
}
.ss-pick button:hover { background: var(--surface-4); }
.ss-pick button[aria-pressed="true"] { color: var(--accent); }
.ss-pick button[aria-pressed="true"]::after { content: '\2713'; }
.ss-pick .ss-pick-new { color: var(--muted); }

.ss-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 1500; transform: translateX(-50%);
  padding: 11px 18px; border-radius: 999px; background: var(--text); color: #252525;
  font-weight: 700; font-size: .92rem; box-shadow: var(--ss-shadow-md); max-width: calc(100vw - 32px);
}

/* ----------------------------------------------------------- the cart (cart.js) */
.store-shell .cart-fab { display: none; }
.cart-panel {
  margin: auto; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-3); color: var(--text); box-shadow: var(--ss-shadow-md);
}
.cart-panel::backdrop { background: var(--scrim); }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-head h2 { font-size: 1.2rem; font-weight: 800; }
.cart-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.cart-close:hover { background: var(--surface-4); color: var(--text); }
.cart-lines { margin: 14px 0 0; display: grid; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.cart-name { font-size: .95rem; }
.cart-qty { display: inline-flex; align-items: center; gap: 4px; }
.cart-qty button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.cart-n { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.cart-price { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 800; }
.cart-total { margin: 12px 0; font-weight: 800; text-align: right; }
.cart-note-label { display: block; font-size: .86rem; color: var(--muted); margin-bottom: 6px; }
.cart-panel textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; margin-bottom: 14px; }
.cart-pay { width: 100%; }
.cart-fine { font-size: .84rem; color: var(--muted); margin-top: 8px; text-align: center; }
.cart-waiver { margin: 12px 0 4px; }
.cart-waiver-row { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.45; }
.cart-waiver-row + .cart-waiver-row { margin-top: 8px; }
.cart-waiver-row input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent-fill); }
.cart-waiver-row a { text-decoration: underline; }
.cart-status { min-height: 1.4em; margin-top: 6px; color: var(--accent); text-align: center; }
.cart-banner {
  margin: 14px 32px 0; padding: 12px 16px; border: 1px solid var(--accent-fill); border-radius: 10px;
  background: var(--accent-soft); color: var(--text); text-align: center;
}

/* ----------------------------------------------------------- the site's bottom band and footer under the shell */
.store-shell .bottom-forms-section { border-top: 1px solid var(--border-soft); }

/* ----------------------------------------------------------- phones and tablets */
@media (max-width: 1000px) {
  .ss-shell { grid-template-columns: minmax(0, 1fr); }
  .ss-resize { display: none; }
  .ss-main { grid-column: 1; }
  .ss-side {
    position: fixed; top: 0; left: 0; bottom: 0; height: auto; z-index: 1200;
    transform: translateX(-100%); box-shadow: none; width: min(340px, 86vw);
    border-right: 1px solid var(--border-soft);
  }
  body.menu-open .ss-side { transform: none; box-shadow: var(--ss-shadow-md); }
  .ss-menu { display: inline-flex; }
  .ss-top { padding: 0 8px 0 12px; gap: 8px; }
  .ss-title { font-size: 1.15rem; }
  .ss-search { width: 260px; }
  .shelf-head { padding: 0 16px 8px 20px; }
  .shelf-row { padding: 4px 20px 16px; scroll-padding-left: 20px; gap: 12px; }
  .sp-card { flex-basis: 160px; }
  .ss-home-foot { padding: 20px 20px 0; }
  #view-search, #view-list { padding: 14px 16px 0; }
  .ss-field-row { grid-template-columns: 1fr; }
  .ss-check { margin-left: 0; }
  .cart-banner { margin: 12px 16px 0; }
}
/* A phone: the view's name gives its room to the search field. */
@media (max-width: 640px) {
  .ss-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-menu { padding: 6px 10px; }
  .ss-menu span { display: none; }
  .ss-top-right { flex: 1 1 auto; }
  .ss-search { width: auto; flex: 1 1 auto; height: 40px; }
  .ss-icon { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  .sp-card { flex-basis: 146px; padding: 6px 6px 8px; }
  .ss-grid .sp-card { flex: 0 1 calc(50% - 7px); }
  .ss-result { grid-template-columns: 56px 1fr; }
  .ss-result-thumb { width: 56px; height: 56px; }
  .ss-result-side { grid-column: 2; justify-content: flex-start; }
}

/* A jump to a shelf (the heart in the top bar goes to "Your lists") lands
   below the sticky site header and store bar, not under them. */
.shelf { scroll-margin-top: calc(var(--site-h, 96px) + var(--top-h) + 8px); }

/* The demo catalogue notice (tools/demo-store.mjs), above the shelves. */
.ss-demo-note {
  margin: 14px 32px 0; padding: 12px 16px; max-width: 80ch;
  border: 1px solid var(--accent-fill); border-radius: 10px;
  background: var(--accent-soft); color: var(--text); font-size: .9rem; line-height: 1.5;
}
.ss-demo-note strong { color: var(--accent); }
@media (max-width: 1000px) { .ss-demo-note { margin: 12px 16px 0; } }
/* A demo card's sentence is its tier, rank, supplier, price kind, minimum
   and rating: show all of it. */
.sp-demo .sp-blurb { -webkit-line-clamp: 4; }

/* ----------------------------------------------------------- accounts, reorder, shipping (2026-10-01) */
.ss-account-btn .ss-initial { display: none; }
.ss-account-btn.is-signed-in svg { display: none; }
.ss-account-btn.is-signed-in .ss-initial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent); font-weight: 800; font-size: .95rem;
}
.acct-h { margin-top: 18px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.acct-orders { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.acct-orders li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .9rem; }
.acct-orders li span { color: var(--muted); }
.acct-orders .acct-empty { background: transparent; padding: 0; color: var(--muted); }
.acct-actions { flex-wrap: wrap; }
.acct-delete { margin-left: auto; border: 0; background: transparent; color: #ff9b8f; font-weight: 700; font-size: .88rem; cursor: pointer; text-decoration: underline; }
.acct-fine { margin-top: 12px; font-size: .82rem; color: var(--faint); }

.ss-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-heading-tools { display: inline-flex; gap: 4px; }
.ss-heading-btn {
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  padding: 2px 10px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); cursor: pointer;
}
.ss-heading-btn:hover, .ss-heading-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-fill); }
.ss-reorder-row { cursor: default; padding-right: 6px; }
.ss-reorder-row:hover { background: transparent; }
.ss-reorder-name { flex: 1 1 auto; }
.ss-reorder-row button {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ss-reorder-row button:hover { background: var(--surface-4); color: var(--text); }
.ss-reorder-row button:disabled { opacity: .3; cursor: default; background: transparent; }
.ss-reorder-row button svg { width: 18px; height: 18px; }
#ss-shelves .ss-item[draggable="true"] { cursor: grab; }
#ss-shelves .ss-dragging { opacity: .45; }
#ss-shelves .ss-drag-over { box-shadow: inset 0 2px 0 var(--accent-fill); }

/* The shipping line in the store bar, between the view's name and search,
   on every view (owner, 2026-10-01): small, ONE line, and the same on every
   shelf. The view's name gets a fixed slot (a long shelf name ends in "...")
   so the line never moves or changes size between shelves. Sized by the
   store's own width (a container query), which follows the sidebar drag:
     wide:    the full sentence, in the bar
     middle:  the short sentence, in the bar
     narrow:  the short sentence, on its own line under the bar            */
.ss-main { container-type: inline-size; container-name: store; }
.ss-top .ss-title { flex: 0 0 210px; width: 210px; margin-right: 0; font-size: 1.15rem; }
.ss-ship-note {
  flex: 1 1 auto; min-width: 0; margin: 0 4px 0 0;
  font-size: .74rem; line-height: 1.3; color: var(--muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-ship-note strong { color: var(--accent); }
.ss-ship-short, .ss-ship-tiny { display: none; }
.ss-top .ss-search { width: 280px; min-width: 180px; }
@container store (max-width: 1199px) {
  .ss-ship-long { display: none; }
  .ss-ship-short { display: inline; }
  .ss-top .ss-search { width: 240px; }
}
/* Narrower (owner, 2026-10-02: it slid under the search bar when the sidebar
   was dragged wide): the line stays BETWEEN the name and the search, and the
   name and the search give up room instead (under 600px the name hides, as
   on a phone). Only a phone-width store puts it on its own line. */
@container store (max-width: 1079px) {
  .ss-top .ss-title { flex: 0 1 150px; width: auto; min-width: 70px; }
  .ss-top .ss-search { width: 210px; min-width: 150px; }
}
@container store (max-width: 860px) {
  .ss-ship-short { display: none; }
  .ss-ship-tiny { display: inline; }
  .ss-top .ss-title { flex: 0 1 110px; }
  .ss-top .ss-search { width: 180px; min-width: 120px; }
}
@container store (max-width: 600px) {
  .ss-top .ss-title { position: absolute; width: 1px; min-width: 0; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ss-top .ss-ship-note { text-align: left; }
  .ss-top .ss-search { width: 150px; min-width: 110px; }
}
@container store (max-width: 460px) {
  .ss-top { flex-wrap: wrap; height: auto; min-height: var(--top-h); padding-top: 8px; padding-bottom: 6px; row-gap: 4px; }
  .ss-ship-tiny { display: none; }
  .ss-ship-short { display: inline; }
  .ss-top .ss-title { flex: 1 1 auto; width: auto; }
  .ss-top .ss-ship-note { order: 10; flex: 1 1 100%; margin: 0; text-align: center; }
}
@media (max-width: 640px) { .ss-top .ss-search { min-width: 0; width: auto; } .ss-top .ss-top-right { flex: 1 1 0; min-width: 0; } }
@container store (max-width: 440px) { .ss-ship-note { font-size: .68rem; letter-spacing: -.01em; } }

.cart-ship { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.cart-ship legend { padding: 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cart-ship-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .92rem; cursor: pointer; }
.cart-ship-row input { accent-color: var(--accent-fill); }
.cart-nudge { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--text); font-size: .88rem; }
.cart-shipline { margin: 10px 0 0; text-align: right; color: var(--muted); }

/* Green Swaps (owner, 2026-10-07): affiliate swaps we do not carry. */
.gs-intro { margin: 14px 32px 0; color: var(--text); line-height: 1.55; text-align: center; }
/* One line on a wide screen (owner, 2026-10-10); it wraps on a phone. */
.gs-lede { margin: 0 auto; font-size: .98rem; }
.gs-intro .gs-disclosure { display: inline-block; text-align: left; }
.gs-feature { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 32px 6px; padding: 18px 22px; border: 1px solid var(--accent-fill); border-radius: 12px; background: var(--accent-soft); }
.gs-feature h2 { margin: 2px 0 6px; font-size: 1.5rem; font-weight: 800; color: var(--text); }
.gs-feature p { margin: 0; max-width: 72ch; line-height: 1.5; color: var(--text); }
.gs-feature .gs-feature-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ss-shell .gs-feature-btn { flex: 0 0 auto; padding: 12px 26px; font-size: 1rem; }
.gs-sn-shelf { margin-top: 10px; }
.gs-sn-card .sp-media { display: block; }
.gs-sn-card .sp-media img { background: #fff; }
.gs-sn-note { margin: 2px 32px 0; font-size: .78rem; color: var(--muted); }
.gs-more { margin: 26px 32px 0; font-size: 1.12rem; font-weight: 800; color: var(--text); }
@media (max-width: 1000px) { .gs-feature, .gs-sn-note, .gs-more { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 640px) { .gs-feature { flex-direction: column; align-items: stretch; } .ss-shell .gs-feature-btn { text-align: center; } }
.gs-disclosure { margin-top: 8px; padding: 10px 14px; border: 1px solid var(--accent-fill); border-radius: 10px; background: var(--accent-soft); font-size: .88rem; }
.gs-disclosure strong { color: var(--accent); }
.gs-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 32px 28px; }
.gs-card { flex: 0 1 230px; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-3); box-shadow: var(--shadow); }
.gs-icon { font-size: 1.8rem; }
.gs-from { margin: 0; font-size: .78rem; color: var(--muted); }
.gs-to { margin: 0 0 6px; font-size: .92rem; line-height: 1.35; color: var(--text); }
.ss-shell .gs-card .btn { margin-top: auto; width: 100%; text-align: center; white-space: normal; }
@media (max-width: 1000px) { .gs-intro { margin: 12px 16px 0; } .gs-grid { margin: 14px 16px 24px; } }
@media (max-width: 560px) { .gs-card { flex-basis: 100%; } }
/* SeedsNow on Home, and the partners under Green Swaps (2026-10-10). */
.gs-feature-home { margin-top: 6px; margin-bottom: 4px; }
.ss-partners { margin: -2px 0 4px; }
.ss-partners .ss-item-sub { padding-left: 46px; font-size: .9rem; }

/* ----------------------------------------------------------- cart notice, documents, registration (2026-10-11) */
.cart-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1600; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 24px));
  padding: 10px 12px; border: 1px solid var(--accent-fill); border-radius: 14px;
  background: var(--surface-3); color: var(--text); box-shadow: var(--ss-shadow-md);
}
.cart-toast[hidden] { display: none; }
.cart-toast img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #fff; }
.cart-toast-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cart-toast-text strong { color: var(--accent); font-size: .92rem; }
.cart-toast-text span { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-reg { margin: 6px 0 4px; padding: 12px; border: 1px solid var(--accent-fill); border-radius: 10px; background: var(--accent-soft); }
.cart-reg[hidden] { display: none; }
.cart-reg-head { margin: 0 0 6px; font-size: .95rem; font-weight: 800; color: var(--accent); }
.cart-reg textarea { margin-bottom: 0; }
.cart-doc {
  margin: auto; width: min(760px, calc(100vw - 24px)); height: min(86vh, 900px); padding: 0;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-3); color: var(--text);
  box-shadow: var(--ss-shadow-md); display: none; flex-direction: column;
}
.cart-doc[open] { display: flex; }
.cart-doc::backdrop { background: var(--scrim); }
.cart-doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.cart-doc-title { font-size: 1.1rem; font-weight: 800; }
.cart-doc-body { overflow: auto; padding: 8px 20px 24px; line-height: 1.6; }
.cart-doc-body .content-section { padding: 0; }
.cart-doc-body h2 { font-size: 1.1rem; margin: 18px 0 6px; color: var(--accent); }
.cart-doc-body p, .cart-doc-body li { color: var(--text); font-size: .95rem; }
.cart-doc-body ul { padding-left: 20px; }

/* Product pop-up (2026-10-11) */
.sp-card[data-id] { cursor: pointer; }
.sp-pop { margin: auto; width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-3); color: var(--text); box-shadow: var(--ss-shadow-md); overflow: auto; }
.sp-pop::backdrop { background: var(--scrim); }
.sp-pop-close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 1; }
.sp-pop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-pop-media { background: #fff; display: flex; align-items: center; justify-content: center; min-height: 320px; border-radius: 16px 0 0 16px; overflow: hidden; }
.sp-pop-media img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; }
.sp-pop-media .sp-icon { font-size: 5rem; }
.sp-pop-info { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.sp-pop-name { font-size: 1.3rem; font-weight: 800; line-height: 1.3; padding-right: 30px; }
.sp-pop-price { font-size: 1.25rem; font-weight: 800; color: var(--accent); }
.sp-pop-blurb { line-height: 1.55; }
.sp-pop-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.sp-pop-facts strong { color: var(--text); font-weight: 700; }
.sp-pop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sp-pop-fine { font-size: .8rem; color: var(--muted); }
.sp-pop-fine a { text-decoration: underline; }
@media (max-width: 700px) { .sp-pop-grid { grid-template-columns: 1fr; } .sp-pop-media { border-radius: 16px 16px 0 0; min-height: 220px; } .sp-pop-media img { max-height: 300px; } }
/* All lists as shelves */
#view-lists { padding: 18px 0 0; }
#view-lists .ss-list-head { padding: 0 32px; }
#lists-shelves .shelf-row .ss-empty { padding: 8px 2px; }
@media (max-width: 1000px) { #view-lists .ss-list-head { padding: 0 16px; } }
.sp-pop-opt { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); width: 100%; }
.sp-pop-opt select { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; }
.ss-result[data-pop] { cursor: pointer; }
.sp-media { position: relative; }
.sp-badge { position: absolute; left: 8px; top: 8px; background: var(--leaf); color: #14261A; font-weight: 800; font-size: .78rem; padding: 3px 9px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.su-form { display: flex; flex-direction: column; gap: 12px; }
.su-lede { color: var(--muted); margin: 8px 0 4px; }
.su-field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 700; }
.su-field input, .su-field select, .su-field textarea { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 400; }
.su-field small { font-weight: 400; color: var(--muted); }
.su-check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.su-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.su-msg { min-height: 1.2em; color: var(--accent); font-weight: 700; margin: 0; }
.sp-badge.sp-partner { background: var(--surface-2); color: var(--accent); border: 1px solid var(--accent); }
.shelf-note { padding: 0 32px 8px; margin: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 720px) { .shelf-note { padding: 0 16px 8px 20px; } }
.sp-eco { position: absolute; left: 8px; bottom: 8px; background: #F2F4F2; color: #1F6B17; font-weight: 800; font-size: .74rem; letter-spacing: .03em; padding: 2px 9px 2px 22px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.3); background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%232F8F26%27 d=%27M17 8C8 10 5.9 16.2 3.8 21.3l1.9.7.9-2.3c.5.2 1 .3 1.4.3C19 20 22 3 22 3c-1 2-8 2.3-13 3.3S2 11.5 2 13.5s1.8 3.8 1.8 3.8C7 8 17 8 17 8z%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 13px; background-position: 7px center; }
.su-h { margin: 6px 0 0; font-size: .95rem; font-weight: 800; color: var(--accent); }
.su-row { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 8px; }
.su-row input { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; min-width: 0; }
.su-roster { display: flex; flex-direction: column; gap: 8px; }
.su-player { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; }
.su-n { font-weight: 800; color: var(--muted); font-size: .85rem; text-align: right; }
.cart-remove { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
@media (max-width: 560px) { .su-row { grid-template-columns: 1fr; } }
.cart-reg-who { flex-basis: 100%; order: 5; font-size: .82rem; color: var(--muted); }
.cart-line { flex-wrap: wrap; }
.cart-waiver-hint { margin: 4px 0 0 26px; font-size: .82rem; color: var(--muted); }
.cart-waiver-row input:disabled { opacity: .45; }

/* First-order discount code in the cart (2026-10-13) */
.cart-code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.cart-code-row input { flex: 1 1 140px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rule, #565656); font: inherit; text-transform: uppercase; }
.cart-code-row .btn-small { padding: 8px 14px; font-size: .9rem; }
.cart-link { background: none; border: 0; color: var(--leaf-bright, #6FD65F); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

/* The 20% first-order offer pop-up (store-offer.js, 2026-10-13) */
.offer-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto; border: 0; border-radius: 16px; padding: 0; max-width: 420px; width: calc(100% - 32px); background: #2e2e2e; color: #F2F4F2; border-top: 4px solid #4AB73C; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.offer-dlg::backdrop { background: rgba(0,0,0,.6); }
.offer-body { padding: 26px 24px 18px; font-family: 'Nunito Sans', 'Segoe UI', Arial, sans-serif; }
.offer-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: #C8CFC8; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.offer-kicker { margin: 0 0 4px; color: #6FD65F; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.offer-dlg h2 { margin: 0 0 8px; font-size: 1.6rem; color: #F2F4F2; }
.offer-lede { margin: 0 0 14px; color: #C8CFC8; line-height: 1.5; }
.offer-form label { display: block; font-weight: 700; margin: 0 0 10px; font-size: .92rem; }
.offer-form input[type=email], .offer-form input[type=tel] { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border-radius: 8px; border: 1px solid #565656; background: #b8b8b8; color: #14261A; font: inherit; font-weight: 600; }
.offer-tick { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 400 !important; color: #C8CFC8; font-size: .82rem !important; }
.offer-tick input { margin-top: 3px; }
.offer-msg { min-height: 1.2em; margin: 8px 0 0; color: #F2B8A0; font-weight: 700; text-align: center; }
.offer-fine { margin: 8px 0 0; font-size: .75rem; color: #a9b0a9; line-height: 1.45; }
.offer-fine a { color: #6FD65F; }
.offer-no { display: block; margin: 10px auto 0; background: none; border: 0; color: #C8CFC8; text-decoration: underline; cursor: pointer; font: inherit; }
.offer-code { color: #6FD65F; letter-spacing: .04em; }
.cart-out { display: block; width: 100%; color: #F2B8A0; font-size: .82rem; font-weight: 700; margin-top: 2px; }