/*
Shop archive chrome — conditionally enqueued on shop/category/product-search
pages only (see inc/woocommerce.php). Tokens come from main.css :root.
The .pc product cards themselves are styled in main.css (PRODUCT CARDS).
*/

/* ── SHOP PAGE SHELL ─────────────────────────────────── */
.shop-page{padding:24px 0 100px}
.shop-header{margin-bottom:14px}
.shop-header .sec-title{margin-bottom:6px}
.shop-header p,
.shop-header .term-description{font-size:15px;color:var(--mid);max-width:720px;line-height:1.7}

/* Breadcrumb base styles live in woocommerce.css (loads on archives AND
   single product); the PDP layers its ink-bar look in woo-product.css. */

/* ── TOOLBAR (notices, result count, ordering) ───────── */
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.shop-toolbar .woocommerce-notices-wrapper{flex-basis:100%}
.shop-toolbar .woocommerce-notices-wrapper:empty{display:none}
p.woocommerce-result-count{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
form.woocommerce-ordering select.orderby{appearance:none;-webkit-appearance:none;background-color:var(--panel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239BA3AF' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;border:1px solid var(--border);border-radius:2px;color:var(--silver);font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:10px 36px 10px 14px;cursor:pointer;transition:border-color .15s}
form.woocommerce-ordering select.orderby:hover,
form.woocommerce-ordering select.orderby:focus{border-color:var(--gold);outline:none}

/* ── GRID ────────────────────────────────────────────── */
#shop-grid{margin-bottom:48px}

/* ── PAGINATION ──────────────────────────────────────── */
nav.woocommerce-pagination{text-align:center}
nav.woocommerce-pagination ul.page-numbers{display:inline-flex;gap:8px;list-style:none}
nav.woocommerce-pagination ul.page-numbers li a,
nav.woocommerce-pagination ul.page-numbers li span{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;background:var(--panel);border:1px solid var(--border);border-radius:2px;color:var(--silver);font-family:var(--head);font-size:13px;font-weight:700;transition:border-color .15s,color .15s}
nav.woocommerce-pagination ul.page-numbers li a:hover{border-color:var(--gold);color:var(--gold-lt)}
nav.woocommerce-pagination ul.page-numbers li span.current{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ── NO PRODUCTS / ARCHIVE NOTICES ───────────────────── */
.shop-page .woocommerce-info,
.shop-page .woocommerce-message,
.shop-page .woocommerce-error{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:3px;padding:18px 22px;font-size:14px;color:var(--mist);list-style:none}
.shop-page .woocommerce-error{border-left-color:var(--red)}
.shop-page .woocommerce-no-products-found .woocommerce-info{text-align:center;padding:48px 22px}

/* Branded empty archive (pioneer_arms_llc_no_products_found in
   inc/woocommerce.php replaces Woo's bare notice). Matches the .blank-state
   treatment used on blog/search/404 — blog.css is deliberately not loaded on
   WooCommerce archives, so the rules are restated here rather than shared. */
.shop-empty{text-align:center;padding:72px 24px;background:var(--panel);border:1px solid var(--border);border-radius:4px}
.shop-empty-title{font-family:var(--head);font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--white);margin:0 0 12px}
.shop-empty-text{max-width:52ch;margin:0 auto 24px;font-size:15px;line-height:1.7;color:var(--mist)}
.shop-empty-cta{display:inline-block;background:var(--gold);color:var(--ink);border:1.5px solid var(--gold);border-radius:2px;padding:13px 26px;font-family:var(--head);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .15s,border-color .15s}
.shop-empty-cta:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--ink);text-decoration:none}
@media (max-width:600px){.shop-empty{padding:48px 18px}}

/* ── FACETED LAYOUT (WPGB active) ────────────────────── */
/* Structural scaffold for the Phase 4 facet rail — the wpgb-* facet
   internals get their full dark+gold restyle in the next unit. */
.shop-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:start}
/* No facet rail (LTC Classes / gift cards) — grid spans full width */
.shop-layout-full{grid-template-columns:minmax(0,1fr)}
/* No sticky: the rail is taller than the viewport, so pinning it made
   scrolling "pause" mid-filter (James, 2026-07-29) — it scrolls with
   the page instead. */
.shop-filters{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:20px}
.shop-filters-head{font-family:var(--head);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--white);padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid var(--gold)}

/* ── WPGB GRID CARD SKIN ─────────────────────────────── */
/* Dark+gold restyle of the imported production card ("Product Card"),
   applied as theme overrides instead of baking styles into the card's
   compiled CSS — keeps styling in Git and identical per environment.
   The card's admin Custom CSS box is intentionally EMPTY (its former
   rules — title line clamp, media contain — are ported below, restyled).
   Specificity intentionally 4 classes deep to beat WPGB's inline
   card stylesheet. Block map: 2 brand / 3 title / 4 regular price /
   5 price / 1 cart button. */
.shop-page .shop-results .wpgb-card{background:var(--panel);border:1px solid var(--border);border-radius:3px;overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.shop-page .shop-results .wpgb-card:hover{box-shadow:0 12px 36px rgba(0,0,0,.5);transform:translateY(-3px);border-color:var(--gold-dk)}
.shop-page .shop-results .wpgb-card .wpgb-card-inner{text-align:left}
/* Media: contained product photo on the steel panel (ported) */
.shop-page .shop-results .wpgb-card .wpgb-card-media{width:100%;height:170px;overflow:hidden;background:var(--steel)}
.shop-page .shop-results .wpgb-card .wpgb-card-media-thumbnail{margin:16px;background-color:var(--steel)}
.shop-page .shop-results .wpgb-card .wpgb-card-media-thumbnail div{background-size:contain;background-repeat:no-repeat;background-position:center;width:100%;height:100%}
.shop-page .shop-results .wpgb-card .wpgb-card-content,
.shop-page .shop-results .wpgb-card .wpgb-card-body{background:var(--panel)}
.shop-page .shop-results .wpgb-card .wpgb-card-body{padding:18px 18px 20px}
.shop-page .shop-results .wpgb-card .wpgb-block-2,
.shop-page .shop-results .wpgb-card .wpgb-block-2 .wpgb-block-term{color:var(--gold);font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
/* Title: 2-line clamp (ported) */
.shop-page .shop-results .wpgb-card .wpgb-block-3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(1.35em * 2);color:var(--light);font-family:var(--head);font-weight:600;font-size:14px;line-height:1.35;text-transform:none}
.shop-page .shop-results .wpgb-card .wpgb-block-3:hover{color:var(--gold-lt)}
.shop-page .shop-results .wpgb-card .wpgb-block-4{color:var(--mid);font-family:var(--head);font-weight:400;font-size:13px;text-decoration:line-through}
.shop-page .shop-results .wpgb-card .wpgb-block-5{color:var(--white);font-family:var(--head);font-weight:800;font-size:22px}
.shop-page .shop-results .wpgb-card .wpgb-block-1,
.shop-page .shop-results .wpgb-card .wpgb-block-1 a{display:block;background:transparent;color:var(--gold);border-color:var(--gold-dk);font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:center;border-radius:2px}
.shop-page .shop-results .wpgb-card .wpgb-block-1:hover,
.shop-page .shop-results .wpgb-card .wpgb-block-1 a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
/* OOS CTA — muted. The PHP loop path carries .btn-cart-bis; WPGB's
   cart-button block anchor doesn't, so its out-of-stock state is
   "no add_to_cart_button class" (James's production selector logic,
   reused here for styling only — the label/URL are now server-side). */
.shop-page .shop-results .wpgb-card .btn-cart-bis,
.shop-page .shop-results .wpgb-card a.wpgb-block-1:not(.add_to_cart_button){color:var(--mist);border-color:var(--border);font-size:11px}
.shop-page .shop-results .wpgb-card .btn-cart-bis:hover,
.shop-page .shop-results .wpgb-card a.wpgb-block-1:not(.add_to_cart_button):hover{background:var(--steel);color:var(--gold-lt);border-color:var(--gold-lt)}
/* Grid-mode toolbar (result-count + sort facets) and pagination row */
.shop-pagination{margin-top:32px;text-align:center}

/* ── WPGB FACET SKIN ─────────────────────────────────── */
/* Dark+gold restyle of every facet control. Class names harvested from
   wp-grid-builder/includes/frontend/facets/class-*.php. Solid gold-dk
   borders (no translucent gold over dark panels). Inputs assert color
   in base AND :focus — see the Underscores focus-color trap. */

/* Rail facet spacing — facets carry their own titles, so this is the
   only separation needed between them. */
.shop-filters .wpgb-facet{margin-bottom:18px}
.shop-filters .wpgb-facet:last-of-type{margin-bottom:0}

/* Selects + combobox controls (Categories, Barrel Length, Capacity;
   Brands/Caliber = combobox with searchable list) */
.shop-filters select.wpgb-select,
.shop-filters .wpgb-combobox{width:100%;background-color:var(--dark);border:1px solid var(--border);border-radius:2px;color:var(--silver);font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.04em;padding:10px 12px;transition:border-color .15s}
.shop-filters select.wpgb-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239BA3AF' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
.shop-filters select.wpgb-select:hover,
.shop-filters select.wpgb-select:focus,
.shop-filters .wpgb-combobox:hover,
.shop-filters .wpgb-combobox:focus-within{border-color:var(--gold);outline:none;color:var(--silver)}
.shop-filters .wpgb-select-controls{color:var(--mist)}
.shop-filters .wpgb-select-separator{background:var(--border)}
.shop-filters .wpgb-select-toggle{color:var(--mist)}
/* Combobox dropdown list + its type-to-search input (JS-rendered) */
.shop-filters .wpgb-combobox input,
.shop-filters .wpgb-select-facet input{background:var(--dark);border:1px solid var(--border);border-radius:2px;color:var(--silver);font-size:13px;padding:8px 10px}
.shop-filters .wpgb-combobox input:focus,
.shop-filters .wpgb-select-facet input:focus{border-color:var(--gold);outline:none;color:var(--silver)}
.shop-filters [role="listbox"]{background:var(--dark);border:1px solid var(--border);color:var(--silver)}
.shop-filters [role="option"]{padding:8px 12px;font-size:12px;color:var(--mist);cursor:pointer}
.shop-filters [role="option"]:hover,
.shop-filters [role="option"][aria-selected="true"]{background:var(--steel);color:var(--gold-lt)}

/* Radio / checkbox lists (Availability, Location) */
.shop-filters .wpgb-hierarchical-list{list-style:none;margin:0;padding:0}
.shop-filters .wpgb-radio,
.shop-filters .wpgb-checkbox{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--mist);cursor:pointer;transition:color .15s}
.shop-filters .wpgb-radio:hover,
.shop-filters .wpgb-checkbox:hover{color:var(--gold-lt)}
.shop-filters input[type="radio"],
.shop-filters input[type="checkbox"]{accent-color:var(--gold)}
.shop-filters .wpgb-radio-control,
.shop-filters .wpgb-checkbox-control{background:var(--dark);border-color:var(--border);color:var(--gold)}

/* "Show more" toggles */
.shop-filters .wpgb-toggle-hidden{background:none;border:none;color:var(--gold);font-size:12px;font-weight:600;cursor:pointer;padding:6px 0;transition:color .15s}
.shop-filters .wpgb-toggle-hidden:hover{color:var(--gold-lt)}

/* Price range slider */
.shop-filters .wpgb-range-slider{background:var(--border)}
.shop-filters .wpgb-range-progress{background:var(--gold)}
.shop-filters .wpgb-range-thumb{background:var(--gold-lt);border:2px solid var(--ink)}
.shop-filters .wpgb-range-values{color:var(--mist);font-size:12px}
.shop-filters .wpgb-range-clear{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:none;border:none;cursor:pointer;transition:color .15s}
.shop-filters .wpgb-range-clear:hover{color:var(--gold-lt)}

/* Reset button */
.shop-filters .wpgb-button.wpgb-reset{display:block;width:100%;margin-top:18px;background:transparent;border:1.5px solid var(--gold-dk);color:var(--gold);font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:10px;border-radius:2px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.shop-filters .wpgb-button.wpgb-reset:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* Results search facet (above the grid) */
.shop-results .wpgb-search-facet{position:relative;margin-bottom:12px}
.shop-results .wpgb-search-facet .wpgb-input{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:2px;color:var(--silver);font-size:14px;padding:13px 42px 13px 14px;transition:border-color .15s}
.shop-results .wpgb-search-facet .wpgb-input:focus{border-color:var(--gold);outline:none;color:var(--silver)}
.shop-results .wpgb-search-facet .wpgb-input::placeholder{color:var(--mid)}
.shop-results .wpgb-search-facet .wpgb-input-icon{color:var(--mid)}
.shop-results .wpgb-search-facet .wpgb-clear-button{color:var(--mid);background:none;border:none;cursor:pointer}
.shop-results .wpgb-search-facet .wpgb-clear-button:hover{color:var(--gold-lt)}

/* Applied-filter chips (User Selection facet — renders only when
   filters are active) */
.shop-results .wpgb-selection-facet{margin-bottom:12px}
.shop-results .wpgb-selection-facet .wpgb-inline-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.shop-results .wpgb-selection-facet .wpgb-button{display:inline-flex;align-items:center;gap:6px;background:var(--steel);border:1px solid var(--gold-dk);border-radius:20px;color:var(--gold-lt);font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.shop-results .wpgb-selection-facet .wpgb-button:hover{background:var(--dark);border-color:var(--red);color:var(--silver)}
.shop-results .wpgb-selection-facet .wpgb-button-control{color:currentColor}

/* Toolbar facets: result count + sort */
.shop-toolbar .wpgb-result-count{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.shop-toolbar select.wpgb-select,
.shop-toolbar .wpgb-combobox{background-color:var(--panel);border:1px solid var(--border);border-radius:2px;color:var(--silver);font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;transition:border-color .15s;cursor:pointer}
.shop-toolbar select.wpgb-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239BA3AF' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.shop-toolbar select.wpgb-select:hover,
.shop-toolbar select.wpgb-select:focus,
.shop-toolbar .wpgb-combobox:hover,
.shop-toolbar .wpgb-combobox:focus-within{border-color:var(--gold);outline:none;color:var(--silver)}

/* Pagination facet */
.shop-pagination .wpgb-pagination{display:inline-flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.shop-pagination .wpgb-page{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;background:var(--panel);border:1px solid var(--border);border-radius:2px;color:var(--silver);font-family:var(--head);font-size:13px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s}
.shop-pagination .wpgb-page:hover{border-color:var(--gold);color:var(--gold-lt)}
.shop-pagination .wpgb-current-page,
.shop-pagination .wpgb-page[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.shop-pagination .wpgb-dots-page{background:transparent;border:none;color:var(--mid);cursor:default}

/* WPGB design tokens → theme tokens.
   The plugin defines these on :root in public/css/facets.css
   (--wpgb-accent-scheme-1 is #0069ff — the blue that was showing on
   selected radios, the price slider and the chips). Redefining them on
   .shop-layout wins by INHERITANCE for every descendant facet, so it
   works even where WPGB's generated per-facet selectors out-specify
   ours — one block instead of chasing individual controls.
   Only the accent/red/geometry are remapped; the light/dark scheme
   variables are left alone since those controls already render correctly. */
.shop-layout{--wpgb-accent-scheme-1:#C49A3C;--wpgb-red:#B83232;--wpgb-border-radius:2px;--wpgb-border-width:1.5px}

/* Mobile filter drawer toggle (hidden on desktop) */
.shop-filters-toggle{display:none}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .shop-layout{grid-template-columns:1fr}
  /* Rail becomes a collapsible drawer behind the Filters button */
  .shop-filters{display:none;position:static}
  .shop-filters.is-open{display:block}
  .shop-filters-toggle{display:block;width:100%;background:var(--panel);border:1.5px solid var(--gold-dk);color:var(--gold);font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:12px;border-radius:2px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
  .shop-filters-toggle:hover,
  .shop-filters-toggle[aria-expanded="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
}
@media (max-width: 640px) {
  .shop-page{padding-top:24px}
  .shop-toolbar{flex-direction:column;align-items:flex-start}
}