/* ==========================================================================
   Shop archive — toolbar, filter panel, grid/list, promo band
   Product cards live in theme.css so every view that shows one gets them.
   ========================================================================== */

/* page head backdrop (shared with pages.css when both load) */
.pagehead.has-bg{padding:52px 0 46px}
.pagehead .phbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.pagehead.has-bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.7) 60%,rgba(18,18,18,.45) 100%)}
/* Search box in the page head on a results page, so the term stays visible and
   editable without scrolling back up to the header. */
.ph-search{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;position:relative;z-index:1}
.ph-search input[type=search]{flex:1;min-width:220px;max-width:420px;height:46px;
  border:2px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;
  padding:0 14px;font-size:15px;font-family:inherit;outline:none}
.ph-search input[type=search]::placeholder{color:rgba(255,255,255,.55)}
.ph-search input[type=search]:focus{border-color:var(--gold);background:rgba(255,255,255,.14)}
.ph-search button{height:46px;padding:0 18px;border:0;border-radius:10px;background:var(--red);color:#fff;
  cursor:pointer;display:grid;place-items:center;transition:.15s}
.ph-search button:hover{background:var(--red-dark)}
.ph-search button .ic{width:19px;height:19px;stroke-width:2.2}
.ph-clear{color:#fff;font-size:14px;font-weight:700;text-decoration:underline;opacity:.85}
.ph-clear:hover{color:var(--gold)}

.phfacts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;position:relative;z-index:1}
.phfacts div{font-size:14px;color:#c8ccd1}
.phfacts b{display:block;color:var(--gold);font-size:19px;font-weight:900;line-height:1.2}

/* ------------------------------------------------------------- toolbar ---- */
.shopbar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow);margin-bottom:16px}
.filterbtn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border:none;border-radius:9px;
  padding:10px 16px;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer;transition:.15s}
.filterbtn:hover{background:var(--red)}
.filterbtn .ic{width:17px;height:17px}
.filterbtn .fn{background:var(--gold);color:var(--ink);border-radius:100px;min-width:20px;height:20px;padding:0 6px;
  font-size:11.5px;font-weight:900;display:grid;place-items:center}
.filterbtn .caret{font-size:9px;opacity:.8;transition:transform .2s}
.filterbtn:not(.collapsed) .caret{transform:rotate(180deg)}
.shopbar .count{font-size:14px;color:var(--muted);margin:0}
.shopbar .ctrl{display:flex;align-items:center;gap:8px;margin:0}
.shopbar .ctrl:first-of-type{margin-left:auto}
.shopbar .ctrl label{font-size:13.5px;color:var(--muted);font-weight:700;white-space:nowrap;margin:0}
.selw{position:relative;display:inline-flex}
.selw::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.selw select{appearance:none;border:1.5px solid var(--line);border-radius:8px;background:#fff;padding:8px 30px 8px 11px;
  font-size:14px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer;outline:none}
.selw select:focus{border-color:var(--red)}
.viewtog{display:flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
.viewtog button{width:38px;height:38px;border:none;background:#fff;color:var(--muted);display:grid;place-items:center;
  cursor:pointer;padding:0;transition:.15s}
.viewtog button+button{border-left:1.5px solid var(--line)}
.viewtog button:hover{color:var(--ink)}
.viewtog button.on{background:var(--red);color:#fff}
.viewtog .ic{width:18px;height:18px}

/* -------------------------------------------------------- filter panel ---- */
.filterpanel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:16px}
.fp-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:22px}
/* Three primary facets, so they share the width rather than leaving a quarter
   empty where the search column used to be. */
.fp-in-main{grid-template-columns:repeat(3,1fr)}
.fp-in-adv{padding-top:4px}

/* "Advanced filters" divider — size, ATM and type only matter once the range
   has been narrowed, so they start folded away. */
.fp-adv{padding:0 22px}
.fp-advtoggle{background:none;border:0;padding:6px 0;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:800;color:var(--red);display:inline-flex;align-items:center;gap:7px}
.fp-advtoggle:hover{color:var(--red-dark)}
.fp-advtoggle .caret{transition:transform .18s}
.fp-advtoggle.collapsed .caret{transform:rotate(-90deg)}
.fp-col{min-width:0}
.fp-t{font-size:13.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink);margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid var(--line);position:relative}
.fp-t::after{content:"";position:absolute;left:0;bottom:-2px;width:36px;height:2px;background:var(--red)}
.fp-t.mt{margin-top:20px}
.hint{font-size:13.5px;color:var(--muted);line-height:1.5;margin:10px 0 0}

.wtags{display:flex;flex-wrap:wrap;gap:7px}
.wtags a{border:1px solid var(--line);border-radius:7px;padding:6px 11px;font-size:13.5px;font-weight:700;color:#4a4f57;
  transition:.14s;background:#fff}
.wtags a:hover{border-color:var(--red);color:var(--red)}
.wtags a.on{background:var(--red);border-color:var(--red);color:#fff}

.fchecks{display:grid;gap:3px;max-height:240px;overflow-y:auto}
/* A visible track tells the reader the list continues, rather than the column
   just appearing to stop mid-way. */
.fchecks.scrolls{max-height:246px;padding-right:10px;scrollbar-width:thin;
  scrollbar-color:#cfd4da transparent;border-right:1px solid var(--line)}
.fchecks.scrolls::-webkit-scrollbar{width:6px}
.fchecks.scrolls::-webkit-scrollbar-track{background:transparent}
.fchecks.scrolls::-webkit-scrollbar-thumb{background:#cfd4da;border-radius:99px}
.fchecks.scrolls::-webkit-scrollbar-thumb:hover{background:#b6bcc4}
.fcheck{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;color:#4a4f57;font-weight:600;transition:.14s}
.fcheck .box{width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;flex:none;background:#fff;
  position:relative;transition:.14s}
.fcheck.on .box{background:var(--red);border-color:var(--red)}
.fcheck.on .box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.fcheck .lbl{flex:1;min-width:0}
.fcheck em{font-style:normal;color:#9aa0a8;font-size:11px;font-weight:700;flex:none}
.fcheck:hover{color:var(--red)}
.fcheck:hover .box{border-color:var(--red)}


/* dual-handle price slider */
.rng{position:relative;height:34px;margin-top:14px}
.rng .track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:3px;background:var(--line)}
.rng .fill{position:absolute;top:15px;height:4px;border-radius:3px;background:var(--red)}
.rng input[type=range]{position:absolute;left:0;right:0;top:8px;width:100%;height:18px;margin:0;background:none;
  appearance:none;pointer-events:none}
.rng input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--red);box-shadow:0 2px 6px rgba(16,24,40,.22);cursor:pointer;pointer-events:auto}
.rng input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--red);
  box-shadow:0 2px 6px rgba(16,24,40,.22);cursor:pointer;pointer-events:auto}
.rng input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--gold);outline-offset:2px}
.rngval{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:10px 0 12px}
.rngval .rl{font-weight:800;color:var(--ink);margin-right:2px}
.rngval b{color:var(--ink);font-weight:800}
.rngval .woocommerce-Price-amount{font-weight:800}
.wfilter{width:100%}

/* Sits outside .fp-in now that the advanced block splits the panel, so it
   carries its own gutter rather than inheriting the grid's padding. */
.fp-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);
  margin:6px 22px 0;padding:16px 0 20px}
.fp-foot .note{font-size:13.5px;color:var(--muted);flex:1;min-width:220px}
.fp-actions{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.fp-actions .ic{width:16px;height:16px}
.wreset{font-weight:800;text-decoration:none}
.btn-outline.wreset{color:var(--red);border-color:var(--red)}
.btn-outline.wreset:hover{background:var(--red);color:#fff}

/* ------------------------------------------------------- active filters --- */
.activefilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.af-label{font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.af-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:6px 12px;font-size:13.5px;font-weight:700;color:var(--ink);transition:.14s}
.af-chip:hover{border-color:var(--red);color:var(--red)}
.af-chip i{font-style:normal;font-size:15px;line-height:1;color:var(--muted)}
.af-chip:hover i{color:var(--red)}
.af-clear{font-size:13.5px;font-weight:800;color:var(--red);text-decoration:underline}

/* ---------------------------------------------------------- product grid -- */
/* list view — one card per row, image beside the copy */
@media(min-width:576px){
  .prod-grid.is-list>.prod-col{width:100%;flex:0 0 100%;max-width:100%}
  .prod-grid.is-list .prod-card{flex-direction:row}
  .prod-grid.is-list .pimg{width:34%;height:auto;min-height:210px;flex:none}
  .prod-grid.is-list .pbody{width:66%;padding:20px 24px}
  .prod-grid.is-list .foot{padding-top:14px}
}

/* ========================================================== responsive ==== */
@media(max-width:1199.98px){
  .fp-in{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:991.98px){
  .pagehead.has-bg{padding:36px 0 32px}
  .shopbar{padding:12px}
  .shopbar .ctrl:first-of-type{margin-left:0}
  .shopbar .count{order:5;width:100%}
}

@media(max-width:767.98px){
  .fp-in{grid-template-columns:1fr;gap:20px;padding:18px}
  .shopbar{gap:10px 12px}
  .shopbar .ctrl label{display:none}
  .filterbtn{flex:1}
  .phfacts{gap:10px 18px}
  .phfacts b{font-size:17px}
}

@media(max-width:575.98px){
  .prod-card .foot{flex-direction:column;align-items:stretch;gap:10px}
  .prod-card .foot .btn{width:100%}
  .viewtog{display:none}
  .activefilters{gap:7px}
  .af-chip{font-size:13.5px;padding:5px 10px}
}