/**
 * Design System WooCommerce Overrides — Tienda Mágica
 * Feature:  002-woocommerce-design-system-overrides
 * Branch:   002-woocommerce-design-system-overrides
 * Created:  2026-03-27
 *
 * Purpose: Override WooCommerce default styles with design-system tokens.
 *          All values MUST reference var(--token) — zero hardcoded colors/spacing.
 *          Depends on: design-system.css (Phase 1 tokens must load first).
 *
 * Sections:
 *   1. ProductCard & Shop Grid    (US1 — T004–T009)
 *   2. Add-to-Cart Buttons        (US2 — T010–T012)
 *   3. Single Product Page        (US3 — T013–T015)
 *   4. Cart Page                  (US4 — T016–T018)
 *   5. Checkout Page              (US5 — T019–T022)
 *   6. Mini Cart / Flyout Drawer  (US6 — T023–T025)
 *   7. Elementor Conflict Overrides (US7 — T027)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. PRODUCT CARD & SHOP GRID
   US1 — T004–T009 | FR-002, FR-003 | SC-001
   ═══════════════════════════════════════════════════════════════════════════ */

/* T004: ProductCard base — rounded, bordered, shadowed (US1 scenario 1)
   Classic WooCommerce shortcode + WooCommerce Blocks (FSE) selectors */
.products .product,
ul.products li.product,
li.wc-block-product {
  border-radius: 20px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* T005 [P]: ProductCard hover — elevate (US1 scenario 2) */
.products .product:hover,
ul.products li.product:hover,
li.wc-block-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* T006 [P]: Product image — consistent aspect ratio; no-image fallback via wrapper
   Classic + Blocks selectors */
.woocommerce-loop-product__link img,
.wc-block-components-product-image img {
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* FEATURE 005 — T006 [US2]: Image fix con !important — FSE theme overridea con mayor especificidad
   (ver plan.md Complexity Tracking). Selectores clásicos directos para CLS = 0 (FR-003, FR-004). */
.woocommerce .woocommerce-loop-product__link img,
li.product img.attachment-woocommerce_thumbnail {
  aspect-ratio: 4 / 4.2 !important;
  object-fit: cover !important;
  width: 100%;
  display: block;
}

/* T007 [P]: Product card typography — classic + block selectors */
.woocommerce-loop-product__title,
.wc-block-product .wp-block-post-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
}

/* T003 AUDIT — Selectores con mismatch en FSE theme (Hostinger AI Theme):
   - `.products .price .amount` usa clase `.amount` (WooCommerce classic shortcode).
     El DOM FSE usa `.woocommerce-Price-amount` dentro de `span.price` — selector NO matchea.
   - `.woocommerce-loop-product__link img` sin `!important` — tema FSE aplica
     `aspect-ratio: auto !important` via su propio stylesheet, overrideando este valor.
   Solución: añadir selectores directos con `.woocommerce-Price-amount` (T004–T005)
   y selectores de imagen con `!important` (T006). Los selectores originales se conservan
   para compatibilidad con instalaciones sin FSE. */

/* FEATURE 002 — Selectores originales (mantener para compatibilidad shortcode classic) */
.products .price .amount,
ul.products .price .amount,
.wc-block-components-product-price .woocommerce-Price-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

.products .price del .amount,
ul.products .price del .amount,
.wc-block-components-product-price del .woocommerce-Price-amount {
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* FEATURE 005 — T004 [US1]: Precios activos — selectores directos FSE (FR-001)
   Selectores adaptados al DOM del Hostinger AI Theme (FSE): span.price > .woocommerce-Price-amount */
.woocommerce .price .woocommerce-Price-amount,
.product .price .woocommerce-Price-amount,
span.price .woocommerce-Price-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

/* FEATURE 005 — T005 [US1]: Precio tachado — muted + semitransparente (FR-002, TS-002) */
span.price del .woocommerce-Price-amount {
  color: var(--color-text-muted);
  opacity: 0.6;
  font-weight: 400;
}

/* T008 [P]: Sale badge — accent pill (US1 scenario 3) */
.onsale {
  background: var(--color-accent);
  color: var(--color-light);
  border-radius: 999px;
  padding: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
}

/* T009: Responsive shop grid — 4-col → 2-col → 1-col (US1 scenario 4, FR-003)
   Classic (ul.products) + WooCommerce Blocks (.wc-block-product-template) */
ul.products,
.wc-block-product-template {
  display: grid !important;
  gap: var(--space-md) !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Fix: WooCommerce Blocks sets width:100% on li items, which causes circular
   dependency with 1fr tracks — override to auto so grid stretches items correctly */
.wc-block-product-template > li.wc-block-product,
ul.products > li.product {
  width: auto !important;
}

@media (max-width: 1199px) {
  ul.products,
  .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  ul.products,
  .wc-block-product-template {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. ADD-TO-CART BUTTONS
   US2 — T010–T012 | FR-004, FR-005, FR-006 | §IV Single CTA Rule
   ═══════════════════════════════════════════════════════════════════════════ */

/* T010: AddToCartButton base — orange pill CTA (US2 scenario 1) */
.add_to_cart_button,
.single_add_to_cart_button,
.wc-block-components-product-button__button {
  background: var(--color-cta) !important;
  color: var(--color-dark) !important;
  border-radius: 999px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 0.9rem 1.8rem !important;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease !important;
  text-decoration: none;
  display: inline-block;
}

/* T010: Buy Now override → primary violet (§IV Single CTA Rule, FR-005, resolves F-002) */
.woocommerce-variation-add-to-cart .buy-now,
.woocommerce form.cart .buy-now,
a.buy-now,
button.buy-now,
.wp-block-woocommerce-product-buy-now-button {
  background: var(--color-primary) !important;
  color: var(--color-light) !important;
  border-radius: 999px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  border: none !important;
}

/* T011: Button hover states (US2 scenario 2) */
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-product-button__button:hover {
  background: var(--color-cta-dark) !important;
  color: var(--color-dark) !important;
  transform: translateY(-2px);
}

.woocommerce-variation-add-to-cart .buy-now:hover,
.woocommerce form.cart .buy-now:hover,
a.buy-now:hover,
button.buy-now:hover,
.wp-block-woocommerce-product-buy-now-button:hover {
  background: var(--color-primary-dark) !important;
  color: var(--color-light) !important;
}

/* T012: AJAX loading state — preserve pill shape (US2 scenario 3) */
.add_to_cart_button.loading {
  pointer-events: none !important;
  opacity: 0.8 !important;
  cursor: wait !important;
  border-radius: 999px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. SINGLE PRODUCT PAGE
   US3 — T013–T015 | SC-001
   ═══════════════════════════════════════════════════════════════════════════ */

/* T013 [P]: Product gallery — rounded, bordered (US3 scenario 1) */
.single-product .woocommerce-product-gallery {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* T014 [P]: Single product typography (US3 scenario 1) */
.single-product .product_title.entry-title {
  font-family: var(--font-heading);
  font-weight: 700;
}

.single-product .summary .price .amount {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-primary);
}

/* T015 [P]: Category pills, stock indicator, tab states (US3 scenarios 2–3) */
/* Classic (.posted_in a) + Blocks (.wp-block-post-terms a) */
.single-product .posted_in a,
.single-product .taxonomy-product_cat.wp-block-post-terms a,
.single-product .wp-block-post-terms a {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-light) !important;
  border-radius: 999px;
  padding: 0.2rem var(--space-xs);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.single-product .stock.in-stock {
  color: var(--color-success-dark); /* WCAG AA fix: 4.54:1 on white (T030) */
  font-weight: 600;
}

.single-product .stock.in-stock::before {
  content: "✓ ";
}

.single-product .woocommerce-tabs .tabs li a,
.woocommerce-tabs .tabs li a {
  font-family: var(--font-body);
  border-bottom: 2px solid transparent !important;
  transition: border-color 150ms ease;
}

.single-product .woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li.active a {
  border-bottom: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. CART PAGE
   US4 — T016–T018 | FR-005 | SC-001
   ═══════════════════════════════════════════════════════════════════════════ */

/* T016 [P]: Cart page layout — surface bg, rounded table (US4 scenario 1)
   Classic (table.cart) + Blocks (.wc-block-cart-items) */
.woocommerce-cart .woocommerce {
  background: var(--color-surface);
}

table.cart,
table.wc-block-cart-items {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

/* T017 [P]: Cart thumbnails, coupon badge, update-cart ghost (US4 scenario 2)
   Classic + Blocks selectors */
table.cart td.product-thumbnail img,
.wc-block-cart-item__image img {
  border-radius: 8px !important;
  aspect-ratio: 1;
  object-fit: cover;
}

.woocommerce-cart .coupon .input-text + .button,
.cart .coupon-applied,
.wc-block-components-coupon-list-item__label {
  background: var(--color-accent);
  color: var(--color-light);
  border-radius: 999px;
  padding: 0.15rem var(--space-xs);
  font-size: 0.75rem;
  font-weight: 600;
}

table.cart button[name="update_cart"] {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease;
}

table.cart button[name="update_cart"]:hover {
  background: var(--color-surface);
}

/* T018 [P]: Checkout proceed button — btn-cta, full-width mobile (FR-005, US4 scenario 3)
   Classic (.wc-proceed-to-checkout) + Blocks (.wc-block-cart__submit-button) */
.wc-proceed-to-checkout .checkout-button,
.wc-block-cart__submit-button {
  background: var(--color-cta) !important;
  color: var(--color-dark) !important;
  border-radius: 999px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 0.9rem 1.8rem !important;
  text-decoration: none;
  display: inline-block;
  transition: transform 150ms ease, background 150ms ease !important;
}

.wc-proceed-to-checkout .checkout-button:hover,
.wc-block-cart__submit-button:hover {
  background: var(--color-cta-dark) !important;
  color: var(--color-dark) !important;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .wc-proceed-to-checkout .checkout-button,
  .wc-block-cart__submit-button {
    width: 100% !important;
    display: block !important;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CHECKOUT PAGE
   US5 — T019–T022 | FR-006, FR-007, FR-008 | SC-003, SC-004
   ═══════════════════════════════════════════════════════════════════════════ */

/* T019 [P]: Form labels and inputs (FR-006, US5 scenario 1, §V WCAG)
   Classic (.woocommerce-checkout) + Blocks (.wc-block-checkout) */
.woocommerce-checkout .form-row label,
.wc-block-checkout label,
.wp-block-woocommerce-checkout label {
  font-family: var(--font-body);
  font-weight: 600 !important;
  color: var(--color-text);
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="password"],
.wc-block-checkout select,
.wc-block-checkout textarea {
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: outline 100ms ease, border-color 100ms ease;
}

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.wc-block-checkout input[type="text"]:focus,
.wc-block-checkout input[type="email"]:focus,
.wc-block-checkout input[type="tel"]:focus,
.wc-block-checkout input[type="password"]:focus,
.wc-block-checkout select:focus,
.wc-block-checkout textarea:focus {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 0;
  border-color: var(--color-primary) !important;
}

/* T020 [P]: Validation error styles (FR-008, US5 scenario 2) */
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid textarea,
.wc-block-checkout .wc-block-components-validation-error ~ input,
.wc-block-components-text-input.has-error input {
  border-color: var(--color-accent) !important;
}

.woocommerce-checkout .woocommerce-error,
.wc-block-components-validation-error p {
  color: var(--color-text) !important; /* WCAG AA fix: 15.99:1 on white; accent kept for borders (T030) */
}

/* T021 [P]: Order summary sidebar — classic + Blocks */
.woocommerce-checkout #order_review,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--color-surface) !important;
  border-radius: 16px !important;
  padding: var(--space-md) !important;
}

/* T022: Place-order CTA — classic (#place_order) + Blocks (.wc-block-components-checkout-place-order-button) */
.woocommerce-checkout #place_order,
.wc-block-components-checkout-place-order-button {
  background: var(--color-cta) !important;
  color: var(--color-dark) !important;
  border-radius: 999px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  border: none !important;
  width: 100% !important;
  padding: 1rem 1.8rem !important;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease !important;
}

.woocommerce-checkout #place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--color-cta-dark) !important;
  color: var(--color-dark) !important;
  transform: translateY(-2px);
}

/* MercadoPago iframe overflow fix (SC-004) */
.woocommerce-checkout .mp-checkout-container,
.woocommerce-checkout #mp-checkout,
.woocommerce-checkout [id*="mercadopago"],
.woocommerce-checkout [class*="mercadopago"] {
  max-width: 100%;
  overflow-x: hidden;
}

.woocommerce-checkout iframe[src*="mercadopago"],
.woocommerce-checkout iframe[name*="mp"],
.woocommerce-checkout .mercadopago-checkout-pro-modal iframe {
  max-width: 100% !important;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MINI CART / FLYOUT DRAWER
   US6 — T023–T025 | SC-001
   ═══════════════════════════════════════════════════════════════════════════ */

/* T023 [P]: Cart icon badge — orange pill (US6 scenario 1) */
.cart-contents .count {
  background: var(--color-cta);
  color: var(--color-light);
  border-radius: 999px;
  padding: 2px var(--space-xs);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-heading);
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
}

/* T024 [P]: Mini cart panel — white bg, left border (US6 scenario 2) */
.widget_shopping_cart_content {
  background: var(--color-bg);
  border-left: 3px solid var(--color-border);
}

.woocommerce-mini-cart-item img {
  border-radius: 8px;
}

/* T025: Mini cart buttons — view cart ghost, checkout cta */
.widget_shopping_cart_content .button:not(.checkout) {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background 150ms ease;
}

.widget_shopping_cart_content .button:not(.checkout):hover {
  background: var(--color-surface);
}

.widget_shopping_cart_content .checkout {
  background: var(--color-cta);
  color: var(--color-dark);
  border-radius: 999px;
  padding: 0.9rem 1.8rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: transform 150ms ease, background 150ms ease;
  border: none;
}

.widget_shopping_cart_content .checkout:hover {
  background: var(--color-cta-dark);
  color: var(--color-dark);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. ELEMENTOR CONFLICT OVERRIDES
   US7 — T027 | FR-009 | SC-001
   Resolvable conflicts: increased specificity via .elementor-widget-container
   ancestor selector. Irresolvable conflicts documented in contracts/elementor.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* T027: ProductCard inside Elementor products widget */
.elementor-widget-container .products .product,
.elementor-widget-container ul.products li.product {
  border-radius: 20px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.elementor-widget-container .products .product:hover,
.elementor-widget-container ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* T027: Gallery inside Elementor section */
.elementor-widget-container .woocommerce-product-gallery {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* T027: Add-to-cart inside Elementor products widget */
.elementor-widget-container .add_to_cart_button,
.elementor-widget-container .single_add_to_cart_button {
  background: var(--color-cta) !important;
  color: var(--color-dark) !important;
  border-radius: 999px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  border: none !important;
}

.elementor-widget-container .add_to_cart_button:hover,
.elementor-widget-container .single_add_to_cart_button:hover {
  background: var(--color-cta-dark) !important;
  color: var(--color-dark) !important;
}

/* T027: Typography inside Elementor sections */
.elementor-widget-container .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
}

.elementor-widget-container .price .amount {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

/* T027: Price text-color override — Elementor typography widget may set color inline.
   Specificity: 0-2-0 (two classes) — beats Elementor widget class (0-1-0) but loses
   to inline style (1-0-0). Inline-style conflicts documented in contracts/elementor.md. */
.elementor-section .summary .price .amount {
  color: var(--color-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. WOO UI COMPONENTS — FEATURE 005 ADDITIONS
   T007–T011 | FR-005–FR-012 | §I tokens only · §II mu-plugin isolation · §V WCAG AA
   ═══════════════════════════════════════════════════════════════════════════ */

/* T007 [US3]: Breadcrumbs — font-body 0.85rem, links color-primary (FR-005, FR-006)
   Scenario TS-008, TS-009, TS-010 */
.woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.woocommerce-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* T008 [US4]: Ordering controls — select con design system tokens, focus ring WCAG AA
   Scenario TS-011, TS-012, TS-013 */
.woocommerce-ordering select {
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  background: var(--color-bg);
  padding: 0.4rem 0.8rem;
}

.woocommerce-ordering select:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 0;
}

.woocommerce-result-count {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* T009 [US5]: Link "Ver carrito" post add-to-cart — font-heading, color-primary (FR-010)
   Scenario TS-014, TS-015 */
.added_to_cart.wc-forward {
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 150ms ease;
}

.added_to_cart.wc-forward:hover {
  border-bottom-color: var(--color-primary);
}

/* T010 [US6]: Card padding interno consistente con tokens (FR-011, TS-016, TS-017) */
li.product .woocommerce-loop-product__title {
  padding: var(--space-sm);
}

li.product .price {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

li.product .button {
  margin: var(--space-xs) var(--space-sm);
}

/* T011 [US6]: Shop page heading — font-heading extra-bold (FR-012, TS-018) */
.woocommerce-products-header__title.page-title,
.wp-block-query-title {
  font-family: var(--font-heading);
  font-weight: 800;
  margin-bottom: var(--space-md);
}

/* ============================================================
   T007 / FR-005: Badge "Nuevo" — products ≤30 days old
   Position: top-right, opposite corner from .onsale (top-left)
   WCAG AA: --color-dark (#1E1B4B) on --color-accent (#EC4899) = 4.8:1 ✅
   ============================================================ */
.magica-badge-nuevo {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  background: var(--color-accent);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
  line-height: 1.4;
  pointer-events: none;
}

/* ============================================================
   T009 / FR-006, FR-007: Shop filter layout
   Desktop: sidebar (240px) + product grid flex row
   Mobile ≤767px: stacked vertical, filters on top
   ============================================================ */
.magica-shop-layout {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.magica-shop-filters {
  flex: 0 0 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-sm);
  position: sticky;
  top: 80px;
}

/* Active filter pills */
.wc-block-active-filters__list-item {
  background: var(--color-surface);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--color-text);
}

.wc-block-active-filters__list-item .wc-block-active-filters__list-item-remove {
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .magica-shop-layout {
    flex-direction: column;
  }
  .magica-shop-filters {
    position: static;
    order: -1;
    margin-bottom: var(--space-md);
    flex: unset;
    width: 100%;
  }
}