/* ACCRA GRID — shop page styles. Owned by the shop developer. See DESIGN.md.
   "The command-center catalogue": header tile with a hero count, category rail,
   sticky filter sidebar (desktop) / bottom sheet (phones), dense results grid. */

.shop { display: flex; flex-direction: column; gap: var(--gap); }

/* ---------------------------------------------------------------------
   Header tile
   --------------------------------------------------------------------- */
.shop-head {
  display: grid; gap: var(--s-3) var(--s-6);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text count" "search search" "langs langs" "voice voice";
  padding: var(--s-5);
  border-radius: var(--r-2xl);
}
.shop-head__text { grid-area: text; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shop-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); }
.shop-crumbs a { color: var(--ink-2); font-weight: 600; }
.shop-crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; }
.shop-crumbs [aria-current] { color: var(--ink); font-weight: 650; }
.shop-head__title {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.035em; line-height: .98;
  font-variation-settings: "wdth" 84; overflow-wrap: anywhere;
}
.shop-head__tag { font-size: var(--fs-sm); color: var(--ink-2); max-width: 56ch; line-height: 1.45; }
.shop-head__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-head__extra:empty { display: none; }

.shop-head__count {
  grid-area: count; align-self: start;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px;
  min-width: 84px;
}
.shop-head__num {
  font-size: var(--fs-num-xl); font-weight: 800; line-height: .9; letter-spacing: -0.06em; color: var(--ink);
  padding: 4px 10px 6px; border-radius: var(--r-md); background: var(--lime);
}
.shop-head__count .ag-meta { max-width: 16ch; line-height: 1.3; }
.shop-head__photo { display: none; }

/* Page search (lives in the header) */
.shop-search {
  grid-area: search; display: flex; align-items: center; gap: 6px;
  padding: 4px; border-radius: var(--r-pill); background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: box-shadow var(--t-fast);
}
.shop-search:focus-within { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px rgba(214, 244, 91, .8); }
.shop-search__field { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 12px; }
.shop-search__field svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.shop-search__field input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; font-size: 15px; color: var(--ink); }
.shop-search__field input::placeholder { color: var(--ink-4); }
.shop-search__field input:focus-visible { box-shadow: none; }
.shop-search__mic {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--ink); color: var(--lime); transition: transform var(--t-fast) var(--ease-spring);
}
.shop-search__mic svg { width: 19px; height: 19px; }
.shop-search__mic:hover { transform: scale(1.06); }
.shop-search__go { display: none; border-radius: var(--r-pill); --btn-h: 44px; }

.shop-langs { grid-area: langs; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
.shop-langs::-webkit-scrollbar { display: none; }
.shop-langs .ag-eyebrow { flex: none; margin-right: 2px; }

/* Voice listening state */
.shop-voice {
  grid-area: voice; display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 16px; border-radius: var(--r-lg);
  background: var(--volta); background-image: var(--grid-dots-dark); background-size: var(--grid-size); color: var(--volta-ink);
}
.shop-voice > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-voice b { font-family: var(--font-display); font-size: 19px; color: #fff; letter-spacing: -0.02em; }
.shop-voice small { font-size: var(--fs-xs); color: var(--volta-mute); }
.shop-voice__bars { display: flex; align-items: center; gap: 3px; height: 32px; flex: none; }
.shop-voice__bars i { width: 4px; height: 100%; border-radius: 2px; background: var(--lime); transform: scaleY(.3); }
.shop-voice.is-listening .shop-voice__bars i { animation: shop-voice 900ms var(--ease-in-out) infinite; }
.shop-voice__bars i:nth-child(2) { animation-delay: -150ms; } .shop-voice__bars i:nth-child(3) { animation-delay: -420ms; }
.shop-voice__bars i:nth-child(4) { animation-delay: -650ms; } .shop-voice__bars i:nth-child(5) { animation-delay: -280ms; }
@keyframes shop-voice { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---------------------------------------------------------------------
   Category rail
   --------------------------------------------------------------------- */
.shop-cats .ag-chip-row { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.shop-cats .ag-chip svg { color: var(--volta); }
.shop-cats .ag-chip[aria-pressed="true"] svg { color: var(--lime); }

/* ---------------------------------------------------------------------
   Wholesale banner
   --------------------------------------------------------------------- */
.shop-bulk { display: grid; gap: var(--s-4); align-items: center; }
.shop-bulk__text { display: flex; flex-direction: column; gap: 4px; }
.shop-bulk__text .ag-h3 { color: #fff; }
.shop-bulk__tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shop-bulk__tiers li {
  display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--r-md);
  background: var(--volta-2); box-shadow: var(--sh-inset); min-width: 0;
}
.shop-bulk__tiers li > .ag-num { font-size: 11px; color: var(--volta-mute); }
.shop-bulk__tiers small { font: 700 10px/1 var(--font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--volta-mute); }
.shop-bulk__tiers li.is-moq { background: var(--lime); }
.shop-bulk__tiers li.is-moq .ag-price, .shop-bulk__tiers li.is-moq small, .shop-bulk__tiers li.is-moq > .ag-num { color: var(--ink); }
.shop-bulk__tiers li.is-moq .ag-price__cur { color: var(--ink-2); }
.shop-bulk .ag-btn { justify-self: start; }

/* ---------------------------------------------------------------------
   Mobile sticky quick filters
   --------------------------------------------------------------------- */
.shop-quick {
  position: sticky; z-index: 20; top: calc(var(--top-h) - var(--ticker-h));
  margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter);
  background: rgba(245, 246, 241, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.shop-quick .ag-chip { min-height: 38px; }
.shop-quick__filters { background: var(--ink); color: #fff; box-shadow: none; }
.shop-quick__filters:hover { box-shadow: none; background: var(--volta); }
.shop-quick__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 700; }

/* ---------------------------------------------------------------------
   Layout: sidebar + results
   --------------------------------------------------------------------- */
.shop-layout { display: grid; gap: var(--gap); align-items: start; }
.shop-side { display: none; }
.shop-results { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }

/* Filter groups (shared by sidebar and sheet) */
.shop-fg { margin: 0; padding: var(--s-4) 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.shop-fg:first-child { border-top: 0; padding-top: 0; }
.shop-fg legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; }
.shop-fg legend + * { clear: both; }
.shop-fg--bulk { padding: var(--s-3); margin-bottom: var(--s-3); border: 0; border-radius: var(--r-md); background: var(--lime-wash); box-shadow: inset 0 0 0 1.5px var(--lime-2); }
.shop-fg--bulk + .shop-fg { border-top: 0; padding-top: 0; }
.shop-fg--bulk legend { color: var(--volta); }
.shop-presets { --cluster: 6px; }
.shop-presets .ag-chip { min-height: 36px; }

.shop-catlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.shop-catlist button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.shop-catlist button svg { width: 17px; height: 17px; color: var(--volta); flex: none; }
.shop-catlist button span:not(.ag-num) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-catlist .ag-num { font-size: 11.5px; color: var(--ink-3); }
.shop-catlist button:hover { background: var(--paper-2); color: var(--ink); }
.shop-catlist button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.shop-catlist button[aria-pressed="true"] svg, .shop-catlist button[aria-pressed="true"] .ag-num { color: var(--lime); }
.shop-catlist button:disabled { opacity: .4; pointer-events: none; }

.shop-range { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.shop-range__dash { color: var(--ink-4); flex: none; }
.shop-range__f {
  flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 4px;
  padding: 6px 10px; border-radius: var(--r-md); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.shop-range__f:focus-within { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px rgba(214, 244, 91, .8); }
.shop-range__f > span:first-child { grid-column: 1 / -1; font: 600 10px/1.2 var(--font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.shop-range__cur { font: 600 12px/28px var(--font-num); color: var(--ink-3); }
.shop-range__f input { width: 100%; min-width: 0; height: 28px; border: 0; background: none; font-size: 16px; font-weight: 700; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.shop-range__f input::-webkit-outer-spin-button, .shop-range__f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-range__f input:focus-visible { box-shadow: none; }

.shop-zone { position: relative; display: block; margin-bottom: 10px; }
.shop-zone > svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--volta); pointer-events: none; }
.shop-zone .ag-select { padding-left: 38px; min-height: 44px; font-size: 14px; font-weight: 600; }

.shop-switches { display: grid; gap: 4px; }
.shop-switch {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 10px;
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); cursor: pointer;
}
.shop-switch:hover { background: var(--paper-2); }
.shop-switch > svg { width: 17px; height: 17px; color: var(--volta); flex: none; }
.shop-switch > span:not(.shop-switch__track) { flex: 1; min-width: 0; }
.shop-switch .ag-num { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.shop-switch input { position: absolute; opacity: 0; pointer-events: none; }
.shop-switch__track { position: relative; width: 40px; height: 24px; flex: none; border-radius: 12px; background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t-base); }
.shop-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); box-shadow: var(--sh-1); transition: transform var(--t-base) var(--ease-spring); }
.shop-switch input:checked + .shop-switch__track { background: var(--ink); box-shadow: none; }
.shop-switch input:checked + .shop-switch__track::after { transform: translateX(16px); background: var(--lime); }
.shop-switch input:focus-visible + .shop-switch__track { box-shadow: var(--focus); }

.shop-checks { display: grid; gap: 1px; }
.shop-check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.shop-check:hover { background: var(--paper-2); }
.shop-check input { position: absolute; opacity: 0; pointer-events: none; }
.shop-check__box { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--card); color: var(--lime); }
.shop-check__box svg { width: 13px; height: 13px; opacity: 0; }
.shop-check input:checked + .shop-check__box { background: var(--ink); box-shadow: none; }
.shop-check input:checked + .shop-check__box svg { opacity: 1; }
.shop-check input:focus-visible + .shop-check__box { box-shadow: var(--focus); }
.shop-check__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-check input:checked ~ .shop-check__label { color: var(--ink); font-weight: 650; }
.shop-check__n { font-size: 11px; color: var(--ink-3); }

/* Sheet variant */
.shop-sheet { display: flex; flex-direction: column; }
.shop-sheet .shop-fg--cats { display: none; }
.shop-sheet__foot {
  position: sticky; bottom: calc(var(--s-6) * -1 - var(--safe-b)); z-index: 2;
  display: grid; grid-template-columns: auto 1fr; gap: 8px;
  margin: 0 calc(var(--s-5) * -1); padding: var(--s-3) var(--s-5) calc(var(--s-4) + var(--safe-b));
  background: var(--paper); border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------------
   Toolbar, active pills
   --------------------------------------------------------------------- */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.shop-toolbar__count { font-size: var(--fs-sm); color: var(--ink-3); }
.shop-toolbar__count b { color: var(--ink); font-weight: 700; }
.shop-toolbar__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.shop-sort__select { min-height: 44px; width: auto; max-width: 190px; padding-left: 12px; font-size: 13.5px; font-weight: 650; border-radius: var(--r-pill); }
.shop-view button { display: grid; place-items: center; min-height: 38px; width: 44px; padding: 0; }
.shop-view button svg { width: 18px; height: 18px; }

.shop-active { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-active:empty { display: none; }
.shop-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 100%; padding: 0 8px 0 12px; border-radius: var(--r-pill);
  background: var(--lime-wash); color: var(--volta); box-shadow: inset 0 0 0 1px var(--lime-2); font-size: 12.5px; font-weight: 650;
  transition: background var(--t-fast);
}
.shop-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-pill svg { width: 14px; height: 14px; flex: none; }
.shop-pill:hover { background: var(--lime); }
.shop-pill--clear { background: none; box-shadow: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding-right: 12px; }
.shop-pill--clear:hover { background: var(--paper-2); }

/* ---------------------------------------------------------------------
   Grid, list view, promo insert, more
   --------------------------------------------------------------------- */
.shop-grid > .ag-empty, .shop-promo { grid-column: 1 / -1; }
.shop-grid--list { grid-template-columns: minmax(0, 1fr); }
.shop-grid--list .ag-card--row .ag-card__media { width: 104px; }
.shop-promo .ag-bento { gap: var(--gap); }
.shop-promo__mode { justify-content: space-between; gap: var(--s-4); }
.shop-promo__title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; font-variation-settings: "wdth" 84; max-width: 20ch; }
.shop-promo__mode .ag-btn { align-self: flex-start; }
.ag-tile--lime .shop-promo__title { color: var(--ink); }
.shop-skel { min-height: 280px; }

.shop-more { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-top: var(--s-4); }
.shop-more:empty { display: none; }
.shop-more__bar { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); }
.shop-more__bar .ag-progress { flex: 1; height: 4px; }
.shop-more .ag-btn { min-width: 220px; }
.shop-more__end { display: inline-flex; align-items: center; gap: 6px; }
.shop-more__end svg { width: 16px; height: 16px; color: var(--volta); }

.shop-empty { padding-block: var(--s-9); }
.shop-empty__trend { display: grid; gap: 8px; justify-items: center; margin-top: var(--s-3); }

/* ---------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------- */
@media (min-width: 640px) {
  .shop-head { padding: var(--s-6); grid-template-columns: minmax(0, 1fr) auto; }
  .shop-langs { margin-inline: 0; padding-inline: 0; }
  .shop-search__go { display: inline-flex; }
  .shop-bulk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .shop-bulk .ag-btn { grid-column: 1 / -1; }
  .shop-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   Desktop: sidebar + photo header
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .shop-head {
    grid-template-columns: minmax(0, 1fr) auto minmax(220px, 300px);
    grid-template-areas: "text count photo" "search search photo" "langs langs photo" "voice voice photo";
    padding: var(--s-7); column-gap: var(--s-7);
  }
  .shop-head__title { font-size: var(--fs-3xl); }
  .shop-head__photo {
    grid-area: photo; display: block; position: relative; margin: calc(var(--s-7) * -1) calc(var(--s-7) * -1) calc(var(--s-7) * -1) 0;
    overflow: hidden; background: var(--paper-2); border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
  }
  .shop-head__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .shop-head__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 30%); }
  .shop-cats .ag-chip-row { margin-inline: 0; padding-inline: 2px; flex-wrap: wrap; }
  .shop-quick { display: none; }
  .shop-bulk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; padding: var(--s-5) var(--s-6); }
  .shop-bulk .ag-btn { grid-column: auto; }

  .shop-layout { grid-template-columns: 272px minmax(0, 1fr); gap: var(--s-6); }
  .shop-side {
    display: block; position: sticky; top: calc(var(--top-h) - var(--ticker-h) + 16px);
    max-height: calc(100vh - (var(--top-h) - var(--ticker-h)) - 32px); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-5); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--sh-1);
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .shop-side__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); }
  .shop-side__clear { font-size: var(--fs-sm); min-height: 32px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .shop-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-grid--list .ag-card--row .ag-card__media { width: 132px; }
}
@media (min-width: 1440px) {
  .shop-layout { grid-template-columns: 296px minmax(0, 1fr); }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); }
}

/* QA pass 1 */
.shop-catlist button { min-height: 36px; }
.shop-catmore { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 4px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.shop-catmore:hover { background: var(--paper-2); }
.shop-catmore svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--ease-out); }
.shop-catmore[aria-expanded="true"] svg { transform: rotate(180deg); }
.shop-toolbar { flex-wrap: nowrap; }
.shop-toolbar__count { min-width: 0; }
.shop-toolbar__sort { display: none; }
.shop-sort__select { max-width: 150px; }
@media (min-width: 640px) { .shop-toolbar__sort { display: inline; } .shop-sort__select { max-width: 190px; } }
@media (min-width: 1024px) { .shop-side { padding-bottom: 64px; } }
.shop-grid.shop-grid--list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .shop-grid.shop-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-head__num:is(:empty) { display: none; }