/* =========================================================================
   Napoli Appliances - /shop storefront (filters + results)
   Loaded after style.css + home.css; reuses their tokens and .btn / .badge.
   ========================================================================= */

.shop { padding-top: 18px; padding-bottom: 96px; }
.shop__head { }
.crumbs { font-size: 12px; color: var(--mist); }
.crumbs a { color: var(--mist); }
.crumbs a:hover { color: var(--leaf); }
.crumbs span { margin: 0 6px; }
/* Title, count and sort share one row. They were three stacked blocks with a
   rule between them, which pushed the appliance picker most of a screen down
   before anyone could use it. */
.shop__titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}
.shop__title {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pine);
  margin: 0;
}
.shop__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.shop__count { font-size: 14px; color: var(--mist); }
.shop__bar-right { display: flex; align-items: center; gap: 12px; }
.shop__filter-open { padding: 9px 16px; font-size: 13px; }
.shop__filter-open { display: none; }
.shop__filter-n {
  background: var(--leaf); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 4px;
}
.shop__sort select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 28px 7px 11px;
  font-size: 13px;
  color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B7B72' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none; appearance: none;
}

/* -------------------------------------------------------- active chips */
.chips-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.chip-x {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pine);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-x:hover { border-color: var(--leaf); color: var(--leaf); }
.chip-x span { font-size: 14px; line-height: 1; }
.chips-clear { font-size: 12px; font-weight: 600; color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------- 2-col layout */
.shop__grid {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 36px;
  margin-top: 24px;
  align-items: start;
}
.shop__results { min-width: 0; }
.shop__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1180px) { .shop__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .shop__cards { grid-template-columns: 1fr; } }

.shop__empty { border: 1px solid var(--line); border-radius: var(--radius); padding: 56px 24px; text-align: center; }
.shop__empty h2 { font-size: 1.25rem; font-weight: 700; color: var(--pine); }
.shop__empty p { color: var(--mist); margin: 8px 0 18px; font-size: 14px; }

/* -------------------------------------------------------------- filters */
/* The filter form is a bar inside the top menu now, not a sidebar column.
   The old rules gave it a fixed max-height with overflow, which is what put a
   scrollbar along the bottom of the panel. */
.filters {
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(230px, 1.1fr) minmax(250px, 1.4fr) minmax(200px, 1.1fr) auto auto;
  gap: 12px 22px;
  align-items: start;
  padding: 12px 0 2px;
}
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
/* Phones: two columns so the row stays a row, not a page. */
@media (max-width: 900px) {
  .filters { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .filters .fgroup__body { gap: 4px 12px; }
  .filters__actions { grid-column: 1 / -1; }
}
.filters__head { display: none; }
.fgroup { border-bottom: 1px solid var(--line); padding: 14px 0; }
.fgroup:first-of-type { padding-top: 0; }
.fgroup legend { width: 100%; padding: 0; }
.fgroup__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); margin-bottom: 8px; }
.fgroup__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.fgroup__chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 180ms var(--ease-hover); }
.fgroup--collapsed .fgroup__chev { transform: rotate(-135deg); }
.fgroup__body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.fgroup--collapsed .fgroup__body { display: none; }
.fgroup__search { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 13px; }

.fopt { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); cursor: pointer; line-height: 1.3; }
.fopt input { width: 15px; height: 15px; accent-color: var(--leaf); flex-shrink: 0; }
.fopt:hover { color: var(--leaf); }
.fopt--solo { margin-top: 4px; }
.swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }

/* price range */
.price-range { padding-top: 4px; }
.price-track { position: relative; height: 26px; }
.price-fill { position: absolute; top: 11px; height: 4px; background: var(--leaf); border-radius: 999px; }
.price-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: var(--line); border-radius: 999px; }
.price-slider {
  position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.price-slider::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 999px; background: #fff; border: 2px solid var(--leaf); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.price-slider::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 999px; background: #fff; border: 2px solid var(--leaf); cursor: pointer; }
.price-inputs { display: flex; gap: 10px; margin-top: 10px; }
.price-inputs label { flex: 1; font-size: 11px; color: var(--mist); display: flex; flex-direction: column; gap: 3px; }
.price-inputs input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%; }

.filters__actions { display: flex; gap: 10px; padding: 18px 0 8px; }
.filters__actions .btn { flex: 1; padding: 11px; font-size: 13px; }

/* ---------------------------------------------------- product card (grid) */
.scard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-hover) var(--ease-hover), transform var(--dur-hover) var(--ease-hover);
}
.scard:hover { box-shadow: 0 14px 34px rgba(18,56,50,0.1); transform: translateY(-2px); }
.scard__media { position: relative; aspect-ratio: 4/3; background: var(--paper); display: block; }
.scard__viz { position: absolute; inset: 0; }
.scard__viz .viz { border-radius: 0; }
.scard__viz .viz svg { transition: transform 500ms var(--ease-hover); }
.scard:hover .scard__viz .viz svg { transform: scale(1.04); }
.scard__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge--new { background: var(--pine); color: #fff; }
.badge--best { background: var(--brass); color: #fff; }
.scard__wish {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.92); border: 1px solid var(--line); color: var(--pine);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.scard__wish:hover { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.scard__wish[aria-pressed="true"] { background: var(--leaf); color: #fff; border-color: var(--leaf); }

.scard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.scard__brand { color: var(--brass); }
.scard__name {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.scard__name:hover { color: var(--leaf); }
.scard__rating { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mist); }
.scard__stars { color: var(--brass); letter-spacing: 1px; }
.scard__meta { font-size: 12px; color: var(--mist); }
.scard__price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.scard__price ins { text-decoration: none; font-weight: 700; color: var(--leaf); font-size: 15px; }
.scard__price del { color: var(--mist); font-size: 12px; }
.scard__price--plain { font-weight: 700; color: var(--ink); font-size: 15px; }
.scard__actions { display: flex; gap: 8px; margin-top: 10px; }
.scard__actions .btn { flex: 1; padding: 9px 10px; font-size: 12px; }
.scard__actions .btn-outline { flex: 0 0 auto; }

/* -------------------------------------------------- "best paired with" */
.paired-cell { display: flex; flex-direction: column; }
.paired-reason {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(168,124,52,0.1);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------- mobile drawer */
.filter-scrim { display: none; }
@media (max-width: 900px) {
  .shop__grid { grid-template-columns: 1fr; }
}

/* results swap in place - a brief dim rather than a page flash */
.shop__results { transition: opacity 160ms var(--ease-hover); }
.shop__results.is-busy { opacity: .45; pointer-events: none; }

/* capacity bands are grouped by unit - label each group */
.fgroup__sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 8px 0 -2px;
}
.fgroup__sub:first-child { margin-top: 0; }

/* category rows that unfold their own refinements, like the package builder */
.fcat { border-radius: 8px; }
.fcat + .fcat { margin-top: 2px; }
.fcat.is-on { background: rgba(44,107,84,0.05); padding: 6px 8px 8px; margin-left: -8px; margin-right: -8px; }
.fcat__refine { margin: 8px 0 2px 24px; display: grid; gap: 9px; }
.fcat__refine[hidden] { display: none; }
.fcat__label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 5px;
}
.fcat__opts { display: flex; flex-wrap: wrap; gap: 5px; }
.fcat__opts .szopt { position: relative; cursor: pointer; }
.fcat__opts .szopt input { position: absolute; opacity: 0; pointer-events: none; }
.fcat__opts .szopt span {
  display: block; border: 1px solid var(--line); background: #fff;
  border-radius: 6px; padding: 4px 9px; font-size: 11.5px; font-weight: 700;
  color: var(--mist); font-variant-numeric: tabular-nums;
}
.fcat__opts .szopt:hover span { border-color: var(--leaf); color: var(--leaf); }
.fcat__opts .szopt.is-on span { background: var(--pine); border-color: var(--pine); color: #fff; }

/* ===========================================================================
   Appliance picker. Leads the page, styled to match the package builder, and
   behaves as an accordion: the appliance being specified is the only one
   expanded, and the others fold down to the refinements already chosen.
   =========================================================================== */
.picker { padding: 2px 24px 24px; max-width: var(--shell); }
.picker__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 20px; flex-wrap: wrap; margin-bottom: 12px;
}
.picker__title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--pine); margin: 0;
}
.picker__hint { font-size: 13px; color: var(--mist); }

.picker__grid {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 12px;
  align-items: start;
}

.pcell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.pcell:hover { border-color: var(--sage); }
.pcell.is-on { border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf) inset; }
/* Deliberately no size change: the refinements live in a strip below the grid,
   so selecting a card never reflows the row or moves the cards around it. */
.pcell.is-editing { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf) inset; }

.pcell__head {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.pcell.is-on .pcell__head { background: rgba(44,107,84,0.05); }
.pcell__head input { position: absolute; opacity: 0; pointer-events: none; }
.pcell__viz { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; background: var(--paper); display: block; }
.pcell__viz .viz { border-radius: 0; height: 100%; }
.pcell__viz .viz svg { width: 68%; height: 68%; }
.pcell__text { min-width: 0; }
.pcell__text strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pcell__text em {
  display: block; font-style: normal; font-size: 11px; color: var(--mist);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcell__n {
  font-size: 11px; font-weight: 700; color: var(--sage);
  background: rgba(127,169,143,0.16); border-radius: 999px;
  min-width: 20px; height: 19px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 6px;
}
.pcell.is-on .pcell__n { display: none; }
.pcell__tick {
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--leaf); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.pcell.is-on .pcell__tick { display: inline-flex; }

/* Every card is the same shape whatever is selected. The chips that used to
   sit inside a selected card made it taller than its neighbours and tore holes
   in the grid; the active filters live in the chip row and the sticky bar. */
.pcell__head { min-height: 62px; }

/* ---- the shared refinement strip ---------------------------------------
   Facet groups tile across the available width rather than stacking one per
   row, so a five-facet appliance costs two short rows instead of five tall
   ones. */
.picker__panels { margin-top: 12px; }
.rpanel {
  border: 1px solid var(--leaf);
  border-radius: var(--radius);
  background: rgba(44,107,84,0.035);
  padding: 14px 16px 16px;
}
.rpanel[hidden] { display: none; }
.rpanel__head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.rpanel__viz { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: #fff; display: block; }
.rpanel__viz .viz { border-radius: 0; height: 100%; }
.rpanel__viz .viz svg { width: 66%; height: 66%; }
.rpanel__head strong { display: block; font-size: 14px; font-weight: 700; color: var(--pine); }
.rpanel__head em { display: block; font-style: normal; font-size: 11.5px; color: var(--mist); margin-top: 1px; }
.rpanel__actions { display: flex; gap: 8px; }

/* One facet per row: a label column, then every option on a single line.
   Tiling the groups into columns wrapped their options onto two and three
   lines each, which is what made the panel read as a thicket. */
.rpanel__facets { display: grid; gap: 10px; }
.pcell__facet {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.pcell__facet .pcell__label { margin-bottom: 0; line-height: 1.3; }
.pcell__facet .pcell__opts { flex-wrap: wrap; }
.rpanel.is-revealing .pcell__facet {
  animation: pcellRow 240ms var(--ease-entrance);
  animation-delay: calc(var(--i, 0) * 32ms);
}
@keyframes pcellRow {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.pcell__label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 7px;
}
.pcell__opts { display: flex; flex-wrap: wrap; gap: 6px; }

.pcell__done {
  border: none; background: var(--pine); color: #fff; cursor: pointer;
  border-radius: 999px; padding: 7px 18px; font-size: 12px; font-weight: 700;
}
.pcell__done:hover { background: var(--leaf); }
.pcell__clear {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 7px 15px; font-size: 12px; font-weight: 700; color: var(--mist);
}
.pcell__clear:hover { border-color: var(--leaf); color: var(--leaf); }

/* shared pill control, also used by the brand sub-filter */
.szopt { position: relative; cursor: pointer; display: inline-block; }
.szopt input { position: absolute; opacity: 0; pointer-events: none; }
.szopt > span {
  display: block; border: 1px solid var(--line); background: #fff;
  border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 700;
  color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color 160ms var(--ease-hover),
              border-color 160ms var(--ease-hover), color 160ms var(--ease-hover);
}
.szopt:hover > span { border-color: var(--leaf); color: var(--leaf); }
.szopt.is-on > span { background: var(--pine); border-color: var(--pine); color: #fff; }
.szopt--swatch .szopt__name { display: inline-flex; align-items: center; gap: 7px; }
.szopt__dot {
  width: 12px; height: 12px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18); flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pcell.is-revealing .pcell__facet { animation: none; }
}
@media (max-width: 640px) {
  .pcell__summary { padding-left: 12px; }
  .pcell__facet { grid-template-columns: 1fr; gap: 5px; }
  /* Twelve appliances as a 2-column grid of short tiles, not a 1,000px column. */
  .picker { padding-left: 16px; padding-right: 16px; }
  .picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pcell__head { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px; }
  .pcell__viz { width: 30px; height: 30px; border-radius: 7px; }
  .pcell__text strong { font-size: 12px; }
  .pcell__text em { display: none; }
  .pcell__n { font-size: 10px; }
  .picker__head p { display: none; }
  .filters { grid-template-columns: 1fr; gap: 12px; }
  .filters .fgroup__body { gap: 4px 10px; }
  .filters__actions .btn { flex: 1; }
}


/* The results pane keeps the height it had while the next page of results is
   fetched. Without this the list empties for a frame, the document shortens,
   the browser clamps the scroll position, and the whole page appears to jump. */
.shop__results { transition: opacity 140ms var(--ease-hover); }
.shop__results.is-busy { opacity: 0.5; }

/* The row holds its height whether or not it has chips in it, so a filter
   being added never shunts the picker and the results down the page. */
.chips-active { min-height: 26px; align-content: flex-start; margin-top: 10px; }
.chips-active.is-empty > * { display: none; }


/* ------------------------------------------------- merged filter bar */
.picker__more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 4px; }

/* Inside the bar the groups sit side by side, so none of them needs to scroll. */
.filters .fgroup { border-bottom: none; padding: 0; }
.filters .fgroup__body { margin-top: 6px; }
.filters .fgroup__label { margin-bottom: 6px; }
.filters .fgroup__search { padding: 8px 11px; }
.filters .fopt { font-size: 12.5px; }
.filters .price-range { padding-top: 0; }
.filters .price-track { height: 22px; }
.filters .price-track::before, .filters .price-fill { top: 9px; }
.filters .price-inputs { margin-top: 4px; align-items: center; gap: 6px; flex-wrap: wrap; }
.filters .price-inputs label { flex: 0 0 auto; }
.filters .price-inputs input { width: 74px; padding: 6px 8px; font-size: 12.5px; }
.filters .price-inputs__to { font-size: 11px; color: var(--mist); }

.filters .fgroup legend { margin-bottom: 2px; }
.filters .fgroup__toggle { pointer-events: none; }
.filters .fgroup__chev { display: none; }
.filters .fgroup--collapsed .fgroup__body { display: flex; }
.filters__actions { display: flex; gap: 8px; align-self: end; padding: 0; }
.filters__actions .btn { padding: 9px 16px; font-size: 12.5px; flex: 0 0 auto; }

/* Brands read as a wrapping pill row rather than a tall checkbox column. */
/* Brands read as a wrapping row of checkboxes rather than a tall column. */
.filters .fgroup__body { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }

/* Results take the full width now that nothing sits beside them. */
.shop__grid--wide { grid-template-columns: minmax(0, 1fr); }
.shop__grid--wide .shop__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .shop__grid--wide .shop__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .shop__grid--wide .shop__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones keep two columns: one giant card per screen made the list feel
   endless. The card tightens up to suit. */
@media (max-width: 560px) {
  .shop__grid--wide .shop__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scard__body { padding: 10px 11px 12px; gap: 4px; }
  .scard__name { font-size: 12.5px; line-height: 1.3; }
  .scard__meta { font-size: 11px; }
  .scard__price ins, .scard__price--plain { font-size: 14px; }
  .scard__actions { flex-direction: column; gap: 6px; margin-top: 6px; }
  .scard__actions .btn { padding: 8px 8px; font-size: 11.5px; width: 100%; }
  /* The photo and name already open the product; a second button for it
     only made every card taller. */
  .scard__actions .btn-outline { display: none; }
  .scard__wish { width: 30px; height: 30px; }
}

/* ------------------------------------------- sticky filter widget -------
   Sits below the menu in normal flow and sticks under the header as the
   results scroll past, so the filters are reachable from anywhere down the
   page without going back to the top. */
/* Fixed under the header and only shown once the main filters have scrolled
   out of view, so it never sits on top of them. Out of flow, so showing and
   hiding it moves nothing else on the page. */
.shopbar {
  position: fixed;
  top: var(--header-h, 74px);
  left: 0; right: 0;
  z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-hover), transform 220ms var(--ease-entrance);
}
.shopbar.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.shopbar.is-open { box-shadow: 0 12px 30px rgba(18,56,50,0.10); }
.shopbar__inner {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 24px; max-width: var(--shell); margin: 0 auto;
}
.shopbar__toggle {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--pine);
}
.shopbar__toggle:hover { border-color: var(--leaf); color: var(--leaf); }
.shopbar.is-open .shopbar__toggle { background: var(--pine); border-color: var(--pine); color: #fff; }
.shopbar__chev {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms var(--ease-hover);
}
.shopbar.is-open .shopbar__chev { transform: rotate(-135deg); }
.shopbar__count { font-size: 13px; font-weight: 700; color: var(--pine); white-space: nowrap; }
.shopbar__chips {
  display: flex; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.shopbar__chips::-webkit-scrollbar { display: none; }
.shopbar__chips .chip-x { flex: 0 0 auto; }
.shopbar__actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.shopbar__clear { font-size: 12px; font-weight: 700; color: var(--mist); }
.shopbar__clear[hidden] { display: none; }
.shopbar__clear:hover { color: var(--leaf); }

/* The picker is moved in here when the widget opens. */
.shopbar__panel {
  border-top: 1px solid var(--line);
  background: #fff;
  max-height: calc(100vh - var(--header-h, 74px) - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: shopbarIn 200ms var(--ease-entrance);
}
.shopbar__panel[hidden] { display: none; }
@keyframes shopbarIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.shopbar__panel-inner .picker { padding-top: 18px; padding-bottom: 10px; }
/* The heading belongs to the page, not to this compact panel. */
.shopbar__panel-inner .picker__head { display: none; }
.shopbar__panel-foot {
  display: flex; justify-content: flex-end;
  padding: 12px 24px 16px; max-width: var(--shell); margin: 0 auto;
}
@media (max-width: 760px) {
  .shopbar__count { display: none; }
  .shopbar__inner { padding: 9px 16px; }
}

/* ---- staff-only affordances on the storefront ---- */
.scard__edit {
  position: absolute; top: 10px; right: 48px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.92); border: 1px solid var(--line); color: var(--pine);
  display: inline-flex; align-items: center; justify-content: center;
}
.scard__edit:hover { background: var(--brass); color: #fff; border-color: var(--brass); }
.adminbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 24px;
  background: #123832; color: #fff;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.adminbar__who { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; color: #C99A4E; }
.adminbar__pos, .adminbar__meta { color: rgba(255,255,255,0.7); }
.adminbar__meta { margin-left: auto; }
.adminbar__nav { display: inline-flex; gap: 10px; }
.adminbar__nav a { color: #fff; padding: 4px 10px; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; }
.adminbar__nav a:hover { background: rgba(255,255,255,0.12); }
.adminbar__edit { background: #C99A4E; color: #1a1208; font-weight: 700; padding: 5px 14px; border-radius: 999px; }
.adminbar__edit:hover { background: #fff; }

/* ------------------------------------------------------------ load more */
.shop__more { display: flex; justify-content: center; padding: 28px 0 8px; }
.shop__more .btn { padding: 11px 26px; font-size: 13px; }
.shop__more-n { font-weight: 500; opacity: 0.6; margin-left: 4px; }