/* ==========================================================================
   WheelsHome — shop / brand archive (real WooCommerce query + pagination)
   ========================================================================== */

/* ---------- PAGE HERO extras (ghost text + glows, on top of the shared
   .page-hero rule in wheelshome-base.css) ---------- */
.page-hero .ghost-text{position:absolute;z-index:0;right:-1vw;top:-18%;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);font-family:'Bebas Neue';font-size:clamp(5rem,12vw,10.5rem);line-height:.82;letter-spacing:.01em;white-space:nowrap;pointer-events:none;user-select:none;}
.page-hero .glow-blob{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;pointer-events:none;z-index:0;}
.page-hero .glow-1{width:380px;height:380px;background:radial-gradient(circle,rgba(255,90,31,.42),transparent 70%);top:-22%;right:6%;animation:pulse 9s ease-in-out infinite;}
.page-hero .glow-2{width:300px;height:300px;background:radial-gradient(circle,rgba(255,184,77,.24),transparent 70%);bottom:-32%;left:-2%;animation:pulse 11s ease-in-out infinite 1.2s;}
.page-hero p.lead{color:var(--muted);font-size:15px;line-height:1.65;max-width:560px;}

/* ---------- CATALOG LAYOUT ---------- */
.catalog-layout{display:grid;grid-template-columns:272px 1fr;gap:32px;align-items:start;}

/* ---------- FILTER PANEL ---------- */
.filter-panel{border:1px solid var(--line);border-radius:24px;background:var(--panel);backdrop-filter:blur(18px);padding:22px;position:sticky;top:104px;}
.filter-panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.filter-panel-top h3{font-family:'Bebas Neue';font-size:20px;letter-spacing:.01em;color:#fff;}
.filter-close{display:none;}
.filter-group{margin-bottom:26px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group h4{font-family:'Bebas Neue';font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:13px;}
.chip-toggle,.swatch-toggle{position:relative;display:inline-flex;cursor:pointer;}
.chip-toggle input,.swatch-toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.chip-toggle input:focus-visible + .chip,.swatch-toggle input:focus-visible + .swatch{outline:2px solid var(--ember2);outline-offset:2px;}
.check-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;}
.check-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;cursor:pointer;color:#ddd;}
.check-row input{width:16px;height:16px;accent-color:var(--ember);cursor:pointer;flex:none;}
.check-row b{margin-left:auto;color:var(--muted);font-weight:700;font-size:11.5px;white-space:nowrap;}
.check-row--color span:not(.color-dot){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.color-dot{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid var(--line-strong);}
.color-dot[data-color="black"]{background:#1c1c1e;}
.color-dot[data-color="gunmetal"]{background:#5a5f68;}
.color-dot[data-color="bronze"]{background:#8a5a34;}
.color-dot[data-color="other"]{background:linear-gradient(135deg,#8a8a8a,#3a3a3a);}

/* ---------- TOOLBAR + ACTIVE FILTERS ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.result-count{color:var(--muted);font-size:13.5px;}
.result-count b{color:#fff;}
.toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mobile-filter-btn{display:none;}
.woocommerce-ordering{margin:0;}
select.orderby{height:44px;border:1px solid var(--line-strong);border-radius:999px;background:#0d0d10;color:#fff;padding:0 36px 0 18px;font-size:12.5px;font-weight:700;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#999 50%),linear-gradient(135deg,#999 50%,transparent 50%);
  background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel2);color:#eee;font-size:11.5px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.02em;}
.pill span{color:var(--ember2);font-size:14px;line-height:1;}
.clear-all{color:var(--ember2);font-size:11.5px;font-weight:800;text-transform:uppercase;background:transparent;border:0;cursor:pointer;letter-spacing:.03em;padding:0 4px;}

/* ---------- WOOCOMMERCE PAGINATION ---------- */
.woocommerce-pagination{display:flex;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap;}
.woocommerce-pagination .page-numbers{height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:#fff;font-weight:800;font-size:13px;transition:.2s;}
.woocommerce-pagination a.page-numbers:hover{border-color:#fff;background:var(--panel2);}
.woocommerce-pagination .page-numbers.current{background:linear-gradient(120deg,var(--ember),#ff8a3d);border-color:transparent;color:#0a0a0a;}
.woocommerce-pagination .page-numbers.dots{border-color:transparent;background:transparent;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1180px){
  .products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .catalog-layout{grid-template-columns:1fr;}
  .filter-panel{
    position:fixed;top:0;left:-100%;width:min(360px,86vw);height:100%;z-index:210;
    overflow-y:auto;transition:left .4s cubic-bezier(.2,.8,.2,1);border-radius:0;
    background:rgba(9,9,12,.98);border:0;border-right:1px solid var(--line);padding:24px;
  }
  .filter-panel.drawer-open{left:0;}
  .filter-close{display:grid;}
  .mobile-filter-btn{display:inline-flex;}
}
@media(max-width:680px){
  .breadcrumb{padding-top:96px;}
  .page-hero{padding:18px 20px 34px;}
  .page-hero .ghost-text{display:none}
  .toolbar{align-items:flex-start;}

  /* Client wants 3 products per row on mobile catalog instead of 1. The
     shared .product card (wheelshome-base.css) overlays the title/price on
     top of a full-bleed background image with a fixed push-down offset —
     that only works for short titles; this catalog's product names are long
     descriptive strings (fitment notes baked into the name), so at 1/3
     width they overflowed the fixed text area and spilled over the image.
     Mobile catalog cards get a normal stacked layout instead: a square
     image up top, then title (clamped to 2 lines) / spec / price below it
     in normal flow, so the text area grows only as tall as it needs to.
     Scoped to .catalog-main so the homepage shelves and related-products
     strip keep their existing large overlay-style mobile card. */
  .catalog-main .products{grid-template-columns:repeat(3,1fr);gap:8px;}
  .catalog-main .product{
    min-height:0;position:relative;display:block;padding:0;border-radius:14px;
  }
  .catalog-main .product-media{position:relative;inset:auto;aspect-ratio:1/1;}
  .catalog-main .product-media:after{display:none;}
  .catalog-main .product .badge{top:6px;right:6px;padding:3px 6px;font-size:7.5px;letter-spacing:0;}
  .catalog-main .product-body{
    position:static;z-index:auto;margin-top:0;padding:7px 7px 28px;
  }
  .catalog-main .product h3{
    font-size:11px;line-height:1.25;margin-bottom:3px;letter-spacing:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .catalog-main .product .spec-line{
    font-size:7.5px;line-height:1.3;margin-bottom:3px;letter-spacing:0;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  }
  .catalog-main .product .price{font-size:12px;}
  .catalog-main .add{width:24px;height:24px;right:6px;bottom:6px;font-size:13px;}
}