/* Gimme browse website.
   Lucy's gimme-design tokens (SKILL.md section 3) for the dark surfaces: header,
   hero, footer and the app CTA card. Below the hero the page (and the Glen chat) is
   light (Sam, 24 Sep: a website is white further down, like AutoTrader,
   Rightmove and Booking.com), built from the light mode neutrals in section 3.
   On light surfaces yellow is a FILL only (buttons, active chips, badges), never
   text. No blue, no green, no shadows, gradients or glows. Poppins 300 to 600. */
:root {
  /* Opt out of Chrome for Android's auto dark theme. This site has one
     palette and no dark variant, so anything that "helpfully" darkens it
     inverts the light half and leaves the dark half alone. */
  color-scheme: only light;

  /* Dark roles (app default) */
  --background: #1F2220;
  --nav: #191919;
  --card: #2C2E2C;
  --card-2: #343634;
  --accent: #DFE644;
  --accent-hover: #E6EC6A;
  --button-text: #171717;
  --accent-20: rgba(223, 230, 68, 0.20);
  --accent-10: rgba(223, 230, 68, 0.10);
  --d100: #F0F0F0; --d200: #C5C5C5; --d300: #9A9A9A; --d350: #5F5F5F; --d450: #343434;

  /* Light neutrals: 100 text, 175 body grey, 200 secondary, 350 field line, 400 line */
  --page: #F3F4EF;
  --white: #FFFFFF;
  --l100: #171717; --l150: #2B2B2B; --l175: #454545; --l200: #727272; --l300: #919191;
  --l350: #C3C3C3; --l400: #E4E4E4;

  --red: #E86767;
  --radius: 12px;
  --gutter: 16px;

  /* Semantic, light by default. Dark surfaces redefine them below. */
  --text: var(--l100);
  --text-2: var(--l175);      /* small secondary text on the #F3F4EF canvas */
  --text-3: var(--l200);      /* secondary text on white only */
  --line: var(--l400);
  --field-bg: var(--white);
  --field-line-hover: var(--l300);
  --chip-bg: var(--white);
  --chip-line: var(--l400);
  --chip-text: var(--l175);
  --chip-hover: var(--l350);
  --chip-on-bg: var(--accent);
  --chip-on-text: var(--l100);
  --chip-on-line: var(--accent);
  --tag-bg: var(--l400);
  --tag-text: var(--l175);
  --spec: var(--l175);
  --focus: var(--l100);
  --outline-btn: var(--l100);
  --outline-btn-hover: rgba(23, 23, 23, 0.05);
  --icon-circle: rgba(23, 23, 23, 0.06);
  --icon-glyph: var(--l200);
  --tile-1: #E8E9E3; --tile-2: #E3E4DE; --tile-3: #ECEBE5; --tile-4: #E5E6E0;
}

/* Dark surfaces: exactly the app's dark system */
.is-dark, .top, .hero, .foot, .cta-box {
  --text: var(--d100);
  --text-2: var(--d200);
  --text-3: var(--d300);
  --line: rgba(255, 255, 255, 0.08);
  --field-bg: var(--nav);
  --field-line-hover: var(--d350);
  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-line: transparent;
  --chip-text: var(--d200);
  --chip-hover: transparent;
  --chip-on-bg: var(--accent-10);
  --chip-on-text: var(--accent);
  --chip-on-line: var(--accent-20);
  --tag-bg: rgba(255, 255, 255, 0.08);
  --tag-text: var(--d200);
  --spec: var(--accent);
  --focus: var(--accent);
  --outline-btn: var(--accent);
  --outline-btn-hover: var(--accent-10);
  --icon-circle: rgba(255, 255, 255, 0.06);
  --icon-glyph: var(--d300);
  --tile-1: #3a3d38; --tile-2: #31342f; --tile-3: #403f39; --tile-4: #2e3130;
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  color: var(--text);
  background: var(--page);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  min-height: 100vh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; }
button, input, select, textarea { font-family: inherit; }
::placeholder { color: var(--text-3); font-weight: 300; opacity: 1; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Buttons: radius 12, never pills, Regular 400, no arrows */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 400; font-size: 16px; line-height: 1;
  min-height: 48px; padding: 0 22px;
  background: var(--accent); color: var(--button-text);
  border: 0; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-big { width: 100%; min-height: 56px; }
/* Outline: ink on light surfaces (yellow text on white is unreadable), yellow on dark */
.btn-secondary, .btn-ghost { background: transparent; color: var(--outline-btn); border: 1.5px solid var(--outline-btn); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--outline-btn-hover); }
.btn[disabled], .btn:disabled { background: var(--l400); color: var(--l200); border-color: var(--l400); cursor: default; }
.is-dark .btn:disabled { background: var(--d450); color: var(--d350); border-color: var(--d450); }
.link {
  font: inherit; font-weight: 400; color: var(--text); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--field-bg); color: var(--text); cursor: pointer;
}
.icon-btn:hover { border-color: var(--field-line-hover); }
.icon-btn svg { width: 20px; height: 20px; }

/* Header */
.top { background: var(--nav); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.top-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { width: auto; height: 32px; }

/* Hero: compact dark band, flat outline G cropped by the edge */
.hero { background: var(--background); padding: 22px 0 60px; position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.hero-g {
  position: absolute; pointer-events: none; user-select: none;
  height: 260%; width: auto; right: -34%; top: -60%;
  opacity: .10;
}
.hero .eyebrow { display: none; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 500; color: var(--text-3); margin: 0 0 8px; }
.hero h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; max-width: 18ch; }
.lede { font-size: 14px; font-weight: 300; color: var(--text-3); margin: 8px 0 0; max-width: 48ch; }

/* Search module: a white card overlapping the bottom of the hero */
.finder-sec { position: relative; z-index: 2; margin-top: -44px; }
.finder {
  background: var(--white); color: var(--l100); border: 1px solid var(--l400); border-radius: var(--radius);
  padding: 12px;
}
.seg { display: flex; gap: 4px; padding: 4px; background: var(--page); border-radius: var(--radius); }
.seg-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--l175);
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
.seg-tab:hover { color: var(--l100); }
.seg-tab[aria-selected="true"] { background: var(--l100); color: var(--white); }
.seg-tab svg { width: 18px; height: 18px; flex: 0 0 auto; }
.seg-tab .glen-av { width: 22px; height: 22px; }
.finder-pane { padding-top: 12px; }
/* Glen can be switched off per host (glen-flag.js). Without html.glen-on (set by app.js
   and glen.js where Glen is on) the tabs, the Glen pane and
   every Ask Glen button are gone, and Search stock sits alone in the card. */
html:not(.glen-on) .seg,
html:not(.glen-on) #paneGlen,
html:not(.glen-on) [data-glen-open] { display: none !important; }
html:not(.glen-on) .finder-pane { padding-top: 0 !important; }

/* Finder fields: the label sits inside the field, AutoTrader style */
.qf { position: relative; min-width: 0; display: block; }
.qf-label {
  position: absolute; left: 14px; top: 8px; right: 34px; pointer-events: none;
  font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--l200);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qf input, .qf select {
  display: block; width: 100%; min-width: 0; height: 56px; margin: 0;
  font: inherit; font-size: 15px; font-weight: 400; color: var(--l100);
  background: var(--white); border: 1px solid var(--l350); border-radius: var(--radius);
  padding: 22px 14px 6px;
}
.qf input::placeholder { color: var(--l200); font-weight: 300; }
.qf input::-webkit-search-cancel-button { display: none; }
.qf select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis; }
.qf-select::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.6px solid var(--l200); border-bottom: 1.6px solid var(--l200); transform: rotate(45deg); pointer-events: none;
}
.qf input:hover, .qf select:hover { border-color: var(--l300); }
.qf input:focus-visible, .qf select:focus-visible { border-color: var(--l100); outline: 1px solid var(--l100); outline-offset: -2px; }
.qf select:disabled { color: var(--l300); background: var(--page); border-color: var(--l400); cursor: default; }
.qf.is-disabled .qf-label { color: var(--l300); }

.ask-row { display: flex; gap: 8px; }
.ask-row .qf { flex: 1; }
.ask-row .btn { min-height: 56px; flex: 0 0 auto; }
.ask-send { padding: 0; width: 56px; }
.ask-send svg { width: 20px; height: 20px; }
.ask-send .lbl { display: none; }
.ask-chips {
  display: flex; gap: 8px; margin: 10px -12px 0; padding: 0 12px 2px;
  overflow-x: auto; scrollbar-width: none;
}
.ask-chips::-webkit-scrollbar { display: none; }
.ask-chips .chip { font-size: 13px; padding: 8px 14px; }

.stock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stock-grid .qf-q { grid-column: 1 / -1; }
.qf-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.qf-actions .btn { flex: 1; min-height: 56px; }
.qf-filters { width: 56px; height: 56px; border-color: var(--l350); background: var(--white); color: var(--l100); position: relative; }
.qf-filters svg { width: 22px; height: 22px; }
.qf-filters .count { position: absolute; top: -6px; right: -6px; }

/* Browse, the light page */
.browse { padding-top: 24px; padding-bottom: 48px; }
.browse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; scroll-margin-top: 76px; }
.browse-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
.browse-sub { margin: 0; font-size: 13px; font-weight: 400; color: var(--text-2); white-space: nowrap; }

/* Chips: neutral off, yellow fill on (dark ink), radius 12 (Sam, 24 Sep: every tappable button is 12px) */
.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gutter) 10px;
  margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.2;
  padding: 9px 16px; border-radius: 12px; border: 1px solid var(--chip-line);
  background: var(--chip-bg); color: var(--chip-text); cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--chip-hover); }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-text); border-color: var(--chip-on-line); font-weight: 500; }
.chip-glen { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; color: var(--text); }
.chip-glen .glen-av { width: 22px; height: 22px; }
.status { color: var(--text-2); font-size: 14px; min-height: 1.5em; margin: 8px 0 12px; }
.status:empty { min-height: 0; margin: 0 0 20px; }

/* Outcome and empty states: 44px neutral circle, Title S, one line */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; }
.state-icon {
  width: 44px; height: 44px; border-radius: 999px; background: var(--icon-circle); color: var(--icon-glyph);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.state-icon svg { width: 22px; height: 22px; }
.state-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }
.state-line { font-size: 14px; font-weight: 300; color: var(--text-2); line-height: 1.55; margin: 8px 0 0; max-width: 40ch; }
.state .btn { margin-top: 20px; }

/* Photography led listing cards: borderless square tile, details on the canvas */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); min-width: 0; border-radius: 14px; background: var(--card-surface, #FFFFFF); border: 1px solid var(--card-border, #E4E4E4); overflow: hidden; transition: border-color .15s ease; }
/* The yellow pop ring on hover and keyboard focus: border plus a 1px outline, flat, no shadow */
.card:hover, .card:focus-visible { border-color: var(--accent, #DFE644); outline: 1px solid var(--accent, #DFE644); outline-offset: 0; }
.card-img { position: relative; aspect-ratio: 1 / 1; background: var(--tile-1); border-radius: 0; overflow: hidden; flex: 0 0 auto; }
.card:nth-child(4n+2) .card-img, .glen-card-wrap:nth-child(4n+2) .glen-card-img { background: var(--tile-2); }
.card:nth-child(4n+3) .card-img, .glen-card-wrap:nth-child(4n+3) .glen-card-img { background: var(--tile-3); }
.card:nth-child(4n+4) .card-img, .glen-card-wrap:nth-child(4n+4) .glen-card-img { background: var(--tile-4); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .15s ease; }
.card:hover .card-img img { opacity: .9; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
/* Pro badge, as in the app: yellow fill, dark ink, on the photo (a badge, not a button, so fully rounded) */
.pro-badge { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: var(--accent, #DFE644); color: #171717; font-size: 12px; font-weight: 500; line-height: 1; padding: 5px 10px 5px 6px; border-radius: 999px; }
.pro-badge svg { width: 16px; height: 16px; color: #171717; flex: 0 0 auto; }
.card h3 {
  font-size: 14px; font-weight: 600; line-height: 1.35; overflow: hidden; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; height: calc(2 * 1.35em);
}
.card-spec {
  font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--spec); margin: 0; height: 1.5em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; min-height: 24px; }
.card-price { font-size: 16px; font-weight: 400; color: var(--text); margin: 0; }
/* Condition meter: four bars stacked above the label (fits narrow cards), yellow grade with a darker yellow edge so it pops on white */
.cond { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.1; color: var(--l175, #454545); white-space: nowrap; flex: 0 0 auto; }
.cond-bars { display: inline-flex; gap: 3px; }
.cond-bars i { width: 12px; height: 6px; border-radius: 2px; background: #D9D9D9; }
.cond-bars i.on { background: #DFE644; box-sizing: border-box; border: 1px solid #9FA51A; }
.club-meta .cond { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.tag {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--tag-bg); color: var(--tag-text); padding: 4px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.2;
}
.no-photo { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-2); font-size: 13px; }
.skeleton .card-img { animation: pulse 1.2s ease-in-out infinite; }
.skeleton .card-body span { display: block; height: 12px; border-radius: 6px; background: var(--l400); margin: 4px 0; }
.skeleton .card-body span + span { width: 50%; }
@keyframes pulse { 50% { opacity: .5; } }
.more { display: flex; justify-content: center; margin-top: 32px; }

/* Filters: toolbar, pills, drawer */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 400;
  min-height: 40px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--l350);
  background: var(--white); color: var(--l100); cursor: pointer;
}
.filter-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.filter-btn:hover { border-color: var(--l300); }
.filter-btn.is-on { border-color: var(--l100); }
.count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--button-text);
  font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
}
.count[hidden] { display: none; }
.pills { display: contents; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 10px 7px 14px; border-radius: 12px; border: 1px solid var(--l350);
  background: var(--white); color: var(--l100); cursor: pointer; overflow-wrap: anywhere; text-align: left;
}
.pill svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--l200); }
.pill:hover { border-color: var(--l100); }
.pill-clear {
  font: inherit; font-size: 13px; font-weight: 400; background: none; border: 0; color: var(--l175);
  padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pill-clear:hover { color: var(--l100); }

html.has-panel, html.has-panel body { overflow: hidden; }
.scrim { position: fixed; inset: 0; background: rgba(23, 23, 23, .45); z-index: 40; }
.scrim[hidden], .panel[hidden] { display: none; }
/* Bottom sheet on phones, drawer on desktop: white, flat, 1px line */
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; background: var(--white); color: var(--l100);
  border-radius: 22px 22px 0 0; border-top: 1px solid var(--l400); outline: none;
  opacity: 0; transition: opacity .2s ease;
}
.panel.is-open { opacity: 1; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter) 12px; border-bottom: 1px solid var(--l400); }
.panel-head h2 { font-size: 20px; font-weight: 600; }
.panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--gutter) 16px; }
.panel-foot {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; padding: 12px var(--gutter);
  padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--l400); background: var(--white);
}
.panel-foot .btn { min-height: 52px; }
.fsec { border: 0; margin: 0; padding: 18px 0 6px; min-width: 0; }
.fsec + .fsec { border-top: 1px solid var(--l400); }
.fsec legend { font-size: 15px; font-weight: 500; padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.fsec > :not(legend) { clear: both; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.2;
  padding: 9px 16px; border-radius: 12px; border: 1px solid var(--l400);
  background: var(--white); color: var(--l175); cursor: pointer;
}
.opt:hover { color: var(--l100); border-color: var(--l350); }
.opt.is-on { background: var(--accent); color: var(--l100); border-color: var(--accent); font-weight: 500; }
.sw { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(23, 23, 23, .25); overflow: hidden; }
.sw-multi { display: inline-grid; grid-template-columns: 1fr 1fr; }
.sw-multi i { display: block; }
.select { position: relative; }
.select::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.6px solid var(--l200); border-bottom: 1.6px solid var(--l200); transform: rotate(45deg); pointer-events: none;
}
.select select {
  display: block; width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--l100); background: var(--white);
  border: 1px solid var(--l350); border-radius: var(--radius); height: 52px; padding: 0 44px 0 16px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.select select:disabled { color: var(--l300); background: var(--page); border-color: var(--l400); cursor: default; }
.price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--l200); min-width: 0; }
.field input {
  width: 100%; min-width: 0; font: inherit; font-size: 16px; font-weight: 400; color: var(--l100); background: var(--white);
  border: 1px solid var(--l350); border-radius: var(--radius); height: 52px; padding: 0 16px;
}
.field input.is-error, .field.err input { border-color: var(--red); }
.err-text { color: var(--red); font-size: 12px; font-weight: 400; line-height: 1.45; margin: 8px 2px 0; }
.select select:focus-visible, .field input:focus-visible { border-color: var(--l100); outline: 1px solid var(--l100); outline-offset: -2px; }

/* Get the app: one quiet light section, no banner */
.app-band { border-top: 1px solid var(--l400); padding: 36px 0 40px; }
.app-band-inner { display: grid; gap: 20px; align-items: center; }
.app-band h2 { font-size: 20px; font-weight: 600; }
.app-band p { margin: 8px 0 0; max-width: 52ch; color: var(--l175); font-size: 15px; }

/* Store buttons: ink fill on light, nav fill on dark */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 52px;
  background: var(--l100); color: var(--white); border: 1px solid var(--l100); border-radius: var(--radius);
  padding: 8px 16px 8px 12px; min-width: 160px;
}
.store:hover { background: var(--l150); }
.cta-box .store { background: var(--nav); border-color: rgba(255, 255, 255, 0.08); color: var(--d100); }
.cta-box .store:hover { border-color: var(--d350); }
.store svg { width: 24px; height: 24px; flex: 0 0 auto; }
.store span { display: flex; flex-direction: column; font-weight: 400; font-size: 16px; line-height: 1.15; }
.store small { font-weight: 300; font-size: 11px; opacity: .8; }

/* Footer: dark bookend */
.foot { background: var(--nav); color: var(--d300); border-top: 1px solid var(--line); padding: 28px 0; font-size: 14px; }
.foot-inner { display: grid; gap: 12px; }
.foot p { margin: 0; max-width: 60ch; }
.foot .small { font-size: 12px; color: var(--d300); }
.foot a:not(.logo) { color: var(--d200); text-underline-offset: 3px; }
.foot a:not(.logo):hover { color: var(--d100); }
.foot .logo img { height: 28px; }

/* Listing page: light body, dark app CTA card */
.club { padding-top: 16px; padding-bottom: 96px; }
.crumbs { font-size: 13px; color: var(--l175); margin-bottom: 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--l100); text-decoration: underline; text-underline-offset: 3px; }
.club-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.gallery-main { position: relative; aspect-ratio: 1 / 1; background: var(--tile-1); border-radius: 14px; overflow: hidden; }
.gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; }
.thumb {
  flex: 0 0 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px;
  overflow: hidden; background: var(--tile-2); cursor: pointer;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--l100); }
.club-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.club-meta .eyebrow { margin: 0; color: var(--l175); }
.club-info h1 { font-size: 24px; font-weight: 600; overflow-wrap: anywhere; }
.club-info h2 { font-size: 18px; font-weight: 600; margin: 32px 0 10px; }
.spec { color: var(--l175); font-size: 14px; font-weight: 400; margin: 8px 0 0; }
.price { font-size: 24px; font-weight: 400; color: var(--l100); margin: 12px 0 18px; }

.cta-box { background: var(--background); border: 1px solid var(--background); border-radius: var(--radius); padding: 16px; }
.cta-desktop { display: none; gap: 20px; align-items: center; }
.cta-title { font-weight: 600; font-size: 18px; margin: 0 0 4px; color: var(--d100); }
.cta-sub { margin: 0 0 14px; font-size: 14px; color: var(--d200); }
.cta-note { margin: 12px 0 0; font-size: 13px; color: var(--d300); }
.qr { width: 150px; height: 150px; flex: 0 0 150px; background: #fff; border-radius: 10px; padding: 6px; }
.qr svg { width: 100%; height: 100%; display: block; }
.cta-box.is-desktop .cta-mobile { display: none; }
.cta-box.is-desktop .cta-desktop { display: flex; }
.cta-box.no-qr .cta-mobile { display: none; }
.cta-box.no-qr .cta-desktop { display: flex; }
.cta-box.no-qr .qr { display: none; }
@media (max-width: 639px) { .cta-desktop { flex-direction: column; align-items: flex-start; } }

.specs { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--l400); }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--l400); font-size: 15px; }
.specs dt { color: var(--l175); font-weight: 300; }
.specs dd { margin: 0; font-weight: 400; text-align: right; overflow-wrap: anywhere; color: var(--l100); }
.desc { font-weight: 300; color: var(--l100); overflow-wrap: anywhere; }
.desc p { margin: 0 0 10px; }
.desc p:last-child { margin: 0; }

/* 404 */
.notfound { padding-top: 72px; padding-bottom: 88px; }

/* Privacy: plain reading page on the light canvas */
.legal { max-width: 720px; padding-top: 32px; padding-bottom: 88px; }
.legal h1 { font-size: 28px; font-weight: 600; color: var(--l100); }
.legal h2 { font-size: 18px; font-weight: 600; margin: 32px 0 8px; color: var(--l100); }
.legal h3 { font-size: 15px; font-weight: 500; margin: 20px 0 6px; color: var(--l100); }
.legal p { margin: 0 0 12px; font-size: 15px; color: var(--l150); }
.legal .legal-lede { margin-top: 8px; color: var(--l175); }
.legal a { color: var(--l100); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Glen avatar */
.glen-av {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.glen-av > span {
  width: 72%; height: 72%; background: var(--button-text);
  -webkit-mask: url(/assets/gimme-mark.svg) center / contain no-repeat;
  mask: url(/assets/gimme-mark.svg) center / contain no-repeat;
}
.glen-av-lg { width: 40px; height: 40px; }

.glen-fab {
  position: fixed; right: var(--gutter); bottom: max(var(--gutter), env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 400;
  min-height: 48px; background: var(--accent); color: var(--button-text); border: 1px solid var(--button-text); border-radius: var(--radius);
  padding: 0 16px 0 8px; cursor: pointer;
}
.glen-fab .glen-av { background: var(--button-text); }
.glen-fab .glen-av > span { background: var(--accent); }
.glen-fab:hover { background: var(--accent-hover); }
.glen-fab[hidden] { display: none; }
/* The hero already offers Ask Glen, so the floating button waits until it scrolls away */
html.finder-in-view .glen-fab { display: none; }

/* Glen chat: light (Sam, 24 Sep: the dark chat was too dark). White header,
   dock and cards on the #F3F4EF page, 1px #E4E4E4 lines, #171717 text,
   #454545 secondary. Yellow only as a fill with #171717 text (avatar, send,
   primary buttons, a chosen chip). No shadows, gradients, blue or green.
   On phones the panel is the whole screen, sized to the visual viewport by
   glen.js so the composer sits on top of the keyboard; 100dvh (then 100vh)
   is the fallback. */
html.has-glen, html.has-glen body { overflow: hidden; }
.glen-scrim { position: fixed; inset: 0; background: rgba(23, 23, 23, .45); z-index: 55; display: none; }
.glen-panel {
  --text-2: var(--l175);
  --text-3: var(--l175);
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--page); color: var(--l100); outline: none;
  opacity: 0; transition: opacity .2s ease;
}
.glen-panel.is-open { opacity: 1; }
.glen-panel[hidden], .glen-scrim[hidden] { display: none; }

.glen-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px var(--gutter);
  padding-top: max(8px, env(safe-area-inset-top)); background: var(--white); border-bottom: 1px solid var(--l400);
}
.glen-id { flex: 1; min-width: 0; }
.glen-id h2 { font-size: 16px; font-weight: 500; color: var(--l100); }
.glen-id p { margin: 0; font-size: 12px; font-weight: 400; color: var(--l175); }
.glen-reset {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--l100); background: none; border: 0; border-radius: var(--radius);
  min-height: 44px; padding: 0 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.glen-reset:hover { background: rgba(23, 23, 23, .05); }
.glen-close { width: 44px; height: 44px; border-color: transparent; background: transparent; color: var(--l100); }
.glen-close:hover { border-color: var(--l400); }

/* What Glen has understood, one line under the header */
.glen-details {
  flex: 0 0 auto; margin: 0; padding: 7px var(--gutter); background: var(--white); border-bottom: 1px solid var(--l400);
  font-size: 12px; line-height: 1.4; color: var(--l175); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.glen-details-k { font-weight: 500; color: var(--l100); }

.glen-log {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 16px var(--gutter) 32px; display: flex; flex-direction: column; gap: 16px;
  scroll-padding-bottom: 24px;
}
.glen-msg { display: flex; gap: 8px; align-items: flex-start; min-width: 0; flex: 0 0 auto; }
.glen-msg.is-user { justify-content: flex-end; }
.glen-msg .glen-av { width: 28px; height: 28px; margin-top: 2px; }
.glen-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.glen-bubble {
  max-width: 92%; padding: 10px 14px; border-radius: var(--radius); font-size: 15px; font-weight: 300; line-height: 1.45;
  background: var(--white); border: 1px solid var(--l400); color: var(--l100); overflow-wrap: anywhere; align-self: flex-start;
}
.glen-bubble p { margin: 0 0 8px; }
.glen-bubble p:last-child { margin: 0; }
.is-user .glen-bubble { max-width: 82%; background: var(--l400); border-color: var(--l400); font-weight: 400; }
.is-notice .glen-bubble { background: transparent; color: var(--l175); }

/* Your fit */
.glen-fit { background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); padding: 10px 14px 12px; }
.glen-fit-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.glen-fit-k { font-size: 12px; font-weight: 500; color: var(--l175); }
.glen-fit-change {
  font: inherit; font-size: 13px; font-weight: 400; color: var(--l100); background: none; border: 0; border-radius: 8px;
  min-height: 32px; padding: 0 6px; margin-right: -6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.glen-fit-who { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--l100); line-height: 1.4; }
.glen-fit-spec { margin: 2px 0 0; font-size: 14px; font-weight: 300; color: var(--l175); line-height: 1.4; }

/* Listing cards: full width, stacked, photo left and details right (Sam, 24 Sep:
   two side by side were cramped and cut off). White card, 1px #E4E4E4, radius
   14, the site grid's yellow ring on hover and focus. "Not right?" sits inside
   the card, underneath it, as a sibling of the link. */
.glen-cards { display: flex; flex-direction: column; gap: 14px; }
/* The bordered card is the link; "Not right?" sits underneath it, outside the box (Sam, 24 Sep). */
.glen-card-wrap { min-width: 0; display: flex; flex-direction: column; }
.glen-card {
  display: flex; align-items: center; gap: 14px; padding: 12px; text-decoration: none; color: var(--l100); min-width: 0;
  background: var(--white); border: 1px solid var(--l400); border-radius: 14px; transition: border-color .15s ease;
}
.glen-card:hover, .glen-card:focus-visible { border-color: var(--accent, #DFE644); outline: 1px solid var(--accent, #DFE644); outline-offset: 0; }
.glen-card-img {
  position: relative; flex: 0 0 104px; width: 104px; height: 104px; border-radius: 12px; overflow: hidden;
  background: var(--tile-1); display: block;
}
.glen-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.glen-card-img .no-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--l175); text-align: center; padding: 6px; }
.glen-pro { left: 6px; top: 6px; font-size: 10px; gap: 3px; padding: 3px 7px 3px 4px; }
.glen-pro svg { width: 12px; height: 12px; }
.glen-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.glen-card-title {
  font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.glen-card-spec { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--l175); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glen-card-price { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--l100); }
.glen-card-why {
  font-size: 12px; font-weight: 300; line-height: 1.4; color: var(--l175); overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.glen-nr-link {
  align-self: flex-end; margin-top: 2px; font: inherit; font-size: 12px; font-weight: 400; color: var(--l175);
  background: none; border: 0; border-radius: 8px; min-height: 32px; padding: 0 4px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.glen-nr-link:hover { color: var(--l100); }
.glen-more { width: 100%; min-height: 44px; font-size: 15px; }
.glen-browses { display: flex; flex-direction: column; gap: 8px; }
.glen-browse { width: 100%; min-height: 44px; font-size: 15px; white-space: normal; text-align: center; line-height: 1.25; padding: 10px 16px; }

.glen-typing { display: inline-flex; gap: 5px; padding: 14px; background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); }
.glen-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--l300); animation: glenDot 1s ease-in-out infinite; }
.glen-typing i:nth-child(2) { animation-delay: .15s; }
.glen-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes glenDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .glen-typing i, .skeleton .card-img { animation: none; } .glen-panel, .panel { transition: none; } }

/* The dock: quick replies in one scrolling row, the composer, one line of small print */
.glen-dock {
  flex: 0 0 auto; background: var(--white); border-top: 1px solid var(--l400);
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.glen-chips {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  padding: 10px var(--gutter) 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 var(--gutter);
}
.glen-chips::-webkit-scrollbar { display: none; }
.glen-chips:empty { display: none; }
.glen-chips .chip { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-size: 14px; color: var(--l100); border-color: var(--l350); }
.glen-chips .chip:hover { border-color: var(--l100); }
.glen-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px var(--gutter) 4px; }
.glen-form textarea {
  flex: 1; min-width: 0; resize: none; font: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--l100);
  background: var(--white); border: 1px solid var(--l350); border-radius: var(--radius);
  padding: 12px 14px; max-height: 120px; min-height: 48px; height: 48px; display: block;
}
.glen-form textarea::placeholder { color: var(--l200); font-weight: 300; }
.glen-form textarea:focus, .glen-form textarea:focus-visible { outline: 1px solid var(--l100); outline-offset: 0; border-color: var(--l100); }
.glen-form textarea:disabled { background: var(--page); }
.glen-send { padding: 0; width: 48px; height: 48px; min-height: 48px; flex: 0 0 auto; }
.glen-send svg { width: 20px; height: 20px; }
.glen-foot {
  margin: 0; padding: 2px var(--gutter) 2px; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--l175);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* "Not right?" */
.glen-nr { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); }
.glen-nr-q { margin: 0; font-size: 13px; font-weight: 500; }
.glen-nr-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.glen-nr-reasons .chip { min-height: 40px; }
.glen-nr-note {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--l100); background: var(--white); border: 1px solid var(--l350);
  border-radius: var(--radius); height: 48px; padding: 0 12px; min-width: 0;
}
.glen-nr-note:focus-visible { outline: 1px solid var(--l100); outline-offset: 0; border-color: var(--l100); }
.glen-nr-actions { display: flex; align-items: center; gap: 8px; }
.glen-nr-send { min-height: 44px; padding: 0 20px; font-size: 15px; }
.glen-nr-thanks { margin: 0; font-size: 12px; font-weight: 400; color: var(--l175); }
/* "Let me know when one comes in": a club with no stock that fits. White card,
   primary yellow button, then an inline email form (16px, a clear 1px #C3C3C3
   border, #171717 on focus). Red only for a bad email: outline plus one line. */
.glen-alert { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); }
.glen-alert-k { margin: 0; font-size: 12px; font-weight: 500; color: var(--l175); }
.glen-alert-what { margin: -6px 0 0; font-size: 15px; font-weight: 500; color: var(--l100); line-height: 1.35; }
.glen-alert-btn { width: 100%; min-height: 48px; font-size: 15px; white-space: normal; text-align: center; line-height: 1.25; padding: 10px 16px; }
.glen-alert-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.glen-alert-label { font-size: 13px; font-weight: 500; color: var(--l100); }
.glen-alert-email {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--l100); background: var(--white); border: 1px solid var(--l350);
  border-radius: var(--radius); height: 48px; padding: 0 14px; min-width: 0; width: 100%;
}
.glen-alert-email:focus, .glen-alert-email:focus-visible { outline: 1px solid var(--l100); outline-offset: 0; border-color: var(--l100); }
.glen-alert-email.is-err, .glen-alert-email.is-err:focus { border-color: var(--red); outline-color: var(--red); }
.glen-alert-err { margin: 0; font-size: 12px; font-weight: 400; color: var(--l175); }
.glen-alert-err.is-field { color: var(--red); }
.glen-alert-consent { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--l175); }
.glen-alert-consent a { color: var(--l100); text-underline-offset: 3px; }
.glen-alert-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.glen-alert-send { min-height: 44px; padding: 0 22px; font-size: 15px; }
.glen-state { padding: 28px 12px; }
.glen-state .glen-browses { margin-top: 18px; align-items: center; }
.glen-state .glen-browse { width: auto; }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
  .hero { padding: 32px 0 72px; }
  .hero .eyebrow { display: block; }
  .hero h1 { font-size: 34px; max-width: none; }
  .lede { font-size: 15px; }
  .hero-g { right: -8%; opacity: .12; }
  .finder-sec { margin-top: -52px; }
  .finder { padding: 16px; }
  .seg { display: inline-flex; }
  .seg-tab { flex: 0 0 auto; padding: 0 18px; }
  .finder-pane { padding-top: 14px; }
  .ask-send { width: auto; padding: 0 24px; }
  .ask-send svg { display: none; }
  .ask-send .lbl { display: inline; }
  .ask-chips { flex-wrap: wrap; overflow: visible; margin: 12px 0 0; padding: 0; }
  .stock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stock-grid .qf-q { grid-column: span 2; }
  .qf-actions { grid-column: span 2; }
  .browse { padding-top: 32px; }
  .browse-head h2 { font-size: 24px; }
}

@media (min-width: 960px) {
  .glen-scrim { display: block; }
  .glen-scrim[hidden] { display: none; }
  .glen-panel { left: auto; width: 500px; border-left: 1px solid var(--l400); }
  .glen-head { padding-left: 20px; }
  .glen-details, .glen-log, .glen-form, .glen-chips, .glen-foot { padding-left: 20px; padding-right: 20px; }

  .top-inner { height: 64px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
  .hero { padding: 36px 0 84px; }
  .hero-g { height: 300%; right: 6%; top: -90%; opacity: .14; }
  .hero h1 { font-size: 40px; }
  .lede { max-width: none; }
  .finder-sec { margin-top: -60px; }
  .finder { padding: 20px; }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 10px; gap: 6px; }
  .chips .chip { padding: 8px 13px; }
  .chips .chip-glen { padding-left: 6px; }
  .panel {
    left: auto; top: 0; bottom: 0; width: 420px; max-height: none; border-radius: 0;
    border-top: 0; border-left: 1px solid var(--l400);
  }
  .panel-head { padding: 18px 24px 14px; }
  .panel-body { padding: 4px 24px 20px; }
  .panel-foot { padding: 14px 24px; }
  .app-band-inner { grid-template-columns: 1.4fr 1fr; }
  .app-band .stores { justify-content: flex-end; }
  .club-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .gallery { position: sticky; top: 84px; }
  .club { padding-top: 24px; }
  .club-info h1 { font-size: 28px; }
  .cta-box { padding: 20px; }
  .browse-head { scroll-margin-top: 84px; }
}

@media (min-width: 1100px) {
  .stock-grid { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)) auto; }
  .stock-grid .qf-q { grid-column: auto; }
  .qf-actions { grid-column: auto; }
  .qf-actions .btn { flex: 0 0 auto; padding: 0 32px; }
}

/* Glen's small print stays on one line on the narrowest phones */
@media (max-width: 400px) { .glen-foot { font-size: 10.5px; padding-left: 10px; padding-right: 10px; letter-spacing: -0.005em; } }

/* ==========================================================================
   Sign in (auth.js). Only drawn when AUTH_ENABLED is on; otherwise nothing
   below matches anything on the page. Dark header rules: text d100 on nav,
   hover fill rgba white 8%, radius 12 (every button is 12px), Regular 400,
   no arrows in labels. The menu is a dark card with a 1px line.
   ========================================================================== */
.acct { position: relative; margin-left: auto; margin-right: 8px; }
.acct-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  font: inherit; font-size: 14px; font-weight: 400; line-height: 1; color: var(--text);
  background: transparent; border: 0; border-radius: var(--radius); cursor: pointer; text-decoration: none; white-space: nowrap;
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis;
}
.acct-btn:hover { background: rgba(255, 255, 255, 0.08); }
.acct-caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: 0 0 auto; }
.acct-btn[aria-expanded="true"] .acct-caret { transform: translateY(2px) rotate(225deg); }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; padding: 6px; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.acct-item {
  display: block; width: 100%; min-height: 44px; padding: 0 12px; text-align: left;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--text);
  background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.acct-item:hover, .acct-item:focus-visible { background: rgba(255, 255, 255, 0.08); }
.acct-item:disabled { color: var(--text-3); cursor: default; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.auth-actions .btn { margin-top: 0; }
/* End sign in */

/* ==========================================================================
   DEMO sign in (deploy previews and localhost only; demo-account.js and
   netlify/functions/demo.mjs). Nothing below matches anything on the live
   site. Light page, yellow only as a fill with #171717 text, every tappable
   button 12px, Poppins 300 to 600. The Demo chip is a status tag, not a
   button: neutral, uppercase 10px, radius 999 (tags and badges only).
   ========================================================================== */
.acct { display: flex; align-items: center; gap: 8px; }
a.acct-item { display: flex; align-items: center; text-decoration: none; }
.demo-chip {
  display: inline-flex; align-items: center; flex: 0 0 auto; vertical-align: middle;
  font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: var(--l400); color: var(--l175);
}
.top .demo-chip { background: rgba(255, 255, 255, 0.08); color: var(--d200); }
@media (max-width: 380px) { .top .acct-btn { padding: 0 8px; } .acct { gap: 4px; margin-right: 4px; } }

/* Sign in page, like the hosted Gimme login: one white card on the light page */
.signin { padding-top: 32px; padding-bottom: 72px; }
.signin-card { max-width: 440px; margin: 0 auto; background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); padding: 20px 20px 24px; }
.signin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.signin-top img { width: 36px; height: 36px; border-radius: 10px; }
.signin-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--l100); }
.signin-lede { margin: 8px 0 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--l175); }
.signin-email { font-weight: 500; color: var(--l100); overflow-wrap: anywhere; }
.signin-form { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; }
.field-label { font-size: 13px; font-weight: 500; color: var(--l100); }
.field {
  display: block; width: 100%; height: 56px; margin: 0; padding: 0 14px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--l100);
  background: var(--white); border: 1px solid var(--l350); border-radius: var(--radius);
}
.field:hover { border-color: var(--l300); }
.field:focus, .field:focus-visible { outline: 1px solid var(--l100); outline-offset: 0; border-color: var(--l100); }
.field.is-err, .field.is-err:focus { border-color: var(--red); outline-color: var(--red); }
.field-code { font-size: 22px; letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.field-err { margin: 0; font-size: 12px; font-weight: 400; color: var(--red); }
.signin-form .btn-big { margin-top: 8px; }
.signin-alt { margin: 16px 0 0; font-size: 14px; }
.signin-alt a, .signin-new a { color: var(--l100); text-underline-offset: 3px; }
.signin-note { margin: 16px 0 0; padding: 10px 12px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--l175); background: var(--page); border-radius: var(--radius); }
.signin-new { max-width: 440px; margin: 20px auto 0; text-align: center; font-size: 14px; font-weight: 400; color: var(--l175); }

/* My account */
.account { max-width: 720px; padding-top: 28px; padding-bottom: 88px; }
.acct-head { display: flex; align-items: center; gap: 10px; }
.acct-head h1 { font-size: 24px; font-weight: 600; color: var(--l100); }
.acct-details { margin-top: 18px; }
.acct-sec h2 { font-size: 18px; font-weight: 600; color: var(--l100); margin: 32px 0 10px; }
.acct-card { background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); padding: 14px 16px 8px; }
.acct-fit-who { margin: 0; font-size: 15px; font-weight: 500; color: var(--l100); line-height: 1.4; }
.acct-fit-spec { margin: 4px 0 0; font-size: 14px; font-weight: 300; color: var(--l175); line-height: 1.4; }
.acct-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.acct-meta { margin: 2px 0 0; font-size: 12px; font-weight: 400; color: var(--l175); }
.acct-row-form { margin: 0; flex: 0 0 auto; }
.text-btn {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--l100); background: none; border: 0; border-radius: var(--radius);
  min-height: 44px; padding: 0 10px; margin-right: -10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.text-btn:hover { background: rgba(23, 23, 23, .05); }
.acct-list { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); }
.acct-item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--l400); }
.acct-item-row:last-child { border-bottom: 0; }
.acct-item-row > div, .acct-club { min-width: 0; }
.acct-row-title { display: block; margin: 0; font-size: 14px; font-weight: 500; color: var(--l100); line-height: 1.4; overflow-wrap: anywhere; }
.acct-club { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--l100); }
.acct-club:hover .acct-row-title { text-decoration: underline; text-underline-offset: 3px; }
.acct-thumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--radius); overflow: hidden; background: var(--tile-1); }
.acct-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acct-price { display: block; font-size: 14px; font-weight: 400; color: var(--l100); }
.acct-empty { margin: 0; font-size: 14px; font-weight: 300; color: var(--l175); }
.acct-note { margin: 28px 0 16px; font-size: 14px; font-weight: 400; color: var(--l175); }

/* Glen: Demo chip in the header, Save my fit, alert choice, soft gate */
.glen-id h2 .demo-chip { margin-left: 6px; position: relative; top: -1px; }
.glen-fit-foot { margin-top: 10px; }
.glen-fit-save { min-height: 40px; padding: 0 14px; font-size: 14px; }
.glen-fit-saved { margin: 0; font-size: 13px; font-weight: 400; color: var(--l175); }
.glen-alert-choice { display: flex; flex-direction: column; gap: 8px; }
.glen-gate { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--white); border: 1px solid var(--l400); border-radius: var(--radius); }
.glen-gate-t { margin: 0; font-size: 15px; font-weight: 500; color: var(--l100); line-height: 1.35; }
.glen-gate-s { margin: 0; font-size: 13px; font-weight: 300; color: var(--l175); line-height: 1.45; }
.glen-gate-actions { display: flex; gap: 8px; margin-top: 10px; }
.glen-gate-actions .btn { flex: 1; min-height: 44px; font-size: 15px; }

/* Club page: Save heart on the photo, translucent rounded square, neutral when saved */
.save-heart {
  position: absolute; right: 10px; top: 10px; z-index: 2; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(23, 23, 23, .55); color: #FFFFFF; border: 0; border-radius: var(--radius); cursor: pointer;
}
.save-heart:hover { background: rgba(23, 23, 23, .7); }
.save-heart svg { width: 22px; height: 22px; fill: none; }
.save-heart.is-saved svg { fill: currentColor; }
.save-heart:disabled { opacity: .7; cursor: default; }
.demo-toast {
  position: fixed; left: 50%; top: 72px; z-index: 70; transform: translate(-50%, -8px); opacity: 0;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--radius);
  background: rgba(23, 23, 23, .92); color: #FFFFFF; font-size: 14px; font-weight: 400; text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}
.demo-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
/* End demo sign in */