/* ---------- SHOP HEAD ---------- */
.shop{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
  margin-block-start:16px;
  padding-inline: var(--gutter);
}
/* ---------- TOOLBAR: filters toggle + sort ---------- */
.shop__toolbar{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
}
.filters-toggle{
  display:flex;
  flex:1 1 0;
  align-items:center;
  justify-content:center;
  gap:8px;
  background: var(--color-brown);
  border-radius:8px;
  padding:8px 16px;
  min-height:36px;
  font-size: var(--fs-btn);
  font-weight:700;
  color: var(--color-bg);
}
.filters-toggle:hover{ background:#3a3829; }
.filters-toggle__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding-inline:4px;
  border-radius:50%;
  background: var(--color-gold);
  color: var(--color-white);
  font-size:12px;
  font-weight:700;
}
.woocommerce-ordering{ flex:1 1 0; min-width:0; }
.sort-select{
  position:relative;
  background: var(--color-brown);
  border-radius:8px;
  display:flex;
  align-items:center;
}
.sort-select select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  background:transparent;
  border:none;
  padding:8px 36px 8px 16px;
  min-height:36px;
  font-family:inherit;
  font-size: var(--fs-quote);
  color: var(--color-white);
  cursor:pointer;
}
.sort-select select option{ color: var(--color-dark); background: var(--color-white); }
.sort-select__chevron{
  position:absolute;
  inset-inline-start:12px;
  inset-block-start:50%;
  transform: translateY(-50%);
  width:20px; height:20px;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sort-select__chevron img{
  max-width:60%;
  max-height:100%;
  width:auto;
  height:auto;
  transform: rotate(180deg) scaleX(-1);
}
/* ---------- FILTERS OFF-CANVAS PANEL ----------
   WooCommerce price-range + product_cat checkbox filters, presented as an
   accordion drawer. Shares off-canvas mechanics with the mobile nav, but
   uses its own darker overlay (0.8 vs 0.45 — see .filters-overlay) and its
   own width (mobile: full-bleed; desktop: fixed 814px per the design,
   rather than the nav's 320px).

   DOM order is reading order (right → left under RTL) throughout — the
   reverse of Figma's own physical left-to-right export order. See the HTML
   comment above the markup for the specific reversals. */
.filters-panel{
  position:fixed;
  inset-block:0;
  inset-inline-start:0;
  z-index:120;
  width:100%;
  padding: clamp(16px, 2.07vw + 8.24px, 48px);
  background: var(--color-bg);
  display:flex;
  flex-direction:column;
  gap:24px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y:auto;
}
[dir="ltr"] .filters-panel{ transform: translateX(-100%); }
.filters-panel.is-open{ transform: translateX(0); }
.filters-overlay{
  position:fixed;
  inset:0;
  z-index:115;
  background: rgba(0,0,0,.8);
  opacity:0;
  transition: opacity .3s ease;
}
.filters-overlay.is-visible{ opacity:1; }
.filters-panel__body{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.filters-panel__titlebar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  row-gap:12px;
  width:100%;
}
.filters-panel__titlebar h2{
  font-size: var(--fs-filter-title);
  font-weight:600;
  color: var(--color-brown);
}
.filters-panel__close{ width:24px; height:24px; flex-shrink:0; }
.filters-panel__close img{ width:100%; height:100%; }
.filters-panel__divider{ width:100%; height:1px; background: var(--color-border); }
/* ---------- active-filter chips ----------
   justify-content:flex-start clusters the chips at the reading-start edge
   (right, under RTL) — matching Figma's physical justify-end in its LTR
   export (right there too, just expressed the opposite logical way). */
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
  width:100%;
}
.filter-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background: var(--color-white);
  border:1px solid var(--color-border);
  border-radius:8px;
  padding:8px;
  font-size: var(--fs-quote);
  color: var(--color-brown);
}
/* In the theme the "remove filter" control is a LINK, not a button: it drops
   one parameter from the query string and reloads, so filtering keeps working
   with JS off. Selector covers both so the prototype markup still matches. */
.filter-chip button,
.filter-chip a{ width:20px; height:20px; flex-shrink:0; }
.filter-chip button img,
.filter-chip a img{ width:100%; height:100%; }
/* ---------- accordion groups ---------- */
.filter-groups{ display:flex; flex-direction:column; width:100%; }
.filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  border-block-end:1px solid var(--color-border);
}
.filter-group:first-child{ border-block-start:1px solid var(--color-border); }
.filter-group__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background: var(--color-peach);
  padding:8px 16px;
}
.filter-group__head span{
  font-size: var(--fs-name);
  font-weight:600;
  color:#0c0c0c;
}
.filter-group__chevron{
  width:24px; height:24px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease;
}
.filter-group__chevron img{
  max-width:60%;
  max-height:100%;
  width:auto;
  height:auto;
  transform: rotate(180deg) scaleX(-1);
}
.filter-group.is-open .filter-group__chevron{ transform: rotate(180deg); }
.filter-group__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:start;
  padding-block-end:16px;
}
.filter-group__body[hidden]{ display:none; }
/* ---------- checkbox rows ----------
   Figma packs [checkbox][label] flush to the reading-start edge (right) —
   checkbox outermost, label trailing inward toward the left — so checkbox
   is first in the DOM here to land on the start side. */
.filter-check{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  width:100%;
  cursor:pointer;
}
.filter-check input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.filter-check__box{
  order:-1;
  width:24px; height:24px;
  flex-shrink:0;
  border-radius:4px;
  border:3px solid var(--color-brown);
  background: var(--color-white);
  position:relative;
  transition: background .15s ease, border-color .15s ease;
}
.filter-check__box::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:12px; height:9px;
  opacity:0;
  transition: opacity .15s ease;
  background:
    linear-gradient(var(--color-white), var(--color-white)) content-box;
  clip-path: polygon(9% 45%, 35% 70%, 90% 10%, 100% 20%, 37% 90%, 0 55%);
}
.filter-check input:checked + .filter-check__box{
  background: var(--color-brown);
  border-color: var(--color-brown);
}
.filter-check input:checked + .filter-check__box::after{ opacity:1; }
.filter-check input:focus-visible + .filter-check__box{ outline:2px solid var(--color-gold); outline-offset:2px; }
.filter-check__label{
  display:flex;
  align-items:center;
  gap:4px;
  font-size: var(--fs-quote);
  color:#0c0c0c;
}
.filter-check__count{ font-size: var(--fs-tag-sm); font-weight:600; color:#cac0b8; }
/* ---------- price range ---------- */
.price-filter{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.price-filter__ok{
  order:99;
  flex-shrink:0;
  background: var(--color-brown);
  border-radius:100px;
  padding:9px 30px;
  min-width:70px;
  min-height:37px;
  font-size:16px;
  font-weight:700;
  color: var(--color-white);
  text-align:center;
}
.price-filter__value{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--color-border);
  border:2px solid #ebe5de;
  border-radius:8px;
  padding:10px 16px;
  font-size:14px;
  color:#151724;
  white-space:nowrap;
}
.price-filter__sep{ width:20px; height:1px; background:#d9d9d9; flex-shrink:0; }
.price-slider{
  position:relative;
  width:100%;
  height:16px;
  display:flex;
  align-items:center;
}
.price-slider__track{
  position:absolute;
  inset-inline:0;
  height:4px;
  border-radius:2px;
  background: var(--color-border);
}
.price-slider__range{
  position:absolute;
  height:4px;
  border-radius:2px;
  background: var(--color-brown);

  inset-inline-start: var(--range-start, 0%);
  inset-inline-end: var(--range-end, 0%);
}
.price-slider__input{
  position:absolute;
  inset-inline:0;
  width:100%;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:none;
  pointer-events:none;
}
.price-slider__input::-webkit-slider-runnable-track{ background:none; }
.price-slider__input::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  pointer-events:auto;
  width:16px; height:16px;
  border-radius:50%;
  background: var(--color-brown);
  border:2px solid var(--color-white);
  box-shadow: var(--shadow-card-sm);
  cursor:grab;
}
.price-slider__input::-moz-range-thumb{
  pointer-events:auto;
  width:16px; height:16px;
  border-radius:50%;
  background: var(--color-brown);
  border:2px solid var(--color-white);
  box-shadow: var(--shadow-card-sm);
  cursor:grab;
}
.price-slider__input::-moz-range-track{ background:none; border:none; }
.filters-panel__apply{ width:100%; margin-block-start:auto; }
/* ============================================================
   FILTERS PANEL — ≥ 992px : fixed-width drawer per the desktop frame
   ============================================================ */
@media (min-width: 992px){
.filters-panel{ width:814px; gap:32px; }
.filters-panel__close{ width:32px; height:32px; }
.filter-group__head span{ font-size:24px; }
.filter-check__label{ font-size:18px; }
.filter-check__count{ font-size:14px; }
.price-filter__ok{ min-width:auto; min-height:42px; padding:21px 30px; font-size:20px; }
.price-filter__value{ flex:0 0 106px; font-size:18px; }
.filters-panel__apply{ width:100%; max-width:718px; align-self:center; }
.filters-panel{ gap:32px; }
.filter-chips{ gap:16px; }
.filter-chip button,
.filter-chip a{ width:24px; height:24px; }
}
/* ---------- PRODUCT GRID (WooCommerce ul.products) ---------- */
.catalog-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
  width:100%;
}
/* ============================================================
   CATALOG — ≥ 600px
   ============================================================ */
@media (min-width: 600px){
.catalog-grid{ gap:32px; }
}
/* ============================================================
   CATALOG — ≥ 768px
   ============================================================ */
@media (min-width: 768px){
.catalog-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   CATALOG — ≥ 992px
   ============================================================ */
@media (min-width: 992px){
.shop{ gap:40px; }
.shop__toolbar{ justify-content:space-between; }
.filters-toggle{ flex:0 0 auto; width:289px; padding:10px 16px; }
.woocommerce-ordering{ flex:0 0 auto; }
.sort-select select{ padding:10px 44px 10px 16px; font-size: var(--fs-name); }
}
/* ============================================================
   CATALOG — ≥ 1200px : three-column grid
   ============================================================ */
@media (min-width: 1200px){
.catalog-grid{ grid-template-columns: repeat(3, 1fr); gap:32px; }
}