/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


#wrapper {
    padding-top:0 !important;
}

/* s_poma 2026-08-24 
body#index h3.elementor-heading-title {
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 3px;
    color: #b11e2f;
    text-transform: uppercase;
}
*/

body#index h3.elementor-heading-title {
    font-size: 16px;
    font-weight: 700;
    color: #8B1A12;
    font-family: 'Inter', sans-serif;
}

.elementor-counter-number-suffix {
    color:#b11e2f;
}

#iqitmegamenu-wrapper.stuck-menu {
    border-bottom: 1px solid #ededed;
}

.elementor-element.elementor-element-eakyvhy .elementor-testimonial-wrapper .elementor-testimonial-image img {
    width:76px !important;
}

.elementor-testimonial-wrapper .elementor-testimonial-meta.elementor-testimonial-image-position-top .elementor-testimonial-image {
    margin-bottom:5px !important;
}

.elementor-brands .row div {
    border: 1px solid #ededed;
    margin-left:5px;
    margin-right:5px;
}

.elementor-brands .row div:hover{
    border: 1px solid #b8860b;
}

/* s_poma 2026-08-24 zmiana koloru tla z #211a12 na 171717 i usuniecie border-bottom
#footer-container-first{
    background-color: #171717 /* #211a12 */ !important;
/*    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; */
}

#footer {
    background-color: #1c1410;
}

#footer-copyrights {
    /* s_poma zmiana koloru tla na 000 */
    background-color: #000 /* #1c1410 */;
}

#footer-container-main h5.block-title span {
    color:#fff !important;
    text-transform:uppercase !important;
}

#footer-container-main h5.block-title {
    border-bottom:0 !important;
}


div.block-newsletter h5 {
    font-size:1.2rem !important;
    text-transform:uppercase !important;
    font-weight:bold !important;
}

.newsletter-input-group {
    border: 1px solid rgba(255,255,255,0.2) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

.newsletter-input-group .btn-subscribe {
    color:#fff !important;
    background-color:#b8860b !important;
}

.newsletter-input-group .btn-subscribe:hover {
    background-color: #4a3728 !important;
}

.ps-emailsubscription-block .newsletter-input-group .input-subscription {
    color:#fff !important;
}

.ft-copyright {
    color: rgba(255, 255, 255, 0.25);
}

.sp-range-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 20px;
    background-color:#CF3C30;
/*    background: rgba(26, 14, 8, 0.92); */
}

.sp-range-overlay-fix {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    padding: 14px 20px;
    background-color:#CF3C30;
/*    background: rgba(26, 14, 8, 0.92); */
}

.sp-range-overlay h3,
.sp-range-overlay-fix h3 {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
    text-align:left;
}

.sp-range-overlay h3 a,
.sp-range-overlay-fix h3 a {
    color:#fff !important;
}

.sp-range-overlay-link {
    /* color:#C8A951 !important; */
    color:#fff !important;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    font-size:10px;
    text-align:left;
    display:block;
}

.product-miniature-default .product-flag {
    margin-top:5px;
    margin-left:5px;
}

.product-miniature-default .product-flag:first-child {
    margin-top:5px !important;
}

.product-miniature-default .product-flag.discount {
    background-color: #b11e2f !important;
    font-weight:bold !important;
}

.product-miniature-default .product-flag.new {
    background-color: #000 !important;
    font-weight:bold !important;
    text-transform: uppercase !important;
}

.sp-range-product-brand {
    font-size: 14px;
    color: #4B0E14;
/*    text-transform: uppercase; 
    letter-spacing: 1px;*/
    font-weight: 700;
    margin-bottom: 6px;
}

/* s_poma 2026-08-24 usuniecie border-bottom */
.product-miniature-default .thumbnail-container {
    padding-bottom: 10px;
    border-bottom: 0; /* 1px solid #ededed; */
}

/* s_poma 2026-08-24 usuniecie 
.thumbnail-container:hover {
    background-color: #faf4e8 !important;
}
*/

.product-miniature-default .product-description-short {
    font-size: 11px;
    color: #999999 !important;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-miniature-default .product-price-and-shipping .regular-price {
    color:#999999 !important;
    display:inline;
}

/* Wariant 5: cena regularna ciemna, cena promocyjna czerwona */
.product-miniature .product-price { color: #2a1d12 !important; }
.product-miniature .product-price-and-shipping:has(.regular-price) .product-price { color: #b11e2f !important; }

/* Wariant 5: cena na stronie produktu */
.current-price .product-price { color: #2a1d12 !important; }
.product-prices.has-discount .current-price .product-price { color: #b11e2f !important; }

.products-grid .product-miniature-layout-2 .product-add-cart {
    width:100%;
}

.products-grid .product-miniature-layout-2 .btn-product-list {
    width:100%;
    text-transform:uppercase;
    font-weight:bold;
}

.sp-range-hidden {
    display:none;
}

@media screen and (max-width:700px) {
    #header .header-nav {
    display:none;
    }
}

nav.breadcrumb ol li:last-child span {
    color:#000 !important;
    font-weight:bold;
}


/* ================================================================
   IKONKI CECH PRODUKTU — style dla motywu Warehouse
   
   Dodaj ten kod do pliku CSS swojego child theme lub wklej
   w panelu admina: Wygląd → Motyw i logo → Zaawansowane ustawienia
   ================================================================ */
 
/* Kontener ikon — absolutne pozycjonowanie w rogu zdjęcia */
.product-thumbnail {
  position: relative; /* upewnij się że rodzic ma position: relative */
}
 
.product-feature-badges {
  position: absolute;
/*  top: 8px;
  left: 8px; */
  top: 8px;
  left: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  margin-top:4px;
}

.product-cover .product-feature-badges {
    left:14px;
}

.product-cover:hover .product-feature-badges{
    opacity:0;
    visibility:hidden;
} 
 
/* Pojedyncza ikonka — pill z ikoną SVG i etykietą */
.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px 5px 5px;
/*  border-radius: 20px; */
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
/*  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); */
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
 
/* Ikonka SVG wewnątrz badge */
.feature-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}
 
/* ---- Kolory poszczególnych ikon ---- */
/* 2026-09-16 - etykiety zbladly (makieta "d - Produkt - v2": tlo #E4F0DE,
   tekst #3A6B2C, ramka #C3DDBA). Pozostale rodziny przeliczone z tych samych
   proporcji jasnosci i nasycenia, z odcieniem swojego koloru: niebieski
   (lodowka, zamrazarka, bez laktozy), zloty (bez glutenu); szare zostaja
   #F2F2F2. Kontrast tekstu 5.4-7.1 : 1. Ramka to cien wewnetrzny, nie border -
   zadna etykieta nie zmienia wymiarow. Poprzednie kolory i wycofanie:
   ~/work-range/26-09-16-etykiety-blade/README.txt */
 
/* Bez glutenu — złoty */
.feature-badge--gluten-free {
  background-color: #F0EBDE;
  color: #6B5B2C;
  border: 0;
  box-shadow: inset 0 0 0 1px #DDD4BA;
  font-weight:bold;
}
 
/* Ekologiczny — zielony */
.feature-badge--eco {
  background-color: #E4F0DE;
  color: #3A6B2C;
  border:0;
  box-shadow: inset 0 0 0 1px #C3DDBA;
  font-weight:bold;
}

.feature-badge--eco svg {
/*  fill: #2e7d32; */
  stroke: none;
}
 
/* Vege — zielony */
.feature-badge--vege {
  background-color: #E4F0DE;
  color: #3A6B2C;
  border:0;
  box-shadow: inset 0 0 0 1px #C3DDBA;
  font-weight:bold;
}

.feature-badge--vege svg {
  fill: none;
/*  stroke: #558b2f; */
  stroke-width: 2;
}
 
/* Certyfikowany — jasnoszary, ikona w kolorze marki */
.feature-badge--certified {
  background-color: #F2F2F2;
  color: #333333;
  border: 0;
  box-shadow: inset 0 0 0 1px #DDDDDD;
  font-weight: 600;
}
.feature-badge--certified svg {
  fill: #CF3C30;
  stroke: #CF3C30;
  stroke-width: 1;
}
.feature-badge--certified svg polyline {
  fill: none;
  stroke: #CF3C30;
  stroke-width: 2;
}
 
/* s_poma 28 sier */
/* ---- Etykieta tekstowa ---- */
.feature-badge__label {
  font-size: 10px;
  letter-spacing: 0.02em;
/*   text-transform: uppercase; */
}
 
/* ---- Responsywność ---- */
 
/* Na bardzo małych ekranach ukryj etykiety, zostaw tylko ikonki */
@media (max-width: 480px) {
  .feature-badge__label {
    display: none;
  }
  .feature-badge {
    padding: 4px;
    border-radius: 50%;
  }
}
 
/* ================================================================
   OPCJONALNIE: Jeśli chcesz ikonki w prawym górnym rogu zamiast lewym
   Zamień "left: 8px" na "right: 8px" w .product-feature-badges
   ================================================================ */
   
   
/* ===== CATEGORY HERO ===== */
.cat-jh-hero {
    position: relative;
    height: 350px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 3rem;
}
.cat-jh-hero picture {
    position: absolute;
    inset: 0;
    /* dla za krotkich obrazkow */
    /* width: 100%; */
    height: 100%;    
}
.cat-jh-hero picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cat-jh-hero::after {
    content: '';
    position: absolute;
    inset: 0;
/*    background: #fff; // rgba(0, 0, 0, 0.45); */
    z-index: 1;
}
.cat-jh-hero-txt {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}
.cat-jh-hero-title {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
/* s_poma    text-transform: uppercase; */
    letter-spacing: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    line-height: 1.2;
}

/* ===== CATEGORY DESCRIPTION (collapsible) ===== */
.cat-jh-desc {
    margin-bottom: 24px;
    padding: 20px 0;
    border-bottom: 1px solid #e7ddc9;
}
.cat-jh-desc-preview {
    font-size: 13px;
    color: #666666;
    line-height: 1.8;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-jh-desc-preview.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.cat-jh-read-more {
    font-size: 11px;
    color: /* s_poma #b8860b */ #CF3C30;
    font-weight: 600;
    display: inline-block;
    margin-top: 8px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-decoration: none;
}
.cat-jh-read-more:hover {
    color: #4a3728;
}
.cat-jh-arrow {
    font-size: 9px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .cat-jh-hero {
        height: 180px;
    }
    .cat-jh-hero-title {
        font-size: 22px;
        letter-spacing: 3px;
    }
}



/* strona kategorii */

#wrapper .block-title {
    border-bottom:0 !important;
}

.products-selection {
    border-top:0 !important;
    margin:0 0 1rem !important;
    padding:0 0 .8rem !important;
}	

#search_filters .noUi-connect {
    background: /* s_poma #b8860b */ #CF3C30 !important;
}

#search_filters .noUi-horizontal .noUi-handle {
    border: 1px solid /* s_poma #b8860b */ #CF3C30 !important;
}


.product-flags .discount,
.product-flags .on-sale {
    background: #b11e2f;
    color: #ffffff;
    font-weight:bold;
}

.product-flags .new {
    background: #000;
    color: #ffffff;
    font-weight:bold;
}

.discount {
    background: #b11e2f;
    color: #ffffff;
    font-weight:bold;
}

#blockcart-content {
    background:#fff;
}

.gm-cat-second-desc {
    border:0;
    border-top: 1px solid rgba(160,160,160,.25);
    margin-top:40px;
}

/* ===== BADGE'E CECH PRODUKTU — widok strony produktu (pod ceną) ===== */
.product-feature-badges-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.product-feature-badges-inline .feature-badge {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    cursor: pointer;
}

.product-feature-badges-inline .feature-badge svg {
    width: 16px;
    height: 16px;
}

.feature-badge--lactosa-free {
    background-color: #DEE7F0;
    color: #2C4C6B;
    box-shadow: inset 0 0 0 1px #BACCDD;
    font-weight: bold;
}

.feature-badge--fridge {
    background-color: #DEE7F0;
    color: #2C4C6B;
    box-shadow: inset 0 0 0 1px #BACCDD;
    font-weight: 600;
}

.feature-badge--freezer {
    background-color: #DEE7F0;
    color: #2C4C6B;
    box-shadow: inset 0 0 0 1px #BACCDD;
    font-weight: 600;
}

.feature-badge--natural {
    background-color: #EAF4E8;
    color: #2E6B32;
    box-shadow: inset 0 0 0 1px #C3DDBA;
    font-weight: 600;
}

body#checkout section.checkout-step .delivery-option>label>.row>div:first-child img {
    max-width:50%;
}

div.pm-csoc-owl-item .product-miniature {
    padding:10px;
}

#footer-container-main .block-iqitcontactpage .accordion-header {
    display:none;
}

#footer-container-main .block-iqitcontactpage .accordion-wrapper div.accordion-item:nth-child(2) {
    display:none;
}

.sp-aboutus-table td {
    padding:25px;
    vertical-align:top;
}

.elementor-instagram {
    max-height:300px;
}

.elementor-instagram a {
    max-height:300px;
}

.elementor-instagram .instagram-album img,
.elementor-instagram .instagram-video img {
    height:100%;
}

@media (max-width: 767px) {
    .sp-range-aboutus-block {
    background-size: contain;
    background-position: top center !important;
    }
    .sp-range-aboutus-block-text-column .elementor-column-wrap{
    border: 1px solid #ededed;
    }
    .sp-range-shopnumbers-block {
	border: 1px solid #ededed;
    }
    .sp-range-shopnumbers-block .elementor-column {
    width:33% !important;
    }
    .sp-range-shopnumbers-section {
    padding-top: 120px !important;
    background-size: contain;
    margin-bottom:0 !important;
    }
    .sp-range-shopnumbers-block .elementor-counter-number-wrapper {
    font-size:30px !important;
    }
    .sp-range-shopnumbers-block .elementor-counter .elementor-counter-title {
    font-size:0.9rem !important;
    }
    .elementor-element.elementor-element-1soji82 > .elementor-container {
    max-height:380px !important;
    }
}

.cbp-horizontal .cbp-tab-title {
    text-transform:uppercase;
}

body#cms .page-cms {
    color:#000;
}

#header-search-btn,
#header-user-btn,
#ps-shoppingcart-wrapper {
    font-size:12px;
}

/* logo w naglowku — poziomy znak slowny na desktopie od 2026-09-11,
   sygnet 1:1 byl tu 09-09..09-11.
   Bez jawnej reguly na mobile obrazek rozepnie sie na cala szerokosc kolumny,
   bo .col-mobile-logo nie ma zadnego ograniczenia, a img-fluid daje max-width:100%. */
/* Rozmiar logo DESKTOPOWEGO siedzi w atrybucie style znacznika img
   (helpers.tpl, {function renderLogo}), NIE tutaj. Powod: ten arkusz leci
   z max-age=604800 i bez parametru wersji w URL, wiec przy zmianie rozmiaru
   przegladarka z zacachowanym CSS skalowala nowe logo stara regula.
   Regula mobilna zostaje - tam rozmiar sie nie zmienia. 2026-09-11. */
#mobile-header .col-mobile-logo a img { width:auto; height:40px; }

#header .header-btn-w {
    padding: 0 .2rem;
}

/* ===== WARIANT 5 — Ibérico Gold ===== */

/* Baner "darmowa dostawa" — akcent czerwony zamiast czerwonego */
.elementor-element.elementor-element-txzdhr4 .elementor-widget-container {
    background-color: #b11e2f !important;
}

/* Hover przycisku Elementor → złoty 
.elementor-element.elementor-element-lxcyufn .elementor-button:hover,
.elementor-element.elementor-element-lxcyufn .elementor-button:focus {
    color: #ffffff !important;
    background-color: #b8860b !important;
    border-color: #b8860b !important;
}
*/

/* Sekcje z szarym tłem → biały (wariant "flat") 
.elementor-element.elementor-element-7gd8i88,
.elementor-element.elementor-element-hmnf35n {
    background-color: #ffffff !important;
} */

/* Tekst produktu w stopce/nawigacji → ciemny brąz */
#footer-container-main,
#footer-container-main a {
/*    color: rgba(255, 255, 255, 0.5); */
    color:#fff;
}
#footer-container-main a:hover {
/*    color: #ffffff; */
    color: #CF3C30;
}

/* Wariant 5: hover/otwarty link w mega menu */
.cbp-horizontal > ul > li.cbp-hropen > a,
.cbp-horizontal > ul > li.cbp-hropen > a:not([href]):not([tabindex]),
.cbp-horizontal > ul > li.cbp-hropen > a:hover { /* s_poma color: #b11e2f !important; */ /* s_poma 2026-08-31 color: #b8860b !important; */ color:#CF3C30 !important; }

/* Wariant 5: aktualnie odwiedzana strona/podkategoria w menu */
.cbp-horizontal > ul > li.cbp-current > a,
.cbp-horizontal > ul > li.cbp-current > a:not([href]):not([tabindex]) { color: #b11e2f !important; }


.cat-jh-desc-preview,
.cat-jh-desc-preview p,
#manufacturer-description,
#manufacturer-description p {
    font-family:'Inter', sans-serif !important;    
}

#manufacturer-description {
    margin-bottom:2rem;
}

.products-selection {
    border-bottom: 1px solid #e7ddc9 !important;
}

.btn-product-list,
.product-miniature,
.products-selection .form-control,
.product-miniature-default .thumbnail-container  {
    border-color: #e7ddc9 !important;
}

#js-product-list-top div.row.align-items-center.justify-content-between.small-gutters {
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    text-align: right;
}

#left-column h5.block-title,
#search_filters h4.block-title {
    text-transform: uppercase;
}

#header .header-nav {
    border-bottom: 0; /* 1px solid #e7ddc9 !important; */
}

#header {
    border-bottom:0;
}

#checkout-header {
    border-bottom: 1px solid #e7ddc9 !important;
}

#wrapper {
    margin-top:0;
}

/* ===== RESKIN STRONY PRODUKTU 2026-07-13 (Etap 1) — wg wizualizacji PM ===== */

body#product {
  --jp-accent: #b8860b;
  --jp-accent-dark: #4a3728;
  --jp-text: #2a1d12;
  --jp-gray: #6e6354;
  --jp-gray-light: #a89a86;
  --jp-border: #e7ddc9;
  --jp-bg: #faf4e8;
}

/* --- Galeria produktu --- */
body#product #product-images-large.swiper-container {
  border: /* s_poma 1px solid var(--jp-border) */ #333;
  background: var(--jp-bg);
  margin-bottom: 10px;
}

body#product #product-images-large .swiper-button-arrow {
  background: #fff;
  border: 1px solid var(--jp-border);
  width: 32px;
  height: 32px;
  border-radius: 0;
  opacity: 1;
}

body#product .thumb-container .thumb {
  border: 1px solid var(--jp-border);
  transition: border-color .15s ease;
}

body#product .thumb-container .thumb.selected {
  border-color: /* s_poma var(--jp-accent) */ #333;
  border-width: 2px;
}

/* --- Panel informacyjny produktu --- */
body#product .h1.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--jp-text);
  line-height: 1.3;
}

body#product .product-feature-badges-inline {
  margin: 6px 0 6px;
  gap: 6px;
}

body#product .product-feature-badges-inline .feature-badge {
  border-radius: 5px;
}

body#product .product-prices #product-availability.badge {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 5px;
  box-shadow: none;
}

body#product .product-prices #product-availability.badge i.fa {
  font-size: 15px;
}

/* W magazynie — zielony (dostępność), blady od 2026-09-16 */
body#product .product-prices #product-availability.badge-success.product-available {
  background-color: #E4F0DE;
  color: #3A6B2C;
  border-color: #C3DDBA;
  box-shadow: inset 0 0 0 1px #C3DDBA;
}

/* Brak na stanie — szary (informacja neutralna, świadomie nie czerwony),
   od 2026-09-16 taki sam jak globalny .product-unavailable niżej */
body#product .product-prices #product-availability.badge-danger.product-unavailable {
  background-color: #F2F2F2;
  color: #555555;
  border-color: #DDDDDD;
  box-shadow: inset 0 0 0 1px #DDDDDD;
}

body#product .product-prices .current-price .product-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--jp-text);
}

body#product .product-prices .tax-shipping-delivery-label {
  font-size: 10px;
  color: var(--jp-gray-light);
}

body#product #lowest-price {
  font-size: 10px;
  color: var(--jp-gray-light);
}

body#product .product-variants-item .form-control-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--jp-text);
  display: block;
  margin-bottom: 0px;
}

body#product .custom-select2 select.form-control-select {
  border: 1px solid var(--jp-border);
  border-radius: 0;
  font-size: 13px;
  height: 40px;
  box-shadow: none;
}

body#product .product-add-to-cart .qty input#quantity_wanted {
  border: 1px solid var(--jp-border);
  height: 44px;
  text-align: center;
  border-radius: 0;
}

/* s_poma 28 sierpnia */
body#product .product-add-to-cart .add-to-cart.btn-primary {
  background: #cf3c30; /* var(--jp-accent); */
/*  border-color: var(--jp-accent); */
    border:0;
  height: 44px;
  font-size: 13px;      /* 2026-09-16: jak na makiecie (bylo 11px / 700 / 2px) */
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 0;
color:#fff;
}

body#product .product-add-to-cart .add-to-cart.btn-primary:hover,
body#product .product-add-to-cart .add-to-cart.btn-primary:focus {
  background: #b8322a; /* var(--jp-accent-dark); */
/*   border-color: var(--jp-accent-dark); */
}

/* --- Zakładki produktu --- */
body#product #product-infos-tabs.nav-tabs {
  border-bottom: 1px solid var(--jp-border);
  margin-bottom: 24px;
}

body#product #product-infos-tabs .nav-link {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--jp-gray-light);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 20px;
}

body#product #product-infos-tabs .nav-link.active {
  color: var(--jp-text);
  border-bottom-color: var(--jp-accent);
  background: transparent;
}

/* GPSR (SEIGI) w zakładce „Szczegóły produktu” — od 2026-09-29 w stylu tabeli
   szczegółów (ClickUp 869czuuu9, uwaga Radka): bez beżowego tła i ramki bloku,
   tekst jak dl.data-sheet. Komórki >= 768 px w bloku „GPSR - TABELA” niżej,
   telefon w bloku „GPSR NA TELEFONIE” na końcu pliku. */
body#product .product-gpsr-embedded {
  margin-top: 24px;
  color: #1E1E1E;
}

body#product .product-gpsr-embedded h4 {
  font-family: Fraunces, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #1E1E1E;
  margin: 0 0 12px;
}

/* Białe tło komórek z Bootstrapa (--bs-table-bg) — zdjęte na każdej szerokości,
   bez beżowego bloku odcinałoby się od tła strony (telefon). */
body#product .product-gpsr-embedded table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  color: inherit;
}
body#product .product-gpsr-embedded th,
body#product .product-gpsr-embedded td {
  background: transparent;
  box-shadow: none;
  color: #1E1E1E;
}

/* GPSR - TABELA (>= 768 px): jak wiersze dl.data-sheet — bez siatki,
   kreska 1px rgba(160,160,160,.25) pod wierszem, nagłówki kolumn 700.
   overflow-wrap: przy 768-1199 px długie e-maile/ulice (np. #249) inaczej
   wypychały tabelę poza blok (925 px w 761 px). */
@media (min-width: 768px) {
  body#product .product-gpsr-embedded table {
    border: 0;
    margin: 0 0 16px;
  }
  body#product .product-gpsr-embedded tr {
    border-width: 0;
  }
  body#product .product-gpsr-embedded th,
  body#product .product-gpsr-embedded td {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: rgba(160, 160, 160, .25);
    padding: 8px 16px 8px 0;
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  body#product .product-gpsr-embedded th {
    font-weight: 700;
    padding-top: 0;
    vertical-align: bottom;
  }
  body#product .product-gpsr-embedded th:last-child,
  body#product .product-gpsr-embedded td:last-child {
    padding-right: 0;
  }
}

body#product .product-ingredients {
  font-size: 13px;
  color: var(--jp-gray);
  line-height: 1.8;
}

/* --- Karty "powiązane produkty" / "inne produkty w kategorii" na stronie produktu --- */
body#product .category-products .product-miniature,
body#product .crossselling-products .product-miniature {
  border: 1px solid var(--jp-border);
  transition: box-shadow .2s ease;
}

body#product .category-products .product-miniature:hover,
body#product .crossselling-products .product-miniature:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

body#product .category-products .thumbnail-container,
body#product .crossselling-products .thumbnail-container {
  border-bottom: /* s_poma 1px solid var(--jp-border) */ 0;
}

body#product .category-products .product-title,
body#product .crossselling-products .product-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--jp-text);
  line-height: 1.4;
}

body#product .category-products .product-price-and-shipping .product-price,
body#product .crossselling-products .product-price-and-shipping .product-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--jp-text);
}

/* --- Przyciski wariantów (Gramatura/Objętość, Opakowanie) — reorganizacja panelu 2026-07-15 --- */
body#product .product-variants-item ul#group_5,
body#product .product-variants-item ul#group_6 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body#product .product-variants-item ul#group_5 .input-container,
body#product .product-variants-item ul#group_6 .input-container {
  float: none;
}

body#product .product-variants-item ul#group_5 .radio-label,
body#product .product-variants-item ul#group_6 .radio-label {
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 40px;
  line-height: 38px;
  padding: 0 16px;
  margin-right: 0;
  border: 1px solid var(--jp-border);
  outline: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--jp-text);
  background: #fff;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

body#product .product-variants-item ul#group_5 .radio-label:hover,
body#product .product-variants-item ul#group_6 .radio-label:hover {
  border: 1px solid var(--jp-accent);
}
/*
body#product .product-variants-item ul#group_5 .input-radio:checked + .radio-label,
body#product .product-variants-item ul#group_6 .input-radio:checked + .radio-label {
  border: 1px solid var(--jp-accent);
  background: var(--jp-accent);
  color: #fff;
}
*/
/* --- Linia dopłaty za opakowanie — reorganizacja panelu 2026-07-15 --- */
body#product .product-packaging-surcharge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--jp-border);
  background: var(--jp-bg);
  font-size: 11px;
  color: var(--jp-gray);
  margin-bottom: 16px;
}

body#product .product-packaging-surcharge__icon {
  flex: 0 0 auto;
}

/* --- Przyciski +/- ilości oraz poszerzony przycisk koszyka — reorganizacja panelu 2026-07-15 --- */
/* 2026-09-11: uklad panelu zawezony do >= 576px. Markup to
   `col col-12 col-sm-auto`, wiec ponizej tej szerokosci Bootstrap ma zawinac
   obie kolumny jedna pod druga. `flex-wrap: nowrap` mu to uniemozliwial:
   kolumna z iloscia zajmowala cale 100% (col-12), a przycisk koszyka nie mial
   gdzie sie zawinac i ladowal 147 px poza ekranem - stad poziomy scroll na
   telefonie. Breakpoint 576px jest ten sam, ktorym posluguje sie markup.
   Kosmetyka touchspina nizej zostaje globalna - dziala na kazdej szerokosci. */
@media (min-width: 576px) {
  body#product .product-quantity {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 50px;
  }

  body#product .product-quantity .col-add-qty {
    flex: 0 0 auto;
  }

  body#product .product-quantity .col-add-btn {
    flex: 1 1 auto;
  }

  body#product .product-quantity .col-add-btn .add-to-cart.btn-primary {
    width: 65%;
  }
}

body#product .product-quantity .bootstrap-touchspin {
  display: flex;
  height: 44px;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}

body#product .product-quantity input#quantity_wanted {
  width: 50px;
}

body#product .product-quantity .bootstrap-touchspin-down,
body#product .product-quantity .bootstrap-touchspin-up {
  border: 1px solid var(--jp-border);
  background: #fff;
  color: var(--jp-text);
  width: 36px;
  font-size: 14px;
  font-weight: 700;
}

/* 2026-09-16: bez zmiany koloru ramki przy najechaniu (bylo border-color:
   var(--jp-accent)) - na zyczenie klienta; zmiana tla zostaje */
body#product .product-quantity .bootstrap-touchspin-down:hover,
body#product .product-quantity .bootstrap-touchspin-up:hover {
  background: var(--jp-bg);
}

/* 2026-09-16 - licznik ilosci z jedna wspolna ramka, jak na makiecie: bez
   pionowych kresek miedzy "-", liczba i "+". Kazdy z trzech elementow mial
   pelna ramke i nachodzily na siebie o 1 px, wiec trzeba zdjac zarowno
   wewnetrzne boki przyciskow, jak i boki pola z liczba. */
body#product .product-quantity .bootstrap-touchspin-down {
  border-right: 0;
}
body#product .product-quantity .bootstrap-touchspin-up {
  border-left: 0;
}
body#product .product-add-to-cart .product-quantity input#quantity_wanted {
  border-left: 0;
  border-right: 0;
}

/* 2026-09-16 - ikona koszyka (SVG w product-add-to-cart.tpl) z odstepem jak na makiecie */
.add-to-cart svg.bag-icon {
  margin-right: 10px;
  vertical-align: -3px;
}

.product_header_container {
    border-bottom:0;
    padding-bottom:0;
    margin-bottom:0;
}

#sp-range-badge-info {
    font-style: italic;
    font-size:9px;
    color:#a89a86;
}

.product_header_container .iqitreviews-rating {
    font-size:0.7rem;
}

.iqitreviews-nb {
    font-size:11px;
    color:#a89a86;
}
body#product .product-variants-item ul#group_5 .input-radio:checked + .radio-label,
body#product .product-variants-item ul#group_6 .input-radio:checked + .radio-label {
    background-color:#a63d400f;
    color:#B8860B;
}

.product_p_price_container  {
    border-top:0;
    padding-top:0;
}

.product-variants .form-control-label {
    padding-bottom:0;
    padding-top:0;
}

.product-variants>.product-variants-item ul li {
    margin-bottom:0;
}

#lowest-price {
    margin:0;
}

.cat-jh-desc-preview p,
.cat-jh-desc-preview h3, 
.cat-jh-desc-preview ul {
    background-color:transparent !important;
    color: #111 !important;
}

/* nowe zmiany od Anny 20 sierpien 2026 */
#desktop-header {
    background-color:#fff;
}

@media (min-width: 768px) {
    .elementor-column-gap-default .elementor-element-populated {
	padding-top:0 !important;
    }
}

#wrapper .breadcrumb {
    margin-top:0 !important;
}

.products-grid .product-miniature-default {
    border: 0 !important;
}

#footer-container-main {
    background-color:#000;
}

h1,h2,h3 {
    font-family: 'Fraunces', serif;
}

.cbp-has-submeu .cbp-submenu-aindicator {
    color:#aaa;
}

.products-grid .product-miniature-layout-2 .btn-product-list  {
    text-transform:none;
}

#index h2.elementor-heading-title.elementor-size-default {
    font-size:48px;
}

.products-grid .product-miniature-default .product-description {
    background-color: #fbf9f6;
}

#index .btn-product-list {
    background-color:#FBF9F6;
}

#index .btn-product-list:hover {
    color:#fff;
}

.products-grid .product-miniature-default div.product-title {
    color:#000;
    font-family: 'Inter', sans-serif;
}

.elementor-widget-prestashop-widget-ProductsList .swiper-button-prev {
    left:-20px;
}

@media (max-width: 700px) {
    .elementor-widget-prestashop-widget-ProductsList .swiper-button-prev {
	left:5px;
    }
}

.elementor-widget-prestashop-widget-ProductsList .swiper-button-next {
    right:-20px;
}

@media (max-width: 700px) {
    .elementor-widget-prestashop-widget-ProductsList .swiper-button-next {
	right:5px;
    }
}

/* ===== Sekcja "Wina, ktore smakuja Hiszpania" (elementor binq1qz) =========
   Uklad byl zbudowany w stalych pikselach przy szerokosci projektowej 1920 px,
   a kolumny sa procentowe. Ponizej 1920 px stale wartosci zjadaly ramke tekstu:
   przy 1366 px zostawalo 138 px, przy 1244 px juz 90 px, przy slowie
   "Hiszpania" szerokim na 281 px. Naglowek wylewal sie wtedy na zdjecie
   (z-index 2 nad 1) - przy 1366 px w calosci.

   Zmierzony wzorzec przy 1920 px, ktory te reguly odtwarzaja na kazdej
   szerokosci:  naglowek 602 px od lewej, ramka 281 px, zdjecie 534 px,
   nachodzenie tekstu na zdjecie ok. 50 px.

   Dwie rzeczy, ktore trzeba wiedziec przed edycja tych wartosci:

   1. .elementor-column-wrap jest elementem flex o szerokosci wynikajacej
      z TRESCI, nie z kolumny. Stad flex-shrink:0 i jawna szerokosc - bez nich
      flex sciska blok do szerokosci kolumny i nachodzenie znika calkowicie.
   2. Marginesy procentowe, takze pionowe, licza sie od szerokosci kontenera.
      Podstawa dla widgetow to szerokosc .elementor-column-wrap (683 px przy
      1920 px), a nie szerokosc kolumny (760 px).

   Zapas 18 px w ramce naglowka jest celowy: szerokosc slowa nie skaluje sie
   liniowo z rozmiarem fontu (hinting), wiec bez niego przy 1366 px zapas
   spada do zera. Zapas rozszerza ramke tylko w prawo, nie rusza tekstu.

   Akapit zostaje przy 13 px - tekst czytany nie moze sie zmniejszac razem
   z ukladem.

   Kopia i wycofanie: ~/work-range/26-09-09-sekcja-wina/                      */

@media (min-width: 768px) {

    /* margines 200 px / 760 px kolumny; szerokosc 683 px / 760 px kolumny */
    .elementor-element.elementor-element-anbq3v6 > .elementor-element-populated {
	margin-left:26.32% !important;
	width:89.9% !important;
	flex-shrink:0 !important;
    }

    /* naglowek: gora 84 px, lewa 402 px - obie / 683 px */
    #content .elementor-element.elementor-element-ip4jtw8 .elementor-widget-container {
	margin:12.30% 0 0 59.45%;
	width:calc(41.14% + 18px);
    }

    /* akapit: gora 20 px, lewa 412 px / 683 px */
    #content .elementor-element.elementor-element-tee3kjm .elementor-widget-container {
	margin:2.93% 0 0 60.32%;
    }

    /* przycisk: gora 20 px, lewa 300 px / 683 px */
    #content .elementor-element.elementor-element-u9dn15e .elementor-widget-container {
	margin:2.93% 0 0 43.92%;
    }

    /* 59 px / 1920 px, z ograniczeniem gornym na wartosci projektowej */
    #content .elementor-element.elementor-element-ip4jtw8 .elementor-heading-title {
	font-size:min(59px, 3.073vw);
    }

    /* zdjecie 534 px w swoim kontenerze przy 1920 px. Bez tego ponizej
       1485 px obrazek wypelnia cala kolumne i rosnie wzgledem reszty. */
    #content .elementor-element.elementor-element-dqoqyrx .elementor-image img {
	max-width:81.43%;
    }
}

/* ===== Karuzela logo producentow (elementor 3vf7clp) =====================
   Logotypy maja rozne wysokosci: format small_default to ramka 98x127 px,
   ale obrazki zachowuja proporcje, wiec czesc ma 98 px, a czesc 127 px.
   .swiper-wrapper jest flexem z align-items:normal, przez co nizsze logo
   wisialy przy gornej krawedzi rzedu zamiast stac w jego osi.

   Kropki i strzalki tej karuzeli NIE sa chowane tutaj - wylaczone sa
   ustawieniem navigation="none" w JSON-ie Elementora, wiec szablon
   (brands.tpl:64,68) w ogole ich nie wypisuje.

   Kopia i wycofanie: ~/work-range/26-09-09-karuzela-marek/                  */

#content .elementor-element-3vf7clp .elementor-brands-carousel .swiper-wrapper {
    align-items:center;
}

body#index {
    background-color: #FBF9F6 !important;
}

body#product #product-images-large.swiper-container {
    background-color:#fff !important;
}


/* 2026-09-16 - opcje wariantow jak na makiecie ("d - Produkt - v2"): bez
   czerwonego tla wybranej opcji. Niewybrane - delikatna szara ramka #DDD7D0,
   tekst #5A544E, 400; wybrana - ciemna ramka 1px + cien wewnetrzny (wyglada
   na 2px, a nie zmienia wymiarow), tekst #1A1A1A, 600. Bylo: czarne ramki
   wszystkim, wybrana #CF3C30 z bialym tekstem. */
body#product .product-variants-item ul#group_5 .radio-label, 
body#product .product-variants-item ul#group_6 .radio-label {
    border:1px solid #DDD7D0;
    background: transparent;
    color: #5A544E;
    font-weight: 400;
}

body#product .product-variants-item ul#group_5 .input-radio:checked + .radio-label,
body#product .product-variants-item ul#group_6 .input-radio:checked + .radio-label {
    background: transparent !important;
    color:#1A1A1A !important;
    border:1px solid #1A1A1A;
    box-shadow: inset 0 0 0 1px #1A1A1A;
    font-weight: 600;
}



.btn.btn-primary {
    text-transform:none !important;
}


.cbp-hrmenu .cbp-hrsub-inner a:hover {
    background-color: #e6e6e6;
    color:#111 !important;
}

#product .images-container .product-cover {
    border:0 !important;
}

#product .product-cover .expander  {
    background-color:#fff;
}

#product .product-cover .expander > span {
    background-color:#fff;
}

#search_filters .facet {
    margin-bottom:24px;
    border-bottom: 1px solid #e5e5e5;
}

#left-column .block.block-categories {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom:0.5rem;
}

#search_filters .facet h4,
#left-column h5.block-title {
    font-size:1rem;
    text-transform:none;
}

#search_filters .custom-checkbox input[type=checkbox]+span {
    width:20px;
    height:20px;
}



.products-grid .product-miniature-layout-2 .btn-product-list {
    background-color:#CF3C30 !important;
    color: #fff;
    border:0;
    font-weight:normal;
}

.products-grid .product-miniature-layout-2 .btn-product-list:hover {
    background-color:#B8322A !important;
}

.product-miniature-grid .product-price {
    font-size:1.2rem;
    font-weight:500;
}

body#category #left-column {
    padding-right:3rem;
}

.product-unavailable {
    background: #f2f2f2;
    color: #555;
    box-shadow: inset 0 0 0 1px #ddd;
}

/* 2026-09-16 - "W magazynie" poza karta produktu (szybki podglad, miniatury)
   bralo pelna zielen #67a675 z edytora motywu; blade jak na karcie produktu. */
.badge.product-available {
    background: #E4F0DE;
    color: #3A6B2C;
    box-shadow: inset 0 0 0 1px #C3DDBA;
}

/* ===== Naglowek sekcji Instagrama na mobile (elementor tr7kggr) ============
   Rozmiaru tego naglowka NIE da sie zmienic w Elementorze. Regula
   "#index h2.elementor-heading-title.elementor-size-default" (linia ~1181)
   daje 48 px wszystkim naglowkom h2 strony glownej i bije ustawienie
   typografii widgetu specyficznoscia: (1,2,1) wobec (0,3,0).
   Wersaliki i tracking 3.5 px ida juz normalnie z Elementora - 10.09.2026
   wersaliki zdjeto, tresc brzmi "Na Instagramie".

   Napis ma zostac w JEDNEJ linii na kazdym telefonie. Zmierzona szerokosc
   tekstu to fs * 7.78 px + 45.5 px (tracking nie skaluje sie z czcionka:
   3.5 px razy 13 odstepow). Z marginesem 12 px na strone daje to
   fs = 12.85vw - 8.9px, obcieta z gory na 48 px, czyli na rozmiar
   siostrzanych naglowkow - od okolo 443 px szerokosci okna napis osiaga
   ten sam rozmiar co "Bestsellery" obok.

   Kontrola pomiarem: 320 px okna -> 32 px czcionki i 296 px napisu;
   360 -> 37 px i 336 px; 390 -> 41 px i 366 px; 430 -> 46 px i 406 px.

   UWAGA: EN i ES maja w tym widgecie inna tresc ("@jamon4you") i nadal
   wersaliki, wiec tam napis jest wezszy i regula tylko go nie przeszkadza.

   Kopia i wycofanie: ~/work-range/26-09-10-naglowek-instagram/             */

@media (max-width: 767px) {
    #index .elementor-element-tr7kggr h2.elementor-heading-title.elementor-size-default {
        font-size: clamp(24px, calc(12.85vw - 8.9px), 48px);
        white-space: nowrap;
    }
}


/* ===== Pasek logo marek: symetryczny padding (elementor cl80i5s) ==========
   Kolumna ma 15 px paddingu z dolu i 0 z gory. To NIE jest ustawienie
   z Elementora - tam paddingi sekcji, kolumny i widgetu sa puste. Elementor
   daje kolumnom padding: 15px powyzej 768 px, a blok "nowe zmiany od Anny
   20 sierpien 2026" (linia ~1151) zeruje gorny padding GLOBALNIE:

       @media (min-width: 768px) {
           .elementor-column-gap-default .elementor-element-populated {
               padding-top: 0 !important;
           }
       }

   Tamtej reguly nie ruszam, bo dotyczy kazdej kolumny na stronie. Tutaj
   przywracam 15 px tylko tej jednej kolumnie. Potrzebny jest !important,
   bo inaczej nie da sie pobic tamtej deklaracji; specyficznosc (1,3,0)
   wobec (0,2,0) rozstrzyga, ktora z dwoch waznych reguł wygrywa.          */

@media (min-width: 768px) {
    #content .elementor-element.elementor-element-cl80i5s > .elementor-element-populated {
        padding-top: 15px !important;
    }
}


/* ===== Odstep miedzy logotypami marek na mobile (elementor 3vf7clp) =======
   Przy 384 px karuzela pokazuje szesc logotypow (slides_to_show_s_mobile),
   wiec na slajd wypada 64 px, a spaceBetween jest zerowe i obrazek wypelnia
   slajd co do piksela - logotypy stykaja sie krawedziami.

   Odstep robimy paddingiem na slajdzie, nie zmiana spaceBetween: to drugie
   siedzi w JS-ie modulu i wymagaloby przeliczania szerokosci slajdow.
   Padding 6 px na strone daje 12 px swiatla miedzy sasiednimi logotypami,
   kosztem 12 px szerokosci samego logo (64 -> 52 px). Obrazki maja img-fluid,
   wiec skaluja sie proporcjonalnie same.

   Tylko ponizej 768 px - na tablecie i desktopie slajdy sa szersze
   i logotypy maja swoje swiatlo.

   Kopia i wycofanie: ~/work-range/26-09-10-pasek-marek/                     */

@media (max-width: 767px) {
    #content .elementor-element-3vf7clp .elementor-brands-carousel .swiper-slide {
        padding-left: 6px;
        padding-right: 6px;
    }
}


/* ===== Kafelki kategorii na mobile: rozmiar (elementor iojrhgb) ===========
   Karuzela pokazuje jeden kafelek na ekran, wiec przy 384 px kafelek zajmowal
   cala szerokosc kolumny (366 px) i 269-307 px wysokosci - klient uznal, ze
   za duzo. Slajd musi zostac pelnej szerokosci, bo na nim opiera sie geometria
   Swipera; zmniejszamy sam kafelek wewnatrz slajdu.

   80% daje kafelek okolo 293 px szeroki i, przy proporcji zdjecia, okolo
   215 px wysoki. Zostawia to po ~36 px marginesu z kazdej strony, czyli
   dokladnie tyle, ile potrzebuja strzalki (36x54) - stad nie zaslaniaja
   zdjecia, w odroznieniu od karuzel produktowych, gdzie leza na kafelku.

   Kopia i wycofanie: ~/work-range/26-09-10-karuzele-mobile/                 */

@media (max-width: 767px) {
    .elementor-element-iojrhgb .elementor-image-box-wrapper {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Przelacznik formatu listy produktow (kafelki / lista) ukryty na zyczenie
   klienta, 2026-09-11. Znaczniki ZOSTAJA w kodzie - renderuje je
   themes/warehouse/templates/catalog/_partials/products-top.tpl (trzy warianty
   tego samego bloku), wlaczany przez wspolny product-list.tpl. Dlatego regula
   dotyczy wszystkich listingow, na ktorych ten przelacznik wystepuje:
   kategoria, wyniki szukania i strona producenta.
   Ukrywany jest CALY div .col.view-switcher, nie same odnosniki - to kolumna
   Bootstrapa, wiec pusta nadal zabieralaby czesc szerokosci wiersza.
   Wycofanie: ~/work-range/26-09-11-ukrycie-view-switcher/ */
.view-switcher {
    display: none;
}

/* 2026-09-14 - opisy produktow skopiowane z produkcji niosa wklejki z innych
   sklepow ze sztywna szerokoscia w atrybucie style, np. <div class="basic_info"
   style="width:652.5px"> z domwina.pl (#830, #956, #1127, #1284). Na telefonie
   dawalo to 272 px przewijania w poziomie. max-width bije width z atrybutu style
   bez !important, a na desktopie kontener jest szerszy, wiec tam nic sie nie zmienia.
   Zawezone do opisu w zakladce i krotkiego opisu na karcie produktu - miniatury
   na listach tez maja klase .product-description, ale nie te kontenery.
   Wycofanie: ~/work-range/26-09-14-opisy-z-proda/README.txt */
#description .rte-content *,
[id^="product-description-short-"] * {
    max-width: 100%;
}

/* 2026-09-16 - kroj i rozmiar tekstu w opisach produktu. Opisy z produkcji
   (a w nich wklejki z innych sklepow) maja w atrybucie style wlasny kroj
   (32 rodziny: Open Sans, Verdana, Arial, Calibri, Montserrat...), rozmiar
   (od 8.5pt do 18px) i miejscami sztywna interlinie (12.1267px) - 204 z 837
   aktywnych produktow. Styl w atrybucie bije motyw, stad np. Arial na #711.
   Tekst: Inter 16 px jak reszta sklepu. Reguly lapia WYLACZNIE elementy
   z wpisanym stylem, wiec to, czego nikt nie nadpisal, nadal bierze z motywu.
   Interlinia idzie razem z rozmiarem - 12px interlinii przy 16px tekstu
   zbiloby wiersze na siebie.
   Naglowki h1-h6: Fraunces, rozmiar wzgledem tekstu (1.25 / 1.125 / 1em),
   czyli 20/18/16 px - ponizej tytulu produktu (22 px). Bez tego motyw dalby
   im 40/32/28 px, a h4-h6 zostalyby w Inter.
   :not(h1..h6) w regulach tekstu jest konieczne: selektor atrybutowy ma
   specyficznosc (1,2,1) i bez wykluczenia h4 z wpisanym Open Sans dostalby
   kroj tekstu zamiast Fraunces. Spany wewnatrz naglowka dziedzicza po nim.
   Kontenery te same co w regule max-width wyzej.
   Wycofanie: ~/work-range/26-09-16-opisy-kroj/README.txt */
#description .rte-content [style*="font-family" i]:not(h1, h2, h3, h4, h5, h6),
[id^="product-description-short-"] [style*="font-family" i]:not(h1, h2, h3, h4, h5, h6) {
    font-family: inherit !important;
}
#description .rte-content [style*="font-size" i]:not(h1, h2, h3, h4, h5, h6),
[id^="product-description-short-"] [style*="font-size" i]:not(h1, h2, h3, h4, h5, h6) {
    font-size: inherit !important;
}
#description .rte-content [style*="line-height" i]:not(h1, h2, h3, h4, h5, h6),
[id^="product-description-short-"] [style*="line-height" i]:not(h1, h2, h3, h4, h5, h6) {
    line-height: inherit !important;
}
#description .rte-content :is(h1, h2, h3, h4, h5, h6),
[id^="product-description-short-"] :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Fraunces', serif !important;
    font-size: 1em !important;
    line-height: 1.2 !important;
}
#description .rte-content :is(h1, h2),
[id^="product-description-short-"] :is(h1, h2) {
    font-size: 1.25em !important;
}
#description .rte-content h3,
[id^="product-description-short-"] h3 {
    font-size: 1.125em !important;
}

/* 2026-09-16 (2) - krotki opis pod nazwa produktu byl za duzy i za gruby.
   Rozmiar 14 px jak na makiecie (d - Produkt - v2), tylko od 768 px - na
   telefonie zostaje baza 12 px z edytora motywu, jak reszta tekstu. Elementy
   z wpisanym font-size dziedzicza ten rozmiar przez regule wyzej.
   Grubosc 400 dla calosci, lacznie z <strong>/<b> i font-weight wpisanym
   w tresc (pogrubienie mialo 199 z 671 krotkich opisow) - decyzja klienta,
   swiadomie wbrew makiecie (600).
   Wycofanie: ~/work-range/26-09-16-opisy-kroj/README.txt */
@media (min-width: 768px) {
    [id^="product-description-short-"] {
        font-size: 14px;
    }
}
[id^="product-description-short-"],
[id^="product-description-short-"] * {
    font-weight: 400 !important;
}

/* 2026-09-16 - naglowki sekcji pod karta produktu ("Zobacz takze",
   "N innych produktow w tej samej kategorii:", "Klienci, ktorzy zakupili...")
   szeryfowe jak naglowki strony glownej. Wyglad (3rem, bold, kreska pod
   spodem) daje im edytor motywu regula "#content-wrapper .section-title",
   ktora nie ma pola kroju - stad krój szedl z body (Inter). Zmieniony
   WYLACZNIE krój; rozmiar, grubosc 700 i kreska bez zmian, czyli jak
   "Kim jestesmy?" na glownej (naglowki karuzel na glownej maja 800-900
   i rozstrzelenie 3.5px - swiadomie nie przeniesione).
   Zawezone do karty produktu i koszyka (ten sam naglowek "Klienci, ktorzy
   zakupili..." z iqitcrossselling): .section-title maja tez blog i wyszukiwarka.
   Na telefonie 28 px zamiast 3rem (36 px przy bazie 12 px): Fraunces jest
   szerszy od Inter i przy 390 px "Klienci, ktorzy zakupili..." lamal sie
   w 4 linie; przy 28 px - 3 (na karcie i w koszyku), "N innych produktow..." - 2.
   Od 768 px rozmiar z edytora motywu bez zmian.
   Wycofanie: ~/work-range/26-09-16-naglowki-sekcji-produktu/README.txt */
body#product #content-wrapper .section-title,
body#cart #content-wrapper .section-title {
    font-family: 'Fraunces', serif;
}
@media (max-width: 767px) {
    body#product #content-wrapper .section-title,
    body#cart #content-wrapper .section-title {
        font-size: 28px;
    }
}

/* 2026-09-16 - marka, indeks, stan i EAN13 jako pierwsze wiersze tabeli
   w zakladce "Szczegoly produktu" (templates/catalog/_partials/product-details.tpl),
   jak na makiecie "d - Produkt - v2". Logo marki w polu 130x44 px - pliki
   w img/m/ maja rozne proporcje (#4 Mergaoliva 400x105, wiele kwadratow),
   max-width/max-height przy width/height auto zachowuja proporcje. Motyw daje
   ".product-manufacturer img { max-width: 200px }". Wiersz marki wysrodkowany
   w pionie, bo logo jest wyzsze niz etykieta.
   Wycofanie: ~/work-range/26-09-16-szczegoly-w-tabeli/README.txt */
.product-features > dl.data-sheet dd.product-manufacturer img {
    display: block;
    width: auto;
    height: auto;
    max-width: 130px;
    max-height: 44px;
}
.product-features > dl.data-sheet dt.product-manufacturer-name,
.product-features > dl.data-sheet dd.product-manufacturer {
    display: flex;
    align-items: center;
}

/* 2026-09-16 - link "Mam kod promocyjny" nad przyciskiem przejscia do zamowienia
   (koszyk) i w podsumowaniu checkoutu; pole kodu i lista ofert rozwijaja sie
   po kliknieciu (Bootstrap collapse w templates/checkout/_partials/cart-voucher.tpl).
   Wciecie 16 px = wciecie tresci karty podsumowania.
   Wycofanie: ~/work-range/26-09-16-kod-promocyjny/README.txt */
.block-promo .promo-code-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 16px;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* kolor przez :link/:visited - edytor motywu daje wszystkim linkom
   "a:link:not(.nav-link):not(.btn)" (0,3,1), ktora bije zwykla klase */
.block-promo a.promo-code-toggle:link,
.block-promo a.promo-code-toggle:visited {
    color: #4A443F;
}
.block-promo a.promo-code-toggle:hover,
.block-promo a.promo-code-toggle:focus {
    color: #1A1A1A;
}
.block-promo .promo-code-toggle__icon {
    flex: 0 0 auto;
}

/* ===========================================================================
   2026-09-16 - STRONA LOGOWANIA wg makiety projects/jamon/26-09-16-logowanie
   (eksport "d - Logowanie.dc.html"; wartosci z eksportu). Znaczniki:
   templates/customer/authentication.tpl (naglowek, dwie karty) i wariant
   jamon_karta w templates/customer/_partials/login-form.tpl.
   ZAKRES: kazda regula ma #authentication ORAZ wlasna klase jamon-log-*
   (albo #content.page-content) - #authentication to klasa <body>, wiec ogolne
   selektory zlapalyby newsletter w stopce i szukajke w naglowku.
   Kroje sklepu (Inter/Fraunces), czerwien z makiety #DD3B2D / hover #B02A1F.
   Wycofanie: ~/work-range/26-09-16-logowanie/README.txt
   =========================================================================== */
#authentication #content.page-content {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
#authentication .jamon-log-naglowek {
    margin-bottom: 30px;
}
#authentication .jamon-log-nadtytul {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #DD3B2D;
}
#authentication .jamon-log-naglowek .page-header {
    margin: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #1A1A1A;
}
/* .page-title motywu to flex z rosnacym ::after (pulapka z exclusivetime) */
#authentication .jamon-log-naglowek .page-title {
    display: block;
    margin: 0;
    /* edytor motywu daje tytulom stron wlasna kreske (1px #333, padding 19px);
       kreske z makiety rysuje .page-header wyzej - bez tego byly dwie */
    padding-bottom: 0;
    border-bottom: 0;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    text-align: left;
}
#authentication .jamon-log-naglowek .page-title::after {
    content: none;
}
#authentication .jamon-log-naglowek .page-title > span {
    margin-right: 0;
}
#authentication .jamon-log-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    align-items: start;
    padding-bottom: 70px;
}
#authentication .jamon-log-karta {
    margin: 0;
    padding: 28px;
    border: 1px solid #E5E0DA;
    background: #fff;
}
#authentication .jamon-log-karta--rejestracja {
    background: #FAF8F5;
}
#authentication .jamon-log-karta__tytul {
    margin: 0 0 6px;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
}
#authentication .jamon-log-karta__lead {
    margin: 0 0 24px;
    font-size: 14px;
    color: #5A544E;
}
#authentication .jamon-log-karta--rejestracja .jamon-log-karta__lead {
    margin-bottom: 22px;
}
#authentication .jamon-log-pole {
    margin-bottom: 20px;
}
#authentication .jamon-log-pole--haslo {
    margin-bottom: 22px;
}
#authentication .jamon-log-etykieta {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
}
#authentication .jamon-log-wiersz-etykiety {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
}
#authentication .jamon-log-wiersz-etykiety .jamon-log-etykieta {
    margin-bottom: 0;
}
/* kolor przez :link/:visited - edytor motywu daje linkom #000 selektorem (0,3,1) */
#authentication .jamon-log-karta a.jamon-log-zapomniane:link,
#authentication .jamon-log-karta a.jamon-log-zapomniane:visited {
    font-size: 13px;
    color: #DD3B2D;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#authentication .jamon-log-karta a.jamon-log-zapomniane:hover,
#authentication .jamon-log-karta a.jamon-log-zapomniane:focus {
    color: #B02A1F;
}
#authentication .jamon-log-form .form-control {
    height: auto;
    padding: 13px 14px;
    border: 1px solid #4A443F;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    font-size: 14px;
}
#authentication .jamon-log-form .form-control::placeholder {
    color: #8C8681;
    opacity: 1;
}
#authentication .jamon-log-form .input-group .form-control {
    border-right: 0;
}
#authentication .jamon-log-form .input-group-append .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 100%;
    border: 1px solid #4A443F;
    border-radius: 0;
    background: #fff;
    color: #4A443F;
}
#authentication .jamon-log-form .form-control-submit.jamon-log-btn {
    display: block;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 0;
    background: #DD3B2D;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
}
#authentication .jamon-log-form .form-control-submit.jamon-log-btn:hover,
#authentication .jamon-log-form .form-control-submit.jamon-log-btn:focus {
    background: #B02A1F;
    color: #fff;
}
#authentication .jamon-log-szyfrowanie {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    font-size: 12.5px;
    color: #5A544E;
}
#authentication .jamon-log-szyfrowanie svg {
    flex: 0 0 auto;
}
#authentication .jamon-log-korzysci {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
#authentication .jamon-log-korzysci li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 14px;
    color: #1A1A1A;
}
#authentication .jamon-log-korzysci svg {
    flex: 0 0 auto;
    margin-top: 4px;
    color: #DD3B2D;
}
#authentication .jamon-log-karta a.jamon-log-btn--rejestracja:link,
#authentication .jamon-log-karta a.jamon-log-btn--rejestracja:visited {
    display: block;
    padding: 15px;
    border: 1px solid #1A1A1A;
    background: #fff;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
#authentication .jamon-log-karta a.jamon-log-btn--rejestracja:hover,
#authentication .jamon-log-karta a.jamon-log-btn--rejestracja:focus {
    background: #1A1A1A;
    color: #fff;
}
/* Telefon: makieta jest tylko desktopowa; naglowek 28 px jak naglowki sekcji na karcie
   produktu (przy 38 px "Zaloguj sie lub zaloz konto" zajmowal trzy linie). */
@media (max-width: 767px) {
    #authentication .jamon-log-naglowek .page-title {
        font-size: 28px;
    }
}

/* ===========================================================================
   STRONA KONTAKTU NA TELEFONIE (16.09.2026)
   Wg wizualizacji 26-09-16-mobile-kontakt/wizualizacja.png - render makiety
   "m - Kontakt.dc.html" (wartosci z eksportu), bez zalacznika i z tematem
   jako polem tekstowym. Tylko ponizej 768 px; desktop bez zmian.
   Karty: iqitcontactpage, _partials/content.tpl (ma wlasny <style> z
   #contact .accordion-*; rozwijanie i pierwsza karta otwarta - custom.js).
   Formularz: modules/contactform/.../contactform.tpl.
   ZAKRES: karty tylko w #content .contact-page-info - ten sam szablon kart
   renderuje stopka (#footer-container-main .block-iqitcontactpage).
   Kroje sklepu (Inter), czerwien z makiety #DD3B2D / hover #B02A1F.
   Wycofanie: ~/work-range/26-09-16-mobile-kontakt/README.txt
   =========================================================================== */
@media (max-width: 767px) {
    /* Jedna kolumna takze w przedziale 576-767 px (col-sm-4 / col-sm-8). */
    #contact #content .contact-page-info,
    #contact #content .contact-page-info + .col-sm-8 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    #contact #content .contact-page-info {
        margin-bottom: 26px;
        border-right: 0;
        border-bottom: 0;
    }

    /* Karty-akordeon */
    #contact #content .contact-page-info .accordion-item {
        margin: 0 0 12px;
        border: 1px solid #E5E0DA;
        border-radius: 0;
        background: #fff;
    }
    #contact #content .contact-page-info .accordion-item:last-child {
        margin-bottom: 0;
    }
    #contact #content .contact-page-info .accordion-header,
    #contact #content .contact-page-info .accordion-header:hover {
        gap: 14px;
        margin: 0;
        padding: 16px 18px;
        border: 0;
        background: #fff;
        font-size: 14px;
        line-height: 1.6;
        color: #1A1A1A;
    }
    #contact #content .contact-page-info .accordion-header.active,
    #contact #content .contact-page-info .accordion-header.active:hover {
        border-bottom: 1px solid #E5E0DA;
        background: #FAF8F5;
    }
    #contact #content .contact-page-info .accordion-header .arrow {
        flex: 0 0 auto;
        font-size: 11px;
        line-height: 1;
        color: #4A443F;
    }
    #contact #content .contact-page-info .accordion-body {
        margin: 0;
        padding: 0;
        border: 0;
    }
    #contact #content .contact-page-info .contact-rich {
        padding: 0;
        font-size: 13.5px;
        line-height: 1.6;
        color: #1A1A1A;
    }
    #contact #content .contact-page-info .contact-rich .part {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
    }
    #contact #content .contact-page-info .contact-rich .part:first-of-type {
        align-items: flex-start;
    }
    #contact #content .contact-page-info .contact-rich .part .icon {
        flex: 0 0 20px;
        width: 20px;
        text-align: center;
    }
    #contact #content .contact-page-info .contact-rich .part .icon i {
        display: block;
        font-size: 20px;
        line-height: 21px;
        color: #1A1A1A;
    }
    #contact #content .contact-page-info .contact-rich .part .data {
        font-size: 13.5px;
        line-height: 1.6;
    }
    #contact #content .contact-page-info .contact-rich .part .data a:link,
    #contact #content .contact-page-info .contact-rich .part .data a:visited {
        color: #1A1A1A;
    }
    #contact #content .contact-page-info .contact-rich hr {
        height: 0;
        margin: 0;
        border: 0;
        border-top: 1px solid #E5E0DA;
        opacity: 1;
    }

    /* Formularz */
    #contact section.contact-form h4 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
        color: #1A1A1A;
    }
    #contact section.contact-form .form-group {
        margin-bottom: 18px;
    }
    /* Ostatnia grupa to pusty hook zgody RODO; za nia stoi ukryty input captchy,
       wiec :last-of-type, nie :last-child. 18 + 6 = 24 px nad przyciskiem. */
    #contact section.contact-form .form-fields div.form-group:last-of-type {
        margin-bottom: 6px;
    }
    #contact section.contact-form .form-control-label {
        margin: 0 0 6px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 12.5px;
        line-height: 1.6;
        color: #1A1A1A;
    }
    #contact section.contact-form .form-control-comment {
        display: none;
    }
    #contact section.contact-form .form-control {
        height: auto;
        padding: 12px;
        border: 1px solid #BFB9B1;
        border-radius: 0;
        background-color: #fff;
        box-shadow: none;
        font-size: 13.5px;
        line-height: 1.2;
        color: #1A1A1A;
    }
    #contact section.contact-form .form-control:focus {
        border-color: #8a8a8a;
    }
    #contact section.contact-form .form-control::placeholder {
        color: #757575;
        opacity: 1;
    }
    #contact section.contact-form .form-control-select {
        padding-right: 36px;
    }
    #contact section.contact-form textarea.form-control {
        min-height: 90px;
    }
    #contact section.contact-form .form-footer .btn-primary {
        padding: 11px 30px;
        border: 0;
        border-radius: 0;
        background: #DD3B2D;
        color: #fff;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.2;
    }
    #contact section.contact-form .form-footer .btn-primary:hover,
    #contact section.contact-form .form-footer .btn-primary:focus {
        background: #B02A1F;
        color: #fff;
    }
}

/* ===========================================================================
   STRONA „O NAS” BEZ PRZEWIJANIA W POZIOMIE (16.09.2026)
   Tresc CMS 4 (tylko PL) to tabela .sp-aboutus-table z wpisanym
   style="width: 1094px; height: 454px" - ponizej 1200 px wystawala poza
   strone (telefon 390 px: przewijanie do 1103 px; tablet 768/1024: do 1106 px).
   Ponizej 1200 px tabela na szerokosc tresci, na telefonie kolumny jedna pod
   druga. Od 1200 px bez zmian. Tresc w bazie nieruszana.
   Wycofanie: ~/work-range/26-09-16-o-nas-przewijanie/README.txt
   =========================================================================== */
@media (max-width: 1199px) {
    #cms .sp-aboutus-table {
        width: 100% !important;
        height: auto !important;
    }
}
@media (max-width: 767px) {
    #cms .sp-aboutus-table,
    #cms .sp-aboutus-table tbody,
    #cms .sp-aboutus-table tr,
    #cms .sp-aboutus-table td {
        display: block;
        width: 100% !important;
    }
}

/* ===========================================================================
   PRZYKLEJONY PASEK NA TELEFONIE - BIALE TLO (16.09.2026)
   Od 16.09.2026 rm_sticky=up (edytor motywu): #mobile-header-sticky wraca przy
   przewijaniu w gore jako position:fixed, ale motyw nie daje mu tla - tresc
   strony przeswitywala przez pasek. Biale tlo tylko w stanie "pokazany po
   przewinieciu" (klasa visible-stuck-up-scroll, takze w animacji chowania);
   na samej gorze strony pasek bez zmian (tlo strony #FBF9F6).
   Wycofanie: ~/work-range/26-09-16-mobile-sticky-tlo/README.txt
   =========================================================================== */
#mobile-header-sticky.stuck-up.visible-stuck-up-scroll {
    background-color: #fff;
}

/* ===========================================================================
   KARTA PRODUKTU NA TELEFONIE - PANEL ZAKUPU (17.09.2026)
   Makieta: projects/jamon/26-09-17-mobile-produkt ("m - Produkt - v2" i
   "m - Produkt - v2 - niedostepny"). Tylko ponizej 768 px i tylko w
   #col-product-info - glowna karta produktu; szybki podglad (ladowany do tej
   samej strony z karuzel) tego id nie ma. Specyficznosc (2,x,1) bije reguly
   body#product wyzej bez !important; !important tylko tam, gdzie ma je
   regula bazowa (kolor ceny, pt-3, mb-3, mr-2/mb-2).
   Znaczniki z product-add-to-cart.tpl: div.add.jamon-brak-stanu (quantity <= 0
   i bez zamawiania bez stanu) oraz p.jamon-wysylka - oba w div.add, bo po
   zmianie wariantu core.js podmienia w bloku zakupu tylko .add,
   #product-availability i .product-minimal-quantity.
   Wycofanie: ~/work-range/26-09-17-mobile-produkt/README.txt
   =========================================================================== */
.jamon-wysylka {
    display: none;
}

@media (max-width: 767px) {
    /* --- marka, tytul, ocena --- */
    body#product #col-product-info .product-manufacturer {
        margin-bottom: 6px;
    }
    body#product #col-product-info .product-manufacturer a {
        color: #8C8681;
    }
    body#product #col-product-info .h1.page-title {
        margin-bottom: 8px;
        font-size: 21px;
        line-height: 1.15;
    }
    body#product #col-product-info #iqitreviews-rating-product {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }
    body#product #col-product-info .iqitreviews-rating {
        font-size: 13px;
        letter-spacing: .06em;
    }
    body#product #col-product-info .iqitreviews-rating .iqit-review-star {
        color: #C9A227;
    }
    body#product #col-product-info .iqitreviews-rating .iqit-review-star.fa-star-o {
        color: #D6D0C9;
    }
    /* pusta gwiazdka pelna w jasnym kolorze, jak na makiecie (FontAwesome 4: fa-star) */
    body#product #col-product-info .iqitreviews-rating .iqit-review-star.fa-star-o::before {
        content: "\f005";
    }
    body#product #col-product-info .iqitreviews-nb {
        font-size: 11.5px;
        color: #5A544E;
    }

    /* --- etykiety cech przed krotkim opisem, z napisem (regula <= 480 px chowa napis) --- */
    body#product #col-product-info .product-information {
        display: flex;
        flex-direction: column;
    }
    body#product #col-product-info .product-information > .product-feature-badges-inline {
        order: -1;
        margin: 0 0 12px;
    }
    body#product #col-product-info .product-feature-badges-inline .feature-badge {
        gap: 7px;
        padding: 5px 10px;
        border-radius: 0;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.4;
    }
    body#product #col-product-info .product-feature-badges-inline .feature-badge svg {
        width: 12px;
        height: 12px;
    }
    body#product #col-product-info .product-feature-badges-inline .feature-badge__label {
        display: inline;
        font-size: inherit;
        letter-spacing: normal;
    }
    body#product #col-product-info #sp-range-badge-info {
        display: none;
    }

    /* --- krotki opis (style wpisane w tresc zostaja) --- */
    body#product #col-product-info [id^="product-description-short-"] {
        margin-bottom: 18px;
        font-size: 13px;
        line-height: 1.55;
        color: #2E2A26;
    }
    body#product #col-product-info [id^="product-description-short-"] p {
        margin-bottom: 6px;
    }
    body#product #col-product-info [id^="product-description-short-"] p:last-of-type {
        margin-bottom: 0;
    }

    /* --- warianty --- */
    body#product #col-product-info .product-variants > .product-variants-item {
        margin: 0 0 16px;
    }
    body#product #col-product-info .product-variants > .product-variants-item:last-child {
        margin-bottom: 18px;
    }
    body#product #col-product-info .product-variants-item .form-control-label {
        margin-bottom: 8px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .1em;
        color: #4A443F;
    }
    body#product #col-product-info .product-variants-item ul#group_5 .radio-label,
    body#product #col-product-info .product-variants-item ul#group_6 .radio-label {
        min-height: 44px;
        padding: 0 18px;
        font-size: 12.5px;
        line-height: 42px;
    }
    /* 2026-09-17 fix: theme.css doklada li margin-right: .5rem (6px) obok naszego
       gap: 8px na ul - dawalo 14px miedzy opcjami, spec wymaga 8px */
    body#product #col-product-info .product-variants-item ul#group_5 > li,
    body#product #col-product-info .product-variants-item ul#group_6 > li {
        margin-right: 0;
    }
    body#product #col-product-info .product_p_price_container {
        margin-top: 0;
        padding-bottom: 0;
    }

    /* --- dostepnosc i cena: grid, "brutto" (tekst bez znacznika) w linii ceny --- */
    body#product #col-product-info .product-prices {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 8px;
        align-items: baseline;
    }
    body#product #col-product-info .product-prices > *,
    body#product #col-product-info .product-prices > .tax-shipping-delivery-label > * {
        grid-column: 1 / -1;
    }
    body#product #col-product-info .product-prices > div:has(.current-price) {
        grid-column: 1;
    }
    body#product #col-product-info .product-prices > .tax-shipping-delivery-label {
        display: contents;
        font-size: 12px;
        color: #5A544E;
        text-transform: lowercase;
    }
    body#product #col-product-info .product-prices #product-availability.badge {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 14px;
        padding: 6px 11px;
        border-radius: 0;
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.4;
    }
    body#product #col-product-info .product-prices #product-availability.badge i.fa {
        font-size: 11px;
    }
    body#product #col-product-info .product-prices #product-availability.product-unavailable {
        background-color: #F3F1ED;
        color: #5A544E;
        box-shadow: inset 0 0 0 1px #DDD7D0;
    }
    body#product #col-product-info .product-prices #product-availability.product-unavailable i.fa {
        display: none;
    }
    body#product #col-product-info .product-prices .current-price .product-price {
        font-size: 26px;
        font-weight: 700;
        line-height: 1.2;
    }
    body#product #col-product-info .product-actions:has(.jamon-brak-stanu) .current-price .product-price {
        color: #5A544E !important;
    }
    body#product #col-product-info #lowest-price {
        margin: 2px 0 18px;
        font-size: 11px;
        color: #5A544E;
        text-transform: none;
    }

    /* --- licznik i przycisk; przy braku stanu caly wiersz znika --- */
    body#product #col-product-info .product-add-to-cart {
        padding-top: 0 !important;
    }
    body#product #col-product-info .product-quantity:has(.jamon-brak-stanu) {
        display: none;
    }
    /* 576-767 px: regula z 11.09 (min-width: 576px) stawia licznik i przycisk obok siebie */
    body#product #col-product-info .product-quantity {
        flex-wrap: wrap;
        gap: 0;
    }
    body#product #col-product-info .product-quantity > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    body#product #col-product-info .product-quantity .col-add-qty {
        margin-bottom: 14px;
    }
    body#product #col-product-info .product-quantity .col-add-btn,
    body#product #col-product-info .product-minimal-quantity {
        margin-bottom: 0;
    }
    body#product #col-product-info .product-discounts {
        margin-bottom: 0 !important;
    }
    body#product #col-product-info .product-quantity .bootstrap-touchspin {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 118px;
        height: 44px;
        border: 1px solid #DDD7D0;
    }
    body#product #col-product-info .product-quantity .bootstrap-touchspin .input-group-btn {
        height: 42px;
    }
    body#product #col-product-info .product-quantity .bootstrap-touchspin-down,
    body#product #col-product-info .product-quantity .bootstrap-touchspin-up {
        width: 38px;
        height: 42px;
        padding: 0;
        border: 0;
        font-size: 16px;
        font-weight: 400;
        color: #4A443F;
    }
    body#product #col-product-info .product-add-to-cart .product-quantity input#quantity_wanted {
        flex: 1 1 auto;
        width: 40px;
        height: 42px;
        border: 0;
        font-size: 14px;
    }
    body#product #col-product-info .product-add-to-cart .add-to-cart.btn-primary {
        width: 100%;
        height: auto;
        padding: 15px;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: .06em;
    }

    /* --- linia wysylki (znacznik tylko przy produkcie na stanie) --- */
    /* 2026-09-17 fix: znacznik ma teraz style="display:none", zeby stary
       zacache'owany custom.css (max-age 7 dni, bez wersji w URL) nie pokazal
       linii bez stylu na desktopie/podgladzie; !important znosi ten inline
       styl tutaj, na telefonie */
    body#product #col-product-info .jamon-wysylka {
        display: flex !important;
        align-items: flex-start;
        gap: 9px;
        margin: 14px 0 0;
        font-size: 11.5px;
        line-height: 1.5;
        color: #5A544E;
    }
    body#product #col-product-info .jamon-wysylka svg {
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
        margin-top: 3px;
    }

    /* --- formularz powiadomienia o dostepnosci (ps_emailalerts) --- */
    body#product #col-product-info .js-mailalert,
    body#product #col-product-info .js-mailalert form {
        display: block;
        width: 100%;
    }
    body#product #col-product-info .js-mailalert .input-group {
        display: block;
        width: 100%;
        margin: 0 !important;
    }
    body#product #col-product-info .js-mailalert br {
        display: none;
    }
    body#product #col-product-info .js-mailalert input[type="email"] {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 10px;
        padding: 13px 14px;
        border: 1px solid #4A443F;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
        font-size: 14px;
        line-height: 1.2;
        color: #1A1A1A;
    }
    /* motyw dawal domyslnie czarna podpowiedz (rgb(0,0,0)), makieta ma jasnoszary placeholder */
    body#product #col-product-info .js-mailalert input[type="email"]::placeholder {
        color: #8C8681;
        opacity: 1;
    }
    body#product #col-product-info .js-mailalert input[type="submit"] {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 15px;
        border: 0;
        border-radius: 0;
        background: #DD3B2D;
        color: #fff;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: .05em;
        white-space: normal;
    }
    body#product #col-product-info .js-mailalert input[type="submit"]:hover,
    body#product #col-product-info .js-mailalert input[type="submit"]:focus {
        background: #B02A1F;
        color: #fff;
    }
    /* display:none wpisane w znacznik chowa komunikat do czasu .show() z mailalerts.js */
    body#product #col-product-info .js-mailalert .js-mailalert-response {
        display: block;
        margin: 10px 0 0;
    }

    /* --- kreska pod panelem i odstep do zakladek --- */
    body#product #col-product-info .product-additional-info {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 26px;
        border-top: 0;
        border-bottom: 1px solid rgba(160, 160, 160, .25);
    }
    /* .product-info-row (theme.css) ma margin-bottom: 3rem; margin ujemny
       -3rem kolapsuje sie z nim (kolapsacja marginesow sasiadow, stad 0
       odstepu) - 2026-09-17: -36px zmienione na -3rem, zeby wartosc zostala
       wazna niezaleznie od bazowego rozmiaru px na telefonie */
    body#product #main-product-wrapper > .product-tabs {
        margin-top: -3rem;
    }
    /* pusta kotwica z &nbsp; dawala linie tekstu (ok. 17 px) nad zakladkami */
    body#product #main-product-wrapper > .product-tabs > #products-tab-anchor {
        display: block;
        height: 0;
        overflow: hidden;
    }
}

/* ===========================================================================
   KATEGORIA NA TELEFONIE - PRZYCISKI "PRZEGLADAJ W KATEGORII" (21.09.2026)
   Makieta: projects/jamon/26-09-21-mobile-kategoria-linki-pod-paginacja
   ("m - Kategoria", sekcja pod paginacja). Znaczniki: nav.jamon-kat-przyciski
   z ps_categorytree.tpl motywu (style="display:none" - odslaniamy tutaj),
   liczby z override/modules/ps_categorytree. Ponizej 768 px zamiast drzewka
   kategorii; desktop i tablet bez zmian. Dwa id w selektorach bija kolor
   linkow z edytora motywu "a:link:not(.nav-link):not(.btn)" (0,3,1).
   Wycofanie: ~/work-range/26-09-21-mobile-kategoria-przyciski/README.txt
   =========================================================================== */
@media (max-width: 767px) {
    body#category #left-column .block-categories {
        display: none;
    }
    /* odstepy jak w makiecie (24 px nad naglowkiem, 36 px od przyciskow do
       newslettera): 24 px nad daje juz margin-top #left-column, a pod blokiem
       #wrapper ma padding-bottom 11.25 px - stad 0 i 19 px zamiast 24 i 30 */
    body#category #left-column .jamon-kat-przyciski {
        display: block !important;
        padding: 0 0 19px;
    }
    body#category #left-column .jamon-kat-przyciski__naglowek {
        margin: 0 0 12px;
        font-size: 11px;
        line-height: 1.4;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #8C8681;
    }
    /* margin-right znosi padding-right: 3rem kolumny (regula body#category
       #left-column wyzej) - rzad dochodzi do prawej krawedzi ekranu */
    body#category #left-column .jamon-kat-przyciski__pasek {
        position: relative;
        margin-right: -3rem;
    }
    body#category #left-column .jamon-kat-przyciski__pasek::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 6px;
        width: 32px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
    }
    /* padding-right = szerokosc gradientu (makieta ma 14 px): po przewinieciu
       do konca ostatni przycisk wychodzi spod gradientu; stan poczatkowy bez zmian */
    body#category #left-column .jamon-kat-przyciski__rzad {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 0 32px 6px 0;
        scrollbar-width: none;
    }
    body#category #left-column .jamon-kat-przyciski__rzad::-webkit-scrollbar {
        display: none;
    }
    body#category #left-column a.jamon-kat-przyciski__przycisk,
    body#category #left-column a.jamon-kat-przyciski__przycisk:hover,
    body#category #left-column a.jamon-kat-przyciski__przycisk:focus {
        flex: 0 0 auto;
        display: flex;
        align-items: baseline;
        gap: 7px;
        padding: 10px 14px;
        border: 1px solid #D6D0C9;
        background: transparent;
        color: #1A1A1A;
        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
        scroll-snap-align: start;
    }
    body#category #left-column .jamon-kat-przyciski__liczba {
        font-size: 11px;
        color: #8C8681;
    }
    body#category #left-column a.jamon-kat-przyciski__przycisk.is-active,
    body#category #left-column a.jamon-kat-przyciski__przycisk.is-active:hover,
    body#category #left-column a.jamon-kat-przyciski__przycisk.is-active:focus {
        background: #DD3B2D;
        border-color: #DD3B2D;
        color: #fff;
        font-weight: 600;
    }
    body#category #left-column .is-active .jamon-kat-przyciski__liczba {
        color: #fff;
        opacity: .85;
    }
}

/* =====================================================================
   CHECKOUT WG MAKIETY - CHECKBOXY, BLAD ZGODY, BLOK FV, POPOVER HASLA
   22.09.2026, ClickUp 869f2e8cw, spec docs/superpowers/specs/2026-09-22-jamon-checkout-design.md
   Checkbox wg eksport-html/d - Blok zgod (stany).dc.html: 24x24, ramka #4A443F, hover #1A1A1A,
   fokus obrys 2px #1A1A1A, zaznaczony #DD3B2D + bialy ptaszek, blad #B3241B. Wszystkie checkboxy
   checkoutu (zgody, newsletter, FV, regulamin w kroku 4) maja ten sam znacznik .custom-checkbox.
   ===================================================================== */
body#checkout .custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
body#checkout .custom-checkbox input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
body#checkout .custom-checkbox input[type=checkbox] + span {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  border: 1px solid #4A443F !important;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
body#checkout .custom-checkbox input[type=checkbox] + span .checkbox-checked {
  display: none !important;
}
body#checkout .custom-checkbox:hover input[type=checkbox]:not(:checked) + span {
  border-color: #1A1A1A !important;
}
body#checkout .custom-checkbox input[type=checkbox]:checked + span {
  border-color: #DD3B2D !important;
  background: #DD3B2D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
body#checkout .custom-checkbox input[type=checkbox]:focus-visible + span {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}
body#checkout .custom-checkbox.jamon-blad input[type=checkbox] + span {
  border-color: #B3241B !important;
}
body#checkout .custom-checkbox label {
  margin: 0;
  padding-left: 0 !important;
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
}
body#checkout .jamon-blad-zgody {
  margin: 6px 0 0 36px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #B3241B;
}
/* krok 1: zgody i newsletter od lewej krawedzi formularza (pod etykietami), jak na makiecie - decyzja 22.09.2026 */
body#checkout #customer-form .form-group.row:has(> .js-input-column > .custom-checkbox) > .col-form-label,
body#checkout #customer-form .form-group.row:has(> .js-input-column > .custom-checkbox) > .form-control-comment {
  display: none;
}
body#checkout #customer-form .form-group.row:has(> .js-input-column > .custom-checkbox) > .js-input-column {
  flex: 0 0 100%;
  max-width: 100%;
}
body#checkout .jamon-fv__dane {
  margin: 0 0 1rem 36px;
  padding: 20px;
  border: 1px solid #E5E0DA;
}
body#checkout .jamon-fv__wiersz--inne {
  padding-left: 36px;
}
body#checkout .jamon-fv__tytul {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
}
body#checkout .jamon-fv--wybor {
  margin: 1rem 0;
}
@media (max-width: 767px) {
  body#checkout .jamon-fv__dane {
    margin-left: 0;
    padding: 16px 12px;
  }
}
/* popover wymagan hasla: naglowek to h3 (tytul z atrybutu title pola) i bral kroj naglowkow - tekst sklepu */
.popover .popover-header {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

/* 2026-09-23 - podkreslone linki w zgodach (ClickUp 869f5bjm2, spojnie z reszta podlinkowan):
   formularz klienta (rejestracja, dane osobiste, krok 1 kasy), regulamin w kroku platnosci
   i „regulaminie” pod zapisem do newslettera w stopce (link wstawia ps_emailsubscription*.tpl motywu).
   Kolor bez zmian; :link/:visited, bo edytor motywu daje linkom text-decoration selektorem (0,3,1).
   Wycofanie: ~/work-range/26-09-23-podkreslenie-linkow-zgod/README.txt */
#customer-form .custom-checkbox label a:link,
#customer-form .custom-checkbox label a:visited,
#customer-form .custom-checkbox label a:hover,
#conditions-to-approve label a:link,
#conditions-to-approve label a:visited,
#conditions-to-approve label a:hover,
.ps-emailsubscription-conditions a.jamon-link-regulamin:link,
.ps-emailsubscription-conditions a.jamon-link-regulamin:visited,
.ps-emailsubscription-conditions a.jamon-link-regulamin:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ps-emailsubscription-conditions a.jamon-link-regulamin:link,
.ps-emailsubscription-conditions a.jamon-link-regulamin:visited {
  color: inherit;
}

/* =====================================================================
   GPSR NA TELEFONIE (jamon 2026-09-28)
   Tabela SEIGI (8 kolumn, ~616 px) przelewała się poza blok przy 390 px.
   Poniżej 768 px każdy podmiot jako lista „etykieta: wartość”; etykiety
   z data-label (kopia entities_table.tpl w motywie), puste pola ukryte.
   Desktop i tablet >= 768 px bez zmian.
   ===================================================================== */
@media (max-width: 767px) {
  body#product .product-gpsr-embedded table,
  body#product .product-gpsr-embedded tbody,
  body#product .product-gpsr-embedded tr,
  body#product .product-gpsr-embedded td {
    display: block;
    width: 100%;
  }
  body#product .product-gpsr-embedded table {
    border: 0;
    margin-bottom: 0;
  }
  body#product .product-gpsr-embedded thead {
    display: none;
  }
  body#product .product-gpsr-embedded tr + tr {
    border-top: 1px solid rgba(160, 160, 160, .25); /* 2026-09-29: kreska jak w tabeli szczegółów, było beżowe var(--jp-border) */
    margin-top: 10px;
    padding-top: 10px;
  }
  body#product .product-gpsr-embedded td {
    display: flex;
    gap: 8px;
    border: 0;
    padding: 3px 0;
    overflow-wrap: anywhere;
  }
  body#product .product-gpsr-embedded td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-weight: 600;
    color: var(--jp-text);
  }
  body#product .product-gpsr-embedded td.jamon-gpsr-puste {
    display: none;
  }
}