/* ==========================================================================
   Shop / product category archive (archive-product.php)
   Sidebar filters on desktop; the same form moves into a bottom sheet
   below 1024px (filters.js). --header-offset is measured by filters.js.
   ========================================================================== */
@layer pages {
  :root { --header-offset: calc(var(--header-h-compact) + 1px); }

  @media (min-width: 1024px) {
    :root { --header-offset: calc(var(--header-h-compact) + var(--nav-h) + 1px); }
  }

  /* ------------------------------------------------------------------------
     Category header
     ------------------------------------------------------------------------ */
  .shop-hero {
    padding-block: var(--space-2) var(--space-6);
    background: var(--surface-2);
  }

  .shop-hero__text {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-4) var(--space-5);
  }

  .shop-hero .page-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-light);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
  }

  .term-description {
    max-width: 60ch;
    color: var(--text-soft);
    font-size: var(--fs-base);
  }

  @media (min-width: 1024px) {
    .shop-hero { padding-block-end: var(--space-7); }
    .shop-hero__text { margin-block: var(--space-5) var(--space-6); }
  }

  /* Sub-category rail — scrolls sideways on small screens */
  .subcat-rail {
    margin-inline: calc(var(--gutter) * -1);
  }

  .subcat-rail__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    padding: 2px var(--gutter);
    list-style: none;
    margin: 0;
    scrollbar-width: none;
  }

  .subcat-rail__list::-webkit-scrollbar { display: none; }
  .subcat-rail__list > li { scroll-snap-align: start; flex-shrink: 0; }

  .subcat-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: 6px var(--space-4) 6px 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
  }

  .subcat-pill img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-3);
  }

  .subcat-pill:hover { border-color: var(--ink); color: var(--text); }

  .subcat-pill[aria-current="page"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  @media (min-width: 1024px) {
    .subcat-rail { margin-inline: 0; }
    .subcat-rail__list { flex-wrap: wrap; overflow: visible; padding-inline: 0; }
  }

  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */
  .shop {
    padding-block: var(--space-4) var(--section-space-sm);
  }

  .shop-layout {
    display: grid;
    gap: var(--space-5);
  }

  @media (min-width: 1024px) {
    .shop { padding-block-start: var(--space-6); }

    .shop-layout {
      grid-template-columns: 256px minmax(0, 1fr);
      gap: var(--space-7);
      align-items: start;
    }
  }

  @media (min-width: 1440px) {
    .shop-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); }
  }

  /* ------------------------------------------------------------------------
     Sidebar + filter form
     ------------------------------------------------------------------------ */
  .shop-sidebar__title {
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--border);
    font-size: var(--fs-lg);
  }

  /* Below 1024px the form lives in the bottom sheet once the full UI runs;
     without scripts (or in fallback mode) it simply stacks above the grid */
  @media (max-width: 1023.98px) {
    .js:not(.app-fallback) .shop-sidebar { display: none; }
  }

  @media (min-width: 1024px) {
    .shop-sidebar {
      position: sticky;
      inset-block-start: calc(var(--header-offset) + var(--space-4));
      max-height: calc(100dvh - var(--header-offset) - var(--space-5));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-inline-end: var(--space-2);
      scrollbar-width: thin;
      scrollbar-color: var(--clay) transparent;
    }
  }

  .shop-filters__submit { padding-block: var(--space-5) var(--space-2); }
  .app-ready .shop-filters__submit { display: none; }

  .filter-switch {
    display: flex;
    width: 100%;
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--border);
    font-weight: var(--fw-medium);
  }

  .filter-switch .count,
  .filter-color .count {
    margin-inline-start: auto;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
  }

  .filter-group .accordion__trigger {
    min-height: 56px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
  }

  .filter-group .accordion__body { padding-block-end: var(--space-4); }

  .filter-group__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .filter-group__badge,
  .shop-toolbar__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .filter-list {
    display: grid;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  .filter-option {
    display: flex;
    width: 100%;
    padding-block: 0.45em;
  }

  .filter-option__label small {
    margin-inline-start: 0.35em;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    white-space: nowrap;
  }

  .filter-option .count { font-variant-numeric: tabular-nums; }

  .filter-option:has(input:disabled),
  .filter-color:has(input:disabled) {
    opacity: 0.42;
    cursor: not-allowed;
  }

  .filter-option:has(input:disabled) input { cursor: not-allowed; }

  /* Colours: swatch + name, two per row */
  .filter-list--colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
  }

  .filter-color {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    font-size: var(--fs-sm);
    cursor: pointer;
  }

  .filter-color .swatch { --swatch-size: 24px; flex-shrink: 0; }
  .filter-color .swatch::after { display: none; }
  .filter-color__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filter-color:has(input:checked) .filter-color__label { font-weight: var(--fw-semibold); }

  .filter-color:has(input:focus-visible) .swatch {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
  }

  .filter-color:hover .swatch {
    box-shadow: inset 0 0 0 1px rgb(43 38 36 / 0.16), 0 0 0 2px var(--surface), 0 0 0 3px var(--border-strong);
  }

  .filter-color input:checked + .swatch {
    box-shadow: inset 0 0 0 1px rgb(43 38 36 / 0.16), 0 0 0 2px var(--surface), 0 0 0 3px var(--ink);
  }

  .filter-group__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin-block-start: var(--space-1);
    color: var(--accent-ink);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-underline-offset: 0.2em;
  }

  /* Price: dual range + number boxes */
  .price-filter { display: grid; gap: var(--space-4); padding-block-start: var(--space-2); }

  .price-filter__slider {
    position: relative;
    height: 28px;
    margin-inline: 12px;
  }

  .price-filter__slider::before,
  .price-filter__slider::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    height: 2px;
    translate: 0 -50%;
    border-radius: 2px;
  }

  .price-filter__slider::before { inset-inline: 0; background: var(--clay); }
  .price-filter__slider::after { inset-inline: var(--lo) calc(100% - var(--hi)); background: var(--ink); }

  .price-filter__slider input {
    position: absolute;
    inset: 0 -12px;
    width: calc(100% + 24px);
    height: 100%;
    margin: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    z-index: 1;
  }

  .price-filter__slider input::-webkit-slider-runnable-track { background: none; height: 100%; }
  .price-filter__slider input::-moz-range-track { background: none; }

  .price-filter__slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-block-start: 2px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    pointer-events: auto;
    cursor: grab;
  }

  .price-filter__slider input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    pointer-events: auto;
    cursor: grab;
  }

  .price-filter__slider input:focus-visible { outline: none; }
  .price-filter__slider input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
  .price-filter__slider input:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }

  .price-filter__inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2);
  }

  .price-filter__field { display: grid; gap: 4px; }
  .price-filter__label { font-size: var(--fs-xs); color: var(--text-muted); }
  .price-filter__dash { padding-block-end: 0.8em; color: var(--text-muted); }

  .price-filter__box { position: relative; display: block; }

  .price-filter__box input {
    min-height: 44px;
    padding-inline: 0.8em 1.8em;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
  }

  .price-filter__box input::-webkit-inner-spin-button,
  .price-filter__box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

  .price-filter__box > span {
    position: absolute;
    inset-inline-end: 0.8em;
    inset-block-start: 50%;
    translate: 0 -50%;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    pointer-events: none;
  }

  /* ------------------------------------------------------------------------
     Toolbar — sticky under the header on small screens
     ------------------------------------------------------------------------ */
  .shop-toolbar {
    position: sticky;
    inset-block-start: var(--header-offset);
    z-index: var(--z-sticky);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--space-3) var(--gutter);
    background: var(--bg);
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur-fast);
  }

  .shop-toolbar.is-stuck { border-block-end-color: var(--border); }

  .shop-toolbar__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "filters sort"
      "count count";
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  .shop-toolbar__filters { grid-area: filters; min-height: 44px; }
  .woocommerce-result-count { grid-area: count; margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
  .woocommerce-ordering { grid-area: sort; justify-self: end; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

  .woocommerce-ordering__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .woocommerce-ordering .select-wrap { min-width: 0; }

  .woocommerce-ordering .orderby {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding-block: 0.4em;
    padding-inline-start: 1.1em;
    border-radius: var(--radius-pill);
    font-size: max(16px, var(--fs-sm));
    text-overflow: ellipsis;
  }

  /* Filters button only once the bottom sheet can be opened */
  html:not(.js) .shop-toolbar__filters,
  .app-fallback .shop-toolbar__filters { display: none; }

  html:not(.js) .shop-toolbar__row,
  .app-fallback .shop-toolbar__row { grid-template-areas: "count sort"; }

  @media (min-width: 1024px) {
    .shop-toolbar {
      position: static;
      margin-inline: 0;
      padding: 0 0 var(--space-4);
    }

    .shop-toolbar__filters { display: none; }

    .shop-toolbar__row,
    html:not(.js) .shop-toolbar__row,
    .app-fallback .shop-toolbar__row {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "count sort";
    }

    .woocommerce-ordering__label {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
      color: var(--text-muted);
      font-size: var(--fs-sm);
    }
  }

  /* Active filter chips */
  .shop-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
  }

  .shop-active__list {
    display: contents;
    list-style: none;
  }

  .shop-active .chip {
    gap: 0.5em;
    padding-inline-end: 0.7em;
    cursor: pointer;
  }

  .shop-active .chip:hover { border-color: var(--ink); background: var(--surface-2); }

  .shop-active__clear {
    min-height: 44px;
    padding-inline: var(--space-2);
    border: 0;
    background: none;
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .shop-active__clear:hover { color: var(--accent-ink); }

  /* ------------------------------------------------------------------------
     Grid
     ------------------------------------------------------------------------ */
  .shop-main { min-width: 0; }

  .shop-main .products { --cols: 2; margin-block-start: var(--space-3); }

  @media (min-width: 768px) {
    .shop-main .products { --cols: 3; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .product-card.is-entering {
      animation: card-in var(--dur-slow) var(--ease-out) both;
      animation-delay: calc(var(--i, 0) * 45ms);
    }

    @keyframes card-in {
      from { opacity: 0; translate: 0 12px; }
    }
  }

  /* In-grid promo tile */
  .shop-promo {
    container: promo / inline-size;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  @media (min-width: 768px) {
    .shop-promo { grid-column: auto; }
  }

  .shop-promo__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 160px;
    aspect-ratio: 16 / 10;
    background: var(--surface-3);
  }

  .shop-promo__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .shop-promo__body {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding: var(--space-5);
  }

  .shop-promo__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    text-wrap: balance;
  }

  .shop-promo__text { color: var(--text-soft); font-size: var(--fs-sm); }
  .shop-promo .link-arrow { margin-block-start: var(--space-1); }

  @container promo (min-width: 520px) {
    .shop-promo__media { aspect-ratio: auto; }
  }

  @media (max-width: 767.98px) {
    .shop-promo { flex-direction: row; }
    .shop-promo__media { flex: 0 0 38%; aspect-ratio: auto; }
  }

  @media (max-width: 479.98px) {
    .shop-promo { flex-direction: column; }
    .shop-promo__media { aspect-ratio: 16 / 9; }
    .shop-promo__body { padding: var(--space-4); }
  }

  /* Empty state */
  .shop-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-soft);
  }

  .shop-empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
  }

  .shop-empty__title { font-size: var(--fs-lg); color: var(--text); text-wrap: balance; }
  .shop-empty p { max-width: 46ch; }
  .shop-empty .btn { margin-block-start: var(--space-2); }

  /* Load more */
  .shop-more {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 320px;
    margin: var(--space-8) auto 0;
    text-align: center;
  }

  .shop-more__status { color: var(--text-muted); font-size: var(--fs-sm); }

  .shop-more__bar {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--clay);
    overflow: hidden;
  }

  .shop-more__bar span {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    background: var(--ink);
    transition: width var(--dur-slow) var(--ease-out);
  }

  .shop-more .btn { margin-block-start: var(--space-2); }

  /* ------------------------------------------------------------------------
     Filters bottom sheet
     ------------------------------------------------------------------------ */
  .filters-drawer .drawer__body { padding-block: 0 var(--space-4); }

  .filters-drawer__footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  @media (min-width: 1024px) {
    .filters-drawer { display: none; }
  }

  /* ------------------------------------------------------------------------
     Buying guide
     ------------------------------------------------------------------------ */
  .shop-guide { background: var(--surface); border-block-start: 1px solid var(--border); }

  .shop-guide__grid {
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 1024px) {
    .shop-guide__grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  }

  .shop-guide__col > .heading-sm { margin-block-end: var(--space-3); }

  .weave-list { display: grid; margin: 0; }

  @media (min-width: 640px) and (max-width: 1023.98px) {
    .weave-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  }

  .weave-list__item {
    display: grid;
    gap: 4px;
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--border);
  }

  .weave-list dt { font-family: var(--font-serif); font-size: var(--fs-md); }
  .weave-list dd { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); }

  .shop-guide__faq-title { margin-block: var(--space-7) var(--space-3); }

  .shop-faq .accordion__trigger { font-size: var(--fs-base); min-height: 56px; }

  .shop-guide__help {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
    color: var(--text-soft);
    font-size: var(--fs-sm);
  }

  .shop-guide__help .icon { margin-block-start: 0.2em; flex-shrink: 0; }
  .shop-guide__help a { color: var(--accent-ink); font-weight: var(--fw-medium); }
}