/* =====================================================================
   LUKULLUS — warstwa wizualna nad Blocksy
   Kolory bierzemy z palety Blocksy (--theme-palette-color-1..8), więc
   zmiana koloru w Customizerze przebudowuje też te komponenty.
   ===================================================================== */

:root{
  /* mapowanie palety Blocksy na nasze role — jeśli klient zmieni paletę,
     zmienia się wszystko poniżej */
  --lk-accent:      var(--theme-palette-color-1, #4c5b67);
  --lk-accent-dark: var(--theme-palette-color-2, #2f3a42);
  --lk-ink:         var(--theme-palette-color-3, #484848);
  --lk-muted:       var(--theme-palette-color-4, #7a8288);
  --lk-line:        var(--theme-palette-color-6, #dcdad7);
  --lk-surface:     var(--theme-palette-color-7, #efeeec);
  --lk-bg:          var(--theme-palette-color-8, #ffffff);

  --lk-ease: cubic-bezier(.16,1,.3,1);

  /* --lk-ls-head, --lk-head-case, --lk-head-weight, --lk-gap-x, --lk-gap-y,
     --lk-radius, --lk-dur, --lk-reveal-y, --lk-plx, --lk-plx-max
     wstrzykuje functions.php z Customizera */
}

/* ---------- Typografia ---------- */
h1,h2,h3,
.entry-title,
.woocommerce-loop-product__title,
.product_title,
.widget-title{
  text-transform: var(--lk-head-case, uppercase);
  letter-spacing: var(--lk-ls-head, .1em);
  font-weight: var(--lk-head-weight, 300);
  line-height: 1.16;
}

/* nadtytuł — klasa do wpięcia w Elementorze/blokach */
.lk-eyebrow{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lk-muted);
  font-weight: 400;
}

/* ---------- Zasada zero: bez cieni, gradientów i zaokrągleń ---------- */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product img,
.ct-media-container,
.entry-card,
input[type=text],input[type=email],input[type=tel],input[type=search],
select,textarea,
.button,.wp-element-button,button{
  border-radius: var(--lk-radius, 0) !important;
  box-shadow: none !important;
}

/* ---------- Siatka produktów ---------- */
.woocommerce ul.products,
.products.columns-2,.products.columns-3,
.products.columns-4,.products.columns-5,.products.columns-6{
  column-gap: var(--lk-gap-x, 4px) !important;
  row-gap:    var(--lk-gap-y, 28px) !important;
}

/* ---------- Karta produktu ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 13px;
  letter-spacing: var(--lk-ls-head, .13em);
  font-weight: 400;
  line-height: 1.35;
  min-height: 2.7em;            /* wyrównuje ceny, gdy nazwa łamie się na 2 linie */
}
.woocommerce ul.products li.product .price{
  color: var(--lk-muted);
  font-size: 14px;
}

/* zoom przy najechaniu — działa razem z natywnym „swap image" Blocksy */
.lk-anim ul.products li.product .ct-media-container img{
  transition: transform 800ms var(--lk-ease), opacity 420ms var(--lk-ease);
}
.lk-anim ul.products li.product:hover .ct-media-container img{
  transform: scale(var(--lk-card-hover,1.05));
}

/* ---------- Przyciski: wypełnienie od dołu ---------- */
.lk-anim .button,
.lk-anim .wp-element-button,
.lk-anim .ct-button{
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color var(--lk-dur, 600ms) var(--lk-ease);
}
.lk-anim .button::before,
.lk-anim .wp-element-button::before,
.lk-anim .ct-button::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background: var(--lk-accent-dark);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--lk-dur, 600ms) var(--lk-ease);
}
.lk-anim .button:hover::before,
.lk-anim .wp-element-button:hover::before,
.lk-anim .ct-button:hover::before{ transform: scaleY(1); }

/* ---------- Podkreślenie linków rozwijane od lewej ---------- */
.lk-anim .lk-underline,
.lk-anim header.ct-header nav a{
  position: relative;
  display: inline-block;
}
.lk-anim .lk-underline::after,
.lk-anim header.ct-header nav a::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--lk-ease);
}
.lk-anim .lk-underline:hover::after,
.lk-anim header.ct-header nav a:hover::after,
.lk-anim header.ct-header nav .current-menu-item > a::after{ transform: scaleX(1); }

/* ---------- Pojawianie sekcji przy scrollu ---------- */
.lk-anim [data-lk-reveal]{
  opacity: 0;
  transform: translateY(var(--lk-reveal-y, 24px));
  transition: opacity 700ms var(--lk-ease), transform 700ms var(--lk-ease);
  will-change: opacity, transform;
}
.lk-anim [data-lk-reveal].lk-in{
  opacity: 1;
  transform: none;
}

/* ---------- Galeria produktu: szew między zdjęciami ----------
   Flexy (suwak Blocksy) przesuwa KAŻDE zdjęcie osobno, tym samym przesunięciem
   w pikselach, ale ich pozycje w układzie wypadają na ułamkach piksela, gdy
   szerokość kadru nie jest liczbą całkowitą. Przeglądarka zaokrągla każde
   zdjęcie osobno i na styku potrafi zostać włos tła — przy przeciąganiu wygląda
   jak drgająca kreska. Kadr poszerzony o 1 px wchodzi pod sąsiada i zasłania
   styk; `overflow:hidden` na suwaku obcina ten naddatek na krawędziach. */
.woocommerce-product-gallery .flexy-items > .flexy-item .ct-media-container{
  width:calc(100% + 1px);
}
.woocommerce-product-gallery .flexy-items > .flexy-item{ backface-visibility:hidden; }

/* Wysokość kadru dojeżdża przejściem, co przy przeciąganiu daje drganie
   dolnej krawędzi. Zdjęcia produktów są kwadratowe, więc nie ma czego
   animować. */
.woocommerce-product-gallery .flexy-view{ transition:none; }

/* ---------- Paralaksa ---------- */
/* Nadaj sekcji klasę lk-parallax (Elementor: Zaawansowane → Klasy CSS).
   Wysokość i offset obrazu ustawia JS. */
.lk-parallax{ position: relative; overflow: hidden; }
.lk-parallax > img,
.lk-parallax .elementor-background-overlay + img,
.lk-parallax .ct-media-container img{
  will-change: transform;
}

/* ---------- Wersja mobilna ---------- */
@media (max-width: 700px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 11.5px;
    letter-spacing: .1em;
  }
  .woocommerce ul.products li.product .price{ font-size: 12.5px; }

  /* pasek zakupu przyklejony na dole karty produktu */
  .lk-buybar{
    position: fixed; left:0; right:0; bottom:0; z-index: 40;
    display: flex; gap: 10px; align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--lk-bg);
    border-top: 1px solid var(--lk-line);
    transform: translateY(110%);
    transition: transform 420ms var(--lk-ease);
  }
  .lk-buybar.lk-in{ transform: none; }
  .lk-buybar .lk-buybar__name{
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lk-buybar .button{ flex: 1; }
}
@media (min-width: 701px){ .lk-buybar{ display: none; } }

/* ---------- Szacunek dla ustawień systemowych ----------
   "reduce" znaczy 'ogranicz ruch', nie 'usuń wszystko'. Zostawiamy więc
   łagodne przejścia przezroczystości, a wycinamy to, co się rusza:
   przesunięcia, skalowanie, rozmycia i paralaksę. */
@media (prefers-reduced-motion: reduce){
  html:not(.lk-motion-forced) *,
  html:not(.lk-motion-forced) *::before,
  html:not(.lk-motion-forced) *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  /* żaden ruch w przestrzeni */
  html:not(.lk-motion-forced) .lk-anim [data-lk-reveal],
  html:not(.lk-motion-forced) .lk-anim .lk-hero .lk-eyebrow,
  html:not(.lk-motion-forced) .lk-anim .lk-hero .lk-hero-link,
  html:not(.lk-motion-forced) .lk-anim .lk-banner__c > *{
    transform:none !important;
    filter:none !important;
  }
  html:not(.lk-motion-forced) .lk-anim .lk-hero .wp-block-cover__image-background,
  html:not(.lk-motion-forced) .lk-parallax img,
  html:not(.lk-motion-forced) .lk-anim ul.products li.product:hover .ct-media-container img{
    transform:none !important;
    transition:none !important;
  }
  /* skrócone przejście zostawiało akordeon o zerowej wysokości */
  html:not(.lk-motion-forced)   .lk-acc__b{ transition:none !important; }
}

/* =====================================================================
   Sekcje dobudowane w motywie potomnym
   ===================================================================== */

/* ---------- Pasek kategorii nad siatką ---------- */
.lk-tabs{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
  padding:10px 0 26px; margin-bottom:30px;
  border-bottom:1px solid var(--lk-line);
}
.lk-tabs a{
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--lk-muted); transition:color .3s;
}
.lk-tabs a.is-active,.lk-tabs a:hover{ color:var(--lk-ink); }

/* ---------- Karta produktu: nadtytuł, rozmiary, notka ---------- */
.single-product .lk-eyebrow{ margin-bottom:6px; }

.lk-sizes{ margin:18px 0 4px; }
.lk-sizes__label{
  display:block; font-size:12px; letter-spacing:.1em;
  color:var(--lk-muted); margin-bottom:8px;
}
.lk-sizes ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.lk-sizes li{
  border:1px solid var(--lk-line); padding:8px 14px;
  font-size:13px; border-radius:var(--lk-radius,0);
}

/* Warianty jako przyciski (28.09.2026) — delikatniej niż dawne ramki:
   cienka linia, tekst pomocniczy; wybrany ma ciemniejszą linię i tekst.
   Tabelka z listą rozwijaną WooCommerce i druga cena przy koszyku znikają
   dopiero, gdy działa skrypt (klasa lk-ma-warianty) — bez niego zostaje
   zwykła lista. */
.lk-warianty li{ border:0; padding:0; }
.lk-wariant{
  appearance:none;
  display:block;
  margin:0;
  padding:9px 16px;
  border:1px solid var(--lk-line);
  border-radius:var(--lk-radius,0);
  background:transparent;
  color:var(--lk-muted);
  font:inherit; font-size:13px; font-weight:300; letter-spacing:.02em;
  line-height:1.3;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background-color .25s ease;
}
.lk-wariant:hover{ border-color:var(--lk-muted); color:var(--lk-ink); }
.lk-wariant.is-on{
  border-color:var(--lk-ink); color:var(--lk-ink);
  background:rgba(255,255,255,.55);
}
.lk-wariant:focus-visible{ outline:1px solid var(--lk-ink); outline-offset:2px; }

.lk-ma-warianty .variations_form table.variations,
.lk-ma-warianty .variations_form .woocommerce-variation-price{ display:none; }
.lk-info{ margin-top:12px; }

.lk-note{
  background:var(--lk-surface); padding:18px 22px; margin-top:18px;
}
.lk-note strong{ font-weight:400; letter-spacing:.02em; display:block; }
.lk-note span{ color:var(--lk-muted); font-size:13px; }

/* ---------- Akordeony ---------- */
.lk-accordions{ margin-top:32px; }
.lk-acc{ border-top:1px solid var(--lk-line); }
.lk-acc:last-child{ border-bottom:1px solid var(--lk-line); }
.lk-acc__h{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; background:none; border:0; cursor:pointer; text-align:left;
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--lk-ink); font-family:inherit;
}
.lk-acc__h svg{ transition:transform 420ms var(--lk-ease); flex:none; }
.lk-acc.is-open .lk-acc__h svg{ transform:rotate(180deg); }
/* max-height zamiast triku grid 0fr→1fr — ten drugi nie działa w starszych
   silnikach i potrafi zostawić panel o zerowej wysokości */
.lk-acc__b{
  overflow:hidden; max-height:0;
  transition:max-height 460ms var(--lk-ease);
}
.lk-acc.is-open .lk-acc__b{ max-height:64rem; }
.lk-acc__b > div{ overflow:hidden; }
.lk-acc__b p{ margin:0 0 20px; color:var(--lk-muted); font-size:14px; }

/* ---------- Baner z paralaksą na stronie głównej ---------- */
.lk-banner{ position:relative; min-height:min(74vh,620px); overflow:hidden; }
.lk-banner .wp-block-image{ margin:0; height:100%; }
.lk-banner .wp-block-image img{ width:100%; height:100%; object-fit:cover; }
.lk-banner::after{
  content:''; position:absolute; inset:0; background:rgba(20,24,28,.34); pointer-events:none;
}
.lk-banner__c{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  color:#fff; padding:20px;
}
.lk-banner__c .lk-eyebrow,
.lk-banner__c h2{ color:#fff; }
.lk-banner__c h2{ font-size:clamp(24px,3.6vw,46px); font-weight:200; }
.lk-banner__c .wp-block-button__link{ border-color:#fff; color:#fff; }

/* ---------- Hero ---------- */
.lk-hero .lk-hero-link a{ color:#fff; text-decoration:none; transition:color .35s; }
.lk-hero .lk-hero-link a:hover{ color:var(--lk-accent); }
.lk-hero .lk-hero-link{ margin:0; }
.lk-hero .lk-eyebrow{ color:#fff; opacity:.9; margin-bottom:18px; }

/* ---------- Galeria w sekcji „na zamówienie" ---------- */
.lk-gallery.wp-block-gallery{ gap:4px; }
.lk-anim .lk-gallery img{ transition:transform 900ms var(--lk-ease); }
.lk-anim .lk-gallery figure:hover img{ transform:scale(1.04); }

/* ---------- Pasek zaufania ---------- */
.lk-trust{ border-top:1px solid var(--lk-line); background:var(--lk-bg); }
.lk-trust .wp-block-column{ border-right:1px solid var(--lk-line); padding:0 20px; }
.lk-trust .wp-block-column:last-child{ border-right:0; }
.lk-trust h4{ text-transform:uppercase; }
.lk-trust p{ color:var(--lk-muted); margin:0; }

/* ---------- Stopka ---------- */
.lk-footer{ background:var(--lk-surface); color:var(--lk-ink); }
.lk-footer__top{
  display:grid; grid-template-columns:1fr 1fr; gap:70px;
  padding:76px 40px 56px; max-width:1600px; margin:0 auto;
}
.lk-footer__top h3{ font-size:clamp(20px,2.4vw,30px); margin:10px 0 14px; }
.lk-footer__lead{ color:var(--lk-muted); max-width:46ch; font-size:13.5px; }
.lk-footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.lk-footer__cols h4{ margin:0 0 16px; }
.lk-footer__cols a{
  display:block; font-size:13.5px; color:var(--lk-muted);
  padding:5px 0; text-decoration:none; transition:color .3s;
}
.lk-footer__cols a:hover{ color:var(--lk-ink); }
.lk-footer__mark{ text-align:center; padding:10px 40px 40px; }
.lk-sigil{
  width:88px; height:88px; margin:0 auto 16px;
  border:1px solid var(--lk-accent); border-radius:50%;
  display:grid; place-items:center;
  font-size:21px; letter-spacing:.14em; color:var(--lk-accent-dark);
}
.lk-footer__claim{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lk-muted); margin:0;
}

@media (max-width:1100px){
  .lk-footer__top{ grid-template-columns:1fr; gap:40px; padding:56px 24px 40px; }
  .lk-trust .wp-block-column{ border-right:0; }
}
@media (max-width:700px){
  .lk-tabs{ gap:18px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:18px; }
  .lk-tabs::-webkit-scrollbar{ display:none; }
  .lk-tabs a{ white-space:nowrap; font-size:12px; }
  .lk-footer__cols{ grid-template-columns:1fr 1fr; gap:24px; }
  .lk-banner{ min-height:60vh; }
}

/* ---------- Poprawki nad domyślnym Blocksy ---------- */

/* strona startowa bez nagłówka z tytułem */
.home .hero-section,
.home .entry-header,
.home .page-title{ display:none !important; }

/* zdjęcia produktów zawsze kwadratowe */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .ct-image-container{
  aspect-ratio:1/1 !important;
  padding-top:0 !important;
  overflow:hidden;
}
.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product .ct-image-container img{
  width:100% !important; height:100% !important; object-fit:cover !important;
}

/* nazwa marki w nagłówku — zamiast logo obrazkowego */
.site-title a{
  font-size:22px; letter-spacing:.34em; font-weight:300;
  text-transform:uppercase; text-decoration:none;
}
.site-description{
  font-size:8.5px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--lk-muted); margin-top:6px;
}

/* treść strony startowej na pełną szerokość */
.home .ct-container,
.home .entry-content > .alignfull{ max-width:100% !important; }
.home .entry-content{ margin-block:0 !important; }

/* ---------- Nagłówek: sygnatura na środku, menu pod spodem ---------- */

/* logo z importu demo („homi") — znika samo, gdy klient wgra własne logo,
   bo reguła celuje wyłącznie w plik demo */
.site-logo-container img[src*="logo-default-state"]{ display:none !important; }
.site-logo-container:has(img[src*="logo-default-state"]){ display:none !important; }

/* Układ nagłówka ustawia Header Builder Blocksy (theme mod header_placements),
   nie CSS. Tutaj zostaje tylko typografia i odstępy. */
header.ct-header .header-menu-1 .menu,
header.ct-header .header-menu-2 .menu{ gap:32px; }
header.ct-header .header-menu-1 .ct-menu-link{
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
}

.site-title{ display:block; text-align:center; }
.site-description{ display:none; }



/* ---------- Karta produktu w siatce: bliżej referencji ---------- */
.woocommerce ul.products li.product{
  display:flex; flex-direction:column; text-align:left; gap:0;
}
.woocommerce ul.products li.product figure{ margin:0 0 14px; order:1; }

/* kategoria nad nazwą, drobnym drukiem */
.woocommerce ul.products li.product .entry-meta{
  order:2; margin:0 0 6px; padding:0; list-style:none;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lk-muted);
}
.woocommerce ul.products li.product .entry-meta a{ color:inherit; text-decoration:none; }

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  order:3; margin:0 0 4px; text-align:left;
}
.woocommerce ul.products li.product .price{
  order:4; margin:0; text-align:left; display:block;
}

/* w referencji karta nie ma przycisku — kupujemy z karty produktu */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .ct-woo-card-actions{
  display:none !important;
}

/* nadpisujemy inline'owe aspect-ratio, które WooCommerce wstawia w atrybucie style */
.woocommerce ul.products li.product img[style*="aspect-ratio"]{
  aspect-ratio:1/1 !important;
}

/* ---------- Sekcja cover: nie polegamy na stylach edytora bloków ---------- */
.wp-block-cover{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.wp-block-cover__image-background{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; margin:0 !important; max-width:none !important;
  aspect-ratio:auto !important;
}
.wp-block-cover__background{ position:absolute; inset:0; }
.wp-block-cover__inner-container{ position:relative; z-index:2; width:100%; }
/* gradient zamiast plaskiego przyciemnienia — tekst zostaje czytelny
   takze na jasniejszym drugim ujeciu */
.lk-hero .wp-block-cover__background{
  /* mocniejsze niz zwykle, bo zdjecia kategorii bywaja bardzo jasne
     (zolte tlo paczkow) i biale napisy inaczej znikaja */
  background:linear-gradient(180deg,rgba(20,24,28,.62),rgba(20,24,28,.42) 45%,rgba(20,24,28,.68)) !important;
  z-index:1;
}



/* ---------- Wyrównanie karty do lewej (Blocksy centruje domyślnie) ---------- */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .entry-meta,
.woocommerce ul.products li.product .entry-meta li{
  text-align:left !important;
  justify-content:flex-start !important;
}
.woocommerce ul.products li.product .entry-meta{
  display:flex !important; gap:8px; margin-bottom:6px !important;
}
.woocommerce ul.products li.product .price{ margin-top:2px !important; }

/* ---------- Newsletter w stopce ---------- */
.lk-news{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.lk-news input{
  flex:1; min-width:220px; padding:14px 16px;
  border:1px solid var(--lk-line); background:var(--lk-bg);
  font-family:inherit; font-size:14px; color:var(--lk-ink);
}
.lk-news .button{
  padding:14px 30px; background:var(--lk-accent); color:#fff; border:1px solid var(--lk-accent);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
}

/* ---------- Baner: mniej agresywne kadrowanie ---------- */
.lk-banner{ min-height:min(56vh,460px); }
.lk-banner .wp-block-image img{ object-position:center; }

/* ---------- Archiwum sklepu: mniej pustki, szerszy kontener ---------- */
.woocommerce.archive .hero-section{ padding-block:48px 0 !important; }
.woocommerce.archive .hero-section .page-title{ margin-bottom:0; }
.post-type-archive-product .ct-container,
.tax-product_cat .ct-container{ max-width:100% !important; padding-inline:40px; }
.woocommerce-result-count{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--lk-muted);
}
.woocommerce-ordering select{
  font-size:12px; letter-spacing:.1em; border:1px solid var(--lk-line); padding:10px 14px;
}

/* akordeon działa też bez animacji */


@media (max-width:700px){
  .post-type-archive-product .ct-container,
  .tax-product_cat .ct-container{ padding-inline:16px; }
  .woocommerce.archive .hero-section{ padding-block:28px 0 !important; }
}

/* ---------- Nagłówek: wyrównanie i typografia ---------- */
/* elementy w jednej kolumnie buildera stoją w rzędzie, wyśrodkowane w pionie */
header.ct-header [data-column] > [data-items]{
  display:flex; align-items:center; gap:30px;
}
header.ct-header [data-row="middle"] > .ct-container{ align-items:center; }

header.ct-header .header-menu-1 .ct-menu-link,
header.ct-header .header-menu-2 .ct-menu-link{
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--lk-ink); font-weight:400;
}
header.ct-header .header-menu-1 .ct-menu-link:hover,
header.ct-header .header-menu-2 .ct-menu-link:hover{ color:var(--lk-accent-dark); }

/* hamburger i ikony w kolorze tekstu, nie akcentu */
.ct-header-trigger,
header.ct-header [data-id="search"] .ct-icon,
header.ct-header [data-id="cart"]{ color:var(--lk-ink); }

/* koszyk: sama ikona z licznikiem, bez kwoty */
header.ct-header [data-id="cart"] .ct-cart-price{ display:none; }

/* offcanvas: kategorie dużym krojem, jak w projekcie */
#offcanvas .ct-panel-content .ct-menu-link{
  font-size:20px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:300; padding-block:11px;
}

/* nav w nagłówku rozciąga się na wysokość wiersza — treść centrujemy w pionie */
header.ct-header nav.menu-container{ display:flex; align-items:center; }
header.ct-header nav.menu-container > ul.menu{
  display:flex; align-items:center; margin:0; height:auto;
}
header.ct-header nav.menu-container > ul.menu > li{ display:flex; align-items:center; }

/* ---------- Panel offcanvas w jasnej kolorystyce, jak w projekcie ---------- */
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content{ background:var(--lk-bg); }
#offcanvas .ct-panel-actions .ct-toggle-close,
#offcanvas .ct-panel-content .ct-menu-link{ color:var(--lk-ink); }
#offcanvas .ct-panel-content .ct-menu-link:hover{ color:var(--lk-accent-dark); }
#offcanvas .ct-panel-content .menu-item{ border:0; }
#offcanvas .ct-panel-content > ul{ padding:8px 34px; }

/* tło panelu ustawia Blocksy zmienną z Customizera — nadpisujemy na jasne */
#offcanvas .ct-panel-inner{ background:var(--lk-bg) !important; }
#offcanvas .ct-panel-actions .ct-toggle-close{ color:var(--lk-ink) !important; }

/* =====================================================================
   Belka górna z projektu „zmiany 1" (24.09.2026) — telefon i desktop
   w tym samym stylu: żółte tło, po lewej cake (menu) i Instagram,
   logo na środku, po prawej ludzik (konto) i torba (koszyk).

   Ikony podmieniamy maską CSS, a nie w kreatorze: przyciski Blocksy
   zostają te same, więc wysuwane menu, okno logowania, licznik koszyka
   i przypinanie działają bez zmian. Kolor ikon to jedno tło
   (--lk-bar-ink), ustawiane w Dostosuj → Lukullus → Kolorystyka.
   ===================================================================== */
header.ct-header{
  --lk-ico:17px;                   /* wysokość ikon na telefonie */
  --lk-logo-w:128px;
}
@media (min-width:1000px){
  header.ct-header{ --lk-ico:27px; --lk-logo-w:220px; }
}

/* tło belki — także w stanie przypiętym; Blocksy maluje je na wierszu */
[data-header] header.ct-header [data-row*="middle"],
[data-header] header.ct-header [data-sticky*="yes"] [data-row*="middle"]{
  background-color:var(--lk-bar) !important;
}

header.ct-header [data-column] > [data-items]{ gap:22px; }

/* Telefon — odstępy z projektu (NOWA_WWW.png przy 393 px): ikony 22 px
   od krawędzi, 18 px między sobą. Blocksy daje każdemu elementowi
   belki po 10 px marginesu z obu stron, co odsuwało Instagram i ludzika
   o dodatkowe 20 px do środka. */
@media (max-width:999.98px){
  header.ct-header [data-device="mobile"] [data-column] > [data-items]{ gap:18px; }
  header.ct-header [data-device="mobile"] [data-items] > *{ margin-inline:0 !important; }
  header.ct-header [data-device="mobile"] [data-row*="middle"] > .ct-container{
    width:auto; max-width:none; margin-inline:22px;
  }
}
@media (min-width:1000px){
  header.ct-header [data-column] > [data-items]{ gap:30px; }
}

/* wspólna maska dla wszystkich ikon belki */
header.ct-header .ct-header-trigger::before,
header.ct-header [data-network="instagram"] .ct-icon-container::before,
header.ct-header .ct-account-item::before,
header.ct-header .ct-cart-item .ct-icon-container::before{
  content:"";
  display:block;
  height:var(--lk-ico);
  background:var(--lk-bar-ink);
  -webkit-mask:var(--lk-ikona) center / contain no-repeat;
          mask:var(--lk-ikona) center / contain no-repeat;
  transition:opacity .25s ease;
}
header.ct-header .ct-header-trigger > svg,
header.ct-header [data-network="instagram"] .ct-icon-container > svg,
header.ct-header .ct-account-item > svg,
header.ct-header .ct-cart-item .ct-icon-container > svg{ display:none; }
/* zalogowanemu Blocksy pokazuje awatar — w belce zostaje sam ludzik */
header.ct-header .ct-account-item .ct-media-container,
header.ct-header .ct-account-item img{ display:none !important; }

header.ct-header .ct-header-trigger{ --lk-ikona:url(../ikony/cake.svg?v=3); }
header.ct-header .ct-header-trigger::before{ aspect-ratio:188/160; }

header.ct-header [data-network="instagram"] .ct-icon-container{ --lk-ikona:url(../ikony/insta.svg?v=3); }
header.ct-header [data-network="instagram"] .ct-icon-container::before{ aspect-ratio:1; }

header.ct-header .ct-account-item{ --lk-ikona:url(../ikony/ludzik.svg?v=3); }
header.ct-header .ct-account-item::before{ aspect-ratio:178/184; }

header.ct-header .ct-cart-item .ct-icon-container{ --lk-ikona:url(../ikony/torba.svg?v=3); }
header.ct-header .ct-cart-item .ct-icon-container::before{ aspect-ratio:234/185; height:calc(var(--lk-ico) * 1.05); }

header.ct-header .ct-header-trigger:hover::before,
header.ct-header [data-network="instagram"]:hover .ct-icon-container::before,
header.ct-header .ct-account-item:hover::before,
header.ct-header .ct-cart-item:hover .ct-icon-container::before{ opacity:.6; }

/* Instagram bez kółka w tle, które Blocksy daje ikonom społecznościowym */
header.ct-header [data-id="socials"] .ct-social-box a{
  background:none !important; padding:0; width:auto; height:auto;
}
header.ct-header [data-id="socials"] .ct-icon-container{
  width:auto; height:auto; background:none !important;
}

/* koszyk: bez kwoty (na desktopie Blocksy ją pokazywał), licznik tylko
   gdy coś jest w torbie */
header.ct-header [data-id="cart"] .ct-label{ display:none !important; }
header.ct-header [data-id="cart"] .ct-icon-container{ position:relative; }
header.ct-header .ct-dynamic-count-cart{
  background:var(--lk-bar-ink); color:var(--lk-bar);
}
header.ct-header .ct-dynamic-count-cart[data-count="0"]{ display:none; }

/* Logo z pliku SVG zamiast napisu. Tekst zostaje w kodzie (czytniki ekranu,
   wyszukiwarki), a na ekranie jest maska w kolorze ikon. */
header.ct-header .site-title,
header.ct-header .site-title a{
  display:block;
  width:var(--lk-logo-w);
  aspect-ratio:974/246;
  margin:0;
  font-size:0 !important; line-height:0; letter-spacing:0;
  color:transparent !important;
}
header.ct-header .site-title a{
  background:var(--lk-bar-ink);
  -webkit-mask:url(../ikony/logo.svg) center / contain no-repeat;
          mask:url(../ikony/logo.svg) center / contain no-repeat;
}
header.ct-header .site-title::after{ content:none !important; }

/* ---------- Galeria produktu: łopatka zamiast strzałek ---------- */
.woocommerce-product-gallery .flexy-arrow-prev,
.woocommerce-product-gallery .flexy-arrow-next{
  width:48px !important; height:24px !important;
  background:none !important; box-shadow:none !important; border-radius:0 !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); /* na przycisku — na masce by znikł */
}
.woocommerce-product-gallery .flexy-arrow-prev > svg,
.woocommerce-product-gallery .flexy-arrow-next > svg{ display:none; }
.woocommerce-product-gallery .flexy-arrow-prev::before,
.woocommerce-product-gallery .flexy-arrow-next::before{
  content:"";
  display:block; width:40px; aspect-ratio:172/43;
  background:#fff;
  -webkit-mask:url(../ikony/lopatka-prawo.svg) center / contain no-repeat;
          mask:url(../ikony/lopatka-prawo.svg) center / contain no-repeat;
  transition:transform .3s ease;
}
.woocommerce-product-gallery .flexy-arrow-prev::before{ transform:scaleX(-1); }
.woocommerce-product-gallery .flexy-arrow-next:hover::before{ transform:translateX(4px); }
.woocommerce-product-gallery .flexy-arrow-prev:hover::before{ transform:scaleX(-1) translateX(4px); }

/* ---------- Przewiń w hero motywu: łopatka ---------- */
.lk-hm__more .lk-lopatka{
  display:block; width:9px; aspect-ratio:43/172;
  background:currentColor;
  -webkit-mask:url(../ikony/lopatka.svg) center / contain no-repeat;
          mask:url(../ikony/lopatka.svg) center / contain no-repeat;
}


/* =====================================================================
   Animacje wejścia — hero i nagłówek (jak w referencji)
   ===================================================================== */

/* ---------- Hero: nadtytuł i kategorie wjeżdżają z rozmycia ---------- */
.lk-anim .lk-hero .lk-eyebrow,
.lk-anim .lk-hero .lk-hero-link{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
  transition:opacity 900ms var(--lk-ease),
             transform 900ms var(--lk-ease),
             filter 900ms var(--lk-ease);
}
.lk-anim .lk-hero.lk-in .lk-eyebrow,
.lk-anim .lk-hero.lk-in .lk-hero-link{
  opacity:1; transform:none; filter:none;
}
.lk-anim .lk-hero.lk-in .lk-eyebrow{ opacity:.9; }

/* powolne najeżdżanie kadru (Ken Burns) */
.lk-anim .lk-hero .wp-block-cover__image-background{
  transform:scale(1.06);
  transition:transform 9s linear;
}
.lk-anim .lk-hero.lk-in .wp-block-cover__image-background{ transform:scale(1); }

/* kategorie w hero — podświetlenie przy najechaniu */
.lk-hero .lk-hero-link a{ transition:color .35s var(--lk-ease); }

/* ---------- Nagłówek ----------
   Przypinaniem zajmuje się Blocksy (Dostosuj → Nagłówek → Przypięty pasek).
   Motyw przesuwa nagłówek `transform`-em i sam liczy jego pozycję, więc nie
   wolno tu ustawiać ani `position`, ani `transform`, ani przejścia na
   `transform` — własne `position:sticky` z chowaniem przy przewijaniu (do
   12.09.2026) zabijało przypięcie z ustawień. Zostaje samo tło i kreska. */
.lk-anim header.ct-header{
  background:var(--lk-bar,var(--lk-bg));
  transition:box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.lk-anim header.ct-header.lk-stuck{ border-bottom-color:var(--lk-line); }

@media (max-width:782px){
  .admin-bar.lk-anim header.ct-header{ top:46px; }
}

/* ---------- Baner sezonowy: treść też się pojawia ---------- */
.lk-anim .lk-banner__c > *{
  opacity:0; transform:translateY(16px);
  transition:opacity 800ms var(--lk-ease), transform 800ms var(--lk-ease);
}
.lk-anim .lk-banner.lk-in .lk-banner__c > *{ opacity:1; transform:none; }
.lk-anim .lk-banner.lk-in .lk-banner__c > *:nth-child(2){ transition-delay:120ms; }
.lk-anim .lk-banner.lk-in .lk-banner__c > *:nth-child(3){ transition-delay:240ms; }

/* =====================================================================
   Podmiana zdjęcia przy najechaniu — karty produktów i hero
   Wszystkie przejścia na tej samej krzywej, żeby ruch był spójny.
   ===================================================================== */

/* ---------- Karta produktu ---------- */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure{ position:relative; background:var(--lk-surface); }

.woocommerce ul.products li.product img.lk-swap{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(var(--lk-card-rest,1));
  transition:opacity 600ms var(--lk-ease), transform 900ms var(--lk-ease);
  pointer-events:none;
  z-index:1;
}
/* :not(.lk-swap) jest tu konieczne — bez niego selektor bazowego zdjęcia
   łapał także podmieniane i zerował mu przezroczystość (karta gasła) */
.woocommerce ul.products li.product img:not(.lk-swap){
  transform:scale(var(--lk-card-rest,1));
  transition:opacity 600ms var(--lk-ease), transform 900ms var(--lk-ease);
}
.lk-anim ul.products li.product.lk-has-swap:hover img.lk-swap{
  opacity:1;
  transform:scale(var(--lk-card-hover,1.05));
}
/* Bazowego zdjęcia NIE wygaszamy — gdyby oba przenikały naraz, przez moment
   prześwitywałoby tło i widać by było błysk. Drugie zdjęcie po prostu
   nasuwa się na pierwsze, które zostaje w pełni kryjące. */
.lk-anim ul.products li.product.lk-has-swap:hover img:not(.lk-swap){
  transform:scale(var(--lk-card-hover,1.05));
}

/* ---------- Hero: drugie ujęcie ---------- */
.lk-hero .lk-hero-alt{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1100ms var(--lk-ease), transform 2400ms var(--lk-ease);
  z-index:0;
  pointer-events:none;
}
.lk-anim .lk-hero:hover .lk-hero-alt{ opacity:1; transform:scale(1); }
/* to samo w hero — pierwsze ujęcie zostaje kryjące pod drugim */
.lk-hero .wp-block-cover__image-background{
  transition:opacity 1100ms var(--lk-ease), transform 9s linear;
}

/* ---------- Płynność wszystkiego ---------- */
/* jedna krzywa i sensowne czasy — bez skoków przy szybkim najeżdżaniu */
.lk-anim ul.products li.product img,
.lk-anim .lk-gallery img,
.lk-anim .split__g img{
  will-change:opacity, transform;
  backface-visibility:hidden;
}

@media (prefers-reduced-motion: reduce){
  /* zostaje samo przenikanie, bez skalowania */
  html:not(.lk-motion-forced) .woocommerce ul.products li.product img.lk-swap,
  html:not(.lk-motion-forced) .lk-hero .lk-hero-alt{ transform:none !important; }
  html:not(.lk-motion-forced) .lk-anim ul.products li.product.lk-has-swap:hover img.lk-swap,
  html:not(.lk-motion-forced) .lk-anim .lk-hero:hover .lk-hero-alt{ transform:none !important; }
}

/* uwagi pod rozmiarami (terminy zamówień itp.) */
.lk-sizes__note{
  font-size:12.5px; color:var(--lk-muted); margin:10px 0 0; line-height:1.6;
}

/* e-mail w polach produktu (lukullus_pogrubienia) — w kolorze tekstu, podkreślony */
a.lk-mail{
  color:var(--lk-ink); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px;
  overflow-wrap:anywhere;
}
a.lk-mail:hover{ color:var(--lk-muted); }

/* =====================================================================
   Hero z ujęciem na każdą kategorię
   Desktop: najechanie na nazwę zmienia zdjęcie.
   Telefon: przesunięcie palca w bok + paralaksa przy przewijaniu.
   ===================================================================== */

.lk-hero .lk-hero-layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity 900ms var(--lk-ease);
  will-change:opacity, transform;
}
.lk-hero .lk-hero-layer.is-on{ opacity:1; }

/* pierwsze ujęcie z bloku cover zostaje jako tło startowe;
   gdy mamy warstwy kategorii, chowamy je pod nimi */
.lk-hero.has-layers .wp-block-cover__image-background{ opacity:0; }

/* nazwa aktywnej kategorii wyróżniona */
.lk-hero .lk-hero-link a{ transition:color .35s var(--lk-ease), opacity .35s var(--lk-ease); }
.lk-hero .lk-hero-link{ opacity:.72; transition:opacity .35s var(--lk-ease); }
.lk-hero .lk-hero-link.is-on,
.lk-hero .lk-hero-link:hover{ opacity:1; }

/* wskaźnik dla telefonu — kropki pod listą */
.lk-hero__dots{
  display:none;
  justify-content:center; gap:8px;
  margin-top:22px; position:relative; z-index:2;
}
.lk-hero__dots span{
  width:22px; height:1px; background:rgba(255,255,255,.4);
  transition:background .35s var(--lk-ease);
}
.lk-hero__dots span.is-on{ background:#fff; }

@media (max-width:700px){
  .lk-hero__dots{ display:flex; }
  .lk-hero{ touch-action:pan-y; }
}

@media (prefers-reduced-motion: reduce){
  html:not(.lk-motion-forced) .lk-hero .lk-hero-layer{ transition:opacity .01ms !important; transform:none !important; }
}

/* =====================================================================
   Hero składane z kategorii (shortcode [lukullus_hero])
   Markup jest własny, nie blokowy, więc układ definiujemy tutaj.
   ===================================================================== */

.lk-hero{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* wspolna warstwa zdjec i przyciemnienia */
.lk-hero__stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.lk-hero .wp-block-cover__background{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.lk-hero .wp-block-cover__inner-container{
  position:relative; z-index:2;
  width:100%; text-align:center;
  padding:60px 20px;
}
.lk-hero .lk-eyebrow{ color:#fff; opacity:.9; margin:0 0 18px; }

.lk-hero__list{ display:grid; gap:0; }
.lk-hero .lk-hero-link{
  margin:0;
  font-size:clamp(22px,3.8vw,48px);
  line-height:1.22;
  font-weight:200;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.lk-hero .lk-hero-link a{ color:#fff; text-decoration:none; }

@media (max-width:700px){
  .lk-hero .wp-block-cover__inner-container{ padding:40px 16px; }
}

/* =====================================================================
   Elementor — dociągnięcie do systemu motywu
   Elementor renderuje własne znaczniki i własne style przycisków, więc
   bez tego strona złożona builderem wygląda jak z innego projektu.
   ===================================================================== */

/* Elementor ma kolor przycisku zaszyty w swoim arkuszu (#69727D),
   a jego globalne zmienne mapujemy niżej — stąd !important. */
.elementor-button{
  background-color:var(--lk-accent) !important;
  color:#fff !important;
  border-radius:var(--lk-radius,0);
  font-family:inherit;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
  padding:15px 34px;
  transition:background-color var(--lk-dur,600ms) var(--lk-ease);
}
.elementor-button:hover,
.elementor-button:focus{
  background-color:var(--lk-accent-dark) !important;
  color:#fff !important;
}

.elementor-widget-heading .elementor-heading-title{
  text-transform:var(--lk-head-case,uppercase);
  color:var(--lk-title);   /* jak tytuły produktów — kolor 16 palety */
  letter-spacing:var(--lk-ls-head,.1em);
  font-weight:var(--lk-head-weight,300);
  line-height:1.16;
}

/* nadtytuł — ta sama klasa co w blokach, wpisywana w polu „Klasy CSS" */
.elementor-widget.lk-eyebrow .elementor-heading-title{
  font-size:11px !important;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lk-muted);
  font-weight:400;
}

/* zwykły tekst w Elementorze: kolor tekstu z palety (3, #484848), nie pomocniczy.
   Kolor ustawiony w widżecie ma pierwszeństwo (mocniejszy selektor Elementora). */
.elementor-widget-text-editor{ color:var(--lk-ink); }

/* galeria bez zaokrągleń i z wąską fugą, jak siatka produktów */
.elementor-image-gallery .gallery-item{ padding:2px; }
.elementor-image-gallery .gallery-item img{
  border:0 !important;
  border-radius:var(--lk-radius,0);
  aspect-ratio:1/1;
  object-fit:cover;
  width:100%;
}
.lk-anim .elementor-image-gallery .gallery-item img{
  transition:transform 900ms var(--lk-ease);
}
.lk-anim .elementor-image-gallery .gallery-item:hover img{ transform:scale(1.04); }

/* sekcja tekst + galeria: oddech od krawędzi ekranu */
.elementor-section.lk-split > .elementor-container{ align-items:center; }
.elementor-section.lk-split .elementor-column:first-child .elementor-widget-wrap{
  padding:64px 6% 64px 40px;
}

@media (max-width:700px){
  .elementor-section.lk-split .elementor-column:first-child .elementor-widget-wrap{
    padding:40px 16px;
  }
}



/* =====================================================================
   Hero na telefonie — osobny układ, nie zmniejszony desktop
   Wzorowane na sekcji „vertical carousel fixed background" z referencji:
   każda kategoria zajmuje cały ekran, zdjęcia stoją nieruchomo,
   treść przesuwa się po nich.
   ===================================================================== */

/* domyślnie (desktop) wersja telefonowa nie istnieje */
.lk-hm,
.lk-hm__dots{ display:none; }

@media (max-width:781px){

  /* lista kategorii z desktopu znika */
  .lk-hero .wp-block-cover__inner-container{ display:none; }

  /* hero rozciąga się na tyle ekranów, ile jest kategorii */
  .lk-hero{
    min-height:0 !important;
    display:block;
    overflow:visible;
  }

  /* Scena stoi nieruchomo przez cala wysokosc hero i konczy sie razem
     z nim. Ujemny margines kasuje jej wlasna wysokosc, zeby nie dokladala
     ekranu na koncu. */
  /* Scena na stałe przyklejona do okna — dokładnie jak w referencji.
     Nie używamy tu `sticky`, bo wystarczy jeden przodek z `overflow`
     (a w Elementorze takich opakowań jest kilka), żeby przestało działać
     bez śladu. Zamiast tego chowamy scenę, gdy hero wyjedzie z ekranu —
     tym steruje IntersectionObserver, który o overflow nie dba. */
  .lk-hero__stage{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    /* Stała wysokość, a NIE `inset:0`. Przy `inset:0` scena ma wysokość
       okna, a na telefonie okno rośnie w chwili, gdy przy pierwszym
       przewinięciu chowa się pasek adresu. Zdjęcie z `object-fit:cover`
       przekadrowuje się wtedy w locie i wygląda, jakby się powiększało —
       stąd szarpnięcie przy pierwszym ruchu. `100vh` (i `100lvh`) to
       wysokość okna BEZ paska, więc się nie zmienia; póki pasek jest
       widoczny, dolny skrawek zdjęcia po prostu chowa się za nim. */
    height:100vh;
    height:100lvh;
    margin:0;
    /* nic nie wystaje poza scenę, ale zostawiam — kosztuje zero,
       a chroni przed przypadkowym wylaniem się warstwy */
    overflow:hidden;
    background-color:#1f2328;
    z-index:0;
    opacity:0;
    visibility:hidden;
    transition:opacity 300ms var(--lk-ease);
  }
  .lk-hero.lk-stage-on .lk-hero__stage{
    opacity:1;
    visibility:visible;
  }
  /* Na telefonie zdjęcia się NIE RUSZAJĄ. Leżą nieruchomo jedno na drugim
     (z-index rosnący nadaje JS, najnowsze na wierzchu), a przy przewijaniu
     zmienia się tylko okno, przez które widać wierzchnie — rośnie od dolnej
     krawędzi ekranu w górę. Wędruje sama granica, stąd wrażenie, że jedno
     zdjęcie przechodzi w drugie. Tak samo działa wzorzec, tyle że tam
     przycina `overflow:hidden` na bloku, a u nas `clip-path` z JS. */
  .lk-hero .lk-hero-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:1 !important;          /* krycie nie steruje już niczym */
    transform:none;                /* żadnego ruchu */
    transition:none;               /* granicę ustawia scroll, nie przejście */
    will-change:clip-path;
    /* własna warstwa kompozytora — bez tego przycinanie dużego zdjęcia
       potrafi szarpać, bo przeglądarka przemalowuje je w każdej klatce */
    backface-visibility:hidden;
  }
  .lk-hero .wp-block-cover__background{
    position:absolute;
    inset:0;
    z-index:1;
  }

  .lk-hm{
    display:block;
    position:relative;
    z-index:2;
  }

  .lk-hm__block{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:var(--lk-vh,100svh);
    text-decoration:none;
    color:#fff;
    /* bez kreski na styku ekranów — przy nieruchomych zdjęciach rysowała
       się w poprzek kadru i wyglądała jak ramka */
    padding:24px;
    /* podpowiedź „przewiń" ma się liczyć względem TEGO ekranu, nie całego
       hero — bez tego lądowała na dole ostatniej kategorii */
    position:relative;
  }

  .lk-hm__name{
    font-family:var(--lk-font-head,inherit);
    font-size:clamp(26px,7.5vw,40px);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:200;
    line-height:1.2;
    text-align:center;
    opacity:.55;
    transform:translateY(10px);
    transition:opacity 600ms var(--lk-ease), transform 600ms var(--lk-ease);
  }
  .lk-hm__block.is-on .lk-hm__name{ opacity:1; transform:none; }

  /* podpowiedź „przewiń" tylko na pierwszym ekranie */
  .lk-hm__more{
    position:absolute;
    bottom:24px; left:0; right:0;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    font-size:10px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(255,255,255,.75);
  }
  .lk-hm__more .lk-lopatka{ animation:lk-bounce 2s infinite; }

  @keyframes lk-bounce{
    0%,20%,50%,80%,100%{ transform:translateY(0); }
    40%{ transform:translateY(5px); }
    60%{ transform:translateY(3px); }
  }

  /* pionowe kreski nawigacji przy prawej krawędzi */
  .lk-hm__dots{
    display:flex;
    flex-direction:column;
    gap:10px;
    position:fixed;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
  }
  .lk-hm__dot{
    width:1px; height:15px; padding:0;
    border:1.5px solid rgba(255,255,255,.8);
    background:rgba(255,255,255,.3);
    border-radius:5px;
    cursor:pointer;
    transition:height .3s ease, background .3s ease;
    background-clip:padding-box;
  }
  .lk-hm__dot.is-on{
    height:50px;
    background:#fff;
    border-color:#fff;
  }
}

/* przy ograniczonym ruchu nazwy są od razu widoczne */
@media (prefers-reduced-motion: reduce){
  html:not(.lk-motion-forced) .lk-hm__name{ opacity:1; transform:none; }
  html:not(.lk-motion-forced) .lk-hm__more .lk-lopatka{ animation:none; }
}

/* Dalsza część strony musi zasłaniać scenę hero — bez tła prześwitywałoby
   przez nią zdjęcie kategorii. */
@media (max-width:781px){
  .lk-hero ~ .elementor-section,
  .lk-hero ~ .wp-block-group,
  .lk-hero ~ .wp-block-columns,
  .elementor-section:not(:first-child),
  .site-main > .entry-content > *:not(.lk-hero){
    position:relative;
    z-index:3;
    background-color:var(--lk-bg);
  }
  .lk-footer{ position:relative; z-index:3; }
}

/* Sekcja Elementora ze zdjęciem w tle i przyciemnieniem — cały tekst na biało.
   Bez tego nadtytuł dziedziczy ciemny kolor motywu i na jasnym zdjęciu znika. */
.elementor-section:has(> .elementor-background-overlay) .elementor-heading-title,
.elementor-section:has(> .elementor-background-overlay) .elementor-widget-text-editor,
.elementor-section:has(> .elementor-background-overlay) .elementor-widget-text-editor p,
.elementor-section:has(> .elementor-background-overlay) .lk-eyebrow{
  color:#fff !important;
}
.elementor-section:has(> .elementor-background-overlay) .elementor-widget-text-editor p{
  font-size:11px !important;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 6px;
}

/* W sekcji ze zdjęciem w tle pierwszy nagłówek pełni rolę nadtytułu.
   Celujemy pozycją, bo klasy CSS nie przechodzą przez dane Elementora
   zapisywane programowo. */
.elementor-section:has(> .elementor-background-overlay) .elementor-heading-title{
  text-align:center;
}
.elementor-section:has(> .elementor-background-overlay)
  .elementor-widget-wrap > .elementor-widget-heading:first-child .elementor-heading-title{
  font-size:11px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
  font-weight:400 !important;
  margin-bottom:12px;
  opacity:.9;
}

/* =====================================================================
   Strona „Miejsca” — karty lokali (projekt „L KONTAKT”, 24.09.2026)
   Buduje ją narzedzia/lk-miejsca.php w Elementorze. Treść (zdjęcie,
   nazwa, adres, godziny, telefon) edytuje się w Elementorze, a tu jest
   tylko wygląd kart: białe pole na jasnym tle strony, zdjęcie 3:2,
   nazwa krojem tytułów z cienką kreską po „Lukullus”.
   ===================================================================== */
.lk-miejsca-wstep .elementor-widget-text-editor{
  font-size:clamp(18px,1.6vw,24px); line-height:1.5; color:var(--lk-bar-ink);
}

.elementor-column.lk-miejsce{ padding:12px; }
.elementor-column.lk-miejsce > .elementor-widget-wrap{
  container-type:inline-size;   /* nazwa lokalu skaluje się z kartą (cqi) */
  align-content:flex-start;
  background:#fff;
  padding:24px 24px 24px !important;   /* projekt 29.09: zdjęcie szersze w karcie */
}

.lk-miejsce .elementor-widget{ margin-bottom:0; }
.lk-miejsce .elementor-widget-image{ margin-bottom:30px; }
.lk-miejsce .elementor-widget-image img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover;
}
.lk-miejsce .elementor-widget-image a{ display:block; overflow:hidden; }
.lk-miejsce .elementor-widget-image a img{ transition:transform .6s ease; }
.lk-miejsce .elementor-widget-image a:hover img{ transform:scale(1.03); }

/* Nazwa: dwie linijki zarezerwowane, żeby adresy w rzędzie stały równo
   także wtedy, gdy któraś nazwa się łamie (Westfield Mokotów). */
.elementor .lk-miejsce .elementor-heading-title{
  font-family:var(--lk-font-head, inherit);
  font-weight:500;   /* projekt 29.09: jak w pliku „OK” — pełniejsza kreska niż Light */
  /* 9.6% szerokości karty: „Lukullus | Mokotowska” (ok. 9,8 em) mieści się
     w jednej linii przy każdej szerokości; „Westfield Mokotów” łamie się,
     jak w projekcie. Bez obsługi cqi zostaje 2vw. */
  font-size:clamp(24px,2vw,36px);
  font-size:clamp(16px,9.6cqi,40px);   /* minimum niżej: przy ok. 1100 px karty są wąskie */
  line-height:1.2;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--lk-ink);   /* #484848 — ciemniej niż adres, jak w projekcie */
  min-height:2.4em;
  margin:0 0 28px;
}
/* Filary na stronie głównej (Odbiór w cukierni, Click & Collect): link
   jest na nagłówku, a ::after rozciąga go na całą kolumnę — klikalny jest
   też opis pod spodem. Klasę lk-filar-link daje lk-setup.php?mode=filary-linki
   (Elementor: kolumna → Zaawansowane → Klasy CSS). */
.elementor-column.lk-filar-link > .elementor-widget-wrap{ position:relative; }
/* widżet Elementora ma position:relative — bez tego ::after objąłby sam nagłówek */
.elementor .lk-filar-link .elementor-widget-heading,
.elementor .lk-filar-link .elementor-widget-heading .elementor-widget-container{ position:static; }
.lk-filar-link .elementor-heading-title a{ color:inherit; text-decoration:none; }
.lk-filar-link .elementor-heading-title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.lk-filar-link > .elementor-widget-wrap{ transition:opacity .3s ease; }
.lk-filar-link:hover > .elementor-widget-wrap{ opacity:.7; }

.lk-miejsce .elementor-heading-title a{ color:inherit; text-decoration:none; transition:color .3s; }
.lk-miejsce .elementor-heading-title a:hover{ color:var(--lk-ink); }

.lk-kreska{
  font-family:var(--lk-font-body, sans-serif);
  font-weight:200;
  color:#c9c9c9;
  margin:0 .12em;
}

.elementor .lk-miejsce .elementor-widget-text-editor{
  font-size:15px; line-height:1.5; font-weight:400; color:var(--lk-bar-ink);
}
.lk-miejsce .elementor-widget-text-editor p{ margin:0; }
.lk-miejsce .elementor-widget-text-editor p.lk-miejsce__tel{ margin-top:1.1em; color:var(--lk-ink); }
.lk-miejsce .elementor-widget-text-editor a{ color:inherit; text-decoration:none; }
.lk-miejsce .elementor-widget-text-editor a:hover{ color:var(--lk-ink); }

@media (max-width:767px){
  .elementor-column.lk-miejsce{ padding:8px 0; }
  .elementor-column.lk-miejsce > .elementor-widget-wrap{ padding:20px 20px 22px !important; }
  .elementor .lk-miejsce .elementor-heading-title{ min-height:0; margin-bottom:16px; }
}

/* Termin wybranego rozmiaru (warianty.js) — mocniej niż zwykła uwaga,
   bo to informacja, która zmienia datę odbioru. */
.lk-wariant-termin{ color:var(--lk-ink); }

/* =====================================================================
   Wygląd z projektu (zrzuty 29.09.2026) — karty produktów, karta
   produktu, pasek kategorii, łopatka w menu. Kolory WYŁĄCZNIE z palety
   Blocksy (Dostosuj → Kolory): 15 szary (ceny), 16 tytuły i łopatka,
   17 czarny (menu i zakładki). Zmiana koloru w palecie przemaluje to.
   ===================================================================== */

/* --- karta produktu na liście --- */
.woocommerce ul.products li.product .entry-meta{
  font-size:11.5px; letter-spacing:.14em; font-weight:400;
  color:var(--lk-title); margin:4px 0 5px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a{
  font-family:var(--lk-font-head, inherit);
  font-size:clamp(17px,1.2vw,20px);   /* projekt 29.09: ok. 19 px przy 1630 px */
  font-weight:300;
  letter-spacing:.02em;
  text-transform:none;
  line-height:1.25;
  color:var(--lk-title);
  min-height:0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--lk-font-body, inherit);
  font-size:clamp(15px,1.05vw,17px);
  font-weight:300;
  color:var(--lk-bar-ink);
  margin-top:6px !important;
}
.woocommerce ul.products li.product .price *{ font-weight:inherit; color:inherit; }

/* --- karta produktu --- */
.single-product .product_title{
  font-family:var(--lk-font-head, inherit);
  font-size:clamp(28px,2.6vw,44px);   /* projekt 29.09: ok. 42 px przy 1630 px */
  font-weight:300;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--lk-title);
}
.single-product .summary > .price,
.single-product .entry-summary .price{
  font-family:var(--lk-font-body, inherit);
  font-size:22px;
  font-weight:300;
  color:var(--lk-title);
}
.single-product .entry-summary .price *{ font-weight:inherit; color:inherit; }

/* --- pasek kategorii (CAŁA OFERTA · TORTY · …) --- */
.lk-tabs{ border-bottom:0; gap:6px 36px; }
.lk-tabs a{
  display:inline-flex; align-items:center;
  color:var(--lk-black); font-weight:400; letter-spacing:.14em;
  text-decoration:none;
}
.lk-tabs a.is-active,
.lk-tabs a:hover{ color:var(--lk-black); }

/* --- łopatka w pasku kategorii: wybrana kategoria i najechanie (jak w sliderze) ---
   Pole ma w spoczynku zerową szerokość, więc nazwy stoją równo; przy
   wybranej/wskazanej pozycji rozsuwa się i przepycha napis w prawo. */
.lk-tabs a::before{
  content:"";
  flex:none;
  width:0; height:1em;
  margin-right:0;
  background:var(--lk-title);
  -webkit-mask:url(../ikony/lopatka-prawo.svg) left center / contain no-repeat;
          mask:url(../ikony/lopatka-prawo.svg) left center / contain no-repeat;
  opacity:0;
  transform:translateX(-.4em);
  transition:width .45s cubic-bezier(.22,.61,.36,1), margin .45s cubic-bezier(.22,.61,.36,1),
             opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.lk-tabs a.is-active::before,
.lk-tabs a:hover::before,
.lk-tabs a:focus-visible::before{
  width:3.45em; margin-right:.75em; opacity:1; transform:none;
}
/* w projekcie łopatka wchodzi w odstęp przed wybraną kategorią */
.lk-tabs a.is-active::before{ margin-left:-16px; }
/* ale nie przed pierwszą pozycją i nie na telefonie — pasek ma tam
   przewijanie (overflow), które ucina wszystko, co wystaje w lewo */
.lk-tabs a:first-child.is-active::before{ margin-left:0; }
@media (max-width:700px){
  .lk-tabs a.is-active::before{ margin-left:0; }
}

/* menu z hamburgera */
#offcanvas .ct-panel-content .menu-item > .ct-menu-link{
  display:inline-flex; align-items:center;
  color:var(--lk-black);
}
/* bez łopatki (decyzja użytkownika 29.09.2026) */
#offcanvas .ct-panel-content .menu-item > .ct-menu-link:hover{ color:var(--lk-title); }

@media (prefers-reduced-motion: reduce){
  html:not(.lk-motion-forced) .lk-tabs a::before{ transition-duration:.01ms; }
}

/* --- karta produktu: dopasowanie do projektu 29.09 --- */
/* okruszki zastępuje pasek kategorii (lukullus_tabs_na_produkcie), a nadtytuł
   z kategorią jest zbędny, bo kategorię wskazuje łopatka w pasku */
.single-product .ct-breadcrumbs,
.single-product .summary .lk-eyebrow{ display:none !important; }
/* pasek wypada przed opakowaniem produktu (ct-container-full), więc dostaje
   tę samą szerokość co .product-entry-wrapper Blocksy */
.single-product .lk-tabs{
  width:var(--theme-container-width, 90vw);
  max-width:var(--theme-normal-container-max-width, 1290px);
  margin:0 auto 34px;
}

/* ilość: białe pole bez ramki, napis przycisku cieńszy */
.single-product form.cart .quantity{ background:#fff; border:0 !important; }
.single-product form.cart .quantity input.qty{ background:transparent; border:0; }
.single-product .single_add_to_cart_button{ font-weight:400; letter-spacing:.04em; font-size:14px; }

/* notka o odbiorze zawsze na jaśniejszym polu — kolor 7 palety Blocksy
   („Tło sekcji”), decyzja użytkownika 29.09 */
.single-product .lk-note{ background:var(--lk-surface); padding:18px 22px; margin-top:28px; }

/* rozmiary: jaśniejsze tło (kolor 7) ma tylko wybrany — oznacza wybór;
   pozostałe zostają przezroczyste (decyzja użytkownika 29.09) */
.lk-wariant{ background:transparent; }
.lk-wariant.is-on{ background:var(--lk-surface); }

/* =====================================================================
   Stopka Blocksy (29.09.2026). Kolory ustawia Blocksy (wiersz stopki →
   paleta: tytuły 16, tekst 4, linki 17 / najechanie 16, dolny pasek 16
   z napisem 8). Tu tylko krój i wielkość: Blocksy daje stopce krój
   systemowy i wersaliki dla całego tekstu.
   ===================================================================== */
.ct-footer [data-row]{ --theme-font-family: var(--lk-font-body, inherit); }
.ct-footer .ct-widget,
.ct-footer .ct-widget p,
.ct-footer .ct-widget a,
.ct-footer .ct-footer-copyright{ font-family:var(--lk-font-body, inherit); }

/* menu w stopce: jak pasek kategorii — wersaliki, rozstrzelone */
.ct-footer .widget-menu a{
  font-size:12.5px; letter-spacing:.14em; font-weight:400;
  text-decoration:none; transition:color .3s;
}

/* tekst newslettera zwykłymi literami, nie wersalikami */
.ct-footer .lk-footer__lead{
  text-transform:none; font-size:14px; letter-spacing:.01em;
  line-height:1.6; font-weight:300;
}

.ct-footer .ct-footer-copyright{ font-size:12.5px; letter-spacing:.02em; font-weight:300; }

/* przycisk „Dodaj” przy torbie (Kontuar) — szary z palety (15) */
.kontuar-addons{ --kontuar-dodatek-tlo: var(--lk-bar-ink); }

/* nagłówki sekcji pod kartą produktu (Podobne produkty, Polecamy) — jak tytuły */
.single-product .related > h2,
.single-product .up-sells > h2{ color:var(--lk-title); }

/* Strona główna: pasek filarów pod sliderem (Dostawa, Odbiór w cukierni,
   Click & Collect, Płatności) do lewej na komputerze — decyzja użytkownika
   1.10.2026. W Elementorze stoją wyśrodkowane (także styl w akapicie),
   stąd !important; na telefonie zostaje środek. */
@media (min-width:1025px){
  .elementor-section:has(.lk-filar-link) .elementor-widget,
  .elementor-section:has(.lk-filar-link) .elementor-heading-title,
  .elementor-section:has(.lk-filar-link) .elementor-widget-text-editor p{
    text-align:left !important;
  }
}

/* Pusta kolumna w pasku filarów (po usuniętym filarze „Dostawa” została
   pusta kolumna 25% i przesuwała resztę na środek) — chowamy każdą pustą
   kolumnę, pozostałe dzielą szerokość po równo. */
.elementor-section:has(.lk-filar-link) > .elementor-container > .elementor-column:not(:has(.elementor-widget)){ display:none; }
@media (min-width:768px){
  .elementor-section:has(.lk-filar-link) > .elementor-container > .elementor-column{ flex:1 1 0; width:auto; }
}

/* Filary wyśrodkowane w swoich kolumnach (prośba 1.10.2026), tekst w środku
   nadal do lewej — każdy filar to blok szerokości swojej treści na środku kolumny. */
@media (min-width:1025px){
  .elementor-section:has(.lk-filar-link) > .elementor-container > .elementor-column > .elementor-widget-wrap{
    width:max-content; max-width:100%; flex:0 0 auto; margin-left:auto; margin-right:auto;
    flex-direction:column; align-items:center;
  }
  .elementor-section:has(.lk-filar-link) > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget{
    width:auto; max-width:100%;
  }
  .elementor-section:has(.lk-filar-link) > .elementor-container > .elementor-column{ justify-content:center; }
}
/* 1.10.2026: opisy filarów też na środku (wcześniej do lewej). */
@media (min-width:1025px){
  .elementor-section:has(.lk-filar-link) .elementor-widget,
  .elementor-section:has(.lk-filar-link) .elementor-heading-title,
  .elementor-section:has(.lk-filar-link) .elementor-widget-text-editor p{
    text-align:center !important;
  }
}

/* Miejsca: blok „Napisz do nas / Dane firmy” pod kartami wyrównany do lewej
   krawędzi siatki kart (1.10.2026) — ten sam boczny margines 4,5% co sekcja
   kart, a teksty zaczynają się tam, gdzie tytuły w kartach (1. i 3. karta). */
@media (min-width:1025px){
  .elementor-section:has(.lk-miejsce) ~ .elementor-section-boxed{ padding-left:4.5% !important; padding-right:4.5% !important; }
  .elementor-section:has(.lk-miejsce) ~ .elementor-section-boxed > .elementor-container{ max-width:none; }
  .elementor-section:has(.lk-miejsce) ~ .elementor-section-boxed > .elementor-container > .elementor-column > .elementor-widget-wrap{ padding-left:36px; padding-right:36px; }
  .elementor-section:has(.lk-miejsce) ~ .elementor-section-boxed .elementor-heading-title,
  .elementor-section:has(.lk-miejsce) ~ .elementor-section-boxed .elementor-widget-text-editor,
  .elementor-section:has(.lk-miejsce) ~ .elementor-section-boxed .elementor-widget-text-editor p{ text-align:left !important; }
}

/* =====================================================================
   Koszyk i wysuwany koszyk w nagłówku — według makiet „L KOSZYK 1”
   i „L KOSZYK PODGLAD” (2.10.2026). Zasady użytkownika: przyciski
   krojem Barlow, tytuły w Regins bez wersalików.
   ===================================================================== */
.woocommerce-cart .lk-koszyk-btn,
.woocommerce-cart .woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart .cart_totals .checkout-button,
header.ct-header .ct-cart-content .woocommerce-mini-cart__buttons .button{
  font-family:var(--lk-font-body, inherit) !important;
  font-weight:400; text-transform:none; letter-spacing:.01em;
}

/* tytuł strony i podsumowania: Regins, zwykłe litery */
.woocommerce-cart .hero-section h1,
.woocommerce-cart .cart_totals > h2{
  text-transform:none; letter-spacing:0; color:var(--lk-ink);
}
.woocommerce-cart .cart_totals > h2{
  font-family:var(--lk-font-head, inherit); font-size:26px; font-weight:300;
  margin-bottom:28px;
}

/* lista: bez nagłówka tabeli, ciągła linia u góry, przerywane między pozycjami */
.woocommerce-cart .woocommerce-cart-form thead{ display:none; }
.woocommerce-cart .woocommerce-cart-form table.shop_table{
  border-top:1.5px solid var(--lk-line); border-collapse:collapse;
}
.woocommerce-cart .woocommerce-cart-form tbody tr.cart_item > td{
  border:0; border-bottom:1.5px dashed var(--lk-line);
  padding-top:28px; padding-bottom:28px; vertical-align:middle;
}
.woocommerce-cart .woocommerce-cart-form td.product-thumbnail .ct-media-container{ width:110px; }
.woocommerce-cart .woocommerce-cart-form td.product-thumbnail{ width:134px; }
/* nazwa bywa linkiem albo samym tekstem (torba-dodatek), więc styl na komórce */
.woocommerce-cart .woocommerce-cart-form td.product-name,
.woocommerce-cart .woocommerce-cart-form td.product-name > a{
  font-size:17px; font-weight:400; letter-spacing:.02em;
  text-transform:uppercase; color:var(--lk-ink);
}
.woocommerce-cart .woocommerce-cart-form td.product-name .price,
.woocommerce-cart .woocommerce-cart-form td.product-subtotal{
  font-size:17px; font-weight:300; color:var(--lk-bar-ink);
}
.woocommerce-cart .woocommerce-cart-form td.product-name .price{ margin-top:10px; text-transform:none; letter-spacing:0; }

/* ilość: ramka w kolorze 2 palety, przezroczyste tło */
.woocommerce-cart .woocommerce-cart-form .quantity{
  --quantity-height:48px; --quantity-width:122px;
  border:1.5px solid var(--lk-accent-dark) !important; background:transparent;
}
.woocommerce-cart .woocommerce-cart-form .quantity input.qty,
.woocommerce-cart .woocommerce-cart-form .quantity .ct-increase,
.woocommerce-cart .woocommerce-cart-form .quantity .ct-decrease{
  border:0 !important; background:transparent !important; color:var(--lk-ink);
}
.woocommerce-cart .woocommerce-cart-form td.product-remove a.remove{ color:var(--lk-ink); }

/* „Zaktualizuj”: szary (kolor 4 palety rozjaśniony), do prawej */
.woocommerce-cart .woocommerce-cart-form td.actions{ border:0; padding-top:28px; text-align:right; }
.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]{
  min-width:212px; height:48px; padding:0 30px; font-size:16px;
  background:color-mix(in srgb, var(--lk-muted) 75%, #fff) !important;
  border:0 !important; color:#fff !important;
}

/* podsumowanie: biała karta bez ramki */
.woocommerce-cart .cart_totals{
  background:var(--lk-bg); border:0 !important; padding:38px 44px 44px;
}
.woocommerce-cart .cart_totals table.shop_table tr > *{
  border:0; font-size:17px; color:var(--lk-ink); padding:18px 0;
}
.woocommerce-cart .cart_totals tr.cart-subtotal > *{ border-bottom:1.5px dashed var(--lk-line) !important; font-weight:300; }
.woocommerce-cart .cart_totals tr.order-total > *{ font-weight:500; }
.woocommerce-cart .cart_totals tr.order-total strong{ font-weight:500; }
.woocommerce-cart .wc-proceed-to-checkout{ padding-top:30px; margin:0 !important; }

/* przyciski żółte jak belka (kolor 13): napis grafitowy, przy najechaniu
   wypełnienie od dołu kolorem tekstu */
.woocommerce-cart .cart_totals .checkout-button,
header.ct-header .ct-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout){
  background:var(--lk-bar) !important; color:var(--lk-ink) !important; border:0 !important;
}
.woocommerce-cart .cart_totals .checkout-button{ height:52px; font-size:16px; }
.lk-anim.woocommerce-cart .cart_totals .checkout-button::before,
.lk-anim header.ct-header .ct-cart-content .woocommerce-mini-cart__buttons .button::before{ background:var(--lk-ink); }
.woocommerce-cart .cart_totals .checkout-button:hover,
header.ct-header .ct-cart-content .woocommerce-mini-cart__buttons .button:hover{ color:var(--lk-bar) !important; }

/* wysuwany koszyk: biały panel zamiast ciemnego Blocksy */
header.ct-header .ct-cart-content{
  --theme-text-color:var(--lk-ink); --theme-headings-color:var(--lk-ink);
  --theme-link-initial-color:var(--lk-ink); --theme-link-hover-color:var(--lk-title);
  --mini-cart-background-color:var(--lk-bg);
  background:var(--lk-bg) !important; color:var(--lk-ink); box-shadow:none !important;
  font-family:var(--lk-font-body, inherit);
}
header.ct-header .ct-cart-content .woocommerce-mini-cart-item,
header.ct-header .ct-cart-content .woocommerce-mini-cart__total{
  border-top:0 !important; border-bottom:1.5px dashed var(--lk-line) !important;
}
header.ct-header .ct-cart-content .product-title{
  font-size:14px; font-weight:400; letter-spacing:.03em; text-transform:uppercase; color:var(--lk-ink);
}
header.ct-header .ct-cart-content .quantity{ font-size:14px; font-weight:300; color:var(--lk-bar-ink); }
header.ct-header .ct-cart-content .quantity .amount{ font-weight:300; }
header.ct-header .ct-cart-content .remove{ color:var(--lk-ink) !important; }
header.ct-header .ct-cart-content .woocommerce-mini-cart__total{
  font-size:14px; color:var(--lk-ink); text-transform:none;
}
header.ct-header .ct-cart-content .woocommerce-mini-cart__total strong{ font-weight:400; text-transform:uppercase; letter-spacing:.04em; }
header.ct-header .ct-cart-content .woocommerce-mini-cart__total .amount{ font-weight:400; text-transform:none; }
header.ct-header .ct-cart-content .woocommerce-mini-cart__buttons .button{
  height:46px; font-size:14px; padding:0 12px;
}
/* „Zamówienie” — jasnoszary (kolor 14 palety) */
header.ct-header .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout{
  background:var(--theme-palette-color-14, #e5e4e2) !important; color:var(--lk-ink) !important; border:0 !important;
}

/* =====================================================================
   Zasady typografii użytkownika (2.10.2026), obowiązują w całym sklepie:
   1) TT Regins nigdy wersalikami — wielka litera tylko na początku.
      Wersaliki brały się ze wspólnej reguły nagłówków (--lk-head-case
      z Dostosuj), stąd !important: wygrywa też z ustawieniami Elementora.
   2) Przyciski zawsze krojem Barlow — Blocksy dawał im krój tytułów.
   ===================================================================== */
h1,h2,h3,h4,h5,h6,
.entry-title,.page-title,.product_title,.widget-title,
.elementor-heading-title{
  text-transform:none !important; letter-spacing:0;
}
.button,a.button,button.button,
.wp-element-button,.ct-button,.elementor-button,
input[type="submit"],input[type="button"],
.wc-block-components-button,.wc-block-components-button__text,
.kontuar-addons button{
  font-family:var(--lk-font-body, 'Barlow', sans-serif) !important;
}

/* newsletter w stopce jak na makiecie: pole i przycisk zwykłymi literami,
   przycisk szary jak „Zaktualizuj” w koszyku */
.ct-footer .lk-news input{ text-transform:none; letter-spacing:.01em; }
.ct-footer .lk-news .button{
  text-transform:none; letter-spacing:.01em; font-size:15px; font-weight:400;
  background:color-mix(in srgb, var(--lk-muted) 75%, #fff); border-color:transparent; color:#fff;
}

/* =====================================================================
   Kasa: „Twoje zamówienie” w tej samej kolorystyce co „Podsumowanie
   koszyka” (prośba użytkownika 2.10.2026) — biała karta bez ramki, tytuł
   Regins 26 px, przerywane linie, przycisk żółty (kolor 13).
   ===================================================================== */
.woocommerce-checkout .ct-order-review{
  background:var(--lk-bg) !important; border:0 !important; padding:38px 44px 44px;
}
.woocommerce-checkout #order_review_heading{
  font-family:var(--lk-font-head, inherit); font-size:26px; font-weight:300;
  color:var(--lk-ink); margin-bottom:28px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead{ display:none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr > *{
  border:0 !important; border-bottom:1.5px dashed var(--lk-line) !important;
  font-size:17px; color:var(--lk-ink); padding:18px 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:first-child > *{ padding-top:0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name{
  text-transform:uppercase; letter-spacing:.02em; font-weight:400;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name .product-quantity{ font-weight:300; text-transform:none; }
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total{ font-weight:300; color:var(--lk-bar-ink); }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal > *{ font-weight:300; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total > *,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total strong{ font-weight:500; border-bottom:0 !important; }
/* metoda płatności: ramka w kolorze linii, bez tła */
.woocommerce-checkout #payment .wc_payment_methods{ border-color:var(--lk-line) !important; background:transparent; }
.woocommerce-checkout #place_order{
  background:var(--lk-bar) !important; color:var(--lk-ink) !important; border:0 !important;
  height:52px; font-size:16px; font-weight:400; text-transform:none; letter-spacing:.01em;
}
.lk-anim.woocommerce-checkout #place_order::before{ background:var(--lk-ink); }
.woocommerce-checkout #place_order:hover{ color:var(--lk-bar) !important; }