/* ============================================================
   PURIFINE MOBILE CSS v8.0
   ZMIANA vs v7.0: próg mobilny 768 -> 1300 px (laptopy 13")
   ============================================================ */

/* ============================================================
   DESKTOP - ukryj mobile elementy + fix podwójnego switchera
   ============================================================ */
@media screen and (min-width: 1301px) {
  .mobile-bottom-nav,
  .mobile-search-wrapper,
  .mobile-product-categories {
    display: none !important;
  }

  /* Ukryj wSelect (duplikat) - zostaw nice-select z flagą */
  form#alg_currency_selector div.wSelect,
  form#alg_currency_selector .wSelect-theme-classic {
    display: none !important;
    visibility: hidden !important;
  }

  form#alg_currency_selector .nice-select {
    display: block !important;
    visibility: visible !important;
  }
}

/* ============================================================
   MOBILE (max-width: 1300px)
   ============================================================ */
@media screen and (max-width: 1300px) {

  /* NUCLEAR FIX kontenery Elementora */
  body, #page, .site, .site-content,
  .e-con-inner, .e-con,
  .elementor-element, .elementor-section,
  .elementor-container, .elementor-column,
  .elementor-widget-wrap, .elementor-widget-container,
  [class*="elementor-element-"],
  div[class*="elementor"] {
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  body {
    padding-top: 0 !important;
    padding-bottom: 70px !important;
  }

  /* Ukryj header Elementora na mobile */
  .elementor-location-header,
  header.site-header,
  #masthead,
  .site-header {
    display: none !important;
  }

  /* Ukryj hamburger i desktop nav */
  .menu-toggle, .mobile-menu-toggle, .hamburger,
  button[class*="toggle"], button[class*="menu"],
  button[aria-label*="Menu"],
  .main-navigation, .primary-navigation,
  nav.nav-menu, .desktop-menu, .site-navigation,
  .elementor-nav-menu, .elementor-widget-nav-menu {
    display: none !important;
    visibility: hidden !important;
  }

  /* ============================================================
     WYSZUKIWARKA STICKY
     ============================================================ */
  .mobile-search-wrapper {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9998 !important;
    background: #fff !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-search-trigger {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background: #f5f5f5 !important;
    border: 1px solid #ebebeb !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    height: 40px !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: border-color 0.15s, background 0.15s !important;
  }

  .mobile-search-trigger:active {
    border-color: #7B3F9E !important;
    background: #faf7fd !important;
  }

  .mobile-search-trigger__placeholder {
    font-size: 14px !important;
    color: #aaa !important;
    flex: 1 !important;
  }

  /* ============================================================
     KAFELKI KATEGORII
     ============================================================ */
  .mobile-product-categories {
    display: block !important;
    background: #fff !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-product-categories::-webkit-scrollbar { display: none !important; }

  .mobile-product-categories .cats-inner {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
  }

  .mobile-product-categories a.cat-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    background: #f7f3fb !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    min-width: 80px !important;
    max-width: 100px !important;
    transition: all 0.18s ease !important;
    gap: 4px !important;
  }

  .mobile-product-categories a.cat-tile:hover,
  .mobile-product-categories a.cat-tile:active,
  .mobile-product-categories a.cat-tile.active {
    background: #7B3F9E !important;
    border-color: #7B3F9E !important;
  }

  .mobile-product-categories a.cat-tile:hover .cat-name,
  .mobile-product-categories a.cat-tile:active .cat-name,
  .mobile-product-categories a.cat-tile.active .cat-name {
    color: #fff !important;
  }

  .mobile-product-categories .cat-img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  .mobile-product-categories .cat-img-placeholder {
    width: 40px !important;
    height: 40px !important;
    background: #e8d8f5 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
  }

  .mobile-product-categories .cat-name {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #444 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* ============================================================
     BOTTOM NAV - 5 kolumn
     ============================================================ */
  .mobile-bottom-nav {
    display: grid !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: white !important;
    border-top: 0.5px solid #e0e0e0 !important;
    padding: 8px 0 !important;
    grid-template-columns: repeat(5, 1fr) !important;
    z-index: 99999 !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05) !important;
  }

  .mobile-bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    text-decoration: none !important;
    color: #666 !important;
    font-size: 10px !important;
    padding: 8px 4px !important;
    cursor: pointer !important;
  }

  .mobile-bottom-nav a.active { color: #7B3F9E !important; font-weight: 500 !important; }

  .mobile-bottom-nav .icon { font-size: 22px !important; }

  .mobile-bottom-nav .cart-badge {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    background: #7B3F9E !important;
    color: white !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ============================================================
     SWITCHER WALUTY W BOTTOM NAV
     ============================================================ */
  .mobile-currency-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 8px 4px !important;
    position: relative !important;
    cursor: pointer !important;
    overflow: visible !important;
  }

  /* Form w currency nav - nakrywa cały kafelek */
  .mobile-currency-nav .mobile-currency-form,
  .mobile-currency-nav form {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  .mobile-currency-nav form select {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    border: none !important;
    background: none !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
  }

  .mobile-currency-nav .icon {
    font-size: 22px !important;
    pointer-events: none !important;
  }

  .mobile-currency-label {
    font-size: 10px !important;
    color: #666 !important;
    font-weight: 500 !important;
    pointer-events: none !important;
  }

  /* Ukryj auto-generowane selecty przez wtyczkę */
  .mobile-currency-nav .nice-select,
  .mobile-currency-nav div.wSelect,
  .mobile-currency-nav .wSelect-theme-classic {
    display: none !important;
    visibility: hidden !important;
  }

  /* Nasz natywny select - transparentny, nakrywa kafelek */
  select.mobile-currency-select {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    border: none !important;
    background: none !important;
    z-index: 10 !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
  }

  /* ============================================================
     PRODUKTY - grid 2 kolumny
     ============================================================ */
  .woocommerce ul.products, ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    margin: 0 !important;
  }

  .woocommerce ul.products li.product, ul.products li.product {
    margin: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   NOWE w v8.0 — zakres 769–1300 px (tablety i laptopy 13")
   Ekran jest szeroki, więc 2 kolumny produktów wyglądają pusto.
   Jeśli wolisz wszędzie 2 kolumny — usuń ten blok.
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1300px) {
  .woocommerce ul.products, ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding: 20px 24px !important;
  }

  /* kafelki kategorii mogą być odrobinę większe */
  .mobile-product-categories a.cat-tile {
    min-width: 92px !important;
    max-width: 112px !important;
  }

  .mobile-product-categories .cat-name { font-size: 12px !important; }

  /* wyszukiwarka nie musi być na całą szerokość */
  .mobile-search-wrapper { padding: 10px 24px !important; }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .woocommerce ul.products, ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}