/* =============================================================
   apseo — WARSTWA POPRAWEK (wersjonowana w paczce modulu)

   Ten plik JEST czescia paczki i wolno go nadpisywac przy wgraniu
   modulu — w odroznieniu od ap-custom.css, ktory jest generowany
   na serwerze z pola CPCUSTOM_CSS.

   Uwagi o specyficznosci: motyw ma reguly z identyfikatorem
   (#header a — 1-0-1), wiec selektory bez ID przegrywaja nawet
   z !important. Dlatego wszedzie, gdzie walczymy z motywem,
   selektor zaczyna sie od identyfikatora albo od "body".
   ============================================================= */

:root{
  --ap-pom:#f08102;
  --ap-pom-ciemny:#c96a00;
  --ap-grafit:#212121;
  --ap-tekst:#3d3833;
  --ap-szary:#6b645c;
  --ap-linia:#e6dfd3;
  --ap-krem:#faf6ef;
}

/* =============================================================
   1. LINK "PRZEJDZ DO TRESCI"
   Byl zwyklym linkiem na gorze strony i zjadal 22 px nad
   naglowkiem. Ma dzialac dla klawiatury, a nie zabierac miejsce.
   ============================================================= */
.ap-skip{
  position:absolute !important;
  left:-9999px !important; top:0 !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important; white-space:nowrap !important;
  padding:0 !important; margin:0 !important;
}
.ap-skip:focus,
.ap-skip:focus-visible{
  position:fixed !important;
  left:12px !important; top:12px !important;
  width:auto !important; height:auto !important;
  z-index:100000 !important;
  padding:10px 16px !important;
  background:var(--ap-grafit) !important; color:#fff !important;
  border-radius:8px !important; font-size:15px !important;
  text-decoration:none !important; overflow:visible !important;
}

/* =============================================================
   2. PASEK ZALET — jeden uklad na pulpicie i na telefonie
   Bylo: cztery karty z ramka i zdaniem tlumaczacym, na pulpicie
   rozdzielone pionowymi kreskami, na telefonie 2x2 z kreskami —
   dwa rozne wyglady tego samego paska. Jest: jedna pozycja to
   ikona w kwadracie plus haslo, odstepy zamiast kresek, ten sam
   rytm w obu ukladach. Hasla skraca apbar 18.
   ============================================================= */
#cpserviceblock{
  padding:14px 0 !important;
  background:transparent !important;
  border-top:1px solid var(--ap-linia) !important;
  border-bottom:1px solid var(--ap-linia) !important;
}
#cpserviceblock .container{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;
  align-items:stretch !important;
}
#cpserviceblock .service-cms-banner-list{
  width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important;
}
#cpserviceblock .service_block_inner{
  display:flex !important; align-items:center !important;
  justify-content:center !important; gap:12px !important;
  text-align:left !important; min-height:44px !important;
}
/* kolumny sa rowne (4 x 1fr), wiec pozycja wysrodkowana w kolumnie ma
   z obu stron tyle samo miejsca — przy wyrownaniu do lewej luki po
   napisach roznej dlugosci byly rozne i pasek wygladal krzywo.
   Boczny padding kontenera schodzi do zera, zeby skrajne pozycje
   trzymaly sie tej samej siatki co reszta strony. */
#cpserviceblock .container{ padding-left:0 !important; padding-right:0 !important; }
#cpserviceblock .service_image{ display:none !important; }
#cpserviceblock .service_title2{ display:none !important; }
#cpserviceblock .service_content{ display:block !important; min-width:0 !important; }
#cpserviceblock .service_title1{
  margin:0 !important; padding:0 !important;
  font-size:14.5px !important; font-weight:600 !important;
  line-height:1.25 !important; color:var(--ap-grafit) !important;
  letter-spacing:0 !important; text-transform:none !important;
  white-space:nowrap !important;
}
/* ikona w kwadracie — kwadrat I rysunek w JEDNYM pseudoelemencie,
   zeby ikona jechala razem z kwadratem przy wysrodkowaniu pozycji */
#cpserviceblock .service_block_inner::before{
  content:"" !important;
  flex:0 0 40px; width:40px; height:40px; border-radius:10px;
  background-color:rgba(240,129,2,.10);
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  display:block;
}
#cpserviceblock .service_block_inner{ position:relative !important; }
/* 1: magazyn (pudelko) */
#cpserviceblock .service-1 .service_block_inner::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E");
}
/* 2: gwarancja (tarcza) */
#cpserviceblock .service-2 .service_block_inner::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
/* 3: zwrot (strzalka w tyl) */
#cpserviceblock .service-3 .service_block_inner::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
}
/* 4: faktura (dokument) */
#cpserviceblock .service-4 .service_block_inner::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

/* =============================================================
   3. BLOK SEO ("O sklepie" + pytania) — zwiniety domyslnie
   Tresc zostaje w HTML dla wyszukiwarek, ale nie zalewa strony.
   Renderuje ja apseo jako <details class="ap-seo">.
   ============================================================= */
.ap-o-sklepie{
  background:transparent !important;
  padding:0 !important;
  margin:28px 0 0 !important;
  border-top:1px solid var(--ap-linia);
}
details.ap-seo{ max-width:1180px; margin:0 auto; padding:0 15px; }
details.ap-seo > summary{
  display:flex; align-items:center; gap:10px;
  list-style:none; cursor:pointer;
  padding:16px 2px; min-height:52px;
  color:var(--ap-szary);
}
/* H1 strony glownej siedzi w summary: jest widoczny dla wyszukiwarek
   i dla czlowieka, ale nie ciagnie za soba sciany tekstu */
details.ap-seo > summary h1{
  margin:0 !important; padding:0 !important;
  font-size:15px !important; font-weight:600 !important;
  line-height:1.35 !important; color:var(--ap-szary) !important;
  letter-spacing:0 !important; text-align:left !important;
}
details.ap-seo[open] > summary h1{ color:var(--ap-grafit) !important; }
/* motyw ma "#index h1{font-size:32px}" (1-0-1), wiec bez identyfikatora
   regula przegrywa i naglowek zajmowal trzy linie w zwinietym pasku */
#index .ap-o-sklepie details.ap-seo > summary h1,
#category .ap-o-sklepie details.ap-seo > summary h1,
body .ap-o-sklepie details.ap-seo > summary h1{
  font-size:15px !important; font-weight:600 !important;
  line-height:1.35 !important; margin:0 !important; padding:0 !important;
}
details.ap-seo > summary::-webkit-details-marker{ display:none; }
details.ap-seo > summary::after{
  content:""; width:16px; height:16px; margin-left:auto;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s ease;
}
details.ap-seo[open] > summary::after{ transform:rotate(180deg); }
details.ap-seo > summary:hover{ color:var(--ap-grafit); }

.ap-seo-tresc{ padding:0 0 28px; }
.ap-seo-tresc h1,
.ap-seo-tresc h2{
  font-size:19px !important; font-weight:700 !important;
  line-height:1.3 !important; color:var(--ap-grafit) !important;
  margin:0 0 10px !important; text-align:left !important;
}
.ap-seo-tresc p{
  font-size:14.5px !important; line-height:1.65 !important;
  color:var(--ap-tekst) !important; margin:0 0 12px !important;
  text-align:left !important; max-width:70ch;
}
.ap-seo-tresc h3{
  font-size:15px !important; font-weight:600 !important;
  color:var(--ap-grafit) !important; margin:18px 0 4px !important;
  text-align:left !important;
}
.ap-seo-faq{ display:grid; gap:0; margin:18px 0 0; }
.ap-seo-faq > div{
  padding:12px 0; border-top:1px solid var(--ap-linia);
}
.ap-seo-faq h3{ margin:0 0 4px !important; }
.ap-seo-faq p{ margin:0 !important; color:var(--ap-szary) !important; }

/* =============================================================
   4. OPIS KATEGORII — schodzi pod produkty i jest zwiniety
   Na "Uroda i zdrowie" opis + podkategorie spychaly pierwszy
   produkt na y=1640. Przenosi go apbar 18, tu tylko wyglad.
   ============================================================= */
/* UWAGA: opisu NIE chowamy CSS-em. Gdyby JavaScript nie zadzialal,
   ukryty tekst z fraz kluczowych to sygnal spamu dla wyszukiwarki.
   Po przeniesieniu przez apbar 18 opis siedzi w <details>, czyli jest
   schowany natywnie — a to Google rozumie i traktuje normalnie. */
body#category details.ap-seo{ margin-top:24px; border-top:1px solid var(--ap-linia); }
/* po przeniesieniu przez apbar 18 opis ma byc widoczny WEWNATRZ details */
body#category .ap-seo-tresc #category-description,
body#category .ap-seo-tresc .category-description{ display:block !important; }
body#category .ap-seo-tresc #category-description p{
  font-size:14.5px !important; line-height:1.65 !important; color:var(--ap-tekst) !important;
}

/* pasek tytulu szuflady dokladany przez apbar 18 */
.ap-szuflada-tytul{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  min-height:56px !important; padding:0 8px 0 16px !important;
  background:var(--ap-pom) !important; color:#fff !important;
}
.ap-szuflada-nazwa{ font-size:16px; font-weight:700; color:#fff; }
button.ap-szuflada-zamknij{
  width:44px; height:44px; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
button.ap-szuflada-zamknij::before{
  content:""; width:18px; height:18px; background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* =============================================================
   5. TELEFON — jeden spojny uklad
   ============================================================= */
@media (max-width:767px){

  /* --- naglowek: 205 px -> ~140 px --- */
  #header .header-nav{ min-height:0 !important; padding:0 !important; }
  #header .header-nav .container{
    display:flex !important; align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important; padding:0 12px !important; min-height:34px !important;
  }
  #header .header-nav a,
  #header .header-nav .top-link{
    min-height:34px !important; padding:6px 2px !important;
    line-height:1.1 !important; white-space:nowrap !important;
  }
  #header .header-nav a span,
  #header .header-nav a.track-order span::after,
  #header .header-nav .sign-in span::after{ font-size:12px !important; }
  #header .header-top .container{ padding:4px 12px !important; min-height:52px !important; }
  #header .header-top .logo,
  #header .header-top img{ max-height:24px !important; width:auto !important; }
  #header .header-top-main{ padding:6px 0 !important; }
  #header .header-top-main .container{ padding:0 12px !important; gap:8px !important; }
  #header .search-widget input[type=text]{
    height:42px !important; font-size:15px !important;
    border-radius:8px !important; padding:0 46px 0 14px !important;
  }
  #header .search-widget button{
    min-width:42px !important; min-height:42px !important; border-radius:8px !important;
  }

  /* --- BANERY: glowny ma byc glowny ---
     Pomiar 31.08.2026: baner hero miał 360x162, a kafel promocyjny
     255x206 — mniejszy baner byl wiekszy od wiekszego. Hero idzie
     na pelna szerokosc okna i dostaje proporcje 2:1, kafle schodza
     do 150 px i mieszcza sie dwa na ekranie. */
  #carousel, .owl-carousel, .cpslider{
    margin-left:-15px !important; margin-right:-15px !important;
    width:calc(100% + 30px) !important; max-width:none !important;
    border-radius:0 !important;
  }
  #carousel .item, .owl-carousel .item{ border-radius:0 !important; }
  /* aspect-ratio przegrywalo z naturalnymi proporcjami pliku (2,22:1),
     wiec wysokosc ustawiamy wprost: baner glowny ma byc wyrazniе wiekszy
     od kafli promocyjnych pod nim (178 px) */
  /* Baner glowny zostaje w naturalnych proporcjach — kadrowanie przez
     object-fit ucinalo przycisk "Zobacz wszystkie Bosch". Hierarchie robimy
     odwrotnie: kafle promocyjne pod banerem sa wyraznie nizsze od niego. */
  #carousel .carousel-item img,
  #carousel figure img,
  #carousel img{
    width:100% !important; height:auto !important;
    object-fit:contain !important; max-height:none !important; border-radius:0 !important;
  }
  .ap-siatka{
    display:flex !important; grid-template-columns:none !important;
    gap:10px !important; overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0 -12px !important; padding:0 12px 6px !important;
  }
  .ap-siatka::-webkit-scrollbar{ display:none; }
  .ap-siatka > .ap-kol{
    flex:0 0 60% !important; max-width:60% !important;
    scroll-snap-align:start; min-height:0 !important;
  }
  .ap-siatka > .ap-kol > *{ max-height:220px !important; }

  /* --- pasek zalet: 2 x 2, ten sam wyglad pozycji co na pulpicie --- */
  #cpserviceblock{ padding:12px 0 !important; }
  #cpserviceblock .container{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important; padding:0 12px !important;
  }
  /* na telefonie kolumny sa waskie i pozycje zostaja przy lewej,
     zeby oba napisy w rzedzie zaczynaly sie w tym samym miejscu */
  #cpserviceblock .service_block_inner{ gap:10px !important; min-height:40px !important;
    justify-content:flex-start !important; }
  #cpserviceblock .service_title1{ font-size:13.5px !important; }
  #cpserviceblock .service_block_inner::before{
    flex:0 0 36px; width:36px; height:36px; border-radius:9px;
    background-size:19px 19px;
  }

  /* --- kategoria: podkategorie jako pasek, nie siatka zdjec --- */
  body#category #subcategories{ margin:0 0 12px !important; padding:0 !important; }
  body#category #subcategories .subcategory-heading{ display:none !important; }
  body#category ul.subcategories-list{
    display:flex !important; flex-wrap:nowrap !important;
    overflow-x:auto !important; gap:8px !important;
    margin:0 -12px !important; padding:2px 12px 8px !important;
    scrollbar-width:none; list-style:none !important;
  }
  body#category ul.subcategories-list::-webkit-scrollbar{ display:none; }
  body#category ul.subcategories-list > li{
    flex:0 0 auto !important; width:auto !important; height:auto !important;
    margin:0 !important; padding:0 !important; border:0 !important;
  }
  body#category ul.subcategories-list .subcategory-image{ display:none !important; }
  body#category ul.subcategories-list .subcategory-name,
  body#category ul.subcategories-list > li > a{
    display:inline-flex !important; align-items:center !important;
    min-height:40px !important; padding:0 14px !important;
    border:1px solid var(--ap-linia) !important; border-radius:8px !important;
    background:#fff !important; color:var(--ap-tekst) !important;
    font-size:13.5px !important; font-weight:600 !important;
    text-decoration:none !important; white-space:nowrap !important;
  }
  body#category .subcategory-name:hover{ border-color:var(--ap-pom) !important; }

  /* --- naglowek kategorii --- */
  body#category .block-category,
  body#category #js-product-list-header{
    padding:10px 0 6px !important; margin:0 0 6px !important;
    background:none !important; border:0 !important; min-height:0 !important;
  }
  body#category h1, body#category .page-header h1{
    font-size:21px !important; line-height:1.2 !important; margin:0 !important;
  }
  body#category #js-product-list-top{
    padding:6px 0 !important; margin:0 0 8px !important;
    border-top:1px solid var(--ap-linia) !important;
    border-bottom:1px solid var(--ap-linia) !important;
  }

  /* --- kafelki produktow --- */
  .product-miniature .product-title,
  .product-miniature p.h3{
    font-size:13.5px !important; line-height:1.3 !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .product-miniature .price{ font-size:16px !important; }
  .product-miniature .add-to-cart{
    min-height:42px !important; font-size:13px !important;
    padding:0 10px !important; border-radius:8px !important; white-space:nowrap !important;
  }
  .product-miniature .st-wishlist-button,
  .product-miniature .btn-product{ width:40px !important; height:40px !important; }

  /* --- przyciski: jeden rytm w calym sklepie --- */
  body .btn, body button.btn, body .btn-primary,
  body .add-to-cart, body .continue, body .cart-content-btn .btn{
    min-height:44px !important; border-radius:8px !important;
    font-size:15px !important; font-weight:600 !important;
    display:inline-flex !important; align-items:center !important;
    justify-content:center !important; gap:8px !important;
  }
  body .btn-primary, body .add-to-cart{
    background:var(--ap-pom) !important; border-color:var(--ap-pom) !important; color:#fff !important;
  }

  /* --- pasek ciasteczek: dwie linie i przycisk --- */
  #cookieNotice{ padding:10px 12px !important; }
  #cookieNotice .container,
  #cookieNotice > div{
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; gap:8px !important;
  }
  #cookieNotice img, #cookieNotice .cookie-img, #cookieNotice .cookie_icon{ display:none !important; }
  #cookieNotice .cookie_text, #cookieNotice p{
    flex:1 1 100% !important; margin:0 !important;
    font-size:12.5px !important; line-height:1.4 !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  #cookieNotice a.btn, #cookieNotice button, #cookieNotice .btn{
    flex:0 0 auto !important; min-height:40px !important;
    padding:0 20px !important; margin:0 0 0 auto !important;
    font-size:14px !important; border-radius:8px !important;
  }

  /* --- okno po dodaniu do koszyka --- */
  #blockcart-modal .modal-dialog{ margin:8px !important; max-width:none !important; }
  #blockcart-modal .modal-body{ padding:14px !important; }
  #blockcart-modal .divide-right{ border:0 !important; }
  #blockcart-modal .cart-content-btn{
    display:flex !important; flex-direction:column !important; gap:8px !important;
  }
  #blockcart-modal .cart-content-btn .btn,
  #blockcart-modal .cart-content-btn button{ width:100% !important; margin:0 !important; }
  #blockcart-modal .product-image{ max-height:120px !important; width:auto !important; }
  #blockcart-modal h4, #blockcart-modal .h6{ font-size:16px !important; }

  /* --- stopka --- */
  #footer a{ min-height:40px !important; display:inline-flex !important; align-items:center !important; }
  #footer li{ font-size:14px !important; }

  /* --- blok SEO na telefonie --- */
  details.ap-seo{ padding:0 12px; }
  .ap-seo-tresc h1, .ap-seo-tresc h2{ font-size:17px !important; }
  .ap-seo-tresc p{ font-size:14px !important; }
}

/* =============================================================
   6. SZUFLADA MENU NA TELEFONIE
   Prawdziwy kontener to #cp_sidevertical_menu_top (300 px), a nie
   .verticalmenu-side. W srodku: .title_main_menu (tytul + zamkniecie)
   i ul.top-menu, gdzie kazda pozycja ma .navbar-toggler z ikonami
   "+"/"-". Bylo: brazowy pasek, pozycje wysrodkowane z plusem przed
   nazwa, kreski pod tekstem. Jest: uklad jak na pulpicie.
   ============================================================= */
@media (max-width:991px){
  #cp_sidevertical_menu_top{
    background:#fff !important;
    width:300px !important; max-width:86vw !important;
    box-shadow:0 18px 50px rgba(0,0,0,.28) !important;
    padding:0 !important;
  }
  #cp_sidevertical_menu_top .title_main_menu{
    display:flex !important; align-items:center !important;
    justify-content:space-between !important;
    min-height:56px !important; margin:0 !important;
    padding:0 4px 0 16px !important;
    background:var(--ap-pom) !important; border:0 !important;
  }
  #cp_sidevertical_menu_top .title_menu{
    margin:0 !important; padding:0 !important;
    font-size:16px !important; font-weight:700 !important;
    color:#fff !important; text-transform:none !important; letter-spacing:0 !important;
  }
  #cp_sidevertical_menu_top .title_menu{
    background:none !important; flex:1 1 auto !important;
  }
  #cp_sidevertical_menu_top .menu-icon,
  #cp_sidevertical_menu_top .cat-title{
    margin:0 !important; padding:0 !important; background:none !important;
    position:static !important; width:44px !important; height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
  /* haslo promocyjne powtorzone w szufladzie — w menu ma byc nawigacja */
  #cp_sidevertical_menu_top .contact-link{ display:none !important; }
  #cp_sidevertical_menu_top .material-icons.menu-close{
    width:44px !important; height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    color:#fff !important; font-size:24px !important; background:none !important;
  }

  #cp_sidevertical_menu_top ul.top-menu{ margin:0 !important; padding:0 !important; }
  #cp_sidevertical_menu_top ul.top-menu > li{
    position:relative !important; margin:0 !important; padding:0 !important;
    border-bottom:1px solid var(--ap-linia) !important;
    text-align:left !important; background:none !important;
  }
  #cp_sidevertical_menu_top ul.top-menu > li > a{
    display:flex !important; align-items:center !important;
    min-height:52px !important; padding:0 52px 0 16px !important;
    margin:0 !important; border:0 !important;
    color:var(--ap-grafit) !important; background:none !important;
    font-size:15px !important; font-weight:500 !important;
    line-height:1.3 !important; text-align:left !important;
    text-decoration:none !important; text-transform:none !important;
  }
  #cp_sidevertical_menu_top ul.top-menu > li > a:hover{ background:var(--ap-krem) !important; }

  /* przelacznik podmenu: pole dotyku po prawej, chevron zamiast "+" */
  #cp_sidevertical_menu_top .pull-xs-right{
    position:absolute !important; right:0 !important; top:0 !important;
    margin:0 !important; padding:0 !important; float:none !important;
  }
  #cp_sidevertical_menu_top .navbar-toggler{
    width:52px !important; height:52px !important; margin:0 !important; padding:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:none !important; border:0 !important;
  }
  #cp_sidevertical_menu_top .navbar-toggler .material-icons{
    font-size:0 !important; width:16px !important; height:16px !important;
    color:transparent !important; background-color:var(--ap-szary);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  #cp_sidevertical_menu_top .navbar-toggler .material-icons.remove{ transform:rotate(180deg); }

  #cp_sidevertical_menu_top .sub-menu{
    position:static !important; width:auto !important;
    box-shadow:none !important; border:0 !important;
    background:var(--ap-krem) !important; padding:0 !important; margin:0 !important;
  }
  #cp_sidevertical_menu_top .sub-menu li > a{
    display:flex !important; align-items:center !important;
    min-height:46px !important; padding:0 16px 0 30px !important;
    font-size:14px !important; color:var(--ap-tekst) !important;
    border-bottom:1px solid rgba(0,0,0,.05) !important; text-align:left !important;
  }
  #cp_sidevertical_menu_top .sub-menu ul{ margin:0 !important; padding:0 !important; }

  #cp_sidevertical_menu_top .vertical-side-top-text,
  #cp_sidevertical_menu_top a.track-order,
  #cp_sidevertical_menu_top #_desktop_user_info,
  .verticalmenu-side #_desktop_user_info{ display:none !important; }

  .overlay.overlay_active{ background:rgba(0,0,0,.45) !important; }
}

/* =============================================================
   7. Zdublowany napis "Sledz zamowienie" na pasku gornym
   Warstwa spolszczajaca chowa oryginalny tekst (font-size:0)
   i dokleja polski przez ::after; warstwa telefonu przywracala
   rozmiar i napis pojawial sie dwa razy.
   ============================================================= */
#header .header-nav a.track-order span,
#header .header-nav .sign-in span{ font-size:0 !important; }
#header .header-nav a.track-order span::after,
#header .header-nav .sign-in span::after{ font-size:12px !important; }

/* =============================================================
   8. DOCIAGNIECIE PO POMIARZE (31.08.2026, wieczor)
   Liczby z emulacji 390x844 po pierwszej turze poprawek.
   ============================================================= */
@media (max-width:767px){

  /* naglowek 173 -> ok. 135 px */
  #header .header-top{ padding:0 !important; }
  #header .header-top .container{ min-height:48px !important; padding:0 12px !important; }
  #header .header-top .header-right{ height:48px !important; }
  #header .header-top-main{ padding:0 !important; }
  #header .header-top-main .container{ min-height:52px !important; padding:0 12px !important; margin:0 !important; }
  #header .header-top-main{ max-height:64px !important; }
  #header .header-nav .container{ min-height:32px !important; }
  #header .cpsearch-main input.search_query{ height:40px !important; }
  #header .cpsearch-main{ margin:0 !important; }
  #header .header-top-main .cpvm-contener .block-title{ margin:0 !important; padding:0 !important; }
  #header .header-top-main .cpvm-contener .menu-title{ display:none !important; }

  /* kafle promocyjne: 220 -> 165 px */
  /* kafel skalujemy jego wlasna wysokoscia — max-height ucinal przycisk */
  .ap-siatka > .ap-kol > *{ max-height:none !important; }
  .ap-siatka .ap-kafel{ min-height:0 !important; height:150px !important; }
  .ap-siatka .ap-kafel__tresc{ padding:12px !important; gap:6px !important; }
  .ap-siatka .ap-nad{ font-size:10px !important; padding:3px 8px !important; }
  /* nazwa produktu: motyw ustawia display:flow-root, przez co
     -webkit-line-clamp nie dzialalo i tekst byl ucinany w polowie wiersza */
  /* nazwa produktu w kafelku promocyjnym.
     PULAPKA: .ap-kafel__tresc to flex w kolumnie, wiec dziecko jest
     blokifikowane — "-webkit-line-clamp" tam nie dziala (przegladarka
     zamienia display na flow-root) i tekst byl ucinany w polowie wiersza.
     Zamiast clampa: element nie moze byc sciskany (flex:0 0 auto),
     a max-height jest DOKLADNA wielokrotnoscia interlinii. */
  .ap-siatka .ap-tyt{
    flex:0 0 auto !important;
    font-size:13.5px !important; line-height:17px !important;
    max-height:34px !important; overflow:hidden !important;
  }
  .ap-siatka .ap-cena{ font-size:19px !important; }
  .ap-siatka .ap-cta{ flex:0 0 auto !important; min-height:34px !important; padding:0 12px !important; font-size:12.5px !important; }
  .ap-siatka .ap-kafel__echo{ font-size:26px !important; }
  .ap-siatka .ap-kafel__foto img{ max-width:44% !important; }

  /* pasek ciasteczek: dwie linie tekstu i przycisk obok */
  #cookieNotice{ padding:8px 10px !important; line-height:1.35 !important; }
  #cookieNotice #cookieNoticeContent{
    display:flex !important; flex-wrap:wrap !important; align-items:center !important;
    gap:8px !important; text-align:left !important; width:100% !important;
  }
  #cookieNotice .cookie_text{
    flex:1 1 100% !important; margin:0 !important;
    font-size:12.5px !important; line-height:1.35 !important;
    display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  #cookieNotice .cookie_btn, #cookieNotice a, #cookieNotice button{
    flex:0 0 auto !important; margin:0 0 0 auto !important;
    min-height:38px !important; padding:0 18px !important;
    display:inline-flex !important; align-items:center !important;
    font-size:14px !important; border-radius:8px !important;
  }

  /* okno "dodano do koszyka" — bylo rozjechane, teksty na sobie */
  #blockcart-modal .modal-dialog{
    margin:0 !important; max-width:none !important; width:100% !important;
    position:fixed !important; left:0 !important; right:0 !important;
    bottom:0 !important; top:auto !important;
  }
  #blockcart-modal .modal-content{
    border-radius:12px 12px 0 0 !important; border:0 !important;
    max-height:88vh !important; overflow-y:auto !important;
  }
  #blockcart-modal .modal-header{
    display:flex !important; align-items:center !important; gap:8px !important;
    padding:14px 14px 10px !important; border-bottom:1px solid var(--ap-linia) !important;
  }
  #blockcart-modal .modal-title{
    margin:0 !important; font-size:16px !important; font-weight:700 !important;
    text-align:left !important; flex:1 1 auto !important;
  }
  #blockcart-modal .modal-header .close{
    margin:0 !important; width:40px !important; height:40px !important;
    font-size:24px !important; opacity:1 !important;
  }
  #blockcart-modal .modal-body{ padding:14px !important; }
  #blockcart-modal .modal-body .row{ display:block !important; margin:0 !important; }
  #blockcart-modal .modal-body [class*="col-md-"]{
    width:100% !important; max-width:100% !important; flex:none !important;
    padding:0 !important; float:none !important;
  }
  #blockcart-modal .divide-right{
    border:0 !important; padding-bottom:12px !important;
    margin-bottom:12px !important; border-bottom:1px solid var(--ap-linia) !important;
  }
  #blockcart-modal .divide-right .row{
    display:flex !important; gap:12px !important; align-items:flex-start !important;
  }
  #blockcart-modal .divide-right .row > [class*="col-md-"]:first-child{
    width:84px !important; flex:0 0 84px !important;
  }
  #blockcart-modal .product-image, #blockcart-modal .modal-body img{
    width:84px !important; height:auto !important; max-height:84px !important; object-fit:contain !important;
  }
  #blockcart-modal .product-name{ font-size:14.5px !important; line-height:1.35 !important; margin:0 0 4px !important; }
  #blockcart-modal .modal-body p{ margin:0 0 4px !important; font-size:14px !important; }
  #blockcart-modal .cart-products-count{ font-weight:700 !important; color:var(--ap-grafit) !important; }
  #blockcart-modal .cart-content-btn{
    display:flex !important; flex-direction:column-reverse !important;
    gap:8px !important; margin-top:12px !important;
  }
  #blockcart-modal .cart-content-btn .btn{
    width:100% !important; margin:0 !important; min-height:48px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  #blockcart-modal .cart-content-btn .btn-secondary{
    background:#fff !important; color:var(--ap-tekst) !important;
    border:1px solid var(--ap-linia) !important;
  }

  /* karta produktu: cena i przycisk wyzej */
  #product .product-cover img{ max-height:200px !important; }
  #product .col-md-5{ margin-bottom:4px !important; }
  #product .product-information{ margin-top:4px !important; }
  #product .product-prices{ margin:4px 0 8px !important; }
  #product .current-price{ font-size:26px !important; }
  #product .product-add-to-cart{ margin:0 0 10px !important; }
}

/* =============================================================
   9. CZYTELNOSC I CELE DOTYKU NA TELEFONIE (pomiar 31.08.2026)
   Znalezione na 390 px: podpisy produktow na banerze hero mialy
   3,2–5,8 px, przycisk banera 7,2 px, a 34 elementy klikalne byly
   mniejsze niz 40 px.
   ============================================================= */
@media (max-width:767px){

  /* baner hero: podpisy przy hotspotach sa nieczytelne przy tej
     szerokosci — zostaja same kropki, tekst zostaje dla czytnikow */
  .bx .bx-k{ display:none !important; }
  .bx .bx-cta{
    font-size:12px !important; min-height:36px !important;
    padding:0 12px !important; display:inline-flex !important;
    align-items:center !important;
  }
  .bx .bx-p{ width:16px !important; height:16px !important; }

  /* plakietka kategorii w kafelku promocyjnym */
  .ap-siatka .ap-nad{ font-size:12px !important; }
  .product-brand, .product-miniature .product-brand{ font-size:12px !important; }

  /* cele dotyku 40 px */
  #header .header-nav a.track-order,
  #header .header-nav a.sign-in,
  #header .header-nav .top-link{
    min-height:40px !important; padding:8px 4px !important;
  }
  .st-wishlist-button, .btn-product, .wishlist .btn{
    width:44px !important; height:44px !important; min-width:44px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  a.remove-from-cart, .remove-from-cart{
    width:40px !important; height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  .ap-koszyk-krok{
    min-width:40px !important; min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  a.ap-koszyk-nazwa{
    display:block !important; padding:6px 0 !important; min-height:32px !important;
  }
  #header .header-right a,
  .blockcart a, .ap-koszyk a.ap-ikona{
    min-width:40px !important; min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
}

/* =============================================================
   10. CELE DOTYKU W FILTRACH, KOSZYKU I LOGOWANIU
   Pomiar 31.08.2026: kategoria mala 182 elementy klikalne ponizej
   40 px (prawie wszystkie w panelu filtrow), logowanie 7,
   koszyk 8 (steppery ilosci 37 px).
   ============================================================= */
@media (max-width:767px){

  /* logo w naglowku: pole dotyku, nie sam obrazek */
  #header .header_logo > a,
  #header .header_logo a{
    display:inline-flex !important; align-items:center !important;
    min-height:44px !important;
  }

  /* marka nad nazwa produktu w kafelku */
  .product-miniature .product-description .product-brand,
  .product-miniature .product-brand,
  .product-flag{ font-size:12px !important; }

  /* panel filtrow */
  #search_filters .facet .title,
  #search_filters .facet > .title{
    display:flex !important; align-items:center !important;
    justify-content:space-between !important;
    min-height:48px !important; margin:0 !important;
    padding:0 4px !important;
    border-bottom:1px solid var(--ap-linia) !important;
  }
  #search_filters .facet .facet-title{ margin:0 !important; font-size:15px !important; }
  #search_filters .facet-label{
    display:flex !important; align-items:center !important; gap:10px !important;
    min-height:44px !important; margin:0 !important; padding:0 4px !important;
  }
  #search_filters .facet-label a,
  #search_filters .facet-label span._gray-darker{
    display:flex !important; align-items:center !important;
    min-height:44px !important; font-size:14px !important;
    color:var(--ap-tekst) !important; text-decoration:none !important;
  }
  #search_filters .custom-checkbox input[type=checkbox]{ width:22px !important; height:22px !important; }
  #search_filters .ui-slider-handle{
    width:28px !important; height:28px !important; top:-12px !important;
  }
  #search_filters .btn-unstyle{ min-height:44px !important; display:flex !important; align-items:center !important; }
  #search_filters .navbar-toggler{
    width:44px !important; height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }

  /* koszyk: stepper ilosci */
  body#cart .bootstrap-touchspin .btn,
  body#cart .input-group-btn .btn,
  body#cart .btn-touchspin{
    width:44px !important; min-width:44px !important; height:44px !important;
  }
  body#cart input.js-cart-line-product-quantity{ height:44px !important; }

  /* logowanie i rejestracja */
  body#authentication .btn,
  body#authentication .input-group .btn,
  body#password .btn{ min-height:44px !important; }
  body#authentication .input-group-btn .btn{ width:44px !important; }
  body#authentication a,
  body#password a,
  .no-account a, .forgot-password a{
    display:inline-flex !important; align-items:center !important;
    min-height:40px !important;
  }
  body#authentication input.form-control,
  body#password input.form-control{ height:48px !important; font-size:16px !important; }

  /* przycisk na banerze */
  .bx .bx-cta{ min-height:40px !important; }
}

/* =============================================================
   11. OSTATNIE CELE DOTYKU (pomiar po 10. turze)
   Kategoria 7, produkt 6, kasa 3 elementy ponizej 40 px.
   ============================================================= */
@media (max-width:767px){
  /* suwak ceny w filtrach — uchwyt 20 px */
  /* motyw ustawia uchwyt przez selektor z identyfikatorem, wiec i my */
  #search_filters .ui-slider .ui-slider-handle,
  #search_filters .ui-slider-handle,
  .ui-slider .ui-slider-handle,
  .ui-slider-handle{
    width:28px !important; height:28px !important;
    top:-11px !important; margin-left:-14px !important;
  }
  /* wybor sortowania nad lista produktow */
  .btn-unstyle.select-title,
  .products-sort .btn-unstyle{
    min-height:44px !important; display:flex !important; align-items:center !important;
  }
  /* okruszki i "Strona glowna" nad lista */
  .block_title a, .breadcrumb a{
    display:inline-flex !important; align-items:center !important; min-height:40px !important;
  }
  /* stepper ilosci na karcie produktu i w koszyku */
  .btn-touchspin, .bootstrap-touchspin .btn{
    width:44px !important; min-width:44px !important;
  }
  #product input.js-product-quantity, #product #quantity_wanted{ height:50px !important; }
  /* zakladki na karcie produktu */
  #product .nav-tabs .nav-link{
    min-width:64px !important; min-height:44px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  /* link marki i "zobacz wszystkie" */
  #product .product-manufacturer a,
  a.ap-polka-link{
    display:inline-flex !important; align-items:center !important; min-height:40px !important;
  }
  /* kasa: powrot do koszyka i "pokaz szczegoly" */
  a.ap-ks-powrot,
  body#checkout .js-show-details{
    display:inline-flex !important; align-items:center !important; min-height:40px !important;
  }
}

/* =============================================================
   12. KARUZELE PRODUKTOW NA TELEFONIE
   Strzalki .carousel-control (44x44) leza NA kafelkach i zaslaniaja
   zdjecie oraz nazwe. Na telefonie liste przewija sie palcem.
   ============================================================= */
@media (max-width:767px){
  .carousel-control,
  a.carousel-control.left,
  a.carousel-control.right{ display:none !important; }
}

/* plakietki na kafelkach produktow (NOWY, PROMOCJA) */
@media (max-width:767px){
  .product-flag, .product-miniature .product-flag{ font-size:12px !important; }
}

/* ostatnie linki bez pola dotyku: marka na karcie produktu i nazwy
   towarow w koszyku (pomiar koncowy 31.08.2026) */
@media (max-width:767px){
  #product .brand-infos a,
  #product .productpage-attributes-items a,
  body#cart .label, body#cart a.label,
  body#cart .product-line-info a{
    display:inline-flex !important; align-items:center !important;
    min-height:40px !important;
  }
}

/* =============================================================
   13. OKIENKA ULUBIONYCH I POROWNYWARKI (.st-modal)
   Na telefonie .modal-dialog mial wysokosc 0, wiec tytul ladowal
   na logo sklepu, a przyciski "OK" i "Anuluj" rozjezdzaly sie po
   ekranie. Skladamy je tak samo jak okno koszyka.
   ============================================================= */
.st-modal.show, .st-modal.in{
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.st-modal .modal-dialog{
  width:min(420px, calc(100% - 24px)) !important; max-width:none !important;
  margin:0 auto !important; height:auto !important;
}
.st-modal .modal-content{
  border:0 !important; border-radius:12px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.22) !important; background:#fff !important;
}
.st-modal .modal-header{
  display:flex !important; align-items:flex-start !important; gap:8px !important;
  padding:18px 16px 10px !important; border-bottom:1px solid var(--ap-linia) !important;
}
.st-modal .modal-title{
  margin:0 !important; flex:1 1 auto !important;
  font-size:16px !important; font-weight:700 !important;
  line-height:1.35 !important; text-align:left !important; color:var(--ap-grafit) !important;
}
.st-modal .modal-title::before{ display:none !important; }
.st-modal .modal-header .close{
  margin:0 !important; width:40px !important; height:40px !important;
  font-size:24px !important; opacity:1 !important; flex:0 0 40px !important;
}
.st-modal .modal-footer{
  display:flex !important; flex-direction:column-reverse !important;
  gap:8px !important; padding:14px 16px 16px !important; border:0 !important;
}
.st-modal .modal-footer .btn{
  width:100% !important; margin:0 !important; min-height:48px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
.st-modal .modal-footer .btn-secondary{
  background:#fff !important; color:var(--ap-tekst) !important;
  border:1px solid var(--ap-linia) !important;
}

/* =============================================================
   14. PASEK CIASTECZEK — DOKONCZENIE
   Zostaly trzy rzeczy: angielskie "Accept" widoczne obok polskiego
   napisu z ::after (ten sam mechanizm co przy "Sledz zamowienie"),
   tekst przyciety w polowie wiersza i ikona ciastka zajmujaca miejsce.
   ============================================================= */
#cookieNotice .closeFontAwesome{ font-size:0 !important; }
#cookieNotice .closeFontAwesome::after{ font-size:14px !important; font-weight:600 !important; }
@media (max-width:767px){
  #cookieNotice{ padding:10px 12px !important; }
  #cookieNotice #cookieNoticeContent{ gap:10px !important; }
  #cookieNotice .cookie_text{
    font-size:12.5px !important; line-height:1.4 !important;
    -webkit-line-clamp:3 !important; max-height:5.2em !important;
  }
  #cookieNotice .closeFontAwesome{
    min-height:40px !important; padding:0 22px !important; border-radius:8px !important;
  }
  /* ikona ciastka jest tlem elementu, nie obrazkiem */
  #cookieNotice #cookieNoticeContent::before,
  #cookieNotice .cookie_icon, #cookieNotice [class*="icon"]{ display:none !important; }
}

/* =============================================================
   15. NAGLOWEK NA TELEFONIE — OD NOWA
   Pomiar na 390 px pokazal, czemu menu bylo niewidoczne: przycisk
   hamburgera mial 24 px szerokosci, koszyk wisial w osobnym rzedzie
   po prawej, a nad logo staly jeszcze dwa linki do konta.
   Uklad docelowy: [logo] [koszyk] / [MENU] [szukaj] / [pasek kategorii].
   ============================================================= */
@media (max-width:767px){

  /* pasek konta nad logo znika — obie pozycje ida na dol szuflady (apbar 19) */
  #header .header-nav{ display:none !important; }

  /* rzad 1: logo + koszyk w jednej linii */
  #header .header-top{ padding:0 !important; }
  #header .header-top .header-div{ padding:0 !important; }
  #header .header-top .container{
    display:flex !important; align-items:center !important;
    justify-content:space-between !important;
    min-height:56px !important; padding:0 12px !important; gap:10px !important;
  }
  #header .header-top .header-left{
    display:flex !important; align-items:center !important;
    margin:0 !important; padding:0 !important; width:auto !important; flex:1 1 auto !important;
  }
  #header .header-top .header_logo img,
  #header .header-top .logo{ max-height:26px !important; width:auto !important; }
  #header .header-top .header-right{
    display:flex !important; align-items:center !important; justify-content:flex-end !important;
    position:static !important; float:none !important;
    width:auto !important; height:auto !important; flex:0 0 auto !important;
    margin:0 !important; padding:0 !important;
  }
  #header .header-top .header-right .top-block-cart{ transform:none !important; margin:0 !important; }
  #header .header-top .header-right{ height:48px !important; }
  #header .header-top .header-right a,
  #header .header-top .header-right .blockcart{
    min-width:48px !important; min-height:48px !important; max-height:48px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }

  /* rzad 2: WIDOCZNY przycisk menu + wyszukiwarka */
  #header .header-top-main{ padding:0 !important; max-height:none !important;
    border-top:1px solid var(--ap-linia) !important; }
  #header .header-top-main .container{
    display:flex !important; align-items:center !important; gap:8px !important;
    min-height:60px !important; padding:0 12px !important;
  }
  #header .header-top-main .text-xs-center.mobile{
    order:0 !important; flex:0 0 auto !important;
    width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important;
  }
  #header .menu-container{
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:7px !important;
    height:44px !important; min-width:92px !important; padding:0 14px !important;
    background:var(--ap-pom) !important; border-radius:10px !important;
    cursor:pointer !important;
  }
  #header .menu-container .cat-title,
  #header .menu-container .material-icons.menu-open{
    font-size:0 !important; color:transparent !important;
    width:20px !important; height:20px !important; margin:0 !important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  }
  #header .menu-container::after{
    content:"Menu" !important;
    font-size:15px !important; font-weight:700 !important; color:#fff !important;
    letter-spacing:.01em !important; line-height:1 !important;
  }
  #header #search_block_top{
    order:1 !important; flex:1 1 auto !important;
    width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important;
  }
  #header .cpsearch-main{ margin:0 !important; }
  #header .cpsearch-main input.search_query{
    height:44px !important; font-size:15px !important;
    border-radius:10px !important; padding:0 48px 0 14px !important;
    border:1px solid var(--ap-linia) !important; background:#fff !important;
  }
  #header .cpsearch-main button,
  #header .cpsearch-main .btn{
    width:44px !important; height:44px !important; min-width:44px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    border-radius:10px !important;
  }

  /* rzad 3: pasek kategorii (apbar 19) */
  .ap-kat-pas{
    display:block !important; width:100% !important;
    background:#fff; border-bottom:1px solid var(--ap-linia);
    overflow:hidden;
  }
  .ap-kat-pas ul{
    display:flex; gap:8px; list-style:none;
    margin:0; padding:8px 12px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .ap-kat-pas ul::-webkit-scrollbar{ display:none; }
  .ap-kat-pas li{ flex:0 0 auto; margin:0; padding:0; }
  .ap-kat-pas a{
    display:inline-flex; align-items:center;
    min-height:40px; padding:0 14px;
    border:1px solid var(--ap-linia); border-radius:10px;
    background:var(--ap-krem); color:var(--ap-tekst);
    font-size:13.5px; font-weight:600; white-space:nowrap; text-decoration:none;
  }
  .ap-kat-pas a.ap-kat-teraz,
  .ap-kat-pas a:active{
    background:var(--ap-pom); border-color:var(--ap-pom); color:#fff;
  }

  /* konto na dole szuflady (apbar 19) */
  .ap-szuflada-konto{
    display:flex; flex-direction:column;
    border-top:1px solid var(--ap-linia); margin-top:8px;
  }
  .ap-szuflada-konto a{
    display:flex; align-items:center;
    min-height:48px; padding:0 16px;
    color:var(--ap-tekst); font-size:14.5px; font-weight:500; text-decoration:none;
    border-bottom:1px solid var(--ap-linia);
  }
}

/* =============================================================
   16. KAFEL PROMOCYJNY NA TELEFONIE — DOMKNIECIE
   Pomiar: tresc kafla miala 168 px przy kaflu 150, bo elementy
   niosly wlasne marginesy (12+14+20+14 = 60 px). Zamiast walczyc
   z kazdym z osobna: zerujemy marginesy, odstep robi gap, a
   plakietka kategorii schodzi z telefonu — na 150 px licza sie
   nazwa, cena i przycisk.
   ============================================================= */
@media (max-width:767px){
  .ap-siatka .ap-kafel__tresc{
    justify-content:center !important; gap:8px !important; padding:12px !important;
  }
  .ap-siatka .ap-kafel__tresc > *{ margin:0 !important; }
  .ap-siatka .ap-kafel__tresc .ap-nad{ display:none !important; }
  .ap-siatka .ap-kafel__tresc .ap-tyt{
    flex:0 0 auto !important;
    font-size:13.5px !important; line-height:17px !important;
    max-height:34px !important; overflow:hidden !important;
  }
  .ap-siatka .ap-kafel__tresc .ap-cena{ font-size:19px !important; line-height:1.1 !important; }
  .ap-siatka .ap-kafel__tresc .ap-cta{
    flex:0 0 auto !important; height:34px !important; min-height:34px !important;
    padding:0 12px !important; font-size:12.5px !important;
  }
}

/* =============================================================
   10. JEDEN PORZADEK W UI (1.09.2026)
   Uwagi Natana: pasek zalet krzywy i pudelko sie rozrywa, blok SEO
   zaprasza do rozwiniecia, stepper ma plus/minus i odwrocone strzalki,
   przyciski porownania i ulubionych to nieczytelne kwadraty, kafelki
   konta krzywe z dziura, adresy ciasne i przyciski z tekstem nie na srodku.
   ============================================================= */

/* --- 10a. PASEK ZALET: jedno pudelko, cztery rowne pola, wlasne kreski ---
   Bylo: kontener z ramka i promieniem z warstwy ap-custom, komorki
   z wlasnymi ramkami i odstepem 12 px — kreski nie trafialy w granice
   pol, a pudelko "pekalo" na zaokragleniach. Teraz odstep = 0, a linie
   rysuje lewa krawedz kazdej komorki, wiec z definicji stoja w podziale. */
#cpserviceblock{
  padding:16px 0 !important;
  background:transparent !important;
  border-top:1px solid var(--ap-linia) !important;
  border-bottom:1px solid var(--ap-linia) !important;
}
#cpserviceblock .container{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 auto !important;
  align-items:stretch !important;
  background:#ffffff !important;
  border:1px solid var(--ap-linia) !important;
  border-radius:10px !important;
  overflow:hidden !important;
}
#cpserviceblock .service-cms-banner-list{
  width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  background:none !important; box-shadow:none !important;
  border:0 !important; border-radius:0 !important;
  border-left:1px solid var(--ap-linia) !important;
  min-width:0 !important;
}
#cpserviceblock .service-cms-banner-list:first-child{ border-left:0 !important; }
#cpserviceblock .service_block_inner{
  display:flex !important; align-items:center !important;
  justify-content:center !important; gap:12px !important;
  min-height:72px !important; height:100% !important;
  padding:14px 16px !important; margin:0 !important;
  text-align:left !important; position:relative !important;
}
#cpserviceblock .service_title1{ white-space:nowrap !important; }

/* --- 10b. BLOK SEO: ma byc cichy. Jest dla wyszukiwarki, nie dla klienta ---
   Zwiniety wyglada jak stopka strony: maly szary napis, delikatna
   strzalka, zero podkreslen i zero koloru marki. Nie zachecamy. */
.ap-seo{
  margin:0 !important;
  padding:10px 0 14px !important;
  border:0 !important;
  background:transparent !important;
}
.ap-seo > summary{
  list-style:none !important;
  display:flex !important; align-items:center !important; gap:8px !important;
  cursor:pointer !important;
  font-family:inherit !important;
  font-size:13px !important; font-weight:400 !important;
  line-height:1.4 !important;
  color:#8a8178 !important;
  text-decoration:none !important;
  border:0 !important; background:none !important;
  padding:0 !important; margin:0 !important;
}
.ap-seo > summary::-webkit-details-marker{ display:none !important; }
.ap-seo > summary::after{
  content:"" !important;
  width:14px; height:14px; flex:0 0 14px;
  background-color:#b6ada2;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:14px 14px; mask-size:14px 14px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .2s ease;
}
.ap-seo[open] > summary::after{ transform:rotate(180deg); }
.ap-seo > summary:hover{ color:#6b645c !important; }
.ap-seo > summary *{
  font-size:13px !important; font-weight:400 !important;
  color:inherit !important; margin:0 !important;
  text-decoration:none !important; border:0 !important;
}
.ap-seo[open]{ padding-bottom:24px !important; }
.ap-seo .ap-seo-tresc,
.ap-seo > *:not(summary){
  font-size:14px !important; line-height:1.6 !important; color:var(--ap-tekst) !important;
}

/* --- 10c. STEPPER ILOSCI: tylko strzalki, gora nad dolem ---
   Bylo: material-icons rysowal plus i minus, a nasza strzalka szla
   z ::before tego samego przycisku — wychodzily dwa znaki obok siebie,
   do tego przycisk "w dol" stal po lewej, czyli odwrotnie niz mysli reka.
   Teraz siatka: pole na calej wysokosci, strzalki w kolumnie obok. */
.bootstrap-touchspin{
  display:grid !important;
  grid-template-columns:1fr 34px !important;
  grid-template-rows:1fr 1fr !important;
  width:112px !important; height:48px !important;
  border:1px solid var(--ap-linia) !important;
  border-radius:6px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:none !important;
}
.bootstrap-touchspin > .input-group-addon{ display:none !important; }
.bootstrap-touchspin > input,
.bootstrap-touchspin > input.form-control{
  grid-column:1 !important; grid-row:1 / span 2 !important;
  width:100% !important; height:100% !important;
  min-height:0 !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important; outline:0 !important;
  background:#fff !important;
  text-align:center !important;
  font-family:var(--ap-font-glos, inherit) !important;
  font-size:16px !important; font-weight:600 !important;
  color:var(--ap-grafit) !important;
  padding:0 !important; margin:0 !important;
}
.bootstrap-touchspin .input-group-btn-vertical{ display:contents !important; }
.bootstrap-touchspin .bootstrap-touchspin-up,
.bootstrap-touchspin .bootstrap-touchspin-down{
  grid-column:2 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:34px !important; min-width:34px !important; height:100% !important;
  padding:0 !important; margin:0 !important;
  border:0 !important; border-left:1px solid var(--ap-linia) !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background-color .15s ease;
}
.bootstrap-touchspin .bootstrap-touchspin-up{ grid-row:1 !important; border-bottom:1px solid var(--ap-linia) !important; }
.bootstrap-touchspin .bootstrap-touchspin-down{ grid-row:2 !important; }
.bootstrap-touchspin .bootstrap-touchspin-up:hover,
.bootstrap-touchspin .bootstrap-touchspin-down:hover{ background:var(--ap-krem) !important; }
.bootstrap-touchspin .bootstrap-touchspin-up i,
.bootstrap-touchspin .bootstrap-touchspin-down i,
.bootstrap-touchspin .touchspin-up,
.bootstrap-touchspin .touchspin-down{
  font-size:0 !important; width:0 !important; height:0 !important;
  overflow:hidden !important; display:none !important;
}
.bootstrap-touchspin .bootstrap-touchspin-up::before,
.bootstrap-touchspin .bootstrap-touchspin-down::before{
  content:"" !important;
  width:14px; height:14px;
  background-color:var(--ap-szary,#6b645c);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:14px 14px; mask-size:14px 14px;
  position:static !important; transform:none !important;
}
.bootstrap-touchspin .bootstrap-touchspin-up::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}
.bootstrap-touchspin .bootstrap-touchspin-down::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* motyw ma reguly z identyfikatorem — musimy miec te sama wage */
#product .bootstrap-touchspin{ display:grid !important; }
#product .bootstrap-touchspin .input-group-btn-vertical{ display:contents !important; }

/* --- 10l. STEPPER W KOSZYKU (pomiar na zywo) ---
   W koszyku pole ilosci mialo szerokosc 0 przez starsza regule
   #main .cart-item .input-group.bootstrap-touchspin .form-control{width:0}
   — po siatce zostawal pusty prostokat. Strzalki rysujemy teraz TLEM
   samego przycisku, nie pseudoelementem: w koszyku ::before bylo gaszone.
   ============================================================= */
body#cart #main .cart-item .input-group.bootstrap-touchspin .form-control,
body .input-group.bootstrap-touchspin > input,
body .input-group.bootstrap-touchspin > input.form-control{
  width:100% !important; min-width:0 !important; max-width:none !important;
  padding:0 !important; text-align:center !important;
  font-size:16px !important; font-weight:600 !important;
  border:0 !important; background:#fff !important; height:100% !important;
}
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down{
  background-repeat:no-repeat !important; background-position:center !important;
  background-size:16px 16px !important; font-size:0 !important;
}
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") !important; }
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; }
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up::before,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down::before{ content:none !important; display:none !important; }
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up:hover,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down:hover{ background-color:var(--ap-krem) !important; }

/* w koszyku tlo przyciskow ustawia skrot "background" z warstwy koszyka
   (1,4,0), ktory kasuje nasz obrazek — powtarzamy z jednym czlonem wiecej */
body#cart #main .cart-item .input-group.bootstrap-touchspin .bootstrap-touchspin-up{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:16px 16px !important;
}
body#cart #main .cart-item .input-group.bootstrap-touchspin .bootstrap-touchspin-down{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:16px 16px !important;
}

/* --- 10d. PORoWNANIE I ULUBIONE: przycisk z napisem, nie zagadka ---
   Bylo: dwa kwadraty 44x44 z ikona fa, ktorej nikt nie rozszyfruje.
   Jest: pigulka z ikona i napisem, ten sam rytm co reszta przyciskow. */
.wish-comp{ display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; }
.wish-comp .compare, .wish-comp .wishlist{ margin:0 !important; }
a.st-compare-button, a.st-wishlist-button,
.st-compare-button.btn-product, .st-wishlist-button.btn-product{
  width:auto !important; min-width:0 !important; height:44px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important;
  padding:0 16px !important; margin:0 !important;
  border:1px solid var(--ap-linia) !important; border-radius:6px !important;
  background:#fff !important; box-shadow:none !important;
  color:var(--ap-tekst) !important;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
a.st-compare-button:hover, a.st-wishlist-button:hover{
  border-color:var(--ap-pom) !important;
  background:rgba(240,129,2,.06) !important;
  color:var(--ap-grafit) !important;
}
.st-compare-bt-content, .st-wishlist-bt-content{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  font-size:14px !important; font-weight:600 !important; line-height:1 !important;
  color:inherit !important;
}
.st-compare-button i, .st-wishlist-button i{
  font-size:0 !important; line-height:0 !important;
  width:18px !important; height:18px !important; flex:0 0 18px !important;
  background-color:var(--ap-pom) !important;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:18px 18px; mask-size:18px 18px;
  margin:0 !important;
}
.st-compare-button i{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h13M3 7l4-4M3 7l4 4M21 17H8m13 0-4-4m4 4-4 4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h13M3 7l4-4M3 7l4 4M21 17H8m13 0-4-4m4 4-4 4'/%3E%3C/svg%3E");
}
.st-wishlist-button i{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5.5 5.5 0 0 0-7.8 0L12 6.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5.5 5.5 0 0 0-7.8 0L12 6.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

/* --- 10m. SZYBKI PODGLAD (pomiar w otwartym oknie) ---
   W oknie podgladu starsza warstwa ustawiala przyciskom stepperu
   order:1 i order:3 oraz wiersze 32px/14px — strzalki wychodzily
   odwrotnie i w roznej wysokosci. Napisy przyciskow porownania
   i ulubionych nachodzily na siebie, bo przycisk zostawal 44 px.
   ============================================================= */
body .modal.quickview .input-group.bootstrap-touchspin,
body .quickview .input-group.bootstrap-touchspin{
  display:grid !important;
  grid-template-columns:1fr 34px !important;
  grid-template-rows:1fr 1fr !important;
  width:112px !important; height:48px !important;
}
body .modal.quickview .bootstrap-touchspin .bootstrap-touchspin-up,
body .quickview .bootstrap-touchspin .bootstrap-touchspin-up{
  order:0 !important; grid-row:1 !important; grid-column:2 !important;
  width:34px !important; height:100% !important; min-height:0 !important;
}
body .modal.quickview .bootstrap-touchspin .bootstrap-touchspin-down,
body .quickview .bootstrap-touchspin .bootstrap-touchspin-down{
  order:0 !important; grid-row:2 !important; grid-column:2 !important;
  width:34px !important; height:100% !important; min-height:0 !important;
}
body .modal.quickview .wish-comp{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
body .modal.quickview .wish-comp a.btn-product{
  width:auto !important; min-width:0 !important; height:44px !important;
  padding:0 16px 0 13px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:9px !important; position:relative !important;
  border:1px solid var(--ap-linia) !important; border-radius:6px !important; background:#fff !important;
}
body .modal.quickview .wish-comp a.btn-product .st-compare-title,
body .modal.quickview .wish-comp a.btn-product .st-wishlist-title{
  position:static !important; display:inline-block !important;
  clip:auto !important; clip-path:none !important; overflow:visible !important;
  opacity:1 !important; visibility:visible !important; transform:none !important;
  background:none !important; box-shadow:none !important; border:0 !important;
  padding:0 !important; margin:0 !important; width:auto !important; height:auto !important;
  left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  font-size:14px !important; font-weight:600 !important; line-height:1 !important;
  color:var(--ap-tekst) !important; white-space:nowrap !important;
}

/* starsza warstwa dokladala polski napis przez ::after przy font-size:0 na
   tytule; teraz tytul jest widoczny, wiec ::after dublowalby napis */
body .modal.quickview .wish-comp a.btn-product .st-compare-title::after,
body .modal.quickview .wish-comp a.btn-product .st-compare-title::before,
body .modal.quickview .wish-comp a.btn-product .st-wishlist-title::after,
body .modal.quickview .wish-comp a.btn-product .st-wishlist-title::before{
  content:none !important; display:none !important;
}
body .modal.quickview .wish-comp a.btn-product .st-compare-title,
body .modal.quickview .wish-comp a.btn-product .st-wishlist-title{ font-size:14px !important; }

/* --- 10e. KAFELKI KONTA: bez dziury i z jednym kompletem ikon ---
   Bylo: siatka 4 kolumn i 7 kafelkow, czyli zawsze jedno puste miejsce,
   ikony z trzech zrodel (material-icons, pusty <i>, goly napis
   "account_box"). Jest: elastyczny rzad, ostatni kafelek dociaga
   szerokosc, a ikony rysujemy sami wedlug adresu. */
body.ap-kt #content .links,
body.ap-kt.page-my-account #content .links{
  display:flex !important; flex-wrap:wrap !important;
  gap:12px !important; margin:0 !important; padding:0 !important;
}
body.ap-kt #content .links > a,
body.ap-kt #content .links > li{
  flex:1 1 240px !important; max-width:none !important;
  width:auto !important; min-width:0 !important;
  margin:0 !important; padding:0 !important;
  display:block !important; text-align:left !important;
}
body.ap-kt #content .links > a .link-item,
body.ap-kt #content .links > li > a{
  display:flex !important; align-items:center !important; gap:14px !important;
  height:100% !important; min-height:76px !important;
  padding:16px 18px !important; margin:0 !important;
  background:#fff !important;
  border:1px solid var(--ap-linia) !important; border-radius:10px !important;
  box-shadow:none !important;
  font-size:15px !important; font-weight:600 !important; line-height:1.25 !important;
  color:var(--ap-grafit) !important;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.ap-kt #content .links > a:hover .link-item,
body.ap-kt #content .links > li:hover > a{
  border-color:var(--ap-pom) !important;
  box-shadow:0 6px 18px rgba(33,33,33,.07) !important;
  transform:translateY(-2px);
}
body.ap-kt #content .links > a .link-item i,
body.ap-kt #content .links > a .link-item .material-icons,
body.ap-kt #content .links a .link-item i{
  font-size:0 !important; line-height:0 !important; margin:0 !important;
  width:0 !important; height:0 !important; display:none !important;
}
body.ap-kt #content .links > a .link-item::before,
body.ap-kt #content .links > li > a::before{
  content:"" !important;
  flex:0 0 44px; width:44px; height:44px; border-radius:10px;
  background-color:rgba(240,129,2,.10);
  background-repeat:no-repeat; background-position:center; background-size:22px 22px;
  display:block;
}
body.ap-kt #content .links > a[href*="dane-osobiste"] .link-item::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
body.ap-kt #content .links > a[href*="adresy"] .link-item::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
body.ap-kt #content .links > a[href*="historia-zamowien"] .link-item::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4M8 14h8M8 17h5'/%3E%3C/svg%3E"); }
body.ap-kt #content .links > a[href*="potwierdzenie-zwrotu"] .link-item::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E"); }
body.ap-kt #content .links > a[href*="psgdpr"] .link-item::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6z'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
body.ap-kt #content .links > a[href*="emailalerts"] .link-item::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8z'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
body.ap-kt #content .links > a[href*="wishlist"] .link-item::before,
body.ap-kt #content .links > a[href*="ulubione"] .link-item::before,
body.ap-kt #content .links > a[href*="stfeature"] .link-item::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5.5 5.5 0 0 0-7.8 0L12 6.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }

/* w siatce konta siedzi takze <li> "Moje komentarze" (modul stfeature) —
   bez tego byla to jedyna pozycja bez kafelka i to ona rozbijala rzedy */
body.ap-kt #content .links > li{ list-style:none !important; display:block !important; }
body.ap-kt #content .links > li > a{
  text-decoration:none !important;
  font-size:15px !important; font-weight:600 !important; color:var(--ap-grafit) !important;
}
body.ap-kt #content .links > li > a::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
body.ap-kt #content .links > li i, body.ap-kt #content .links > li .material-icons{ display:none !important; }

/* --- 10f. ADRESY: karta z powietrzem, akcje jako przyciski --- */
#addresses #content .address,
#address #content .address,
.page-addresses .address{
  width:100% !important; max-width:none !important;
  margin:0 !important;
  border:1px solid var(--ap-linia) !important; border-radius:10px !important;
  background:#fff !important; box-shadow:none !important;
  overflow:hidden !important;
}
#addresses #content .addresses-list,
.page-addresses .addresses-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important;
  gap:16px !important; margin:0 0 20px !important; padding:0 !important;
}
.address .address-body{ padding:20px 22px !important; }
.address .address-body h4{
  font-size:15px !important; font-weight:700 !important;
  color:var(--ap-grafit) !important; margin:0 0 10px !important;
}
.address .address-body address{
  font-size:14px !important; line-height:1.7 !important;
  color:var(--ap-tekst) !important; margin:0 !important; font-style:normal !important;
}
.address .address-footer{
  display:flex !important; gap:10px !important;
  padding:14px 22px !important;
  border-top:1px solid var(--ap-linia) !important;
  background:var(--ap-krem) !important;
}
.address .address-footer a{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important;
  height:38px !important; padding:0 14px !important;
  border:1px solid var(--ap-linia) !important; border-radius:6px !important;
  background:#fff !important;
  font-size:14px !important; font-weight:600 !important; line-height:1 !important;
  color:var(--ap-tekst) !important; text-decoration:none !important;
  transition:border-color .15s ease, color .15s ease;
}
.address .address-footer a:hover{ border-color:var(--ap-pom) !important; color:var(--ap-grafit) !important; }
.address .address-footer a i,
.address .address-footer a .material-icons{
  font-size:0 !important; width:16px !important; height:16px !important; flex:0 0 16px !important;
  background-color:var(--ap-szary,#6b645c) !important;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:16px 16px; mask-size:16px 16px;
  margin:0 !important;
}
.address .address-footer a[href*="address"] i{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}
.address .address-footer a[href*="delete"] i,
.address .address-footer a[href*="Usu"] i{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E");
}

/* --- 10k. DOKONCZENIE KONTA I ADRESOW (pomiar na zywo) ---
   1. W siatce konta stal <li> "Moje komentarze" z linkiem ukrytym przez
      starsza warstwe (klasa ap-kt-ukryte) — niewidoczny, a zajmowal kafelek.
      To on robil dziure w drugim rzedzie.
   2. Kolumna adresu byla przyszpilona na 320 px przez starsza regule
      body#addresses.ap-kt #content > div[class*=col-]. Powtarzamy ten sam
      selektor, zeby o szerokosci decydowala siatka.
   3. Ikona "+" w przycisku siedziala wysoko: material-icons ma wlasna
      interlinie, wiec przy wysrodkowaniu we flexie trzeba ja zerowac.
   ============================================================= */
body.ap-kt #content .links > li:has(> a.ap-kt-ukryte){ display:none !important; }

body#addresses #content .page-content{
  display:flex !important; flex-wrap:wrap !important;
  gap:16px !important; align-items:flex-start !important;
}
body#addresses.ap-kt #content > div[class*="col-"],
body#addresses #content .page-content > div[class*="col-"]{
  flex:1 1 340px !important; width:auto !important; max-width:520px !important;
  padding:0 !important; margin:0 !important;
}
body#addresses #content .page-content > a{
  flex:0 0 100% !important; align-self:flex-start !important; margin-top:4px !important;
}
body.ap-kt .ap-kt-btn i.material-icons,
body.ap-kt .address-footer a i{
  line-height:1 !important; height:16px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}

/* --- 10g. PRZYCISKI I STOPKA KONTA W CALYM SERWISIE ---
   Napis w kazdym przycisku ma stac na srodku, a pasek "Powrot do
   twojego konta" ma oddech od dolnej krawedzi karty. */
.btn, .btn-primary, .btn-secondary, .btn-tertiary,
.ap-kt-btn, .address .address-footer a, button.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:8px !important;
  line-height:1.1 !important;
}
.ap-kt-btn i, .btn i{ vertical-align:middle !important; }
#content .account-link,
.account-links, .page-footer{
  margin-top:28px !important;
  padding-top:18px !important;
  padding-bottom:8px !important;
  border-top:1px solid var(--ap-linia) !important;
}
.page-footer .account-link,
#content .page-footer a{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  font-size:14px !important; color:var(--ap-szary,#6b645c) !important;
  text-decoration:none !important;
}
#content .page-footer a:hover{ color:var(--ap-grafit) !important; }

/* --- 10h. PANEL DZIALOW PRZY ZJEZDZIE PASKA (blad zglaszany przez Natana) ---
   Regula zwijajaca panel byla podpieta pod klase MOTYWU ".fixed", a nasz
   pasek trzyma wlasna ".ap-sticky". Przy powrocie na gore motyw zdejmowal
   swoja klase natychmiast, a pasek jechal jeszcze 0,38 s — i przez ten czas
   panel dzialow rozwijal sie na pelna wysokosc. Dokladamy nasza klase. */
@media (min-width:992px){
  .header-top-main.ap-sticky #cp_vertical_menu_top #_desktop_top_menu{
    display:block !important; visibility:hidden !important; opacity:0 !important;
    transform:translateY(-8px) !important; pointer-events:none !important;
  }
  .header-top-main.ap-sticky #cp_vertical_menu_top:is(:hover,:focus-within) #_desktop_top_menu{
    visibility:visible !important; opacity:1 !important;
    transform:none !important; pointer-events:auto !important;
  }
}

/* --- 10i. TELEFON --- */
@media (max-width:767px){
  #cpserviceblock .container{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #cpserviceblock .service-cms-banner-list:nth-child(odd){ border-left:0 !important; }
  #cpserviceblock .service-cms-banner-list:nth-child(n+3){ border-top:1px solid var(--ap-linia) !important; }
  #cpserviceblock .service_block_inner{
    justify-content:flex-start !important; min-height:58px !important;
    padding:10px 12px !important; gap:10px !important;
  }
  body.ap-kt #content .links > a{ flex:1 1 100% !important; }
  #addresses #content .addresses-list,
  .page-addresses .addresses-list{ grid-template-columns:1fr !important; }
}

/* =============================================================
   10j. DOCIAGNIECIE PO POMIARZE NA ZYWO (1.09.2026)
   Reguly ponizej powtarzaja to, co wyzej, ale z waga selektora
   dobrana do przeciwnika. Zmierzone winne reguly:
     #product .product-quantity .qty .input-group.bootstrap-touchspin{display:flex}
     #product .wish-comp .btn-product{width:44px;padding:0}
     .service_content::after{width:1px;background:#e5e5e5}  (druga kreska w pasku)
     h1::after{width:48px;height:3px;background:pomarancz}   (belka pod naglowkiem SEO)
   ============================================================= */

/* pasek zalet: rowny rytm ikon (kazda w tej samej odleglosci od kreski)
   i zdjecie drugiej, cudzej kreski rysowanej przez motyw */
#cpserviceblock .service_block_inner{
  justify-content:flex-start !important;
  padding-left:26px !important; padding-right:14px !important;
}
#cpserviceblock .service_content::after,
#cpserviceblock .service_content::before{ display:none !important; content:none !important; }

/* blok SEO: trzyma sie siatki strony, bez belki pod naglowkiem */
.ap-seo{ width:min(1400px, 100% - 32px) !important; margin:0 auto !important; }
.ap-seo > summary h1, .ap-seo > summary h2{
  font-size:14px !important; font-weight:500 !important; padding:0 !important;
}
.ap-seo > summary h1::after, .ap-seo > summary h2::after{ display:none !important; content:none !important; }

/* stepper: siatka wygrywa z regula motywu o wyzszej wadze */
body#product .product-quantity .qty .input-group.bootstrap-touchspin,
body#product .product-add-to-cart .input-group.bootstrap-touchspin,
body .quickview .product-quantity .qty .input-group.bootstrap-touchspin,
body .quickview .input-group.bootstrap-touchspin,
body#cart .cart-item .input-group.bootstrap-touchspin,
body .cart-item .input-group.bootstrap-touchspin{
  display:grid !important;
  grid-template-columns:1fr 34px !important;
  grid-template-rows:1fr 1fr !important;
  width:112px !important; height:48px !important;
}
body#product .bootstrap-touchspin .bootstrap-touchspin-up::before,
body#product .bootstrap-touchspin .bootstrap-touchspin-down::before,
body .quickview .bootstrap-touchspin .bootstrap-touchspin-up::before,
body .quickview .bootstrap-touchspin .bootstrap-touchspin-down::before,
body .cart-item .bootstrap-touchspin .bootstrap-touchspin-up::before,
body .cart-item .bootstrap-touchspin .bootstrap-touchspin-down::before{
  content:"" !important; display:block !important;
  width:16px !important; height:16px !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:16px 16px !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  position:static !important; transform:none !important; margin:0 !important;
}
body#product .bootstrap-touchspin .bootstrap-touchspin-up::before,
body .quickview .bootstrap-touchspin .bootstrap-touchspin-up::before,
body .cart-item .bootstrap-touchspin .bootstrap-touchspin-up::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") !important; }
body#product .bootstrap-touchspin .bootstrap-touchspin-down::before,
body .quickview .bootstrap-touchspin .bootstrap-touchspin-down::before,
body .cart-item .bootstrap-touchspin .bootstrap-touchspin-down::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; }

/* porownanie i ulubione: pigulka z ikona i napisem
   (napis siedzi w .st-compare-title, ktory motyw chowa jak dymek) */
body#product .wish-comp a.btn-product,
body .quickview .wish-comp a.btn-product{
  width:auto !important; min-width:0 !important; height:44px !important;
  padding:0 16px 0 13px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:9px !important;
  border:1px solid var(--ap-linia) !important; border-radius:6px !important;
  background:#fff !important; box-shadow:none !important;
}
body#product .wish-comp a.btn-product:hover,
body .quickview .wish-comp a.btn-product:hover{
  border-color:var(--ap-pom) !important; background:rgba(240,129,2,.06) !important;
}
body#product .wish-comp a.btn-product i,
body .quickview .wish-comp a.btn-product i{ display:none !important; }
body#product .wish-comp a.btn-product::before,
body .quickview .wish-comp a.btn-product::before{
  content:"" !important; width:18px; height:18px; flex:0 0 18px;
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
body#product .wish-comp .compare a.btn-product::before,
body .quickview .wish-comp .compare a.btn-product::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h13M3 7l4-4M3 7l4 4M21 17H8m13 0-4-4m4 4-4 4'/%3E%3C/svg%3E"); }
body#product .wish-comp .wishlist a.btn-product::before,
body .quickview .wish-comp .wishlist a.btn-product::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08102' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5.5 5.5 0 0 0-7.8 0L12 6.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l8.8 8.8 8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
body#product .wish-comp a.btn-product .st-compare-bt-content,
body#product .wish-comp a.btn-product .st-wishlist-bt-content,
body .quickview .wish-comp a.btn-product .st-compare-bt-content,
body .quickview .wish-comp a.btn-product .st-wishlist-bt-content{
  display:inline-flex !important; align-items:center !important;
  width:auto !important; height:auto !important;
}
body#product .wish-comp a.btn-product .st-compare-title,
body#product .wish-comp a.btn-product .st-wishlist-title,
body .quickview .wish-comp a.btn-product .st-compare-title,
body .quickview .wish-comp a.btn-product .st-wishlist-title{
  display:inline-block !important;
  clip:auto !important; clip-path:none !important; overflow:visible !important;
  position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important;
  background:none !important; box-shadow:none !important; border:0 !important;
  padding:0 !important; margin:0 !important; width:auto !important; height:auto !important;
  left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  font-size:14px !important; font-weight:600 !important; line-height:1 !important;
  color:var(--ap-tekst) !important; white-space:nowrap !important;
}
body#product .wish-comp a.btn-product .st-compare-title::before,
body#product .wish-comp a.btn-product .st-compare-title::after,
body#product .wish-comp a.btn-product .st-wishlist-title::before,
body#product .wish-comp a.btn-product .st-wishlist-title::after{ display:none !important; content:none !important; }

/* =============================================================
   11. WYNIKI SKANU CALEGO SERWISU (1.09.2026)
   Skaner `views/js/ap-audyt.js` przeszedl po 15 podstronach i mierzyl:
   niesymetryczne marginesy dzieci w przyciskach, roznice wysokosci
   ikony i napisu, wysrodkowanie tresci oraz wystawanie poza okno.
   Realne usterki byly dwie — obie ponizej.
   ============================================================= */

/* 11a. "+ Utworz nowy adres": napis miał margin-top 10 px z reguły
   motywu `.page-addresses .addresses-footer a span`, przez co "+"
   siedzial 5 px wyzej niz tekst. Zerujemy marginesy dzieci w kazdym
   naszym przycisku — plus ta konkretna regula, bo ma swoja wage. */
body .page-addresses .addresses-footer a span,
body.ap-kt .ap-kt-btn > *,
body .ap-kt-btn > span,
body .btn > span{
  margin-top:0 !important; margin-bottom:0 !important;
}

/* 11b. Stopka i lista kontaktowa: ikona stala 4 px nad napisem,
   bo `<i>` mial margin-top 3 px i zerowa interlinie w siatce
   wyrownanej do gory. Ikona dostaje pudelko rowne linii tekstu,
   wiec przy jednej linii stoi w osi napisu, a przy adresie
   wielolinijkowym trzyma sie pierwszej linii. */
#block-contact_list li > i,
#block-contact_list li > i.material-icons,
#footer #block-contact_list li i.material-icons{
  margin-top:0 !important;
  height:21px !important; min-height:21px !important;
  line-height:21px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}

/* 11c. Stopka: pozycje jednolinijkowe (telefon, e-mail, NIP) maja ikone
   w osi napisu; pozycja z adresem ma <br>, wiec ikona zostaje przy
   pierwszej linii — inaczej wjechalaby na srodek trzech wierszy. */
#footer #block-contact_list li:not(:has(br)){ align-items:center !important; }

/* 11d. Przycisk "Wybierz plik" w formularzu kontaktu: pusty
   <span class="icon-span-file"> mial margines i spychal napis o 9 px
   w prawo w przycisku deklarujacym wysrodkowanie. */
label.btn [class*="icon-span-file"]{ display:none !important; margin:0 !important; }
label.btn{ gap:0 !important; }

/* 11e. Pasek zaufania na karcie produktu: ikona (26 px) stala 4 px
   ponizej srodka tytulu, bo pudelko ikony jest wyzsze niz linia napisu.
   Rownamy pudelko ikony do wysokosci pierwszej linii. */
#product .blockreassurance_product span.item-product,
#product span.item-product{
  height:19px !important; line-height:19px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}

/* 11f. Drzewko kategorii w lewej kolumnie: przelacznik "+/-" stal
   5 px ponizej srodka nazwy kategorii (pudelko 18 px pozycjonowane
   absolutnie w wierszu o wysokosci 32 px). Rownamy do wiersza. */
.category-sub-menu li > .navbar-toggler.collapse-icons,
#left-column li > .navbar-toggler.collapse-icons{
  height:32px !important; line-height:32px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  margin-top:0 !important; top:0 !important;
}

/* =============================================================
   12. STEPPER ILOSCI — JEDEN UKLAD, TRZY ROZNE SZABLONY (1.09.2026)
   Sklep ma trzy warianty tego samego pola:
     karta produktu — przyciski w opakowaniu .input-group-btn-vertical,
     szybki podglad — to samo opakowanie, ale motyw nadaje mu wlasny
                      `display`, wiec `display:contents` nie przechodzi,
     koszyk         — przyciski BEZ opakowania, wprost w polu.
   Dlatego pole jest siatka (kolumna na cyfre + kolumna 34 px na
   strzalki), a przyciski dostaja miejsce w siatce ORAZ zachowanie
   we flexie. Ktorykolwiek wariant sie trafi, uklad wychodzi ten sam.
   ============================================================= */
body .input-group.bootstrap-touchspin,
body#product .product-quantity .qty .input-group.bootstrap-touchspin,
body#product .product-add-to-cart .input-group.bootstrap-touchspin,
body .quickview .product-quantity .qty .input-group.bootstrap-touchspin,
body .modal.quickview .input-group.bootstrap-touchspin,
body#cart .cart-item .input-group.bootstrap-touchspin,
body .cart-item .input-group.bootstrap-touchspin{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 34px !important;
  grid-template-rows:1fr 1fr !important;
  width:112px !important; min-width:112px !important; height:48px !important;
  padding:0 !important; margin:0 !important;
  border:1px solid var(--ap-linia) !important; border-radius:6px !important;
  background:#fff !important; overflow:hidden !important; box-shadow:none !important;
}
body .input-group.bootstrap-touchspin > .input-group-addon{ display:none !important; }

body .input-group.bootstrap-touchspin > input,
body .input-group.bootstrap-touchspin > input.form-control,
body#cart #main .cart-item .input-group.bootstrap-touchspin .form-control{
  grid-column:1 !important; grid-row:1 / span 2 !important;
  width:100% !important; min-width:0 !important; max-width:none !important;
  height:100% !important; min-height:0 !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; border-radius:0 !important; outline:0 !important; box-shadow:none !important;
  background:#fff !important;
  text-align:center !important;
  font-family:var(--ap-font-glos, inherit) !important;
  font-size:16px !important; font-weight:600 !important; color:var(--ap-grafit) !important;
  -moz-appearance:textfield;
}
body .input-group.bootstrap-touchspin > input::-webkit-outer-spin-button,
body .input-group.bootstrap-touchspin > input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* opakowanie strzalek: kolumna po prawej — dziala i wtedy, gdy motyw
   odbierze mu `display:contents` */
body .input-group.bootstrap-touchspin .input-group-btn-vertical{
  grid-column:2 !important; grid-row:1 / span 2 !important;
  display:flex !important; flex-direction:column !important;
  width:34px !important; min-width:34px !important; height:100% !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  position:static !important; top:auto !important; right:auto !important; transform:none !important;
}

body .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down{
  grid-column:2 !important;
  flex:1 1 0 !important; order:0 !important;
  width:34px !important; min-width:34px !important; max-width:34px !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; border-left:1px solid var(--ap-linia) !important; border-radius:0 !important;
  background-color:#fff !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:16px 16px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:0 !important; line-height:0 !important; cursor:pointer !important;
  position:static !important; top:auto !important; right:auto !important;
  transition:background-color .15s ease;
}
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up{
  grid-row:1 !important; border-bottom:1px solid var(--ap-linia) !important;
}
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down{ grid-row:2 !important; }
body .input-group.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up,
body .input-group.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{
  width:100% !important; max-width:none !important;
}
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up:hover,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down:hover{ background-color:var(--ap-krem) !important; }
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up:active,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down:active{ background-color:rgba(240,129,2,.12) !important; }
body .input-group.bootstrap-touchspin .btn-touchspin i,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up i,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down i{ display:none !important; }
body .input-group.bootstrap-touchspin .bootstrap-touchspin-up::before,
body .input-group.bootstrap-touchspin .bootstrap-touchspin-down::before{ content:none !important; display:none !important; }

/* =============================================================
   13. STRONA "MARKI" (/producenci)
   Co to jest: lista wszystkich 234 producentow z katalogu, jeden
   wiersz na marke (logo, nazwa, licznik, przycisk). Szablon
   wstawia w logo `src="Array"` — w PrestaShopie 9 obrazek marki
   przychodzi jako tablica, wiec kazdy z 234 wierszy pokazywal
   ikone zepsutego pliku i goly tekst zastepczy. Logotypow marek
   nie ma tez na serwerze (sprawdzone: /img/m/*.jpg to 404), wiec
   zamiast obrazka rysujemy kafelek z inicjalami (wstawia je apbar).
   ============================================================= */
body#manufacturer #brand_list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;
  gap:14px !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
body#manufacturer #brand_list > li.brand{
  width:auto !important; max-width:none !important; flex:none !important;
  margin:0 !important; padding:0 !important;
  border:1px solid var(--ap-linia) !important; border-radius:10px !important;
  background:#fff !important;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body#manufacturer #brand_list > li.brand:hover{
  border-color:var(--ap-pom) !important;
  box-shadow:0 6px 18px rgba(33,33,33,.07) !important;
  transform:translateY(-2px);
}
body#manufacturer #brand_list .brand-inner{ width:auto !important; padding:16px !important; }
body#manufacturer #brand_list .row{
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) !important;
  grid-template-areas:"znak nazwa" "akcja akcja" !important;
  gap:12px 14px !important;
  align-items:center !important;
  margin:0 !important; width:auto !important;
}
body#manufacturer #brand_list .brand-img{
  grid-area:znak !important;
  width:52px !important; height:52px !important;
  max-width:none !important; flex:none !important;
  margin:0 !important; padding:0 !important;
  border-radius:10px !important;
  background:rgba(240,129,2,.10) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important;
}
body#manufacturer #brand_list .brand-img img{ display:none !important; }
body#manufacturer #brand_list .brand-img .ap-znak{
  font-family:var(--ap-font-glos, inherit) !important;
  font-size:17px !important; font-weight:800 !important; letter-spacing:.02em !important;
  line-height:1 !important; color:var(--ap-pom) !important;
  text-transform:uppercase !important;
}
body#manufacturer #brand_list .brand-infos{
  grid-area:nazwa !important;
  width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important; display:block !important;
}
body#manufacturer #brand_list .brand-infos h3,
body#manufacturer #brand_list .brand-infos .product-title{
  margin:0 !important; padding:0 !important;
  font-size:15px !important; font-weight:700 !important; line-height:1.25 !important;
  color:var(--ap-grafit) !important; text-transform:none !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
body#manufacturer #brand_list .brand-products{
  grid-area:akcja !important;
  width:auto !important; max-width:none !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:10px !important;
  margin:0 !important; padding:12px 0 0 !important;
  border-top:1px solid var(--ap-linia) !important;
  text-align:left !important;
}
body#manufacturer #brand_list .product-counter{
  margin:0 !important; padding:0 !important;
  font-size:13px !important; font-weight:600 !important; line-height:1 !important;
  color:var(--ap-szary,#6b645c) !important; white-space:nowrap !important;
}
body#manufacturer #brand_list .brand-products .btn{
  height:38px !important; min-height:38px !important;
  padding:0 14px !important;
  font-size:13px !important; font-weight:600 !important;
  border-radius:6px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  white-space:nowrap !important;
}
@media (max-width:767px){
  body#manufacturer #brand_list{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; gap:10px !important; }
  body#manufacturer #brand_list .brand-inner{ padding:12px !important; }
  body#manufacturer #brand_list .row{ grid-template-columns:44px minmax(0,1fr) !important; }
  body#manufacturer #brand_list .brand-img{ width:44px !important; height:44px !important; }
}

/* =============================================================
   12b. POLE ILOSCI — POJEMNIK I WYSOKOSC (1.09.2026, po zgloszeniu)
   Samo pole bylo juz rowne, ale STALO W ZA MALYM POJEMNIKU:
   `.qty` mial na sztywno 70 px, a pole 112 px, wiec wystawalo
   42 px i wchodzilo pod przycisk "Dodaj do koszyka" (zmierzone:
   odstep przycisku od pola = MINUS 30 px na karcie produktu
   i MINUS 29 px w szybkim podgladzie). Do tego pole mialo swoja
   wysokosc, a przycisk obok swoja (48 vs 52 px), wiec rzad byl
   poszarpany. Teraz pojemnik ma szerokosc pola, a pole bierze
   wysokosc z rzedu — dopasowuje sie samo, jakiej by nie mial
   sasiedni przycisk.
   ============================================================= */
.product-quantity .qty,
.product-quantity .product-double-quantity,
.product-double-quantity{
  width:auto !important; min-width:0 !important; max-width:none !important;
  flex:0 0 auto !important;
}
.product-quantity .product-double-quantity{
  align-self:stretch !important; height:auto !important;
}
.product-quantity .qty{ height:100% !important; }
body#product .product-quantity .qty .input-group.bootstrap-touchspin,
body#product .product-quantity .product-double-quantity .input-group.bootstrap-touchspin,
body .modal .product-quantity .qty .input-group.bootstrap-touchspin,
body .quickview .product-quantity .qty .input-group.bootstrap-touchspin{
  height:100% !important; min-height:44px !important;
}
/* koszyk: przycisk strzalki dokladnie na szerokosc swojej kolumny
   (bylo 37 px w kolumnie 34 px — nadmiar chowalo obciecie ramki) */
body#cart #main .cart-item .input-group.bootstrap-touchspin .btn-touchspin,
body#cart #main .cart-item .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body#cart #main .cart-item .input-group.bootstrap-touchspin .bootstrap-touchspin-down{
  width:34px !important; min-width:34px !important; max-width:34px !important;
}

/* 12c. Kreski w polu ilosci.
   Opakowanie strzalek ma w tym motywie `display:contents` (regula
   z waga identyfikatora, ktorej nie da sie przebic bez ID), a pudelko
   o zerowej geometrii NIE RYSUJE swojej ramki — dlatego pole wygladalo
   jak pusty prostokat z wiszacymi strzalkami. Kreski rysujemy wiec na
   samych przyciskach, selektorem o wadze identyfikatora. */
body#product .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body#product .input-group.bootstrap-touchspin .bootstrap-touchspin-down,
body#cart #main .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body#cart #main .input-group.bootstrap-touchspin .bootstrap-touchspin-down,
body #content .modal .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body #content .modal .input-group.bootstrap-touchspin .bootstrap-touchspin-down,
body #wrapper .modal .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body #wrapper .modal .input-group.bootstrap-touchspin .bootstrap-touchspin-down{
  border-left:1px solid var(--ap-linia) !important;
}
body#product .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body#cart #main .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body #content .modal .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body #wrapper .modal .input-group.bootstrap-touchspin .bootstrap-touchspin-up{
  border-bottom:1px solid var(--ap-linia) !important;
}

/* 12d. To samo tlo i ten sam kolor liczby we wszystkich trzech miejscach.
   W koszyku motyw malowal strzalki na kremowo, a na karcie produktu
   liczba byla brazowa — pole wygladalo inaczej w kazdym miejscu. */
body#cart #main .input-group.bootstrap-touchspin .bootstrap-touchspin-up,
body#cart #main .input-group.bootstrap-touchspin .bootstrap-touchspin-down{
  background-color:#fff !important;
}
body#cart #main .input-group.bootstrap-touchspin .bootstrap-touchspin-up:hover,
body#cart #main .input-group.bootstrap-touchspin .bootstrap-touchspin-down:hover{
  background-color:var(--ap-krem) !important;
}
body#product .input-group.bootstrap-touchspin > input,
body#cart #main .input-group.bootstrap-touchspin .form-control,
body #content .modal .input-group.bootstrap-touchspin > input,
body #wrapper .modal .input-group.bootstrap-touchspin > input{
  color:var(--ap-grafit) !important;
}

/* =============================================================
   14. NAGLOWEK — WYSZUKIWARKA I IKONA KOSZYKA (1.09.2026)
   Zmierzone wady na telefonie (390 px):
     - pole szukania mialo DWIE ramki: formularz z pomaranczowa
       (promien 6) i wsadzone w niego pole z szara (promien 10),
       przesuniete o 22 px lewym paddingiem `.cpsearch-main`,
     - przycisk z lupa staL absolutnie na `top:7px` i wystawal
       4 px PONIZEJ formularza (form 65–110, przycisk 72–114),
     - `#_desktop_cart` ma wysokosc 58 px w rzedzie 48 px, wiec
       byl wysrodkowany na MINUS 1 px i licznik koszyka wychodzil
       nad krawedz naglowka (obcinany przez gorna krawedz okna).
   ============================================================= */
#searchbox{
  height:44px !important;
  border-radius:8px !important;
  overflow:hidden !important;
}
#searchbox .searchtoggle,
#searchbox .cpsearch-main{
  padding-left:0 !important;
  height:44px !important;
}
#searchbox #search_query_top,
#searchbox input.search_query{
  border:0 !important; border-radius:0 !important;
  background:transparent !important;
  height:44px !important; width:100% !important;
  padding:0 60px 0 14px !important;
}
#searchbox button.btn,
#searchbox button[type="submit"]{
  top:0 !important; bottom:0 !important; right:0 !important; left:auto !important;
  height:44px !important;
  margin:0 !important;
  border-radius:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
/* na telefonie przycisk to sama lupa — kwadrat 52 px przy prawej krawedzi;
   na duzym ekranie zostaje napis "Szukaj", wiec szerokosci NIE zwezamy */
@media (max-width:991px){
  #searchbox button.btn,
  #searchbox button[type="submit"]{
    width:52px !important; min-width:52px !important; padding:0 !important;
  }
}
#header #_desktop_cart{ height:48px !important; }

/* =============================================================
   15. „OSTATNIO OGLADANE" I POZOSTALE KARUZELE NA KARCIE PRODUKTU
   Winowajca byla NASZA WLASNA regula z wczesniejszej rundy,
   siedzaca w `ap-custom.css`:
       #product .js-qv-mask, #product .tm-carousel.product_list
         { max-height:50px !important; }
   Mialo to przyciac PASEK MINIATUREK zdjecia (48 px), ale klasa
   `.tm-carousel.product_list` nosza rowniez karuzele „Ostatnio
   ogladane" (#viewed-carousel) i „Podobne produkty"
   (#productscategory-carousel). Zmierzone: kafelki maja 390 px,
   a kontener byl przyciety do 50 px z `overflow:auto` — widac
   bylo tylko gorne 50 px kafelka i strzalki wiszace w powietrzu.
   Zaslepke zdejmujemy z karuzel, a zostawiamy tam, gdzie miala
   dzialac: w masce miniaturek. Nasz plik wczytuje sie PO
   ap-custom.css, wiec przy tej samej wadze selektora wygrywa.
   ============================================================= */
#product .tm-carousel.product_list{ max-height:none !important; }
#product .js-qv-mask,
#product .js-qv-mask .tm-carousel.product_list{ max-height:50px !important; }

/* strzalki karuzeli stawaly na wysokosci nazwy marki i ja zaslanialy
   (zmierzone: srodek strzalki 288 px, srodek zdjecia 213 px);
   ustawiamy je na srodku zdjecia — 84 px od gory karuzeli */
@media (max-width:991px){
  #product .viewed-products .customNavigation{ top:84px !important; }
}

/* 15b. Karuzela byla szersza od swojej sekcji (418 px w pojemniku 388 px
   plus ujemne marginesy −15 px), wiec drugi kafelek wychodzil poza ekran
   i byl przyciety przy prawej krawedzi. Zwezamy karuzele do pojemnika;
   szerokosc KAFELKA przelicza skrypt (owl liczy ja w px przy starcie
   i sam z siebie robi to ponownie tylko przy zmianie szerokosci okna). */
@media (max-width:991px){
  #product .viewed-products .products,
  #product .productscategory .products,
  #product .tm-carousel.product_list:not(.additional-image-slider){
    margin-left:0 !important; margin-right:0 !important;
  }
  #product .tm-carousel.product_list:not(.additional-image-slider){
    width:100% !important;
  }
  #product .productscategory .customNavigation{ top:84px !important; }
}

/* =============================================================
   16. RADIO I CHECKBOX — JEDNA KONTROLKA W CALYM SKLEPIE (2.09.2026)
   Zmierzone w kasie: motyw rysuje kropke radia spanem o polozeniu
   top:3px/left:3px liczonym pod kolko 18 px, a nasze kolka maja 22 px
   (dostawa, platnosc) — kropka siedziala 2 px za wysoko i 2 px w lewo.
   W kroku platnosci kropka niezaznaczonych miala 0x0 i po zaznaczeniu
   wskakiwala w to samo krzywe miejsce. Teraz kropka jest centrowana
   z 50 %/50 % i ujemnym marginesem, wiec nie zalezy od rozmiaru kolka.
   ============================================================= */
html body .custom-radio{
  position:relative !important; display:inline-block !important;
  width:20px !important; height:20px !important; min-width:20px !important;
  margin:0 !important; padding:0 !important;
  border:2px solid #c9c1b4 !important; border-radius:50% !important;
  background:#fff !important; box-sizing:border-box !important;
  vertical-align:middle !important; flex:0 0 20px !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
html body .custom-radio input[type=radio]{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; margin:0 !important;
  opacity:0 !important; cursor:pointer !important; z-index:2 !important;
}
/* kropka NIE jest osobnym elementem: pudelko stoi czesto na ulamku piksela
   (zmierzone x=313,33) i osobny span rasteryzuje sie na innej granicy niz
   obwodka — wyglada na przesuniety mimo dx/dy=0. Kropka to gradient w tle
   TEGO SAMEGO elementu, wiec jest koncentryczna z obwodka z definicji. */
html body .custom-radio > span{ display:none !important; }
html body .custom-radio:has(input[type=radio]:checked){
  border-color:#f08102 !important;
  background:radial-gradient(circle at 50% 50%, #f08102 0 4.4px, rgba(240,129,2,0) 5.4px) #fff !important;
}
html body .custom-radio:has(input[type=radio]:focus-visible){ box-shadow:0 0 0 3px rgba(240,129,2,.25) !important; }
html body .custom-radio:hover{ border-color:#f08102 !important; }

/* checkbox motywu: input (niewidoczny) + span z ikona material */
html body .custom-checkbox{ position:relative !important; }
html body .custom-checkbox input[type=checkbox]{
  position:absolute !important; width:20px !important; height:20px !important;
  margin:0 !important; opacity:0 !important; cursor:pointer !important; z-index:2 !important;
}
html body .custom-checkbox input[type=checkbox] + span{
  position:relative !important; top:0 !important; left:0 !important; display:inline-block !important;
  width:20px !important; height:20px !important; min-width:20px !important;
  margin:0 !important; padding:0 !important; box-sizing:border-box !important;
  border:2px solid #c9c1b4 !important; border-radius:5px !important;
  background:#fff !important; vertical-align:middle !important; flex:0 0 20px !important;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
html body .custom-checkbox input[type=checkbox] + span .material-icons,
html body .custom-checkbox input[type=checkbox] + span i{ display:none !important; }
html body .custom-checkbox input[type=checkbox] + span::after,
html body .custom-checkbox input[type=checkbox] + span::before{ display:none !important; content:none !important; }
html body .custom-checkbox input[type=checkbox]:checked + span{
  background:#f08102 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/></svg>") center/12px 12px no-repeat !important;
  border-color:#f08102 !important;
}
html body .custom-checkbox input[type=checkbox]:focus-visible + span{ box-shadow:0 0 0 3px rgba(240,129,2,.25) !important; }
html body .custom-checkbox:hover input[type=checkbox] + span{ border-color:#f08102 !important; }

/* kasa: warstwa 53 dawala checkboxowi zgody 18 px i margines 2/4 — wyrownujemy do 20 px */
html body#checkout #conditions-to-approve .custom-checkbox{ display:flex !important; align-items:flex-start !important; gap:10px !important; }
html body#checkout #conditions-to-approve .custom-checkbox input[type=checkbox]{ flex:0 0 20px !important; width:20px !important; height:20px !important; margin:0 !important; }
html body#checkout #conditions-to-approve .custom-checkbox input[type=checkbox] + span{ margin:1px 0 0 !important; }
html body#checkout .delivery-option .custom-radio,
html body#checkout .payment-option .custom-radio{ width:20px !important; height:20px !important; display:inline-block !important; }
html body#checkout .delivery-option,
html body#checkout .payment-option{ grid-template-columns:20px minmax(0,1fr) auto !important; }

/* zgoda w kasie: HTML to li > div.pull-xs-left > .custom-checkbox(input+span) + div.condition-label > label.
   Kwadrat siedzial 6 px nizej niz tekst (float + line-height 21 px kontenera). Jeden wiersz flex. */
html body#checkout #conditions-to-approve li{ display:flex !important; align-items:center !important; gap:10px !important; padding:0 16px !important; }
html body#checkout #conditions-to-approve li > .pull-xs-left{ float:none !important; flex:0 0 20px !important; width:20px !important; height:20px !important; line-height:0 !important; margin:0 !important; padding:0 !important; }
html body#checkout #conditions-to-approve .custom-checkbox{ display:block !important; width:20px !important; height:20px !important; margin:0 !important; line-height:0 !important; }
html body#checkout #conditions-to-approve .custom-checkbox input[type=checkbox]{ top:0 !important; left:0 !important; }
html body#checkout #conditions-to-approve .custom-checkbox input[type=checkbox] + span{ display:block !important; margin:0 !important; }
html body#checkout #conditions-to-approve li > .condition-label{ flex:1 1 auto !important; margin:0 !important; padding:0 !important; }
html body#checkout #conditions-to-approve li > .condition-label label{ display:block !important; margin:0 !important; line-height:1.4 !important; }

/* zielony znacznik "zrobione" przy tytule kroku byl owalem 26x22 (padding 0 13px z motywu) */
html body#checkout .checkout-step .step-title i.done,
html body#checkout .checkout-step .step-title .material-icons.done{
  width:22px !important; height:22px !important; min-width:22px !important; padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:14px !important; line-height:22px !important; border-radius:50% !important; box-sizing:border-box !important;
}

/* gole checkboxy (np. "Domyslna" w ulubionych) */
html body td input[type=checkbox]:not(.custom-checkbox input){ accent-color:#f08102 !important; width:20px !important; height:20px !important; cursor:pointer; vertical-align:middle; margin:0 !important; }

/* =============================================================
   17. KONTO: HISTORIA ZAMOWIEN, SZCZEGOLY, ULUBIONE, WIADOMOSCI (2.09.2026)
   Po pierwszym prawdziwym zamowieniu (IUJAWHCWQ) wyszlo, ze historia to
   goly wiersz tabeli z granatowa plakietka i dwoma linkami sklejonymi
   w jedna komorke; szczegoly zamowienia to piec ramek tabel jedna pod
   druga z "Za darmo!", waga paczki i formularzem wiadomosci wysrodkowanym
   pod tabelami; ulubione mialy angielskie naglowki i przycisk, ktory po
   kliknieciu zamienial sie w samo kolko. Markup buduje apbar (sekcja 20),
   tu jest wyglad. Prefiks klas: .ap-zm-
   ============================================================= */
.ap-zm-ukryte{ display:none !important; }

/* --- przyciski --- */
.ap-zm-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:8px; min-height:44px !important; padding:0 20px !important; border:0 !important;
  border-radius:6px !important; background:#f08102 !important; color:#fff !important;
  font-size:14.5px !important; font-weight:700 !important; line-height:1 !important;
  text-decoration:none !important; text-transform:none !important; cursor:pointer;
  box-shadow:0 6px 16px rgba(240,129,2,.2) !important;
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease !important;
  white-space:nowrap;
}
.ap-zm-btn:hover{ background:#d97300 !important; color:#fff !important; }
.ap-zm-btn:active{ transform:translateY(1px); }
.ap-zm-btn--cichy{ background:#fff !important; color:#1d1d1f !important; border:1.5px solid #d9d1c4 !important; box-shadow:none !important; }
.ap-zm-btn--cichy:hover{ background:#faf7f2 !important; border-color:#b9b0a1 !important; color:#1d1d1f !important; }
.ap-zm-btn--maly{ min-height:38px !important; padding:0 14px !important; font-size:13.5px !important; }

/* --- plakietka statusu (kolor po znaczeniu, nie po ID statusu) --- */
.ap-zm-status{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  padding:6px 11px; border-radius:6px; font-size:13px; font-weight:700; line-height:1.2;
  text-transform:none; letter-spacing:0; white-space:normal;
  background:#f1ede4; color:#3d3833; border:1px solid transparent;
}
.ap-zm-status::before{ content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:currentColor; }
.ap-zm-status--czeka{ background:#fff3e3; color:#9a5300; border-color:#fbd9ad; }
.ap-zm-status--ok{ background:#e9f8ee; color:#15703b; border-color:#bde8cb; }
.ap-zm-status--zle{ background:#fdecec; color:#a32626; border-color:#f4c2c2; }
.ap-zm-status--info{ background:#eaf1fb; color:#254a7d; border-color:#c6d8f0; }

/* --- HISTORIA ZAMOWIEN: karty --- */
.ap-zm-lista{ display:flex; flex-direction:column; gap:14px; }
.ap-zm-karta{
  border:1px solid #e6dfd2; border-radius:10px; background:#fff; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ap-zm-karta:hover{ border-color:#f5c58a; box-shadow:0 8px 24px rgba(33,33,33,.07); }
.ap-zm-karta-glowa{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 20px; background:#fbf9f5; border-bottom:1px solid #eee8dc;
}
.ap-zm-karta-glowa > div{ display:flex; align-items:baseline; gap:10px 14px; flex-wrap:wrap; }
.ap-zm-nadtytul{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a8178; }
.ap-zm-nr{ font-size:18px; font-weight:800; letter-spacing:.02em; color:#1d1d1f; font-variant-numeric:tabular-nums; }
.ap-zm-data{ font-size:14px; color:#3d3833; }
.ap-zm-karta-tresc{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 28px; align-items:center;
  padding:18px 20px;
}
.ap-zm-meta{ display:flex; flex-wrap:wrap; gap:10px 32px; margin:0 !important; }
.ap-zm-meta > div{ display:flex; flex-direction:column; gap:3px; }
.ap-zm-meta dt{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a8178; margin:0; }
.ap-zm-meta dd{ margin:0; font-size:15px; font-weight:600; color:#1d1d1f; }
.ap-zm-meta dd a{ color:#c96d00; text-decoration:none; border-bottom:1px solid #f5c58a; }
.ap-zm-kwota{ font-size:26px; font-weight:800; color:#1d1d1f; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ap-zm-kwota small{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a8178; margin-bottom:2px; }
.ap-zm-karta-stopka{
  display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  padding:14px 20px; border-top:1px solid #f1ece3;
}
.ap-zm-karta-stopka .ap-zm-status{ margin-right:auto; }

/* --- SZCZEGOLY ZAMOWIENIA --- */
.ap-zm-glowa{
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  padding:0 0 18px; margin:0 0 22px; border-bottom:1px solid #ece7dd;
}
.ap-zm-glowa > div{ display:flex; align-items:baseline; gap:10px 14px; flex-wrap:wrap; }
.ap-zm-glowa .ap-zm-nr{ font-size:24px; }
.ap-zm-glowa-akcje{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ap-zm-uklad{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px 28px; align-items:start; }
.ap-zm-kol{ display:flex; flex-direction:column; gap:22px; min-width:0; }
.ap-zm-sekcja{ border:1px solid #e6dfd2; border-radius:10px; background:#fff; overflow:hidden; }
.ap-zm-sekcja > h3, .ap-zm-sekcja > h4{
  margin:0 !important; padding:14px 18px !important; font-size:15.5px !important; font-weight:800 !important;
  color:#1d1d1f !important; text-transform:none !important; letter-spacing:0 !important; line-height:1.3 !important;
  background:#fbf9f5; border-bottom:1px solid #eee8dc;
}
.ap-zm-sekcja > h3 span{ font-weight:600; color:#8a8178; font-size:13.5px; margin-left:8px; }
.ap-zm-cialo{ padding:16px 18px; }

/* co dalej */
.ap-zm-dalej{ border:1.5px solid #f5c58a; background:#fff8ef; border-radius:10px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; }
.ap-zm-dalej-ikona{ flex:0 0 40px; width:40px; height:40px; border-radius:9px; background:#f08102; display:flex; align-items:center; justify-content:center; }
.ap-zm-dalej-ikona span{ display:block; width:22px; height:22px; background:#fff; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:22px; mask-size:22px; }
.ap-zm-dalej strong{ display:block; font-size:15.5px; font-weight:800; color:#1d1d1f; margin:0 0 4px; }
.ap-zm-dalej p{ margin:0 !important; font-size:14px; line-height:1.5; color:#3d3833; }
.ap-zm-dalej p + p{ margin-top:6px !important; }

/* produkty */
.ap-zm-produkty{ list-style:none; margin:0 !important; padding:0 !important; }
.ap-zm-produkt{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px; align-items:center;
  padding:14px 18px; border-bottom:1px solid #f1ece3;
}
.ap-zm-produkt:last-child{ border-bottom:0; }
.ap-zm-produkt{ text-align:left; }
.ap-zm-produkt-nazwa{ grid-column:1; grid-row:1; font-size:15px; font-weight:700; color:#1d1d1f; text-decoration:none; line-height:1.35; }
.ap-zm-produkt-nazwa:hover{ color:#d97300; }
.ap-zm-produkt-ilosc{ grid-column:1; grid-row:2; font-size:13.5px; color:#6b645c; font-variant-numeric:tabular-nums; }
.ap-zm-produkt-suma{ grid-column:2; grid-row:1 / span 2; text-align:right; font-size:16px; font-weight:800; color:#1d1d1f; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ap-zm-suma{ margin:0 !important; padding:12px 18px 14px; border-top:1px solid #eee8dc; background:#fbf9f5; }
.ap-zm-suma div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:5px 0; font-size:14.5px; color:#3d3833; }
.ap-zm-suma div dt{ margin:0; font-weight:600; }
.ap-zm-suma div dd{ margin:0; font-weight:700; color:#1d1d1f; font-variant-numeric:tabular-nums; }
.ap-zm-suma div.ap-zm-suma-razem{ margin-top:6px; padding-top:10px; border-top:1px solid #e6dfd2; font-size:16px; }
.ap-zm-suma div.ap-zm-suma-razem dd{ font-size:22px; font-weight:800; }
.ap-zm-suma dd.ap-zm-zero{ color:#15703b; }

/* dostawa i platnosc, adresy, historia statusow */
.ap-zm-fakty{ list-style:none; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:12px; }
.ap-zm-fakty li{ display:flex; flex-direction:column; gap:3px; }
.ap-zm-fakty li span{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a8178; }
.ap-zm-fakty li strong{ font-size:15px; font-weight:700; color:#1d1d1f; }
.ap-zm-fakty li em{ font-style:normal; font-size:13.5px; color:#15703b; font-weight:700; }
.ap-zm-adres{ font-size:14.5px; line-height:1.55; color:#3d3833; font-style:normal; }
.ap-zm-adres b{ display:block; font-weight:700; color:#1d1d1f; }
.ap-zm-adres-alias{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:4px; background:#f1ede4; font-size:12px; font-weight:700; color:#6b645c; text-transform:none; letter-spacing:0; vertical-align:middle; }
.ap-zm-historia{ list-style:none; margin:0 !important; padding:0 !important; }
.ap-zm-historia li{ position:relative; display:flex; flex-direction:column; gap:6px; padding:0 0 14px 22px; }
.ap-zm-historia li::before{ content:""; position:absolute; left:4px; top:5px; width:9px; height:9px; border-radius:50%; background:#f08102; box-shadow:0 0 0 3px #fff3e3; }
.ap-zm-historia li::after{ content:""; position:absolute; left:8px; top:18px; bottom:-2px; width:1.5px; background:#eee8dc; }
.ap-zm-historia li:last-child::after{ display:none; }
.ap-zm-historia li:last-child{ padding-bottom:0; }
.ap-zm-historia time{ font-size:13px; color:#8a8178; font-variant-numeric:tabular-nums; }
.ap-zm-historia .ap-zm-status{ align-self:flex-start; }

/* wiadomosci */
.ap-zm-watek{ display:flex; flex-direction:column; gap:12px; padding:16px 18px; }
.ap-zm-wiad{ max-width:78%; display:flex; flex-direction:column; gap:5px; }
.ap-zm-wiad--ty{ align-self:flex-end; align-items:flex-end; }
.ap-zm-wiad-kto{ font-size:12.5px; font-weight:700; color:#8a8178; letter-spacing:.02em; }
.ap-zm-wiad-kto time{ font-weight:500; margin-left:8px; }
.ap-zm-wiad-tekst{ padding:11px 14px; border-radius:10px; font-size:14.5px; line-height:1.5; color:#1d1d1f; background:#f6f2ea; border-bottom-left-radius:4px; white-space:pre-line; }
.ap-zm-wiad--ty .ap-zm-wiad-tekst{ background:#fff3e3; border-bottom-left-radius:10px; border-bottom-right-radius:4px; }
.ap-zm-watek-pusto{ padding:16px 18px; font-size:14.5px; color:#6b645c; }
.ap-zm-form{ padding:16px 18px; border-top:1px solid #eee8dc; }
.ap-zm-form form header{ display:none !important; }
.ap-zm-form .form-fields{ display:flex; flex-direction:column; gap:12px; }
.ap-zm-form .form-group.row{ display:flex !important; flex-direction:column !important; gap:6px; margin:0 !important; max-width:none !important; }
.ap-zm-form .form-group.row > *{ width:100% !important; max-width:100% !important; flex:none !important; padding:0 !important; margin:0 !important; float:none !important; }
.ap-zm-form label.form-control-label{ font-size:13.5px !important; font-weight:700 !important; color:#3d3833 !important; text-align:left !important; }
.ap-zm-form label.form-control-label.ap-konto-pusta-etykieta{ display:none !important; }
.ap-zm-form select.form-control, .ap-zm-form textarea.form-control{
  width:100% !important; max-width:520px !important; border:1.5px solid #d9d1c4 !important; border-radius:6px !important;
  background:#fff !important; font-size:14.5px !important; color:#1d1d1f !important; box-shadow:none !important;
}
.ap-zm-form select.form-control{ height:44px !important; padding:0 12px !important; }
.ap-zm-form textarea.form-control{ min-height:110px !important; padding:10px 12px !important; }
.ap-zm-form select.form-control:focus, .ap-zm-form textarea.form-control:focus{ border-color:#f08102 !important; box-shadow:0 0 0 3px rgba(240,129,2,.18) !important; outline:0 !important; }
.ap-zm-form .form-footer{ text-align:left !important; margin:14px 0 0 !important; padding:0 !important; }
.ap-zm-form .form-footer button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-height:44px !important; width:auto !important; padding:0 22px !important; border:0 !important; border-radius:6px !important;
  background:#f08102 !important; color:#fff !important; font-size:14.5px !important; font-weight:700 !important;
  box-shadow:0 6px 16px rgba(240,129,2,.2) !important; text-transform:none !important;
}
.ap-zm-form .form-footer button:hover{ background:#d97300 !important; }

/* --- ULUBIONE --- */
body#module-stfeature-mywishlist .new-wishlist{
  display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:end;
  max-width:560px; margin:0 0 22px !important; padding:0 0 22px; border-bottom:1px solid #ece7dd;
}
body#module-stfeature-mywishlist .new-wishlist > .form-group{ margin:0 !important; }
body#module-stfeature-mywishlist .new-wishlist > .form-group:first-child{ grid-column:1; grid-row:1; }
body#module-stfeature-mywishlist .new-wishlist > .form-group.has-success,
body#module-stfeature-mywishlist .new-wishlist > .form-group.has-danger{ grid-column:1 / -1; }
body#module-stfeature-mywishlist .new-wishlist > .form-group.has-success:not(:has(.form-control-feedback:not(:empty))),
body#module-stfeature-mywishlist .new-wishlist > .form-group.has-danger:not(:has(.form-control-feedback:not(:empty))){ display:none; }
body#module-stfeature-mywishlist .new-wishlist label{ display:block; text-align:left !important; margin:0 0 6px !important; font-size:13.5px !important; font-weight:700 !important; color:#3d3833 !important; }
body#module-stfeature-mywishlist .new-wishlist input.form-control{
  height:44px !important; border:1.5px solid #d9d1c4 !important; border-radius:6px !important; font-size:14.5px !important; box-shadow:none !important;
}
body#module-stfeature-mywishlist .new-wishlist input.form-control:focus{ border-color:#f08102 !important; box-shadow:0 0 0 3px rgba(240,129,2,.18) !important; }
body#module-stfeature-mywishlist .new-wishlist .st-save-wishlist-bt{
  grid-column:2; grid-row:1; align-self:end;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important;
  min-height:44px !important; height:44px !important; padding:0 20px !important; margin:0 !important;
  border:0 !important; border-radius:6px !important; background:#f08102 !important; color:#fff !important;
  font-size:14.5px !important; font-weight:700 !important; white-space:nowrap; box-shadow:0 6px 16px rgba(240,129,2,.2) !important;
}
body#module-stfeature-mywishlist .new-wishlist .st-save-wishlist-bt:hover{ background:#d97300 !important; }
/* kolko ladowania: 16 px, obok napisu; napis nigdy nie znika (wtyczka chowa go jQuery .hide()) */
body#module-stfeature-mywishlist .st-save-wishlist-bt .st-save-wishlist-bt-text{ display:inline !important; }
body#module-stfeature-mywishlist .st-save-wishlist-bt .st-save-wishlist-loading{
  width:16px !important; height:16px !important; margin:0 !important; border-width:2px !important;
  border-color:rgba(255,255,255,.35) !important; border-top-color:#fff !important; flex:0 0 16px; position:static !important;
}
body#module-stfeature-mywishlist .st-save-wishlist-bt .st-save-wishlist-loading[style*="none"]{ display:none !important; }
body#module-stfeature-mywishlist .list-wishlist table td{ vertical-align:middle !important; }
body#module-stfeature-mywishlist .list-wishlist a.view-wishlist-product{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#1d1d1f; text-decoration:none; }
body#module-stfeature-mywishlist .list-wishlist a.view-wishlist-product:hover{ color:#d97300; }
body#module-stfeature-mywishlist .list-wishlist a.view-wishlist-product .material-icons{ font-size:20px; color:#f08102; }
body#module-stfeature-mywishlist .list-wishlist td a:not(.view-wishlist-product){ color:#c96d00; font-weight:600; text-decoration:none; border-bottom:1px solid #f5c58a; }
body#module-stfeature-mywishlist .list-wishlist td i.material-icons:only-child{ color:#a32626; cursor:pointer; font-size:22px; }
body#module-stfeature-mywishlist .list-wishlist .st-view-wishlist-product-loading{ display:none !important; }
.ap-zm-ul-hint{ margin:0 0 14px !important; font-size:14.5px; color:#3d3833; }
.ap-zm-ul-hint b{ font-weight:700; color:#1d1d1f; }

/* --- telefon i tablet --- */
@media (max-width:991px){
  .ap-zm-uklad{ grid-template-columns:minmax(0,1fr); }
  .ap-zm-karta-tresc{ grid-template-columns:minmax(0,1fr); }
  .ap-zm-kwota{ font-size:22px; }
  .ap-zm-karta-stopka .ap-zm-btn{ flex:1 1 auto; }
  .ap-zm-wiad{ max-width:92%; }
  body#module-stfeature-mywishlist .new-wishlist{ grid-template-columns:minmax(0,1fr); }
  body#module-stfeature-mywishlist .new-wishlist .st-save-wishlist-bt{ grid-column:1; grid-row:auto; width:100%; }
}
@media (max-width:575px){
  .ap-zm-glowa-akcje, .ap-zm-karta-stopka{ flex-direction:column; align-items:stretch; }
  .ap-zm-karta-stopka .ap-zm-status{ margin-right:0; align-self:flex-start; }
  .ap-zm-produkt{ grid-template-columns:minmax(0,1fr); }
  .ap-zm-produkt-suma{ grid-row:auto; }
}


/* ==========================================================================
   31. BANER "EKSPRES + KAWA GRATIS" — WARSTWA INTERAKTYWNA
   Slajd 1 slidera (cp_imageslider): promocja Siemens EQ.6 plus s500 + 1 kg
   kawy Lavazza gratis. Prowadzi do zestawu 24071.

   Modul renderuje slajd jako figure ze zdjeciem w linku i pustym
   figcaption.caption — to figcaption jest jedynym miejscem na wlasny HTML,
   wiec cala interakcja siedzi tam (opis slajdu: 06-design/kawa/opis-slajdu.html).

   Co robi warstwa:
     1. SWIATLO W PIERSCIENIACH. Przez dwa okregi wypalone w tle banera
        przeplywa smuga swiatla z lewej na prawa. Maska wycina ja dokladnie
        do obrysu okregow, wiec swieci sam pierscien, nie prostokat.
     2. PRZYCISK. Nie jest wypalony w obrazku — to prawdziwy link, ktory na
        najechanie unosi sie, przelewa highlightem i wysuwa strzalke.
     3. HOVER BANERA. Swiatlo przyspiesza, zdjecie lekko oddycha.

   Skalowanie: figure ma container-type, wszystkie rozmiary w cqw (procent
   szerokosci banera), wiec warstwa trzyma sie obrazka na kazdej szerokosci.
   Plotno zrodlowe: 1100 x 496 px.
   ========================================================================== */

/* powtorzone z sekcji 19, zeby ta warstwa dzialala niezaleznie od tamtej */
#carousel .carousel-item figure{ position: relative !important; container-type: inline-size !important; }
#carousel .carousel-item figcaption.caption{
  position: absolute !important; inset: 0 !important; z-index: 4 !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  height: 100% !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; background: none !important;
  pointer-events: none !important; text-align: left !important;
  transform: none !important; float: none !important; overflow: visible !important;
}
.kx{ position: absolute; inset: 0; }
.kx-alt{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0; }

/* --- 1. SWIATLO PLYNACE PRZEZ DWA PIERSCIENIE -------------------------
   Oba okregi sa wspolsrodkowe: srodek 705 / 185 px, promienie 245 i 350 px
   na plotnie 1100 px. Kazdy pierscien to osobna warstwa z wlasna maska —
   dwie maski na jednym elemencie roznie sie skladaja w silnikach, a tak
   wynik jest ten sam wszedzie. Obie jada tym samym zegarem, wiec smuga
   przechodzi przez nie jak jedno swiatlo. */
.kx-swiatlo{ position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.kx-o{
  position: absolute; inset: 0; pointer-events: none;
  --cx: 64.09cqw; --cy: 16.82cqw; --t: 0.62cqw;
  background-image: linear-gradient(100deg,
      rgba(127,227,218,0) 0%,
      rgba(170,250,242,.45) 24%,
      rgba(240,255,253,1) 50%,
      rgba(170,250,242,.45) 76%,
      rgba(127,227,218,0) 100%);
  background-repeat: no-repeat;
  background-size: 40cqw 100%;
  background-position: -40cqw 0;
  animation: kxPrzeplyw 7.5s cubic-bezier(.42,.05,.34,1) infinite;
}
.kx-o1{
  --r: 22.27cqw;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), rgba(0,0,0,0) calc(var(--r) - var(--t)), rgba(0,0,0,1) var(--r), rgba(0,0,0,0) calc(var(--r) + var(--t)));
          mask-image: radial-gradient(circle at var(--cx) var(--cy), rgba(0,0,0,0) calc(var(--r) - var(--t)), rgba(0,0,0,1) var(--r), rgba(0,0,0,0) calc(var(--r) + var(--t)));
}
.kx-o2{
  --r: 31.82cqw;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), rgba(0,0,0,0) calc(var(--r) - var(--t)), rgba(0,0,0,1) var(--r), rgba(0,0,0,0) calc(var(--r) + var(--t)));
          mask-image: radial-gradient(circle at var(--cx) var(--cy), rgba(0,0,0,0) calc(var(--r) - var(--t)), rgba(0,0,0,1) var(--r), rgba(0,0,0,0) calc(var(--r) + var(--t)));
}
@keyframes kxPrzeplyw{
  0%   { background-position: -40cqw 0; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { background-position: 106cqw 0; opacity: 0; }
}
/* na najechanie swiatlo idzie zywiej i mocniej — ale bez fajerwerkow */
#carousel .carousel-item:hover .kx-o{ animation-duration: 3.4s; }
#carousel .carousel-item:hover .kx-o1{ --t: 0.78cqw; }
#carousel .carousel-item:hover .kx-o2{ --t: 0.78cqw; }

/* --- 2. HOVER CALEGO BANERA — zdjecie lekko oddycha -------------------- */
#carousel .carousel-item figure:has(.kx){ overflow: hidden; }
#carousel .carousel-item figure:has(.kx) img{
  transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
#carousel .carousel-item figure:has(.kx):hover img{
  transform: scale(1.014); filter: saturate(1.05) brightness(1.03);
}

/* --- 3. PRZYCISK ------------------------------------------------------- */
.kx-cta{
  position: absolute !important; left: 5.45% !important; top: 81.5% !important;
  right: auto !important; bottom: auto !important;
  display: inline-flex !important; align-items: center !important; gap: 1cqw;
  width: auto !important; max-width: none !important; height: auto !important;
  margin: 0 !important;
  padding: 1.3cqw 2.1cqw !important;
  border: 0 !important; border-radius: .7cqw !important;
  background: linear-gradient(105deg, #f8961f 0%, #f08102 34%, #dd7801 52%, #f08102 70%, #f8961f 100%) !important;
  background-size: 240% 100% !important;
  background-position: 0% 0 !important;
  color: #ffffff !important;
  font-family: Barlow, Mulish, sans-serif !important; font-weight: 800 !important;
  font-size: 2cqw !important; letter-spacing: .012em !important; line-height: 1 !important;
  text-transform: none !important;
  text-decoration: none !important; white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42),
              inset 0 -1px 0 rgba(120,58,0,.35),
              0 .3cqw 0 rgba(126,61,0,.5),
              0 1.5cqw 2.8cqw rgba(0,0,0,.30);
  pointer-events: auto;
  transition: transform .32s cubic-bezier(.22,.8,.24,1), box-shadow .32s cubic-bezier(.22,.8,.24,1),
              background-position .6s cubic-bezier(.3,.65,.25,1);
}
/* strzalka jako PRAWDZIWY element — pseudo-element lamie sie od stylow motywu
   na linkach w podpisie slajdu (sprawdzone przy banerach Bosch) */
.kx-cta u.kx-cta-s{
  display: block; width: 1.7cqw; height: 1.7cqw; text-decoration: none;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.kx-cta:hover{
  color: #ffffff !important;   /* motyw brazowi tekst linku w podpisie na hoverze */
  background-position: 100% 0 !important;   /* baza ma !important — bez tego przeplyw stoi */
  transform: translateY(-.28cqw);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 -1px 0 rgba(120,58,0,.35),
              0 .55cqw 0 rgba(126,61,0,.5),
              0 2.2cqw 4cqw rgba(240,129,2,.42);
}
.kx-cta:hover u.kx-cta-s{ transform: translateX(.35cqw); background-color: #ffffff; }
.kx-cta:active{ transform: translateY(0); }
.kx-cta:focus-visible{ outline: .3cqw solid rgba(255,255,255,.8); outline-offset: .25cqw; }

/* na telefonie zostaje sam przycisk — swiatlo w pierscieniach jest zbyt
   drobne przy szerokosci 360 px, a hoveru na dotyku nie ma */
@media (max-width: 767px){
  .kx-swiatlo{ display: none !important; }
  .kx-cta{ font-size: 4.4cqw !important; padding: 3.4cqw 4.6cqw !important; gap: 2cqw; border-radius: 1.4cqw !important; }
  .kx-cta u.kx-cta-s{ width: 3.4cqw; height: 3.4cqw; }
}
@media (prefers-reduced-motion: reduce){
  .kx-o{ animation: none !important; opacity: .22 !important; background-position: 52cqw 0 !important; }
  .kx-cta, .kx-cta u.kx-cta-s{ transition: none !important; }
  #carousel .carousel-item figure:has(.kx) img{ transition: none !important; }
  #carousel .carousel-item figure:has(.kx):hover img{ transform: none; filter: none; }
}


/* ==========================================================================
   32. KARTA PRODUKTU — PODSUMOWANIE (krotki opis)

   Motyw ma regule `#product .product-information p { margin: 0; display: flex }`.
   Przy podsumowaniu zlozonym z samego tekstu nie widac tego wcale (jeden wezel
   tekstowy = jeden element siatki), ale gdy w podsumowaniu jest chocby jeden
   znacznik — nazwa produktu wytluszczona, kursywa, link — kazdy kawalek tekstu
   staje sie osobnym elementem siatki i akapit rozsypuje sie na kolumny obok siebie.
   Zlapane 3.09.2026 na zestawie 24071: cztery kolumny zamiast czterech linijek.

   Wracamy do normalnego przeplywu i dajemy akapitom oddech.
   ========================================================================== */
#product .product-information .product-short-description p,
#product .product-information [id^="product-description-short"] p{
  display: block !important;
}
.product-short-description strong, .product-short-description b,
.product-short-description em,     .product-short-description i,
.product-short-description span,   .product-short-description a,
.product-short-description small{
  display: inline !important;
}
.product-short-description p{ margin: 0 0 .55rem !important; }
.product-short-description p:last-child{ margin-bottom: 0 !important; }
.product-short-description ul{ margin: .2rem 0 .55rem 1.1rem !important; padding: 0 !important; }
.product-short-description li{ display: list-item !important; margin: 0 0 .2rem !important; }


/* ==========================================================================
   33. KARTA PRODUKTU — GALERIA (miniatury pod zdjeciem)

   Trzy usterki motywu, widoczne dopiero przy produkcie z wiecej niz jednym
   zdjeciem (zlapane 3.09.2026 na zestawie 24071):

   1. Pasek miniatur (`.js-qv-mask`) mial na sztywno wysokosc 50 px, a jego
      zawartosc 93 px — miniatury wychodzily poza swoje pudelko i wygladaly,
      jakby lezaly gdzies obok galerii.
   2. `.images-container` jest kolumnowym flexem z `align-items: center`, wiec
      pasek miniatur kurczyl sie do szerokosci tresci i uciekal na srodek —
      88 px w prawo wzgledem lewej krawedzi zdjecia.
   3. Karuzela Owl nadaje wlasne szerokosci i przesuniecia (`owl-wrapper`
      szerszy niz pojemnik), przez co rzad miniatur nie trzymal sie siatki.

   Zamiast naprawiac karuzele robimy z paska zwykly rzad: miniatury 84 x 84,
   odstep 10 px, wyrownane do lewej krawedzi zdjecia, zawijane przy braku miejsca.
   Przy jednym zdjeciu pasek i tak sie nie pokazuje, wiec nic to nie psuje.

   Do tego: kropka-separator przed indeksem produktu (`::before` na
   `.js-product-reference-destination`) ma sens tylko wtedy, gdy przed nia stoi
   marka. Gdy produkt nie ma przypisanej marki, kropka wisiala samotnie przed
   napisem „Indeks" — chowamy ja tylko w tym przypadku.
   ========================================================================== */
#product .images-container{ align-items: stretch !important; }
#product .images-container .js-qv-mask{
  align-self: stretch !important;
  width: 100% !important; height: auto !important; max-height: none !important;
  margin: 14px 0 0 !important; padding: 0 !important; overflow: visible !important;
}
#product .images-container .js-qv-mask .product_list{
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
#product .images-container .owl-wrapper-outer{ width: 100% !important; overflow: visible !important; }
#product .images-container .owl-wrapper{
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  width: 100% !important; left: 0 !important; transform: none !important;
}
#product .images-container .owl-item{ width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; }
#product .images-container .thumb-container{
  width: 84px !important; max-width: 84px !important; height: 84px !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
#product .images-container .thumb-container img{ width: 84px !important; height: 84px !important; object-fit: contain !important; }
#product .images-container .owl-controls,
#product .images-container .owl-buttons{ display: none !important; }

/* osierocona kropka przed indeksem, gdy produkt nie ma marki */
#product .js-product-reference-destination:first-child::before{ content: none !important; }
#product .product-reference{ margin: 0 !important; }

/* na telefonie miniatury mniejsze — przy 375 px zdjecie glowne ma 276 px,
   wiec trzy kwadraty po 84 px razem z odstepami ledwo sie miescily */
@media (max-width: 767px){
  #product .images-container .js-qv-mask{ margin-top: 10px !important; }
  #product .images-container .thumb-container{ width: 64px !important; max-width: 64px !important; height: 64px !important; }
  #product .images-container .thumb-container img{ width: 64px !important; height: 64px !important; }
}