/* ==========================================================================
 * MIXORA — mixora-category.css (Product Category & Archive Layout Alignment)
 * Version: 1.0.0 | Matches Header Shell Width on Desktop & Mobile
 * ==========================================================================
 * HOW IT WORKS:
 * - Desktop: Shell width = min(calc(100vw - (var(--mixora-shell-gutter) * 2)), var(--mixora-shell-width)) (same as header & footer).
 * - Mobile: Shell width = calc(100vw - (var(--mixora-shell-gutter-mobile) * 2)) (starts at 12px, ends at 100vw - 12px).
 * - Strips unwanted inner paddings (10px + 20px + 14px) so products align 1:1 with header.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. DESKTOP & TABLET (> 767px)
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Category Page Content Outer Container (Elementor 2047 & Shop 30) */
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-shell,
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-shell > .e-con-inner,
  .mx-archive-template .elementor-element.mx-archive-shell,
  .mx-archive-template .elementor-element.mx-archive-shell > .e-con-inner,
  .post-type-archive-product .mx-shop-template .elementor-element.mx-shop-shell,
  .post-type-archive-product .mx-shop-template .elementor-element.mx-shop-shell > .e-con-inner {
    width: min(calc(100vw - (var(--mixora-shell-gutter, 32px) * 2)), var(--mixora-shell-width, 1370px)) !important;
    max-width: var(--mixora-shell-width, 1370px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* Reset all nested containers so the grid gets the full 1370px width */
  .tax-product_cat .mx-archive-template .mx-archive-inner-1,
  .tax-product_cat .mx-archive-template .mx-archive-inner-2,
  .tax-product_cat .mx-archive-template .mx-archive-content,
  .tax-product_cat .mx-archive-template .mx-archive-inner-3,
  .tax-product_cat .mx-archive-template .elementor-shortcode,
  .mx-archive-template .mx-archive-inner-1,
  .mx-archive-template .mx-archive-inner-2,
  .mx-archive-template .mx-archive-content,
  .mx-archive-template .mx-archive-inner-3,
  .mx-archive-template .elementor-shortcode,
  .post-type-archive-product .mx-shop-template .mx-shop-inner-1,
  .post-type-archive-product .mx-shop-template .mx-shop-inner-2,
  .post-type-archive-product .mx-shop-template .elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* Filter wrapper & product grid */
  .tax-product_cat .mxswpf-root,
  .mx-archive-template .mxswpf-root,
  .post-type-archive-product .mxswpf-root {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .tax-product_cat .mxswpf-root .mixora-results,
  .mx-archive-template .mxswpf-root .mixora-results,
  .post-type-archive-product .mxswpf-root .mixora-results {
    width: 100% !important;
    max-width: 100% !important;
  }

  .tax-product_cat .mxswpf-root .mixora-product-grid,
  .mx-archive-template .mxswpf-root .mixora-product-grid,
  .post-type-archive-product .mxswpf-root .mixora-product-grid {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
 * 2. MOBILE (<= 767px)
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Category Page Content Outer Container matches Header (100vw - 2*12px = calc(100vw - 24px)) */
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-shell,
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-shell > .e-con-inner,
  .mx-archive-template .elementor-element.mx-archive-shell,
  .mx-archive-template .elementor-element.mx-archive-shell > .e-con-inner,
  .post-type-archive-product .mx-shop-template .elementor-element.mx-shop-shell,
  .post-type-archive-product .mx-shop-template .elementor-element.mx-shop-shell > .e-con-inner {
    width: calc(100vw - (var(--mixora-shell-gutter-mobile, 12px) * 2)) !important;
    max-width: calc(100vw - (var(--mixora-shell-gutter-mobile, 12px) * 2)) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    padding-bottom: 90px !important; /* Clearance for fixed mobile bottom nav bar */
    box-sizing: border-box !important;
  }

  /* Reset all nested container paddings (kills the 10px + 20px insets) */
  .tax-product_cat .mx-archive-template .mx-archive-inner-1,
  .tax-product_cat .mx-archive-template .mx-archive-inner-2,
  .tax-product_cat .mx-archive-template .mx-archive-content,
  .tax-product_cat .mx-archive-template .mx-archive-inner-3,
  .tax-product_cat .mx-archive-template .elementor-shortcode,
  .mx-archive-template .mx-archive-inner-1,
  .mx-archive-template .mx-archive-inner-2,
  .mx-archive-template .mx-archive-content,
  .mx-archive-template .mx-archive-inner-3,
  .mx-archive-template .elementor-shortcode,
  .post-type-archive-product .mx-shop-template .mx-shop-inner-1,
  .post-type-archive-product .mx-shop-template .mx-shop-inner-2,
  .post-type-archive-product .mx-shop-template .elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* Override filter.css line 300: .mxswpf-root { padding: 0 14px !important; } */
  .tax-product_cat .mxswpf-root,
  .mx-archive-template .mxswpf-root,
  .post-type-archive-product .mxswpf-root {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* Mobile toolbar (Filters toggle button + Sort select) matches exact 100% width */
  .tax-product_cat .mxswpf-root .mixora-mobile-toolbar,
  .mx-archive-template .mxswpf-root .mixora-mobile-toolbar,
  .post-type-archive-product .mxswpf-root .mixora-mobile-toolbar {
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    gap: 10px !important;
  }

  /* Category title and count header */
  .tax-product_cat .mxswpf-root .mixora-results-head,
  .mx-archive-template .mxswpf-root .mixora-results-head,
  .post-type-archive-product .mxswpf-root .mixora-results-head {
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* Product grid on mobile (spans full width of container, 2 columns) */
  .tax-product_cat .mxswpf-root .mixora-product-grid,
  .mx-archive-template .mxswpf-root .mixora-product-grid,
  .post-type-archive-product .mxswpf-root .mixora-product-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
    margin-inline: 0 !important;
  }

  /* Product card elements */
  .tax-product_cat .mxswpf-root .mixora-product-card,
  .mx-archive-template .mxswpf-root .mixora-product-card,
  .post-type-archive-product .mxswpf-root .mixora-product-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tax-product_cat .mxswpf-root .mixora-product-action,
  .mx-archive-template .mxswpf-root .mixora-product-action,
  .post-type-archive-product .mxswpf-root .mixora-product-action {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
  }
}