/* ============ Round 10: the shop's controls (31 Oct 2026, Nikola: "too many numbers on all sides, those buttons look cheap, animate the switch,
   remove this All, and give the filters on a phone or tablet a way to close") ============
   1  the category buttons: one soft track with a white thumb that glides to the chosen button (ui.js slidingMark kind "thumb"); no counts
   2  the line tabs lose their numbers and step aside under a category that has no lines
   3  the Filters button (phones and tablets) and the toolbar around it
   4  the filter sheet (phones and tablets): grab bar, header with the title, "Clear all" and a close button, the groups, a footer button
   5  the heading's small fade when the category changes
   Markup: Front/Shop/ShopCatalog.php. Behaviour: assets/js/shop.js (sheet, buttons), assets/js/ui.js (thumb, cards rising in). */

/* ---- 1. category buttons ------------------------------------------------------------------------------------------------------- */
.shop-cats {
  position: relative; display: flex; align-items: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 4px; border-radius: 18px;
  background: color-mix(in srgb, var(--green-ink, #1d3a2c) 6.5%, #fff); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cat {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 14px;
  background: transparent; color: var(--ink-3, #3b463f); font: 600 15px / 1 var(--font-sans), sans-serif; letter-spacing: 0; white-space: nowrap; cursor: pointer;
  transition: color .35s var(--ease-soft); -webkit-tap-highlight-color: transparent;
}
.shop-cat .shop-cat-ic { color: inherit; opacity: .85; transition: transform .45s var(--ease-soft); }
.shop-cat.active, .shop-cat[aria-pressed="true"] { color: var(--green-ink, #1d3a2c); }
.shop-cat.active .shop-cat-ic { opacity: 1; }
.shop-cat:focus-visible { outline: 2px solid var(--focus, #2f7a55); outline-offset: -2px; }
/* without the sliding thumb (script off, reduced motion) the chosen button wears the white slab itself */
.shop-cat.active, .shop-cat[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(30, 60, 44, .1), 0 6px 14px -6px rgba(30, 60, 44, .28); }
.shop-cats.has-mark .shop-cat.active, .shop-cats.has-mark .shop-cat[aria-pressed="true"] { background: transparent; box-shadow: none; }
.fi-mark-thumb {
  top: 0; left: 0; width: 140px; height: var(--mh, 44px); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(30, 60, 44, .1), 0 6px 14px -6px rgba(30, 60, 44, .28);
  transform-origin: 0 0; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--sx, 1), 1);
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .shop-cat:not(.active):hover { color: var(--green-ink, #1d3a2c); }
  .shop-cat:not(.active):hover .shop-cat-ic { transform: translate3d(0, -2px, 0); }
}
@media (max-width: 720px) {
  .shop-cats { width: 100%; scroll-snap-type: x proximity; }
  .shop-cat { scroll-snap-align: center; padding: 0 16px; }
}

/* ---- 2. line tabs ------------------------------------------------------------------------------------------------------------------ */
/* Basic, Pro, Specialist and Elixirs describe fertilizers only: under grass seed, Mosscontrol or the sprayer the whole row steps aside. It fades out but
   keeps its place (31 Oct 2026, the owner: the switch made the page jump), so the products start at the same height whatever the category.
   Older rules set the tabs' display with !important, so this one sits in the earlier layer. */
@layer fi-pre {
  .shop-grid[data-category="seeds"] .shop-line-chips,
  .shop-grid[data-category="mosscontrol"] .shop-line-chips,
  .shop-grid[data-category="devices"] .shop-line-chips { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
}
.shop-main .shop-line-chips { transition: opacity .2s ease, visibility 0s linear 0s; }
.shop-grid[data-category="seeds"] .shop-main .shop-line-chips,
.shop-grid[data-category="mosscontrol"] .shop-main .shop-line-chips,
.shop-grid[data-category="devices"] .shop-main .shop-line-chips { transition: opacity .2s ease, visibility 0s linear .2s; }
@media (prefers-reduced-motion: reduce) { .shop-main .shop-line-chips { transition: none !important; } }

/* ---- 3. the Filters button and the toolbar -------------------------------------------------------------------------------------------- */
.shop-filters-btn {
  display: none; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 14px; background: #fff;
  box-shadow: var(--elev-1); color: var(--green-ink, #1d3a2c); font: 600 15px / 1 var(--font-sans), sans-serif; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: box-shadow .3s var(--ease-soft), background-color .3s var(--ease-soft);
}
.shop-filters-btn .sfb-ic { display: inline-grid; place-items: center; --hi-w: 1.7; }
.shop-filters-btn .sfb-ic svg { width: 20px; height: 20px; }
.shop-filters-btn[aria-expanded="true"] { background: var(--green-ink, #1d3a2c); color: #fff; }
.shop-filters-btn:focus-visible { outline: 2px solid var(--focus, #2f7a55); outline-offset: 2px; }
.sfb-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--green-ink, #1d3a2c); color: #fff; font: 700 12.5px / 22px var(--font-sans), sans-serif; text-align: center; font-variant-numeric: tabular-nums; animation: sfb-pop .4s cubic-bezier(.32, .72, 0, 1); }
.sfb-n[hidden] { display: none; }
@keyframes sfb-pop { from { opacity: 0; transform: scale(.5); } }
@media (hover: hover) and (pointer: fine) { .shop-filters-btn:not([aria-expanded="true"]):hover { box-shadow: var(--elev-2); } }
.ssb-grab, .ssb-close, .ssb-foot, .shop-sheet-backdrop { display: none; }
@media (max-width: 940px) {
  .shop-filters-btn { display: inline-flex; flex: none; }
  /* the arrow of the sort menu is drawn at the right edge: keep the words clear of it when the row is tight */
  @layer fi-pre { .shop-toolbar-right .sort-select { min-width: 176px; padding-right: 44px !important; text-overflow: ellipsis; } }
}
/* a phone: the count line and the grid/list switch on the first row, Filters and the sort on the second */
@media (max-width: 720px) {
  .shop-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 8px; align-items: center !important; }
  .shop-toolbar > * { width: auto; }
  .shop-toolbar-left { grid-column: 1 / 3; grid-row: 1; }
  .shop-toolbar-right { display: contents; }
  .shop-toolbar-right .view-toggle { grid-column: 3; grid-row: 1; }
  .shop-toolbar-right .shop-filters-btn { grid-column: 1; grid-row: 2; }
  .shop-toolbar-right .sort-select { grid-column: 2 / 4; grid-row: 2; width: 100%; }
}

/* ---- 4. the filter sheet ---------------------------------------------------------------------------------------------------------------- */
html.fi-sheet-lock, html.fi-sheet-lock body { overflow: hidden; }
@media (max-width: 940px) {
  .shop-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1400; background: rgba(18, 32, 24, .46); opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease-soft), visibility 0s linear .35s;
  }
  .shop-grid.sheet-open .shop-sheet-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* the panel becomes a sheet at the foot of the screen: shut it is below the screen and out of the tab order */
  .shop-grid .shop-sidebar.is-collapsible { visibility: hidden; }
  .shop-grid .shop-sidebar.is-collapsible.is-open { visibility: visible; }
  .ssb-grab { display: block; flex: none; width: 42px; height: 5px; margin: 10px auto 2px; border-radius: 3px; background: rgba(30, 60, 44, .2); touch-action: none; }
  .ssb-close {
    display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(30, 60, 44, .07);
    color: var(--green-ink, #1d3a2c); cursor: pointer; --hi-w: 1.8; -webkit-tap-highlight-color: transparent; transition: background-color .3s var(--ease-soft);
  }
  .ssb-close svg { width: 22px; height: 22px; }
  .ssb-close:focus-visible, .ssb-clear:focus-visible { outline: 2px solid var(--focus, #2f7a55); outline-offset: 2px; }
  .ssb-foot { display: block; flex: none; padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px)); background: #fff; }
  .ssb-done { width: 100%; min-height: 52px; border-radius: 16px; font-size: 16px; }
  .ssb-done:disabled { opacity: .6; }

  @layer fi-pre {
    .shop-grid .shop-sidebar.is-collapsible {
      position: fixed !important; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 1410 !important;
      display: flex !important; flex-direction: column !important; width: min(100%, 620px) !important; max-height: min(86vh, 760px) !important; margin: 0 auto !important; padding: 0 !important;
      border-radius: 28px 28px 0 0 !important; background: #fff !important; box-shadow: 0 -24px 60px -16px rgba(18, 40, 28, .38) !important;
      -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: hidden !important;
      /* (the card rule of site.css sets transform and transition with !important for the sidebar too, so these need it as well) */
      transform: translate3d(0, 105%, 0) !important; transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .5s !important;
    }
    .shop-grid .shop-sidebar.is-collapsible.is-open { transform: none !important; transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s !important; }
    @supports (height: 1dvh) { .shop-grid .shop-sidebar.is-collapsible { max-height: min(86dvh, 760px) !important; } }
    .shop-grid .shop-sidebar.is-collapsible .ssb-title { display: flex !important; flex: none !important; align-items: center !important; gap: 4px !important; margin: 0 !important; padding: 4px 14px 6px 24px !important; cursor: default !important; touch-action: none; }
    .shop-grid .shop-sidebar.is-collapsible .ssb-title::before, .shop-grid .shop-sidebar.is-collapsible .ssb-title::after { display: none !important; }
    .shop-grid .shop-sidebar.is-collapsible .ssb-heading { margin: 0 auto 0 0 !important; font: 700 22px / 1.2 var(--font-display), var(--font-sans), sans-serif !important; letter-spacing: -.015em !important; color: var(--green-ink, #1d3a2c); }
    .shop-grid .shop-sidebar.is-collapsible .ssb-heading-text { display: inline !important; }
    .shop-grid .shop-sidebar.is-collapsible .ssb-toggle { display: none !important; }
    .shop-grid .shop-sidebar.is-collapsible .ssb-clear { order: 0 !important; margin: 0 !important; min-height: 44px !important; padding: 0 10px !important; }
    .shop-grid .shop-sidebar.is-collapsible > .ssb-panel {
      display: block !important; flex: 1 1 auto !important; min-height: 0 !important; padding: 4px 24px 20px !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    /* "No filters active" is read out (live region) but not shown: the number on the Filters button and the footer button say the same */
    .shop-grid .shop-sidebar.is-collapsible > .ssb-active-count { display: block !important; position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
    .shop-grid .shop-sidebar.is-collapsible > .ssb-foot { display: block !important; flex: none !important; padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
    .shop-grid .shop-sidebar.is-collapsible > .ssb-grab { display: block !important; }
    .shop-grid .shop-sidebar.is-collapsible.is-open > :not(.ssb-title) { animation: none !important; }
  }
}
@media (min-width: 941px) {
  html.fi-sheet-lock, html.fi-sheet-lock body { overflow: visible; }
}

/* ---- 5. the heading changes with the category ------------------------------------------------------------------------------------------- */
@keyframes fi-swap { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.fi-swap { animation: fi-swap .5s var(--ease-soft); }

@media (prefers-reduced-motion: reduce) {
  .fi-mark-thumb, .shop-cat, .shop-cat .shop-cat-ic, .shop-filters-btn, .shop-sheet-backdrop, .ssb-close { transition: none !important; }
  @layer fi-pre { .shop-grid .shop-sidebar.is-collapsible, .shop-grid .shop-sidebar.is-collapsible.is-open { transition: none !important; } }
  .sfb-n, .fi-swap { animation: none; }
}

/* a phone: the sentence "2 products temporarily sold out" is one more number, and every sold-out card already says so itself */
/* (the pill's display is set with !important in site.css, so this sits in the earlier layer) */
@media (max-width: 720px) { @layer fi-pre { .shop-toolbar-left .stock-pill { display: none !important; } } }