/* =========================================================================
   GETU Shopping - shop archive component CSS
   -------------------------------------------------------------------------
   Ported verbatim from the reference's loja.html inline <style> block
   (quick category chips, active-filter chips, the mobile filter drawer).
   getu-shop.js (the archive's filter/sort/load-more engine) is this file's
   only consumer; the shop archive template (Task 4, getu-shop-tags.php)
   supplies every id/class below.

   NOT scoped under .getu-vanilla-scope / #brx-header (unlike getu-home.css /
   getu-cart.css's own --shadow-float / --ease-out aliases): the shop archive
   carries neither - .getu-vanilla-scope is homepage-only (getu-chrome.php's
   body_class filter, keyed to the page slug 'home') and #product-grid/#filters
   are outside #brx-header entirely. So this file reaches straight for the
   real global custom-property names Bricks itself makes available site-wide
   (--getu-ease-out / --getu-ease-spring / --getu-shadow-float /
   --getu-shadow-raised / --getu-color-wine-600 / --getu-color-gold), the
   same names getu-chrome.css's own sitewide rules use for .btn / .mega-link /
   #search-panel / .ann-msg (none of those are .getu-vanilla-scope-scoped
   either) - not the reference's own shorter aliases, which would silently
   resolve to nothing here and drop every transition/shadow declared with them.

   .pcard / .quick-add / .promo / .reveal(-d1..d4) / .rule-gold are already
   defined in getu-home.css (loaded before this file, enqueued unconditionally
   site-wide) and reused as-is by the server-rendered product cards
   (getu_product_card_html(), shared with the homepage grid) - not redefined
   here. .wish (wishlist heart) is intentionally omitted, same reason as
   getu-home.css: no wishlist button exists in the real card markup.

   Ports to production unchanged: no URLs, no ids, no environment assumptions.
   ========================================================================= */

/* ---- Quick category chips (#chips) --------------------------------------- */
.chip {
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .2s var(--getu-ease-out);
  scroll-snap-align: start;
}
.chip:hover { transform: translateY(-1px); border-color: rgba(110,26,42,.4); }
.chip[aria-pressed="true"] {
  background: var(--getu-color-wine-600);
  color: #fff;
  border-color: var(--getu-color-wine-600);
  box-shadow: 0 4px 12px rgba(110,26,42,.28);
}
.chips-row { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.chips-row::-webkit-scrollbar { display: none; }

/* ---- Active filter chips (#active-filters, removable) --------------------- */
.fchip { transition: background-color .2s, border-color .2s; }
.fchip:hover { border-color: var(--getu-color-wine-600); }

/* ---- Filter drawer (mobile slide-over; static sidebar on desktop) --------- */
#filters { transition: transform .35s var(--getu-ease-out); }
#filter-backdrop { transition: opacity .3s var(--getu-ease-out); }

@media (prefers-reduced-motion: reduce) {
  #filters { transition: none; }
}

/* ===== facet fixes (prod): peer-checked + preflight list-reset not compiled ===== */
/* remove browser bullets + indent on facet lists */
ul:has(input[data-kind]),
aside ul,
.getu-shop ul:has(> li label) { list-style: none !important; margin: 0 !important; padding-left: 0 !important; }
/* checkbox filled + checkmark visible when checked (native :checked, no Tailwind peer needed) */
input[data-kind]:checked + span,
label input[type="checkbox"]:checked + span.grid { background: var(--getu-color-wine-600, #6E1A2A) !important; border-color: var(--getu-color-wine-600, #6E1A2A) !important; }
input[data-kind]:checked + span > svg,
label input[type="checkbox"]:checked + span.grid > svg { opacity: 1 !important; color: var(--getu-color-cream, #F6F1EA) !important; }

/* ===== prod Bricks strips Tailwind's border-style:solid → none, making every
   .border box (facet checkbox/radio squares, cards) render invisible.
   Restore border-style so the .border width:1px becomes visible again. ===== */
.woocommerce [class~="border"],
aside [class~="border"],
.getu-shop [class~="border"],
[class~="border"]:has(> svg),
input + span[class~="border"] { border-style: solid !important; }

/* ===== facet label text is grey (#9e9e9e) on prod (inherits a WooCommerce
   archive text color) instead of dark ink. Force ink; keep the count muted. ===== */
aside label,
.getu-shop label,
aside .facet label { color: var(--getu-color-ink, #241015) !important; }
aside label .ml-auto,
.getu-shop label .ml-auto { color: rgba(36,16,21,.4) !important; }