/* =======================================================
   TABLE OF CONTENTS:
   1. GLOBAL STYLES
      1.1 Typography
      1.2 Links
      1.3 Body & Layout
      1.4 Buttons
   2. HEADER
      2.1 Header Layout
      2.2 Logo
      2.3 Navigation
      2.4 Cart Icon
   3. CONTENT
      3.1 Typography
      3.2 Lists
      3.3 Containers & Layout
   4. COMPONENTS
      4.1 Circular Widget
      4.2 Frames (Ramka)
   5. FOOTER
   6. RESPONSIVE STYLES
      6.1 Mobile Typography
      6.2 Mobile Layout
   7. WOOCOMMERCE
      7.1 WooCommerce Layout
      7.2 WooCommerce Account Pages
   8. WOOCOMMERCE CART
      8.1 Cart Page Buttons
      8.2 Mini Cart Buttons
      8.3 Cart Remove Link
      8.4 Quantity Buttons
      8.5 Number Input Spinner Arrows
   9. HOMEPAGE SLIDER
   10. HOMEPAGE TILES
======================================================= */

/* =======================================================
   1. GLOBAL STYLES
======================================================= */

/* 1.1 Typography */
body,
.entry-content,
.woocommerce,
.woocommerce-page,
.wp-site-blocks,
.wp-block-post-content {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #333;
  cursor: default;
}

body.home .wp-block-button__link:hover,
body.home .woocommerce a.button:hover {
  transform: translateY(-2px) !important;
  transition: background-color 0.2s ease, transform 0.3s ease !important;
}


h1, h2, h3, h4, h5, h6,
.widget-title,
.wp-block-group__title,
.wp-block-post-title,
.woocommerce-loop-category__title,
.woocommerce-loop-product__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-MyAccount-content .u-column1 header h3,
.woocommerce-account .woocommerce-MyAccount-content .u-column2 header h3,
.woocommerce-account .addresses .title h3,
.woocommerce-Address-title h3,
.woocommerce-account .col-1 h3,
.woocommerce-account .col-2 h3,
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.2;
  margin-bottom: 0.75em;
}

.entry-content p,
.has-regular-font-size,
.entry-content ul,
.entry-content ol {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #333;
  margin-bottom: 1.25rem;
}

.has-small-font-size { font-size: 16px !important; }
.has-medium-font-size { font-size: 18px !important; }
.has-large-font-size { font-size: 20px !important; }
.has-x-large-font-size { font-size: 22px !important; }

input,
select,
textarea {
  font-family: 'Poppins', sans-serif;
}

/* 1.2 Links */
a {
  color: #004455;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  text-decoration-color: rgba(0, 68, 85, 0.3);
}

a:hover,
a:focus {
  color: #FF6600;
  text-decoration-color: rgba(255, 102, 0, 0.5);
}

.entry-content p a,
.entry-content a,
.woocommerce-product-details__short-description a,
.woocommerce-Tabs-panel a {
  color: #004455;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.entry-content p a:hover,
.entry-content a:hover,
.woocommerce-product-details__short-description a:hover,
.woocommerce-Tabs-panel a:hover {
  color: #FF6600;
}

/* Remove underlines where not needed */
.wp-block-navigation a,
.footer-social a,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
button,
input[type="submit"],
input[type="button"] {
  text-decoration: none !important;
}

/* 1.3 Body & Layout */
body {
  margin-top: clamp(60px, calc(60px + (100 - 60) * ((100vw - 468px) / (1080 - 468))), 100px);
  background-color: #f5f5f5;
  /* Add this to prevent horizontal scroll issues from off-screen elements */
  overflow-x: hidden;
}

.wp-site-blocks {
  padding-top: 1rem !important;
  margin-top: 0 !important;
}

/* 1.4 Buttons */
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce form .button,
.woocommerce form .button.alt,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .edit,
.woocommerce-account .woocommerce-MyAccount-content .add-new-address,
.woocommerce-account a.button {
  display: inline-block;
  padding: 10px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 18px !important;
  font-weight: 400;
  line-height: 1;
  background-color: #004455;
  color: #fff !important;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: normal;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce form .button:hover,
.woocommerce form .button.alt:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .edit:hover,
.woocommerce-account .woocommerce-MyAccount-content .add-new-address:hover,
.woocommerce-account a.button:hover {
  background-color: #003344;
  transform: translateY(-2px);
}

/* Specific styling for smaller buttons like add-to-cart */
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.add_to_cart_button,
.woocommerce input.button.add_to_cart_button {
  font-size: 14px !important;
  padding: 8px 16px !important;
}

/* =======================================================
   2. HEADER
======================================================= */

/* 2.1 Header Layout */
header,
.wp-site-blocks > header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: clamp(60px, calc(60px + (100 - 60) * ((100vw - 468px) / (1080 - 468))), 100px);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 9999;
  display: flex !important;
  align-items: center !important;
  padding: 0;
  overflow: visible !important; /* Zapobiega przycinaniu menu */
}

header > .wp-block-group,
.wp-site-blocks > header > .wp-block-group {
  flex: 1;
}

header .alignwide,
.wp-site-blocks > header .alignwide {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  overflow: visible !important; /* Zapobiega przycinaniu menu */
}

/* 2.2 Logo */
.wp-block-group.alignwide .wp-block-site-logo,
.wp-block-group.alignwide .wp-block-site-title,
.site-branding,
.custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  line-height: 0; /* Usuwa dodatkową przestrzeń */
  max-width: 362px; /* Maksymalna szerokość kontenera dla desktopów */
  min-height: 49px; /* Minimalna wysokość dla logo */
}

.wp-block-group.alignwide .wp-block-site-logo a,
.wp-block-group.alignwide .wp-block-site-title a,
.site-branding a,
.custom-logo-link a {
  display: block !important;
  text-decoration: none !important;
  background-image: none !important; /* Usuwa background-image */
}

.wp-block-group.alignwide .wp-block-site-logo img.custom-logo,
.wp-block-group.alignwide .wp-block-site-title img.custom-logo,
.site-branding img.custom-logo,
.custom-logo-link img.custom-logo {
  display: block !important;
  max-width: clamp(180px, 30vw, 362px) !important; /* Responsywna szerokość dla desktopów */
  height: auto !important; /* Zachowuje proporcje 7.3:1 */
  object-fit: contain !important;
  transition: max-width 0.3s ease !important; /* Płynne skalowanie */
}

/* Ukryj tekstowy tytuł strony */
.wp-block-group.alignwide .wp-block-site-title a,
.site-title {
  text-indent: -9999px !important; /* Ukrywa tekst, jeśli obecny */
  color: transparent !important;
}

/* Responsywność dla tabletów */
@media (max-width: 1024px) {
  .wp-block-group.alignwide .wp-block-site-logo img.custom-logo,
  .wp-block-group.alignwide .wp-block-site-title img.custom-logo,
  .site-branding img.custom-logo,
  .custom-logo-link img.custom-logo {
    max-width: clamp(156px, 26vw, 264px) !important; /* Mniejsza szerokość dla tabletów */
  }
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
  .wp-block-group.alignwide.is-content-justification-space-between {
    min-height: 70px !important; /* Zwiększa wysokość nagłówka */
  }
  .wp-block-group.alignwide .wp-block-site-logo img.custom-logo,
  .wp-block-group.alignwide .wp-block-site-title img.custom-logo,
  .site-branding img.custom-logo,
  .custom-logo-link img.custom-logo {
    max-width: clamp(120px, 36vw, 192px) !important; /* Mniejsza szerokość */
    margin-top: 16px !important; /* Przesunięcie w dół */
  }
}

/* Poprawa widoczności i pozycjonowania podmenu na hover */
@media (min-width: 769px) {
  .wp-block-navigation__submenu-container {
    transition: opacity 0.3s ease-in-out !important; /* Płynne pojawianie się i znikanie */
    opacity: 0 !important; /* Początkowo niewidoczne */
    visibility: hidden !important; /* Ukryte z DOM */
  }

  .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-container {
    opacity: 1 !important; /* Widoczne po najechaniu */
    visibility: visible !important; /* Pokazane w DOM */
    position: absolute !important;
    top: 100% !important; /* Pod głównym elementem */
    left: auto !important; /* Usuwa lewe pozycjonowanie */
    right: 0 !important; /* Przesuwa podmenu na prawo względem rodzica */
    min-width: 200px !important; /* Minimalna szerokość podmenu */
    max-width: 90vw !important; /* Zapobiega wychodzeniu poza ekran */
    padding: 10px !important; /* Wewnętrzny odstęp */
    background-color: #ffffff !important; /* Tło dla lepszej widoczności */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; /* Cień dla wyróżnienia */
    transform: translateX(0) !important; /* Reset transformacji */
  }

  .wp-block-navigation-item.has-child {
    position: relative !important;
  }

  /* Zwiększenie obszaru aktywnego podmenu */
  .wp-block-navigation-item.has-child:hover > a {
    background-color: #f9f9f9 !important; /* Lekkie podświetlenie dla wskazania */
  }

  /* Opóźnienie zamykania podmenu */
  .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-container {
    animation: fadeIn 0.3s ease-in-out forwards !important;
  }

  /* Animacja dla płynnego wejścia */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Zabezpieczenie przed wychodzeniem poza ekran */
  .wp-block-navigation__submenu-container {
    box-sizing: border-box !important;
  }
}

/* 2.3 Navigation */
.wp-block-navigation,
.wp-block-navigation .wp-block-navigation__container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  overflow: visible !important; /* Zapobiega przycinaniu menu */
}

.wp-block-navigation .wp-block-navigation-item {
    position: relative; /* Upewnij się, że elementy listy są pozycjonowane relatywnie */
    padding-bottom: 10px; /* Dodajemy padding, aby powiększyć obszar hover */
}

.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  padding: 0 4px;
  font-weight: 400;
  font-size: clamp(8px, calc(8px + (18 - 8) * ((100vw - 568px) / (1080 - 568))), 18px);
  line-height: 1;
  color: #000;
  text-decoration: none !important;
  transition: color 0.4s ease;
  display: block; /* Upewnij się, że link zajmuje całą dostępną szerokość elementu listy */
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: #004455;
}

.wp-block-navigation .wp-block-navigation-item__content.is-current-menu-item,
.wp-block-navigation .wp-block-navigation-item__content.is-current-page {
  color: #FF6600;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #004455;
  transform: translateX(-50%) scaleX(0);
  sparsform-origin: center;
  transition: transform 0.4s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Style dla podmenu w wersji desktopowej */
.wp-block-navigation .wp-block-navigation__container .wp-block-navigation__submenu-container {
    position: absolute; /* Ustaw pozycjonowanie absolutne */
    top: calc(100% + 2px); /* Zmniejsz odstęp, aby submenu było bliżej rodzica */
    left: 0; /* Wyrównaj do lewej krawędzi głównego linku */
    z-index: 999; /* Upewnij się, że podmenu jest nad innymi elementami */
    background-color: #fff; /* Dodaj tło dla czytelności */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Dodaj delikatny cień */
    min-width: 180px; /* Minimalna szerokość podmenu */
    padding: 10px 0; /* Dodaj wewnętrzny odstęp */
    border-radius: 4px; /* Zaokrąglij rogi */
    display: none; /* Domyślnie ukryj podmenu */
    margin-top: 0; /* Usunięto margin-top */
}

.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container {
    display: block; /* Pokaż podmenu po najechaniu na element listy */
}

.wp-block-navigation .wp-block-navigation__submenu-container li {
    list-style: none; /* Usuń domyślne znaczniki listy */
    padding: 0;
    margin: 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
    color: #333 !important; /* Kolor linków podmenu */
    font-size: 16px !important; /* Rozmiar czcionki linków podmenu */
    padding: 8px 15px !important; /* Padding dla linków podmenu */
    text-decoration: none !important; /* Usuń podkreślenie */
    display: block; /* Upewnij się, że link zajmuje całą szerokość */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
    background-color: #f0f0f0; /* Tło przy najechaniu na link podmenu */
    color: #004455 !important; /* Kolor tekstu przy najechaniu */
}

/* Ukryj domyślne strzałki podmenu w wersji desktopowej, jeśli są */
.wp-block-navigation .wp-block-navigation-item.has-child > a::after {
    display: none;
}

/* 2.4 Cart Icon */
.wc-block-mini-cart,
.widget_shopping_cart {
  display: inline-flex !important;
  align-items: center;
  margin-left: 1rem;
}

.wc-block-mini-cart__button,
.widget_shopping_cart a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: #004455 !important;
  font-size: 24px;
  text-decoration: none !important;
  position: relative;
}

.wc-block-mini-cart__button:hover,
.widget_shopping_cart a.button:hover {
  color: #FF6600 !important;
}

.wc-block-mini-cart__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #FF6600;
  color: #fff;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =======================================================
   3. CONTENT
======================================================= */

/* 3.1 Typography */
.entry-content p,
.entry-content ul,
.entry-content ol {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #333;
  margin-bottom: 1.25rem;
}

/* 3.2 Lists */
.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}

/* 3.3 Containers & Layout */
.ramka {
  max-width: 1080px;
  margin: 2rem auto;
  border: 1px solid #004455;
  border-radius: 12px;
  box-shadow: 0 3px 5px #004455;
  background: #fff;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .ramka {
    padding: 0.75rem;
  }
}
@media (max-width: 468px) {
  .ramka {
    padding: 0.5rem;
  }
}

/* =======================================================
   4. COMPONENTS
======================================================= */

/* 4.1 Circular Widget */
.circle-widget-wrapper {
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  position: relative;
}

.circle-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  overflow: hidden;
  border: 5px solid white;
  z-index: 2;
}

.circle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rotating-arc {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top: 5px solid #004455;
  pointer-events: none;
  z-index: 1;
  animation: spin 8s linear infinite;
}

.rotating-arc.second {
  animation-delay: -4s;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =======================================================
   5. FOOTER
======================================================= */
.footer-social a {
  color: #fff;
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
}

.footer-social a:hover {
  transform: scale(1.2);
  color: #66CCFF;
}

.footer-legal {
  color: #ddd;
  font-size: 14px;
  margin-top: 10px;
}

/* =======================================================
   6. RESPONSIVE STYLES
======================================================= */

/* 6.1 Mobile Typography */
@media (max-width: 768px) {
  body,
  .entry-content,
  .woocommerce,
  .woocommerce-page,
  .wp-site-blocks,
  .wp-block-post-content {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .entry-content p,
  .entry-content ul,
  .entry-content ol {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .wp-block-navigation .wp-block-navigation-item__content {
    font-size: clamp(6px, calc(6px + (14 - 6) * ((100vw - 320px) / (768 - 320))), 14px);
  }

  button,
  input[type="submit"],
  input[type="button"],
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce form .button,
  .woocommerce form .button.alt,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .edit,
  .woocommerce-account .woocommerce-MyAccount-content .add-new-address,
  .woocommerce-account a.button {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }

  /* Ukryj standardowe menu na urządzeniach mobilnych */
  .wp-block-navigation .wp-block-navigation__container {
    display: none !important;
  }

  /* Ukryj standardową ikonę menu mobilnego WP */
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* Pokaż ikonę menu na urządzeniach mobilnych - teraz w nagłówku */
  .mobile-menu-toggle {
      display: inline-flex;
      position: fixed !important;
      top: 9px !important;
      right: 120px !important;
      background: transparent;
      border: 1px solid #004455;
      border-radius: 4px;
      padding: 0.5rem;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 10001;
      align-items: center;
      justify-content: center;
      outline: none !important;
      box-shadow: none !important;
      background-color: transparent !important;
      border-color: transparent !important;
      transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile-menu-toggle.is-hidden {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      display: none !important;
      z-index: -1 !important;
      transition: opacity 0.3s ease;
  }

  /* Styl dla ikony wewnątrz przycisku */
  .mobile-menu-toggle .menu-icon {
      font-size: 24px;
      color: #004455;
  }

  /* Układ mobilnego menu WP (jeśli używane) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    font-size: 16px;
    padding: 0.5rem 1rem;
    width: 100%;
    text-align: center;
  }

  /* Ensure the custom mobile menu is hidden by default on mobile using visibility and opacity */
  .mobile-menu {
      visibility: hidden;
      opacity: 0;
      position: fixed;
      top: 0;
      right: -300px;
      width: 300px;
      height: 100%;
      background: #fff;
      z-index: 10002;
      transition: right 0.6s ease, opacity 0.6s ease, visibility 0s linear 0.6s;
      padding: 20px;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
  }

  .mobile-menu.is-open {
      visibility: visible;
      opacity: 1;
      right: 0;
      transition: right 0.6s ease, opacity 0.6s ease;
  }

  /* Overlay */
  .sliding-menu-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
  }

  .sliding-menu-overlay.is-open {
      display: block;
  }

  /* Nagłówek menu z ikoną zamykania */
  .mobile-menu__header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
  }

  .mobile-menu__close {
      font-size: 24px;
      cursor: pointer;
      color: #333;
  }

  /* Stylizacja linków w menu */
  .mobile-menu__content {
      display: flex;
      flex-direction: column;
      gap: 1px;
  }

  /* Usunięcie kropek z listy */
  .mobile-menu__content ul,
  .mobile-menu__content li {
      list-style-type: none !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  .mobile-menu__content a {
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      font-weight: 400;
      color: #004455;
      text-decoration: none;
      padding: 5px 20px; /* Zmniejszono padding w pionie z 12px na 5px */
      border-radius: 8px;
      transition: background-color 0.3s ease, color 0.3s ease;
      display: block;
      text-align: left;
  }

  .mobile-menu__content a:hover {
      color: #FF6600;
      background-color: #f0f0f0;
  }

  /* Stylizacja podmenu */
  .mobile-menu__content .wp-block-navigation-item.has-child {
      display: block;
      position: relative;
  }

  .mobile-menu__content .wp-block-navigation__submenu-container {
      margin-left: 0;
      margin-top: 5px;
      background: #f9f9f9;
      border-radius: 8px;
      padding: 2px 0;
      display: block;
      width: 100%;
  }

  .mobile-menu__content .wp-block-navigation__submenu-container ul,
  .mobile-menu__content .wp-block-navigation__submenu-container li {
      list-style-type: none !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  .mobile-menu__content .wp-block-navigation__submenu-container a {
      font-size: 14px;
      padding: 4px 20px 4px 30px;
      color: #333;
      display: block;
  }

  .mobile-menu__content .wp-block-navigation__submenu-container a:hover {
      color: #FF6600;
      background-color: #e0e0e0;
  }

  /* Stylizacja przycisku podmenu (strzałki rozwijanej) */
  .mobile-menu__content .wp-block-navigation__submenu-icon {
      background: transparent;
      border: none;
      color: #004455;
      font-size: 12px;
      padding: 0 10px;
      cursor: pointer;
      transition: color 0.3s ease;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
  }

  .mobile-menu__content .wp-block-navigation__submenu-icon:hover {
      color: #FF6600;
  }

  /* Ikona strzałki dla elementów z podmenu */
  .mobile-menu__content .wp-block-navigation-item.has-child > a::after {
      content: '▼';
      font-size: 10px;
      margin-left: 8px;
      display: inline-block;
      transition: transform 0.3s ease;
  }

  .mobile-menu__content .wp-block-navigation-item.has-child:hover > a::after {
      transform: rotate(180deg);
  }

  /* Aktywny link */
  .mobile-menu__content a.is-current-menu-item,
  .mobile-menu__content a.is-current-page {
      color: #FF6600;
      font-weight: 500;
      background-color: #e6f0f2;
  }

  /* Upewnij się, że linki są klikalne */
  .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
      pointer-events: auto !important;
  }
}

/* Ukryj menu mobilne i jego przełącznik na desktopie */
@media (min-width: 769px) {
  .mobile-menu {
      display: none !important;
  }
  .mobile-menu-toggle {
      display: none !important;
  }
}

/* =======================================================
   7. WOOCOMMERCE
======================================================= */

/* 7.1 WooCommerce Layout */
body.woocommerce main,
body.woocommerce .site-main,
body.woocommerce .content-area,
body.woocommerce .entry-content,
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main,
body.single-product main {
  padding-top: 1rem !important;
  margin-top: 0 !important;
}

/* 7.2 WooCommerce Account Pages */
.woocommerce-account .woocommerce {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100%;
  max-width: 250px;
  margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid #e2e2e2;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

/* Linki menu */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px !important;
  color: #004455 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Efekt hover */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: #f0f0f0 !important;
  color: #004455 !important;
}

/* Aktywny link (wypełniony tłem) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: #004455 !important;
  color: #ffffff !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e2e2;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #f9f9f9;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  margin-bottom: 1rem;
}

.woocommerce-account .woocommerce-MyAccount-content .u-columns {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-content .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2 {
  flex: 1;
  min-width: 280px;
}

.woocommerce-account .woocommerce-MyAccount-content .u-column1 header,
.woocommerce-account .woocommerce-MyAccount-content .u-column2 header {
  display: block;
  margin-bottom: 1rem;
}

.woocommerce-account .woocommerce-MyAccount-content .u-column1:empty,
.woocommerce-account .woocommerce-MyAccount-content .u-column2:empty {
  display: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2 {
  flex: 1 1 280px;
  min-width: 280px;
  padding: 1.5rem;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #f9f9f9;
  margin-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: break-word !important; /* Ensure text wraps within the address block */
}

.woocommerce-account .woocommerce-MyAccount-content p.myaccount_address {
  margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
  max-width: 600px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row {
  padding: 0;
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row input,
.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea:focus {
  border-color: #004455;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 68, 85, 0.2);
}

.woocommerce-account .woocommerce-MyAccount-content .form-row-wide {
  grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-MyAccount-content .button {
  margin-top: 1rem;
}

.woocommerce-account .addresses .title,
.woocommerce-Addresses .woocommerce-Address .title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}

.woocommerce-account .addresses .title .edit,
.woocommerce-Addresses .woocommerce-Address .title .edit {
  margin-left: auto;
  float: none;
}

.woocommerce-account .u-column2.col-2 .woocommerce-Address-title,
.woocommerce-account .u-column1.col-1 .woocommerce-Address-title {
  margin-bottom: 0.5rem;
}

.woocommerce-account .woocommerce-Address header,
.woocommerce-account .woocommerce-customer-details header {
  position: relative !important;
  height: auto !important;
  box-shadow: none !important;
  display: block !important;
  background: transparent !important;
  z-index: 1 !important;
}

.woocommerce-account h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-account .woocommerce-customer-details,
.woocommerce-account .woocommerce-order-details {
  margin-bottom: 2rem;
}

/* Responsive Adjustments for Account Pages */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 1rem !important;
    margin: 0 1rem !important;
    width: auto !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .woocommerce-MyAccount-content .u-columns {
    flex-direction: column;
  }

  /* Ensure addresses section fits within the container on mobile */
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
    min-width: 100% !important;
    width: 100% !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
    width: 100% !important;
    overflow-wrap: break-word !important;
  }
}

/* =======================================================
   8. WOOCOMMERCE CART
======================================================= */

/* 8.1 Cart Page Buttons */
/* Stylizacja przycisku "Przejdź do płatności" na stronie koszyka */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.button.alt,
body.woocommerce-cart .wc-block-components-button,
body.woocommerce-cart .wc-block-cart__submit-button {
  display: inline-block !important;
  padding: 10px 20px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  background-color: #004455 !important;
  color: #fff !important;
  border-radius: 40px !important;
  border: none !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  white-space: normal !important;
  cursor: pointer !important;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.button.alt:hover,
body.woocommerce-cart .wc-block-components-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:hover {
  background-color: #003344 !important;
  transform: translateY(-2px) !important;
}

/* =======================================================
   8.2 Mini Cart Buttons
======================================================= */
/* Stylizacja przycisków w mini-koszyku (np. "Zobacz koszyk", "Przejdź do płatności") */
.wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-checkout {
  display: inline-block !important;
  padding: 10px 20px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  background-color: #004455 !important;
  color: #fff !important;
  border-radius: 40px !important;
  border: none !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease !important;
  white-space: normal !important;
  margin-right: 10px !important;
  cursor: pointer !important;
}

.wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart.outlined {
  background-color: #ffffff !important;
  color: #004455 !important;
  border: 2px solid #004455 !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart.outlined:hover {
  background-color: #004455 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-checkout:hover {
  background-color: #003344 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* 8.3 Cart Remove Link */
/* Styl linku „Usuń” w koszyku i mini-koszyku */
.wc-block-cart-item__remove-link {
  color: #004455 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  display: inline-block !important;
  visibility: visible !important;
}

.wc-block-cart-item__remove-link:hover {
  color: #FF6600 !important;
}

/* 8.4 Quantity Buttons */
/* Stylizacja przycisków „+” i „–” w koszyku, mini-koszyku i na stronie produktu */
body.single-product .quantity .wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__button {
  color: #004455 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
  /* Ensure visibility for icon-based buttons (SVG) */
  fill: #004455 !important; /* For SVG icons */
}

body.single-product .quantity .wc-block-components-quantity-selector__button:hover,
.wc-block-components-quantity-selector__button:hover {
  color: #FF6600 !important;
  fill: #FF6600 !important; /* For SVG icons on hover */
}

/* 8.5 Number Input Spinner Arrows */
/* Stylizacja strzałek w polach <input type="number"> */
body.single-product .quantity input[type="number"].qty,
.woocommerce .quantity input[type="number"].qty {
  /* Ensure spinner arrows are always visible */
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Stylizacja strzałek dla przeglądarek WebKit (Chrome, Safari, Edge) */
body.single-product .quantity input[type="number"].qty::-webkit-inner-spin-button,
body.single-product .quantity input[type="number"].qty::-webkit-outer-spin-button,
.woocommerce .quantity input[type="number"].qty::-webkit-inner-spin-button,
.woocommerce .quantity input[type="number"].qty::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button !important;
  opacity: 1 !important; /* Ensure arrows are always visible, not just on hover */
  color: #004455 !important; /* Set arrow color */
  cursor: pointer !important;
}

/* Hover effect for WebKit browsers */
body.single-product .quantity input[type="number"].qty:hover::-webkit-inner-spin-button,
body.single-product .quantity input[type="number"].qty:hover::-webkit-outer-spin-button,
.woocommerce .quantity input[type="number"].qty:hover::-webkit-inner-spin-button,
.woocommerce .quantity input[type="number"].qty:hover::-webkit-outer-spin-button {
  color: #FF6600 !important; /* Hover color for arrows */
}

/* Stylizacja dla Firefox */
body.single-product .quantity input[type="number"].qty,
.woocommerce .quantity input[type="number"].qty {
  -moz-appearance: textfield !important; /* Remove default spinner styling */
  position: relative !important;
}

/* Ensure Firefox shows arrows (custom pseudo-elements are not directly stylable in Firefox) */
body.single-product .quantity input[type="number"].qty,
.woocommerce .quantity input[type="number"].qty {
  /* Fallback for Firefox: ensure input looks consistent */
  padding-right: 20px !important; /* Space for arrows */
}

/* Responsywność dla urządzeń mobilnych */
@media (max-width: 768px) {
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  body.woocommerce-cart .wc-proceed-to-checkout a.button.alt,
  body.woocommerce-cart .wc-block-components-button,
  body.woocommerce-cart .wc-block-cart__submit-button,
  .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart,
  .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-checkout {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
}

@media (max-width: 600px) {
  .ramka {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
}

@media (max-width: 1024px) {
  .ramka {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
}

/* =======================================================
   9. HOMEPAGE SLIDER
======================================================= */

/* Kontener slidera w domyślnej ramce WordPress */
.homepage-slider {
  position: relative;
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}

/* Neutralizacja marginesów i paddingów tylko dla samego slidera */
.homepage-slider {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kontener dla treści (tytuł, opis) */
.homepage-slider .slide-content {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  max-width: 50%;
}

/* Styl dla obrazu w slajdach */
.homepage-slider .slide-image {
  position: absolute;
  top: auto; /* Usunięto top: 20px, aby przesunąć do dolnego rogu */
  bottom: 20px; /* Pozycja w dolnym prawym rogu */
  right: 20px;
  max-width: 40% !important;
  height: auto;
  max-height: 260px !important; /* Ograniczenie wysokości, aby zmieścił się w sliderze */
  object-fit: contain;
  z-index: 3;
  opacity: 0; /* Początkowo niewidoczny dla animacji */
  transform: translateX(20px); /* Początkowa pozycja dla animacji slide-in */
}

/* Styl dla tytułu */
.homepage-slider .slide-content .slide-title {
  font-size: clamp(16px, 3vw, 32px) !important;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin: 0 0 10px 0;
  opacity: 0;
  transform: translateY(20px);
}

/* Styl dla opisu */
.homepage-slider .slide-content .slide-description {
  font-size: clamp(13px, 2vw, 18px) !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin: 0;
  opacity: 0;
}

/* Animacja wyjeżdżania z dołu dla tytułu */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animacja fade-in dla opisu */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animacja slide-in dla obrazu */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.homepage-slider .slide-content .slide-title.slide-up {
  animation: slideUp 1s ease-out forwards;
}

.homepage-slider .slide-content .slide-description.fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.homepage-slider .slide-image.slide-in {
  animation: slideIn 1s ease-out forwards;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.homepage-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.homepage-slider .slide.active {
  opacity: 1;
  z-index: 2;
}

.homepage-slider .slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(1);
  animation: zoom 10s ease-in-out infinite;
  overflow: hidden;
}

/* Slajd 1: Ciemniejszy gradient liniowy z falami */
.homepage-slider .slide-bg-1 {
  background: linear-gradient(45deg, #003344 0%, #3399CC 50%, #003344 100%);
  background-size: 200% 200%;
  animation: zoom 10s ease-in-out infinite, gradientShift 15s ease-in-out infinite;
  position: relative;
}

/* Slajd 2: Gradient liniowy z granatem */
.homepage-slider .slide-bg-2 {
  background: linear-gradient(90deg, #003366 0%, #004455 50%, #003344 100%);
  background-size: 200% 200%;
  animation: zoom 10s ease-in-out infinite, gradientShift 15s ease-in-out infinite;
  position: relative;
}

/* Slajd 3: Gradient liniowy z falami */
.homepage-slider .slide-bg-3 {
  background: linear-gradient(135deg, #003344 0%, #66CCFF 50%, #004455 100%);
  background-size: 200% 200%;
  animation: zoom 10s ease-in-out infinite, gradientShift 15s ease-in-out infinite;
  position: relative;
}

/* Style dla fal */
.homepage-slider .slide-bg .air {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: url(../assets/images/wave.png);
  background-size: 1000px 50px;
}

.homepage-slider .slide-bg .air.air1 {
  animation: wave 30s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}

.homepage-slider .slide-bg .air.air2 {
  animation: wave2 15s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 5px;
}

.homepage-slider .slide-bg .air.air3 {
  animation: wave 30s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 7px;
}

.homepage-slider .slide-bg .air.air4 {
  animation: wave2 15s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 10px;
}

/* Animacje */
@keyframes zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes wave {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1000px;
  }
}

@keyframes wave2 {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -1000px;
  }
}

.homepage-slider .slider-nav {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
}

.homepage-slider .slider-dot {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border: 1px solid #003344;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.homepage-slider .slider-dot.active {
  opacity: 1;
  background-color: #004455;
  border: 1px solid #003344;
}

.homepage-slider .slider-dot:hover {
  background-color: #66CCFF;
  border: 1px solid #003344;
}

/* Responsywne dostosowania dla slidera */
@media (max-width: 768px) {
  .homepage-slider {
    height: 250px;
  }
  .homepage-slider .slide-content {
    top: 15px;
    left: 15px;
    max-width: 70%;
  }
  .homepage-slider .slide-content .slide-title {
    font-size: clamp(14px, 2.5vw, 24px) !important;
  }
  .homepage-slider .slide-content .slide-description {
    font-size: clamp(11px, 1.5vw, 14px) !important;
  }
  .homepage-slider .slide-image {
    top: auto;
    bottom: 20px; /* Zwiększone, aby uniknąć obcięcia */
    right: 20px; /* Zwiększone, aby zapewnić pełne wyświetlenie */
    max-width: 60% !important; /* Zwiększone o 100% (30% * 2) */
    max-height: 150px !important; /* Dostosowane zgodnie z Twoją zmianą */
    object-fit: contain;
    z-index: 3;
    opacity: 0;
    transform: translateX(20px);
  }
  .homepage-slider .slide-bg .air {
    height: 40px;
    background-size: 800px 40px;
  }
  .homepage-slider .slide-bg .air.air2 {
    bottom: 4px;
  }
  .homepage-slider .slide-bg .air.air3 {
    bottom: 6px;
  }
  .homepage-slider .slide-bg .air.air4 {
    bottom: 8px;
  }
}

@media (max-width: 468px) {
  .homepage-slider {
    height: 200px;
  }
  .homepage-slider .slide-content {
    top: 10px;
    left: 10px;
    max-width: 85%;
  }
  .homepage-slider .slide-content .slide-title {
    font-size: clamp(12px, 2vw, 20px) !important;
  }
  .homepage-slider .slide-content .slide-description {
    font-size: clamp(11px, 1.2vw, 12px) !important;
  }
  .homepage-slider .slide-image {
    top: auto;
    bottom: 5px; /* Zwiększone, aby uniknąć obcięcia */
    right: 5px; /* Zwiększone, aby zapewnić pełne wyświetlenie */
    max-width: 50% !important; /* Zwiększone o 100% (25% * 2) */
    max-height: 160px !important; /* Zwiększone o 100% (80px * 2) */
    object-fit: contain;
    z-index: 3;
    opacity: 0;
    transform: translateX(20px);
  }
  .homepage-slider .slide-bg .air {
    height: 30px;
    background-size: 600px 30px;
  }
  .homepage-slider .slide-bg .air.air2 {
    bottom: 3px;
  }
  .homepage-slider .slide-bg .air.air3 {
    bottom: 4px;
  }
  .homepage-slider .slide-bg .air.air4 {
    bottom: 6px;
  }
  .homepage-slider .slider-nav {
    bottom: 10px;
  }
  .homepage-slider .slider-dot {
    width: 8px;
    height: 8px;
    border: 1px solid #003344;
  }
}

/* =======================================================
   10. HOMEPAGE TILES
======================================================= */

body.home .homepage-tiles {
  max-width: 1080px;
  margin: 2rem auto;
  display: flex;
  justify-content: space-between;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: 0 clamp(0.5rem, 1vw, 1rem);
  box-sizing: border-box;
}

body.home .homepage-tiles .tile {
  flex: 1;
  min-width: 0;
  max-width: clamp(150px, 25vw, 250px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #004455;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 5px rgba(0, 68, 85, 0.2);
  text-decoration: none !important;
  color: #fff !important; /* For text, overridden by tile-text */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
  position: relative; /* For shine effect positioning */
  transform: translateZ(0); /* Przyspieszenie GPU */
  will-change: transform, box-shadow; /* Optymalizuje animacje */
}

body.home .homepage-tiles .tile:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 5px 12px rgba(0, 68, 85, 0.3) !important;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

body.home .homepage-tiles .tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(8px);
  opacity: 0;
  transform: translate(100%, -100%) rotate(45deg);
  transition: opacity 0.3s ease !important; /* Oddzielna animacja dla shine */
  pointer-events: none;
  z-index: 1;
}

body.home .homepage-tiles .tile:hover::before {
  opacity: 1;
  animation: shine 0.8s ease-out forwards;
}

@keyframes shine {
  0% {
    opacity: 1;
    transform: translate(100%, -100%) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(-100%, 100%) rotate(45deg);
  }
}

body.home .homepage-tiles .tile-image {
  width: 100%;
  height: clamp(120px, 20vw, 200px);
  overflow: hidden;
  position: relative;
  z-index: 0; /* Below shine effect */
}

body.home .homepage-tiles .tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
}

body.home .homepage-tiles .tile:nth-child(1) .tile-image img {
  animation: fadeInScale 0.7s ease-in-out 0.1s forwards;
}

body.home .homepage-tiles .tile:nth-child(2) .tile-image img {
  animation: fadeInScale 0.7s ease-in-out 0.2s forwards;
}

body.home .homepage-tiles .tile:nth-child(3) .tile-image img {
  animation: fadeInScale 0.7s ease-in-out 0.3s forwards;
}

body.home .homepage-tiles .tile:nth-child(4) .tile-image img {
  animation: fadeInScale 0.7s ease-in-out 0.4s forwards;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

body.home .homepage-tiles .tile-text {
  display: inline-block;
  padding: clamp(6px, 1.2vw, 8px) clamp(8px, 1.8vw, 16px);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(10px, 1.8vw, 14px);
  font-weight: 400;
  line-height: 1;
  background-color: #004455;
  color: #fff !important;
  border-radius: 40px;
  text-align: center;
  margin: clamp(0.3rem, 1vw, 0.8rem) 0;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 2; /* Above shine effect */
}

body.home .homepage-tiles .tile:hover .tile-text {
  background-color: #003344;
}

/* Responsive Adjustments for Tiles */
@media (max-width: 1024px) {
  body.home .homepage-tiles {
    gap: clamp(0.5rem, 1vw, 0.75rem);
    padding: 0 clamp(0.5rem, 1vw, 0.75rem);
  }
  body.home .homepage-tiles .tile {
    max-width: clamp(120px, 23vw, 220px);
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out !important;
  }
  body.home .homepage-tiles .tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 12px rgba(0, 68, 85, 0.3) !important;
  }
  body.home .homepage-tiles .tile-image {
    height: clamp(100px, 18vw, 180px);
  }
}

@media (max-width: 768px) {
  body.home .homepage-tiles {
    gap: clamp(0.5rem, 1vw, 0.75rem);
    padding: 0 clamp(0.5rem, 1vw, 0.75rem);
  }
  body.home .homepage-tiles .tile {
    max-width: clamp(100px, 22vw, 200px);
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out !important;
  }
  body.home .homepage-tiles .tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 12px rgba(0, 68, 85, 0.3) !important;
  }
  body.home .homepage-tiles .tile-image {
    height: clamp(80px, 20vw, 160px);
  }
  body.home .homepage-tiles .tile-text {
    font-size: clamp(10px, 1.6vw, 12px);
    padding: clamp(5px, 1vw, 7px) clamp(8px, 1.6vw, 14px);
    margin: clamp(0.3rem, 0.8vw, 0.6rem) 0;
  }
}

@media (max-width: 468px) {
  body.home .homepage-tiles {
    gap: clamp(0.25rem, 0.8vw, 0.5rem);
    padding: 0 clamp(0.25rem, 0.8vw, 0.5rem);
  }
  body.home .homepage-tiles .tile {
    max-width: clamp(80px, 22vw, 180px);
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out !important;
  }
  body.home .homepage-tiles .tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 12px rgba(0, 68, 85, 0.3) !important;
  }
  body.home .homepage-tiles .tile-image {
    height: clamp(60px, 20vw, 140px);
  }
}

@media (max-width: 400px) {
  body.home .homepage-tiles .tile {
    max-width: clamp(70px, 21vw, 160px);
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out !important;
  }
  body.home .homepage-tiles .tile:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 12px rgba(0, 68, 85, 0.3) !important;
  }
  body.home .homepage-tiles .tile-image {
    height: clamp(50px, 18vw, 120px);
  }
  body.home .homepage-tiles .tile-text {
    font-size: clamp(8px, 1.4vw, 10px);
    padding: clamp(4px, 0.8vw, 6px) clamp(6px, 1.4vw, 10px);
    margin: clamp(0.2rem, 0.6vw, 0.4rem) 0;
  }
}


/* Styl dla przycisku "Moje konto" */
body .wp-block-woocommerce-customer-account.my-account-link a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  color: #004455 !important;
  text-decoration: none !important;
  padding: 0 !important;
  border-radius: 50% !important; /* Domyślny border-radius */
  transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease !important;
}

body .wp-block-woocommerce-customer-account.my-account-link a:hover {
  color: #FF6600 !important;
  background-color: #004455 !important;
  border-radius: 50% !important;
}

/* Styl dla ikony "Moje konto" */
body .wp-block-woocommerce-customer-account.my-account-link .wc-block-customer-account__account-icon {
  width: 24px !important;
  height: 24px !important;
  color: inherit !important;
  transition: color 0.3s ease !important;
}

/* Bezpośrednie style dla SVG */
body .wp-block-woocommerce-customer-account.my-account-link .wc-block-customer-account__account-icon path,
body .wp-block-woocommerce-customer-account.my-account-link .wc-block-customer-account__account-icon circle {
  fill: #004455 !important;
  stroke: #004455 !important;
  transition: fill 0.3s ease, stroke 0.3s ease !important;
}

body .wp-block-woocommerce-customer-account.my-account-link a:hover .wc-block-customer-account__account-icon path,
body .wp-block-woocommerce-customer-account.my-account-link a:hover .wc-block-customer-account__account-icon circle {
  fill: #FF6600 !important;
  stroke: #FF6600 !important;
}


/* Styl dla przycisku "Prześlij" w formularzu WPForms */
body .wpforms-submit.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: clamp(10px, 1.8vw, 14px) clamp(16px, 3vw, 24px) !important;
  border-radius: 40px !important;
  border: none !important;
  background-color: #004455 !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(14px, 2vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
}

body .wpforms-submit.button:hover {
  background-color: #003344 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}


/* =======================================================
   11. BANER ZGODY NA COOKIES
======================================================= */

.cookie-consent-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #004455;
  border-radius: 12px;
  box-shadow: 0 3px 5px rgba(0, 68, 85, 0.2);
  padding: 1.5rem;
  z-index: 10003;
  display: none; /* Ukryty domyślnie, pokazywany przez JS */
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.cookie-consent-banner.is-visible {
  display: block;
}

.cookie-consent-banner__content {
  margin-bottom: 1rem;
}

.cookie-consent-banner__content p {
  margin: 0 0 0.75rem 0;
  font-size: 16px;
}

.cookie-consent-banner__content a {
  color: #004455;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.cookie-consent-banner__content a:hover {
  color: #FF6600;
}

.cookie-consent-banner__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cookie-consent-banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
}

.cookie-consent-banner__button--accept {
  background-color: #004455;
  color: #fff;
}

.cookie-consent-banner__button--accept:hover {
  background-color: #003344;
  transform: translateY(-2px);
}

.cookie-consent-banner__button--reject {
  background-color: #004455; /* Pełne tło dla spójności */
  color: #fff; /* Biały tekst dla kontrastu */
  font-weight: 400;
}

.cookie-consent-banner__button--reject:hover {
  background-color: #003344;
  transform: translateY(-2px);
}

.cookie-consent-banner__button--customize {
  background-color: #004455;
  color: #fff;
}

.cookie-consent-banner__button--customize:hover {
  background-color: #003344;
  transform: translateY(-2px);
}

.cookie-consent-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10004;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.cookie-consent-modal.is-open {
  display: flex;
}

.cookie-consent-modal__content {
  background: #fff;
  max-width: 600px;
  width: 90%;
  border-radius: 12px;
  padding: 1.5rem;
  font-family: 'Poppins', sans-serif;
  color: #333;
  position: relative;
}

.cookie-consent-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.cookie-consent-modal__header h2 {
  font-size: 20px !important;
  font-weight: 400 !important;
  margin: 0;
}

.cookie-consent-modal__close {
  font-size: 24px;
  color: #fff; /* Biały tekst dla kontrastu */
  background: #004455; /* Pełne tło dla spójności */
  cursor: pointer;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cookie-consent-modal__close:hover {
  background-color: #003344;
  transform: translateY(-2px);
}

.cookie-consent-modal__category {
  margin-bottom: 1rem;
}

.cookie-consent-modal__category h3 {
  font-size: 18px !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem;
}

.cookie-consent-modal__category p {
  font-size: 14px;
  margin: 0 0 0.5rem 0;
}

.cookie-consent-modal__category label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
}

.cookie-consent-modal__category input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #004455;
}

.cookie-consent-modal__buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.cookie-consent-modal__button {
  padding: 10px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cookie-consent-modal__button--save {
  background-color: #004455;
  color: #fff;
}

.cookie-consent-modal__button--save:hover {
  background-color: #003344;
  transform: translateY(-2px);
}

/* Responsywne dostosowania dla banera cookies */
@media (max-width: 768px) {
  .cookie-consent-banner {
      bottom: 10px;
      left: 10px;
      right: 10px;
      padding: 1rem;
      font-size: 14px;
  }

  .cookie-consent-banner__content p {
      font-size: 14px;
  }

  .cookie-consent-banner__buttons {
      flex-direction: column;
      gap: 0.5rem;
  }

  .cookie-consent-banner__button {
      font-size: 14px;
      padding: 8px 16px;
  }

  .cookie-consent-modal__content {
      width: 95%;
      padding: 1rem;
  }

  .cookie-consent-modal__header h2 {
      font-size: 18px !important;
  }

  .cookie-consent-modal__category h3 {
      font-size: 16px !important;
  }

  .cookie-consent-modal__category p,
  .cookie-consent-modal__category label {
      font-size: 13px;
  }

  .cookie-consent-modal__close {
      width: 28px;
      height: 28px;
      font-size: 20px;
  }
}

@media (max-width: 468px) {
  .cookie-consent-banner {
      bottom: 5px;
      left: 5px;
      right: 5px;
      padding: 0.75rem;
  }

  .cookie-consent-banner__button {
      font-size: 12px;
      padding: 6px 12px;
  }

  .cookie-consent-modal__content {
      width: 98%;
  }

  .cookie-consent-modal__close {
      width: 24px;
      height: 24px;
      font-size: 18px;
  }
}