/* ==========================================================================
makieta.css — warstwa redesignu wg makiety DYNAMITE demo (wariant B).
Źródło makiety: ~/Sites/makiety/demo (assets/theme.css).
Ładowana PO theme.css (head.tpl) → nadpisuje motyw bez przebudowy SCSS.
Zasada: celuj w konkretne selektory sklepu, nie globalne elementy.
========================================================================== */
:root{
--mk-black:#000; --mk-primary:#000000;
--mk-danger:#ff4c4c; --mk-red:#DA4242;
--mk-success:#4cbb6c; --mk-warning:#ff9a52;
--mk-smoke:#121212; --mk-smoke2:#1f2020;
--mk-light:#F3F4F5; --mk-border:#e6e6e6; --mk-line:#eceef0; --mk-border2:#ededed;
--mk-gray:#ADB3B6; --mk-gray-dark:#888888; --mk-dark2:#222222;
--mk-pill:999px; --mk-rb:14px; --mk-rb-sm:10px;
--mk-soft:0 6px 22px rgba(16,26,29,.07); --mk-soft2:0 10px 34px rgba(16,26,29,.10);
--mk-font:"Open Sans",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
--mk-head:"Manrope","Open Sans",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* wspólny helper: przyciski makiety */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent;
font:700 13px/1 var(--mk-head);letter-spacing:.03em;text-transform:uppercase;padding:14px 26px;border-radius:var(--mk-pill);transition:.18s}
.mk-btn--dark{background:var(--mk-primary);color:#fff}
.mk-btn--dark:hover{background:#2a2a2a;color:#fff}
.mk-btn--outline{background:transparent;color:#000;border-color:#000}
.mk-btn--outline:hover{background:#000;color:#fff}
.mk-btn--block{width:100%}
/* wspólne: gwiazdki (SVG #star renderowane przez ds_opinions) */
/* ==========================================================================
[FAZA 1] MENU — header (logo/Produkty/search/ikony), navbar, offcanvas kategorii
========================================================================== */
/* ── Header top: logo · Produkty · search · ikony akcji ── */
.header .header-top{background:#fff}
.header-top .header-top-row{display:flex;align-items:center;gap:20px;min-height:76px}
.header-top-row .header-logo{flex:none;margin:0}
.header-top-row .header-logo .logo{height:40px !important;width:auto !important}
/* przycisk PRODUKTY — czarna pigułka */
.header-top-row .btn.btn-products{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border:0;
border-radius:var(--mk-pill);font:700 13px/1 var(--mk-head);letter-spacing:.05em;text-transform:uppercase;padding:14px 22px;flex:none}
.header-top-row .btn.btn-products:hover{background:#2a2a2a;color:#fff}
.header-top-row .btn.btn-products svg path{fill:#fff}
/* wyszukiwarka — pigułka na całą szerokość */
.header-top-row .search-widget{flex:1;min-width:0}
.header-top-row .search-widget form{display:flex;align-items:center;gap:10px;border:1px solid var(--mk-border);
border-radius:var(--mk-pill);height:48px;padding:0 18px;background:#fff;position:relative}
/* lupka: po PRAWEJ i czarna (motyw pozycjonował ją absolutnie po lewej → order nie działał) */
.header-top-row .search-widget form{position:relative}
.header-top-row .search-widget form>button[type=submit]{position:absolute !important;right:16px !important;left:auto !important;
top:50%;transform:translateY(-50%);margin:0 !important;background:none;border:0;padding:0;display:flex;
align-items:center;color:#111 !important;cursor:pointer;flex:none;z-index:2}
.header-top-row .search-widget form>button[type=submit] svg{width:18px;height:18px;fill:#111 !important}
.header-top-row .search-widget input{padding-left:6px;padding-right:34px}
.header-top-row .search-widget input{flex:1;border:0;outline:0;background:none;font-size:14px;height:46px;color:#000}
.header-top-row .search-widget input::placeholder{color:var(--mk-gray)}
/* ikony akcji: wishlist · compare · konto · koszyk */
.header-top-row .btn-account,
.header-top-row #_desktop_compare .ds-compare>a,
.header-top-row .user-topmenu>a.btn,
.header-top-row #block-minicart-trigger{position:relative;color:#111;background:none;border:0;box-shadow:none;
padding:0;margin:0;display:flex;align-items:center;justify-content:center;min-width:auto;height:auto}
.header-top-row .btn-account:hover,
.header-top-row #_desktop_compare .ds-compare>a:hover,
.header-top-row .user-topmenu>a.btn:hover,
.header-top-row #block-minicart-trigger:hover{color:var(--mk-danger);background:none}
.header-top-row .btn-account svg,
.header-top-row #_desktop_compare .ds-compare>a svg,
.header-top-row .user-topmenu>a.btn svg,
.header-top-row #block-minicart-trigger .cart-icon svg{width:22px;height:22px}
.header-top-row #_desktop_cart{flex:none}
.header-top-row #block-minicart-trigger .header{background:none;box-shadow:none;padding:0;min-height:auto}
/* liczniki (badge) */
.header-top-row .cart-products-count,
.header-top-row .compare-products-count,
.header-top-row .wishlist-products-count{position:absolute;top:-8px;right:-10px;min-width:17px;height:17px;padding:0 4px;
border-radius:50%;background:#000;color:#fff;font:700 10px/17px var(--mk-head);text-align:center;display:block}
.header-top-row #_desktop_compare .ds-compare>a{position:relative}
.header-top-row .cart-products-count{background:#000}
/* ── Header nav (slim navbar): linki · darmowa dostawa · kontakt · social ── */
.header .header-nav{border-bottom:1px solid var(--mk-border);background:#fff;min-height:0}
.header-nav .header-nav-row{display:flex;align-items:center;gap:22px;min-height:46px;height:46px;font-size:13.5px;flex-wrap:nowrap}
.header-nav-row .ds-menu-nav-container.display-nav-1{flex:none;border:0;margin:0;padding:0}
.header-nav-row .display-nav-1 .navbar{padding:0;background:none!important;box-shadow:none;border:0;min-height:auto}
.header-nav-row .display-nav-1 .navbar-collapse{padding:0}
.header-nav-row .display-nav-1 .navbar-nav{flex-direction:row;gap:22px;margin:0}
.header-nav-row .display-nav-1 .nav-item{margin:0}
.header-nav-row .display-nav-1 .nav-link{color:#333;font-weight:600 !important;font-size:13.5px !important;padding:0}
.header-nav-row .display-nav-1 .nav-item:hover .nav-link{color:#000}
.header-nav-row .display-nav-1 .promo .nav-link{color:var(--mk-danger)}
.header-nav-row .ds-freeshipping{margin-left:auto;color:#333;text-align:center;white-space:nowrap;flex:none}
.header-nav-row .ds-freeshipping #to-free-shipping{white-space:nowrap;font-size:13.5px !important}
.header-nav-row .ds-freeshipping #to-free-shipping span,
.header-nav-row .ds-freeshipping #to-free-shipping b{font-weight:700}
.header-nav-row .header-contact,
.header-nav-row #_desktop_header_contact{display:flex !important;flex-direction:row !important;flex-wrap:nowrap;align-items:center;gap:18px;margin-left:22px;color:#333;white-space:nowrap}
.header-nav-row .header-contact a{font-weight:600;font-size:13.5px !important;color:#333;white-space:nowrap;display:inline-block}
.header-nav-row .header-contact a:hover{color:#000}
.header-nav-row .block-social{margin-left:18px}
.header-nav-row .block-social-list{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.header-nav-row .block-social-list li{margin:0}
.header-nav-row .block-social-list li a{width:30px;height:30px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;transition:.15s}
.header-nav-row .block-social-list li a:hover{background:#2a2a2a}
.header-nav-row .block-social-list li a svg{width:15px;height:15px}
.header-nav-row .block-social-list li a svg path{fill:#fff}
/* ── Offcanvas kategorii (Produkty) — styl umenu (makieta) ── */
/* jednolite białe tło całego panelu, brak białej przerwy (margin-top motywu) */
#mobile_top_menu_wrapper .modal-dialog__offcanvas--left{width:400px;max-width:90vw;margin:0;height:100%}
#mobile_top_menu_wrapper .modal-content{border:0;border-radius:0;height:100vh;max-height:100vh;margin:0 !important;
background:#fff;display:flex;flex-direction:column;overflow:hidden}
#mobile_top_menu_wrapper .modal-header{background:var(--mk-smoke);color:#fff;border:0;padding:20px 24px;flex:none;margin:0 !important;
display:flex;align-items:center;justify-content:space-between;position:static;top:auto}
#mobile_top_menu_wrapper .modal-header span{font:700 18px/1 var(--mk-head);color:#fff}
#mobile_top_menu_wrapper .modal-header .close{opacity:1;text-shadow:none;background:rgba(255,255,255,.12);border:0;
color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:0;font-size:20px}
#mobile_top_menu_wrapper .modal-header .close:hover{background:rgba(255,255,255,.24);color:#fff}
#mobile_top_menu_wrapper .modal-body{padding:0;flex:1;min-height:0;position:relative;overflow:hidden;background:#fff}
/* kontener = viewport (pion scroll, poziom clip) — jednolite białe tło */
.ds-fullwidth-menu-nav-container{position:relative;height:100%;overflow-x:hidden;overflow-y:auto;background:#fff}
.ds-fullwidth-menu-nav-container .navbar,
.ds-fullwidth-menu-nav-container .navbar-collapse{padding:0;border:0;background:#fff}
.ds-fullwidth-menu-nav-container .navbar-nav{margin:0;padding:8px 0;flex-direction:column;background:#fff;width:100%}
.ds-fullwidth-menu-nav-container .nav-item{background:#fff;margin:0}
.ds-fullwidth-menu-nav-container>.navbar>.navbar-collapse>.navbar-nav>.nav-item{border-bottom:1px solid var(--mk-line)}
/* wiersz kategorii poziom 0 */
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link{display:flex;align-items:center;gap:16px;
padding:15px 24px;font:600 15px/1.2 var(--mk-font);color:#111 !important;background:#fff !important;transition:.14s}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link:hover,
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link:focus{background:var(--mk-light) !important;color:#111 !important}
/* hover: kafel ikony ciemnieje, ikona biała (jak makieta) */
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link:hover .toggle-button-triangle{color:#111}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link::before{content:"";width:42px;height:42px;flex:none;
border-radius:12px;background:var(--mk-light) center/20px 20px no-repeat;transition:.14s;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E")}
/* ikony per-kategoria (dopasowanie po slug href) */
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link[href*="odziez"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6 16 4a4 4 0 0 1-8 0L3.6 6a1 1 0 0 0-.5 1.3l1.5 3 2.4-1V20a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.3l2.4 1 1.5-3A1 1 0 0 0 20.4 6z'/%3E%3C/svg%3E")}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link[href*="obuwie"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 17h20a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1v-5l4-3 2 2 4-3 3 3 5 1a3 3 0 0 1 3 3'/%3E%3Cpath d='M6 11l1.5 1.5'/%3E%3C/svg%3E")}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link[href*="fitness"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Crect x='2' y='8' width='3' height='8' rx='1'/%3E%3Crect x='19' y='8' width='3' height='8' rx='1'/%3E%3Crect x='5.5' y='9.5' width='2.5' height='5' rx='1'/%3E%3Crect x='16' y='9.5' width='2.5' height='5' rx='1'/%3E%3C/svg%3E")}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link[href*="/14-agd"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='5' y1='10' x2='19' y2='10'/%3E%3Cline x1='8.5' y1='5' x2='8.5' y2='7'/%3E%3Cline x1='8.5' y1='13' x2='8.5' y2='16'/%3E%3C/svg%3E")}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link[href*="nasze-marki"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E")}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link[href*="suplement"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 20.5 3.5 13.5a5 5 0 0 1 7-7l7 7a5 5 0 0 1-7 7z'/%3E%3Cline x1='8.5' y1='8.5' x2='15.5' y2='15.5'/%3E%3C/svg%3E")}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link .toggle-button-triangle{margin-left:auto;color:#c2c7ca;display:flex}
.ds-fullwidth-menu-nav-container .nav-item[data-depth="0"]>.nav-link .toggle-button-triangle svg{width:16px;height:16px}
/* ukryj pozycje przeniesione w inne miejsca (O nas, Kontakt — nawbar; Promocje — przycisk na dole) */
.ds-fullwidth-menu-nav-container>.navbar>.navbar-collapse>.navbar-nav>.nav-item:has(>.nav-link[href="/content/6-o-nas"]),
.ds-fullwidth-menu-nav-container>.navbar>.navbar-collapse>.navbar-nav>.nav-item:has(>.nav-link[href="/kontakt"]),
.ds-fullwidth-menu-nav-container>.navbar>.navbar-collapse>.navbar-nav>.nav-item:has(>.nav-link[href="/2-strona-glowna"]),
.ds-fullwidth-menu-nav-container>.navbar>.navbar-collapse>.navbar-nav>.nav-item:has(>.nav-link[href*="/promocje"]){display:none}
/* ── drill-down: wsuwane panele podkategorii (makieta) ── */
.ds-fullwidth-menu-nav-container.mk-drill .navbar,
.ds-fullwidth-menu-nav-container.mk-drill .navbar-collapse,
.ds-fullwidth-menu-nav-container.mk-drill>.navbar>.navbar-collapse>.navbar-nav{position:static}
/* panel dzieci = pełna nakładka; clip poziomy (brak poziomego scrolla), scroll pionowy własny */
.ds-fullwidth-menu-nav-container.mk-drill .dropdown-children{
display:block !important;position:absolute;inset:0;background:#fff;
transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
z-index:5;overflow-x:hidden;overflow-y:auto;padding:0;margin:0;border:0;width:auto}
.ds-fullwidth-menu-nav-container.mk-drill li.mk-open>.dropdown-children{transform:none}
.ds-fullwidth-menu-nav-container.mk-drill .dropdown-children .navbar-nav{padding:0;height:auto;background:#fff}
/* nagłówek „wstecz" panelu — jasny, jak makieta */
.mk-drill-back{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;cursor:pointer;
background:var(--mk-light);color:#111;padding:15px 24px;font:700 15px/1 var(--mk-head);
border-bottom:1px solid var(--mk-line);position:sticky;top:0;z-index:3}
.mk-drill-back svg{flex:none;color:#111}
.mk-drill-back:hover{background:#e9ebec}
.ds-fullwidth-menu-nav-container.mk-drill .nav-item._dropdown.opened>.nav-link .toggle-button-triangle{transform:none}
/* podkategorie */
.ds-fullwidth-menu-nav-container .dropdown-children .nav-link{display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:14px 24px;color:#333;font:400 14px/1.3 var(--mk-font);background:#fff;border-bottom:1px solid var(--mk-line)}
.ds-fullwidth-menu-nav-container .dropdown-children .nav-link:hover{background:var(--mk-light);color:#000}
.ds-fullwidth-menu-nav-container .dropdown-children .nav-link .toggle-button-triangle{color:#c2c7ca;display:flex;margin-left:auto}
.ds-fullwidth-menu-nav-container .dropdown-children .nav-link.see-all{font-weight:700;color:#000}
.ds-fullwidth-menu-nav-container .dropdown-children .nav-link.see-all::before{content:"";width:16px;height:16px;margin-right:8px;flex:none;
background:center/contain no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23DA4242' stroke='none'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E")}
/* ── Baner promo + stopka menu (wstrzykiwane przez makieta.js) ── */
.mk-umenu-banner{position:relative;display:block;margin:10px 16px;border-radius:14px;overflow:hidden;min-height:118px;
background:linear-gradient(120deg,#1a1b1f,#3a2a1f)}
.mk-umenu-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0))}
.mk-umenu-banner>span{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;padding:18px 20px;color:#fff}
.mk-umenu-banner small{font:700 10px/1 var(--mk-head);letter-spacing:.1em;text-transform:uppercase;color:#ffd7b0}
.mk-umenu-banner b{font:800 18px/1.15 var(--mk-head)}
.mk-umenu-banner .cta{display:inline-flex;align-items:center;gap:5px;font:700 12px/1 var(--mk-head);margin-top:6px}
.mk-umenu-foot{display:flex;gap:10px;padding:16px 24px;border-top:1px solid var(--mk-line);margin-top:8px}
.mk-umenu-foot a{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--mk-font);color:#333;
background:var(--mk-light);border-radius:999px;padding:10px 16px}
.mk-umenu-foot a:hover{background:#000;color:#fff}
.mk-umenu-foot a svg{width:16px;height:16px}
/* ==========================================================================
[FAZA 2] MINIKOSZYK — panel wysuwany z prawej wg makiety
========================================================================== */
.block-minicart-overlay{background:rgba(0,0,0,.42)}
.block-minicart-container{width:400px;max-width:90vw;box-shadow:0 0 50px rgba(0,0,0,.2);border:0}
.block-minicart-container .modal-content{display:flex;flex-direction:column;height:100%;border:0;border-radius:0;box-shadow:none}
/* nagłówek ciemny + tytuł z licznikiem */
.block-minicart-header.modal-header{background:var(--mk-smoke);color:#fff;border:0;padding:20px 24px;
display:flex;align-items:center;justify-content:space-between;min-height:auto}
.block-minicart-header .mk-mc-title{font:700 18px/1 var(--mk-head);color:#fff;display:flex;align-items:center;gap:9px;text-transform:none}
.block-minicart-header .mk-mc-count{background:var(--mk-success);color:#fff;display:inline-grid;place-items:center;
min-width:22px;height:22px;padding:0 6px;border-radius:999px;font:700 12px/1 var(--mk-head)}
.block-minicart-header .close{opacity:1;text-shadow:none;background:rgba(255,255,255,.12);border:0;margin:0;
width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.block-minicart-header .close:hover{background:rgba(255,255,255,.24)}
.block-minicart-header .close svg path{fill:#fff}
/* pasek darmowej dostawy */
.block-minicart-container .mk-mc-free{padding:16px 24px;background:#eef8f1;flex:none}
.mk-mc-free-label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#245c38;margin-bottom:8px}
.mk-mc-free-label b{font-weight:700}
.mk-mc-free--ok{display:flex;align-items:center;gap:8px;color:#2f9e57;font-size:13.5px;font-weight:600}
.mk-freebar{height:8px;background:#d5ecdd;border-radius:999px;overflow:hidden}
.mk-freebar-fill{height:100%;background:var(--mk-success);border-radius:999px;transition:width .3s}
/* ciało + linie produktów */
.block-minicart-container .modal-body{flex:1;overflow:auto;padding:0}
.block-minicart-body{padding:0}
.block-minicart-body .cart-items{list-style:none;margin:0;padding:0}
.block-minicart-body .cart-items>li{margin:0}
.block-minicart-body .product-line-grid{display:flex;gap:14px;padding:18px 24px;margin:0;
border-bottom:1px solid var(--mk-line);align-items:flex-start}
.block-minicart-body .product-line-grid-left,
.block-minicart-body .product-line-grid-image{flex:none;padding:0;width:auto;max-width:none}
.block-minicart-body .product-image{display:block}
.block-minicart-body .product-image img{width:74px;height:74px;object-fit:contain;
background:#fff;border:1px solid var(--mk-line);border-radius:10px;padding:6px}
.block-minicart-body .product-line-grid-body{flex:1;min-width:0;padding:0;max-width:none}
.block-minicart-body .product-line-info{margin:0}
.block-minicart-body .product-line-info.title a{font:700 14px/1.25 var(--mk-head);color:#111;
display:block;margin-bottom:4px}
.block-minicart-body .product-line-info.attributes{font-size:12px;color:var(--mk-gray-dark);display:flex;gap:5px}
.block-minicart-body .product-line-info.attributes .price{font-weight:600;color:#333}
.block-minicart-body .product-line-info.totalprice{margin-top:6px}
.block-minicart-body .product-line-info.totalprice .price{font:700 14px/1 var(--mk-head);color:#111}
/* akcje: usuń + ilość */
.block-minicart-body .product-line-grid-right{flex:none;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.block-minicart-body .remove-from-cart{display:grid;place-items:center;width:26px;height:26px;color:var(--mk-gray)}
.block-minicart-body .remove-from-cart svg{width:14px;height:14px}
.block-minicart-body .remove-from-cart svg path{fill:currentColor}
.block-minicart-body .remove-from-cart:hover{color:var(--mk-danger)}
.block-minicart-body .product-line-grid-right .input-group,
.block-minicart-body .product-line-grid-right .bootstrap-touchspin{display:inline-flex;align-items:center;
border:1px solid var(--mk-border);border-radius:999px;overflow:hidden;background:#fff;width:auto}
.block-minicart-body .bootstrap-touchspin .btn,
.block-minicart-body .bootstrap-touchspin .input-group-btn>button{border:0;background:none;width:28px;height:28px;
padding:0;display:grid;place-items:center;color:#333;box-shadow:none}
.block-minicart-body .js-cart-line-product-quantity{border:0;text-align:center;width:34px;height:28px;
font-size:13px;font-weight:600;padding:0;background:none;box-shadow:none}
/* stopka: podsumowanie + przyciski */
.block-minicart-footer{border-top:1px solid var(--mk-border);padding:16px 24px 4px;flex:none}
.block-minicart-footer hr{margin:0 0 12px}
.cart-overly-footer-totals .cart-total{display:flex;align-items:center;justify-content:space-between;
padding:5px 0;font-size:14px;color:#333}
/* w stopce zostaje tylko „Razem" — info o darmowej dostawie jest już na górze */
.cart-overly-footer-totals .cart-total:not(.cart-total-last-line){display:none}
.cart-overly-footer-totals .cart-total-last-line{border-top:1px solid var(--mk-border);margin-top:8px;
padding-top:14px;font:700 18px/1 var(--mk-head);color:#111}
.cart-overly-btn-container{display:flex;flex-direction:column;gap:10px;padding:14px 24px 22px;flex:none}
.cart-overly-btn-container .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;
border-radius:999px;font:700 13px/1 var(--mk-head);letter-spacing:.03em;text-transform:uppercase;padding:14px 20px;border:1px solid transparent}
.cart-overly-btn-container .btn-border{background:#fff;color:#000;border-color:#000}
.cart-overly-btn-container .btn-border:hover{background:#000;color:#fff}
.cart-overly-btn-container .btn-black{background:#000;color:#fff}
.cart-overly-btn-container .btn-black:hover{background:#2a2a2a}
.cart-overly-btn-container .short-label{display:none}
.no-items-in-cart.alert{margin:24px;padding:24px;text-align:center;color:var(--mk-gray-dark);background:var(--mk-light);border:0}
/* ==========================================================================
[FAZA 3] FILTRY — panel już renderuje pigułki (motyw); drobny polish do makiety
========================================================================== */
/* ── Panel filtrów (dsfacetedsearch offcanvas) — ciemny nagłówek + mniejsze tytuły jak makieta ── */
#filter_dialog .modal-header{background:var(--mk-smoke);color:#fff;border:0;padding:20px 24px;
display:flex;align-items:center;justify-content:space-between;min-height:auto;
font:700 18px/1 var(--mk-head) !important;letter-spacing:0;text-transform:none}
#filter_dialog .modal-header .modal-title,
#filter_dialog .modal-header h1,#filter_dialog .modal-header h2,#filter_dialog .modal-header h3,#filter_dialog .modal-header h4,
#filter_dialog .modal-header .h1,#filter_dialog .modal-header .h4,
#filter_dialog .modal-header>span,#filter_dialog .modal-header>div:not(.close),
#filter_dialog .modal-header>*:first-child{font:700 18px/1 var(--mk-head) !important;color:#fff !important;
text-transform:none;letter-spacing:0;margin:0}
#filter_dialog .modal-header :not(button):not(.close):not(svg):not(path):not(i){font:700 18px/1 var(--mk-head) !important;color:#fff !important;text-transform:none !important;letter-spacing:0 !important}
#filter_dialog .modal-header .close,
#filter_dialog .modal-header button[data-dismiss],
#filter_dialog .modal-header .dsfeds_close{opacity:1;text-shadow:none;color:#fff;background:rgba(255,255,255,.14);
border:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:0;font-size:18px}
#filter_dialog .modal-header .close:hover{background:rgba(255,255,255,.26);color:#fff}
#filter_dialog .modal-header .close svg path,
#filter_dialog .modal-header .close *{fill:#fff}
/* grupy facetów: tytuły 14px uppercase */
.feds_facet .facet_title,
#filter_dialog .facet_title,
#filter_dialog .facet_title *,
#filter_dialog .facet_title .h6{font-size:14px !important}
.feds_facet .facet_title .h6{font:700 14px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;color:#111}
/* etykieta facetu ceny: „Price" → „Cena" */
.feds_facet.facet_type_slider .facet_title .h6,
#filter_dialog .facet_type_slider .facet_title .h6{font-size:0 !important;letter-spacing:0}
.feds_facet.facet_type_slider .facet_title .h6::after{content:"Cena";font-family:var(--mk-head);font-weight:700;
font-size:14px !important;line-height:1;text-transform:uppercase;letter-spacing:.03em;color:#111}
/* ── Pasek nad listą (catbar): Filtruj · pigułki podkat. · sort ── */
#js-product-list-top.products-selection{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 0 22px;border:0;background:none;margin:0}
/* przycisk „Filtruj" — ciemna pigułka z ikoną i tekstem (ikonowy toggler motywu) */
#js-product-list-top #search_filter_toggler{display:inline-flex;align-items:center;gap:9px;background:#000;color:#fff;
border:0;border-radius:var(--mk-pill);padding:12px 20px;height:auto;width:auto;min-width:0;max-width:none;font:700 13px/1 var(--mk-head);
letter-spacing:.03em;text-transform:uppercase;box-shadow:none;flex:none;overflow:visible}
#js-product-list-top #search_filter_toggler:hover{background:#2a2a2a;color:#fff}
#js-product-list-top #search_filter_toggler svg{width:16px;height:15px}
#js-product-list-top #search_filter_toggler svg path{fill:#fff}
#js-product-list-top #search_filter_toggler::after{content:"Filtruj";color:#fff;font:700 13px/1 var(--mk-head);
letter-spacing:.03em;text-transform:uppercase;display:inline-block}
/* ukryj zduplikowany toggler */
#js-product-list-top #search_filter_toggler_duplicate{display:none !important}
/* pigułki podkategorii */
#js-product-list-top .subcategories-wrap{flex:1;min-width:0;margin:0;padding:0}
#js-product-list-top .subcategories-list{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
#js-product-list-top .subcategories-list li{margin:0;padding:0}
#js-product-list-top .subcategory-name{display:inline-block;border:1px solid var(--mk-line);border-radius:var(--mk-pill);
padding:9px 18px;font:600 13px/1 var(--mk-font);color:#333;background:#fff;white-space:nowrap;transition:.15s}
#js-product-list-top .subcategory-name:hover{background:#000;color:#fff;border-color:#000;text-decoration:none}
/* sort po prawej — pigułka (dropdown motywu) */
#js-product-list-top .sort-by{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
#js-product-list-top .products-sort-order .select-title{display:inline-flex;align-items:center;gap:10px;
border:1px solid var(--mk-border);border-radius:var(--mk-pill);height:44px;padding:0 16px;background:#fff;
font:600 13px/1 var(--mk-font);color:#111;box-shadow:none;white-space:nowrap}
#js-product-list-top .products-sort-order .select-title:hover{border-color:#000}
#js-product-list-top .products-sort-order .dropdown-menu{border:1px solid var(--mk-border);border-radius:var(--mk-rb-sm);
box-shadow:var(--mk-soft);padding:6px}
#js-product-list-top .products-sort-order .dropdown-menu .select-list{padding:9px 14px;border-radius:8px;font-size:13px;color:#333}
#js-product-list-top .products-sort-order .dropdown-menu .select-list:hover,
#js-product-list-top .products-sort-order .dropdown-menu .select-list.current{background:var(--mk-light);color:#111}
/* ── Paginacja → okrągłe przyciski (makieta .pager) ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:30px 0}
.pagination .title-section-nav{display:flex;align-items:center;gap:16px}
.pagination .btn-link{width:44px;height:44px;border:1px solid var(--mk-border);border-radius:50%;display:grid;
place-items:center;padding:0;background:#fff;color:#333;transition:.15s}
.pagination .btn-link:hover{border-color:#000;color:#000;background:#fff}
.pagination .btn-link.slick-disabled{opacity:.4;pointer-events:none}
.pagination .btn-link svg path{fill:currentColor}
.pagination .slick-pagination{font:600 14px/1 var(--mk-font);color:#333;min-width:44px;text-align:center}
/* ==========================================================================
[FAZA 4] KARTA PRODUKTU — pierwszy ekran (pdp2) + panele + sticky bar
========================================================================== */
/* breadcrumb + narzędzia (Drukuj/Ulubione/Porównaj) */
.product-container-top{align-items:flex-start}
/* ── Galeria: miniatury z lewej, stage w jasnym zaokrąglonym boxie ── */
.product-container-top .images-container{display:flex;flex-direction:row-reverse;gap:16px;align-items:flex-start}
.product-container-top .product-cover-wrap{flex:1;min-width:0;margin:0}
/* galeria: białe tło (nasze zdjęcia mają białe tło — bez szarej ramki), delikatna obwódka */
.product-container-top .product-cover{position:relative;background:#fff;border:1px solid var(--mk-line);border-radius:16px;overflow:hidden}
.product-container-top .product-cover picture{display:block}
.product-container-top .product-cover .js-qv-product-cover,
.product-container-top .product-cover picture img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:26px;display:block}
/* lupa hover (biały okrąg) — chowamy; zoom dostępny przyciskiem → lightbox */
.product-container-top .product-cover-hoover{display:none !important}
.product-container-top .js-qv-mask.mask{width:88px;flex:none;margin:0;overflow:visible}
.product-container-top .product-images.js-qv-product-images{display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.product-container-top .thumb-container{width:88px;margin:0}
.product-container-top .thumb-container .thumb{width:88px;height:88px;object-fit:contain;padding:8px;background:#fff;
border-radius:12px;border:1px solid var(--mk-line);cursor:pointer;transition:.14s}
.product-container-top .thumb-container .thumb:hover{border-color:#bbb}
.product-container-top .thumb-container .thumb.selected{border-color:#111;border-width:2px}
.product-container-top .product-flags{position:absolute;top:18px;left:18px;z-index:2;margin:0;padding:0;list-style:none}
.product-container-top .product-flag{background:#000;color:#fff;border-radius:999px;padding:7px 12px;
font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;margin:0}
.product-container-top .product-flag.discount,.product-container-top .product-flag.on-sale{background:var(--mk-success)}
.product-container-top .product-cover .zoom-btn{position:absolute !important;top:auto !important;left:auto !important;
right:16px !important;bottom:16px !important;width:42px !important;height:42px !important;border-radius:50% !important;
background:#fff !important;border:1px solid var(--mk-border);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.16);
cursor:pointer;margin:0;opacity:1;transform:none;transition:.15s}
/* UWAGA: background-COLOR, nie skrót background — skrót resetował repeat/size/position
i biała lupka kafelkowała się 2×2 (wyglądała jak 4 kółka porównywarki) */
.product-container-top .product-cover .zoom-btn:hover{background-color:#111 !important;border-color:#111;
background-repeat:no-repeat !important;background-size:19px 19px !important;background-position:center !important}
.product-container-top .product-cover .zoom-btn:hover .material-icons{color:#fff}
/* glyph Material Icons nie renderował się (pusty biały krążek) → własna lupa SVG jako tło */
.product-container-top .product-cover .zoom-btn .material-icons{display:none !important}
.product-container-top .product-cover .zoom-btn{background-position:center !important;background-repeat:no-repeat !important;background-size:19px 19px !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important}
.product-container-top .product-cover .zoom-btn:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important}
/* ── Kolumna zakupowa ── */
.product-container-top .brand-row a{font:700 12px/1 var(--mk-head);letter-spacing:.1em;text-transform:uppercase;color:var(--mk-gray-dark)}
.product-container-top h1.h1{font:800 32px/1.08 var(--mk-head);letter-spacing:-.02em;margin:8px 0 12px}
.product-container-top .ds-product-opinion-mini{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.product-container-top .ds-product-opinion-mini .rating{display:inline-flex;gap:2px;color:#e0a92e}
.product-container-top .ds-product-opinion-mini .rating a{color:inherit;display:flex}
.product-container-top .ds-product-opinion-mini .rating svg{width:16px;height:16px}
.product-container-top .ds-product-opinion-mini .average-grade-label{font-size:13px;color:#111;font-weight:700}
.product-container-top .ds-product-opinion-mini .average-grade-amount{color:#555;font-weight:400;text-decoration:underline;margin-left:6px}
/* cena */
.product-container-top .product-prices{margin:0 0 6px}
.product-container-top .product-price{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.product-container-top .current-price-value{font:800 34px/1 var(--mk-head);letter-spacing:-.02em;color:#111}
.product-container-top .regular-price{font:600 18px/1 var(--mk-head);color:var(--mk-gray-dark);text-decoration:line-through}
.product-container-top .discount,.product-container-top .product-discount .discount,
.product-container-top .discount-percentage{background:var(--mk-danger);color:#fff;border-radius:999px;padding:6px 11px;
font:700 12px/1 var(--mk-head);display:inline-block}
.product-container-top .tax-shipping-delivery-label{font-size:12px;color:var(--mk-gray-dark);margin-top:6px}
/* dzielniki między blokami */
.product-container-top .product-information{margin-top:22px}
.product-container-top .product-actions{padding-top:0}
/* kolory — kafle */
.product-container-top .product-variants.other-color .control-label{display:block;font:700 13px/1 var(--mk-head);
text-transform:uppercase;letter-spacing:.05em;color:#111;margin:0 0 12px}
.product-container-top .other-color-wrap{display:flex;gap:12px;flex-wrap:wrap}
.product-container-top .other-color-wrap .other-color{width:60px;height:60px;border:2px solid var(--mk-line);
border-radius:14px;padding:5px;background:#fff;transition:.15s}
.product-container-top .other-color-wrap .other-color:hover{border-color:#bbb}
.product-container-top .other-color-wrap .other-color a,
.product-container-top .other-color-wrap .other-color img{display:block;width:100%;height:100%;object-fit:contain}
/* rozmiary jako pigułki (produkty z atrybutem rozmiaru) */
.product-container-top .product-variants-item .control-label{display:block;font:700 13px/1 var(--mk-head);
text-transform:uppercase;letter-spacing:.05em;color:#111;margin:0 0 12px}
.product-container-top .product-variants .input-container{margin:0}
.product-container-top .product-variants ul{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.product-container-top .product-variants .input-color,
.product-container-top .product-variants .input-radio{position:absolute;opacity:0}
.product-container-top .product-variants label.attribute-radio,
.product-container-top .product-variants .radio-label{min-width:52px;height:52px;padding:0 14px;border:1.5px solid var(--mk-line);
background:#fff;border-radius:12px;cursor:pointer;font:700 14px/50px var(--mk-head);color:#222;text-align:center;display:inline-block;box-shadow:none}
.product-container-top .product-variants input:checked+.radio-label,
.product-container-top .product-variants .input-color:checked+span{border-color:#111;background:#111;color:#fff}
/* ilość + dodaj do koszyka */
.product-container-top .product-add-to-cart .product-quantity{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-top:8px}
.product-container-top .add-to-cart-amount{display:inline-flex;align-items:center;border:1.5px solid var(--mk-line);
border-radius:14px;overflow:hidden;background:#fff}
.product-container-top .add-to-cart-amount .form-control-select,
.product-container-top .add-to-cart-amount select{border:0;height:56px;min-width:64px;padding:0 12px;background:#fff;
font:700 15px/1 var(--mk-head);color:#111;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.product-container-top .add-to-cart-amount .form-control-text{display:none}
.product-container-top .add{flex:1;min-width:220px;display:flex}
.product-container-top .btn.btn-black.add-to-cart{flex:1;border:0;border-radius:14px;background:var(--mk-success);color:#fff;height:56px;
font:700 14px/1 var(--mk-head);letter-spacing:.03em;text-transform:uppercase;display:inline-flex;align-items:center;
justify-content:center;gap:10px;transition:.16s;padding:0 24px}
.product-container-top .btn.btn-black.add-to-cart::before{content:"";width:18px;height:18px;flex:none;
background:center/contain no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E")}
.product-container-top .btn.btn-black.add-to-cart:hover{background:#3f9d5b;transform:translateY(-1px);box-shadow:0 12px 26px rgba(76,187,108,.4)}
.product-container-top .phone-order-info{flex-basis:100%;font-size:13px;color:#555;margin-top:12px}
.product-container-top .phone-order-info a{font-weight:700;color:#111;text-decoration:underline}
/* punkty lojalnościowe — kompaktowy box */
.product-container-top .zoozone-amount{background:var(--mk-light);border-radius:12px;padding:14px 18px;
display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 0;border:0}
.product-container-top .zoozone-amount-title{font:700 14px/1.2 var(--mk-head);color:#111}
.product-container-top .zoozone-amout-left>div:last-child{font-size:12.5px;color:#666}
.product-container-top .zoozones-list{background:#fff;border:1px solid var(--mk-line);border-radius:999px;padding:7px 14px;
font:700 13px/1 var(--mk-head);color:#111;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* meta: dostępność + punkty (jak makieta) */
.product-container-top .mk-avail-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.product-container-top .mk-avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#2f9e57;font-weight:600}
.product-container-top .mk-pts{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#555}
.product-container-top .mk-pts .zoozones-nb,.product-container-top .mk-pts b{color:#111;font-weight:700}
.product-container-top .mk-pts .zoozones-list{background:none;border:0;padding:0}
/* zaufanie — chipy makiety (2×2, cały box klikalny) */
.product-container-top .product-details-reassurance.mk-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.mk-tchip{display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid var(--mk-line);border-radius:14px;
background:#fff;cursor:pointer;text-align:left;transition:.14s;position:relative;width:100%;font-family:var(--mk-font)}
.mk-tchip:hover{border-color:#111;box-shadow:var(--mk-soft)}
.mk-tchip__ic{color:#111;flex:none;display:flex}
.mk-tchip__tx{display:flex;flex-direction:column;min-width:0}
.mk-tchip__tx b{font:700 13px/1.2 var(--mk-head);color:#111}
.mk-tchip__tx span{font-size:11.5px;color:var(--mk-gray-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-tchip__go{margin-left:auto;color:#c2c7ca;flex:none;display:flex}
.mk-tchip--ask .mk-tchip__hook{position:absolute;inset:0;opacity:0}
.mk-tchip--ask .mk-tchip__hook *{width:100%;height:100%}
/* wysuwane panele PDP (dostawa/zwroty/płatności) — makieta */
.mk-panel-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;transition:.25s;z-index:1200}
.mk-panel-backdrop.is-open{opacity:1;visibility:visible}
.mk-panel{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:90vw;background:#fff;z-index:1300;display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;box-shadow:0 0 50px rgba(0,0,0,.2);visibility:hidden;overflow:hidden}
.mk-panel.is-open{transform:none;visibility:visible}
.mk-panel__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;flex:none;background:var(--mk-smoke);color:#fff}
.mk-panel__head strong{font:700 18px/1 var(--mk-head)}
.mk-panel__close{background:rgba(255,255,255,.12);border:0;cursor:pointer;color:#fff;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1}
.mk-panel__close:hover{background:rgba(255,255,255,.24)}
.mk-panel__body{flex:1;overflow:auto;padding:24px}
.mk-panel__icon{width:52px;height:52px;border-radius:50%;background:var(--mk-light);display:grid;place-items:center;color:#111;margin-bottom:18px}
.mk-panel__body p{color:#444;font-size:14px;line-height:1.7;margin:0 0 12px}
.mk-panel__body ul{padding-left:18px;color:#444;font-size:14px;line-height:1.8;margin:0 0 12px}
.mk-panel__body b{color:#111}
/* ── Sticky product bar: pełny styl w sekcji „Pasek nawigacyjny karty produktu" (FAZA 18b) ──
(stary jasny wariant usunięty — czarny przycisk przebijał zielony .mk-bar-add) */
/* ── Panele wysuwane (tabela rozmiarów itd.) — ciemny nagłówek jak makieta ── */
#offcanvas_sizes .modal-header,
.modal-dialog__offcanvas--right .modal-header{background:var(--mk-smoke);color:#fff;border:0;padding:20px 24px}
#offcanvas_sizes .modal-header .modal-title,
#offcanvas_sizes .modal-header h4,
.modal-dialog__offcanvas--right .modal-header .modal-title{font:700 18px/1 var(--mk-head);color:#fff}
#offcanvas_sizes .modal-header .close,
.modal-dialog__offcanvas--right .modal-header .close{opacity:1;text-shadow:none;color:#fff;background:rgba(255,255,255,.12);
width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
#offcanvas_sizes .size-table,#offcanvas_sizes table{width:100%;border-collapse:collapse}
#offcanvas_sizes table th{background:#000;color:#fff;padding:12px;font:700 13px/1 var(--mk-head);text-align:left}
#offcanvas_sizes table td{padding:12px;border-bottom:1px solid var(--mk-border);font-size:14px}
/* ==========================================================================
[FAZA 5] OPINIE — układ makiety (podsumowanie z lewej, lista z prawej)
========================================================================== */
.mk-rev-wrap{margin-top:20px}
.mk-rev__h2{font:800 26px/1.2 var(--mk-head);margin:34px 0 20px}
.mk-rev{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.mk-rev__summary{border:1px solid var(--mk-border);border-radius:14px;padding:26px;position:sticky;top:120px}
.mk-rev__big{font:800 52px/1 var(--mk-head);letter-spacing:-.02em}
.mk-rev__big small{font-size:20px;color:var(--mk-gray);font-weight:600}
.mk-star{width:15px;height:15px;color:#dcdcdc;display:inline-block}
.mk-star.on{color:#e0a92e}
.mk-rev__stars{display:inline-flex;gap:2px;color:#e0a92e}
.mk-rev__stars--lg{margin:8px 0 4px}
.mk-rev__stars--lg .mk-star{width:18px;height:18px}
.mk-star--xs{width:12px;height:12px}
.mk-rev__count{font-size:13px;color:var(--mk-gray-dark);margin-bottom:20px}
.mk-rev__bars{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.mk-rev__bar{display:flex;align-items:center;gap:10px;font-size:12px;color:#555}
.mk-rev__bar-l{display:inline-flex;align-items:center;gap:3px;width:34px;color:#333;font-weight:600}
.mk-rev__bar-track{flex:1;height:7px;background:var(--mk-light);border-radius:999px;overflow:hidden}
.mk-rev__bar-track span{display:block;height:100%;background:#e0a92e;border-radius:999px}
.mk-rev__bar-n{width:20px;text-align:right;color:#888}
.mk-rev__omnibus{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--mk-gray-dark);line-height:1.5;margin:16px 0 0}
.mk-rev__omnibus svg{flex:none;margin-top:1px}
.mk-rev__list-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--mk-border)}
.mk-rev__list-head b{font-family:var(--mk-head)}
.mk-rev__item{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--mk-border)}
.mk-rev__av{width:46px;height:46px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font:700 18px/1 var(--mk-head);flex:none;text-transform:uppercase}
.mk-rev__body{flex:1;min-width:0}
.mk-rev__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mk-rev__name{font:700 14px/1.3 var(--mk-head);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk-rev__verified{display:inline-flex;align-items:center;gap:4px;font:600 10.5px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.02em;color:#2f9e57;background:#e7f6ec;padding:5px 9px;border-radius:999px}
.mk-rev__date{font-size:12.5px;color:var(--mk-gray)}
.mk-rev__item .mk-rev__stars{margin:8px 0 6px}
.mk-rev__text{font-size:14px;color:#444;line-height:1.65;margin:0}
.mk-rev__item.opinion-to-collapse{display:none}
.mk-rev-wrap.mk-rev--expanded .mk-rev__item.opinion-to-collapse{display:flex}
.mk-rev__more{display:block;width:100%;margin-top:14px;border:1px solid #000;background:#fff;color:#000;border-radius:999px;padding:14px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:.15s}
.mk-rev__more:hover{background:#000;color:#fff}
@media(max-width:900px){.mk-rev{grid-template-columns:1fr}.mk-rev__summary{position:static}}
/* ── Strona /opinie (opinie o sklepie) — wariant B ── */
.mk-ophead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:8px 0 26px}
.mk-op-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--mk-head);letter-spacing:.12em;text-transform:uppercase;color:var(--mk-danger);margin-bottom:8px}
.mk-op-eyebrow .mk-star{width:14px;height:14px}
.mk-op-title{font:800 34px/1.15 var(--mk-head);margin:0}
.mk-ophead__sub{color:var(--mk-gray-dark);font-size:15px;margin:8px 0 0;max-width:52ch}
.mk-op-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--mk-border)}
.mk-op-chip{background:var(--mk-light);border:1px solid transparent;border-radius:var(--mk-pill);padding:9px 16px;font:600 13px/1 var(--mk-head);color:#444;cursor:pointer;transition:.16s;text-decoration:none}
.mk-op-chip:hover{color:#000}
.mk-op-chip--on{background:#000;color:#fff !important} /* !important: kolor linków motywu przebijał → szary tekst na czarnym */
.mk-op-chip--on:hover{color:#fff !important}
.mk-rev__foot{margin-top:10px}
.mk-rev__helpful{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--mk-border);border-radius:var(--mk-pill);padding:7px 13px;font-size:12px;color:#555;cursor:pointer;transition:.16s}
.mk-rev__helpful:hover{border-color:#000;color:#000}
.mk-op-pager{display:flex;align-items:center;justify-content:flex-start;gap:16px;padding-top:26px}
.mk-op-pager__btn{width:44px;height:44px;border:1px solid var(--mk-border);background:#fff;display:grid;place-items:center;border-radius:50%;color:#333;transition:.16s}
.mk-op-pager__btn:hover{border-color:#000;color:#000}
.mk-op-pager__btn.is-disabled{opacity:.4;pointer-events:none}
.mk-op-pager__now{font-size:14px;color:#333}
@media(max-width:560px){.mk-op-title{font-size:27px}}
/* ==========================================================================
Strona /content — „O nas" (id_cms=6) — wariant B (storytelling)
========================================================================== */
.mk-onas{padding:0;border:0;background:transparent;box-shadow:none;overflow:hidden}
/* motyw ściska .page-cms do 890px z auto-marginesem → pełna szerokość, szerokość trzyma .container */
#content.mk-onas{max-width:none !important;width:100% !important;margin:0 !important}
.mk-onas .container{max-width:1180px !important;width:100% !important;margin:0 auto} /* !important: FAZA 16 daje .container 1720 */
/* motyw numeruje li przez ::before (counter) — pseudoelement wchodził do grida .ab-tl
jako pierwszy item i rozwalał kolumny (rok lądował w kolumnie treści) */
.mk-onas .ab-timeline li::before{content:none !important;display:none !important}
.mk-onas .ab-timeline{padding:0 !important}
.mk-guide-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:44px 0 22px}
.mk-guide-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--mk-head);letter-spacing:.12em;text-transform:uppercase;color:var(--mk-danger);margin-bottom:8px}
.mk-onas h2{font-family:var(--mk-head);letter-spacing:-.02em}
.mk-onas .mt-0{margin-top:0}
/* HERO — full-bleed bez zaokrągleń; treść wcięta równo z logo (kontener strony 1720/40) */
.ab-hero{position:relative;min-height:480px;display:flex;align-items:center;overflow:hidden;border-radius:0;margin:0}
.ab-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,12,.82),rgba(10,10,12,.5))}
.ab-hero__in{position:relative;color:#fff;padding:64px 40px;max-width:1720px;margin:0 auto;width:100%}
.ab-hero__in>*{max-width:720px}
.ab-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--mk-head);letter-spacing:.14em;text-transform:uppercase;color:#ffb98a}
.ab-hero h1{color:#fff;font-family:var(--mk-head);font-size:clamp(32px,4.5vw,52px);line-height:1.06;letter-spacing:-.02em;margin:18px 0;text-wrap:balance}
.ab-hero__in p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.9);margin:0}
.ab-hero__stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:34px}
.ab-hero__stats b{display:block;font:800 30px/1 var(--mk-head);color:#fff}
.ab-hero__stats span{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:6px;display:block}
/* HISTORIA + cytat */
.ab-story-sec{padding-top:56px}
.ab-story{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.ab-story__text h2{font-size:32px;margin:14px 0 16px}
.ab-story__text p{color:#444;line-height:1.75;margin:0 0 15px;font-size:15.5px}
.ab-quote{margin:24px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--mk-danger);font:600 20px/1.5 var(--mk-head);color:#111}
.ab-quote cite{display:block;font:600 13px/1 var(--mk-font);color:var(--mk-gray-dark);margin-top:14px;font-style:normal}
.ab-story__media{margin:0;border-radius:var(--mk-rb);overflow:hidden;box-shadow:var(--mk-soft2)}
.ab-story__media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.ab-story__media figcaption{font-size:12.5px;color:var(--mk-gray-dark);padding:12px 16px;background:var(--mk-light)}
/* TIMELINE */
.ab-timeline-sec{padding-top:8px}
.ab-timeline{list-style:none;margin:0;padding:0;position:relative}
.ab-timeline::before{content:"";position:absolute;left:74px;top:8px;bottom:8px;width:2px;background:var(--mk-border)}
.ab-tl{position:relative;display:grid;grid-template-columns:74px 1fr;gap:28px;padding:0 0 28px}
.ab-tl:last-child{padding-bottom:0}
.ab-tl__year{font:800 18px/1 var(--mk-head);color:#111;padding-top:2px;position:relative;z-index:1}
.ab-tl__body{position:relative;padding-left:28px}
.ab-tl__body::before{content:"";position:absolute;left:-16px;top:4px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--mk-danger)}
.ab-tl__body b{display:block;font:700 17px/1.3 var(--mk-head);margin-bottom:6px}
.ab-tl__body p{margin:0;color:#555;line-height:1.65;font-size:14.5px}
/* WARTOŚCI */
.ab-values-sec{padding-top:8px}
.onas-values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.onas-value{border:1px solid var(--mk-line);border-radius:var(--mk-rb);padding:22px 20px}
.onas-value__ic{display:inline-flex;width:46px;height:46px;border-radius:50%;background:var(--mk-light);color:#111;align-items:center;justify-content:center;margin-bottom:14px}
.onas-value b{display:block;font:700 15px/1.35 var(--mk-head);margin-bottom:6px}
.onas-value p{margin:0;font-size:13px;color:#666;line-height:1.55}
/* ZESPÓŁ */
.ab-team-sec{padding-top:8px}
.ab-team{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ab-member{margin:0}
.ab-member__photo{border-radius:var(--mk-rb);overflow:hidden;background:var(--mk-light)}
.ab-member__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:.4s}
.ab-member:hover .ab-member__photo img{transform:scale(1.04)}
.ab-member figcaption{padding:16px 2px 0}
.ab-member figcaption b{font:800 17px/1.2 var(--mk-head)}
.ab-member__role{display:block;font-size:12px;color:var(--mk-danger);font-weight:700;margin:6px 0 9px;text-transform:uppercase;letter-spacing:.03em}
.ab-member figcaption p{margin:0;font-size:13.5px;color:#666;line-height:1.55}
/* GALERIA */
.ab-gallery-sec{padding-top:8px}
.ab-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px}
.ab-gallery__item{overflow:hidden;border-radius:var(--mk-rb);display:block;cursor:zoom-in;height:100%}
/* !important: motyw daje obrazkom height:auto → kafle rozjeżdżały się */
.ab-gallery__item img{width:100% !important;height:100% !important;object-fit:cover;transition:.4s;display:block}
.ab-gallery__item:hover img{transform:scale(1.05)}
.ab-gallery__item--lg{grid-column:span 2;grid-row:span 2}
/* CTA */
.ab-cta-sec{padding:8px 0 56px}
.ab-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--mk-smoke);color:#fff;border-radius:var(--mk-rb);padding:38px 42px}
/* !important: motyw dawał h2 czarny (znikał na ciemnym) i btn-primary biały tekst na białym */
.ab-cta h2{color:#fff !important;font-size:26px !important;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.ab-cta p{margin:0;color:rgba(255,255,255,.75);font-size:15px;max-width:52ch}
.ab-cta .mk-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#000 !important;color:#fff !important;
border-radius:var(--mk-pill);padding:15px 26px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;
white-space:nowrap;border:1px solid rgba(255,255,255,.22);text-decoration:none;transition:.16s}
.ab-cta .mk-cta-btn:hover{background:#2a2a2a !important;color:#fff !important;border-color:rgba(255,255,255,.4)}
/* pas 4 ikon zaufania (makieta render_reassurance) */
.mk-reassure{padding:34px 0 10px}
.mk-reassure__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:0 auto}
.mk-reassure__item{display:flex;align-items:center;gap:14px;justify-content:center}
.mk-reassure__ic{width:46px;height:46px;display:grid;place-items:center;color:#111;flex:none}
.mk-reassure__txt{font-size:14px;color:#222;line-height:1.35}
@media(max-width:900px){.mk-reassure__grid{grid-template-columns:1fr 1fr;gap:16px}}
/* lightbox galerii */
.mk-lightbox{position:fixed;inset:0;z-index:3000;background:rgba(10,10,12,.92);display:none;align-items:center;justify-content:center}
.mk-lightbox.is-open{display:flex}
.mk-lightbox img{max-width:88vw;max-height:86vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.mk-lightbox__close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:.15s}
.mk-lightbox__close:hover{background:rgba(255,255,255,.24)}
.mk-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.15s}
.mk-lightbox__nav:hover{background:rgba(255,255,255,.24)}
.mk-lightbox__prev{left:26px}
.mk-lightbox__next{right:26px}
@media(max-width:1000px){.ab-team,.ab-gallery{grid-template-columns:repeat(2,1fr)}.onas-values{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.ab-story{grid-template-columns:1fr}.ab-story__media{max-width:420px}.ab-hero__in{padding:48px 28px}}
@media(max-width:560px){.ab-team{grid-template-columns:1fr 1fr}.onas-values{grid-template-columns:1fr}.ab-hero__stats{gap:26px}.ab-tl{grid-template-columns:56px 1fr;gap:18px}.ab-timeline::before{left:57px}.mk-guide-head{flex-direction:column;align-items:flex-start;gap:6px}}
/* ==========================================================================
Strona /kontakt — wariant B (hero ciemny, działy, mapa, formularz+panel)
========================================================================== */
.page-contact #content-wrapper{flex:0 0 100%;max-width:100%;width:100%}
.page-contact #content{background:transparent;border:0;box-shadow:none;padding:0;max-width:none}
/* druga mapa (iframe embed ze staticblocka pod treścią) — makieta ma tylko czarną */
.page-contact .layout-container > .container > iframe{display:none !important}
.mk-kont{max-width:1180px;margin:0 auto}
.mk-kont h1,.mk-kont h2,.mk-kont h3{font-family:var(--mk-head)}
/* motyw daje h2/h3 gigantyczne i szare → dociski */
.mk-kont .mk-guide-head h2{font-size:26px !important;line-height:1.2 !important;color:#121212 !important;font-weight:800;margin:0}
.mk-kont-form h2{font-size:24px !important;color:#121212 !important;font-weight:800}
.mk-kont-dept h3{font-size:18px !important;color:#121212 !important;font-weight:800 !important;line-height:1.3 !important;margin:0 0 6px !important}
.mk-kont-loc h3{font-size:20px !important;color:#fff !important}
.mk-kont-side h3{font-size:20px !important;color:#fff !important}
/* input pliku (filestyle motywu miał biały tekst na jasnym tle) */
.mk-kform input[type="file"]{width:100%;font-size:13px;color:#333;border:1px dashed var(--mk-border);border-radius:10px;padding:12px 14px;background:#fff;height:auto}
/* hero */
.mk-kont-hero{position:relative;overflow:hidden;background:var(--mk-smoke);border-radius:var(--mk-rb);color:#fff;
display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;padding:50px;margin:8px 0}
.mk-kont-hero::before{content:"";position:absolute;top:-140px;right:-120px;width:420px;height:420px;
background:radial-gradient(circle,rgba(76,187,108,.22),transparent 68%);pointer-events:none}
.mk-kont-hero__left{position:relative}
.mk-kont-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.1em;color:var(--mk-success)}
.mk-kont-hero h1{font-size:clamp(34px,4vw,48px);line-height:1.05;letter-spacing:-.02em;color:#fff;margin:16px 0 14px}
.mk-kont-hero__left p{color:#b7bcc1;font-size:16px;line-height:1.6;max-width:46ch;margin:0 0 22px}
.mk-kont-hero__trust{display:flex;flex-wrap:wrap;gap:10px 20px}
.mk-kont-hero__trust span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#cfd2d4}
.mk-kont-hero__trust svg{color:var(--mk-success);flex:none}
.mk-kont-hero__card{position:relative;display:flex;flex-direction:column;gap:8px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:12px}
.mk-kont-hero__row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;color:#fff;text-decoration:none;transition:.16s}
a.mk-kont-hero__row:hover{background:rgba(255,255,255,.06);color:#fff}
a.mk-kont-hero__row:hover>svg{color:var(--mk-success);transform:translateX(2px)}
.mk-kont-hero__row>svg{color:#5c6368;margin-left:auto;flex:none;transition:.16s}
.mk-kont-hero__ic{width:46px;height:46px;border-radius:12px;background:rgba(76,187,108,.14);color:var(--mk-success);display:grid;place-items:center;flex:none}
.mk-kont-hero__t small{display:block;font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.07em;color:#8a9199;margin-bottom:6px}
.mk-kont-hero__t b{font:700 17px/1 var(--mk-head);color:#fff;word-break:break-word}
/* działy */
.mk-kont-depts-sec{padding-top:6px}
.mk-kont-depts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mk-kont-dept{position:relative;background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-rb);padding:26px 24px 24px;
box-shadow:var(--mk-soft);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.mk-kont-dept::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--acc)}
.mk-kont-dept:hover{transform:translateY(-3px);box-shadow:var(--mk-soft2)}
.mk-kont-dept__ic{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);margin-bottom:14px}
.mk-kont-dept h3{font-size:18px;margin:0 0 8px}
.mk-kont-dept>p{font-size:13.5px;color:#666;line-height:1.55;margin:0 0 16px;flex:1}
.mk-kont-dept__lines{display:grid;gap:8px;margin-bottom:16px}
.mk-kont-dept__lines a,.mk-kont-dept__hours{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#333;text-decoration:none}
.mk-kont-dept__mail{font-weight:600}
.mk-kont-dept__lines a:hover{color:var(--acc)}
.mk-kont-dept__lines svg{color:var(--acc);flex:none}
.mk-kont-dept__hours{color:#8a9199;font-size:12.5px}
.mk-kont-dept__cta{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--mk-head);font-weight:700;
font-size:13px;color:#121212;text-decoration:none;padding:9px 16px;border:1px solid var(--acc);border-radius:var(--mk-pill);transition:.18s}
.mk-kont-dept__cta:hover{background:var(--acc);color:#fff}
/* mapa + karta lokalizacji (full-bleed) */
.mk-kont-mapwrap{position:relative;height:480px;margin:34px 0 0;background:#121212;overflow:hidden;
width:100vw;margin-left:calc(50% - 50vw)}
.mk-kont-map__canvas{position:absolute;inset:0;width:100%;height:100%;background:#121212}
.mk-kont-map__fallback{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);color:var(--mk-success);z-index:1}
.mk-kont-mapwrap.is-loaded .mk-kont-map__fallback{opacity:0;transition:.3s}
/* boks lokalizacji wyrównany do lewej równo z logo (kontener strony 1720/40) */
.mk-kont-mapwrap__in{position:relative;z-index:2;height:100%;display:flex;align-items:center;pointer-events:none;
max-width:1720px;margin:0 auto;padding:0 40px;justify-content:flex-start}
.mk-kont-loc{pointer-events:auto;width:360px;max-width:calc(100% - 32px);background:rgba(18,18,18,.9);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:28px 28px 30px;color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.mk-kont-loc__badge{display:inline-flex;align-items:center;gap:7px;font:700 11.5px/1 var(--mk-head);letter-spacing:.1em;text-transform:uppercase;
color:var(--mk-success);background:rgba(76,187,108,.12);padding:7px 12px;border-radius:var(--mk-pill);margin-bottom:14px}
.mk-kont-loc h3{font-size:20px;margin:0 0 8px;color:#fff}
.mk-kont-loc__addr{font-size:14.5px;color:#cfd2d4;margin:0 0 16px;line-height:1.5}
.mk-kont-loc__meta{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.mk-kont-loc__meta li{display:flex;gap:10px;align-items:center;font-size:13px;color:#b7bcc1}
.mk-kont-loc__meta svg{color:var(--mk-success);flex:none}
.mk-kont-loc__btn{display:inline-flex;align-items:center;gap:8px;background:var(--mk-success);color:#fff;border-radius:var(--mk-pill);
padding:13px 22px;font:700 13px/1 var(--mk-head);text-decoration:none;transition:.16s}
.mk-kont-loc__btn:hover{background:#3ea25b;color:#fff}
/* formularz + panel */
.mk-kont-form-sec{padding:40px 0 56px}
.mk-kont-form-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.mk-kont-form{background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-rb);padding:34px 34px 38px;box-shadow:var(--mk-soft)}
.mk-kont-form h2{font-size:24px;margin:10px 0 22px}
.mk-kform .form-fields{display:block}
.mk-kform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mk-kform__field{margin-bottom:16px}
.mk-kform__field label{display:block;font:600 13px/1 var(--mk-head);color:#333;margin:0 0 7px;text-align:left;width:auto;padding:0}
.mk-kform__opt{color:#999;font-weight:400}
.mk-kform__field .form-control{width:100%;height:48px;border:1px solid var(--mk-border);border-radius:10px;padding:0 14px;
font-size:14px;background:#fff;box-shadow:none}
.mk-kform__field textarea.form-control{height:auto;min-height:140px;padding:12px 14px;resize:vertical}
.mk-kform__field .form-control:focus{border-color:#000;box-shadow:none}
/* select z widoczną strzałką (motyw zerował appearance bez własnej ikony) */
.mk-kform__field select.form-control{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
/* załącznik — czytelny dropzone z ładnym przyciskiem */
.mk-kform__field input[type="file"]{width:100%;height:auto;font:400 13px/1.4 var(--mk-font);color:#666;
border:1px dashed var(--mk-border);border-radius:10px;padding:9px 10px;background:#fafbfb;cursor:pointer}
.mk-kform__field input[type="file"]:hover{border-color:#bbb}
.mk-kform__field input[type="file"]::file-selector-button{border:0;border-radius:999px;background:#111;color:#fff;
font:700 12px/1 var(--mk-head);padding:9px 16px;margin-right:12px;cursor:pointer;transition:.15s}
.mk-kform__field input[type="file"]::file-selector-button:hover{background:#2a2a2a}
.mk-kform__footer{margin-top:6px;text-align:left;padding:0}
.mk-kform__submit{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border:0;border-radius:var(--mk-pill);
padding:15px 26px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:.15s}
.mk-kform__submit:hover{background:#2a2a2a;color:#fff}
.mk-kform__alert ul{margin:0;padding-left:18px}
.mk-kont-side{background:var(--mk-smoke);color:#fff;border-radius:var(--mk-rb);padding:34px 30px;box-shadow:var(--mk-soft);position:sticky;top:127px}
.mk-kont-side__ic{width:56px;height:56px;border-radius:16px;background:rgba(76,187,108,.14);color:var(--mk-success);
display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.mk-kont-side h3{font-size:20px;margin:0 0 8px;color:#fff}
.mk-kont-side>p{font-size:14px;color:#b7bcc1;line-height:1.6;margin:0 0 18px}
/* !important: kolor/hover linków motywu przebijał (szary numer, czarny hover = znikał) */
.mk-kont-side__phone{display:inline-flex;align-items:center;gap:10px;font-family:var(--mk-head);font-weight:800;font-size:20px;color:#fff !important;text-decoration:none;transition:.15s}
.mk-kont-side__phone:hover{color:var(--mk-success) !important}
.mk-kont-side__phone svg{color:var(--mk-success)}
.mk-kont-side h3{font:800 20px/1.25 var(--mk-head) !important;color:#fff !important;margin:0 0 8px !important}
.mk-kont-side__hours{display:flex;align-items:center;gap:8px;font-size:13px;color:#8a9199;margin-top:8px}
.mk-kont-side__sep{height:1px;background:rgba(255,255,255,.1);margin:22px 0}
.mk-kont-side__q{font-size:13.5px;color:#b7bcc1;line-height:1.6;margin:0 0 18px}
.mk-kont-side__q a{color:var(--mk-success);font-weight:600}
.mk-kont-side__social{display:flex;gap:10px}
.mk-kont-side__social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);color:#fff;
display:inline-flex;align-items:center;justify-content:center;transition:.18s}
.mk-kont-side__social a:hover{background:var(--mk-success);border-color:var(--mk-success);color:#fff}
@media(max-width:900px){
.mk-kont-hero{grid-template-columns:1fr;padding:34px 26px;gap:28px}
.mk-kont-depts{grid-template-columns:1fr}
.mk-kont-form-grid{grid-template-columns:1fr}
.mk-kont-side{position:static}
.mk-kont-mapwrap{height:auto;min-height:420px;padding:24px 0}
.mk-kform__row{grid-template-columns:1fr}
}
/* ==========================================================================
Strona /blog (Poradnik) — wariant B: układ magazynowy
========================================================================== */
#module-ds_blog-blog #content-wrapper{flex:0 0 100%;max-width:100%;width:100%}
/* !important: motyw .page-content.card daje białe tło — poradnik ma być na szarym (#fafbfb body);
UWAGA: body ma id module-ds_blog-*, nie klasę page-module-… */
#module-ds_blog-blog #content,
#module-ds_blog-category #content,
#module-ds_blog-tag #content{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0;max-width:none}
.mk-por{max-width:1300px;margin:0 auto}
/* masthead */
.mk-por-mast{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:6px 0 28px}
.mk-por-mast h1{font:800 38px/1.1 var(--mk-head) !important;letter-spacing:-.02em;color:#121212;margin:8px 0 0}
.mk-por-mast__sub{color:#555;font-size:15.5px;line-height:1.55;max-width:560px;margin:10px 0 0}
.mk-por-mast__badge{flex:none;display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mk-head);color:#111;background:var(--mk-light);border:1px solid var(--mk-line);padding:11px 16px;border-radius:var(--mk-pill)}
.mk-por-mast__badge svg{color:var(--mk-success)}
/* hero */
.mk-por-hero{display:grid;grid-template-columns:1.7fr 1fr;gap:22px;margin-bottom:30px}
.mk-por-feat{position:relative;min-height:452px;border-radius:var(--mk-rb);overflow:hidden;display:flex;align-items:flex-end;color:#fff}
.mk-por-feat__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.mk-por-feat:hover .mk-por-feat__bg{transform:scale(1.04)}
.mk-por-feat__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,10,12,.92),rgba(9,10,12,.5) 40%,rgba(9,10,12,.04) 78%)}
.mk-por-feat__in{position:relative;padding:34px 38px;max-width:660px;display:block}
.mk-por-feat__tags{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.mk-por-feat__badge{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.06em;background:var(--mk-success);color:#08160d;padding:7px 12px;border-radius:var(--mk-pill)}
.mk-por-feat__cat{font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.16);padding:7px 12px;border-radius:var(--mk-pill)}
.mk-por-feat__title{display:block;font:800 31px/1.14 var(--mk-head);letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance;color:#fff}
.mk-por-feat__ex{display:block;font-size:15px;color:rgba(255,255,255,.86);line-height:1.55;margin:0 0 22px;max-width:540px}
.mk-por-feat__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mk-por-feat__meta{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.72)}
.mk-por-feat__more{display:inline-flex;align-items:center;gap:7px;font:700 13px/1 var(--mk-head);color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);padding:11px 18px;border-radius:var(--mk-pill);transition:.18s}
.mk-por-feat:hover .mk-por-feat__more{background:#fff;color:#111;border-color:#fff}
/* najnowsze */
.mk-por-latest{display:flex;flex-direction:column;gap:14px;justify-content:space-between}
.mk-por-latest__lbl{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.1em;color:var(--mk-danger)}
.mk-por-mini{display:flex;gap:0;background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-rb-sm);overflow:hidden;transition:.18s;color:inherit;flex:none;text-decoration:none}
.mk-por-mini:hover{box-shadow:var(--mk-soft);transform:translateY(-2px)}
.mk-por-mini__thumb{flex:none;width:186px;aspect-ratio:16/10;position:relative;overflow:hidden;display:block}
.mk-por-mini__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.mk-por-mini:hover .mk-por-mini__thumb img{transform:scale(1.06)}
.mk-por-mini__body{padding:13px 15px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.mk-por-mini__cat{font:700 10px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.08em;color:var(--mk-gray-dark)}
.mk-por-mini__title{font:700 14px/1.32 var(--mk-head);color:#111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-por-mini:hover .mk-por-mini__title{color:var(--mk-red)}
.mk-por-mini__meta{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mk-gray-dark);margin-top:2px}
.mk-por-latest__all{display:inline-flex;align-items:center;gap:6px;justify-content:center;font:700 13px/1 var(--mk-head);color:#111;border:1px solid var(--mk-line);border-radius:var(--mk-pill);padding:13px;transition:.16s;text-decoration:none}
.mk-por-latest__all:hover{background:#000;color:#fff !important;border-color:#000} /* !important: kolor linku motywu przebijał — czarny na czarnym */
/* chipy kategorii */
.mk-por-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:26px}
/* layout + siatka */
.mk-por-layout{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start;margin-bottom:12px}
.mk-por-main__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px}
.mk-por-cell{width:auto;padding:0;flex:none;max-width:none}
/* ranking */
.mk-por-pop{background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-rb);padding:22px 22px 8px}
.mk-por-pop__lbl{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.07em;color:#111;margin-bottom:4px}
.mk-por-pop__lbl svg{color:var(--mk-danger)}
.mk-por-pop ol{list-style:none;margin:0;padding:0}
.mk-por-pop li{border-top:1px solid var(--mk-line)}
.mk-por-pop li:first-child{border-top:0}
.mk-por-pop li::before{content:none !important} /* motyw numeruje li przez ::before */
.mk-por-pop li a{display:flex;gap:14px;align-items:center;padding:14px 0;color:inherit;text-decoration:none}
.mk-por-pop__n{flex:none;font:800 16px/1 var(--mk-head);color:var(--mk-gray);width:24px;text-align:center}
.mk-por-pop li a:hover .mk-por-pop__n{color:var(--mk-red)}
.mk-por-pop b{display:block;font:700 13.5px/1.34 var(--mk-head);color:#111;margin-bottom:3px}
.mk-por-pop li a:hover b{color:var(--mk-red)}
.mk-por-pop small{font-size:11.5px;color:var(--mk-gray-dark)}
/* produkt polecany */
.mk-por-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:127px}
.mk-por-rec{background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-rb);padding:18px;box-shadow:var(--mk-soft)}
/* w środku prawdziwa miniatura z listingu — na całą szerokość karty */
.mk-por-rec .js-product{width:100% !important;max-width:none !important;flex:none;padding:0;display:block !important}
.mk-por-rec .mk-por-rec__eyebrow{margin-bottom:10px}
.mk-por-rec__eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.08em;color:var(--mk-danger);margin-bottom:14px}
.mk-por-rec__media{position:relative;display:block;aspect-ratio:1/1;background:#fff;border:1px solid var(--mk-border2);border-radius:var(--mk-rb-sm);overflow:hidden;margin-bottom:14px}
.mk-por-rec__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mk-por-rec__brand{font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.05em;color:var(--mk-gray-dark);margin-bottom:6px}
.mk-por-rec__name{display:block;font:700 15px/1.34 var(--mk-head);color:#111;margin-bottom:12px;min-height:2.7em;text-decoration:none}
.mk-por-rec__name:hover{color:var(--mk-red)}
.mk-por-rec__price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:14px}
.mk-por-rec__price span{font:800 22px/1 var(--mk-head);color:var(--mk-red)}
.mk-por-rec__price s{font-size:14px;color:var(--mk-gray)}
.mk-por-rec__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;background:#000;color:#fff;border-radius:var(--mk-pill);padding:14px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;transition:.15s}
.mk-por-rec__btn:hover{background:#2a2a2a;color:#fff}
/* promo banner sidebar */
.mk-por-promo{position:relative;display:flex;align-items:flex-end;min-height:172px;border-radius:var(--mk-rb);overflow:hidden;color:#fff;text-decoration:none}
.mk-por-promo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.mk-por-promo:hover .mk-por-promo__bg{transform:scale(1.05)}
.mk-por-promo__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,10,12,.9),rgba(9,10,12,.4) 68%,rgba(9,10,12,.12))}
.mk-por-promo__in{position:relative;padding:22px;display:flex;flex-direction:column}
.mk-por-promo__eyebrow{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:10px}
.mk-por-promo__eyebrow svg{color:var(--mk-success)}
.mk-por-promo__title{font:800 17px/1.25 var(--mk-head);letter-spacing:-.01em;margin-bottom:12px;color:#fff}
.mk-por-promo__cta{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font:700 12.5px/1 var(--mk-head);background:#fff;color:#111;padding:11px 18px;border-radius:var(--mk-pill);transition:.18s}
.mk-por-promo:hover .mk-por-promo__cta{background:var(--mk-success);color:#08160d}
@media(max-width:1000px){
.mk-por-hero{grid-template-columns:1fr}
.mk-por-layout{grid-template-columns:1fr}
.mk-por-side{position:static;flex-direction:row;flex-wrap:wrap}
.mk-por-side>*{flex:1 1 280px}
}
@media(max-width:700px){
.mk-por-mast{flex-direction:column;align-items:flex-start}
.mk-por-mast h1{font-size:30px !important}
.mk-por-main__grid{grid-template-columns:1fr}
.mk-por-feat{min-height:380px}
.mk-por-feat__title{font-size:25px}
.mk-por-side{flex-direction:column}
}
/* ==========================================================================
Widok wpisu bloga — wariant B (wpis.php?v=b)
========================================================================== */
#module-ds_blog-post #content-wrapper{flex:0 0 100%;max-width:100%;width:100%}
#module-ds_blog-post #content{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0;max-width:none}
.mk-wpis{max-width:1180px;margin:0 auto}
.mk-wpis__head{max-width:760px;margin:8px auto 26px;text-align:center}
.mk-wpis__cat{display:inline-block;font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.06em;
color:#111;background:#fff;border:1px solid var(--mk-border);padding:8px 13px;border-radius:var(--mk-pill);margin-bottom:16px;text-decoration:none}
.mk-wpis__cat:hover{border-color:#000;color:#000}
.mk-wpis__title{font:800 40px/1.12 var(--mk-head) !important;letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance;color:#121212}
.mk-wpis__meta{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--mk-gray-dark)}
.mk-wpis__meta b{color:#111;font-family:var(--mk-head)}
.mk-wpis__who{text-align:left}
.mk-wpis__who small{display:block;font-size:11.5px;color:var(--mk-gray-dark)}
.mk-wpis__av{width:38px;height:38px;border-radius:50%;background:#000;color:#fff;display:inline-grid;place-items:center;font:700 15px/1 var(--mk-head);flex:none;text-transform:uppercase}
.mk-wpis__mi{display:inline-flex;align-items:center;gap:5px}
.mk-wpis__dot{color:var(--mk-gray)}
.mk-wpis__cover{margin:0 0 30px;border-radius:18px;overflow:hidden;max-height:460px}
.mk-wpis__cover img{width:100%;height:100%;max-height:460px;object-fit:cover;display:block}
.mk-wpis__body{max-width:720px;margin:0 auto}
.mk-wpis__lead{font-size:18px !important;line-height:1.6;color:#222;font-weight:600;margin:0 0 22px}
.mk-wpis__body h2{font:800 24px/1.3 var(--mk-head) !important;letter-spacing:-.01em;margin:30px 0 12px;color:#121212;scroll-margin-top:170px}
.mk-wpis__body h3{font:700 19px/1.35 var(--mk-head) !important;margin:24px 0 10px;color:#121212;scroll-margin-top:170px}
.mk-wpis__body p{color:#333;line-height:1.75;margin:0 0 16px;font-size:16px !important}
.mk-wpis__body ul,.mk-wpis__body ol{color:#333;line-height:1.75;font-size:16px;margin:0 0 16px;padding-left:22px}
.mk-wpis__body blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid #000;font:600 19px/1.5 var(--mk-head);color:#111}
.mk-wpis__body img{max-width:100%;height:auto;border-radius:14px}
/* spis treści */
.mk-wpis-toc{margin:0 0 26px;border:1px solid var(--mk-line);border-radius:14px;padding:18px 22px;background:var(--mk-light)}
.mk-wpis-toc__lbl{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.06em;color:var(--mk-gray-dark);margin-bottom:12px}
.mk-wpis-toc__lbl svg{color:#111}
.mk-wpis-toc ol{margin:0;padding:0;list-style:none;counter-reset:mktoc}
.mk-wpis-toc li{counter-increment:mktoc;margin:0;padding:0}
.mk-wpis-toc li::before{content:none !important} /* motyw numeruje li przez ::before */
.mk-wpis-toc li+li{border-top:1px solid var(--mk-border2);margin-top:2px;padding-top:2px}
.mk-wpis-toc a{display:flex;gap:10px;align-items:baseline;padding:9px 0;font-size:14.5px;color:#333;line-height:1.4;text-decoration:none}
.mk-wpis-toc a::before{content:counter(mktoc,decimal-leading-zero);font:700 12px/1 var(--mk-head);color:var(--mk-danger);flex:none}
.mk-wpis-toc a:hover{color:#000}
/* karta autora */
.mk-wpis__author{max-width:720px;margin:34px auto 0;display:flex;gap:18px;align-items:flex-start;background:var(--mk-light);border-radius:16px;padding:24px}
.mk-wpis__av--lg{width:56px;height:56px;font-size:22px}
.mk-wpis__author b{font:800 17px/1 var(--mk-head)}
.mk-wpis__author-role{display:block;font-size:12.5px;color:var(--mk-danger);font-weight:700;margin:5px 0 9px}
.mk-wpis__author p{margin:0;font-size:14px;color:#555;line-height:1.6}
/* powiązane wpisy */
.mk-wpis-rel{max-width:1180px;margin:14px auto 40px}
.mk-wpis-rel .mk-guide-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.mk-wpis-rel .mk-guide-head h2{font:800 26px/1.2 var(--mk-head) !important;color:#121212;margin:0}
.mk-wpis-rel__all{display:inline-flex;align-items:center;gap:6px;font:700 13.5px/1 var(--mk-head);color:#111;text-decoration:none;white-space:nowrap}
.mk-wpis-rel__all:hover{color:var(--mk-red)}
.mk-wpis-rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.mk-wpis-rel__grid{grid-template-columns:1fr}}
@media(max-width:560px){.mk-wpis__title{font-size:29px !important}}
/* ── Poradnik/blog na PDP: odstęp od opinii + czystszy nagłówek ── */
#ds-blog-posts-for-product{margin-top:56px;padding-top:24px;border-top:1px solid var(--mk-line)}
#ds-blog-posts-for-product .title-section,
#ds-blog-posts-for-product h2,
#ds-blog-posts-for-product .h2{font:800 26px/1.2 var(--mk-head);margin:0 0 20px}
.mk-rev-wrap{margin-bottom:20px}
/* ==========================================================================
[FAZA 6] BOXY PRODUKTOWE — karta produktu na listach/sliderach wg makiety (.pc--b)
Dotyczy: lista kategorii, slidery na home, „Zobacz z tej serii" na PDP.
Selektory sklepu: .js-product > .product-miniature > .thumbnail-container
========================================================================== */
/* siatka: karty do naturalnej wysokości (bez stretch, który rozpychał je o ~50px) */
.products.row{align-content:flex-start;align-items:flex-start}
.js-product .product-miniature{margin:0;height:100%}
/* karta = zaokrąglony box z obwódką (jak .v-b .pc) */
.js-product .thumbnail-container{position:relative;display:flex;flex-direction:column;height:100%;
background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-rb);overflow:hidden;transition:.2s;box-shadow:none;padding:0}
.js-product .thumbnail-container:hover{box-shadow:var(--mk-soft2);transform:translateY(-3px);border-color:#e0e3e5}
.js-product .thumbnail-container::before,.js-product .thumbnail-container::after{display:none} /* usuń dekoracje motywu */
/* ── media: kwadrat, białe tło, obraz „contain", separator na dole ── */
/* motyw daje .thumbnail-top{border-radius:15px;border:1px} → zaokrąglało zdjęcie od DOŁU + gruba ramka wokół zdjęcia */
.js-product .thumbnail-top{position:relative;margin:0;padding:0;border-radius:0 !important;border:0 !important;box-shadow:none !important}
.js-product .thumbnail-top .thumbnail.product-thumbnail{display:block;position:relative;aspect-ratio:1/1;
background:#fff;border-bottom:1px solid var(--mk-line);margin:0;overflow:hidden}
.js-product .thumbnail-top .thumbnail.product-thumbnail picture{display:block;width:100%;height:100%}
.js-product .thumbnail-top .thumbnail.product-thumbnail img{width:100%;height:100%;object-fit:contain;padding:10px;display:block}
/* makieta B: BEZ podmiany zdjęcia na hover (tylko cień + uniesienie karty) */
.js-product .thumbnail-top .product-cover-hoover{display:none !important}
/* badge (flagi) — pigułka lewy górny róg (makieta .badge) */
.js-product .thumbnail-container .product-flags{position:absolute;top:12px;left:12px;z-index:3;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.js-product .thumbnail-container .product-flag{position:static;margin:0;background:#000;color:#fff;border-radius:var(--mk-pill);
padding:7px 12px;font:700 11px/1 var(--mk-head);letter-spacing:.03em;text-transform:uppercase;box-shadow:none}
.js-product .thumbnail-container .product-flag.discount,
.js-product .thumbnail-container .product-flag.on-sale{background:var(--mk-success)}
/* narzędzia (serce + porównaj) — okrągłe przyciski prawy górny róg */
.js-product .thumbnail-top .wishlist-button-add{position:absolute;top:11px;right:11px;z-index:3;width:34px;height:34px;
border-radius:50%;background:#fff;border:1px solid var(--mk-border);color:#111;display:grid;place-items:center;
box-shadow:var(--mk-soft);cursor:pointer;padding:0;margin:0;transition:.15s}
.js-product .thumbnail-top .wishlist-button-add:hover{color:var(--mk-danger);border-color:var(--mk-danger)}
.js-product .thumbnail-top .wishlist-button-add .material-icons{font-size:18px;line-height:1;color:#111}
.js-product .thumbnail-top .wishlist-button-add:hover .material-icons{color:var(--mk-danger)}
.js-product .thumbnail-top .wishlist-button-add.checked{color:var(--mk-danger)}
/* przycisk „dodaj do porównania" — okrągły, pod sercem (makieta .pc__tools) */
.js-product .thumbnail-top .mk-compare-btn{position:absolute;top:53px;right:11px;z-index:3;width:34px;height:34px;
border-radius:50%;background:#fff;border:1px solid var(--mk-border);color:#111;display:grid !important;place-items:center;
box-shadow:var(--mk-soft);cursor:pointer;padding:0;margin:0;transition:.15s;min-width:0}
.js-product .thumbnail-top .mk-compare-btn:hover{color:var(--mk-danger);border-color:var(--mk-danger);background:#fff}
.js-product .thumbnail-top .mk-compare-btn svg{width:17px;height:17px;display:block}
.js-product .thumbnail-top .mk-compare-btn.checked,
.js-product .thumbnail-top .mk-compare-btn.added{color:var(--mk-success);border-color:var(--mk-success)}
/* gdy brak serca (wishlist) — przenieś porównanie na górę */
.js-product .thumbnail-top:not(:has(.wishlist-button-add)) .mk-compare-btn{top:11px}
/* ── body: do lewej, marka · nazwa · cechy · wiersz zakupu ── */
.js-product .product-description{padding:14px 16px 16px;text-align:left;display:flex;flex-direction:column;flex:1;align-items:stretch}
/* wymuś lewą stronę też na dzieciach (slidery na home centrują nazwę/cechy przez align-items:center motywu) */
.js-product .product-description .product-title,
.js-product .product-description .product-title a,
.js-product .product-description .thumb-desc,
.js-product .product-description .thumb-buyrow,
.js-product .product-description .product-price-and-shipping,
.js-product .product-description .pc-brand{text-align:left}
/* motyw daje tytułowi display:flex;justify-content:center → wymuś start i blok */
.js-product .product-description .product-title{display:block;justify-content:flex-start}
.js-product .product-description .thumb-desc{display:block;justify-content:flex-start}
/* marka nad nazwą (makieta .pc__brand) */
.js-product .pc-brand{font:800 11px/1 var(--mk-head);letter-spacing:.07em;text-transform:uppercase;color:#111;
margin:0 0 6px;display:inline-flex;align-items:center;gap:7px}
.js-product .pc-brand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mk-danger);flex:none}
/* nazwa — 1 linia, przycięta */
.js-product .product-description .product-title{margin:0 0 8px}
.js-product .product-description .product-title a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
font:700 14.5px/1.3 var(--mk-head);color:#111;white-space:normal;overflow:hidden;text-overflow:ellipsis;min-height:2.6em}
.js-product .product-description .product-title a:hover{color:#000;text-decoration:none}
/* cechy — 1 linia, przycięte (klucz szary, wartość mocna) */
.js-product .thumb-desc{font-size:11px;color:var(--mk-gray-dark);margin:0 0 12px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;line-height:1.35}
.js-product .thumb-desc .name{color:#9aa0a4;font-weight:400}
.js-product .thumb-desc .value{color:#111;font-weight:700}
.js-product .thumb-desc br{display:none} /* wielolinie cech → 1 linia */
.js-product .thumb-desc .value br{display:none}
/* wiersz zakupu: cena z lewej + zielony przycisk z prawej (makieta .pc__buyrow) */
.js-product .thumb-buyrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto}
.js-product .product-price-and-shipping{margin:0;text-align:left;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;justify-content:flex-start;gap:2px 6px;min-height:34px}
.js-product .product-price-and-shipping .price{font:700 17px/1 var(--mk-head);color:#111}
.js-product .product-price-and-shipping .regular-price{font-size:13px;color:var(--mk-danger);text-decoration:line-through;font-weight:600}
.js-product .product-price-and-shipping .discount-percentage,
.js-product .product-price-and-shipping .discount-amount{display:none} /* rabat już jako badge lewy górny */
/* zielony kwadrat „do koszyka" (link do karty produktu) */
.js-product .thumb-add{flex:none;width:46px;height:46px;border-radius:12px;background:var(--mk-success);color:#fff;
display:grid;place-items:center;transition:.16s;box-shadow:none;border:0}
.js-product .thumb-add:hover{background:#3f9d5b;color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(76,187,108,.4)}
.js-product .thumb-add:active{transform:translateY(0)}
.js-product .thumb-add svg{width:19px;height:19px;display:block}
/* najniższa cena z 30 dni (Omnibus) — mała szara linia pod ceną, pełna szerokość */
.js-product .product-price-and-shipping .omnibus-lowest-price{flex-basis:100%;width:100%;margin:2px 0 0;
font-size:10.5px;line-height:1.3;color:var(--mk-gray-dark);font-weight:400;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.js-product .product-price-and-shipping .btn-link[data-target="#dsPriceHistory"],
.js-product .product-price-and-shipping #dsPriceHistory{display:none} /* na karcie bez historii/modala */
/* w karcie chowamy pusty blok recenzji (makieta karta B bez gwiazdek) */
.js-product .product-description .product-list-reviews:empty,
.js-product .product-description .comments_note:empty{display:none}
/* ==========================================================================
[FAZA 7] PDP DOLNE SEKCJE — nagłówki, specyfikacja, blog wg makiety
========================================================================== */
/* nagłówki sekcji (Opis produktu / Mocne strony / Specyfikacja) — makieta .pdp-sections h2 */
.product-description>h2,
.js-product-details>h2{font:800 26px/1.2 var(--mk-head) !important;letter-spacing:-.01em;color:#111;margin:44px 0 20px}
.product-description>h2:first-child{margin-top:24px}
/* treść opisu — czytelny RTE jak makieta (motyw dawał h2/h3 w treści 45px!) */
.product-description .rte,
.product-description .product-description-content{color:#444;line-height:1.7;max-width:900px}
.product-description h3,
.product-description .rte h3{font:700 20px/1.35 var(--mk-head) !important;margin:26px 0 12px;color:#111}
.product-description p{font-size:15px !important;line-height:1.75;color:#555;max-width:900px}
/* ── Specyfikacja: płaska data-sheet → czysty zaokrąglony box (makieta .specx/.spec2) ── */
.product-features{margin:0 0 8px}
.product-features .data-sheet{display:block;max-width:680px;border:1px solid var(--mk-border);border-radius:var(--mk-rb);
overflow:hidden;margin:0;padding:0;background:#fff}
.product-features .data-sheet .data-sheet-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
margin:0;padding:13px 18px;border-bottom:1px solid var(--mk-border2);background:#fff !important;min-height:0}
.product-features .data-sheet .data-sheet-row:nth-child(2n),
.product-features .data-sheet .data-sheet-row:nth-child(2n+1){background:#fff !important}
.product-features .data-sheet .data-sheet-row:last-child{border-bottom:0}
.product-features .data-sheet .data-sheet-label{color:#666;font:400 14px/1.4 var(--mk-font);flex:none;width:44%;padding:0;background:#fff !important;border:0}
.product-features .data-sheet .data-sheet-value{color:#111;font:600 14px/1.4 var(--mk-head);text-align:right;flex:1;min-width:0;padding:0;background:#fff !important}
.product-features .data-sheet .data-sheet-value a{color:#111;text-decoration:underline}
.product-features .data-sheet .data-sheet-value a:hover{color:var(--mk-red)}
/* ── Blog/Poradnik na PDP — kafle wg makiety (.guide-card) ── */
.title-section.with-more,
#ds-blog-posts-for-product .title-section{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}
.title-section.with-more h2,.title-section.with-more h3,
.title-section.with-more>span:first-child{font:800 26px/1.2 var(--mk-head);color:#111}
.title-section.with-more a,.title-section.with-more .with-more-link{font:700 13px/1 var(--mk-head);color:#111;text-transform:none}
.title-section.with-more a:hover{color:var(--mk-red)}
/* ==========================================================================
[FAZA 8] POPUP „ZAPYTAJ O PRODUKT" (ds_ask) → wygląd makiety .pmodal
========================================================================== */
.modal-ask.modal{background:rgba(0,0,0,.5)}
.modal-ask .modal-dialog{max-width:560px;width:94vw;margin:0 auto;min-height:100%;display:flex;align-items:center}
.modal-ask .modal-content{border:0;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
/* nagłówek ciemny + ikona słuchawki */
.modal-ask .modal-header{background:var(--mk-smoke);color:#fff;border:0;padding:18px 24px;display:flex;
align-items:center;justify-content:space-between;min-height:auto}
.modal-ask .modal-header span[id]{font:700 17px/1 var(--mk-head);color:#fff;display:flex;align-items:center;gap:10px}
.modal-ask .modal-header span[id]::before{content:"";width:22px;height:22px;flex:none;background:center/contain no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-3a8 8 0 0 1 16 0v3'/%3E%3Cpath d='M20 15a2 2 0 0 1-2 2h-1v-5h1a2 2 0 0 1 2 2z'/%3E%3Cpath d='M4 15a2 2 0 0 0 2 2h1v-5H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M20 15v2a4 4 0 0 1-4 4h-4'/%3E%3C/svg%3E")}
.modal-ask .modal-header .close{opacity:1;background:rgba(255,255,255,.14);border:0;width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;margin:0;padding:0;text-shadow:none;flex:none}
.modal-ask .modal-header .close:hover{background:rgba(255,255,255,.26)}
.modal-ask .modal-header .close svg path{fill:#fff}
/* body + lead */
.modal-ask .modal-body{padding:24px}
.modal-ask .modal-body>.row,.modal-ask .modal-body .col-md-12{margin:0;padding:0}
.modal-ask .modal-body::before{content:"Masz pytanie o ten produkt? Napisz — odpowiemy najszybciej jak to możliwe.";
display:block;font-size:13.5px;line-height:1.5;color:#666;margin:0 0 18px}
/* pola formularza */
.modal-ask .floating-label{margin:0 0 14px;position:relative}
.modal-ask .floating-label label{display:none}
.modal-ask .form-group.row{margin:0}
.modal-ask .form-control{width:100%;border:1px solid var(--mk-border);border-radius:10px;padding:12px 14px;font-size:14px;
outline:0;box-shadow:none;background:#fff;color:#111;font-family:var(--mk-font)}
.modal-ask textarea.form-control{min-height:120px;resize:vertical;padding:12px 14px}
.modal-ask input.form-control{height:46px;padding:0 14px}
.modal-ask .form-control:focus{border-color:#000}
.modal-ask .form-control::placeholder{color:var(--mk-gray) !important;opacity:1 !important}
.modal-ask .errors-container{margin:0 0 12px}
/* przycisk „Zadaj pytanie" — ciemna pigułka na całą szerokość */
.modal-ask #submit_ask{display:inline-flex;align-items:center;justify-content:center;width:100%;background:#000;color:#fff;
border:0;border-radius:999px;padding:15px 20px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;
cursor:pointer;margin-top:4px;transition:.16s}
.modal-ask #submit_ask:hover{background:#2a2a2a;color:#fff}
/* ==========================================================================
[FAZA 9] LOGOWANIE / REJESTRACJA / PRZYPOMNIENIE — karta auth2 wg makiety
========================================================================== */
#content.mk-auth2{display:grid;grid-template-columns:1.1fr .9fr;max-width:1000px;margin:24px auto 48px;
border:1px solid var(--mk-border);border-radius:16px;overflow:hidden;background:#fff;
box-shadow:0 20px 50px rgba(16,26,29,.07);padding:0}
.mk-auth2__form{padding:44px 44px 40px;min-width:0}
.mk-auth2__form h1{font:800 30px/1.1 var(--mk-head);letter-spacing:-.01em;margin:0 0 22px;color:#111}
/* pola: label nad polem, input pigułka-box */
.mk-auth2 .form-group,.mk-auth2 .form-group.row{display:block;margin:0 0 16px}
.mk-auth2 .form-group [class*="col-"],.mk-auth2 .form-group>div{width:100%;max-width:100%;flex:0 0 100%;padding:0}
/* pola zgód RODO/newsletter — checkbox + tekst w jednej linii, pełna szerokość */
.mk-auth2 .form-group.row [class*="col-"]{margin:0}
.mk-auth2 .custom-checkbox{display:flex;align-items:flex-start;gap:10px}
.mk-auth2 .custom-checkbox input[type="checkbox"]{flex:none;width:18px;height:18px;margin:1px 0 0}
.mk-auth2 .custom-checkbox label,.mk-auth2 .custom-checkbox span{font:400 13px/1.5 var(--mk-font);color:#555;margin:0}
.mk-auth2 .custom-checkbox label em,.mk-auth2 .custom-checkbox a{color:#000;text-decoration:underline}
/* opis pola (np. newsletter/rodo) — pełna szerokość, nie zawija po znaku */
.mk-auth2 .form-group .form-control-comment{font-size:12px;color:#888;margin-top:4px}
/* wszystkie kolumny Bootstrap w formularzu rejestracji → pełna szerokość (koniec z col-md-3 25%) */
.mk-auth2 .register-form [class*="col-md-"],
.mk-auth2 .register-form [class*="col-sm-"],
.mk-auth2 .register-form [class*="col-xs-"]{flex:0 0 100%;max-width:100%;width:100%;padding-left:0;padding-right:0}
.mk-auth2 .register-form .row,.mk-auth2 .register-form .form-group.row{display:block;margin:0 0 14px}
.mk-auth2 .register-form .form-control-label{margin-bottom:6px}
.mk-auth2 label,.mk-auth2 .form-control-label{display:block;text-align:left;font:600 13px/1 var(--mk-head);color:#333;margin:0 0 7px;padding:0;width:auto}
.mk-auth2 .form-control{width:100%;height:48px;border:1px solid var(--mk-border);border-radius:10px;padding:0 14px;
font-size:14px;background:#fff;color:#111;box-shadow:none;font-family:var(--mk-font)}
.mk-auth2 textarea.form-control{height:auto;min-height:96px;padding:12px 14px}
/* floating-label → etykieta statyczna NAD polem (column-reverse, bo label jest po input) */
.mk-auth2 .floating-label{position:static;margin:0 0 16px;display:flex;flex-direction:column-reverse}
.mk-auth2 .floating-label label{display:block;position:static;transform:none;opacity:1;top:auto;left:auto;
font:600 13px/1 var(--mk-head);color:#333;margin:0 0 7px;padding:0;background:none;pointer-events:auto}
/* opis na stronie przypomnienia */
.mk-auth2 .send-renew-password-link,.mk-auth2 header p{font-size:13.5px;line-height:1.6;color:#666;margin:0 0 18px}
.mk-auth2 .forgotten-password header{margin:0}
.mk-auth2 .form-control:focus{border-color:#000;box-shadow:none}
.mk-auth2 .input-group{display:flex;align-items:stretch}
.mk-auth2 .input-group .form-control{border-top-right-radius:0;border-bottom-right-radius:0}
.mk-auth2 .input-group .input-group-append,.mk-auth2 .input-group-btn{display:flex}
.mk-auth2 .input-group .btn,.mk-auth2 .input-group button{border:1px solid var(--mk-border);border-left:0;
border-radius:0 10px 10px 0;background:#fff;color:#888;padding:0 14px}
/* checkbox „zapamiętaj mnie"/zgody */
.mk-auth2 .custom-checkbox,.mk-auth2 .checkbox{font-size:13.5px;color:#444}
.mk-auth2 .custom-checkbox label{display:inline-flex;align-items:center;gap:8px;font-weight:400}
/* przycisk submit — ciemna pigułka pełna szerokość */
.mk-auth2 .form-footer{margin:8px 0 0;text-align:left}
.mk-auth2 #submit-login,.mk-auth2 .form-footer button,
.mk-auth2 button[type="submit"],.mk-auth2 .form-control-submit{width:100%;background:#000;color:#fff;border:0;
border-radius:999px;padding:15px 20px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:.16s}
.mk-auth2 #submit-login:hover,.mk-auth2 .form-footer button:hover,
.mk-auth2 button[type="submit"]:hover{background:#2a2a2a;color:#fff}
/* „nie pamiętasz hasła?" */
.mk-auth2__forgot{text-align:right;margin:-6px 0 0}
.mk-auth2__forgot a{font-size:13px;color:#555;text-decoration:underline}
.mk-auth2__forgot a:hover{color:#000}
/* separator „lub" */
.mk-auth2__sep{display:flex;align-items:center;gap:14px;color:#999;font-size:12px;margin:22px 0}
.mk-auth2__sep::before,.mk-auth2__sep::after{content:"";flex:1;height:1px;background:var(--mk-border)}
/* stopka „nie masz konta?" */
.mk-auth2 .no-account{text-align:center;font-size:14px;color:#555;display:block;padding:0}
.mk-auth2 .no-account .mk-auth2__alt,.mk-auth2 .no-account a{color:#000;font-weight:700;text-decoration:underline;margin-left:4px}
.mk-auth2 .no-account a:hover{color:var(--mk-red)}
/* ── prawy ciemny panel korzyści ── */
.mk-auth2__aside{background:var(--mk-smoke);color:#fff;padding:44px 40px}
.mk-auth2__eyebrow{display:block;color:var(--mk-success);font:800 12px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.mk-auth2__atitle{font:800 26px/1.2 var(--mk-head);color:#fff;margin:0 0 12px;letter-spacing:-.01em}
.mk-auth2__adesc{color:#b7bcbf;font-size:14px;line-height:1.6;margin:0 0 6px}
.mk-auth2__benefits{list-style:none;margin:14px 0 0;padding:0}
.mk-auth2__benefits li{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.mk-auth2__benefits .mk-bic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:var(--mk-success);flex:none}
.mk-auth2__benefits .mk-bic svg{width:20px;height:20px}
.mk-auth2__benefits b{display:block;font:700 14px/1.3 var(--mk-head);color:#fff;margin-bottom:2px}
.mk-auth2__benefits span{font-size:12.5px;color:#a7adb0;line-height:1.5}
@media(max-width:860px){#content.mk-auth2{grid-template-columns:1fr}.mk-auth2__aside{display:none}}
/* ── Rejestracja B: podtytuł, przełącznik B2C/B2B, pola firmowe, kroki ── */
.mk-auth2__sub{font-size:13.5px;line-height:1.6;color:#666;margin:0 0 20px}
.mk-acct-toggle{display:inline-flex;background:var(--mk-light);border-radius:var(--mk-pill);padding:5px;margin:0 0 22px;gap:4px;max-width:100%;flex-wrap:wrap}
.mk-acct-toggle button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;padding:11px 20px;border-radius:var(--mk-pill);font:700 13px/1 var(--mk-head);color:#555;transition:.15s}
.mk-acct-toggle button svg{flex:none}
.mk-acct-toggle button.on{background:#000;color:#fff}
.mk-b2b-note{display:flex;align-items:flex-start;gap:11px;background:var(--mk-light);border:1px solid var(--mk-border);border-left:3px solid var(--mk-success);border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:13px;color:#555;line-height:1.5}
.mk-b2b-note strong{color:#111;font-weight:700}
.mk-b2b-note-ic{color:var(--mk-success);display:flex;flex:none;margin-top:1px}
.mk-b2b-only{display:none}
.mk-reg--b2b .mk-b2b-only{display:block}
.mk-reg--b2b .mk-b2b-note.mk-b2b-only{display:flex}
.mk-field{margin-bottom:16px}
.mk-field label{display:block;font:600 13px/1 var(--mk-head);color:#333;margin:0 0 7px}
.mk-field .mk-req{color:var(--mk-danger)}
.mk-field input{width:100%;height:48px;border:1px solid var(--mk-border);border-radius:10px;padding:0 14px;font-size:14px;outline:0;background:#fff;transition:border-color .15s}
.mk-field input:focus{border-color:#000}
.mk-hint{font-size:12px;color:#999;margin-top:6px}
.mk-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.mk-field-row{grid-template-columns:1fr}}
/* kroki (aside rejestracji) */
.mk-asteps{margin-top:16px}
.mk-astep{display:flex;gap:14px;align-items:flex-start;padding:12px 0}
.mk-astep-n{width:30px;height:30px;border-radius:50%;background:var(--mk-success);color:#062;font:700 14px/1 var(--mk-head);display:grid;place-items:center;flex:none}
.mk-astep--todo .mk-astep-n{background:rgba(255,255,255,.12);color:#fff}
.mk-astep-tx b{display:block;font:700 14px/1.3 var(--mk-head);color:#fff;margin-bottom:2px}
.mk-astep-tx span{font-size:12.5px;color:#a7adb0;line-height:1.5}
.mk-asteps-foot{margin-top:10px}
.mk-astep-benefit{display:flex;gap:14px;align-items:flex-start;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.1)}
.mk-astep-benefit b{display:block;font:700 14px/1.3 var(--mk-head);color:#fff;margin-bottom:2px}
.mk-astep-benefit span{font-size:12.5px;color:#a7adb0;line-height:1.5}
/* ==========================================================================
[FAZA 10] KONTO KLIENTA — sidebar + kokpit + tabele + adresy + formularze
========================================================================== */
.mk-account{display:grid;grid-template-columns:270px 1fr;gap:34px;align-items:start;padding:20px 0 56px}
.mk-account__main{min-width:0}
/* ── Sidebar ── */
.mk-acc-side{border:1px solid var(--mk-border);border-radius:14px;overflow:hidden;background:#fff;position:sticky;top:20px}
.mk-acc-user{display:flex;align-items:center;gap:14px;padding:22px;border-bottom:1px solid var(--mk-border)}
.mk-acc-user__av{width:48px;height:48px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font:700 17px/1 var(--mk-head);flex:none;text-transform:uppercase}
.mk-acc-user__name{font:700 15px/1.2 var(--mk-head);color:#111}
.mk-acc-user__mail{font-size:12.5px;color:var(--mk-gray-dark);word-break:break-all}
.mk-acc-nav{list-style:none;margin:0;padding:8px 0}
.mk-acc-nav li{margin:0}
.mk-acc-nav a{display:flex;align-items:center;gap:12px;padding:13px 22px;color:#333;font:400 14px/1.2 var(--mk-font);transition:.14s}
.mk-acc-nav a .ic{color:#888;flex:none;display:flex}
.mk-acc-nav a .ic svg{width:19px;height:19px}
.mk-acc-nav a .cnt{margin-left:auto;background:var(--mk-light);color:#333;border-radius:999px;font:700 11px/1 var(--mk-head);padding:4px 8px}
.mk-acc-nav a:hover{background:var(--mk-light);color:#000;text-decoration:none}
.mk-acc-nav a.on{background:var(--mk-light);color:#000;font-weight:700;box-shadow:inset 3px 0 0 #000}
.mk-acc-nav a.on .ic{color:#000}
.mk-acc-nav__logout{color:var(--mk-danger) !important}
.mk-acc-nav__logout .ic{color:var(--mk-danger) !important}
/* ── Main: nagłówek + treść ── */
.mk-account__main .page-header{margin:0 0 8px;padding:0;border:0}
.mk-account__main .page-header h1{font:800 28px/1.1 var(--mk-head);letter-spacing:-.01em;color:#111;margin:0}
.mk-account__main .page-content{padding:0;border:0;background:none;box-shadow:none;margin:0}
/* ukryj dolny blok linków (zastąpiony sidebarem) */
.mk-account .page-footer{display:none}
.mk-account__main hr{display:none}
/* ── Kokpit: kafle (my-account .links → acc-tile) ── */
.mk-account .links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 0}
.mk-account .links a,.mk-account .links .link-item{display:flex;flex-direction:column;gap:10px;border:1px solid var(--mk-border);
border-radius:14px;padding:22px;background:#fff;color:#111;transition:.16s;text-align:left;width:auto;max-width:none;flex:none}
.mk-account .links a{margin:0}
.mk-account .links a:hover{box-shadow:var(--mk-soft);transform:translateY(-2px);text-decoration:none;border-color:#e0e3e5}
.mk-account .links .link-item{border:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mk-account .links a i.material-icons,.mk-account .links .link-item i,.mk-account .links .material-icons{width:46px !important;height:46px !important;
min-width:46px;max-width:46px;flex:none !important;border-radius:12px;background:var(--mk-light);
display:inline-grid;place-items:center;color:#111;font-size:22px;margin:0;padding:0}
.mk-account .links a span:not(.link-item){font:700 16px/1.3 var(--mk-head);color:#111}
/* ── Tabele (historia zamówień, zwroty, kupony) ── */
.mk-account table,.mk-account .table{width:100%;border-collapse:collapse;border:1px solid var(--mk-border);border-radius:14px;
overflow:hidden;background:#fff;margin:0 0 24px}
.mk-account table thead th,.mk-account .table thead th{text-align:left;font:700 11px/1 var(--mk-head);text-transform:uppercase;
letter-spacing:.04em;color:#888;padding:15px 18px;border-bottom:1px solid var(--mk-border);background:#fafbfb}
.mk-account table tbody td,.mk-account .table tbody td{padding:16px 18px;border-bottom:1px solid var(--mk-line);font-size:14px;color:#333;vertical-align:middle}
.mk-account table tbody tr:last-child td{border-bottom:0}
.mk-account table a.btn,.mk-account .table a{color:#111}
.mk-account .order-actions a,.mk-account table .btn{color:#111;text-decoration:underline;font-weight:600;background:none;border:0;padding:0}
/* status jako pigułka */
.mk-account .label,.mk-account .order-status span,.mk-account .badge{display:inline-block;border-radius:999px;padding:5px 11px;
font:700 11px/1 var(--mk-head);text-transform:none}
/* ── Adresy (karty) ── */
.mk-account #addresses,.mk-account .addresses-lists{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;list-style:none;margin:0;padding:0}
.mk-account .address{border:1px solid var(--mk-border);border-radius:14px;padding:22px;background:#fff;height:100%}
.mk-account .address .address-header,.mk-account .address h4{font:700 16px/1.2 var(--mk-head);color:#111;margin:0 0 12px}
.mk-account .address .address-body{font-size:14px;color:#444;line-height:1.7}
.mk-account .address .address-body address{font-style:normal;margin:0}
.mk-account .address .address-footer{display:flex;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--mk-line)}
.mk-account .address .address-footer a{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--mk-head);color:#111;text-decoration:none}
.mk-account .address .address-footer a[data-link-action="delete-address"]{color:var(--mk-danger)}
.mk-account .address .address-footer a:hover{text-decoration:underline}
/* ── Formularze konta (dane osobowe, adres) ── */
.mk-account form .form-group,.mk-account form .form-group.row{display:block;margin:0 0 16px}
.mk-account form .form-group [class*="col-"]{width:100%;max-width:100%;flex:0 0 100%;padding:0}
.mk-account form label,.mk-account form .form-control-label{display:block;text-align:left;font:600 13px/1 var(--mk-head);color:#333;margin:0 0 7px;width:auto}
.mk-account form .form-control{width:100%;height:48px;border:1px solid var(--mk-border);border-radius:10px;padding:0 14px;font-size:14px;box-shadow:none;background:#fff}
.mk-account form textarea.form-control{height:auto;min-height:96px;padding:12px 14px}
.mk-account form .form-control:focus{border-color:#000;box-shadow:none}
.mk-account form .floating-label{display:flex;flex-direction:column-reverse;margin:0 0 16px}
.mk-account form .floating-label label{position:static;transform:none;opacity:1}
.mk-account form .custom-checkbox{display:flex;align-items:flex-start;gap:10px}
.mk-account form .custom-checkbox input[type="checkbox"]{flex:none;width:18px;height:18px;margin:1px 0 0}
.mk-account form .form-control-submit,.mk-account form button[type="submit"],.mk-account .btn-primary{background:#000;color:#fff;
border:0;border-radius:999px;padding:14px 28px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;width:auto}
.mk-account form .form-control-submit:hover,.mk-account .btn-primary:hover{background:#2a2a2a;color:#fff}
/* przyciski wtórne */
.mk-account .btn-secondary,.mk-account .btn-outline,.mk-account a.btn:not(.btn-primary){border:1px solid #000;background:#fff;color:#000;
border-radius:999px;padding:12px 22px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em}
.mk-account .btn-secondary:hover,.mk-account a.btn:not(.btn-primary):hover{background:#000;color:#fff}
@media(max-width:900px){.mk-account{grid-template-columns:1fr}.mk-acc-side{position:static}
.mk-account .links{grid-template-columns:repeat(2,1fr)}.mk-account #addresses,.mk-account .addresses-lists{grid-template-columns:1fr}}
/* ==========================================================================
[FAZA 11] STOPKA — kolumna marki (logo+tagline+social) wg makiety
========================================================================== */
.footer-top .row{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start}
.footer-top .row>[class*="col-"]{flex:1 1 0;max-width:none;width:auto;padding:0;margin:0;min-width:150px}
.mk-foot-brand{flex:0 0 230px;max-width:230px}
.mk-foot-logo{display:inline-block;margin-bottom:16px}
.mk-foot-logo img{height:38px;width:auto;filter:brightness(0) invert(1)}
.mk-foot-logo span{color:#fff;font:800 20px/1 var(--mk-head)}
.mk-foot-tag{color:#9a9d9f;font-size:13.5px;line-height:1.6;margin:0 0 18px}
.mk-foot-social{display:flex;gap:10px}
.mk-foot-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;
display:grid;place-items:center;transition:.15s}
.mk-foot-social a:hover{background:#fff;color:#000}
@media(max-width:900px){.mk-foot-brand{flex:0 0 100%;max-width:100%}}
/* ==========================================================================
[FAZA 12] HOME „Nasza oferta" — kafle z etykietą NA obrazie (overlay) wg makiety
========================================================================== */
.category-nav .category-item .category-link{position:relative;display:block;border-radius:var(--mk-rb);overflow:hidden;aspect-ratio:1.3/1}
.category-nav .category-item .category-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:.45s}
.category-nav .category-item .category-link:hover img{transform:scale(1.06)}
.category-nav .category-item .category-link::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.12) 55%,rgba(0,0,0,0) 80%)}
.category-nav .category-item .category-link>span{position:absolute;left:20px;right:18px;bottom:16px;z-index:2;
display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;color:#fff}
.category-nav .category-item .category-link>span>span:first-child,
.category-nav .category-item .category-link>span:not(.arrow-wrap){font:800 20px/1.15 var(--mk-head);color:#fff}
.category-nav .category-item .category-link .arrow-wrap{width:36px;height:36px;border-radius:50%;flex:none;transition:.15s;
background-color:rgba(255,255,255,.2);background-position:center;background-repeat:no-repeat;background-size:16px 16px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E")}
.category-nav .category-item .category-link:hover .arrow-wrap{background-color:rgba(255,255,255,.32)}
/* długa strzałka motywu (41×9) ściśnięta w kółku jest nieczytelna → chowamy, chevron jako tło */
.category-nav .category-item .category-link .arrow-wrap svg{display:none}
/* motyw podkreśla nazwę kafla border-bottom:1px solid #fff → usuwamy (makieta bez podkreślenia) */
.category-nav .category-item .category-link>span>span{border-bottom:0 !important}
/* poprawka: etykieta kafla oferty bez podkreślenia */
.category-nav .category-item .category-link>span>span,
.category-nav .category-item .category-link>span{text-decoration:none}
/* ── HOME „Sprawdź nasz poradnik" — kafle wg makiety (.guide-card) ── */
.col-bloghome-post .post-thumb-list{position:relative;display:flex;flex-direction:column;height:100%;
border:1px solid var(--mk-line);border-radius:var(--mk-rb);overflow:hidden;background:#fff;transition:.18s}
.col-bloghome-post .post-thumb-list:hover{box-shadow:var(--mk-soft2);transform:translateY(-3px);border-color:#e0e3e5}
.col-bloghome-post .post-thumb-list__image{margin:0;aspect-ratio:16/10;overflow:hidden}
.col-bloghome-post .post-thumb-list__image a{display:block;height:100%}
.col-bloghome-post .post-thumb-list__image img{width:100%;height:100%;object-fit:cover;transition:.4s}
.col-bloghome-post .post-thumb-list:hover .post-thumb-list__image img{transform:scale(1.05)}
.col-bloghome-post .post-thumb-list__content{background:#fff;padding:20px;display:flex;flex-direction:column;flex:1;position:static}
.col-bloghome-post .post-date{position:absolute;top:14px;left:14px;z-index:2;background:#fff;color:#111;
border-radius:999px;padding:7px 11px;font:700 11px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.col-bloghome-post .post-date:hover{color:var(--mk-red)}
.col-bloghome-post .post-thumb-list__title{margin:0;font:700 17px/1.35 var(--mk-head)}
.col-bloghome-post .post-thumb-list__title a{color:#111;text-decoration:none}
.col-bloghome-post .post-thumb-list__title a:hover{color:var(--mk-red)}
.col-bloghome-post .post-thumb-list__title svg{display:none}
/* ── Newsletter: zielona ikona koperty po lewej stronie tekstu (jak makieta) ── */
.footer-newsletter .block_newsletter .row>div:first-child:has(#block-newsletter-label){position:relative;padding-left:84px}
.footer-newsletter .block_newsletter .row>div:first-child:has(#block-newsletter-label)::before{content:"";position:absolute;left:0;top:2px;width:60px;height:60px;
border-radius:16px;background:var(--mk-success) center/28px 28px no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
@media(max-width:600px){.footer-newsletter .block_newsletter .row>div:first-child{padding-left:0}
.footer-newsletter .block_newsletter .row>div:first-child::before{display:none}}
/* ==========================================================================
[FAZA 13] HOME — kompaktowe odstępy sekcji (motyw dawał 140px → makieta ~40px)
========================================================================== */
.home-sections{margin-top:24px !important}
.home-sections .home-icons-container{margin:34px auto !important}
.home-sections .menu-categories{margin:44px 0 !important}
.home-sections .featured-products{padding:44px 0 !important}
.home-sections .featured-products.pb-0{padding-bottom:0 !important}
.home-sections .featured-products.pt-0{padding-top:0 !important}
.home-sections .ds-banners{margin:44px 0 0 !important}
.home-sections .ds-banners.hook-displayHomeBottom{margin:44px 0 0 !important}
/* nagłówki sekcji home — mniejszy odstęp dolny */
.home-sections .title-section{margin-bottom:22px !important}
/* about „Poznaj nas" / blog — normalne odstępy */
.home-sections .ds-blog-home,.home-sections [class*="about"]{margin:44px 0 !important}
/* etykieta kafla oferty — bez podkreślenia (wymuszone) */
.category-nav .category-item .category-link,
.category-nav .category-item .category-link *{text-decoration:none !important}
/* ── Stopka: szersze kolumny (mniej zawijania) + newsletter przycisk czarny ── */
.footer-top .row{gap:24px}
.mk-foot-brand{flex:0 0 200px;max-width:200px}
.footer-top .row>[class*="col-"]{min-width:120px}
.footer-container .footer-top a,.js-footer .footer-top a{font-size:13.5px;line-height:1.5}
.footer-container .links-list li,.js-footer .links-list li{margin-bottom:2px}
/* newsletter „ZAPISZ SIĘ" — czarny (makieta), nie szary */
.footer-newsletter .block_newsletter input.btn,
.footer-newsletter .block_newsletter button.btn,
.footer-newsletter .block_newsletter .btn-default{background:#000 !important;color:#fff !important;border:0 !important;
border-radius:999px !important;font:700 13px/1 var(--mk-head) !important;text-transform:uppercase;letter-spacing:.03em;padding:0 26px !important;height:52px !important}
.footer-newsletter .block_newsletter input.btn:hover,
.footer-newsletter .block_newsletter .btn-default:hover{background:#2a2a2a !important}
/* newsletter przycisk — czarny (mocniejszy selektor) */
#blockEmailSubscription_displayFooterBefore input.btn,
#blockEmailSubscription_displayFooterBefore input[type="submit"],
.footer-newsletter input[type="submit"],
.footer-newsletter .block_newsletter input.btn-default,
.footer-newsletter .block_newsletter input.btn{background-color:#000 !important;color:#fff !important}
/* pole e-mail newslettera — zawsze białe (nie łapać go regułą przycisku) */
.footer-newsletter .block_newsletter input[type="email"],
.footer-newsletter .block_newsletter input[name="email"]{background-color:#fff !important;color:#111 !important}
/* stopka — węższa kolumna marki, mniejszy odstęp (mniej zawijania linków) */
.mk-foot-brand{flex:0 0 178px;max-width:178px}
.footer-top .row{gap:20px}
/* ==========================================================================
[FAZA 15] STOPKA (czcionki), BANERY DUO, SEKCJA O NAS, NEWSLETTER — wg makiety
========================================================================== */
/* ── Stopka: mniejsze czcionki jak makieta ── */
.footer-container .footer-top p.h3,.footer-container .footer-top .h3{font:700 15px/1.3 var(--mk-head) !important;
text-transform:uppercase;letter-spacing:.03em;color:#fff;margin-bottom:16px}
.footer-container .footer-navbar-nav .nav-link{font-size:14px !important;padding:4px 0 !important;line-height:1.5}
.footer-container .block-contact a.phone{font:700 26px/1.2 var(--mk-head) !important;color:#fff}
.footer-container .block-contact a.mail{font:700 17px/1.3 var(--mk-head) !important;color:#fff;text-transform:none !important;word-break:break-word}
.footer-container .block-contact .h3{font:700 13px/1.3 var(--mk-head) !important;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.footer-container .block-contact{font-size:13px}
/* ── Banery duo: zaokrąglenie + cień jak makieta (.v-b .duo__item) ── */
.ds-banners .ds-banner__link{display:block;border-radius:var(--mk-rb);overflow:hidden;box-shadow:var(--mk-soft);transition:.2s}
.ds-banners .ds-banner__link:hover{box-shadow:var(--mk-soft2);transform:translateY(-2px)}
.ds-banners .ds-banner__link picture,.ds-banners .ds-banner__link img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--mk-rb)}
/* ── Sekcja „O nas" (ds_staticblock) → wygląd makiety .aboutx ── */
.row-home-about-bottom{align-items:center}
.row-home-about-bottom .about-left img,.row-home-about-bottom .about-left picture img{width:100%;height:auto;
border-radius:20px;box-shadow:var(--mk-soft2);display:block}
.row-home-about-bottom .staticblock h4{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--mk-head);
letter-spacing:.12em;text-transform:uppercase;color:var(--mk-danger);margin:0 0 14px}
.row-home-about-bottom .staticblock h3{font:800 34px/1.1 var(--mk-head);letter-spacing:-.02em;color:#111;margin:0 0 18px}
.row-home-about-bottom .staticblock p{color:#555;line-height:1.75;margin:0 0 14px;font-size:15px}
.row-home-about-bottom .staticblock p:first-of-type{color:#2a2a2a;font-weight:600;font-size:16px}
.row-home-about-bottom .staticblock a.btn,.row-home-about-bottom .staticblock .btn,
.row-home-about-bottom .about-right a:not(.nav-link){display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;
border:0;border-radius:999px;padding:15px 28px;font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.03em;margin-top:8px;transition:.16s}
.row-home-about-bottom .staticblock a.btn:hover,.row-home-about-bottom .about-right a:not(.nav-link):hover{background:#2a2a2a;color:#fff}
/* motyw .btn-border wygrywał kolorem → czarny tekst na czarnym tle; wymuś biały.
antialiased — subpiksele dawały kolorowe obwódki liter na czarnym */
.row-home-about-bottom .btn.btn-border,.row-home-about-bottom a.btn{background:#000 !important;color:#fff !important;border-color:#000 !important;
-webkit-font-smoothing:antialiased;text-shadow:none !important}
.row-home-about-bottom .btn.btn-border:hover,.row-home-about-bottom a.btn:hover{background:#2a2a2a !important;color:#fff !important}
/* ── Newsletter: dopieszczenie (pola pigułki, zwarty układ) ── */
.footer-newsletter .block_newsletter #block-newsletter-label{font:800 26px/1.1 var(--mk-head) !important;color:#111;text-transform:none;margin:0 0 8px}
.footer-newsletter .block_newsletter p{color:#666;font-size:14px;line-height:1.5;margin:0}
.footer-newsletter .block_newsletter input[type="email"],.footer-newsletter .block_newsletter input[name="email"]{height:54px;border:1px solid var(--mk-border);border-radius:999px;padding:0 20px;font-size:14px;background:#fff}
.footer-newsletter .block_newsletter input.btn,.footer-newsletter .block_newsletter input[type="submit"]{height:54px !important;border-radius:999px !important;padding:0 30px !important}
.footer-newsletter .block_newsletter .form-group,.footer-newsletter .block_newsletter form>.row{gap:12px}
/* ── O nas: staty + badge + cytat (dodane do treści bloku) ── */
.mk-aboutx-stats{display:flex;gap:12px;margin:24px 0;border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line);padding:18px 0}
.mk-aboutx-stats>div{flex:1}
.mk-aboutx-stats b{display:block;font:800 26px/1 var(--mk-head);color:#111}
.mk-aboutx-stats span{font-size:12px;color:var(--mk-gray-dark)}
.mk-aboutx-quote{font-style:italic;color:var(--mk-gray-dark);font-size:14px;margin-left:16px;font-weight:400;text-transform:none;letter-spacing:0}
.row-home-about-bottom .staticblock .mk-aboutx-media{position:relative;display:inline-block;width:100%}
.mk-aboutx-badge{position:absolute;left:20px;bottom:20px;z-index:2;background:#fff;border-radius:14px;padding:13px 18px;
box-shadow:var(--mk-soft2);display:flex;flex-direction:column;line-height:1.1}
.mk-aboutx-badge b{font:800 22px/1 var(--mk-head);color:#111}
.mk-aboutx-badge span{font-size:11.5px;color:var(--mk-gray-dark);margin-top:3px}
/* ==========================================================================
[FAZA 14] KARUZELE PRODUKTÓW HOME — peek + swipe + strzałki (brak slick na tych sekcjach)
========================================================================== */
.featured-products .products.row.mk-car{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:24px;margin:0;padding:4px 2px 12px;
scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.featured-products .products.row.mk-car::-webkit-scrollbar{display:none}
.featured-products .products.row.mk-car.mk-car--drag{cursor:grabbing;scroll-snap-type:none}
/* szerokość karty jak makieta: .carousel__item{flex-basis:clamp(240px,23%,300px)} */
.featured-products .products.row.mk-car>.js-product{display:block !important;flex:none !important;
width:clamp(240px,23%,300px) !important;max-width:none;
scroll-snap-align:start;padding:0;margin:0}
.mk-car.mk-car--drag a{pointer-events:none}
.featured-products .title-section{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.featured-products .title-section-nav{display:flex;gap:10px;flex:none}
.mk-car-btn{width:44px;height:44px;border:1px solid var(--mk-border);border-radius:50%;background:#fff;display:grid;
place-items:center;cursor:pointer;color:#333;transition:.15s;padding:0}
.mk-car-btn:hover{border-color:#000;color:#000}
.mk-car-btn.is-off{opacity:.35;pointer-events:none}
.featured-products.primary-dark-bg .mk-car-btn{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.featured-products.primary-dark-bg .mk-car-btn:hover{border-color:#fff;color:#fff}
/* ==========================================================================
[FAZA 16] SZEROKI KONTENER + HERO KROPKI + IKONY ZAUFANIA + KARUZELA PORADNIKA
========================================================================== */
/* ── Kontener treści jak makieta .wrap (max 1720px, padding 40px) ── */
@media(min-width:1240px){
/* motyw ustawia width:1500px (nie max-width) → nadpisujemy oba */
.container{width:100% !important;max-width:1720px !important;padding-left:40px;padding-right:40px}
}
/* ── Hero slider: kropki jak makieta .hero__dots (aktywna = biała pigułka 26px) ── */
#homeslider{position:relative}
#homeslider .slick-dots{position:absolute;top:auto !important;bottom:22px !important;left:50% !important;
width:auto !important;height:auto !important;transform:translateX(-50%);display:flex !important;
gap:9px;z-index:5;margin:0;padding:0;list-style:none;text-align:center}
#homeslider .slick-dots li{margin:0;padding:0;width:auto;height:auto;display:block}
#homeslider .slick-dots li button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);border:0;
padding:0;font-size:0;line-height:0;text-indent:-9999px;overflow:hidden;cursor:pointer;transition:.2s;display:block}
#homeslider .slick-dots li.slick-active button{background:#fff;width:26px;border-radius:6px}
#homeslider .slick-arrow{display:none !important}
/* ── Ikony zaufania pod sliderem — jak makieta .reassurance (tekst 14px, 4 równe kolumny) ── */
.home-icons-container .home-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;justify-content:stretch}
.home-icons .staticblock-icon{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;text-align:left}
.home-icons .staticblock-icon p{margin:0}
.home-icons .staticblock-icon p:last-child{font-size:14px !important;line-height:1.35 !important;color:#222}
.home-icons .staticblock-icon p:first-child img{width:36px;height:36px;display:block}
@media(max-width:767px){.home-icons-container .home-icons{grid-template-columns:repeat(2,1fr)}}
/* ── „Z naszego poradnika" — karuzela wpisów (4. wpis wystaje) jak makieta ── */
.ds-blog-recent .title-section.with-more{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ds-blog-recent .title-section-more{display:flex;align-items:center;gap:18px;flex:none}
/* przycisk „zobacz pozostałe" → tekstowy link jak makieta .carousel-all */
.ds-blog-recent .title-section .btn.btn-border{background:none !important;border:0 !important;padding:0 !important;
color:#111 !important;font:700 13px/1 var(--mk-head) !important;text-transform:none;letter-spacing:0;white-space:nowrap}
.ds-blog-recent .title-section .btn.btn-border:hover{color:var(--mk-danger) !important}
/* motyw daje .title-section-nav absolute right:0 → kółka nachodziły na „Wszystkie wpisy" */
.ds-blog-recent .title-section-nav{display:flex;gap:10px;flex:none;position:static !important;right:auto !important;top:auto !important}
/* track karuzeli */
.ds-blog-recent .row.mk-car{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:24px;margin:0;padding:4px 2px 12px;
scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.ds-blog-recent .row.mk-car::-webkit-scrollbar{display:none}
.ds-blog-recent .row.mk-car.mk-car--drag{cursor:grabbing;scroll-snap-type:none}
/* szerokość kafla jak makieta .carousel__item--blog{flex-basis:clamp(300px,31%,390px)} → 4. wystaje */
.ds-blog-recent .row.mk-car>.col-bloghome-post{flex:0 0 clamp(300px,31%,390px);width:auto;max-width:none;
scroll-snap-align:start;padding:0;margin:0}
/* stopka kafla: data · „Czytaj →" (jak makieta .guide-card__foot) */
.col-bloghome-post .post-thumb-list__title{margin:0 0 8px}
.col-bloghome-post .post-thumb-list__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:auto;padding-top:14px;border-top:1px solid var(--mk-line)}
.col-bloghome-post .post-foot-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mk-gray-dark)}
.col-bloghome-post .post-foot-more{display:inline-flex;align-items:center;gap:5px;font:700 13px/1 var(--mk-head);color:#111}
.col-bloghome-post .post-foot-more svg{width:11px;height:9px;display:block}
.col-bloghome-post .post-thumb-list:hover .post-foot-more{color:var(--mk-red)}
/* dolny przycisk „zobacz pozostałe" — tylko mobile (desktop ma link + strzałki w nagłówku) */
.ds-blog-recent .blog-recent-btn-wrap{display:none}
@media(max-width:767px){.ds-blog-recent .blog-recent-btn-wrap{display:block;text-align:center;margin-top:16px}}
/* ==========================================================================
[FAZA 17] HOME 3. przegląd: szare tło strony, nagłówki sekcji, hero 520,
ciemna sekcja SALE, about wg .aboutx, newsletter .nlx, stopka .footerx,
top kompaktowy, widget opinii .rvw
========================================================================== */
/* ── Szare tło strony (makieta .v-b{background:#fafbfb}) — białe karty się odcinają ── */
body{background:#fafbfb !important}
#wrapper{background:transparent !important}
/* ── Topbar (static-bar) — niższy jak makieta (34px, font 13px) ── */
#header .static-bar{padding:0}
#header .static-bar .inner{padding:0}
#header .static-bar .flexbox{min-height:34px;align-items:center}
#header .static-bar p{font-size:13px;margin:0;line-height:34px}
#header .static-bar .close .material-icons{font-size:16px}
/* ── Nagłówki sekcji home — 26px Manrope, mały odstęp (motyw: 40px + margin-bottom 70px!) ── */
.title-section h3,
.ds-blog-recent .title-section h3,
.featured-products .title-section h3{font:800 26px/1.2 var(--mk-head) !important;letter-spacing:-.01em;
margin:0 !important;text-transform:capitalize;color:#121212} /* czarny — inherit łapał szarość motywu */
.featured-products.primary-dark-bg .title-section h3{color:#fff}
/* ── Hero slider: 520px, panoramiczny (cover) ── */
#homeslider .slide img.banner-image{width:100% !important;height:520px !important;object-fit:cover;display:block}
/* kropki: ul bywa szeroki (motyw wymusza width) → centrum przez justify-content */
#homeslider .slick-dots{justify-content:center}
/* ── Ciemna sekcja „Aktualne Promocje" — głębsza czerń + faktura + watermark SALE (makieta .v-b .section--dark) ── */
.featured-products.primary-dark-bg{position:relative;overflow:hidden;
background-color:#17181c !important;
background-image:radial-gradient(circle at 88% 8%, rgba(255,76,76,.18), transparent 42%),
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) !important;
background-size:auto, 22px 22px !important}
.featured-products.primary-dark-bg::before{content:"SALE";position:absolute;right:-10px;bottom:-38px;
font:900 220px/1 var(--mk-head);letter-spacing:-.04em;color:rgba(255,255,255,.03);pointer-events:none;z-index:0}
.featured-products.primary-dark-bg .container{position:relative;z-index:1}
/* ── Banery duo: przycisk outline-light (ramka, hover biały) + delikatne przyciemnienie zdjęcia ── */
.ds-banners .btn,.ds-banner .btn,.ds-banner__content .btn{background:transparent !important;color:#fff !important;
border:1px solid rgba(255,255,255,.4) !important;border-radius:999px !important;
font:700 13px/1 var(--mk-head) !important;letter-spacing:.03em;text-transform:uppercase;padding:14px 26px !important;transition:.18s}
.ds-banners .btn:hover,.ds-banner .btn:hover,.ds-banner__content .btn:hover{background:#fff !important;color:#000 !important;border-color:#fff !important}
/* motyw na hover CAŁEGO banera bieli przycisk nie zmieniając tekstu → biały na białym */
.ds-banners .ds-banner__link:hover .btn,.ds-banners a:hover .cta-content .btn{background:#fff !important;color:#000 !important;border-color:#fff !important}
.ds-banners .ds-banner__link{position:relative}
.ds-banners .ds-banner__link::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.05));pointer-events:none;border-radius:var(--mk-rb);z-index:1}
/* wysokość jak makieta .duo__item (300px) — tpl daje inline aspect-ratio → override */
.ds-banners .ds-banner__link{aspect-ratio:auto !important;height:300px;display:flex;align-items:center;overflow:hidden}
.ds-banners .ds-banner__link picture{position:absolute;inset:0;margin:0}
.ds-banners .ds-banner__link picture img{width:100%;height:100%;object-fit:cover}
/* treść: białe teksty, wyrównanie do lewej z paddingiem 44 (makieta .duo__content) */
.ds-banners .cta-content{position:relative;z-index:2;display:flex;flex-direction:column !important;
align-items:flex-start !important;justify-content:center !important;
padding:0 44px;max-width:70%;text-align:left;left:auto !important;right:auto !important;inset:auto}
.ds-banners .cta-content .h3{color:#fff !important;font:800 26px/1.25 var(--mk-head) !important;
text-shadow:0 2px 14px rgba(0,0,0,.35);margin:0}
.ds-banners .cta-content .h4{color:#fff !important;font:700 13px/1.2 var(--mk-head) !important;
letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;opacity:.9}
/* przycisk ZAWSZE pod tekstem (motyw w hook-displayHomeBottom daje absolute po prawej → wystawał poza baner) */
.ds-banners .cta-content .btn{position:static !important;right:auto !important;top:auto !important;
transform:none !important;margin:18px 0 0 !important;align-self:flex-start}
/* ── Sekcja „Poznaj nas" — układ .aboutx: obraz 1fr / tekst 1.05fr od środka strony ── */
.row-home-about-bottom{display:grid !important;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin:0}
.row-home-about-bottom .about-left,.row-home-about-bottom .about-right{flex:none;width:auto;max-width:none;padding:0}
.row-home-about-bottom .about-left img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
/* eyebrow z piorunem (makieta .aboutx__eyebrow + ui_icon zap) */
.row-home-about-bottom .staticblock h4::before{content:"";width:14px;height:14px;flex:none;display:inline-block;
background:center/contain no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23ff4c4c'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E")}
.row-home-about-bottom .staticblock h3{font:800 36px/1.15 var(--mk-head);letter-spacing:-.02em;margin:14px 0 16px;text-transform:none}
@media(max-width:960px){.row-home-about-bottom{grid-template-columns:1fr;gap:28px}}
/* ── Poradnik: zdjęcie bez zaokrągleń wewnętrznych (motyw daje img radius 15 + treść nachodzi z radiusem) ── */
.col-bloghome-post .post-thumb-list__image img{border-radius:0 !important}
.col-bloghome-post .post-thumb-list__content{margin-top:0 !important;border-radius:0 !important}
/* ── Poradnik: hover NIE szarzy karty/tytułu (tylko „Czytaj" na czerwono + uniesienie) ── */
.col-bloghome-post .post-thumb-list:hover,
.col-bloghome-post .post-thumb-list:hover .post-thumb-list__content{background:#fff !important}
.col-bloghome-post .post-thumb-list:hover .post-thumb-list__title a{color:#111 !important;background:transparent !important}
.col-bloghome-post .post-thumb-list__title a{background:transparent !important}
/* ── Newsletter — biała karta .nlx (kompaktowa, wjeżdża na stopkę) ── */
/* motyw: #footer{margin-top:140px} → wielka pustka nad newsletterem */
#footer.js-footer{margin-top:44px !important;background:transparent !important} /* czarne tylko na .footer-container — karta newslettera w połowie na szarym */
/* motyw sam nachodzi .footer-container ~90px pod newsletter (ujemny offset) —
wystarczy flow bez transformów; karta w połowie na szarym, w połowie na czarnym */
.footer-newsletter{background:transparent !important;position:relative;z-index:3;padding:0;margin:0}
.footer-newsletter .block_newsletter,
#blockEmailSubscription_displayFooterBefore{width:min(100%,1640px);margin:0 auto;background:#fff !important;border:1px solid #ededed;
border-radius:22px !important;box-shadow:0 26px 60px rgba(0,0,0,.18);padding:26px 40px !important;position:relative;overflow:hidden}
.footer-newsletter .block_newsletter::after{content:"";position:absolute;right:-40px;top:-60px;width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,rgba(76,187,108,.16),transparent 70%);pointer-events:none}
.footer-newsletter .block_newsletter .row{align-items:center}
.footer-newsletter .block_newsletter #block-newsletter-label{font:800 24px/1.15 var(--mk-head) !important;margin:0 0 6px}
.footer-newsletter .block_newsletter p{font-size:14px;line-height:1.55;color:#666}
/* przycisk ZAPISZ SIĘ — czarny także w stanie disabled (motyw szarzy) */
.footer-newsletter .block_newsletter input[type="submit"],
.footer-newsletter .block_newsletter input.btn:disabled{background:#000 !important;color:#fff !important;opacity:1 !important}
/* motyw dubluje placeholder floating-labelem → chowamy label, przywracamy widoczny placeholder
(motyw ustawia ::placeholder na transparent, licząc na label) */
.footer-newsletter .floating-label label{display:none !important}
.footer-newsletter .floating-label input::placeholder{color:#adb3b6 !important;opacity:1 !important}
/* kolumny karty newslettera wycentrowane w pionie; formularz zwarty (input w linii nagłówka, zgoda tuż pod) */
.footer-newsletter .block_newsletter .row>[class*="col-"]{display:flex;flex-direction:column;justify-content:center}
.footer-newsletter .block_newsletter form{margin:0}
.footer-newsletter .block_newsletter .form-newsletter{margin:0}
/* zielony akcent w nagłówku („5% rabatu") — tekst podmienia makieta.js */
.footer-newsletter #block-newsletter-label .mk-nl-accent{color:#2f9e57}
/* zgoda RODO — jak makieta .nlx__consent (drobna, szara, czarny accent, 1 linia — tekst skraca makieta.js) */
.footer-newsletter .psgdpr_consent_message{display:flex;gap:9px;align-items:center;margin-top:10px;
font-size:11.5px;color:#8a9096;line-height:1.5;white-space:nowrap}
.footer-newsletter .psgdpr_consent_message span:last-child{overflow:hidden;text-overflow:ellipsis}
.footer-newsletter .psgdpr_consent_message a{color:#111;text-decoration:underline}
.footer-newsletter .psgdpr_consent_message input[type="checkbox"]{accent-color:#000;width:16px;height:16px;flex:none;margin-top:1px}
/* stopka pod newsletter — wyższy padding-top na zakładkę karty */
.footer-container .footer-top{padding-top:130px !important}
@media(max-width:767px){.footer-newsletter .block_newsletter{transform:none}.footer-newsletter{padding:0 16px;margin-bottom:20px}.footer-container .footer-top{padding-top:40px !important}}
/* ── Stopka wg .footerx — #0f1012, stonowane linki, telefon 20px, social 38px ── */
.footer-container{background:#0f1012 !important}
.footer-container .footer-top .h3,.footer-container .footer-top p.h3{font:700 13px/1.3 var(--mk-head) !important;
text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-bottom:16px}
.footer-container .footer-navbar-nav .nav-link{font-size:13.5px !important;color:#9aa1a3 !important;padding:5px 0 !important}
.footer-container .footer-navbar-nav .nav-link:hover{color:#fff !important}
.footer-container .block-contact a.phone{font:800 20px/1.2 var(--mk-head) !important;color:#fff}
.footer-container .block-contact a.mail{font:600 13.5px/1.4 var(--mk-font) !important;color:#c4cacc;text-transform:none !important}
.footer-container .block-contact{font-size:13px;color:#8f9799}
.footer-container .block-social-list li a{width:38px;height:38px;background:rgba(255,255,255,.08)}
.footer-container .block-social-list li a:hover{background:var(--mk-success)}
.mk-foot-brand .mk-foot-tagline{font-size:13.5px;color:#8f9799;line-height:1.6}
/* pasek dolny stopki */
.footer-container .footer-bottom,.footer-container .footer-copyrights{border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#8f9799}
/* ── Widget „Opinie klientów" — makieta .rvw (karta na home, pigułka na podstronach) ── */
/* z-index PONIŻEJ menu offcanvas (1050), panelu filtrów, dolnego paska (999) i modali —
widget NIE ma być zawsze na wierzchu: rozwinięte menu/filtry mają go zasłaniać (FAZA 25b) */
.ds-shop-opinion.mk-rvw{position:fixed;left:22px;bottom:22px;top:auto;right:auto;z-index:900;
font-family:var(--mk-font);background:none;border:0;box-shadow:none;padding:0;width:auto}
@media(max-width:560px){.ds-shop-opinion.mk-rvw{left:14px;bottom:14px}}
.mk-rvw[data-state="closed"]{display:none !important}
/* karta */
.mk-rvw .rvw__card{width:296px;background:#fff;border:1px solid var(--mk-border);border-radius:16px;
box-shadow:0 18px 50px -14px rgba(0,0,0,.28),0 4px 14px -6px rgba(0,0,0,.12);
padding:18px 18px 16px;position:relative;
transform:translateY(0) scale(1);opacity:1;transform-origin:left bottom;transition:.28s cubic-bezier(.2,.8,.2,1)}
.mk-rvw:not([data-state="card"]) .rvw__card{transform:translateY(14px) scale(.9);opacity:0;pointer-events:none;visibility:hidden;position:absolute;left:0;bottom:0}
.mk-rvw .rvw__x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;
background:var(--mk-light);color:#666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s;padding:0}
.mk-rvw .rvw__x:hover{background:#eceded;color:#000}
.mk-rvw .rvw__head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.mk-rvw .rvw__badge{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
color:#c8912b;background:linear-gradient(135deg,#fff7e6,#ffeccb)}
.mk-rvw .rvw__ht b{display:block;font-family:var(--mk-head);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#121212}
.mk-rvw .rvw__ht span{display:block;font-size:11.5px;color:var(--mk-gray-dark);margin-top:1px}
.mk-rvw .rvw__score{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--mk-border2);border-bottom:1px solid var(--mk-border2)}
.mk-rvw .rvw__num{font-family:var(--mk-head);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em;color:#121212}
.mk-rvw .rvw__stars{display:flex;gap:2px}
.mk-rvw .rvw__star svg{display:block;fill:currentColor;width:18px;height:18px}
.mk-rvw .rvw__star.is-full{color:#f5a623}
.mk-rvw .rvw__star.is-empty{color:#e2e4e6}
.mk-rvw .rvw__star.is-half{position:relative;display:inline-flex;color:#e2e4e6}
.mk-rvw .rvw__star.is-half::after{content:"";position:absolute;left:0;top:0;bottom:0;width:50%;
background:linear-gradient(#f5a623,#f5a623);
-webkit-mask:url("data:image/svg+xml;utf8,") 0 0/18px 18px no-repeat;
mask:url("data:image/svg+xml;utf8,") 0 0/18px 18px no-repeat}
.mk-rvw .rvw__count{display:block;font-size:11.5px;color:var(--mk-gray-dark);margin-top:5px}
.mk-rvw .rvw__count b{color:#121212;font-weight:700}
.mk-rvw .rvw__cta{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;
background:#000;color:#fff;font:700 12px/1 var(--mk-head);letter-spacing:.04em;text-transform:uppercase;
padding:13px;border-radius:999px;transition:.18s;text-decoration:none}
.mk-rvw .rvw__cta:hover{background:#2a2a2a;color:#fff}
/* pigułka */
.mk-rvw .rvw__pill{position:absolute;left:0;bottom:0;display:inline-flex;align-items:stretch;
background:#000;color:#fff;border-radius:999px;font-family:var(--mk-head);
box-shadow:0 10px 26px -10px rgba(0,0,0,.5);overflow:hidden;white-space:nowrap;
transform:translateY(0) scale(1);opacity:1;transform-origin:left bottom;transition:.28s cubic-bezier(.2,.8,.2,1)}
.mk-rvw:not([data-state="pill"]) .rvw__pill{transform:translateY(14px) scale(.85);opacity:0;pointer-events:none;visibility:hidden}
.mk-rvw[data-state="pill"]{width:auto;height:46px}
.mk-rvw .rvw__pill-open{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0;background:none;color:inherit;
font-family:inherit;padding:11px 12px 11px 15px;transition:.16s}
.mk-rvw .rvw__pill-open:hover{background:rgba(255,255,255,.08)}
.mk-rvw .rvw__pill-stars{color:#f5a623;display:flex}
.mk-rvw .rvw__pill-open b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.mk-rvw .rvw__pill-tx{font-size:12px;font-weight:600;opacity:.85}
.mk-rvw .rvw__pill-tx em{font-style:normal;opacity:.7}
.mk-rvw .rvw__pill-x{display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;
background:none;color:#fff;opacity:.5;padding:0 13px 0 9px;transition:.16s;border-left:1px solid rgba(255,255,255,.16)}
.mk-rvw .rvw__pill-x:hover{opacity:1;background:rgba(255,255,255,.1)}
.mk-rvw .rvw__pill-x svg{width:14px;height:14px}
/* ── Stopka: szersze kolumny — mniej zawijania (nadpisuje wcześniejsze 178px) ── */
.footer-top .row .mk-foot-brand{flex:0 0 260px;max-width:260px}
.footer-top .row .ds-menu-nav-container-footer{flex:1 1 auto;width:auto;max-width:none}
.footer-top .row .block-contact{flex:0 0 400px;max-width:400px;width:400px}
/* ==========================================================================
[FAZA 18] PDP 1. EKRAN — dopieszczenie wg makiety (KOLOR/ROZMIAR/qty/serce+porównaj)
========================================================================== */
/* separatory między blokami (makieta: linia nad KOLOR i nad wierszem zakupu) */
.product-container-top .product-variants.other-color{border-top:1px solid var(--mk-line);padding-top:20px;margin-top:18px}
.product-container-top .product-add-to-cart{border-top:1px solid var(--mk-line);margin-top:20px;padding-top:8px}
/* etykieta „KOLOR" (tekst modułu „Inne wersje kolorystyczne:" podmieniony wizualnie) */
.product-container-top .product-variants.other-color .control-label{font-size:0 !important;line-height:0}
.product-container-top .product-variants.other-color .control-label::before{content:"Kolor";display:block;
font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.05em;color:#111}
/* aktywny kolor (makieta: czarna obwódka + znaczek ✓) — klasę .is-current nadaje makieta.js */
.product-container-top .other-color-wrap .other-color{position:relative}
.product-container-top .other-color-wrap .other-color.is-current{border-color:#111}
.product-container-top .other-color-wrap .other-color.is-current::after{content:"";position:absolute;top:-7px;right:-7px;
width:18px;height:18px;border-radius:50%;background-color:#111;background-position:center;background-repeat:no-repeat;background-size:10px 10px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* etykieta „ROZMIAR" + link „Tabela rozmiarów" w tej samej linii po prawej */
.product-container-top .product-variants-item{position:relative}
.product-container-top .product-variants-item .control-label{font-size:0 !important;line-height:0}
.product-container-top .product-variants-item .control-label::before{content:"Rozmiar";display:block;
font:700 13px/1 var(--mk-head);text-transform:uppercase;letter-spacing:.05em;color:#111}
.product-container-top .variants-wrap{position:static}
.product-container-top .offcanvas-sizes-btn{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:7px;
font:700 13px/1 var(--mk-head);color:#111;text-decoration:underline;margin:0;padding:0}
.product-container-top .offcanvas-sizes-btn:hover{color:var(--mk-red)}
.product-container-top .offcanvas-sizes-btn::before{content:"";width:15px;height:15px;flex:none;background:center/contain no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E")}
/* stepper ilości (makieta: − 1 +) — makieta.js chowa select i wstawia przyciski */
.product-container-top .add-to-cart-amount.mk-stepper select{display:none !important}
.mk-qty-btn{width:42px;height:56px;border:0;background:#fff;color:#333;cursor:pointer;display:grid;place-items:center;
font:600 20px/1 var(--mk-head);padding:0;transition:.14s}
.mk-qty-btn:hover{color:#000;background:var(--mk-light)}
.mk-qty-val{min-width:34px;text-align:center;font:700 15px/1 var(--mk-head);color:#111}
/* serce + porównaj obok DODAJ DO KOSZYKA (proxy do akcji z górnego paska) */
.mk-sq{flex:none;width:56px;height:56px;border:1.5px solid var(--mk-line);border-radius:14px;background:#fff;color:#111;
display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s}
.mk-sq:hover{border-color:#111}
.mk-sq svg{width:20px;height:20px;display:block}
/* hover całego banera: motyw .ds-banners.hook-* .ds-banner__link:hover .btn-white{color:#fff} — przebicie */
.ds-banners.hook-displayHome .ds-banner__link:hover .btn.btn-white,
.ds-banners.hook-displayHomeBottom .ds-banner__link:hover .btn.btn-white,
.ds-banners.hook-displayHomeMiddle .ds-banner__link:hover .btn.btn-white,
.ds-banners .ds-banner__link:hover .cta-content .btn{background:#fff !important;color:#000 !important;border-color:#fff !important}
/* ==========================================================================
[FAZA 18b] PDP — rozmiary/kolory (dociski), breadcrumb, rating, pasek czarny,
zoom modal, specyfikacja grupowana, eyebrow sekcji bloga, równe boxy
========================================================================== */
/* rozmiary: motyw robił „jaja" (border-radius:50%, 52×40) → kwadraty z radiusem jak makieta */
.product-container-top .product-variants .radio-label{min-width:46px !important;width:auto !important;height:46px !important;
padding:0 13px !important;border-radius:12px !important;line-height:43px !important;display:inline-block !important;
font:700 14px/43px var(--mk-head) !important;box-sizing:border-box}
/* kolory: wewnętrzny miał własną ramkę (podwójne obwódki) + motyw wymusza 64×64
(silniejszy selektor) → zdjęcie wystawało z kafelka 60×60 i zakrywało obwódkę zaznaczenia */
.product-container-top .other-color-wrap .other-color a{border:0 !important;border-radius:8px !important;padding:0 !important;
box-shadow:none !important;width:100% !important;height:100% !important;display:block}
.product-container-top .other-color-wrap .other-color img{width:100% !important;height:100% !important;object-fit:contain;mix-blend-mode:multiply}
/* breadcrumb — drobny, szary, „/" separatory, ostatni czarny bold (makieta) */
.breadcrumb{font-size:12.5px !important;background:none;padding:0;margin:14px 0 18px}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:0 6px;margin:0;padding:0;list-style:none}
.breadcrumb li{display:flex;align-items:center;gap:6px;float:none}
.breadcrumb li::after,.breadcrumb li .material-icons{display:none !important}
.breadcrumb li:not(:first-child)::before{content:"/";color:#c2c7ca;margin:0}
.breadcrumb li a,.breadcrumb li span{color:#8a9096;font-size:12.5px}
.breadcrumb li a:hover{color:#111}
.breadcrumb li:last-child a,.breadcrumb li:last-child span{color:#111;font-weight:700}
/* rating — mniejszy, bliżej tytułu; cena bliżej wariantów */
.product-container-top h1.h1{margin:6px 0 8px}
.product-container-top .ds-product-opinion-mini{margin:0 0 14px}
.product-container-top .ds-product-opinion-mini .rating svg{width:14px !important;height:14px !important}
.product-container-top .product-information{margin-top:8px}
.product-container-top .product-variants.other-color{margin-top:8px;padding-top:16px}
/* klik w zdjęcie otwiera zoom (kursor lupki) */
.product-container-top .product-cover img{cursor:zoom-in}
/* ── Górny ekran PDP — domknięcie do makiety ── */
/* wiersz przy breadcrumbie: makieta ma tylko „Drukuj" (serce/porównaj są przy przycisku koszyka) */
.product-additional-links .wishlist-duplicate,
.product-additional-links .add-to-compare{display:none !important}
/* tytuł jak makieta (~34px, nie gigant motywu) */
.product-container-top h1.h1{font-size:34px !important;line-height:1.15 !important;letter-spacing:-.01em}
/* czerwona pigułka rabatu przy cenie (makieta: „-20%" obok ceny; motyw chowa .discount-percentage) */
.product-prices .current-price{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.product-prices .current-price .discount-percentage,
.product-prices .current-price .discount-amount{display:inline-block !important;background:var(--mk-red);color:#fff;
border-radius:999px;font:700 13px/1 var(--mk-head);padding:6px 11px;letter-spacing:.02em}
/* ── Header: deterministyczne przyklejenie jak makieta ──
Motyw na scroll-down zostawiał header relative (odjeżdżał), a na scroll-up robił fixed
(wracał CAŁY z topbarem) → „czasami znika, czasami nie". Zamiast tego: sticky z ujemnym
top — banner+topbar zawsze odjeżdżają, pasek z logo zawsze widoczny (makieta: top 76px).
--mk-hdr-off (wysokość banner+topbar) liczy makieta.js; body padding-top neutralizowany,
bo motyw dokładał 154px przy trybie fixed. Tylko desktop — mobile zostaje przy motywie. */
@media (min-width: 992px){
body{padding-top:0 !important}
#header{position:sticky !important;top:calc(-1 * var(--mk-hdr-off, 81px)) !important;z-index:1000}
.product-fixed-bar{top:107px !important} /* pod przyklejonym paskiem logo (107px) */
/* theme.js na scroll-up dodaje body.sticky, które chowa banner → header krótszy niż offset
i dziura nad czarnym paskiem; trzymamy banner widoczny. :not([style…]) — nie przebijaj
zamknięcia banera przez X (inline display:none) */
body.sticky #header .static-bar:not([style*="display: none"]){display:block !important}
}
/* ── Pasek nawigacyjny karty produktu — czarny, pełna szerokość (makieta) ── */
.product-fixed-bar{background:#121212 !important;border:0 !important;box-shadow:0 6px 22px rgba(0,0,0,.25);
display:flex;align-items:center;gap:26px;padding:0 40px;
/* full-bleed: motyw wstawia pasek w .container z margin 85px i własnym width — wyłamujemy na całą szerokość */
width:100vw !important;max-width:none !important;margin:0 0 60px calc(50% - 50vw) !important;border-radius:0}
.product-fixed-bar .product-bar-list{display:flex;align-items:center;gap:24px;flex:1;min-width:0}
.product-fixed-bar .scrolltop{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);
display:grid;place-items:center;flex:none;transition:.15s}
.product-fixed-bar .scrolltop:hover{background:rgba(255,255,255,.24)}
.product-fixed-bar .scrolltop svg{width:16px;height:16px}
.product-fixed-bar .scrolltop svg path{fill:#fff !important}
.product-fixed-bar .product-bar-list a.scrolltolabel{font:600 13.5px/1 var(--mk-font);color:#b6bcbe;padding:20px 0;
border-bottom:2px solid transparent;white-space:nowrap;transition:.14s;text-transform:none}
.product-fixed-bar .product-bar-list a.scrolltolabel:hover,
.product-fixed-bar .product-bar-list a.scrolltolabel.current{color:#fff;border-color:var(--mk-success)}
/* pigułka z liczbą opinii przy tabie (JS wstawia .mk-tab-cnt) */
.mk-tab-cnt{display:inline-block;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;
font:700 11px/1 var(--mk-head);padding:3px 7px;margin-left:6px;vertical-align:1px}
/* prawa strona: miniaturka, cena, zielony przycisk (JS dodaje .mk-bar-add) */
.product-fixed-bar .add-to-cart-copy{display:flex;align-items:center;gap:14px;color:#fff;cursor:pointer;flex:none}
.product-fixed-bar .add-to-cart-copy img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.product-fixed-bar .add-to-cart-copy .price{font:800 17px/1 var(--mk-head);color:#fff;white-space:nowrap}
/* cena + przekreślona stara cena w kolumnie (jak makieta .product-bar__pr) */
.product-fixed-bar .mk-bar-pr{display:flex;flex-direction:column;line-height:1.1;gap:2px}
.product-fixed-bar .mk-bar-pr s{font:400 11px/1 var(--mk-font);color:#8a9095;white-space:nowrap}
.product-fixed-bar .add-to-cart-copy>svg{display:none} /* ikonę zastępuje przycisk */
.mk-bar-add{display:inline-flex;align-items:center;gap:9px;background:var(--mk-success);color:#fff;border:0;cursor:pointer;
border-radius:999px;padding:12px 22px;font:700 12px/1 var(--mk-head);letter-spacing:.04em;text-transform:uppercase;transition:.15s}
.mk-bar-add:hover{background:#3f9d5b}
.mk-bar-add svg{width:16px;height:16px}
/* ── Zoom modal — duże zdjęcie + strzałki + miniaturki na dole + wyraźny X ── */
#product-modal .modal-dialog{max-width:none;width:100vw;height:100vh;margin:0}
#product-modal .modal-content{height:100vh;border:0;border-radius:0;background:#fff}
#product-modal .modal-body{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:0;margin:0}
#product-modal .product-images{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
margin:0;padding:0;list-style:none;width:100%;max-width:1100px}
#product-modal .product-images>li:first-child{flex-basis:100%;display:flex;justify-content:center}
#product-modal .product-images>li:first-child img{max-height:74vh;width:auto;max-width:86vw;object-fit:contain}
#product-modal .product-images>li{display:flex !important} /* motyw chował miniaturki (display:none) */
#product-modal .product-images>li:not(:first-child){flex:none}
#product-modal .product-images>li:not(:first-child) img{width:84px;height:84px;object-fit:contain;background:#fff;
border:1px solid var(--mk-line);border-radius:12px;padding:8px;cursor:pointer;transition:.14s}
#product-modal .product-images>li:not(:first-child) img:hover{border-color:#bbb}
#product-modal .product-images>li:not(:first-child) img.on{border:2px solid #111}
.mk-zm-x{position:absolute;top:22px;right:26px;z-index:5;width:46px;height:46px;border-radius:50%;
background:#fff;border:1px solid var(--mk-border);color:#111;display:grid;place-items:center;cursor:pointer;
box-shadow:var(--mk-soft);transition:.15s;padding:0}
.mk-zm-x:hover{background:#111;color:#fff;border-color:#111}
.mk-zm-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;
background:#fff;border:1px solid var(--mk-border);color:#111;display:grid;place-items:center;cursor:pointer;
box-shadow:var(--mk-soft);transition:.15s;padding:0}
.mk-zm-nav:hover{background:#111;color:#fff;border-color:#111}
.mk-zm-prev{left:26px}
.mk-zm-next{right:26px}
/* ── Specyfikacja GRUPOWANA (makieta .specx) — 4 boxy w siatce 2×2 z ikonami ── */
.product-features .data-sheet.mk-specx{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:960px;
border:0;border-radius:0;background:none;overflow:visible;padding:0}
.mk-specx .mk-specx__g{border:1px solid var(--mk-border);border-radius:var(--mk-rb);overflow:hidden;background:#fff;align-self:start}
.mk-specx .mk-specx__gh{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--mk-light);
font:700 12px/1 var(--mk-head);letter-spacing:.08em;text-transform:uppercase;color:#111;border-bottom:1px solid var(--mk-border2)}
.mk-specx .mk-specx__gi{width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--mk-border);
display:grid;place-items:center;flex:none;background-position:center;background-repeat:no-repeat;background-size:15px 15px}
.mk-specx__g[data-g="ident"] .mk-specx__gi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7'%3E%3Cpath d='M4 7V5a1 1 0 0 1 1-1h2M4 17v2a1 1 0 0 0 1 1h2M20 7V5a1 1 0 0 0-1-1h-2M20 17v2a1 1 0 0 1-1 1h-2'/%3E%3Cline x1='8' y1='9' x2='8' y2='15'/%3E%3Cline x1='12' y1='9' x2='12' y2='15'/%3E%3Cline x1='16' y1='9' x2='16' y2='15'/%3E%3C/svg%3E")}
.mk-specx__g[data-g="mat"] .mk-specx__gi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6 16 4a4 4 0 0 1-8 0L3.6 6a1 1 0 0 0-.5 1.3l1.5 3 2.4-1V20a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.3l2.4 1 1.5-3A1 1 0 0 0 20.4 6z'/%3E%3C/svg%3E")}
.mk-specx__g[data-g="char"] .mk-specx__gi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E")}
.mk-specx__g[data-g="buy"] .mk-specx__gi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E")}
@media(max-width:860px){.product-features .data-sheet.mk-specx{grid-template-columns:1fr}}
/* mało cech → prosta tabelka (makieta „wersja skrócona"): zebra, wartości bold z lewej strony kolumny */
.product-features .data-sheet.mk-spec-flat{max-width:680px}
.product-features .data-sheet.mk-spec-flat .data-sheet-row{padding:14px 18px;border-bottom:0}
.product-features .data-sheet.mk-spec-flat .data-sheet-row:nth-child(odd){background:#fafbfb !important}
.product-features .data-sheet.mk-spec-flat .data-sheet-row:nth-child(odd) .data-sheet-label,
.product-features .data-sheet.mk-spec-flat .data-sheet-row:nth-child(odd) .data-sheet-value{background:transparent !important}
.product-features .data-sheet.mk-spec-flat .data-sheet-label{color:#333;font-weight:600;width:50%}
.product-features .data-sheet.mk-spec-flat .data-sheet-value{text-align:left;font-weight:400;color:#333}
/* „Zobacz z tej serii" i inne sekcje produktowe na PDP — odstęp nagłówka od karuzeli */
.featured-products .title-section{margin-bottom:24px}
/* równe boxy: pusty placeholder marki trzyma wysokość */
.js-product .pc-brand--empty{min-height:11px}
/* bez producenta: chowamy czerwoną kropkę, placeholder trzyma wysokość (nazwa na tej samej linii) */
.js-product .pc-brand--empty::before{display:none}
/* eyebrow nad tytułem sekcji bloga (⚡ czerwone, uppercase — makieta .carousel-eyebrow) */
.mk-ts-left{display:flex;flex-direction:column;gap:9px;min-width:0}
.mk-eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--mk-head);
letter-spacing:.12em;text-transform:uppercase;color:var(--mk-danger)}
.mk-eyebrow::before{content:"";width:14px;height:14px;flex:none;background:center/contain no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23ff4c4c'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E")}
/* ==========================================================================
[FAZA 22] Newsletter + stopka + formularze auth — feedback klienta (makieta B)
========================================================================== */
/* ── Newsletter: mniejsze fonty, zgoda bliżej pola, pole na wysokości nagłówka ── */
.footer-newsletter .block_newsletter #block-newsletter-label{font:800 24px/1.15 var(--mk-head) !important}
.footer-newsletter .block_newsletter p{font-size:13.5px !important;line-height:1.5}
.footer-newsletter .block_newsletter .row{align-items:flex-start}
/* pole email na wysokości nagłówka (kolumna formularza renderowała się 12px wyżej) */
.footer-newsletter .block_newsletter .row>div:has(.form-newsletter),
.footer-newsletter .block_newsletter .row>div:has(form){margin-top:14px}
.footer-newsletter .block_newsletter .custom-checkbox,
.footer-newsletter .block_newsletter .gdpr_consent,
.footer-newsletter .block_newsletter .form-newsletter + *{margin-top:8px !important}
.footer-newsletter .block_newsletter .gdpr_consent label,
.footer-newsletter .block_newsletter .custom-checkbox label{font-size:11.5px !important;line-height:1.5}
/* ── Stopka: kolumny wg makiety (brand 330 / menu w prawo, ciaśniej / kontakt lewo) ── */
.footer-container .footer-top .row{display:flex;align-items:flex-start}
/* puste kontenery wishlist w tym samym .row kradły przestrzeń flexa */
.footer-container .footer-top .row>[class*="wishlist"]{flex:0 0 auto !important;width:auto !important}
.mk-foot-brand{flex:0 0 330px !important;max-width:330px !important}
.mk-foot-tag{max-width:330px !important;font-size:13.5px !important;line-height:1.6}
.ds-menu-nav-container-footer{flex:1 1 0 !important;min-width:0;max-width:none !important;width:auto !important}
/* równe wizualnie odstępy między 5 kolumnami stopki (brand | 3×menu | Masz pytania) */
.ds-menu-nav-container-footer .row{display:flex !important;justify-content:space-between;gap:0;padding:0 56px;flex-wrap:nowrap}
/* kolumny menu zwężone do treści (bootstrap col-md-4 dawał flex:1 → równe 311px i wypychanie kontaktu) */
.ds-menu-nav-container-footer .row>[class*="col"]{flex:0 0 auto !important;width:auto !important;max-width:none !important;padding:0 !important}
.ds-menu-nav-container-footer .footer-navbar-nav{width:auto !important;max-width:none !important;flex:none;padding:0}
.ds-menu-nav-container-footer .footer-navbar-nav ul{padding:0;margin:0}
.ds-menu-nav-container-footer .nav-link{white-space:nowrap;font-size:13px !important}
/* kontakt: do lewej, ikony, fonty jak makieta */
.footer-container .block-contact{flex:0 0 340px !important;width:340px !important;max-width:340px !important;text-align:left !important}
.footer-container .block-contact .contact-info{text-align:left !important}
/* nagłówek „Masz pytania?" (tekst modułu podmieniony wizualnie) */
.footer-container .footer-top .block-contact p.h3{font-size:0 !important;line-height:0 !important;margin:0}
.footer-container .footer-top .block-contact p.h3::before{content:"Masz pytania?";font:700 13px/1.3 var(--mk-head);
text-transform:uppercase;letter-spacing:.05em;color:#fff;display:block;margin-bottom:16px}
.footer-container .block-contact a.phone,
.footer-container .block-contact a.mail{display:flex !important;align-items:center;gap:9px;justify-content:flex-start}
.footer-container .block-contact a.phone::before{content:"";width:18px;height:18px;flex:none;background:center/contain no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.footer-container .block-contact a.mail::before{content:"";width:16px;height:16px;flex:none;background:center/contain no-repeat;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4cacc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
.footer-container .block-contact p{text-align:left;font-size:13px;color:#8f9799}
.footer-container .block-contact .btn-goto{margin-top:10px}
@media(max-width:1100px){.ds-menu-nav-container-footer .row{padding-left:30px;gap:28px}}
@media(max-width:900px){
.footer-container .footer-top .row{flex-wrap:wrap}
.mk-foot-brand{flex:0 0 100% !important;max-width:100% !important}
.ds-menu-nav-container-footer .row{padding-left:0;flex-wrap:wrap}
.footer-container .block-contact{flex:0 0 100%;max-width:100%}
}
/* ── Logowanie/rejestracja: labelki, wiersz aux, przycisk, checkboxy ── */
.mk-auth2 label,.mk-auth2 .form-control-label{margin:0 0 9px !important}
.mk-auth2 .mk-form-aux{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 18px}
.mk-auth2 .mk-form-aux__check{display:inline-flex !important;align-items:center;gap:8px;font:400 13px/1.4 var(--mk-font) !important;color:#555;margin:0 !important;cursor:pointer}
.mk-auth2 .mk-form-aux__check input{width:17px !important;height:17px !important;min-width:0 !important;min-height:0 !important;
accent-color:#000;margin:0 !important;flex:none;appearance:auto;-webkit-appearance:checkbox;transform:none !important;padding:0 !important}
.mk-auth2 .mk-form-aux__check input::before,.mk-auth2 .mk-form-aux__check input::after{content:none !important}
.mk-auth2 .mk-form-aux>a{font-size:13px;color:#555;text-decoration:underline;white-space:nowrap}
.mk-auth2 .mk-form-aux>a:hover{color:#000}
.mk-auth2 #submit-login,.mk-auth2 .form-footer button,
.mk-auth2 button[type="submit"]{display:flex;align-items:center;justify-content:center;text-align:center}
.mk-auth2 .no-account{color:#555}
.mk-auth2 .no-account .mk-auth2__alt{margin-left:4px}
/* checkboxy zgód (rejestracja) — wyrównanie ptaszka z tekstem */
.mk-auth2 .custom-checkbox,
.mk-auth2 .psgdpr_consent_message,
.mk-auth2 .checkbox{display:flex !important;align-items:flex-start !important;gap:10px}
.mk-auth2 .custom-checkbox input[type="checkbox"],
.mk-auth2 .checkbox input[type="checkbox"]{width:17px !important;height:17px !important;flex:none;margin:2px 0 0 !important;accent-color:#000}
.mk-auth2 .custom-checkbox label,.mk-auth2 .custom-checkbox span{margin:0 !important;text-align:left}
/* ==========================================================================
[FAZA 23] MOBILE — porządki wg screenów klienta (nawigacja dołem, hero,
ikonki, karuzele z peekiem, banery, o nas, newsletter, stopka w kolumnie)
========================================================================== */
@media (max-width: 767px){
/* iOS Safari zoomuje przy focusie pól z font-size <16px — wymuszamy 16px */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea{font-size:16px !important}
/* top wg makiety mobile: banner + pasek darmowej wysyłki ZOSTAJĄ,
znika menu/kontakt/social; nawigacja jest na dole (mobile-bottom-bar) */
#header .header-nav .ds-menu-nav-container,
#header .header-nav .header-contact,
#header .header-nav .block-social{display:none !important}
#header .header-nav .header-nav-row{justify-content:center;padding:5px 0;height:auto !important;min-height:0 !important}
#header .header-nav{height:auto !important;min-height:0 !important}
#header .header-nav .ds-freeshipping{margin:0}
/* zwarta góra: motyw dawał sztywne wysokości wierszy — ścinamy pustkę nad/pod szukajką */
#header .header-top{padding:6px 0 8px !important;height:auto !important;min-height:0 !important}
#header .header-top .container,
#header .header-top-row{height:auto !important;min-height:0 !important}
#header .header-banner{display:none !important}
/* header: pełna szukajka + konto (bez pilla PRODUKTY i serca — są na dolnym pasku) */
.header-top-row .btn-products,
.header-top-row .btn-wishlist{display:none !important}
.header-top-row .search-widget{flex:1 1 auto !important;width:auto !important;max-width:none !important}
/* JEDNA pigułka: form = tło, input przezroczysty, lupa po lewej */
.header-top-row .search-widget form{display:flex;width:100%;position:relative;background:var(--mk-light) !important;
border:0 !important;border-radius:999px !important;overflow:hidden}
.header-top-row .search-widget input[type="text"],
.header-top-row .search-widget input[type="search"]{display:block !important;width:100% !important;height:46px !important;
border:0 !important;border-radius:999px;background:transparent !important;padding:0 46px 0 16px !important;font-size:16px}
/* lupka: po PRAWEJ i czarna (było po lewej i biała → niewidoczna na jasnym tle) */
.header-top-row .search-widget button{position:absolute;right:2px;left:auto !important;top:50%;transform:translateY(-50%);
width:42px;height:42px;background:transparent !important;border:0 !important;color:#111 !important}
.header-top-row .search-widget button svg{fill:#111 !important;color:#111 !important}
/* slider: inline zwężał obraz (349px z 390) → czarny pas z prawej */
#homeslider .slide picture{display:block !important;width:100% !important}
#homeslider .slide img.banner-image{width:100% !important;max-width:none !important}
/* offcanvas menu: tekst kategorii do LEWEJ, strzałka na końcu (motyw dawał flex-end) */
#offcanvas_mobile_menu .nav-item>.nav-link{display:flex !important;align-items:center;justify-content:flex-start !important;
text-align:left !important;gap:12px}
#offcanvas_mobile_menu .nav-link .toggle-button-triangle{margin-left:auto;flex:none}
/* widget opinii NAD dolnym paskiem, nie na nim */
.ds-shop-opinion.mk-rvw{bottom:78px !important;left:14px !important}
/* hero: mniejsza wysokość = mniej drastyczne cięcie poziomych zdjęć */
#homeslider .slide img.banner-image{height:300px !important}
#homeslider .slick-dots{bottom:12px !important}
#homeslider .slide .cta-content{padding:0 18px}
/* ikonki zaufania: 2 kolumny, równo od lewej, z paddingiem strony */
.home-icons-container .home-icons{grid-template-columns:1fr 1fr;gap:16px 12px;padding:0 16px}
.home-icons .staticblock-icon{justify-content:flex-start;gap:10px;text-align:left}
.home-icons .staticblock-icon img,
.home-icons .staticblock-icon svg{width:32px !important;height:32px !important;flex:none}
.home-icons .staticblock-icon p{font-size:13px !important;line-height:1.35}
/* karuzele: mniejsze karty — następna wystaje z boku (peek) */
.featured-products .products.row.mk-car>.js-product{width:72% !important}
.ds-blog-recent .row.mk-car .col-bloghome-post{flex:0 0 80% !important;max-width:80% !important;width:80% !important}
/* banery: tekst na całą szerokość, nie kolumna */
.ds-banners .ds-banner__link{min-height:300px !important}
.ds-banners .cta-content{width:100% !important;max-width:100% !important;padding:20px 18px !important;align-items:flex-start !important;text-align:left !important}
.ds-banners .cta-content .h3{font-size:22px !important;text-align:left !important;max-width:100% !important;text-wrap:balance}
.ds-banners .cta-content .btn{margin-top:14px}
/* o nas (home): mniejsze odstępy, cytat od nowej linii */
.row-home-about-bottom .about-left img{margin-bottom:0 !important}
.row-home-about-bottom .about-left{margin-bottom:18px !important;padding-bottom:0 !important}
.row-home-about-bottom .staticblock h3{font-size:26px !important}
.mk-aboutx-stats{gap:14px !important;padding:16px 0 !important;margin:16px 0 !important}
.mk-aboutx-stats>*{flex:1 1 30%}
.mk-aboutx-quote{display:block !important;margin:16px 0 0 !important;float:none !important}
.row-home-about-bottom .staticblock a.btn{display:inline-flex;margin-bottom:0}
/* newsletter: bez nakładania się na stopkę (desktop ma margin-bottom:-90px — nakładka na footer) */
.footer-newsletter{padding:0 14px;margin:26px 0 20px}
.footer-newsletter .block_newsletter{border-radius:18px;margin-bottom:0 !important}
.footer-newsletter .block_newsletter .row{display:block}
.footer-newsletter .block_newsletter .row>div:has(.form-newsletter),
.footer-newsletter .block_newsletter .row>div:has(form){margin-top:12px}
.footer-newsletter .block_newsletter #block-newsletter-label{font-size:20px !important;text-align:left}
.footer-newsletter .block_newsletter p{text-align:left}
.footer-container{margin-top:0 !important}
.footer-container .footer-top{padding-top:34px !important}
}
/* stopka: kolumny jedna pod drugą (nadpisuje desktopowe !important z FAZY 22) */
@media (max-width: 991px){
.footer-container .footer-top .row{flex-wrap:wrap !important}
.mk-foot-brand{flex:0 0 100% !important;width:100% !important;max-width:100% !important;margin-bottom:22px}
.ds-menu-nav-container-footer{flex:0 0 100% !important;width:100% !important;max-width:100% !important}
.ds-menu-nav-container-footer .row{flex-wrap:wrap !important;padding:0 !important;gap:22px !important;justify-content:flex-start !important}
.ds-menu-nav-container-footer .row>[class*="col"]{flex:0 0 100% !important;width:100% !important;max-width:100% !important}
.ds-menu-nav-container-footer .row{width:100% !important;max-width:100% !important}
.ds-menu-nav-container-footer .footer-navbar-nav{width:100% !important}
.ds-menu-nav-container-footer .footer-navbar-nav ul{display:block !important;width:100%}
.ds-menu-nav-container-footer .nav-link{white-space:normal !important}
.footer-container .block-contact{flex:0 0 100% !important;width:100% !important;max-width:100% !important;margin-top:22px}
}
/* ==========================================================================
[FAZA 25] Feedback klienta: stopka (menu mobile + newsletter), listing
(ciaśniejsze kafle + tytuł 2 linie), PDP mobile (galeria + dodaj do koszyka)
========================================================================== */
/* ── LISTING: mniejszy margines do krawędzi + mniejszy gutter (większe kafle) ──
Kontener listy (#main>.container) miał padding 40px, bootstrapowy gutter 30px. */
body#category #main>.container,
body#manufacturer #main>.container,
body#supplier #main>.container,
body#new-products #main>.container,
body#best-sales #main>.container,
body#prices-drop #main>.container,
body#search #main>.container,
body#category #main>.container-fluid{padding-left:16px !important;padding-right:16px !important}
.products.row{margin-left:-7px !important;margin-right:-7px !important}
.products.row>.js-product{padding-left:7px !important;padding-right:7px !important}
/* ── STOPKA (mobile ≤991): rozwiń wszystkie linki menu — motyw je chowa w
bootstrapowym .collapse (akordeon). Klient chce wszystkie pozycje pod sobą. ── */
@media (max-width: 991px){
/* bootstrapowy .row ma margin -15px → po rozwinięciu tekst uciekał pod lewą krawędź */
.ds-menu-nav-container-footer .row{margin-left:0 !important;margin-right:0 !important;gap:0 !important}
.ds-menu-nav-container-footer .collapse{display:block !important;height:auto !important;visibility:visible !important;overflow:visible !important}
.ds-menu-nav-container-footer .h3.visible-mobile{display:block !important;text-align:left !important;
pointer-events:none;margin:0 0 8px}
.ds-menu-nav-container-footer .h3.visible-mobile::after{display:none !important} /* strzałka akordeonu */
.ds-menu-nav-container-footer .footer-navbar-nav,
.ds-menu-nav-container-footer .footer-navbar-nav li{text-align:left !important}
/* .footer-navbar-nav TO jest — miał padding-bottom:50px (źródło dużych przerw między sekcjami) */
.ds-menu-nav-container-footer .footer-navbar-nav{margin:0 !important;padding:0 !important}
.ds-menu-nav-container-footer .footer-navbar-nav .nav-link{display:inline-block !important;text-align:left !important;
white-space:normal !important;padding:4px 0 !important}
/* mniejsze odstępy MIĘDZY sekcjami menu (było dużo pustej przestrzeni) */
.ds-menu-nav-container-footer .row>[class*="col"]{margin-bottom:16px !important;padding-bottom:0 !important}
.ds-menu-nav-container-footer .row>[class*="col"]:last-child{margin-bottom:0 !important}
}
/* ── STOPKA: newsletter na mobile — zwarty box, tekst do LEWEJ, zgoda RODO POD
polem e-mail (nie na samym dole). Kolejność: e-mail → zgoda → przycisk. DESKTOP BEZ ZMIAN. ── */
@media (max-width: 767px){
/* MINA: box ma id #blockEmailSubscription_displayFooterBefore → reguła z #id (linia 1710)
dawała padding 26px 40px !important i przebijała selektor klasowy. Dokładamy id. */
.footer-newsletter .block_newsletter,
#blockEmailSubscription_displayFooterBefore{padding:20px 16px !important}
/* wszystko do lewej (motyw gdzieniegdzie centrował/„uciekał w prawo") */
.footer-newsletter .block_newsletter,
.footer-newsletter .block_newsletter .row,
.footer-newsletter .block_newsletter .row>div,
.footer-newsletter .block_newsletter #block-newsletter-label,
.footer-newsletter .block_newsletter p,
.footer-newsletter .block_newsletter .gdpr_consent,
.footer-newsletter .block_newsletter .psgdpr_consent_message{text-align:left !important}
.footer-newsletter .block_newsletter .row>div{display:block !important;width:100% !important;margin:0 !important;
align-items:flex-start !important}
/* MINA: reguła zielonej koperty `:has(#block-newsletter-label)` (specyficzność z #id)
dawała col1 padding-left:84px i przebijała stary override <600px → tekst wciśnięty/„wycentrowany".
Kasujemy padding i kopertę z !important (koperta zostaje na desktopie). */
.footer-newsletter .block_newsletter .row>div:first-child{margin-bottom:12px !important;padding-left:0 !important}
.footer-newsletter .block_newsletter .row>div:first-child::before{display:none !important}
/* nagłówek i opis: pełna szerokość do lewej (motyw zwężał je do ~180px i centrował margin:auto) */
.footer-newsletter .block_newsletter #block-newsletter-label{width:100% !important;max-width:none !important;
margin:0 0 6px !important;text-align:left !important}
.footer-newsletter .block_newsletter .row>div:first-child p,
.footer-newsletter .block_newsletter p{width:100% !important;max-width:none !important;margin:0 0 4px !important;
text-align:left !important}
.footer-newsletter .block_newsletter input[type="email"],
.footer-newsletter .block_newsletter input[name="email"]{width:100% !important;text-align:left !important}
/* przestaw kolejność w formularzu: e-mail (1) → zgoda RODO (2) → przycisk (3).
.form-newsletter{display:contents} „rozpuszcza" wrapper → jego dzieci stają się flex-itemami form. */
.footer-newsletter .block_newsletter form{display:flex !important;flex-direction:column !important;gap:8px !important}
.footer-newsletter .block_newsletter form>.form-newsletter{display:contents !important}
.footer-newsletter .block_newsletter .input-wrapper{order:1 !important}
.footer-newsletter .block_newsletter form>.row{order:2 !important;margin:0 !important}
.footer-newsletter .block_newsletter form>.row>[class*="col"]{padding-left:0 !important;padding-right:0 !important}
.footer-newsletter .block_newsletter .btn-wrapper{order:3 !important;margin:6px 0 0 !important}
/* zgoda RODO: tuż pod polem e-mail, tekst zawija do 2 linii (nie ucinany).
MINA: .custom-checkbox to flex-item o szer. treści (492px) → wychodził poza box;
label (.psgdpr_consent_message) to flex-row bez zawijania → tekst uciekał w bok. */
.footer-newsletter .block_newsletter .gdpr_consent{display:block !important;overflow:visible !important}
.footer-newsletter .block_newsletter .custom-checkbox{display:block !important;width:100% !important;margin:0 !important}
.footer-newsletter .block_newsletter .psgdpr_consent_message{display:flex !important;align-items:flex-start;gap:8px;
width:100% !important;white-space:normal !important;font-size:11.5px;line-height:1.4;margin:0}
.footer-newsletter .block_newsletter .psgdpr_consent_message>input[type="checkbox"]{flex:none !important;margin-top:1px}
.footer-newsletter .block_newsletter .psgdpr_consent_message>span:last-child{flex:1 1 auto !important;min-width:0 !important;
white-space:normal !important;overflow:visible !important;text-overflow:clip !important}
}
/* ── PDP mobile: galeria — motyw kolapsuje główne zdjęcie do ~52px (row-reverse
z miniaturami na całą szerokość). Duże zdjęcie na górze, miniatury w rzędzie pod. ── */
@media (max-width: 767px){
.product-container-top .images-container{flex-direction:column !important;gap:12px !important;align-items:stretch !important}
.product-container-top .product-cover-wrap{width:100% !important;flex:1 1 100% !important;min-width:0 !important}
.product-container-top .product-cover img{padding:16px !important}
.product-container-top .js-qv-mask.mask{width:100% !important;height:auto !important;flex:none !important;overflow:visible !important}
.product-container-top .product-images.js-qv-product-images{flex-direction:row !important;flex-wrap:nowrap !important;
overflow-x:auto !important;gap:8px !important;padding-bottom:2px}
.product-container-top .thumb-container{width:60px !important;flex:0 0 60px !important;margin:0 !important}
.product-container-top .thumb-container .thumb{width:60px !important;height:60px !important;padding:6px !important}
/* MINA: motyw slickuje pasek miniatur → slajdy pozycjonowane absolutnie/floatem co ~43px
przy szerokości 60px = NAKŁADANIE. Rozbrajamy slicka (track na flex, bez transformu). */
.product-container-top .js-qv-product-images .slick-list{overflow:visible !important;width:100% !important}
.product-container-top .js-qv-product-images .slick-track{display:flex !important;gap:8px !important;
transform:none !important;width:auto !important;left:0 !important}
.product-container-top .js-qv-product-images .slick-slide{float:none !important;position:relative !important;
left:auto !important;width:60px !important}
/* breadcrumb bliżej zdjęcia + mniej pustej przestrzeni nad galerią (mobile) */
#product .product-container-top,
.product-container-top{margin-top:6px !important}
#product .breadcrumb-wrap,
.breadcrumb-wrap{padding-bottom:0 !important}
.product-breads-wrap{margin-bottom:8px !important}
.product-container-top .product-cover img{padding:10px !important}
/* zaufanie: 4 boxy JEDEN POD DRUGIM (siatka 2×2 wychodziła 386+213px poza 360px → widać było 2) */
.product-container-top .product-details-reassurance.mk-trust{grid-template-columns:1fr !important;gap:8px !important}
/* mniej pustej przestrzeni: „najniższa cena z 30 dni" → kreska → dodaj do koszyka */
.product-container-top .product-prices{margin-bottom:0 !important}
.product-container-top .product-information{margin-top:12px !important}
/* dodaj do koszyka: qty mniejsze, przycisk = sama ikonka koszyka (tekst zawijał),
serce + porównaj mieszczą się w jednym rzędzie */
.product-container-top .product-add-to-cart .product-quantity{gap:8px !important;align-items:stretch}
.product-container-top .add-to-cart-amount{height:52px !important}
.product-container-top .add-to-cart-amount select,
.product-container-top .add-to-cart-amount .form-control-select{height:52px !important;min-width:54px !important;
padding:0 24px 0 8px !important}
.product-container-top .add{flex:1 1 auto !important;min-width:0 !important}
.product-container-top .btn.btn-black.add-to-cart{height:52px !important;padding:0 10px !important;
font-size:0 !important;gap:0 !important}
.product-container-top .btn.btn-black.add-to-cart::before{width:22px !important;height:22px !important;margin:0 !important}
.product-container-top .mk-sq{width:52px !important;height:52px !important;flex:none !important}
.product-container-top .phone-order-info{flex-basis:100% !important;margin-top:10px !important}
}
/* ── LISTING mobile: odstępy o połowę mniejsze niż w bazie (krawędź 16→8, gutter 14→8)
→ jeszcze większe kafle. TYLKO mobile (desktop zostaje 16/14). ── */
@media (max-width: 767px){
body#category #main>.container,
body#manufacturer #main>.container,
body#supplier #main>.container,
body#new-products #main>.container,
body#best-sales #main>.container,
body#prices-drop #main>.container,
body#search #main>.container,
body#category #main>.container-fluid{padding-left:8px !important;padding-right:8px !important}
.products.row{margin-left:-4px !important;margin-right:-4px !important}
.products.row>.js-product{padding-left:4px !important;padding-right:4px !important}
}
/* ── DESKTOP: karuzele produktowe (home „Polecane" itd. + PDP „Zobacz z tej serii")
mają wyglądać JAK KAFLE NA LIŚCIE — ten sam mały odstęp (14px) i rozmiar ~1/4 szer.
(było gap:24 + max 300px → za małe i za rzadkie). Mobile (peek 72%) bez zmian. ── */
@media (min-width: 768px){
.featured-products .products.row.mk-car{gap:14px !important}
.featured-products .products.row.mk-car>.js-product{width:clamp(240px, calc((100% - 42px) / 4), 360px) !important}
}