a.nav-link[title="Promocje"] {
    color: #9a6a16!important;
}

/* === Distil: efekt "ruchomych" grafik po najechaniu (zoom 6% + uniesienie), 17.09.2026 === */
.bento-item { transition: transform .35s ease, box-shadow .35s ease; }
.bento-item .bento-img { transition: transform .75s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.bento-item:hover .bento-img,
.bento-item:focus-visible .bento-img { transform: scale(1.06); }
.bento-item:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(0,0,0,.35); }

#main_tree5 .main_tree_sub__item a.nav-gfx { display: block; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
#main_tree5 .main_tree_sub__item a.nav-gfx img { display: block; width: 100%; transition: transform .75s cubic-bezier(.2,.7,.2,1); will-change: transform; }
#main_tree5 .main_tree_sub__item a.nav-gfx:hover img,
#main_tree5 .main_tree_sub__item a.nav-gfx:focus-visible img { transform: scale(1.06); }
#main_tree5 .main_tree_sub__item a.nav-gfx:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(0,0,0,.35); }

#main_banner1 .swiper-slide { overflow: hidden; }
#main_banner1 .swiper-slide img { transition: transform 6s linear; }
#main_banner1 .swiper-slide-active img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .bento-item, .bento-item .bento-img, #main_tree5 a.nav-gfx, #main_tree5 a.nav-gfx img, #main_banner1 .swiper-slide img { transition: none !important; transform: none !important; }
}

/* === Distil: okładki bloga — równe kafle: stała proporcja 1376/1058 (wszystkie okładki są w tej proporcji: blog_grafiki_kafel.py), bez szarych pasów; 20.09.2026 === */
.article__image_wrapper, .blog-item_sub .blog_image_wrapper { height: auto !important; aspect-ratio: 1376 / 1058 !important; max-height: none !important; flex-grow: 0 !important; overflow: hidden; background: transparent !important; padding: 0 !important; }
.article__image { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; display: block; }
/* strona wpisu: okładka na całą szerokość nad tekstem (szablon: float:left, max-width 33% → na telefonie mini-miniatura) */
#blog-item img.blog_image, .blog-item_sub img.blog_image { float: none !important; display: block; width: 100%; max-width: 100% !important; height: auto !important; object-fit: unset; margin: 0 0 20px !important; }
@media (max-width: 767px) { .article__image_wrapper { max-width: 100%; } }
@media (min-width: 1024px) { #blog-item img.blog_image, .blog-item_sub img.blog_image { max-width: 820px !important; } }
/* === Distil: hero SVG (jeden plik) — na desktopie szerokość jak slidery produktów (--content-max-width), wycentrowany; 18.09.2026 === */
@media (min-width: 1024px) {
  #main_banner1 .main_slider__item a { display: flex; justify-content: center; }
  #main_banner1 .main_slider__item img { max-height: none; max-width: var(--content-max-width, 1170px); width: 100%; height: auto; display: block; border-radius: 10px; }
  #main_banner1 .swiper-slide-active img { transform: none; }
}

/* === Distil: blok CMS "Dzielimy pasję…" — jedna wielkość tekstu jak w całym sklepie (14/20), śródtytuły 16/600; 18.09.2026 === */
#main_cms2 .cms_banner__content p.mb-24, #main_cms2 .cms_banner__hidden p { font-size: 14px; line-height: 20px; }
#main_cms2 .cms_banner__content .cms_banner__heading { font-size: 16px; line-height: 24px; font-weight: 600; }

/* === Distil: Source Sans 3 self-hosted (OFL, Google Fonts v19, variable 200-900) — czcionka z kitu Typekit szablonu renderuje "eq"→"ę" i "añ"→"ą" (Tequila, añejo); nadpisanie zmiennej --font-family szablonu; 18.09.2026 === */
@font-face { font-family: 'Source Sans 3 Distil'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/data/include/cms/cms_styles/SourceSans3-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3 Distil'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/data/include/cms/cms_styles/SourceSans3-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3 Distil'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/data/include/cms/cms_styles/SourceSans3-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3 Distil'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('/data/include/cms/cms_styles/SourceSans3-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root, body { --font-family: 'Source Sans 3 Distil', 'source-sans-3', 'Arial', 'Helvetica', sans-serif; }

/* === Distil: równe odstępy między modułami SG — blok kafli kategorii (#main_cms) miał 20px zamiast 80/40, a H1 marginesy 15/15 zamiast 0/24; 20.09.2026 === */
#main_cms { margin-bottom: 80px !important; }
#main_cms .kat-h1 { margin: 0 auto 24px !important; }
@media (max-width: 991px) { #main_cms { margin-bottom: 40px !important; } }
/* mobile: karty produktów w strefach hotspot wystają ~19px poza sekcję → odstęp po nich 21px zamiast 40 */
@media (max-width: 991px) { [id^="main_hotspot_zone"] .hotspot { padding-bottom: 19px; } }

/* === Distil: nagłówek modułu producentów „Popularne marki” → „Nasi Partnerzy” (literał szablonu; zmiana w Composerze wymaga publikacji nowej wersji — do zrobienia przy najbliższej publikacji, wtedy usunąć ten blok); 21.09.2026 === */
#main_producers .headline { font-size: 0 !important; }
#main_producers .headline::before { content: "Nasi Partnerzy"; font-size: 32px; line-height: 32px; }
@media (max-width: 991px) { #main_producers .headline::before { font-size: 28px; } }

/* === Distil: karta produktu — porządki 21.09.2026: brak sklepu stacjonarnego, bez liczby sztuk w magazynie, bez PayPo (płatność odroczona wyłączona dla alkoholu), etykieta kodu „Symbol” → „EAN / SKU” === */
#projector_stocks, #projector_paypo, #projector_amount { display: none !important; }
.dictionary__param[data-code="true"] .dictionary__name_txt { font-size: 0 !important; }
.dictionary__param[data-code="true"] .dictionary__name_txt::before { content: "EAN / SKU"; font-size: 14px; }
/* === Distil: paleta zgodna z logo. Kropka w DISTIL. ma #D7A129, ale na bialym daje
   kontrast 2,33:1 - za malo na tekst (WCAG AA wymaga 4,5:1). Dlatego glebsze zloto
   #9A6A16 (4,72:1) wszedzie gdzie jest tekst, a czyste #D7A129 tylko na dekoracje.
   Szablon trzyma kolory w zmiennych, wiec wystarczy je nadpisac. 23.09.2026 === */
:root{
  --primary-color:#9a6a16;
  --color-label-bestseller:#9a6a16;
  --color-label-bestseller-border:1px solid #9a6a16;
  --color-points:#9a6a16;
  --headline-color-hover:#9a6a16;
  --headline-after-color-hover:#9a6a16;
  --swiper-theme-color:#d7a129;
}/* --- elementy z kolorem wpisanym na sztywno, poza zmiennymi szablonu --- */
/* szablon ma na te miejsca wlasne reguly o wyzszej specyficznosci - stad !important */
#freeShipping,#freeShipping::before,#freeShipping::after{background:#9a6a16!important}
.btn.--solid,button.btn.--solid,a.btn.--solid,.btn.--solid.--large{background:#9a6a16!important;border-color:#9a6a16!important}
.btn.--solid:hover,.btn.--solid:focus-visible{background:#8a5f12!important;border-color:#8a5f12!important}
.btn.--outline,a.btn.--outline{color:#9a6a16!important;border-color:#9a6a16!important}
.btn.--outline:hover,.btn.--outline:focus-visible{background:#9a6a16!important;color:#fff!important}
.badge,.badge-info,.top_basket__quantity{background:#9a6a16!important}
.account_links__item:hover,.wishlist_link:hover,.top_basket__sub:hover,
.account_links__item:focus-visible,.wishlist_link:focus-visible,.top_basket__sub:focus-visible{color:#9a6a16!important}
.account_links__item:hover svg *,.wishlist_link:hover svg *,.top_basket__sub:hover svg *{fill:#9a6a16!important;stroke:#9a6a16!important}
h2.headline__wrapper:hover,h3.article__name_wrapper:hover,h3.hotspot__name:hover{color:#9a6a16!important}

/* === Distil: typografia — 19.10.2026 ===
   Naglowki przeniesione z rodziny 'span' (kit Typekit szablonu) na Source Sans 3.
   Powod: 'span' ma wadliwe podstawienia OpenType i sklejza pary liter
   ("eq"->"e z ogonkiem", "an~"->"a z ogonkiem", widoczne tez w "Tariquet").
   Tekst ciagly naprawiono 18.09.2026, naglowki zostaly wtedy pominiete. */
:root, body { --font-family-headline: 'Source Sans 3 Distil','source-sans-3','Arial','Helvetica',sans-serif; }
h1, h2, h3, h4, h5,
.headline, .product__name, .projector_header__name, .hotspot__name, .article__name {
  font-family: 'Source Sans 3 Distil','source-sans-3','Arial','Helvetica',sans-serif !important;
}

/* Opis produktu: bylo 13px i line-height:normal - za ciasno przy dlugich opisach. */
.section.longdescription { font-size: 15px; line-height: 1.6; }
.section.longdescription p,
.section.longdescription li { font-size: 15px; line-height: 1.6; }
.section.longdescription h2,
.section.longdescription h3 { line-height: 1.3; }

/* === Distil: ograniczenie sortowania - 19.10.2026 ===
   Klient ma wybierac tylko alfabetycznie i po cenie. Domyslne sortowanie
   (nazwa A->Z) ustawione w panelu: Sklep > Lista produktow > Sortowanie
   listy towarow. Panel nie pozwala ukryc pojedynczych opcji, wiec
   trafnosc i date chowamy tutaj - w widgecie (li) i w natywnym select. */
.f-dropdown-li.option_relevance-d,
.f-dropdown-li.option_date-a,
.f-dropdown-li.option_date-d { display: none !important; }
select[name="sort_order"] option.option_relevance-d,
select[name="sort_order"] option.option_date-a,
select[name="sort_order"] option.option_date-d { display: none !important; }

/* === Distil: kafelek niedostepnego produktu - 19.10.2026 ===
   Szablon renderuje na liscie wyszarzony formularz "Dodaj" (opacity .3,
   pointer-events:none). Skrypt w Dodatkach HTML/JS podmienia przycisk na
   link "Powiadom o dostepnosci" prowadzacy na karte produktu i dodaje
   formularzowi klase --powiadom. Te reguly przywracaja mu klikalnosc
   i wyglad CTA. Bez skryptu nic sie nie dzieje. */
.product form.add_to_basket.--disabled.--powiadom{opacity:1;pointer-events:auto;grid-template-columns:1fr}
.product form.add_to_basket.--disabled.--powiadom .add_to_basket__number_wrapper{display:none}
.product a.product__notify{display:flex;align-items:center;justify-content:center;width:100%;pointer-events:auto;background:transparent;color:#9a6a16;border:1px solid #9a6a16;text-align:center;white-space:normal;line-height:1.2;padding:8px 10px}
.product a.product__notify:hover{background:#9a6a16;color:#fff}

/* === Distil: siatka listingu i wielkosc packshotu - 19.10.2026 ===
   Szablon trzyma liczbe kolumn w zmiennej --products-grid-template-columns:
   :root = 2 kolumny, od 757px = 3. Dodatkowo #search wymuszal 1 kolumne
   ponizej 757px - stad widok telefonu z jedna pozycja w rzedzie.
   Ustalenie z wlascicielem 19.10.2026: telefon 2 kolumny, desktop 4,
   tablet (757-978px) zostaje na 3.
   Kafelek zdjecia mial aspect-ratio 1/1, wiec butelka (format pionowy)
   traciła wysokosc. 3/4 daje WIEKSZY packshot mimo wezszego kafelka:
   przy 4 kolumnach 169x229 px zamiast 147x208 w ukladzie 3-kolumnowym. */
@media (max-width: 756px) {
  #search { --products-grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 979px) {
  :root { --products-grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#search .product .product__icon { aspect-ratio: 3 / 4; max-height: 300px; }
#search .product .product__icon img { max-height: 300px; }
/* Telefon, 2 kolumny: formularz koszyka ma w szablonie dwie rowne kolumny
   na KAZDEJ szerokosci, a selektor ilosci min-width 70px. Przy kafelku 180px
   na przycisk zostawalo 91px i wystawal 14px poza karte (zglosil wlasciciel).
   Ustawiamy jedna kolumne: ilosc nad przyciskiem, przycisk 146px w ramce. */
@media (max-width: 756px) {
  #search .product .add_to_basket { grid-template-columns: 1fr; gap: .6rem; }
}
/* Galeria w karcie produktu: szablon renderuje zdjecie w naturalnym rozmiarze
   (height z pliku, max-height:none). Przy starych plikach 450px miescilo sie
   w ramce 684x684; po podniesieniu karty do 800px wystawalo 164px pod ramke
   i nachodzilo na sekcje nizej (zglosil wlasciciel 20.10.2026).
   Pomiar na Jack Daniels 40% 3L: przed 387x800 (wystaje 164px),
   po 284x588 (miesci sie z 48px zapasu). */
.photos__figure img { max-height: 100%; height: auto; }