.layout-left-column__grid{
  display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; padding-top:32px;
}
.layout-left-column__sidebar{ font-size:14px; }

.page-title{
  max-width:var(--max); margin:0 auto; padding:40px 32px 8px;
  display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:center;
}.page-title h1{ font-size:38px; margin-bottom:10px; }
.page-title p{ color:var(--ink-soft); max-width:56ch; font-size:15px; }

.page-title-tile{
  border-radius:20px; padding:28px; min-height:180px; position:relative; overflow:hidden;
  background:rgba(185,196,170,.45);
  display:flex; align-items:center; justify-content:center;
}
.category-art{
  max-width:90%; max-height:90%; width:auto; height:auto; object-fit:contain;
  transform:scale(1.3);
}

.products-top{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max); margin:24px auto 0; padding:16px 32px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.products-count{ font-size:14px; color:var(--ink-soft); }
.products-sort{ display:flex; align-items:center; gap:16px; }
.products-sort select{
  border:1px solid var(--line); background:var(--paper); padding:9px 14px;
  font-family:inherit; font-size:14px; border-radius:2px; color:var(--ink);
}
.filter-btn{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--paper);
  padding:9px 16px; border-radius:2px; font-size:14px; cursor:pointer;
}
.filter-btn svg{ width:16px; height:16px; }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; max-width:var(--max); margin:0 auto; padding:40px 32px 20px; }
.card{ position:relative; }
.card .quick-add{
  position:absolute; bottom:12px; left:12px; right:12px;
  background:var(--paper); border-radius:2px; padding:10px; text-align:center;
  font-size:13px; font-weight:600; opacity:0; transform:translateY(6px); transition:.2s;
}
.card:hover .quick-add{ opacity:1; transform:translateY(0); }

.pagination{ display:flex; justify-content:center; gap:8px; max-width:var(--max); margin:0 auto; padding:20px 32px 64px; }
.pagination a{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; font-size:14px;
}
.pagination a.active{ background:var(--forest); border-color:var(--forest); color:var(--paper); }

@media(max-width:860px){
  .layout-left-column__grid{ grid-template-columns:minmax(0,1fr); padding-top:8px; gap:0; }
  .layout-left-column__grid > *{ min-width:0; }
  .category-tree{ display:none; } /* the header menu already lists the categories */
  .page-title{ grid-template-columns:1fr; padding:24px 16px 4px; gap:16px; }
  .page-title h1{ font-size:28px; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:16px; padding:24px 16px 12px; }
  .products-top{ flex-direction:column; align-items:flex-start; gap:12px; padding:12px 16px; margin-top:16px; }
  .products-sort{ width:100%; justify-content:space-between; gap:10px; }
  .pagination{ padding:16px 16px 40px; flex-wrap:wrap; }
}

/* ---- faceted search sidebar (theme override of ps_facetedsearch) -------- */
.wa-filters{ font-size:14px; }
.wa-filters-heading{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; color:var(--ink); }
.wa-filters-clear{ margin-bottom:16px; }
.wa-filters-clear-btn{ background:none; border:none; padding:0; font-family:inherit; font-size:13px; color:var(--ink-soft); cursor:pointer; }
.wa-filters-clear-btn:hover{ color:var(--ink); text-decoration:underline; }
.wa-facet{ padding:16px 0; border-top:1px solid var(--line); }
.wa-facet:first-of-type{ border-top:none; padding-top:0; }
.wa-facet-title{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.wa-facet-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.wa-facet-label{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.wa-facet-label input{ accent-color:var(--forest); width:15px; height:15px; flex-shrink:0; }
.wa-facet-swatch{ width:18px; height:18px; flex-shrink:0; }
.wa-facet-label a{ flex:1; display:flex; justify-content:space-between; gap:8px; color:inherit; }
.wa-facet-label.is-active a{ color:var(--forest); font-weight:600; }
.wa-facet-count{ color:var(--ink-soft); font-weight:400; }
.wa-facet-select{ width:100%; border:1px solid var(--line); background:var(--paper); padding:8px 10px; font-family:inherit; font-size:14px; border-radius:2px; }
.wa-facet-range-label{ font-size:13px; color:var(--ink-soft); margin-bottom:10px; }

.wa-active-filters{ max-width:var(--max); margin:16px auto 0; padding:0 32px; }
.wa-active-filters.hide{ display:none; }
.wa-active-filters-title{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.wa-active-filters-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wa-active-filter-chip{
  display:flex; align-items:center; gap:8px; background:var(--paper-deep); border-radius:20px;
  padding:6px 8px 6px 14px; font-size:13px;
}
.wa-active-filter-remove{
  display:flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--line); font-size:15px; line-height:1; color:var(--ink); text-decoration:none;
}
.wa-active-filter-remove:hover{ background:var(--ink); color:var(--paper); }

/* ---- offcanvas faceted panel (mobile filter drawer) ---------------------- */
@media(min-width:861px){
  .filter-btn{ display:none; } /* desktop already shows the sidebar, no need for the trigger */
}

.offcanvas-faceted{
  position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none;
}
.offcanvas-faceted.is-open{ visibility:visible; pointer-events:auto; }

.offcanvas-faceted__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.4);
  opacity:0; transition:opacity .25s ease;
}
.offcanvas-faceted.is-open .offcanvas-faceted__backdrop{ opacity:1; }

.offcanvas-faceted__panel{
  position:absolute; top:0; left:0; bottom:0; width:min(320px,86vw);
  background:var(--paper); box-shadow:2px 0 24px rgba(0,0,0,.15);
  transform:translateX(-100%); transition:transform .3s ease;
  display:flex; flex-direction:column;
}
.offcanvas-faceted.is-open .offcanvas-faceted__panel{ transform:translateX(0); }

.offcanvas-faceted__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 16px; border-bottom:1px solid var(--line);
}
.offcanvas-faceted__title{ font-size:16px; font-weight:700; margin:0; }
.offcanvas-faceted__close{
  background:none; border:none; font-size:24px; line-height:1; cursor:pointer;
  color:var(--ink-soft); padding:4px;
}
.offcanvas-faceted__close:hover{ color:var(--ink); }

.offcanvas-faceted__body{ padding:20px; overflow-y:auto; flex:1; }

@media(min-width:861px){
  .offcanvas-faceted{ display:none; } /* never shown on desktop, sidebar covers it */
}

/* Touch-friendly filter rows on phones/tablets */
@media(max-width:860px){
  .wa-facet-list{ gap:0; }
  .wa-facet-label{ padding:11px 0; }
  .wa-facet-label input{ width:20px; height:20px; }
}
.offcanvas-faceted__close{ min-width:44px; min-height:44px; }