/**
 * listing.css — eBikes category listing (template #7672). Loaded only on the
 * eBikes archive (the legacy shop.css is skipped there). Markup: [peb_ebikes_listing]
 * (inc/peb-listing.php); behaviour: js/peb-listing.js. Tokens from tokens.css.
 * Mirrors mockups/brand-only/listing-playa-ebikes-2026-05-26.html.
 *
 * @package bricks-child
 */

.peb-listing{padding-bottom:40px}

/* breadcrumb (real WooCommerce breadcrumb, restyled) */
.peb-listing .breadcrumb{padding:16px 0 0;font-size:13px;color:var(--muted);font-weight:600}
.peb-listing .breadcrumb a{text-decoration:none;color:var(--muted)}
.peb-listing .breadcrumb a:hover{color:var(--ink)}
.peb-listing .breadcrumb .sep{opacity:.5;margin:0 6px}

/* category header */
.peb-listing .cat-head{padding:18px 0 26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.peb-listing .cat-head h1{font-size:38px}
.peb-listing .cat-head .intro{color:var(--muted);font-size:17px;max-width:46em}

/* rent/buy toggle (shared component pattern) */
.mode-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px;gap:4px}
.mode-toggle button{border:0;background:transparent;color:var(--ink);font-weight:800;font-size:14.5px;padding:10px 20px;border-radius:999px;cursor:pointer;font-family:var(--bfont)}
.mode-toggle button.active{background:var(--accent);color:var(--accent-ink)}

/* small button (view details) */
.btn-sm{padding:10px 18px;font-size:14px}

/* two-column listing layout */
.peb-listing .listing-layout{display:grid;grid-template-columns:248px 1fr;gap:34px;align-items:start;padding-bottom:10px}

/* filters */
.peb-listing .filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 8px;position:sticky;top:84px}
.peb-listing .filters h2{font-size:16px;margin-bottom:4px}
.peb-listing .filters .clear{font-size:12.5px;font-weight:700;color:var(--accent-strong);background:none;border:0;cursor:pointer;padding:0;margin-bottom:10px}
.peb-listing .filter-group{border-top:1px solid var(--border);padding:14px 0}
.peb-listing .filter-group:first-of-type{border-top:0}
.peb-listing .filter-group h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.peb-listing .filter-opt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14.5px;cursor:pointer;min-height:34px}
.peb-listing .filter-opt input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.peb-listing .filter-opt .cnt{margin-left:auto;color:var(--muted);font-size:13px;font-weight:600}

/* toolbar */
.peb-listing .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.peb-listing .toolbar .count{font-weight:700;font-size:15px}
.peb-listing .toolbar .count b{font-family:var(--hfont)}
.peb-listing .toolbar .spacer{margin-left:auto}
.peb-listing .filters-btn{display:none;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--border);border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink);min-height:44px}
.peb-listing .sortwrap{display:flex;align-items:center;gap:8px}
.peb-listing .sortwrap label{font-size:13.5px;color:var(--muted);font-weight:600}
.peb-listing select.sort{appearance:none;background:var(--surface);border:1.5px solid var(--border);border-radius:999px;padding:10px 36px 10px 16px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;font-family:var(--bfont);min-height:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.peb-listing .view-toggle{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:4px}
.peb-listing .view-toggle button{border:0;background:transparent;color:var(--muted);width:38px;height:36px;border-radius:7px;cursor:pointer;font-size:16px;display:grid;place-items:center}
.peb-listing .view-toggle button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

/* product cards */
.peb-listing .products{display:grid;gap:20px}
.peb-listing .products.grid{grid-template-columns:repeat(3,1fr)}
.peb-listing .products.list{grid-template-columns:1fr}
.peb-listing .pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative}
.peb-listing .pcard.featured{border:2px solid var(--accent)}
.peb-listing .pcard .pop{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:5px 10px;border-radius:999px;z-index:1}
.peb-listing .pcard .pic{aspect-ratio:16/12;background:#fff;display:grid;place-items:center;padding:12px}
.peb-listing .pcard .pic img{width:100%;height:100%;object-fit:contain}
.peb-listing .pcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.peb-listing .pcard h3{font-size:19px;margin-bottom:6px}
.peb-listing .pcard .price{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.peb-listing .pcard .price .now{font-size:27px;font-weight:900;font-family:var(--hfont)}
.peb-listing .pcard .price .was{font-size:15px;color:var(--muted);text-decoration:line-through}
.peb-listing .pcard .unit{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:12px}
.peb-listing .pcard ul{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:7px}
.peb-listing .pcard li{display:flex;gap:8px;font-size:14px;align-items:flex-start}
.peb-listing .pcard li .ck{color:var(--accent-strong);font-weight:900;flex:none}
.peb-listing .pcard .stock{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ok);background:var(--ok-bg);padding:5px 10px;border-radius:999px;margin-bottom:14px;align-self:flex-start}
.peb-listing .pcard .stock .d{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.peb-listing .pcard .stock.low{color:#9a5b00;background:#fbeccd}
.peb-listing .pcard .stock.low .d{background:#c9810a}
.peb-listing .pcard .actions{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.peb-listing .pcard .compare-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600;margin-top:10px;cursor:pointer}
.peb-listing .pcard .compare-row input{width:16px;height:16px;accent-color:var(--accent)}

/* list view = horizontal cards */
.peb-listing .products.list .pcard{flex-direction:row}
.peb-listing .products.list .pic{width:300px;flex:none;aspect-ratio:auto}
.peb-listing .products.list .body{flex:1}
.peb-listing .products.list .actions{flex-direction:row;align-items:center}
.peb-listing .products.list .actions .btn{flex:none}

.peb-listing #noResults{color:var(--muted);padding:30px 0;text-align:center}

/* comparison section + table */
.peb-listing .compare-sec{margin-top:14px;border-radius:var(--radius-lg);padding:30px 24px}
.peb-listing .compare-sec h2{text-align:center;font-size:26px;margin-bottom:4px}
.peb-listing .compare-sec .sub{text-align:center;color:var(--muted);font-size:15px;margin-bottom:22px}
.peb-listing table.compare{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:14.5px}
.peb-listing table.compare th,.peb-listing table.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
.peb-listing table.compare thead th{background:var(--bg);font-size:15px}
.peb-listing table.compare thead th.feat{color:var(--accent-strong)}
.peb-listing table.compare th[scope=row]{color:var(--muted);font-weight:700;width:24%}
.peb-listing table.compare td{font-weight:600}
.peb-listing .compare-cards{display:none}

/* help strip */
.peb-listing .help{margin-top:30px;background:var(--hero-grad);color:#fff;border-radius:var(--radius-lg);padding:34px;text-align:center}
.peb-listing .help h2{color:#fff;font-size:26px;margin-bottom:8px}
.peb-listing .help p{color:rgb(255 255 255 /92%);margin-bottom:16px}
.peb-listing .help .btn-primary{background:#fff;color:var(--accent-strong)}

/* ===== responsive (DS §7: 1000 tablet, 760 mobile per listing doc) ===== */
@media (max-width:1000px){
  .peb-listing .listing-layout{grid-template-columns:200px 1fr;gap:22px}
  .peb-listing .products.grid{grid-template-columns:repeat(2,1fr)}
  .peb-listing .cat-head h1{font-size:32px}
}
@media (max-width:760px){
  .peb-listing .listing-layout{grid-template-columns:1fr}
  .peb-listing .filters{position:static;display:none;margin-bottom:18px}
  .peb-listing .filters.open{display:block}
  .peb-listing .filters-btn{display:inline-flex}
  .peb-listing .products.grid,.peb-listing .products.list{grid-template-columns:1fr}
  .peb-listing .products.list .pcard{flex-direction:column}
  .peb-listing .products.list .pic{width:auto;aspect-ratio:16/12}
  .peb-listing .products.list .actions{flex-direction:column;align-items:stretch}
  .peb-listing .cat-head h1{font-size:27px}
  .peb-listing .cat-head{align-items:stretch}
  .peb-listing .mode-toggle{align-self:flex-start}
  .peb-listing table.compare{display:none}
  .peb-listing .compare-cards{display:grid;gap:14px}
  .peb-listing .ccard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
  .peb-listing .ccard h4{font-size:17px;margin:0 0 10px}
  .peb-listing .ccard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
  .peb-listing .ccard dt{color:var(--muted);font-weight:700}
  .peb-listing .ccard dd{margin:0;font-weight:600;text-align:right}
  .peb-listing .help{padding:26px 18px}
}