/* Shop: /inventory/ and /inventory/item/. Loads after main.css and only uses its variables. */

.shop-lock, .shop-lock body { overflow: hidden; }

/* At least a screen tall: the cards arrive after the inventory loads, and a footer that starts on screen would jump (CLS). */
.shop { padding: 24px 0 64px; min-height: 100svh; }
@media (min-width: 1100px) { .shop { padding: 32px 0 96px; } }

/* Breadcrumbs */
.crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-16); color: var(--muted); }
@media (max-width: 1099px) { .crumbs { padding-right: 56px; } } /* clear of the floating hamburger */
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: '›'; margin: 0 10px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; padding: 8px 0; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

.shop-head { display: grid; gap: 8px; margin-bottom: 20px; }
.shop-head h1 { font-size: var(--fs-h2); text-transform: uppercase; overflow-wrap: anywhere; }
.shop-head p { color: var(--muted); max-width: 60ch; }

/* Search */
.shop-search { display: flex; gap: 8px; margin-bottom: 24px; max-width: 640px; }
.shop-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--coal); color: var(--ink); font: 400 var(--fs-16)/1 var(--font-body); }
.shop-search input:focus { outline: none; border-color: var(--brass); }
.shop-search .btn { padding: 12px 20px; }

/* Layout: one column on phones, sidebar + grid from 1000px */
.shop-layout { display: grid; gap: 24px; align-items: start; }
.shop-results { min-width: 0; }
@media (min-width: 1000px) { .shop-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 32px; } }

/* Filter panel: a bottom sheet on phones and tablets */
.shop-filters { background: var(--coal); border: 1px solid var(--line); border-radius: var(--radius); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: var(--fs-20); text-transform: uppercase; }
.drawer-x { width: 48px; height: 48px; border: 0; background: none; color: var(--ink); font-size: var(--fs-32); line-height: 1; cursor: pointer; border-radius: 999px; }
.drawer-x:hover { background: var(--steel); }
.drawer-body { padding: 4px 20px 16px; }
.drawer-foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--coal); }
.drawer-foot .btn { padding: 12px 8px; }

@media (max-width: 999px) {
  .shop-filters { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 88svh; display: flex; flex-direction: column;
    border-radius: 16px 16px 0 0; border-bottom: 0; transform: translateY(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
  .shop-filters.is-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .drawer-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; }
  .shop-backdrop { position: fixed; inset: 0; z-index: 65; background: rgb(0 0 0 / .6); }
  .shop-backdrop[hidden] { display: none; }
}
@media (min-width: 1000px) {
  .drawer-x, .drawer-foot [data-filters-done], .shop-backdrop, .shop-filter-btn { display: none !important; }
  .drawer-foot { grid-template-columns: 1fr; border-radius: 0 0 var(--radius) var(--radius); }
}

.facet { border: 0; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facet:last-child { border-bottom: 0; }
.facet legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font: 600 var(--fs-12)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.facet ul { clear: both; list-style: none; margin: 0; padding: 0; display: grid; }
.facet-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; color: var(--ink); }
.facet-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--red); flex: none; cursor: pointer; }
.facet-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.facet-opt small { color: var(--muted); font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.facet-opt.is-zero { color: var(--muted); opacity: .5; cursor: default; }
.facet-opt:not(.is-zero):hover span { text-decoration: underline; text-underline-offset: 3px; }
.facet > .facet-opt { clear: both; }

.shop-presets { clear: both; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.shop-preset { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 var(--fs-12)/1 var(--font-body); letter-spacing: .04em; cursor: pointer; }
.shop-preset[aria-pressed='true'] { background: var(--red); border-color: var(--red); }
.price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; color: var(--muted); }
.price-range input { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--steel); color: var(--ink); font: 400 var(--fs-16)/1 var(--font-body); }
.price-range input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* Sort + count bar, phones: sticks directly under the header bar (.mbar, 60px) and recedes and returns WITH it —
   html.shopbar-stuck and html.mbar-show come from the one scroll handler in js/site.js; transform only, the header's
   timing. Hidden, it sits wholly above the screen, so nothing is parked at the top edge (Safari fix, step 4). */
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
@media (max-width: 999px) {
  html.shopbar-stuck:not(.mbar-show) .shop-bar { transform: translateY(calc(-100% - 61px)); }
  .shop-bar { position: sticky; top: 60px; z-index: 20; transition: transform .28s cubic-bezier(.2, .8, .2, 1); margin-inline: calc(-1 * var(--pad)); padding: 8px var(--pad); background: var(--img-black); background-color: var(--black); border-bottom: 1px solid var(--line); }
}
.shop-filter-btn { padding: 10px 18px; min-height: 44px; }
.shop-count { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }
.shop-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-16); }
.shop-sort select { min-height: 44px; padding: 0 36px 0 14px; border-radius: 8px; border: 2px solid var(--line); background: var(--coal); color: var(--ink); font: 600 var(--fs-16)/1 var(--font-body); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; max-width: 100%; }
@media (max-width: 420px) { .shop-sort > span { display: none; } .shop-count { order: 3; width: 100%; } }

/* Active filter chips */
.shop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.shop-chips[hidden] { display: none; }
.shop-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--brass); background: rgb(200 162 90 / .1); color: var(--ink); font: 600 var(--fs-16)/1 var(--font-body); cursor: pointer; max-width: 100%; }
.shop-chip span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--steel); font-size: var(--fs-16); }
.shop-chip:hover span { background: var(--red); }
.shop-clear { min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--red-hot); font: 600 var(--fs-16)/1 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.shop-vape-note { display: grid; gap: 12px; margin-bottom: 16px; }
.shop-vape-note .age { justify-self: start; }
.shop-grid-note { grid-column: 1 / -1; }
.shop-grid-note .shop-vape-note { margin: 4px 0; }
.shop-loading { color: var(--muted); padding: 32px 0; min-height: 100svh; } /* holds the screen until the cards arrive, so nothing below it jumps (CLS) */

/* Product grid + cards */
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-grid[hidden] { display: none; }
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1800px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .shop-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-card { height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--coal); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.shop-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.shop-card:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.shop-card-img { aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.shop-card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.shop-card:hover .shop-card-img img { transform: scale(1.04); }
.shop-card-body { padding: 12px 14px 16px; display: grid; gap: 4px; align-content: start; }
@media (min-width: 700px) { .shop-card-body { padding: 16px 18px 20px; gap: 6px; } }
.shop-kicker { font: 600 var(--fs-12)/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.shop-card h3 { font-size: var(--fs-16); text-transform: uppercase; line-height: 1.2; overflow-wrap: anywhere; }
@media (min-width: 700px) { .shop-card h3 { font-size: var(--fs-20); } }
.shop-meta { color: var(--muted); font-size: var(--fs-16); }
.shop-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-badges:empty { display: none; }
.shop-badge { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--brass); color: var(--brass); font: 600 var(--fs-12)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.shop-price { margin-top: 6px; color: var(--muted); font-size: var(--fs-16); }
.shop-price b { color: var(--ink); font: 600 var(--fs-24)/1 var(--font-display); margin-right: 4px; }
@media (min-width: 700px) { .shop-price b { font-size: var(--fs-28); } }
.shop-price span { display: block; font-size: var(--fs-12); margin-top: 4px; letter-spacing: .04em; }
.shop-price-ask b { font-size: var(--fs-20); color: var(--brass); }
.shop-price-part span { margin: 0 0 4px; }
.shop-price-part b { display: block; font-size: var(--fs-16); line-height: 1.3; color: var(--brass); }
@media (min-width: 700px) { .shop-price-part b { font-size: var(--fs-16); } }

/* No-photo placeholder */
.shop-nophoto { width: 100%; height: 100%; aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px; text-align: center;
  background: radial-gradient(circle at 50% 40%, #2c2828, var(--steel) 70%); color: var(--muted); }
.shop-nophoto svg { width: 40%; max-width: 120px; color: var(--line); }
.shop-nophoto b { font: 600 var(--fs-20)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.shop-nophoto small { font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; }

/* Empty state */
.shop-empty { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 48px 16px; border: 1px dashed var(--line); border-radius: var(--radius); }
.shop-empty[hidden] { display: none; }
.shop-empty h1, .shop-empty h2 { font-size: var(--fs-h3); text-transform: uppercase; }
.shop-empty p { color: var(--muted); max-width: 48ch; }
.shop-empty-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.shop-fine { margin-top: 32px; color: var(--muted); font-size: var(--fs-12); max-width: 72ch; }

/* ---------- Item page ---------- */
.item { display: grid; gap: 24px; }
.item[hidden] { display: none; }
@media (min-width: 900px) { .item { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .item-details { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .item { gap: 56px; } }
.item-gallery { display: grid; gap: 12px; min-width: 0; }
.item-main { aspect-ratio: 4 / 3; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.item-main img { width: 100%; height: 100%; object-fit: contain; }
.item-thumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; }
.item-thumbs[hidden] { display: none; }
.item-thumbs button { width: 88px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; }
.item-thumbs button[aria-pressed='true'] { border-color: var(--red); }
.item-buy { display: grid; gap: 12px; align-content: start; min-width: 0; }
.item-buy h1 { font-size: var(--fs-h2); text-transform: uppercase; overflow-wrap: anywhere; }
@media (min-width: 1100px) { .item-buy h1 { font-size: var(--fs-44); } }
.item-price { padding: 16px 0; border-block: 1px solid var(--line); display: grid; gap: 4px; }
.item-price-main { font: 600 var(--fs-44)/1 var(--font-display); }
.item-price-main small { font: 400 var(--fs-16)/1 var(--font-body); color: var(--muted); }
.item-price-main.item-price-part { font-size: var(--fs-24); }
.item-price-sub a { color: var(--brass); text-underline-offset: 3px; }
.item-price-sub { color: var(--muted); }
.item-stock { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #9be38f; }
.item-stock .dot { width: 10px; height: 10px; border-radius: 50%; background: #5fd04a; box-shadow: 0 0 8px #5fd04a; flex: none; }
.item-stock .dot.is-out { background: var(--muted); box-shadow: none; }
.item-ctas { display: grid; gap: 8px; margin-top: 4px; }
.item-ctas .btn, .item-ctas .dir, .item-ctas .dir > * { width: 100%; }
.item-ctas .dir-opts { display: grid; grid-template-columns: 1fr 1fr; }
.item-ctas .dir-opts[hidden] { display: none; }
@media (min-width: 600px) and (max-width: 899px) { .item-ctas { grid-template-columns: 1fr 1fr; } .item-ctas .btn-call { grid-column: 1 / -1; } }
.item-notices { display: grid; gap: 12px; margin-top: 8px; }
.item-notices .age { justify-self: start; }
.item-notice { display: grid; gap: 8px; padding: 16px; border-left: 4px solid var(--red); background: var(--coal); border-radius: 0 8px 8px 0; color: var(--muted); }
.item-notice b { color: var(--ink); }
.item-notice a { color: var(--ink); text-underline-offset: 3px; }
.item-details { display: grid; gap: 16px; max-width: 760px; }
.item-details h2, .item-related h2 { font-size: var(--fs-h3); text-transform: uppercase; }
.item-specs { width: 100%; border-collapse: collapse; }
.item-specs th, .item-specs td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.item-specs th { width: 40%; color: var(--muted); font-weight: 400; padding-right: 16px; }
.item-desc { color: var(--muted); max-width: 64ch; }
.item-related { margin-top: 56px; }
.item-related[hidden] { display: none; }
.item-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.item-related-head a { color: var(--red-hot); font-weight: 600; text-underline-offset: 3px; }
.item-missing { margin-top: 24px; }

/* Phones, /inventory/: a bottom shop bar (search + Filters) replaces the Call/Directions bar. It behaves like the call
   bar (js/site.js): away on scrolling down, back on scrolling up, hidden while the menu or the filter drawer is open,
   kept while its search has focus. Pinned at the bottom edge, so it is solid with a flat background-color (Safari fix,
   step 5) and no backdrop-filter. The input is 16px so focusing it does not zoom iOS. While the keyboard is up,
   inventory.js lifts the bar onto the keyboard (visualViewport). Item pages keep the Call/Directions bar. */
.shopbar { display: none; }
@media (max-width: 1099px) {
  .shop-list .callbar { display: none; }
  .shop-bar .shop-filter-btn { display: none; }
  .shopbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--img-black); background-color: var(--black); border-top: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s .2s; }
  .shopbar.show { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s; }
  .shopbar-search { flex: 1; min-width: 0; display: flex; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; background: var(--coal); }
  .shopbar-search:focus-within { border-color: var(--brass); }
  .shopbar input { flex: 1; min-width: 0; min-height: 48px; padding: 0 0 0 18px; border: 0; background: transparent; color: var(--ink); font: 400 var(--fs-16)/1.2 var(--font-body); outline: none; }
  .shopbar input::placeholder { color: var(--muted); }
  .shopbar input::-webkit-search-cancel-button { filter: invert(1); }
  .shopbar-search button { flex: none; width: 48px; display: grid; place-items: center; border: 0; background: transparent; color: var(--brass); cursor: pointer; }
  .shopbar-search button svg { width: 20px; height: 20px; }
  .shopbar-filters { flex: none; min-height: 48px; padding: 10px 16px; }
  .shopbar-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 700 var(--fs-12)/22px var(--font-body); text-align: center; }
  .shopbar-n[hidden] { display: none; }
}
@media (min-width: 1000px) { .shopbar-filters { display: none; } }

/* Desktop (>= 1100px), like Amazon and Newegg: the search, count and sort are a full-width subheader pinned under the
   header bar (flat background-color, no backdrop-filter), so the search box is always in reach. The filter sidebar pins
   under both and scrolls on its own (overscroll contained); the results scroll with the page. The search row under the
   title and the results bar's count/sort give way to the subheader. Phones and tablets keep their own bars. */
.shop-sub { display: none; }
@media (min-width: 1100px) {
  :root { --sub: 72px; }
  .shop-search, .shop-bar { display: none; }
  .shop-sub { display: block; position: sticky; top: var(--head); z-index: 40; height: var(--sub); margin-bottom: 24px; background-color: var(--coal); border-block: 1px solid var(--line); }
  .shop-sub-row { height: 100%; display: flex; align-items: center; gap: 24px; }
  .shop-sub-search { flex: 1; max-width: 720px; position: relative; display: flex; align-items: center; }
  .shop-sub-search svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
  .shop-sub-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px 0 46px; border-radius: 999px; border: 2px solid var(--line); background: var(--black); color: var(--ink); font: 400 var(--fs-16)/1 var(--font-body); }
  .shop-sub-search input:focus { outline: none; border-color: var(--brass); }
  .shop-sub .shop-count { margin: 0 0 0 auto; white-space: nowrap; }
  .shop-filters { position: sticky; top: calc(var(--head) + var(--sub) + 16px); max-height: calc(100vh - var(--head) - var(--sub) - 32px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .shop-filters::-webkit-scrollbar { width: 8px; }
  .shop-filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
  .shop-filters::-webkit-scrollbar-track { background: transparent; }
  .shop-filters .drawer-foot { position: sticky; bottom: 0; }
}