/* Tyne packaging catalog - layout system for /catalog.
   Loaded after /styles.css (fonts + reset). Scoped under .catalog-page.
   Theme is a 0..4 brightness ramp on body[data-theme]; all surfaces/text are
   variable-driven. Dark stops are warm neutral charcoals (no blue cast) so
   product photos and the green accent read naturally. */

.catalog-page {
  /* Light (default): white marketplace with a chocolate/caramel chrome */
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f7f2e9;
  --c-hair: #e7ddcd;        /* slightly stronger/visible card lines */
  --c-ink: #221a13;
  --c-mut: #77685c;
  --c-mut-2: #ab9d8f;
  --c-tile: #ffffff;
  --c-btn: #3a1f0e;
  --c-btn-ink: #ffffff;
  --c-choc: #3a1f0e;
  --c-yellow: #ffb217;
  --c-purple: #7c3aed;
  --c-green: #12a150;
  --c-green-ink: #ffffff;
  --c-header-h: 54px;
  --r: 6px;    /* cards */
  --r-sm: 4px; /* buttons, inputs */
  --r-xs: 3px; /* badges, swatches */
  --side-w: 330px;   /* filter column width (user-resizable) */
  --card-min: 172px; /* min product-card width; grid auto-fills columns (shrinking the sidebar adds a 7th) */
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font, "Hanken Grotesk", sans-serif);
  min-height: 100vh;
  transition: background-color .35s ease, color .35s ease;
}
/* smooth every surface when the brightness slider moves */
.cat-header, .cat-side, .cat-side h2, .f-reco, .f-group-title, .f-row, .f-opt,
.p-tile, .p-name, .p-no, .p-spec, .p-seller, .p-price, .p-unit, .p-priceRow, .p-cust,
.cat-search input, .sort-btn, .filters-btn, .sort-menu, .f-price input, .f-clear,
.cat-signup, .cat-count, .cat-notice, .chip, .cat-chips, .cart-drawer, .cart-fab,
.p-getbtn, .p-qty, .q-btn, .q-val, .p-check-in {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
/* dark mode removed (v12): the light palette is the only palette */

.catalog-page * { box-sizing: border-box; }
/* note: styles.css already sets `a { color: inherit; text-decoration: none }` -
   do not re-scope it here or it out-specifies the component classes below */
.catalog-page button { font-family: inherit; }

/* ---------- native-feel touch behavior ---------- */
.catalog-page button, .catalog-page select, .catalog-page a,
.p-card, .p-fastbar, .chip, .cart-fab {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cat-header, .cat-guide, .chip, .cart-fab, .p-fastbar, .cat-toolbar {
  user-select: none; -webkit-user-select: none;
}
@media (hover: none) {
  .p-fastbar:active, .kc-fastbar:active, .cart-fab:active, .cg-all:active, .cart-cta:active,
  .filters-btn:active, .sort-btn:active, .cat-theme:active, .chip .x:active {
    transform: scale(0.96);
  }
  .p-card:active { transform: scale(0.985); }
}
/* lock the page behind any open drawer */
.catalog-page.drawer-open, .catalog-page.cart-open { overflow: hidden; }

/* ---------- header: ONE solid chocolate bar, white pill search ---------- */
.cat-header {
  position: sticky; top: 0; z-index: 60;
  min-height: var(--c-header-h);
  background: var(--c-choc, #4b2e1e);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px;
  padding: 0 20px 0 24px;
}
.cat-logo {
  display: flex; align-items: center; gap: 2px;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 700; font-size: 17px; letter-spacing: 0.15em;
  color: #fff;
}
/* The logo is now the bottle+wordmark lockup (public/assets/brand/), so the
   font-size above no longer drives it -- height does. 13px puts the TYNE cap at
   11.35px against the 11.58px of the 17px text it replaced, so the wordmark
   stays the size it has always been. Integer px keeps the edges crisp. */
.cat-logo img { display: block; height: 13px; width: auto; }
/* search inside the header: a clean white pill on the brown */
.cat-header .cat-search { flex: 1 1 240px; max-width: 540px; margin: 0; }
.cat-header .cat-search input {
  height: 34px; background: #fff; color: #221a13;
  font-size: 14px; padding: 0 16px 0 40px;
  border: 0; border-radius: 999px;
}
.cat-header .cat-search input:focus { border: 0; box-shadow: 0 0 0 2px var(--c-yellow, #e8a33d), 0 0 0 4px rgba(255,178,23,.25); }
.cat-header .cat-search svg { color: #77685c; left: 15px; width: 16px; height: 16px; }
@media (max-width: 860px) {
  .cat-header { padding-bottom: 10px; }
  .cat-header .cat-search { flex: 1 1 100%; order: 10; max-width: none; }
}
.cat-header-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.cat-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: #fff; cursor: pointer; }
.cat-theme:hover { color: var(--c-yellow, #e8a33d); }
.cat-theme svg { width: 16px; height: 16px; }
.cat-header .cat-cartbtn { border: 0; background: transparent; color: #fff; }
.cat-header .cat-cartbtn:hover { color: var(--c-yellow, #e8a33d); }
.cat-navlinks { display: flex; align-items: center; gap: 18px; }
.cat-navlinks a {
  display: inline-flex; align-items: center; height: 28px;
  /* the 2px underline sits outside the flex centering; pad the top to rebalance
     so the text midline matches the 34px icon buttons beside these links */
  padding-top: 2px;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap;
  color: rgba(255,255,255,.8); border-bottom: 2px solid transparent;
}
.cat-navlinks a:hover, .cat-navlinks a[aria-current="page"] { color: var(--c-yellow, #e8a33d); }
.cat-signin, .cat-signup {
  display: inline-flex; align-items: center; height: 28px;
  padding-top: 2px;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap;
  color: rgba(255,255,255,.85); border-bottom: 2px solid transparent;
}
.cat-signup { color: #fff; border-bottom-color: var(--c-yellow, #e8a33d); }
.cat-signin:hover, .cat-signup:hover { color: var(--c-yellow, #e8a33d); }

/* ---------- shell ---------- */
.cat-shell { position: relative; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: start; }
/* draggable divider to resize the filter column */
.cat-resize { position: absolute; top: 0; bottom: 0; left: var(--side-w); width: 10px; transform: translateX(-5px); cursor: col-resize; z-index: 55; }
.cat-resize::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .12s ease; }
.cat-resize:hover::before, .cat-resize.active::before { background: var(--c-green); }

/* ---------- sidebar ---------- */
.cat-side {
  position: sticky; top: var(--c-header-h);
  height: calc(100vh - var(--c-header-h));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 26px 26px 60px 30px;
  border-right: 1px solid var(--c-hair);
  scrollbar-width: thin; scrollbar-color: var(--c-mut-2) transparent;
}
.cat-side::-webkit-scrollbar { width: 5px; }
.cat-side::-webkit-scrollbar-thumb { background: var(--c-mut-2); border-radius: 99px; }
.side-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.cat-side h2 {
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 0; color: var(--c-ink);
}
.side-collapse {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  background: none; border: 1px solid var(--c-hair); border-radius: var(--r-sm);
  color: var(--c-mut); cursor: pointer;
}
.side-collapse svg { width: 16px; height: 16px; }
.side-collapse:hover { color: var(--c-green); border-color: var(--c-green); }
/* whole-column collapse is a desktop concept; on mobile the sidebar is a drawer.
   NOTE: the shell must become a SINGLE track. With .cat-side display:none the
   main column auto-places into the first track, so leaving two tracks put all
   content into a 0-width column (the everything-squished-left bug). */
@media (min-width: 1025px) {
  .catalog-page.side-collapsed .cat-shell { grid-template-columns: minmax(0, 1fr); }
  .catalog-page.side-collapsed .cat-side,
  .catalog-page.side-collapsed .cat-resize { display: none; }
}

/* prominent Recommended Use block */
.f-reco {
  margin: 0 0 20px; padding: 12px 10px 8px;
  background: var(--c-surface-2); border: 1px solid var(--c-hair); border-radius: var(--r);
}
.f-reco-title {
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-green); margin-bottom: 8px;
}
.f-reco .f-opt { min-height: 34px; font-size: 0.85rem; font-weight: 600; color: var(--c-ink); }
/* filter labels never wrap; long ones ellipsize so checkboxes always stay visible */
.f-row .lbl, .f-acc-head .lbl, .f-opt, .f-opt .lbl { white-space: nowrap; }
.f-row .lbl, .f-acc-head .lbl { min-width: 0; overflow: hidden; }

.f-group-title {
  margin: 22px 0 4px; padding-top: 18px;
  border-top: 1px solid var(--c-hair);
  font-size: 0.92rem; font-weight: 600; color: var(--c-mut);
}
.f-row, .f-acc-head {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 6px 0;
  background: none; border: 0; cursor: pointer;
  font-size: 0.95rem; font-weight: 600; color: var(--c-ink);
  text-align: left;
}
.f-row .f-ic, .f-acc-head .f-ic { width: 20px; height: 20px; color: var(--c-mut); flex: 0 0 auto; }
.f-row .f-ic svg, .f-acc-head .f-ic svg { width: 100%; height: 100%; }
.f-row .lbl, .f-acc-head .lbl { flex: 1; display: flex; align-items: baseline; gap: 6px; }
.f-count { font-size: 0.85rem; font-weight: 500; color: var(--c-mut-2); }
.f-check {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: 0 0 auto;
  border: 1.5px solid var(--c-mut-2); border-radius: var(--r-xs);
  background: var(--c-surface); cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background .1s ease, border-color .1s ease;
}
.f-check:hover { border-color: var(--c-green); }
.f-check:checked { background: var(--c-green); border-color: var(--c-green); }
.f-check:checked::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.f-flag { width: 21px; height: 14px; border-radius: var(--r-xs); overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(128,128,128,.28) inset; }
.f-flag svg, .f-flag img { width: 100%; height: 100%; display: block; object-fit: cover; }
.f-acc-head .chev { width: 16px; height: 16px; color: var(--c-mut); transition: transform .18s ease; flex: 0 0 auto; }
.f-acc.open .chev { transform: rotate(90deg); }
.f-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.f-acc.open .f-acc-body { grid-template-rows: 1fr; }
.f-acc-body > div { overflow: hidden; }
.f-opts { padding: 2px 0 12px 32px; display: flex; flex-direction: column; }
.f-opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; cursor: pointer;
  font-size: 0.9rem; font-weight: 500; color: var(--c-ink);
}
.f-opt .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-opt.zero { opacity: 0.42; }
.f-swatch { width: 13px; height: 13px; border-radius: var(--r-xs); flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(128,128,128,.3) inset; }
.f-price { padding: 4px 0 14px 32px; display: flex; align-items: center; gap: 8px; }
.f-price input {
  width: 86px; padding: 8px 10px; font-family: inherit; font-size: 0.88rem;
  border: 1px solid var(--c-hair); border-radius: var(--r-sm); color: var(--c-ink); background: var(--c-surface);
}
.f-price input:focus { outline: none; border-color: var(--c-green); }
.f-price .dash { color: var(--c-mut-2); }
.f-price .apply {
  padding: 8px 14px; font-size: 0.82rem; font-weight: 700;
  background: var(--c-btn); color: var(--c-btn-ink); border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.f-clear {
  margin-top: 20px; width: 100%;
  padding: 11px; font-size: 0.88rem; font-weight: 700;
  background: none; border: 1px solid var(--c-hair); border-radius: var(--r-sm);
  color: var(--c-ink); cursor: pointer;
}
.f-clear:hover { border-color: var(--c-ink); }

/* ---------- main column ---------- */
.cat-main { padding: 26px 34px 90px; min-width: 0; }
.cat-search { position: relative; }
.cat-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-green); }
.cat-search input {
  width: 100%; height: 54px; padding: 0 18px 0 50px;
  font-family: inherit; font-size: 1rem; color: var(--c-ink);
  border: 1px solid var(--c-hair); border-radius: var(--r); background: var(--c-surface);
}
.cat-search input::placeholder { color: var(--c-mut); font-style: italic; }
.cat-search input:focus { outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 20%, transparent); }
/* keyboard users get visible focus */
.catalog-page :focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

/* ---------- skeleton loaders ---------- */
.sk {
  border-radius: var(--r);
  background: linear-gradient(100deg, var(--c-surface-2) 40%, var(--c-hair) 50%, var(--c-surface-2) 60%);
  background-size: 200% 100%;
  animation: sk-sweep 1.3s ease-in-out infinite;
}
.sk-card { height: 320px; }
@keyframes sk-sweep { from { background-position: 120% 0; } to { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ---------- "covered by a kit in your cart" state on cards ---------- */
/* whole-cart cap reached: every unpicked bar flips to a quiet full-state notice
   (body.cart-full is toggled by cart.js when unitCount hits MAX_UNITS) */
.cart-full .p-card:not(.selected):not(.in-kit) .p-fastbar,
.cart-full .kit-card:not(.selected) .kc-fastbar { cursor: default; filter: saturate(.55) brightness(.97); }
.cart-full .p-card:not(.selected):not(.in-kit) .p-fastbar .fb-lbl,
.cart-full .p-card:not(.selected):not(.in-kit) .p-fastbar .fb-box,
.cart-full .p-card:not(.selected):not(.in-kit) .p-fastbar .fb-ic,
.cart-full .kit-card:not(.selected) .kc-fastbar .fb-lbl,
.cart-full .kit-card:not(.selected) .kc-fastbar .fb-box { display: none; }
.cart-full .p-card:not(.selected):not(.in-kit) .p-fastbar::before,
.cart-full .kit-card:not(.selected) .kc-fastbar::before { content: "20/20 samples selected"; font-weight: 700; letter-spacing: 0.04em; }
/* over-select feedback: the drawer opens and the units counter flashes red */
#cartUnits { display: inline-block; transition: color .2s ease; }
#cartUnits.cap-hot { color: #d1442f; font-weight: 800; animation: cap-hot .5s ease 3; }
@keyframes cap-hot { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { #cartUnits.cap-hot { animation: none; } }

.p-card.in-kit .p-fastbar { cursor: default; justify-content: center; }
.p-card.in-kit .p-fastbar .fb-lbl,
.p-card.in-kit .p-fastbar .fb-box,
.p-card.in-kit .p-fastbar .fb-ic { display: none; }
.p-card.in-kit .p-fastbar::before { content: "In your kit"; font-weight: 700; letter-spacing: 0.04em; }

/* kit line in the cart drawer */
.cart-item.cart-kit .ci-name { color: var(--c-green); }

/* vertical hues live OFF the product tiles (user call): kit cards + sidebar dots */
:root { --hue-supp: #2f6bc4; --hue-beauty: #b34d8c; --hue-food: #c2632a; --hue-neutral: #4a4f4a; }
.f-huedot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
/* small product thumb on Type filter options (replaces the old image rail) */
.f-thumb { width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid var(--c-hair); border-radius: var(--r-xs); overflow: hidden; background: #fff; }
.f-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- launch kit row (above the grid) ---------- */
.kit-row { margin: 0 0 22px; }
.kit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.kit-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-mut-2);
}
.kit-lead { margin-top: 5px; font-family: var(--font-display, "Gabarito", sans-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); }
.kit-help { background: none; border: 0; padding: 0 0 2px; border-bottom: 1px solid var(--c-hair); font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--c-mut); cursor: pointer; }
.kit-help:hover { color: var(--c-green); border-color: var(--c-green); }
.kit-cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px;
  overflow-x: auto; padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.kit-cards::-webkit-scrollbar { display: none; }
@media (min-width: 1180px) { .kit-cards { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.kit-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-hair); border-radius: 12px;
  color: var(--c-ink); cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.kit-card:hover { transform: translateY(-2px); border-color: var(--c-choc, #3a1f0e); box-shadow: 0 2px 4px rgba(43,23,8,.05), 0 18px 36px -18px rgba(43,23,8,.28); }
.kit-card .kc-name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display, "Gabarito", sans-serif); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--c-ink);
}
.kit-card .kc-name::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--hue-neutral); }
.kit-card.hue-supp .kc-name::before { background: var(--hue-supp); }
.kit-card.hue-beauty .kc-name::before { background: var(--hue-beauty); }
.kit-card.hue-food .kc-name::before { background: var(--hue-food); }
.kit-card .kc-thumbs { display: flex; }
.kit-card .kc-thumbs span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-surface); overflow: hidden; background: #fff; margin-left: -8px; box-shadow: 0 0 0 1px var(--c-hair); }
.kit-card .kc-thumbs span:first-child { margin-left: 0; }
.kit-card .kc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-card .kc-tag { font-size: 0.78rem; color: var(--c-mut); line-height: 1.5; min-height: 2.3em; }
.kit-card .kc-price { margin-top: auto; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.76rem; color: var(--c-ink); }
.kit-card .kc-price b { font-family: var(--font-display, "Gabarito", sans-serif); font-size: 0.9rem; }
.kit-card .kc-credit { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.68rem; color: var(--c-green); }
/* one-click kit add bar, mirrors the product cards' Quick Sample bar */
.kc-fastbar {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 10px -18px -16px; padding: 12px 14px;
  border-radius: 0 0 11px 11px;
  background: var(--c-green); color: var(--c-green-ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: filter .15s ease;
}
.kc-fastbar:hover { filter: brightness(1.1); }
.kit-card.selected { border-color: var(--c-green); box-shadow: 0 0 0 1px var(--c-green); }
.kit-card.selected .fb-box { background: #fff; }
.kit-card.selected .fb-box::after {
  content: ""; width: 4px; height: 8px;
  border: solid var(--c-green); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* help-me-choose modal */
.kit-modal-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); }
.kit-modal-overlay.show { display: block; }
.kit-modal {
  display: none; position: fixed; z-index: 95; inset: 0; margin: auto;
  width: min(94vw, 480px); height: fit-content; max-height: 90vh; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-hair); border-radius: var(--r); padding: 24px;
}
.kit-modal.show { display: block; }
.kit-modal h3 { margin: 0 0 6px; font-family: var(--font-display, "Gabarito", sans-serif); font-size: 1.15rem; color: var(--c-ink); }
.kit-modal p { margin: 0 0 14px; font-size: 0.86rem; color: var(--c-mut); line-height: 1.55; }
.kit-modal label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--c-ink); margin: 12px 0 6px; }
.kit-modal textarea, .kit-modal input {
  width: 100%; padding: 11px 12px; font-family: inherit; font-size: 16px; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-hair); border-radius: var(--r-sm);
}
.kit-modal textarea { min-height: 84px; resize: vertical; }
.kit-modal .km-row { display: flex; gap: 10px; margin-top: 16px; }
.kit-modal .km-row .grow { flex: 1; }
.kit-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  background: var(--c-green); color: #fff; border: 0; border-radius: var(--r-sm);
  font-family: var(--font-display, "Gabarito", sans-serif); font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.kit-btn.ghost { background: none; border: 1px solid var(--c-hair); color: var(--c-ink); }
.kit-msg { display: none; margin-top: 12px; padding: 3px 0 3px 12px; border-left: 2px solid transparent; font-size: 0.86rem; color: var(--c-ink); }
.kit-msg.show { display: block; }
.kit-msg.ok { border-left-color: var(--c-green); }
.kit-msg.bad { border-left-color: #d1442f; }

/* header cart icon */
.cat-cartbtn {
  position: relative; width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  background: none; border: 1px solid var(--c-hair); border-radius: var(--r-sm);
  color: var(--c-ink); cursor: pointer;
}
.cat-cartbtn svg { width: 17px; height: 17px; }
.cat-cartbtn:hover { border-color: var(--c-green); color: var(--c-green); }
.cat-cartbtn b {
  /* stays inside the button box so the sticky header never clips it */
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--c-green); color: #fff; font-size: 0.62rem; font-weight: 700;
}

/* real color-family swatch dots */
.p-dots { display: inline-flex; align-items: center; gap: 3px; margin-right: 7px; }
.p-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); flex: 0 0 auto; }

/* sleek hover lift (pointer devices only) */
@media (hover: hover) {
  .p-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .p-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(43,23,8,.05), 0 18px 36px -18px rgba(43,23,8,.28); }
}

/* announcement bar: one solid band, the sample economics pop */
.cat-notice {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 20px; padding: 8px 14px; text-align: center;
  background: var(--c-choc, #4b2e1e);
  font-size: 0.8rem; color: rgba(255,255,255,.92); line-height: 1.5;
}
.cat-notice .cn-seg { display: inline-flex; align-items: baseline; gap: 6px; }
.cat-notice b {
  color: var(--c-yellow, #e8a33d); font-weight: 700;
  font-family: var(--font-display, "Gabarito", sans-serif); font-size: 1.05em; letter-spacing: -0.01em;
}
.cn-plus { align-self: center; font-family: var(--font-display, "Gabarito", sans-serif); font-weight: 700; color: var(--c-yellow, #e8a33d); }
/* mobile: exactly one line — drop the reorder segment and the shipping aside */
@media (max-width: 680px) {
  .cat-notice .cn-plus, .cat-notice .cn-reorder, .cat-notice .cn-ship { display: none; }
  .cat-notice { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; font-size: 0.8rem; }
}

/* post-sign-in welcome toast (shown on the catalog after Google sign-in) */
.welcome-toast {
  position: fixed; top: calc(var(--c-header-h, 54px) + 14px); left: 50%; z-index: 96;
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 460px); padding: 13px 16px;
  background: var(--c-surface); border: 1px solid var(--c-hair); border-radius: 10px;
  box-shadow: 0 18px 44px -18px rgba(43, 23, 8, .35);
  color: var(--c-ink); font-size: 0.88rem; line-height: 1.45;
  opacity: 0; transform: translate(-50%, -8px);
  transition: opacity .25s ease, transform .25s ease;
}
.welcome-toast.show { opacity: 1; transform: translate(-50%, 0); }
.welcome-toast svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--c-green); }
.welcome-toast b { font-family: var(--font-display, "Gabarito", sans-serif); }
.welcome-toast button { margin-left: 4px; flex: 0 0 auto; width: 26px; height: 26px; border: 0; background: none; color: var(--c-mut-2); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.welcome-toast button:hover { color: var(--c-ink); }

/* minimalist favorites dropdown */
.fav-panel {
  position: fixed; z-index: 80; width: min(92vw, 300px);
  background: #fff; border: 1px solid var(--c-hair); border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); padding: 6px 0;
}
.fav-head { padding: 10px 16px 8px; font-family: var(--font-display, "Gabarito", sans-serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mut); }
.fav-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 16px; color: var(--c-ink); font-size: 0.88rem; }
.fav-row:hover { background: var(--c-surface-2); }
.fav-row .fav-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-row .fav-no { flex: 0 0 auto; font-size: 0.72rem; color: var(--c-mut-2); }
.fav-empty { display: block; padding: 10px 16px 12px; font-size: 0.84rem; color: var(--c-mut); }
a.fav-empty { color: var(--c-green); font-weight: 700; }
.fav-all { display: block; padding: 10px 16px; border-top: 1px solid var(--c-hair); margin-top: 4px; font-size: 0.8rem; font-weight: 700; color: var(--c-green); }

/* cart drawer: per-sample quantity stepper + cap note */
.ci-qty { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; }
.ci-qbtn {
  width: 24px; height: 24px; display: inline-grid; place-items: center;
  background: none; border: 1px solid var(--c-hair); border-radius: var(--r-xs);
  color: var(--c-ink); cursor: pointer; padding: 0;
}
.ci-qbtn svg { width: 12px; height: 12px; }
.ci-qbtn:hover:not(:disabled) { border-color: var(--c-green); color: var(--c-green); }
.ci-qbtn:disabled { opacity: 0.35; cursor: default; }
.ci-qval { min-width: 20px; text-align: center; font-family: var(--font-display, "Gabarito", sans-serif); font-weight: 700; font-size: 0.82rem; }
.cart-cap { padding: 10px 2px 2px 12px; border-left: 2px solid var(--c-green); font-size: 0.8rem; color: var(--c-mut); margin-top: 10px; }
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 20px; }
.cat-count { font-family: var(--font-display, "Gabarito", sans-serif); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: var(--c-ink); }
/* quiet speed cue beside the count */
.cat-fastship {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}
.cat-fastship .fs-bolt { width: 12px; height: 12px; flex: 0 0 auto; color: var(--c-green); }
/* super-subtle shine: a soft highlight band sweeps the label every few seconds */
.cat-fastship .fs-txt {
  color: var(--c-mut);
  background: linear-gradient(100deg,
    var(--c-mut) 42%,
    color-mix(in srgb, var(--c-mut) 45%, #fff) 50%,
    var(--c-mut) 58%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fs-shine 4.5s ease-in-out infinite;
}
@keyframes fs-shine {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0 0; }
}
@media (max-width: 860px) { .cat-toolbar { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) {
  .cat-fastship .fs-txt { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}
.cat-tools { display: flex; align-items: center; gap: 10px; position: relative; }
.sort-btn, .filters-btn, .side-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 0.9rem; font-weight: 600; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-hair); border-radius: var(--r-sm); cursor: pointer;
}
.sort-btn:hover, .filters-btn:hover, .side-toggle:hover { border-color: var(--c-ink); }
.sort-btn svg, .filters-btn svg, .side-toggle svg { width: 16px; height: 16px; }
.filters-btn { display: none; }
@media (max-width: 1024px) { .side-toggle { display: none; } }
.sort-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 196px; padding: 6px;
  background: var(--c-surface); border: 1px solid var(--c-hair); border-radius: var(--r);
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.4);
  display: none; flex-direction: column;
}
.sort-menu.open { display: flex; }
.sort-menu button {
  text-align: left; padding: 10px 12px; font-size: 0.9rem; font-weight: 500;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--c-ink);
}
.sort-menu button:hover { background: var(--c-surface-2); }
.sort-menu button.on { font-weight: 700; color: var(--c-green); }

/* ---------- grid + cards ---------- */
/* columns auto-fill by available width, so shrinking the filter column adds cards */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 20px 16px; }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.p-card {
  display: block; overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-hair); border-radius: var(--r);
  padding-bottom: 13px;
  box-shadow: 0 1px 2px rgba(43,23,8,.05);
  transition: background-color .35s ease, color .35s ease, box-shadow .16s ease, border-color .16s ease, transform .12s ease;
}
.p-card:hover { border-color: var(--c-mut); box-shadow: 0 2px 4px rgba(43,23,8,.05), 0 18px 36px -18px rgba(43,23,8,.28); transform: translateY(-2px); }
.p-card.selected { border-color: var(--c-green); box-shadow: 0 0 0 2px var(--c-green), 0 1px 2px rgba(43,23,8,.05); }
.p-card.selected:hover { box-shadow: 0 0 0 2px var(--c-green), 0 2px 4px rgba(43,23,8,.05), 0 18px 36px -18px rgba(43,23,8,.28); }
.p-card > *:not(.p-tile):not(.p-fastbar) { margin-left: 14px; margin-right: 14px; }
.p-tile {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--c-tile);
  border-bottom: 1px solid var(--c-hair);
}
.p-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.12); }
.p-svg, .p-svg svg { width: 100%; height: 100%; display: block; }
/* save-for-later heart on the tile */
.p-heart {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 30px; height: 30px; padding: 0;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,.92); border: 1px solid var(--c-hair); border-radius: 50%;
  color: var(--c-mut); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.p-heart svg { width: 15px; height: 15px; display: block; }
.p-heart:hover { color: #d1442f; border-color: #d1442f; transform: scale(1.08); }
.p-heart.on { color: #d1442f; border-color: #d1442f; }
.p-heart.on svg { fill: #d1442f; stroke: #d1442f; }
.p-heart.pop { animation: heart-pop .38s cubic-bezier(.22, 1, .36, 1); }
@keyframes heart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .p-heart.pop { animation: none; } }

.p-new {
  position: absolute; top: 9px; right: 9px;
  padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--c-yellow, #e8a33d); color: var(--c-choc, #4b2e1e);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
/* Quick Sample bar = one-click add/remove control */
.p-fastbar {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 12px;
  background: var(--c-green); color: var(--c-green-ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: filter .15s ease;
}
.p-fastbar:hover { filter: brightness(1.1); }
.p-fastbar .fb-ic { width: 13px; height: 13px; flex: 0 0 auto; display: inline-flex; }
.p-fastbar .fb-ic svg { width: 100%; height: 100%; display: block; }
.fb-box { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 4px; border: 2px solid rgba(255,255,255,.9); display: inline-grid; place-items: center; }
.p-card.selected .fb-box { background: #fff; }
.p-card.selected .fb-box::after { content: ""; width: 4px; height: 8px; border: solid var(--c-green); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.p-no { font-size: 0.82rem; color: var(--c-mut); letter-spacing: 0.01em; }
.p-name {
  margin-top: 3px; min-height: 2.56em;
  font-size: 0.98rem; font-weight: 600; color: var(--c-ink); line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-seller { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 6px; min-height: 1.2em; font-size: 0.78rem; color: var(--c-mut); white-space: nowrap; }
.p-seller .store { width: 13px; height: 13px; color: var(--c-mut-2); flex: 0 0 auto; }
.p-seller .store svg { width: 100%; height: 100%; display: block; }
.p-seller .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-seller .vf { display: inline-flex; align-items: center; gap: 2px; color: var(--c-green); font-weight: 700; flex: 0 0 auto; }
.p-seller .vf svg { width: 12px; height: 12px; }
.p-spec { margin-top: 6px; font-size: 0.82rem; color: var(--c-mut); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.9em; }
.p-lead { margin-top: 6px; font-size: 0.76rem; color: var(--c-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-price-block { margin-top: 9px; }
.p-price-block .pb-moq { font-family: var(--font-display, "Gabarito", sans-serif); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: var(--c-mut); padding-bottom: 6px; border-bottom: 1px solid var(--c-hair); white-space: nowrap; }
.p-price-block .pb-tier { margin-top: 7px; font-family: var(--font-display, "Gabarito", sans-serif); font-size: 0.9rem; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.p-price-block .pb-tier.pb-bulk { margin-top: 3px; font-size: 0.82rem; font-weight: 600; color: var(--c-green); }
.p-priceRow { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--c-hair); white-space: nowrap; overflow: hidden; }
.p-price { font-size: 1rem; font-weight: 700; color: var(--c-ink); }
.p-colors { display: flex; align-items: center; gap: 5px; margin-top: 8px; min-height: 1.15em; font-size: 0.78rem; color: var(--c-mut); white-space: nowrap; }
.p-cust-line { margin-top: 8px; min-height: 22px; }
.p-rainbow {
  width: 13px; height: 13px; border-radius: var(--r-xs); flex: 0 0 auto;
  background: conic-gradient(#f5d90a, #f97316, #ef4444, #d946ef, #6366f1, #0ea5e9, #22c55e, #f5d90a);
  box-shadow: 0 0 0 1px rgba(128,128,128,.24) inset;
}

/* ---------- empty / loading / sentinel ---------- */
.cat-empty { display: none; padding: 90px 20px; text-align: center; color: var(--c-mut); }
.cat-empty.show { display: block; }
.cat-empty h3 { color: var(--c-ink); font-size: 1.15rem; margin: 0 0 6px; }
.cat-empty button {
  margin-top: 16px; padding: 11px 22px; font-size: 0.9rem; font-weight: 700;
  background: var(--c-btn); color: var(--c-btn-ink); border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.cat-sentinel { height: 1px; }
.cat-loading { padding: 80px 0; text-align: center; color: var(--c-mut); font-size: 0.95rem; }

/* ---------- price per unit + attributes ---------- */
.p-unit { font-size: 0.76rem; font-weight: 500; color: var(--c-mut); }
.p-attr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; min-height: 20px; }
.p-cust { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-green); border: 1px solid color-mix(in srgb, var(--c-green) 45%, transparent); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* ---------- sample action row (select + qty + Get Sample) ---------- */
.p-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.p-check-in {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 21px; height: 21px; border: 1.5px solid var(--c-mut-2); border-radius: var(--r-xs);
  background: var(--c-surface); cursor: pointer; display: inline-grid; place-items: center;
}
.p-check-in:hover { border-color: var(--c-green); }
.p-check-in:checked { background: var(--c-green); border-color: var(--c-green); }
.p-check-in:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.p-qty { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--c-hair); border-radius: 999px; background: var(--c-surface); overflow: hidden; }
.q-btn { width: 24px; height: 27px; border: 0; background: none; color: var(--c-ink); font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.q-btn:hover { color: var(--c-green); }
.q-val { min-width: 18px; text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--c-ink); }
.p-getbtn {
  flex: 1 1 auto; height: 31px; padding: 0 10px;
  background: var(--c-btn); color: var(--c-btn-ink);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.p-getbtn:hover { filter: brightness(1.12); }

/* ---------- guided step filter + type icon rail ---------- */
.cat-guide { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 13px 14px; background: var(--c-surface-2); border: 1px solid var(--c-hair); border-radius: var(--r); }
.cat-guide:empty { display: none; }
.cg-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cg-lead { font-family: var(--font-display, "Gabarito", sans-serif); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-green); margin-right: 2px; }
.cg-step { display: inline-flex; align-items: center; gap: 7px; }
.cg-step label { font-size: 0.78rem; font-weight: 600; color: var(--c-mut); }
.cg-step select { font-family: inherit; font-size: 0.84rem; font-weight: 600; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-hair); border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; max-width: 190px; }
.cg-step select:focus { outline: none; border-color: var(--c-green); }
.cg-all { margin-left: auto; padding: 9px 16px; font-family: var(--font-display, "Gabarito", sans-serif); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--c-green); border: 0; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; }
.cg-all:hover { filter: brightness(1.08); }
/* icon rail */
.cg-rail { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cg-rail-track {
  flex: 1; min-width: 0; display: flex; gap: 8px; padding: 2px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cg-rail-track::-webkit-scrollbar { display: none; }
/* sleek boxless tiles: circular photo, hairline ring, tiny caps label */
.cg-tile {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 74px; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
}
.cg-tile.hide { display: none; }
.cg-tile-img {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: #fff; border: 1px solid var(--c-hair);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cg-tile:hover .cg-tile-img { border-color: var(--c-mut); transform: translateY(-1px); }
.cg-tile.on .cg-tile-img { border-color: var(--c-green); box-shadow: 0 0 0 2px var(--c-green); }
.cg-tile-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); display: block; }
.cg-tile-lb {
  max-width: 100%;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--c-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-tile.on .cg-tile-lb { color: var(--c-green); }
.cg-rail-arrow {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-hair); background: var(--c-surface); color: var(--c-ink);
  cursor: pointer; display: inline-grid; place-items: center;
}
.cg-rail-arrow:hover { border-color: var(--c-green); color: var(--c-green); }
.cg-rail-arrow svg { width: 16px; height: 16px; }
.cg-rail-arrow.hide { visibility: hidden; }

/* ---------- active-filter chips ---------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.cat-chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 6px 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-green) 15%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--c-green) 35%, transparent);
  color: var(--c-ink); font-size: 0.8rem; font-weight: 600;
}
.chip .x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--c-green) 30%, transparent); color: var(--c-ink); cursor: pointer; font-size: 0.72rem; line-height: 1; }
.chip .x:hover { background: var(--c-green); color: #fff; }
.chip.clear { background: none; border-style: dashed; border-color: var(--c-mut-2); color: var(--c-mut); cursor: pointer; padding: 5px 12px; }
.chip.clear:hover { color: var(--c-ink); border-color: var(--c-ink); }

/* ---------- sample cart ---------- */
.cart-fab {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 85;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--c-green); color: #fff;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 0.9rem; font-weight: 700; box-shadow: 0 10px 26px -8px rgba(18,161,80,.6);
}
.cart-fab svg { width: 18px; height: 18px; }
.cart-fab[hidden] { display: none; }
.cart-fab .cf-badge { display: none; }
/* small screens: compact icon-only bubble with a count badge, tucked lower */
@media (max-width: 1024px) {
  .cart-fab { width: 50px; height: 50px; padding: 0; justify-content: center; border-radius: 50%; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cart-fab svg { width: 21px; height: 21px; }
  .cart-fab .cf-txt { display: none; }
  .cart-fab .cf-badge {
    display: grid; place-items: center; position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--c-ink); color: #fff; font-size: 11px; font-weight: 700;
  }
}
.cart-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); }
.cart-overlay.show { display: block; }
.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 95;
  width: min(92vw, 384px); height: 100vh;
  background: var(--c-surface); border-left: 1px solid var(--c-hair);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .24s ease;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--c-hair); }
.cart-head h3 { font-family: var(--font-display, "Gabarito", sans-serif); font-size: 1.15rem; font-weight: 700; color: var(--c-ink); margin: 0; }
.cart-close { width: 30px; height: 30px; border: 1px solid var(--c-hair); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink); font-size: 1.1rem; cursor: pointer; }
/* guidance card, deliberately unlike the line-item rows below it */
.cart-note { margin: 12px 16px 2px; padding: 10px 12px; font-size: 0.78rem; line-height: 1.5; color: var(--c-mut); background: var(--c-surface-2); border-radius: 8px; }
.cart-note strong { color: var(--c-ink); }
.cart-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cart-empty { padding: 50px 20px; text-align: center; color: var(--c-mut-2); }
.cart-item { display: flex; gap: 10px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--c-hair); }
.cart-item .ci-body { flex: 1; min-width: 0; }
.cart-item .ci-name { font-size: 0.9rem; font-weight: 600; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item .ci-sub { font-size: 0.75rem; color: var(--c-mut); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item .ci-price { font-weight: 700; color: var(--c-ink); font-size: 0.9rem; white-space: nowrap; }
.cart-item .ci-rm { background: none; border: 0; color: #d1442f; cursor: pointer; font-size: 0.78rem; padding: 2px; transition: color .12s ease, transform .12s ease; }
.cart-item .ci-rm:hover { color: #a8321f; transform: scale(1.06); }
.cart-foot { padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-hair); }
.cart-line { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--c-mut); margin-bottom: 6px; }
.cart-line.total { font-weight: 700; color: var(--c-ink); font-size: 1rem; }
.cart-cta { width: 100%; margin-top: 12px; height: 46px; border: 0; border-radius: var(--r-sm); background: var(--c-green); color: #fff; font-family: var(--font-display, "Gabarito", sans-serif); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.cart-cta:hover { filter: brightness(1.08); }
.cart-clear { display: block; width: 100%; margin-top: 10px; padding: 10px; background: none; border: 1px solid var(--c-hair); border-radius: var(--r-sm); color: #d1442f; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.cart-clear:hover { border-color: #d1442f; color: #a8321f; }

/* ---------- mobile drawer ---------- */
.cat-overlay { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.5); }
@media (max-width: 1024px) {
  .cat-shell { grid-template-columns: 1fr; }
  .cat-resize { display: none; }
  .filters-btn { display: inline-flex; }
  .cat-side {
    position: fixed; left: 0; top: 0; z-index: 80;
    width: min(86vw, 366px); height: 100vh;
    background: var(--c-surface); border-right: 1px solid var(--c-hair);
    transform: translateX(-102%); transition: transform .22s ease;
  }
  .catalog-page.drawer-open .cat-side { transform: translateX(0); }
  .catalog-page.drawer-open .cat-overlay { display: block; }
  .cat-main { padding: 20px 18px 80px; }
  .cat-signup { padding: 0 18px; }
  .cat-header-right { gap: 12px; }
  .cat-themectl input[type=range] { width: 70px; }
  .cat-side { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) {
  /* select row becomes a tidy 2-col grid; the icon rail stays a touch-scroll strip */
  .cat-guide { padding: 12px; }
  .cg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cg-lead { grid-column: 1 / -1; margin-right: 0; }
  .cg-step { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
  .cg-step select { max-width: none; width: 100%; font-size: 16px; min-height: 44px; }
  .cg-all { grid-column: 1 / -1; margin-left: 0; min-height: 44px; }
  .cg-tile { width: 80px; }
  .cg-tile-img { width: 62px; height: 62px; }
  .cg-tile-lb { font-size: 0.62rem; }
  .cg-rail-arrow { display: none; }
  /* 16px inputs stop iOS zoom-on-focus */
  .f-price input { font-size: 16px; }
  /* comfortable touch targets */
  .p-fastbar { padding: 12px; }
  .cart-close { width: 40px; height: 40px; }
}
/* ---------- phone bottom action bar ---------- */
.cat-tabbar { display: none; }
@media (max-width: 720px) {
  .cat-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    background: var(--c-surface); border-top: 1px solid var(--c-hair);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(0,0,0,.05);
  }
  .cat-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 56px; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--c-mut);
  }
  .cat-tabbar button svg { width: 20px; height: 20px; }
  .cat-tabbar button.accent { color: var(--c-green); }
  .cat-tabbar b { font-weight: 700; color: var(--c-green); }
  /* cart cell: count rides the icon as a bubble */
  .cat-tabbar .tb-ic { position: relative; display: inline-flex; }
  .cat-tabbar .tb-badge {
    position: absolute; top: -6px; right: -10px;
    display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--c-green); color: #fff; font-size: 10px;
  }
  /* the tab bar replaces the FAB and the toolbar buttons on phones */
  .cart-fab { display: none; }
  .filters-btn, .sort-btn { display: none; }
  .cat-main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* sort menu docks above the tab bar with bigger touch rows */
  .sort-menu { position: fixed; left: 14px; right: 14px; top: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 66; }
  .sort-menu button { padding: 14px 12px; font-size: 1rem; }
}

@media (max-width: 680px) {
  .cat-lang, .cat-signin, .cat-navlinks { display: none; }
  .cat-count { font-size: 1.15rem; }
  /* compact header */
  .catalog-page { --c-header-h: 41px; }
  .cat-header { padding-left: 14px; }
  .cat-logo { font-size: 16px; letter-spacing: 0.13em; }
  .cat-logo img { height: 12px; } /* matches the 16px text's 10.9px cap */
  .cat-header-right { gap: 10px; }
  .cat-theme { width: 36px; height: 36px; }
  .cat-signup { padding: 0 12px; font-size: 12px; }
  /* search */
  .cat-search input { height: 44px; padding-left: 44px; }
  .cat-search svg { left: 14px; width: 18px; height: 18px; }
  /* meta row */
  .cat-notice { font-size: 0.74rem; padding: 6px 12px; }
  .cat-main { padding: 16px 14px 90px; }
  .cat-grid { gap: 14px 10px; }
}

/* ---------- site footer (catalog + about) ---------- */
.cat-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 26px; padding: 26px 24px;
  border-top: 1px solid var(--c-hair);
  background: var(--c-bg);
}
.cat-footer a, .cat-footer span {
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-mut);
}
.cat-footer a:hover { color: var(--c-ink); }
.cat-footer .cf-logo { color: var(--c-ink); letter-spacing: 0.24em; font-size: 0.8rem; font-weight: 700; }
@media (max-width: 720px) {
  .cat-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- motion layer ----------
   1) Cross-document view transitions: this stylesheet loads on every page, so
      same-origin navigations (catalog <-> item <-> kit <-> about ...) get a
      subtle crossfade in Chrome 126+ / Safari 18.2+; elsewhere it's a no-op.
   2) Card entrance: a small fade-rise that also runs automatically on cards
      the infinite scroll appends. Content is never gated on JS classes. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }
/* phones: the new page settles up into place instead of a flat crossfade */
@media (max-width: 720px) {
  ::view-transition-old(root) { animation: vt-leave 0.16s ease both; }
  ::view-transition-new(root) { animation: vt-enter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes vt-leave { to { opacity: 0; } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(14px); } }

@keyframes card-in {
  from { opacity: 0; transform: translateY(6px); }
}
.p-card, .kit-card { animation: card-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .p-card, .kit-card { animation: none; }
}