/**
 * HEADER STYLES - Gicleo Theme
 * 
 * Style dla headera, top bar, mobile sidebar, dropdowns.
 * Wyodrębnione z style.css dla lepszej organizacji i kontroli ładowania.
 * 
 * Używane na: wszystkie strony theme + konfigurator
 */

/* ============================================
   TOP BAR - Czarny pasek na górze
   ============================================ */

.gcl-top-bar {
  background-color: #000;
  color: #fff;
  font-size: 0.75rem; /* 12px - text-xs */
  padding: 0.75rem 0; /* py-3 */
}

/* Ukryj na mobile (max-sm:hidden = < 640px) */
@media (max-width: 64em) {
  .gcl-top-bar {
    display: none;
  }
}

.gcl-top-bar__container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem; /* px-4 */
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem; /* gap-x-8 */
  row-gap: 0.5rem; /* gap-y-2 */
  justify-content: center;
  text-align: center;
}

.gcl-top-bar__item {
  display: block;
}

/* ============================================
     MENU PILLS - Primary Menu
     ============================================ */

.primary-menu a .menu-pill {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  color: #333; /* gray-800 */
  transition: all 0.15s ease;
  text-wrap: nowrap;
}
.primary-menu a:hover .menu-pill {
  background: #333;
  color: #fff;
}
.primary-menu .current-menu-item > a .menu-pill,
.primary-menu .current_page_item > a .menu-pill {
  background: #333;
  color: #fff;
  /* text-wrap: nowrap; */
}

/* ============================================
     HEADER - Gicleo Custom Styles (2025)
     ============================================ */

/* Header Container */
.gcl-header {
  background-color: #fff;
  border-bottom: 1px solid #f4f4f4;
}

.gcl-header-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem;
}

.gcl-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  justify-content: space-between;
}

@media all and (max-width: 1023px) {
  .gcl-header-grid {
    gap: 0rem;
    grid-template-columns: 0.5fr 1fr;
  }
}

/* Logo Section */
.gcl-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gcl-header-logo-link {
  display: block;
  line-height: 1;
  text-decoration: none;
}

.gcl-header-logo-img {
  height: 2rem;
  width: 100%;
}

@media all and (max-width: 767px) {
  .gcl-header-logo-img {
    height: 2.65rem;
  }
}

.gcl-header-logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
}

/* Menu Section (Desktop) */
.gcl-header-menu {
  min-width: 0;
  display: block;
}

.gcl-header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gcl-header-nav .primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .gcl-header-nav .primary-menu {
    gap: 8px;
  }
}

/* Icons Section */
.gcl-header-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* gap: 0.375rem; */
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .gcl-header-icons {
    gap: 8px;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
  }
}

/* Header Icon Buttons (Newsletter, Account, Cart, Burger) - Stała wielkość na mobile i desktop */
.gcl-header-icon-btn,
.gcl-header-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem !important; /* 36px - stała wielkość */
  height: 2.25rem !important; /* 36px - stała wielkość */
  min-width: 2.25rem; /* Zapobiega zmniejszaniu */
  min-height: 2.25rem; /* Zapobiega zmniejszaniu */
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.15s ease;
  position: relative;
  flex-shrink: 0; /* Zapobiega zmniejszaniu w flexbox */
}

.gcl-header-icon-btn:hover,
.gcl-header-burger:hover {
  background-color: #f4f4f4;
}

/* WCAG: Focus visible dla przycisków w headerze */
.gcl-header-icon-btn:focus-visible,
.gcl-header-burger:focus-visible {
  outline: 2px solid #e3335a;
  outline-offset: 2px;
}

/* Przyciski dropdown w headerze dziedziczÄ… rozmiar z .gcl-header-icon-btn */
.gcl-header-icons [data-fap-dropdown-root] .gcl-dropdown-trigger {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.gcl-header-cart {
  position: relative;
}

/* .gcl-header-cart-btn inherits from .gcl-header-icon-btn */

.gcl-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  /* padding: 0 0.25rem; */
  border-radius: 9999px;
  background-color: #e3335a;
  color: #fff;
  font-size: 12px; /* 11px */
  line-height: 1;
  font-weight: 500;
}

.gcl-mini-cart-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.75rem; /* 12px odstęp od buttona koszyka */
  min-width: 420px;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden; /* Zapobiega horizontal scroll */
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 998;
  /* Domyślnie ukryty - klasa .gcl-panel-hidden dodawana/usuwana przez JS */
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  /* Better scrolling on iOS and Android */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Mini-cart visible state (header.js usuwa .gcl-panel-hidden) */
.gcl-mini-cart-panel:not(.gcl-panel-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Utility: ukryty panel (dropdown / mini-cart) - dodawane/usuowane przez JS */
.gcl-panel-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Mobile/Tablet - fixed positioning pod headerem, nie wpływa na layout body */
@media (max-width: 1023px) {
  .gcl-mini-cart-panel {
    position: fixed;
    /* DYNAMICZNE pozycjonowanie - wysokość obliczana przez JS (header.js) */
    /* Uwzględnia: WordPress admin bar + top-bar + header */
    top: var(
      --header-with-admin,
      8rem
    ); /* fallback 8rem gdy JS nie zadziała */
    margin-top: 0.75rem; /* 12px odstęp od headera */
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100%;
    margin-bottom: 0;
    border-radius: 1rem;
    /* Dynamiczna max-height - zostaw miejsce na header + admin bar + marginesy */
    max-height: calc(100vh - var(--header-with-admin, 8rem) - 2rem);
    box-sizing: border-box;
    transform: translateX(0);
  }
}

.gcl-mini-cart-panel .widget_shopping_cart_content {
  padding: 1rem;
}

/* Burger Menu Button (Mobile/Tablet) - rozmiar dziedziczony z .gcl-header-icon-btn */
.gcl-header-burger {
  display: none; /* Hidden on desktop */
  flex-direction: column;
  gap: 0.25rem;
}

.gcl-burger-line {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: #333;
  border-radius: 1px;
  transition: all 0.2s ease;
}

.gcl-header-burger[aria-expanded="true"] .gcl-burger-line:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.gcl-header-burger[aria-expanded="true"] .gcl-burger-line:nth-child(2) {
  opacity: 0;
}

.gcl-header-burger[aria-expanded="true"] .gcl-burger-line:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* Mobile Sidebar */
.gcl-mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
  /* Prevent scrolling on body when sidebar is open */
  overflow: hidden;
}

.gcl-mobile-sidebar[aria-hidden="false"] {
  pointer-events: auto;
  visibility: visible;
}

.gcl-sidebar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Ensure overlay is behind panel */
  z-index: 1;
}

.gcl-mobile-sidebar[aria-hidden="false"] .gcl-sidebar-overlay {
  opacity: 1;
}

.gcl-sidebar-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 400px;
  min-width: 280px; /* Minimum width for usability */
  background-color: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth easing */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Ensure panel is above overlay */
  z-index: 2;
  /* Better scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}

.gcl-mobile-sidebar[aria-hidden="false"] .gcl-sidebar-panel {
  transform: translateX(0);
  /* Fallback for older browsers */
  -webkit-transform: translateX(0);
}

.gcl-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-bottom: 1px solid #f4f4f4;
  flex-shrink: 0;
}

.gcl-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #333;
  transition: opacity 0.15s ease;
}

.gcl-sidebar-close:hover {
  opacity: 0.7;
}

.gcl-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  /* Better scrolling on iOS and Android */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling */
  scroll-behavior: smooth;
}

/* Sidebar Navigation */
.gcl-sidebar-nav {
  flex: 1;
  min-height: 0; /* Important for flex scrolling */
  width: 100%;
}

.gcl-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gcl-sidebar-menu li {
  margin: 0;
}

.gcl-sidebar-menu a {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 9999px;
  transition: all 0.15s ease;
}

.gcl-sidebar-menu a:hover .menu-pill,
.gcl-sidebar-menu .current-menu-item > a .menu-pill,
.gcl-sidebar-menu .current_page_item > a .menu-pill {
  background-color: #333;
  color: #fff;
  width: fit-content;
}

.gcl-sidebar-menu .menu-pill {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  color: #333;
  transition: all 0.15s ease;
}

/* Sidebar Actions - REMOVED (ikony sÄ… w headerze) */

/* ============================================
     HEADER DROPDOWNS - Desktop & Mobile/Tablet
     ============================================ */

/* Dropdown Wrapper */
.gcl-dropdown-wrapper {
  position: relative;
  display: flex;
}

/* Dropdown Panel - Desktop & Mobile (absolute positioning, pod przyciskiem) */
.gcl-dropdown-panel {
  position: absolute;
  top: 100%;
  margin-top: 0.75rem;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 50;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  /* Better scrolling on iOS and Android */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  min-width: 24vw;
}

/* Dropdown Panel visible state (header.js usuwa .gcl-panel-hidden) */
.gcl-dropdown-panel:not(.gcl-panel-hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Pozycjonowanie dropdownu */
.gcl-dropdown-panel--right {
  right: 0;
  left: auto;
}
.gcl-dropdown-panel--left {
  left: 0;
  right: auto;
}
.gcl-dropdown-panel--w-default {
  min-width: 360px;
}
.gcl-dropdown-panel--w-wide {
  min-width: 420px;
}

/* Przycisk trigger dropdownu (spójny z .gcl-header-icon-btn) */
.gcl-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.15s ease;
}
.gcl-dropdown-trigger:hover {
  background-color: #f4f4f4;
}
.gcl-dropdown-trigger:focus-visible {
  outline: 2px solid #e3335a;
  outline-offset: 2px;
}

/* Kropka (badge) przy ikonie newsletter – domyślnie ukryta, JS pokazuje tylko gdy brak flagi w sessionStorage (unikamy mignięcia przy odświeżeniu) */
.gcl-dropdown-trigger-badge {
  position: absolute;
  right: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fe7b00;
  pointer-events: none;
  visibility: hidden;
(
  function () {
  const HIDE = ['gcl-panel-hidden'];
  const show = (el) => el.classList.remove(...HIDE);
  const hide = (el) => el.classList.add(...HIDE);

  //
  ---------- DYNAMICZNA WYSOKOŚĆ HEADERA (dla mini-cart i dropdowns na mobile) ----------
  /**
   * Oblicza rzeczywistą wysokość headera (admin bar + top-bar + header) i ustawia CSS variable.
   * Używane do pozycjonowania mini-cart i dropdowns na mobile/tablet.
   * 
   * CSS variables: * - --header-total-height: top-bar + header (bez admin bar)
   * - --admin-bar-height: wysokość WordPress admin bar (0 gdy niezalogowany)
   * - --header-with-admin: admin bar + top-bar + header (wszystko)
   * 
   * Używane w: header.css (@media max-width: 1023px)
   */
  function updateHeaderHeight() {
    const topBar = document.querySelector('.gcl-top-bar');
  const header = document.querySelector('.gcl-header');
  const adminBar = document.getElementById('wpadminbar');
  if (!header) return; //
  Brak headera - nie rób nic
    
    // 1. Wysokość top-bar (0 gdy ukryty na mobile < 640px)
    const topBarHeight = topBar && window.getComputedStyle(topBar).display !== 'none' 
      ? topBar.offsetHeight 
      : 0;
    
    // 2.
  Wysokość headera (zawiera padding + border)
    const headerHeight = header.offsetHeight;
    
    // 3.
  Wysokość WordPress admin bar (0 gdy user niezalogowany lub ukryty)
    const adminBarHeight = adminBar && window.getComputedStyle(adminBar).display !== 'none'
      ? adminBar.offsetHeight
      : 0;
    
    // 4.
  Suma: top-bar + header (bez admin bar - dla relative positioning)
    const totalHeight = topBarHeight + headerHeight;
    
    // 5.
  Suma: admin bar + top-bar + header (dla fixed positioning)
    const totalWithAdmin = adminBarHeight + topBarHeight + headerHeight;
    
    //
  Ustaw CSS variables na :root
    document.documentElement.style.setProperty('--header-total-height', `${totalHeight}
  px`);
    document.documentElement.style.setProperty(
  '--admin-bar-height', `${adminBarHeight}
  px`);
    document.documentElement.style.setProperty(
  '--header-with-admin', `${totalWithAdmin}
  px`);
  }

  //
  Wywołaj przy load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', updateHeaderHeight);
  }
  else {
    updateHeaderHeight();
  }

  //
  Wywołaj przy resize (debounced dla wydajności)
  let resizeTimer = null;
  window.addEventListener(
  'resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateHeaderHeight, 150);
  }, {
  passive: true});

  //
  ResizeObserver dla top-bar (gdy zmienia wysokość przez zawijanie tekstu)
  if (typeof ResizeObserver !== 'undefined') {
    const topBar = document.querySelector('.gcl-top-bar');
  if (topBar) {
      const topBarObserver = new ResizeObserver(function() {
        updateHeaderHeight();
      });
      topBarObserver.observe(
  topBar);
    }
    
    //
  ResizeObserver dla admin bar (gdy zmienia wysokość - rzadkie, ale możliwe)
    const adminBar = document.getElementById('wpadminbar');
  if (adminBar) {
      const adminBarObserver = new ResizeObserver(function() {
        updateHeaderHeight();
      });
      adminBarObserver.observe(
  adminBar);
    }
  }

  //
  ---------- HELPER: Pobierz wszystkie focusable elements w kontenerze ----------
  const getFocusableElements = (container) => {
    const selector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
  return Array.from(container.querySelectorAll(selector)).filter(el => {
      // Filtruj ukryte elementy (nie są widoczne, więc nie powinny mieć focus)
      const style = window.getComputedStyle(el);
  return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
    });
  };

  //
  ---------- WSPÓLNE DROPDOWNY (EUR / ✉️ / 👤) ----------
  const NEWSLETTER_SEEN_KEY = 'gcl_newsletter_seen';
  const roots = document.querySelectorAll('[data-fap-dropdown-root]');
  if (roots.length) {
    roots.forEach(root => {
      const btn   = root.querySelector('[data-fap-dropdown-trigger]');
  const panel = root.querySelector('[data-fap-dropdown-panel]');
  if (!btn || !panel) return;

      //
  Kropka przy newsletterze: domyślnie ukryta w CSS – pokaż tylko gdy user jeszcze nie kliknął w tej sesji
      if (panel.id === 'dd-newsletter') {
        const badge = root.querySelector('.gcl-dropdown-trigger-badge');
  if (badge && !sessionStorage.getItem(NEWSLETTER_SEEN_KEY)) {
          badge.classList.add('gcl-dropdown-trigger-badge--visible');
        }
      }
  let savedFocus = null; //
  Zapamiętaj element który miał focus przed otwarciem

      const open = () => {
        savedFocus = document.activeElement; //
  Zapamiętaj aktualny focus
        show(panel);
        btn.setAttribute(
  'aria-expanded', 'true');
  panel.dataset.open = '1';
  const focusables = getFocusableElements(panel);
  if (focusables.length > 0) {
          setTimeout(() => focusables[0].focus(), 0);
        }
      };
  const close = () => {
        hide(panel);
        btn.setAttribute(
  'aria-expanded', 'false');
  panel.dataset.open = '0';
        //
  Przywróć focus do elementu, który miał focus przed otwarciem
        if (savedFocus && document.contains(savedFocus)) {
          savedFocus.focus();
        }
  savedFocus = null;
      };

      //
  Focus trap: Tab/Shift+Tab nie wychodzi poza panel
      const handleTrap = (e) => {
        if (panel.dataset.open !== '1') return;
  if (e.key !== 'Tab') return;
  const focusables = getFocusableElements(panel);
  if (focusables.length === 0) return;
  const firstFocusable = focusables[0];
  const lastFocusable = focusables[focusables.length - 1];

        //
  Jeśli Shift+Tab na pierwszym elemencie → focus na ostatni
        if (e.shiftKey && document.activeElement === firstFocusable) {
          e.preventDefault();
          lastFocusable.focus();
  return;
        }

        //
  Jeśli Tab na ostatnim elemencie → focus na pierwszy
        if (!e.shiftKey && document.activeElement === lastFocusable) {
          e.preventDefault();
          firstFocusable.focus();
  return;
        }
      };

      btn.addEventListener(
  'click', (e) => {
        e.preventDefault();
        (
  panel.dataset.open === '1' ? close : open)();
        //
  Po kliknięciu koperty newsletter – ukryj kropkę na stałe w tej sesji (nowa wizyta = znowu widać)
        if (panel.id === 'dd-newsletter') {
          const badge = root.querySelector('.gcl-dropdown-trigger-badge');
  if (badge) {
            sessionStorage.setItem(NEWSLETTER_SEEN_KEY, '1');
            badge.classList.remove(
  'gcl-dropdown-trigger-badge--visible');
            badge.classList.add(
  'gcl-dropdown-trigger-badge--hidden');
          }
        }
      });

      document.addEventListener(
  'click', (e) => {
        if (!root.contains(e.target)) close();
      });

      document.addEventListener(
  'keydown', (e) => {
        if (e.key === 'Escape' && panel.dataset.open === '1') {
          close();
          //
  focus już przywrócony w close()}
  else {
          handleTrap(e);
        }
      });
    });
  }

  //
  ---------- MINI-CART (oddzielna instancja) ----------
  const cartBtn   = document.querySelector('[data-fap-toggle="mini-cart"]');
  const cartPanel = document.getElementById('header-mini-cart');
  if (cartBtn && cartPanel) {
    let opened = false;
  let savedFocus = null; //
  Zapamiętaj element który miał focus przed otwarciem

    const open = () => {
      savedFocus = document.activeElement; //
  Zapamiętaj aktualny focus
      show(cartPanel);
  opened = true;
      cartBtn.setAttribute(
  'aria-expanded', 'true');
  const focusables = getFocusableElements(cartPanel);
  if (focusables.length > 0) {
        setTimeout(() => focusables[0].focus(), 0);
      }
    };
  const close = () => {
      hide(cartPanel);
  opened = false;
      cartBtn.setAttribute(
  'aria-expanded', 'false');
      //
  Przywróć focus do elementu, który miał focus przed otwarciem
      if (savedFocus && document.contains(savedFocus)) {
        savedFocus.focus();
      }
  savedFocus = null;
    };

    //
  Focus trap: Tab/Shift+Tab nie wychodzi poza panel
    const handleTrap = (e) => {
      if (!opened) return;
  if (e.key !== 'Tab') return;
  const focusables = getFocusableElements(cartPanel);
  if (focusables.length === 0) return;
  const firstFocusable = focusables[0];
  const lastFocusable = focusables[focusables.length - 1];

      //
  Jeśli Shift+Tab na pierwszym elemencie → focus na ostatni
      if (e.shiftKey && document.activeElement === firstFocusable) {
        e.preventDefault();
        lastFocusable.focus();
  return;
      }

      //
  Jeśli Tab na ostatnim elemencie → focus na pierwszy
      if (!e.shiftKey && document.activeElement === lastFocusable) {
        e.preventDefault();
        firstFocusable.focus();
  return;
      }
    };

    //
  Inicjalizacja: upewnij się, że panel jest ukryty przy ładowaniu strony
    // To zapobiega problemowi z otwartym mini-cart po odświeżeniu
    close();

    cartBtn.addEventListener(
  'click', (e) => {
      e.preventDefault();
  opened ? close() : open();
    });

    document.addEventListener(
  'click', (e) => {
      if (opened && !cartPanel.contains(e.target) && !cartBtn.contains(e.target)) {
        close();
      }
    });

    document.addEventListener(
  'keydown', (e) => {
      if (e.key === 'Escape' && opened) {
        close();
        //
  focus już przywrócony w close()}
  else {
        handleTrap(e);
      }
    });
  }
})();

  //
  ---------- MOBILE MENU SIDEBAR ----------
  (function initMobileMenu() {
    const burgerBtn = document.querySelector('[data-gcl-toggle="mobile-menu"]');
  const sidebar = document.getElementById('gcl-mobile-sidebar');
  if (!burgerBtn || !sidebar) return;
  let isOpen = false;
  let savedFocus = null; //
  Zapamiętaj element który miał focus przed otwarciem
    
    const open = () => {
      savedFocus = document.activeElement; //
  Zapamiętaj aktualny focus
      sidebar.setAttribute('aria-hidden', 'false');
      burgerBtn.setAttribute(
  'aria-expanded', 'true');
  document.body.style.overflow = 'hidden';
  isOpen = true;
      //
  Focus na pierwszy element w sidebarze (lub close button)
      const focusables = getFocusableElements(sidebar);
  if (focusables.length > 0) {
        setTimeout(() => focusables[0].focus(), 0);
      }
    };
  const close = () => {
      sidebar.setAttribute('aria-hidden', 'true');
      burgerBtn.setAttribute(
  'aria-expanded', 'false');
  document.body.style.overflow = '';
  isOpen = false;
      //
  Przywróć focus do elementu, który miał focus przed otwarciem
      if (savedFocus && document.contains(savedFocus)) {
        savedFocus.focus();
      }
  savedFocus = null;
    };

    //
  Focus trap: Tab/Shift+Tab nie wychodzi poza sidebar
    const handleTrap = (e) => {
      if (!isOpen) return;
  if (e.key !== 'Tab') return;
  const focusables = getFocusableElements(sidebar);
  if (focusables.length === 0) return;
  const firstFocusable = focusables[0];
  const lastFocusable = focusables[focusables.length - 1];

      //
  Jeśli Shift+Tab na pierwszym elemencie → focus na ostatni
      if (e.shiftKey && document.activeElement === firstFocusable) {
        e.preventDefault();
        lastFocusable.focus();
  return;
      }

      //
  Jeśli Tab na ostatnim elemencie → focus na pierwszy
      if (!e.shiftKey && document.activeElement === lastFocusable) {
        e.preventDefault();
        firstFocusable.focus();
  return;
      }
    };
    
    //
  Burger button click
    burgerBtn.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
  isOpen ? close() : open();
    });
    
    //
  Close buttons (overlay + close button)
    const closeBtns = sidebar.querySelectorAll('[data-gcl-close="mobile-menu"]');
    closeBtns.forEach(
  btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        close();
      });
    });
    
    //
  Close on Escape key + focus trap
    const handleKeydown = (e) => {
      if (e.key === 'Escape' && isOpen) {
        close();
        //
  focus już przywrócony w close()}
  else {
        handleTrap(e);
      }
    };
    document.addEventListener(
  'keydown', handleKeydown);
    
    //
  Close on window resize to desktop (debounced)
    let resizeTimer = null;
  const handleResize = () => {
      if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
        if (window.innerWidth >= 1024 && isOpen) {
          close();
        }
      }, 150);
    };
    window.addEventListener(
  'resize', handleResize, { passive: true});
    
    //
  Cleanup on page unload (optional, but good practice)
    window.addEventListener('beforeunload', () => {
      if (isOpen) close();
    });
  })();

  //
  ---------- MEGADROPDOWN: Primary nav (lewa kolumna -> prawa treść) ----------
  (function initMegaDropdownPanels() {
    // Każdy lewy słupek w megadropdownie
    document.querySelectorAll('[data-left-col]').forEach((col) => {
      const grid = col.closest('.grid');
  if (!grid) return;
  const panels = grid.querySelectorAll('.menu-panel');
  if (!panels.length) return;
  const links = col.querySelectorAll('[data-left-item]');
  if (!links.length) return;
  const hideAll = () => {
        panels.forEach((p) => p.classList.add('hidden'));
      };
  const showPanel = (panelId) => {
        hideAll();
        //
  CSS.escape chroni przed znakami specjalnymi w id
        const target = grid.querySelector('#' + CSS.escape(panelId));
  if (target) target.classList.remove('hidden');
      };
  const activate = (a) => {
        links.forEach((l) => l.removeAttribute('data-active'));
        a.setAttribute(
  'data-active', '1');
  const id = a.getAttribute('data-panel-target');
  if (id) showPanel(id);
      };

      //
  Hover / focus klawiaturą
      links.forEach((a) => {
        a.addEventListener('mouseenter', () => activate(a));
        a.addEventListener(
  'focus', () => activate(a));
        //
  Tap/click na mobile – aktywuj panel od razu,
        // a jeśli użytkownik kliknie drugi raz, wejdzie w link.
        a.addEventListener('click', (e) => {
          // Jeżeli to pierwszy klik (brak aktywacji) — tylko aktywuj i przerwij nawigację,
          // żeby panel się pokazał. Drugi klik przejdzie do href.
          if (a.getAttribute('data-active') !== '1') {
            e.preventDefault();
            activate(
  a);
          }
        });
      });

      //
  Stan początkowy: aktywuj element z data-active="1" lub pierwszy
      const initial = col.querySelector('[data-left-item][data-active="1"]') || links[0];
  if (initial) activate(initial);
    });
  })();
  bottom: 6px;
}
.gcl-dropdown-trigger-badge--visible {
  visibility: visible;
}
.gcl-dropdown-trigger-badge--hidden {
  display: none;
}

/* Opcjonalna dodatkowa padding wewnÄ…trz panelu */
.gcl-dropdown-content--pad {
  padding: 1.25rem;
}

/* Nawigacja w dropdownie (konto: Zaloguj / Wyloguj itd.) */
.gcl-dropdown-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.gcl-dropdown-nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #333;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
}
.gcl-dropdown-nav-link:hover {
  background-color: #f4f4f4;
}
.gcl-dropdown-nav-link--danger {
  color: #dc2626;
}
.gcl-dropdown-nav-link--danger:hover {
  background-color: #fef2f2;
}

/* Dropdown Panel - Mobile/Tablet (100% width, pod przyciskiem) */
@media (max-width: 1023px) {
  .gcl-dropdown-panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-78%);
    margin-top: 0.75rem;
    /* DYNAMICZNA max-height - wysokość headera + admin bar obliczana przez JS */
    max-height: calc(100vh - var(--header-with-admin, 120px) - 2rem);
    width: 280px;
  }
}

/* Dropdown Content */
.gcl-dropdown-content {
  padding: 1.25rem;
}

/* Dropdown Title */
.gcl-dropdown-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

/* Dropdown Lead (subtitle z ikonÄ…) */
.gcl-dropdown-lead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
}

.gcl-dropdown-lead-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.gcl-dropdown-lead-text {
  flex: 1;
}

.gcl-dropdown-lead-icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Dropdown Divider */
.gcl-dropdown-divider {
  border: 0;
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 0 1rem 0;
}

/* Mobile/Tablet Responsive */
@media (max-width: 1023px) {
  .gcl-header-burger {
    display: flex;
  }

  .gcl-header-menu {
    display: none; /* Hide desktop menu on mobile */
  }

  /* Na mobile wszystkie ikony sÄ… widoczne obok burgera */
  .gcl-header-icons {
    gap: 4px;
  }
}

@media (min-width: 1024px) {
  .gcl-mobile-sidebar {
    display: none !important; /* Hide sidebar on desktop */
  }

  .gcl-header-burger {
    display: none !important; /* Hide burger on desktop */
  }
}

/* Screen reader only (używane w dropdownach) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
     MINICART - Mini Cart Styles (Header)
     ============================================ */

/* REMOVE ALL ROUNDED CORNERS */
.widget_shopping_cart.rounded-2xl,
.woocommerce-mini-cart.rounded-2xl,
.widget_shopping_cart_content.rounded-2xl,
.drawer__inner.rounded-2xl,
.cart-drawer.rounded-2xl,
.mini-cart.rounded-2xl,
.header-minicart.rounded-2xl,
.rounded-2xl .widget_shopping_cart,
.rounded-2xl .woocommerce-mini-cart,
.gcl-minicart-wrapper.rounded-2xl,
.gcl-minicart-wrapper .rounded-2xl,
.gcl-minicart-wrapper *[class*="rounded"] {
  border-radius: 0 !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* WRAPPER */
.gcl-minicart-wrapper {
  font-family: "Poppins", sans-serif !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 60vh !important;
  box-sizing: border-box !important;
}

/* HEADER */
.gcl-minicart-header {
  padding: 0;
  flex-shrink: 0 !important;
}

.gcl-minicart-header h3 {
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #333333 !important;
  margin: 0 !important;
}

/* ITEMS - Scrollable area */
.gcl-minicart-items {
  padding: 1rem 0.5rem 0 0;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* PRODUCT CARD */
.gcl-minicart-item {
  border: 1px solid #e0e0e0 !important;
  padding: 8px;
  margin-bottom: 12px;
  position: relative !important;
}

.gcl-minicart-item:last-child {
  margin-bottom: 0 !important;
}

.gcl-minicart-product-main {
  display: flex !important;
  gap: 12px;
  align-items: center;
}

/* DELETE ICON */
.gcl-minicart-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: auto;
  cursor: pointer;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s !important;
  z-index: 10 !important;
}

.gcl-minicart-remove:hover {
  opacity: 0.7 !important;
}

.gcl-minicart-remove svg {
  width: 20px !important;
  height: 20px !important;
  fill: #77777b !important;
}

.gcl-minicart-remove:hover svg {
  fill: #e3335a !important;
}

/* PRODUCT IMAGE */
.gcl-minicart-thumb {
  flex-shrink: 0 !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
}

.gcl-minicart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.gcl-minicart-thumb.personalized img {
  object-fit: contain !important;
}

.gcl-minicart-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gcl-minicart-name {
  background-color: #fff;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  margin: 0 auto -0.5rem;
  max-width: 85%;
  padding-inline: 0.5rem;
  position: relative;
  text-align: center;
  text-wrap: balance;
  width: fit-content;
  z-index: 1;
}

.gcl-minicart-name a {
  color: #333333 !important;
  text-decoration: none !important;
}

.gcl-minicart-name a:hover {
  text-decoration: underline !important;
}

.gcl-minicart-meta {
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* Nazwa papieru + waga – pogrubione */
.gcl-minicart-meta--paper-name {
  font-weight: 600 !important;
}

/* Etykiety „Zadruk:”, „Arkusz papieru:” – pogrubione */
.gcl-minicart-meta .gcl-minicart-meta-label {
  font-weight: 600 !important;
}

.gcl-minicart-price {
  font-weight: 700 !important;
  font-size: 1rem;
  color: #e3335a !important;
  width: fit-content !important;
}

/* Ceny produktów personalizowanych */
.gcl-minicart-price .gcl-price-print,
.gcl-minicart-price .gcl-price-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-weight: 500 !important;
}

.gcl-minicart-price .gcl-price-print {
  margin-bottom: 2px !important;
}

.gcl-minicart-price .gcl-price-label {
  color: #6b7280 !important;
  font-weight: 400 !important;
}

.gcl-minicart-price .gcl-price-value {
  font-weight: 600 !important;
}

.gcl-minicart-price .gcl-price-highlight {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none;
}

.gcl-minicart-price .gcl-price-pink .woocommerce-Price-amount {
  color: #e3335a !important;
}

.gcl-minicart-price .gcl-price-old {
  text-decoration: line-through;
  color: #6b7280 !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

.gcl-minicart-price .gcl-price-old .woocommerce-Price-amount {
  color: #6b7280 !important;
  text-decoration: line-through;
}

.gcl-minicart-price .gcl-price-total {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SEPARATOR */
.gcl-minicart-separator {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 12px 0 !important;
}

.gcl-separator-line {
  flex: 1 !important;
  height: 1px !important;
  background: #e0e0e0 !important;
}

.gcl-separator-plus {
  font-size: 20px !important;
  font-weight: 300 !important;
  color: #77777b !important;
  line-height: 1 !important;
}

/* OPTIONS */
.gcl-minicart-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.gcl-minicart-option {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.gcl-minicart-option-thumb {
  flex-shrink: 0 !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
}

.gcl-minicart-option-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.gcl-minicart-option-details {
  flex: 1 !important;
  min-width: 0 !important;
  margin-block: auto;
}

.gcl-minicart-option-name {
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: #333333 !important;
  margin-bottom: 4px !important;
}

.gcl-minicart-option-desc {
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: #77777b !important;
  margin-bottom: 4px !important;
}

.gcl-minicart-option-price {
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #e3335a !important;
}

/* FOOTER */
.gcl-minicart-footer {
  padding: 8px 0 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}

/* SUMMARY */
.gcl-minicart-summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem;
  border-radius: 0 !important;
  margin-bottom: 12px !important;
}

.gcl-summary-label {
  font-weight: 600 !important;
  font-size: 1rem;
  color: #333333 !important;
}

.gcl-summary-value {
  font-weight: 700 !important;
  font-size: 18px;
  color: #333333 !important;
}

/* BUTTON */
.gcl-minicart-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  background: #e3335a !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}

.gcl-minicart-button:hover {
  background: #b90355ff !important;
}

.gcl-minicart-button:focus-visible {
  outline: 2px solid #e3335a;
  outline-offset: 2px;
}

/* EMPTY STATE */
.gcl-minicart-empty {
  padding: 40px 20px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #77777b !important;
}

/* SCROLLBAR STYLING */
.gcl-minicart-items::-webkit-scrollbar {
  width: 8px !important;
}

.gcl-minicart-items::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 0 !important;
}

.gcl-minicart-items::-webkit-scrollbar-thumb {
  background: #c0c0c0 !important;
  border-radius: 0 !important;
}

.gcl-minicart-items::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0 !important;
}

.gcl-popup-newsletter {
    /* max-width: 600px; */
    /* margin-top: 4rem; */
    font-size: 14px;
    line-height: 24px;
}

.gcl-popup-newsletter p.info {
    font-size: 10px;
    line-height: 16px;
    color: #333;
}

.gcl-popup-newsletter .form label input {
    padding: 1rem;
    border-radius: 50px;
    /* background: #555555; */
    border: 1px solid #5555;
    width: calc(100% - 2rem);
}
.gcl-popup-newsletter .form label input::placeholder {
    color:#333333;
    font-size: 14px;
	opacity: 0.8;
}


.gcl-popup-newsletter .form {
    display: grid;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    grid-template-columns: 1fr auto;
}

.gcl-popup-newsletter input[type="submit"] {
    padding: 1rem;
    border-radius: 50px;
    background: #d10d63;
    border: none;
    color: white;
    font-weight: 500;
    font-size: 16px;
}