/* Home bottom bar (site/lib/homebar.mjs, site/js/home-bar.js): fixed to the bottom of the home page, hidden until the hero
   intro is over AND the hero has scrolled past (home-bar.js adds .is-shown; html.mh-bar-shown pads the footer so the bar
   never covers it). Tokens from base.css; Fraunces for the name and price, system UI for the rest. Under the drawers
   (z 40 / 60) and the header (z 50). */
.home-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--line);
  padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), visibility 0s linear 600ms; }
.home-bar.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
/* same column as .wrap, so the bar lines up with the page */
.home-bar-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s3) var(--s5); min-width: 0; }

/* name + one quiet line (wood · dims on desktop; wood · price on phones) */
.home-bar-id { display: grid; line-height: 1.2; min-width: 0; margin-right: auto; }
.home-bar-name { font-family: var(--font-display); font-size: 18px; letter-spacing: 0; white-space: nowrap; }
.home-bar-sub { color: var(--fg-dim); font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.home-bar-subprice { display: none; }

/* wood chooser: the three real-wood discs (site/static/wood), same look as the product page's .chip-disc; 44 px tap targets */
.home-bar-wood { display: flex; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; flex: none; }
.home-bar-chip { position: relative; display: grid; place-items: center; width: 40px; height: 44px; border-radius: 50%; cursor: pointer; }
.home-bar-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.home-bar-disc { position: relative; overflow: hidden; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-2) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.home-bar-disc[data-disc="maple"] { background-image: url(/wood/maple-mid-g.webp); }
.home-bar-disc[data-disc="walnut"] { background-image: url(/wood/walnut-mid-g.webp); }
.home-bar-disc[data-disc="mahogany"] { background-image: url(/wood/mahogany-mid-g.webp); }
/* no gloss on the discs (Owen 2026-10-30) */
@media (hover: hover) and (pointer: fine) { .home-bar-chip:hover .home-bar-disc { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg-dim); } }
.home-bar-chip:has(input:checked) .home-bar-disc { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.home-bar-chip:has(input:focus-visible) { outline: 1.5px solid var(--accent); outline-offset: 2px; }

/* price + Add */
.home-bar-buy { display: flex; align-items: center; gap: var(--s5); flex: none; }
.home-bar-price { font-family: var(--font-display); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums lining-nums;
  min-width: 3.2ch; text-align: right; }
.home-bar-add { min-height: 44px; padding: 0 var(--s5); white-space: nowrap; }

/* the footer gets room for the bar once it is shown (home-bar.js sets --mh-bar-h from the bar's height) */
html.mh-bar-shown .site-footer { padding-bottom: calc(var(--s6) + var(--mh-bar-h, 72px)); }

@media (max-width: 640px) {
  .home-bar-in { gap: var(--s3); }
  .home-bar-name { font-size: 16px; }
  .home-bar-sub { font-size: 11px; }
  .home-bar-dims, .home-bar-price { display: none; }
  .home-bar-subprice { display: inline; }
  .home-bar-subprice-n { color: var(--fg); }
  .home-bar-wood { gap: 0; }
  .home-bar-chip { width: 34px; }
  .home-bar-disc { width: 22px; height: 22px; }
  .home-bar-buy { gap: 0; }
  .home-bar-add { padding: 0 var(--s4); font-size: 11px; min-height: 40px; }
}
@media (max-width: 359px) { .home-bar-sub { display: none; } .home-bar-add { padding: 0 var(--s3); letter-spacing: .1em; } }