/* ==========================================================================
   hamper.css — Build Your Own Hamper. Namespaced .hb-*. On-brand (navy/steel/
   amber). The box auto-grows as products are added; lead time gates products.
   ========================================================================== */
.hb{ --hb-navy:var(--ng-navy); --hb-steel:var(--ng-navy-light); --hb-amber:var(--ng-gold);
  --hb-amber2:var(--ng-gold-light); --hb-line:var(--ng-line); --hb-grey:var(--ng-grey);
  --hb-cream:var(--ng-off-white); --hb-r:14px; --hb-shadow:0 12px 40px rgba(10,10,10,.12);
  --hb-shadow-sm:0 4px 16px rgba(10,10,10,.08); color:var(--ng-ink); }

.hb-hero{ background:radial-gradient(120% 130% at 80% -20%,var(--hb-steel),var(--hb-navy) 60%);
  color:#fff; text-align:center; padding:clamp(40px,7vw,72px) 5%; }
.hb-hero h1{ color:#fff; font-size:clamp(2rem,5vw,3.2rem); margin:0 0 12px; }
.hb-hero h1 span{ color:var(--hb-amber); }
.hb-hero p{ color:#d7e2ee; max-width:680px; margin:0 auto; font-size:1.05rem; }

.hb-wrap{ max-width:1280px; margin:0 auto; padding:0 5%; }

/* progress */
.hb-progress{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:28px auto; max-width:820px; }
.hb-step{ display:flex; align-items:center; gap:10px; opacity:.5; transition:.3s; }
.hb-step.active,.hb-step.done{ opacity:1; }
.hb-step__c{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700;
  background:var(--hb-line); color:var(--hb-grey); transition:.3s; }
.hb-step.active .hb-step__c{ background:var(--hb-navy); color:#fff; }
.hb-step.done .hb-step__c{ background:var(--hb-amber); color:var(--hb-navy); }
.hb-step__l{ font-size:.85rem; font-weight:600; white-space:nowrap; }
.hb-step__line{ width:26px; height:2px; background:var(--hb-line); }
@media(max-width:720px){ .hb-step__l{ display:none; } }

/* layout */
.hb-layout{ display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start; padding-bottom:60px; }
@media(max-width:960px){ .hb-layout{ grid-template-columns:1fr; } }
.hb-panel{ display:none; }
.hb-panel.active{ display:block; animation:hb-fade .35s ease; }
@keyframes hb-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; } }
.hb-card{ background:#fff; border:1px solid var(--hb-line); border-radius:var(--hb-r); padding:26px; box-shadow:var(--hb-shadow-sm); margin-bottom:20px; }
.hb-card h2{ margin:0 0 6px; }
.hb-card > p.lede{ color:var(--hb-grey); margin:0 0 20px; }

/* quantity */
.hb-qty{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.hb-qty button{ width:44px; height:44px; border-radius:10px; border:1px solid var(--hb-line); background:#fff;
  font-size:1.3rem; cursor:pointer; color:var(--hb-navy); }
.hb-qty button:hover{ background:var(--hb-navy); color:#fff; }
.hb-qty input{ width:100px; text-align:center; font-size:1.4rem; font-weight:700; padding:9px; border:1px solid var(--hb-line); border-radius:10px; }
.hb-presets{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.hb-presets button{ border:1px solid var(--hb-line); background:#fff; border-radius:999px; padding:7px 16px; cursor:pointer; font-weight:600; }
.hb-presets button:hover{ background:var(--hb-amber); border-color:var(--hb-amber); color:var(--hb-navy); }

/* dispatch / lead time */
.hb-dispatch{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px, 100%),1fr)); gap:12px; margin-top:10px; }
.hb-disp{ border:2px solid var(--hb-line); border-radius:12px; padding:14px; cursor:pointer; text-align:center; transition:.2s; background:#fff; }
.hb-disp.selected{ border-color:var(--hb-amber); background:#FBF7EC; box-shadow:0 0 0 3px rgba(217,182,72,.15); }
.hb-disp input{ display:none; }
.hb-disp__l{ display:block; font-weight:700; color:var(--hb-navy); font-size:1.05rem; }
.hb-disp__d{ display:block; font-size:.8rem; color:var(--hb-grey); margin-top:3px; }
.hb-disp input[type=number]{ width:100%; margin-top:6px; padding:6px; border:1px solid var(--hb-line); border-radius:8px; text-align:center; }

/* filters */
.hb-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.hb-filter{ border:1px solid var(--hb-line); background:#fff; border-radius:999px; padding:7px 15px; cursor:pointer; font-weight:600; font-size:.85rem; }
.hb-filter.active{ background:var(--hb-navy); color:#fff; border-color:var(--hb-navy); }

/* product grid */
.hb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px, 100%),1fr)); gap:16px; }
.hb-prod{ position:relative; border:1px solid var(--hb-line); border-radius:12px; padding:12px; background:#fff; text-align:center; transition:.2s; }
.hb-prod.in-hamper{ border-color:var(--hb-amber); box-shadow:0 0 0 2px rgba(217,182,72,.25); }
.hb-prod.blocked{ opacity:.55; }
.hb-prod img{ width:100%; height:120px; object-fit:cover; border-radius:8px; margin-bottom:8px; background:var(--hb-cream); }
.hb-prod h5{ font-family:var(--ng-font); font-size:.9rem; font-weight:600; margin:0 0 4px; min-height:2.4em; }
.hb-prod__price{ color:var(--hb-amber); font-weight:800; }
.hb-prod__dims{ font-size:.72rem; color:var(--hb-grey); margin:2px 0; }
.hb-prod__stock{ font-size:.72rem; color:var(--hb-grey); }
.hb-prod__stock.low{ color:#c0392b; font-weight:600; }
.hb-prod__badges{ position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; }
.hb-badge{ font-size:.66rem; font-weight:700; padding:3px 7px; border-radius:999px; color:#fff; }
.hb-badge--lead{ background:var(--hb-steel); }
.hb-badge--moq{ background:#8a6d3b; }
.hb-prod__add{ width:100%; margin-top:10px; border:none; border-radius:999px; padding:11px 14px; cursor:pointer;
  font:inherit; font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--hb-navy); color:#fff; box-shadow:0 4px 12px rgba(10,10,10,.18);
  transition:background .2s, transform .15s, box-shadow .2s; }
.hb-prod__add:hover{ background:var(--hb-amber); color:var(--hb-navy); transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(217,182,72,.38); }
.hb-prod__add i{ font-size:.78rem; }
.hb-prod__reason{ margin-top:8px; font-size:.75rem; color:#c0392b; background:#fdecea; border-radius:8px; padding:6px; }

/* ---- sidebar (the live box) ---- */
.hb-side{ position:sticky; top:84px; }
.hb-box{ background:var(--hb-navy); color:#fff; border-radius:var(--hb-r); padding:22px; box-shadow:var(--hb-shadow); }
.hb-box__title{ font-family:var(--ng-serif); font-size:1.3rem; margin:0 0 4px; color:#fff; }
.hb-box__name{ color:var(--hb-amber); font-weight:700; font-size:1.15rem; }
.hb-box__viz{ position:relative; height:120px; margin:16px 0; display:grid; place-items:center; }
.hb-box__crate{ border:3px solid var(--hb-amber); border-radius:8px; background:rgba(255,255,255,.06);
  transition:width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1); display:grid; place-items:center; }
.hb-box__crate i{ color:var(--hb-amber2); font-size:1.6rem; }
.hb-cap{ height:8px; border-radius:5px; background:rgba(255,255,255,.15); overflow:hidden; margin:6px 0; }
.hb-cap__fill{ height:100%; background:linear-gradient(90deg,var(--hb-amber),var(--hb-amber2)); width:0; transition:width .5s; }
.hb-box__used{ font-size:.8rem; color:#c9d6e2; }
.hb-warn{ display:none; margin-top:10px; font-size:.82rem; background:rgba(217,182,72,.2); border:1px solid var(--hb-amber);
  border-radius:8px; padding:8px 10px; color:#fff; }
.hb-warn.show{ display:block; }
.hb-items{ list-style:none; margin:16px 0 0; padding:0; max-height:220px; overflow:auto; }
.hb-items li{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:.85rem; }
.hb-items .rm{ background:none; border:none; color:#E7CD79; cursor:pointer; font-size:.9rem; }
.hb-empty{ color:#9fb2c4; font-size:.85rem; text-align:center; padding:14px 0; }
.hb-totals{ margin-top:16px; border-top:1px solid rgba(255,255,255,.2); padding-top:14px; font-size:.9rem; }
.hb-totals div{ display:flex; justify-content:space-between; margin-bottom:6px; color:#d7e2ee; }
.hb-totals .grand{ font-size:1.25rem; font-weight:800; color:#fff; margin-top:6px; }
.hb-totals .grand span:last-child{ color:var(--hb-amber); }

/* gift cards / customs */
.hb-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px, 100%),1fr)); gap:12px; }
.hb-gc{ border:2px solid var(--hb-line); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; transition:.2s; }
.hb-gc.selected{ border-color:var(--hb-amber); box-shadow:0 0 0 3px rgba(217,182,72,.2); }
.hb-gc img{ width:100%; height:90px; object-fit:cover; }
.hb-gc__b{ padding:8px; text-align:center; font-weight:600; font-size:.85rem; }
.hb-customs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px, 100%),1fr)); gap:12px; }
.hb-cust{ border:2px solid var(--hb-line); border-radius:12px; padding:12px 14px; cursor:pointer; background:#fff; transition:.2s; }
.hb-cust.selected{ border-color:var(--hb-amber); background:#FBF7EC; }
.hb-cust b{ display:block; }
.hb-cust small{ color:var(--hb-grey); }
.hb-cust .pl{ float:right; color:var(--hb-amber); font-weight:700; }
.hb-field{ margin-bottom:16px; }
.hb-field label{ display:block; font-weight:600; margin-bottom:6px; }
.hb-field input,.hb-field textarea{ width:100%; padding:11px; border:1px solid var(--hb-line); border-radius:10px; font:inherit; }

/* review */
.hb-review dl{ display:grid; grid-template-columns:180px 1fr; gap:8px 16px; margin:0; }
.hb-review dt{ color:var(--hb-grey); }
.hb-review dd{ margin:0; font-weight:600; }

/* nav buttons */
.hb-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
.hb-done{ text-align:center; padding:40px 20px; }
.hb-done i{ font-size:3rem; color:var(--ng-success); }
.hb-done h2{ margin:14px 0 8px; }
.hb-done .ref{ font-family:var(--ng-serif); font-size:1.4rem; color:var(--hb-navy); background:var(--hb-cream); display:inline-block; padding:6px 16px; border-radius:8px; }

/* per-item quantity stepper (multiple of the same filler) — brand navy pill */
.hb-prod__stepper{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:6px;
  background:var(--hb-navy); border-radius:999px; padding:5px; box-shadow:0 4px 12px rgba(10,10,10,.18); }
.hb-prod__stepper button{ width:34px; height:34px; flex:none; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.25rem; line-height:1; font-weight:700;
  display:grid; place-items:center; transition:.15s; }
.hb-prod__stepper button:hover:not(:disabled){ background:var(--hb-amber); color:var(--hb-navy); transform:scale(1.06); }
.hb-prod__stepper button:disabled{ opacity:.3; cursor:not-allowed; }
.hb-prod__stepper span{ flex:1; text-align:center; font-weight:800; font-size:1.05rem; color:#fff; }

/* step nav shown at the top of each step (mirrors the bottom nav) */
.hb-nav--top{ margin-top:0; margin-bottom:18px; }

/* ---------------------------------------------------------------------------
   Phase 2 additions — the quantity-and-date-first builder.
   ------------------------------------------------------------------------- */
.hb-promise { display:inline-block; margin:2px 0 12px; padding:7px 13px; border-radius:999px;
  background:rgba(201,162,75,.14); font-weight:600; font-size:.9rem; }
.hb-field--date { margin-top:16px; max-width:320px; }
.hb-field--date label { display:block; font-weight:600; margin-bottom:6px; font-size:.9rem; }
.hb-field--date input { width:100%; padding:11px 12px; border:1px solid var(--ng-line);
  border-radius:8px; font:inherit; }

.hb-search { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.hb-search input { flex:1 1 240px; padding:11px 13px; border:1px solid var(--ng-line);
  border-radius:8px; font:inherit; }
.hb-search select { padding:11px 12px; border:1px solid var(--ng-line); border-radius:8px; font:inherit; }

.hb-zones { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(260px, 100%),1fr)); margin-bottom:18px; }
.hb-zone { border:1px solid var(--ng-line); border-radius:10px; padding:10px 14px; }
.hb-zone legend { font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; padding:0 6px; }
.hb-zone--exclude legend { color:var(--ng-danger); }
.hb-chip { display:inline-flex; align-items:center; gap:6px; margin:4px 6px 4px 0; padding:5px 10px;
  border:1px solid var(--ng-line); border-radius:999px; cursor:pointer; font-size:.85rem; }
.hb-chip:has(input:checked) { background:var(--ng-navy); color:var(--ng-white); border-color:var(--ng-navy); }
.hb-zone--exclude .hb-chip:has(input:checked) { background:var(--ng-danger); border-color:var(--ng-danger); }

.hb-area { margin:22px 0 10px; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ng-grey); }
.hb-area__grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(190px, 100%),1fr)); }
.hb-prod { position:relative; border:1px solid var(--ng-line); border-radius:12px; overflow:hidden;
  background:var(--ng-white); display:flex; flex-direction:column; }
.hb-prod.is-chosen { border-color:var(--ng-gold); box-shadow:inset 0 0 0 1px var(--ng-gold); }
.hb-prod__img { aspect-ratio:1/1; background:var(--ng-off-white); }
.hb-prod__img img { width:100%; height:100%; object-fit:cover; }
.hb-prod__b { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.hb-prod__b b { font-size:.94rem; line-height:1.35; }
.hb-prod__price { font-weight:700; }
.hb-prod__avail { color:var(--ng-grey); font-size:.8rem; }
.hb-prod__add { margin-top:auto; display:flex; align-items:center; gap:10px; }
.hb-prod__add button { width:32px; height:32px; border:1px solid var(--ng-line); background:var(--ng-white);
  border-radius:8px; cursor:pointer; font-size:1.1rem; line-height:1; }
.hb-prod__add button:hover { border-color:var(--ng-gold); }
.hb-prod__add span { min-width:20px; text-align:center; font-weight:700; }
.hb-prod__flash { position:absolute; inset:auto 8px 8px; padding:7px 10px; border-radius:8px;
  background:var(--ng-navy); color:var(--ng-white); font-size:.78rem; line-height:1.4; }

.hb-flaglist { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.hb-flag { font-size:.68rem; padding:2px 7px; border-radius:999px; border:1px solid var(--ng-line);
  background:var(--ng-off-white); color:var(--ng-grey); }
.hb-flag--allergen { border-color:#E4B9B4; background:#FDF3F2; color:#8B2F25; }
.hb-flag--alcohol { border-color:#D9C39A; background:#FBF6EA; color:#7A5B1E; }
.hb-flag--diet { border-color:#B7DBC0; background:#F1FAF3; color:#23643A; }

.hb-loading { padding:26px; text-align:center; color:var(--ng-grey); }
.hb-error { margin:14px 0; padding:12px 14px; border-radius:8px; background:#FDF3F2;
  border:1px solid #E4B9B4; color:#8B2F25; }
.hb-note { color:var(--ng-grey); font-size:.9rem; }

/* ---------------------------------------------------------------------------
   MOBILE
   Audited at 390px. The builder's own controls (quantity, date choices,
   product grid, live box panel) were laid out for a desktop column; these
   rules make each step fit a phone screen without dropping anything.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .hb-hero { padding: 26px 16px; }
  .hb-hero h1 { font-size: 1.7rem; }
  .hb-hero p { font-size: .95rem; }
  .hb-wrap { padding: 0 12px; }
  .hb-card { padding: 16px 14px; }
  .hb-card h2 { font-size: 1.2rem; }
  .hb-card .lede { font-size: .92rem; }

  /* Step chips: keep all three visible, drop to numbers plus a short label. */
  .hb-progress { gap: 4px; margin: 16px 0; }
  .hb-step__l { font-size: .68rem; }
  .hb-step__line { min-width: 8px; }

  /* Quantity and presets are the first thing a customer touches. */
  .hb-qty button { width: 48px; height: 48px; }
  .hb-qty input { width: 84px; height: 48px; }
  .hb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
  .hb-presets button { min-height: 40px; padding: 0 14px; }

  /* Date choices: two per row rather than one tall stack. */
  .hb-dispatch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hb-disp { padding: 10px; min-height: 62px; }
  .hb-disp__l { font-size: .88rem; }
  .hb-disp__d { font-size: .72rem; }

  /* Product grid: two per row — one per row turned a short catalogue into a
     very long scroll. */
  .hb-area__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hb-prod__b { padding: 8px 9px 10px; gap: 4px; }
  .hb-prod__b b { font-size: .84rem; }
  .hb-prod__price { font-size: .9rem; }
  .hb-prod__avail { font-size: .72rem; }
  .hb-prod__add button { width: 36px; height: 36px; }
  .hb-flag { font-size: .62rem; padding: 2px 6px; }
  .hb-flaglist .hb-flag:nth-child(n+3) { display: none; }

  .hb-search { gap: 8px; }
  .hb-search input, .hb-search select { flex: 1 1 100%; min-height: 44px; }

  /* Navigation between steps: full-width buttons, and only one set of them —
     the duplicated top row is redundant once the panel is a single column. */
  .hb-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .hb-nav .btn { flex: 1 1 100%; min-height: 46px; }
  .hb-nav--top { display: none; }

  /* The live box preview moves below the builder instead of beside it, and
     the crate visual shrinks so the item list and totals stay on screen. */
  .hb-layout { display: block; }
  .hb-side { position: static; margin-top: 18px; }
  .hb-box { position: static; }
  .hb-box__viz { min-height: 90px; }
  .hb-items { max-height: 220px; overflow-y: auto; }

  .hb-review dl { grid-template-columns: 1fr; gap: 2px 0; }
  .hb-review dt { margin-top: 8px; }
}

/* Trailing space: the desktop layout reserves 60px under the builder, which on
   a phone reads as a dead band between the totals and the footer. */
@media (max-width: 700px) {
  .hb-layout { padding-bottom: 20px; }
}

/* ==========================================================================
   BUILDER CATALOGUE LAYOUT — fixes the ragged "one on a line, two on a line"
   --------------------------------------------------------------------------
   The cause was a grid inside a grid. .hb-grid was itself declared as
   `grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))`, from when it
   held product cards directly. It now holds PAIRS of children — an <h3> area
   heading followed by a .hb-area__grid of cards — so each heading was being
   placed into one 180px column cell and each grid of cards into the next.
   That is what produced the uneven, half-empty rows.

   .hb-grid is now a plain block flow: headings run full width, and the cards
   are laid out by .hb-area__grid alone.
   ========================================================================== */
.hb-grid {
  display: block;
  grid-template-columns: none;
}

.hb-area {
  margin: 22px 0 10px;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ng-grey);
  border-bottom: 1px solid var(--hb-line, var(--ng-line));
  padding-bottom: 6px;
}
.hb-area:first-child { margin-top: 4px; }

/* One consistent set of columns for the cards themselves. */
.hb-area__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  align-items: stretch;
}

/* Every card the same height, whatever the name length — same reasoning as the
   catalogue cards: a two-line product name must not shift the price, the
   availability line and the +/- control down relative to its neighbours. */
.hb-prod {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hb-prod__img { aspect-ratio: 1 / 1; flex: none; }
.hb-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.hb-prod__b { flex: 1; display: flex; flex-direction: column; gap: 5px; }

/* Name: exactly two lines, clamped. */
.hb-prod__b b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em; line-height: 1.25; font-size: .9rem;
}
/* Availability wording varies ("Up to 4 per hamper" / "Brought in for your
   date"), so it reserves two lines as well. */
.hb-prod__avail {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.2em; line-height: 1.1;
}
/* The stepper is pinned to the bottom so it lines up across the row. */
.hb-prod__add { margin-top: auto; }

/* Count beside each area heading — tells the shopper how deep a group goes
   before they scroll into it. */
.hb-area__n {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; background: var(--ng-line, #E6E6E6);
  color: var(--ng-grey, #6A6A6A); font-size: .72rem; font-weight: 700;
  letter-spacing: 0; vertical-align: middle;
}

/* A product already at its per-hamper ceiling: the "+" is visibly spent rather
   than looking live and refusing the click. */
.hb-prod__add button[disabled] { opacity: .35; cursor: not-allowed; }
.hb-prod.is-maxed .hb-prod__avail { color: var(--ng-gold); font-weight: 600; }

/* ==========================================================================
   PRODUCT IMAGES — always a square, never cropped
   --------------------------------------------------------------------------
   These were object-fit: cover, which fills the square by CROPPING — so a tall
   bottle or a portrait pack lost its top and bottom, and each card cropped
   differently, which is what made the grid look uneven.

   object-fit: contain scales by whichever dimension is larger, so the whole
   product fits inside the square and the other dimension simply has space
   either side. Product shots are on white, so the padding is invisible and
   every card presents the same square regardless of the source proportions.
   ========================================================================== */
.hb-prod__img {
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.hb-prod__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* The generated stand-in panels are designed to bleed to the edges — letter-
   boxing those on white would frame the placeholder rather than hide it. They
   keep filling the square. */
.hb-prod__img img.is-generated { object-fit: cover; }
.hb-prod__img:has(img.is-generated) { padding: 0; }

/* ==========================================================================
   CATEGORY BROWSING
   --------------------------------------------------------------------------
   Listing every supplyable product at once was accurate but unusable — you
   cannot choose from three hundred cards. The default view is now the
   categories; products are one click inside, and the search still reaches all
   of them at once. Nothing is removed from the catalogue, it is just not all
   on screen simultaneously.
   ========================================================================== */
.hb-cats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  margin-top: 6px;
}

.hb-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  text-align: left;
  background: var(--ng-white, #fff);
  border: 1px solid var(--ng-line, #E6E6E6);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hb-cat:hover {
  border-color: var(--ng-gold, #C9A24B);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.hb-cat.has-chosen { border-color: var(--ng-gold, #C9A24B); box-shadow: inset 0 0 0 1px var(--ng-gold, #C9A24B); }

.hb-cat__img {
  flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.hb-cat__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hb-cat__img img.is-generated { object-fit: cover; padding: 0; }

.hb-cat__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-cat__b b { font-size: .95rem; line-height: 1.25; }
.hb-cat__b small { color: var(--ng-grey, #6A6A6A); font-size: .78rem; }

.hb-cat__n {
  position: absolute; top: 8px; right: 8px;
  background: var(--ng-gold, #C9A24B); color: var(--ng-navy, #0A0A0A);
  font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}

.hb-backbar { margin: 4px 0 14px; }

@media (max-width: 700px) {
  .hb-cats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hb-cat { padding: 8px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .hb-cat__img { width: 100%; height: 84px; }
  .hb-cat__b b { font-size: .85rem; }
}