/*  reset  -----------------------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;scroll-behavior: smooth;}
*, *:before, *:after {-webkit-box-sizing: inherit;-moz-box-sizing: inherit;box-sizing: inherit;font-display:fallback}



table th {font-weight:400}
body, table, div, input, textarea, select, button {
    font-family: 'Roboto', sans-serif;color:#1f1f1f;color:var(--text);font-weight:400;font-size:var(--font-size1);line-height:1.875em;line-height:var(--line-height);}

button {border:0;padding:0;margin:0;background:none}
sup {vertical-align:super;line-height:1em;font-size:0.6em}
sub {vertical-align:sub;line-height:1em;font-size:0.6em}
strong,b {font-weight:700}
em,i {font-style:italic}
a {color:var(--link);text-decoration:none}
a:hover {color:var(--hover);text-decoration:none}
a:active {color:var(--active);text-decoration:none}
p {margin:0;line-height:var(--line-height-content)}
label {cursor:pointer}
button {cursor:pointer}
input, textarea {outline:0}





/* zmienne -----------------------------------------------------------------------------------------------------------*/

:root {
    interpolate-size: allow-keywords;

    /* czcionki */
    --normal: 400;
    --medium: 500;
    --bold: 700;
    --font-size0: 0.875rem;
    --font-size1: 16px;
    --font-size2: 1.125rem;
    --font-size3: 1.25rem;
    --font-size4: 1.375rem;
    --font-size5: 1.5rem;
    --font-size-vbig: 2rem;
    --font-size-bigtitle: 1.75rem;
    --font-size-bigtitle2: 2rem;
    --font-size-bigtitle3: 2.25rem;

    --line-height: 1.2em;
    --line-height-content: 1.2em;
    --line-height-big: 1.5em;

    /* tla */
    --bg-light1: #f2f2f2;
    --bg-light2: #e6e6e6;
    --bg-light3: #d7d7d7;
    --bg-light4: #c8c8c8;
    /*--bg-wazne: #fff5bf;*/
    --bg-wazne: #ffed8c;
    --bg-akcja: #ffdb19;
    --bg-bwazne: #d90000;
    --bg-active: #aa0000;
    --bg-hover: #d90000;
    --bg-selected: #d90000;
    --bg-dark1: #000;
    --bg-dark2: #202020;
    --bg-dark3: #404040;

    /* kolor */
    --color-default: #1f1f1f;
    --text: #1f1f1f;
    --text-light: #4b4b4b;
    --link: #0000ff;
    --hover: #d90000;
    --active: #aa0000;
    --akcja: #ffdb19;
    --selected: #d90000;
    --wazne: #d90000;
    --bwazne: #d90000;
    --color-wazne: #d90000;

    --kolor-stock: #237346;
    --kolor-hurt: #2d5a9b;

    /* transition */
    --t-linear: all 0.3s linear;
    --t-linear-fast: all 0.15s linear;
    --t-ease: all 0.3s ease;
    --t-ease-fast: all 0.15s ease;
    --t-ease-slow: all 0.6s ease;
    --t-ease-out: all 0.3s ease-out;
    --t-ease-out-fast: all 0.20s ease-out;

    /* box-shadow */
    --box-shadow1: 0 0px 1rem rgba(0,0,0,0.5);
    --box-shadow1-hover: 0 0.6rem 1.2rem rgba(0,0,0,0.6);

    /* layout zmienne */
    --top_height: 138px;
}





/* animacje na wejscie -----------------------------------------------------------------------------------------------*/

*>.anim {position:relative}
.anim {transition:var(--t-ease);position:relative;animation-fill-mode: backwards;animation-duration: 0.5s;animation-delay:1s;
    transform-origin:center center}
#all.anim {animation-delay:0s;}
#all.anim .anim {animation-delay:0.5s;}
.load-anim-fadein {animation-name: anim-fadein}
.load-anim-slidein {animation-name: anim-slidein}
.load-anim-slidein-top {animation-name: anim-slidein-top;animation-delay: 0.3s}
.load-anim-zoomin {animation-name: anim-zoomin;animation-duration: 1.5s}
.load-anim-uncover {position:absolute;inset:0 0 0 0;z-index:2;pointer-events: none;animation-name: anim-uncover-x;
    animation-duration: 0.5s;animation-delay:1.1s;animation-fill-mode: forwards;transform-origin:center center}
.load-anim-uncover:before {display:block;height:50%;left:0;top:0;right:0;background:#fff;var(--bg-light1);content:"";position:absolute;
    animation-name: anim-uncover-y;animation-duration: 1s;animation-fill-mode: forwards;transform-origin:center bottom;animation-delay:0.3s;}
.load-anim-uncover:after {display:block;height:50%;left:0;right:0;bottom:0;background:#fff;var(--bg-light1);content:"";position:absolute;
    animation-name: anim-uncover-y;animation-duration: 1s;animation-fill-mode: forwards;transform-origin:center top;animation-delay:0.3s;}

@keyframes anim-fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes anim-slidein {
    0% {opacity:0;transform:translateY(-20px) scaleY(0.93)}
    100% {opacity:1;transform:translateY(0px) scaleY(1)}
}
@keyframes anim-slidein-left {
    0% {opacity:0;transform:translateX(-30px) scale(1)}
    100% {opacity:1;transform:translateX(0px) scale(1)}
}
@keyframes anim-slidein-right {
    0% {opacity:0;transform:translateX(30px) scale(1)}
    100% {opacity:1;transform:translateX(0px) scale(1)}
}
@keyframes anim-slidein-top {
    0% {opacity:0;transform:translateY(30px) scaleY(1)}
    100% {opacity:1;transform:translateY(0px) scaleY(1)}
}
@keyframes anim-zoomin {
    0% {opacity:0;transform:scale(1.06) translateX(0) translateY(0)}
    100% {opacity:1;transform:scale(1) translateX(0) translateY(0)}
}
@keyframes anim-zoomin2 {
    0% {opacity:0;transform:scale(1.2)}
    100% {opacity:1;transform:scale(1)}
}
@keyframes anim-zoomin-v {
    0% {opacity:0;transform:scaleY(0)}
    100% {opacity:1;transform:scaleY(1)}
}
@keyframes anim-zoomin-h {
    0% {opacity:0;transform:scaleX(0)}
    100% {opacity:1;transform:scaleX(1)}
}

@keyframes anim-uncover-x {
    0% {transform:scaleX(1);opacity:1}
    100% {transform:scaleX(0);opacity:1}
}
@keyframes anim-uncover-y {
    0% {transform:scaleY(1);;opacity:1}
    100% {transform:scaleY(0.003);;opacity:0.7}
}
@keyframes anim-fadein-scale {
    0% {opacity:0;transform:scaleX(0.5)}
    100% {opacity:1;transform:scaleX(1)}
}
@keyframes anim-fadein-scale2 {
    0% {opacity:0;transform:scaleY(0.5)}
    100% {opacity:1;transform:scaleY(1)}
}
@keyframes anim-kafel {
    0% {opacity:0;transform:scaleX(0.5)}
    100% {opacity:1;transform:scaleX(1)}
}

.scroll-anim {animation-duration: 750ms;animation-delay:500ms;opacity:0;animation-fill-mode:forwards}
.scrolled-in.scroll-anim-zoomin {animation-name: anim-zoomin}
.scrolled-in.scroll-anim-zoomin2 {animation-name: anim-zoomin2}
.scrolled-in.scroll-anim-zoomin-v {animation-name: anim-zoomin-v}
.scrolled-in.scroll-anim-fadein-scale {animation-name: anim-fadein-scale}
.scrolled-in.scroll-anim-fadein-scale>* {animation-name: anim-zoomin;animation-delay:1200ms;animation-duration: 1.2s}
.scrolled-in.scroll-anim-slidein-top {animation-name: anim-slidein-top;;animation-duration: 1s}
.scrolled-in.scroll-anim-sideslide-left {animation-name: anim-slidein-left;;animation-duration: 1s}
.scrolled-in.scroll-anim-sideslide-right {animation-name: anim-slidein-right;;animation-duration: 1s}
.scrolled-in.kafel-anim {animation-name: anim-zoomin-h;animation-delay:500ms}
.scrolled-in.okladka-anim {animation-name: anim-zoomin-h;}
.scrolled-in.produkt-anim {animation-name: anim-zoomin2;}

:root {
    --anim-attention-length: 6000ms;
}

.anim-attention {animation-name: anim-attention;;animation-duration: var(--anim-attention-length);animation-delay:2s;animation-iteration-count: infinite;}
.anim-delay-2 {animation-delay:calc(2s + var(--anim-attention-length))}
.anim-delay-4 {animation-delay:calc(4s + var(--anim-attention-length))}
.anim-delay-6 {animation-delay:calc(6s + var(--anim-attention-length))}
@keyframes anim-attention {
    0% {transform:rotate(0deg)}
    0.8% {transform:rotate(1deg) translateX(-3px)}
    1.6% {transform:rotate(0deg) translateX(0px)}
    2.4% {transform:rotate(-1deg) translateX(3px)}
    3.2% {transform:rotate(0deg) translateX(0px)}
    4% {transform:rotate(1deg)  translateX(-3px)}
    4.8% {transform:rotate(0deg)  translateX(0px)}
    5.6% {transform:rotate(-1deg) translateX(3px)}
    6.4% {transform:rotate(0deg) translateX(0px)}
    100% {transform:rotate(0deg)  translateX(0px)}
}


.animation-delay-500 {animation-delay:500ms;}
.animation-delay-1000 {animation-delay:1000ms;}
.animation-delay-1500 {animation-delay:1500ms;}
.animation-delay-2000 {animation-delay:2000ms;}
.animation-delay-2500 {animation-delay:2500ms;}
.animation-delay-3000 {animation-delay:3000ms;}



/* klasy pomocnicze --------------------------------------------------------------------------------------------------*/

.bg-white {background:#fff}
.bg-light1 {background:var(--bg-light1)}
.bg-light2 {background:var(--bg-light2)}
.bg-light3 {background:var(--bg-light3)}
.bg-light4 {background:var(--bg-light4)}
.bg-wazne {background:var(--bg-wazne)}
.bg-bwazne {background:var(--bg-bwazne)}

.smalltext {font-size:var(--font-size0)}
.medtext {font-size:var(--font-size2)}
.bigtext {font-size:var(--font-size3)}
.biggertext {font-size:var(--font-size4)}
.vbigtext {font-size:var(--font-size5)}
.vvbigtext {font-size:var(--font-size-vbig)}
.hidden {display:none}
.aleft {text-align:left}
.aright {text-align:right}
.acenter {text-align:center}
.ajustify {text-align:justify}
.striked {text-decoration:line-through}
.striked2 {text-decoration:line-through}
.upper {text-transform: uppercase}

.block {display:block;}
.iblock {display:inline-block;}

.content {line-height: var(--line-height-content);}
.interlinia15 {line-height:var(--line-height-big)}

.wazne {color:var(--wazne)}
.bwazne {color:var(--bwazne)}
.red {color:#d90000}
.bg-stock {background-color:#237346}
.bg-hurt {background-color:#2d5a9b}
.txt-hurt {color:var(--kolor-hurt)}
.txt-stock {color:var(--kolor-stock)}

.langdebug {color: #40a000;font-size: 10px;display: inline-block;line-height: 12px;}

.flex-nowrap {display:flex;flex-flow:row nowrap;align-items:center;justify-content: center}
.flex-row {display:flex;flex-flow:row wrap;}
.flex-col {display:flex;flex-flow:column nowrap;}
.flex-row-col {display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:space-around}
.flex-row-col .flex-between {flex:0 0 auto;padding-left:2%;border-right:1px dotted #c0c0c0;margin-right:2%}
.flex-row-f {display:flex;flex-flow:row nowrap;}
.flex-ac {align-items:center;}
.flex-at {align-items:flex-start;}
.flex-ab {align-items:flex-end;}
.flex-as {align-items:stretch;}
.flex-jb {justify-content: space-between}
.flex-ja {justify-content: space-around}
.flex-jc {justify-content: center}
.flex-jl {justify-content: flex-start}
.flex-jr {justify-content: flex-end}
.flex-grow {flex:1 0 auto}
.flex-shrink {flex:0 1 auto}
.flex-fit {flex:1 1 auto}

#lightbox img {display:block;margin:0;padding:0}

.icon-svg {margin:0;display:inline-block;padding:0;vertical-align:middle;height:24px}

.icon-svg-hover {position:relative;line-height:1px}
.icon-svg-hover img {display:block}
.icon-svg-hover img:nth-of-type(2){position:absolute;top:0;left:0;bottom:0;opacity:0;margin:auto}
.icon-svg-hover img:nth-of-type(3){position:absolute;top:0;left:0;bottom:0;opacity:0;margin:auto}
.icon-svg-hover:hover img:nth-of-type(1){opacity:0;}
.icon-svg-hover:hover img:nth-of-type(2){opacity:1;}
a:has(>.icon-svg-hover):hover .icon-svg-hover>img:nth-of-type(1){opacity:0;}
a:has(>.icon-svg-hover):hover .icon-svg-hover>img:nth-of-type(2){opacity:1;}

.icon-svg-hover:active img:nth-of-type(3){opacity:1;z-index:2}
a:has(>.icon-svg-hover):active .icon-svg-hover>img:nth-of-type(3) {opacity:1;z-index:2}
.icon-svg-hover:active:has(img:nth-of-type(3)) .icon-svg-hover>img:nth-of-type(1){opacity:0}
a:has(>.icon-svg-hover):active .icon-svg-hover:has(img:nth-of-type(3)) img:nth-of-type(1) {opacity:0}
.icon-svg-hover:active:has(img:nth-of-type(3)) img:nth-of-type(2){opacity:0}
a:has(>.icon-svg-hover):active .icon-svg-hover:has(img:nth-of-type(3)) img:nth-of-type(2) {opacity:0}

.icon-svg.svg-48 {height:48px}
.icon-svg.svg-40 {height:40px}
.icon-svg.svg-38 {height:38px}
.icon-svg.svg-32 {height:32px}
.icon-svg.svg-28 {height:28px}
.icon-svg.svg-24 {height:24px}
.icon-svg.svg-w24 {width:24px}
.icon-svg.svg-16 {height:16px}
.icon-svg.svg-12 {height:12px}
.icon-svg.svg-w12 {width:12px}
.icon-svg.svg-8 {height:8px}

/* mechanizmy --------------------------------------------------------------------------------------------------------*/

.scrollable-container {position: relative;padding:0;margin:0 50px}
.scrollable {
    position: relative;overflow-x: hidden;overflow-y: hidden;display: flex;flex-flow: row nowrap;height: fit-content;
    scroll-behavior: smooth;scroll-snap-type: x mandatory;align-items: center;justify-content: flex-start;}
.scrollnavi {
    position: absolute;top: 50%;z-index: 2;width: 25px;height: 40px;line-height: 0;background-size:auto 40px;
    display: flex;align-items: center;justify-content: center;background-repeat:no-repeat;background-position: center center}
.scrollleft {left: 0;transform: translateX(-100%) translateY(-50%);margin-left:7px;;cursor:pointer ;;background-image:url(gfx/lewo_normal.svg)}
.scrollright {right: 0;transform: translateX(100%) translateY(-50%);margin-right:7px;;cursor:pointer;;background-image:url(gfx/prawo_normal.svg)}
.scrollleft:hover {color: var(--bwazne);background-image:url(gfx/lewo_hover.svg)}
.scrollright:hover {color: var(--bwazne);background-image:url(gfx/prawo_hover.svg)}

.scrollable > span img {max-width:100%;min-width:20px;object-fit:contain}
.scrollable > span { width: 100%;flex: 0 0 auto;scroll-snap-align: center;transition:var(--t-linear-fast);display:flex;
    align-items:center;justify-content:center}

#glowna-marki {box-shadow:rgba(31, 31, 31, 0.15) 0px 0px 12px 0px, rgba(31, 31, 31, 0.15) 0px 8px 16px 0px;border-radius:0 0 24px 24px;}
#glowna-marki .scrollable-container {margin:0 50px}
#glowna-marki .header2 {}
#glowna-marki .glowna-marki-contents {border-radius:0 0 24px 24px;}
#glowna-marki .scrollable {height: 192px;padding:0 10px;gap:0px}
#glowna-marki .scrollable img {height: 48px}
#glowna-marki .scrollable > span {width:clamp(100px,20%,300px);height:100px;padding:0 10px;}
#glowna-marki .scrollable > span:hover {box-shadow:var(--box-shadow1)}

.rozwijane {display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;gap:30px}
.rozwijane-wiecej {order:2;color:var(--text);font-size:var(--font-size5);cursor:pointer;}
.rozwijane-wiecej label {display:flex;align-items:center;justify-content:flex-start;gap:25px;}
.rozwijane-wiecej:has(:checked) i {transform:rotate(180deg);color:var(--bwazne)}
.rozwijane-wiecej i {font-size:var(--font-size2);transition:var(--t-ease)}

.rozwijane>div.content {order:1;overflow:hidden;max-height:min-content;height:calc(6 * var(--line-height));transition:var(--t-ease)}
.rozwijane-wiecej:has(:checked) + div {height:auto !important;}

.overlib {position:relative}
.overlib-popup {pointer-events:none;position:fixed;z-index:2000;align-items:center;justify-content:center;max-width:300px;overflow:hidden;
    transition:var(--t-ease);color:var(--text);background:#fff;font-size:var(--font-size0);opacity:0;width:max-content;
    border-radius:5px;padding:0.25em 0.4em;transform:translateX(-50%) translateY(-10px);
    animation:overlib-popup-anim 0.3s ease-out forwards;box-shadow:0px 8px 12px rgba(31,31,31,0.2)}
.overlib-popup>div {font-size:var(--font-size0);}
.overlib-popup.overlib-popup-hide {animation:overlib-popup-anim-hide 0.2s ease-out forwards}

@keyframes overlib-popup-anim {
    0% { opacity: 0;transform:translateX(-50%) translateY(-10px);}
    100% { opacity: 1; ;transform:translateX(-50%) translateY(0px);}
}
@keyframes overlib-popup-anim-hide {
    0% { opacity: 1; ;transform:translateX(-50%) translateY(0px);}
    100% { opacity: 0;transform:translateX(-50%) translateY(-10px);}
}

.poddzialy {display:flex;flex-flow:column nowrap;margin:0 auto;}
.poddzialy .poddzial {display:flex;align-items: center;justify-content: center;background:var(--bg-light3);}
.poddzialy .poddzial:hover {background:var(--bg-wazne)}
.poddzialy .poddzial h2 {margin:0;}


/* elementy ----------------------------------------------------------------------------------------------------------*/

.button {
    background:#fff;border-radius:24px;padding:0 20px;min-height:48px;display:flex;flex-flow:row wrap;border:1px solid var(--bg-light3);
    align-items:center;justify-content:center;gap:16px;color:var(--text);position:relative;box-shadow:0 0 16px rgba(31,31,31,0.5);font-size:20px}
.button.compact {min-height:40px;font-size:18px}
.button.mini {min-height:32px;}
.button * {text-align:center}
.button-icon {justify-content: space-between}
.button:hover {border-color:var(--bwazne)}
.button.bwazne {border-color:var(--bwazne);background:var(--bg-akcja)}
.button.bwazne:hover {color:#fff !important;border-color:var(--akcja);background:var(--bg-bwazne)}
.info.wazne {color:var(--wazne)}

.icon img {transition:var(--t-ease-out-fast);display:block}
.icon-50 img {transform:scale(1);height:40px}
.icon-50:hover img {transform:scale(1.25)}

.placeholder {cursor:pointer;position: absolute;left: 0;top: 0;bottom: 0;right: 0;pointer-events: none;display: flex;
    align-items: center;justify-content: flex-start;}
*:has(>.placeholder) {position: relative;}
form:hover .placeholder  {color:var(--color-wazne) !important}
form:hover .placeholder>*  {color:var(--color-wazne) !important}
input:focus + .placeholder  {display:none !important}
input:not(:placeholder-shown) + .placeholder {display:none !important}
input:has(+.placeholder) {cursor:pointer}

.header2 {font-size:var(--font-size-bigtitle);font-weight:var(--bold);color:var(--text);text-align:center;display: flex;
    align-items: center;justify-content: center;min-height:80px}
.header3 {font-size:var(--font-size5);font-weight:var(--bold);color:var(--text);margin-bottom:1.25em;padding-left:0.4em}

.infobox {display:inline-flex;background:var(--bg-light2);padding:0 1em;min-height:30px;align-items:center;justify-content:center;}
.infobox-1 {height:32px;display:inline-flex;padding:0 5px;align-items:center;}
.infobox-2 {height:32px;display:inline-flex;padding:0 5px;align-items:center;}


/* layout ------------------------------------------------------------------------------------------------------------*/

html, body {font-size:var(--font-size1)}
html{;overflow-x:hidden}

.page {max-width:1600px;margin:0 auto;}

#top-mobile {display:none;position:sticky;top:0;background:#fff;z-index:5}
#top-mobile .page {display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;padding:5px 10px;gap:10px}
#mobile-options {display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-end;gap:25px}
.mobile-show {font-size:var(--font-size1);font-weight:var(--bold);color:var(--text);display:flex;align-items:center;justify-content:center;gap:10px}
.mobile-show i {font-size:var(--font-size3);color:var(--link)}
.mobile-menu-box {position:absolute}
.mobile-menu-box-close {display:none;position:fixed;z-index:3;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5)}
.mobile-menu-content {position:fixed;z-index:4;left:100%;top:var(--top_height);background:#fff;opacity:0.2;transform:translateX(0);
    transition:var(--t-ease);width:250px;padding:15px;border-radius:10px 0 0 10px;display: flex;flex-flow:column wrap;gap:10px;
    align-items:stretch;justify-content:flex-start;}
.mobile-menu-box.show .mobile-menu-box-close {display:block}
.show .mobile-menu-content {transform:translateX(-100%);opacity:1}
.mobile-menu-content .menu {gap:4px}
.mobile-menu-content .menu li {flex:0 0 100%}
.mobile-menu-content .menu li a {flex:1 0 100%;min-height:1.5em;font-weight:var(--bold) ;}


#top {position:sticky;top:0;background:#fafafa;z-index:1004;border-bottom:1px solid var(--bwazne);
    box-shadow:0 8px 16px 0 rgba(31,31,31,0.25) }
#top .page {display:grid;align-items:center;justify-content:stretch;gap:16px;grid-template-columns: auto 1fr}
#navigation {background:var(--bg-light4);display:grid;grid-template-columns: 1fr;gap:1px;align-items:stretch;justify-items:stretch}
#navigation>* {background:#fff}
.logininfo {display:flex;flex-flow:row nowrap;gap:20px;align-items: center;}


.home img {display:block}

#skroty {display:flex;flex-flow:row wrap;gap:20px;align-items: center;justify-content: space-between;height:48px}
#linki {display:flex;flex-flow:row wrap;gap:20px;align-items: center;justify-content: space-between}


/* jeden piksel menu linia nie wykrywa */
/*
.menu {display:flex;flex-flow:row wrap;align-items: center;justify-content: flex-start;gap:8px}
.menu:hover {z-index:5}
.menu li a {display:flex;color:var(--text);align-items: center;min-height:40px;padding:4px 4px;flex:1 1 auto}
.menu ul li a {padding-right:20px}
.menu li {position:relative;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:0;padding:0}
.menu li i {position:absolute;right:4px;}
.menu li:hover>a:hover {display:flex;color:var(--hover);}
.menu ul {opacity: 0;display: none;transition: opacity .3s ease, display .3s ease allow-discrete;width: 290px;position: absolute;gap: 1px;
    flex-flow: column nowrap;align-items: stretch;justify-content: flex-start;top: 0;left: 100%;background: var(--bg-light4);
    @starting-style {
        opacity: 1;
    }
}
.menu>li>ul {top:64px;left:0;border-top:1px solid var(--bg-light4)}
.menu ul li:hover {background:var(--bg-wazne)}
.menu li:has(.rozwiniete)>ul,.menu li:has(.rozwiniete)>ul li:hover>ul {display: flex;opacity: 1;transition: opacity .3s ease, display .3s ease allow-discrete;
    @starting-style {
        opacity: 0;
    }
}
*/
.menu {display:flex;list-style-type:none;padding-left:0;gap:0;align-items:stretch;height:100%;position:relative;flex:1 1 auto}
.menu>li {display:flex;list-style-type:none;align-items:stretch;justify-content:stretch;grid-template-columns: 1fr;grid-template-rows: 1fr;
    background:transparent;}
.menu>li>a {padding:12px 0 12px;color:var(--color-default);flex:1 1 fit-content;position:relative;
    display:grid;list-style-type:none;align-items:stretch;justify-items:center;grid-template-columns: 1fr;grid-template-rows: 1fr;line-height:16px}
.menu>li>a  h2 {font-weight:400;border-radius:24px 24px 0 0;padding:0 12px;display:flex;align-items:center}
.menu>li>a.selected h2 {color:#fff;background-color:#d90000;}
.menu>li>a.selected:after {bottom:4px;content:"";display:block;width:100%;height:8px;background-color:#ffdb19;position:absolute;left:0;right:0;}
.menu>li>a.hovered:after {bottom:4px;content:"";display:block;width:100%;height:8px;background-color:#ffdb19;position:absolute;left:0;right:0;}
.menu>li>a:hover:after {bottom:4px;content:"";display:block;width:100%;height:8px;background-color:#ffdb19;position:absolute;left:0;right:0;}
.menu>li>a.selected:hover {color:#fff;}
.menu>li>a:hover {color:#d90000}
.menu>li:hover-inside>a {color:var(--color-hover);font-weight:400;}
.menu>li:hover>a {color:#d90000;font-weight:400;}
.menu>li:hover-inside>a.selected {color:#fff;}
.menu>li:hover>a.selected {color:#fff;}
.menu:has(>li>a:hover)>li>a.selected:not(:hover) {}
.menu:has(>li>a:hover)>li>a.selected:not(:hover):after {display:none}
.menu>li>a>h2 {grid-row:1/2;grid-column:1/2;}
.menu>li>a:hover>h2 {color:#d90000}
.menu>li>a.selected>h2 {color:#fff}
.menu a>* {text-align:center}
.menu ul a>* {text-align:left}
.menu>li>a>span {font-weight:700;opacity:0;visibility:hidden;grid-row:1/2;grid-column:1/2;}


#logout-button {position:fixed;top:36px;left:100%;border-radius:24px 0 0 24px;transition:all 0.3s ease;height:48px;transform:translateX(-96px);
    z-index:1005;font-size:20px;padding:0 24px 0 80px;background:var(--bg-akcja) no-repeat 24px center url(gfx/zamknij_normal.svg);width:max-content;
    display:flex;align-items:center;justify-content:center;background-size:auto 32px;border:1px solid var(--bwazne)}
#logout-button span {opacity:0;transition:all 0.3s ease;transform:translateX(16px)}
#logout-button:hover,#logout-button.active {transform:translateX(-100%);background-color:var(--bg-hover);background-image:url(gfx/zamknij_white.svg);color:#fff}
#logout-button:active {;background-color:var(--bg-active);border-color:var(--akcja)}
#logout-button:hover *,#logout-button.active * {opacity:1;transform:translateX(0)}

#opcje-nawigacji {display:flex;flex-flow:row wrap;gap:20px;align-items: center;justify-content: space-between;height:48px}
#opcje-linki {display:flex;flex-flow:row wrap;gap:20px;align-items: center;justify-content: flex-end;}

.langs {height:40px;width:70px;text-align:center;transition:var(--t-ease-out);margin-left:-6px}
.langs img {display:block}
.langs>a {;border-radius:5px;padding:0 0 0 6px; display: flex;gap:5px;flex-flow: row nowrap;background: #fafafa;
    align-items: center;justify-content: space-between;height:41px;cursor: pointer;position:relative;font-size:1em;transition:var(--t-ease-out)}
.langs:hover,.langs:focus-within {;background:#fafafa;z-index:1006}
#nawigacja:has(.langs:hover),#nawigacja:has(.langs:focus-within) {z-index:1006}
.langs:hover span, .langs:focus-within span { ;background:#fafafa}
.langs:hover span, .langs:focus-within {color:var(--wazne)}
.langs:hover span i, .langs:focus-within span i {}
.langs ul {height:0;overflow:hidden;background:#fafafa;border-radius:0 0 5px 5px;;transition:var(--t-ease-out);z-index:1}
.langs:hover ul, .langs:focus-within ul {background:#fafafa;height:auto;}
.langs li {height:40px;display:flex;align-items:center;justify-content:flex-start;padding:0 6px 10px;text-align:left}

#wyszukaj-box {border-radius:24px;height:40px;position:relative;padding:0 20px;gap:16px !important;border:1px solid #d7d7d7;display:flex;
flex-flow:row nowrap;align-items: center;justify-content:space-between;background:#f2f2f2;text-align: center}
#wyszukaj-box:hover {border:1px solid var(--hover);}

.frazabox input {border:none;background:none;outline:none;height:30px;line-height:30px}
.frazabox input:focus + .placeholder {display:none !important}

#baner {background:#fff;/*position:sticky;top:var(--top_height);*/padding-bottom:3rem;padding-top:4rem}
#baner-container {box-shadow:0 8px 20px 0 rgba(0,0,0,0.25) }
#baner .page {background:var(--bg-light1);aspect-ratio:1600/792;position:relative;overflow:hidden;border-radius:24px;
}
#baner-slides {display:grid;grid-template-columns: 1fr;align-items:stretch;justify-items:stretch;grid-template-rows: 1fr}
#baner-slides .slide {grid-row:1/2;grid-column:1/2;transition:all 2s ease;opacity:1;;z-index:1}
#baner-slides .slide.selected {opacity:1;;z-index:2}
#baner-slides .slide.selected img {transform:scale(1) translateX(0px);transition:all 2.5s ease;opacity:1}
#baner-slides .slide img {max-width:100%;line-height:0;display:block;width:100%;aspect-ratio:1600/792;transition:all 1.2s ease;
    transform:scale(1) translateX(0px);opacity:0}

#baner-dots {z-index:3;position: absolute;top:20px;left:0;right:0;bottom:auto; display:flex;flex-direction:row;align-items:stretch;
    gap:10px;justify-content:center;}
#baner-dots .dot {width:12px;height:12px;display:block;border-radius:50%;background:rgba(0,0,0,0.6);transition:var(--t-linear);cursor: pointer;}
#baner-dots .dot.selected {background:var(--akcja);}
#baner-dots .dot:hover {background:var(--bwazne);}

#baner-navi {opacity:0;z-index:3;position: absolute;top:50%;left:0;right:0;bottom:auto; display:flex;flex-direction:row;align-items:stretch;
    justify-content:space-between;transition:var(--t-linear);padding:0 16px}
#baner-navi a {display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-color:var(--bwazne);background:var(--bg-akcja);
    border-radius:50%;font-size:2em;transform:translateY(-50%);;cursor:pointer;border:1px solid var(--bwazne)}
#baner-navi a:hover {color:var(--akcja);background:var(--bg-hover);border-color:var(--bg-akcja)}
#baner-navi a:active {color:var(--akcja);background:var(--bg-hover);border-color:var(--bg-akcja)}
#baner:hover #baner-navi {opacity:1}
#baner-scroll {position:absolute;bottom:10px;left:50%;transform:translateX(-50%) ;display:flex;align-items:center;justify-content:center;
    width:50px;height:50px;background:var(--bg-light2);color:var(--text);border-radius:50%;font-size:2em;transition:var(--t-linear-fast);
    opacity:0;z-index:4}
#baner:hover #baner-scroll {opacity:0.5}
#baner-scroll:hover {color:var(--akcja);background:var(--bg-dark3);opacity:1 !important}
.baner-left {padding-right:5px}
.baner-right {padding-left:4px}


#title-anchor {position:relative;top:calc(-1 * var(--top_height));}

#main {background:var(--bg-light1);position:relative;flex:1 0 auto}
.title-container {position:sticky;z-index:3;top:var(--top_height);width:100%;display:none}

.title {border-top:1px solid #ff0000;border-bottom:1px solid #ff0000;text-align:center;
    font-size:var(--font-size-bigtitle);line-height:1em}
.title h1 {background:var(--bg-light2);height:3rem;font-size:var(--font-size-bigtitle);display:flex;align-items:center;justify-content:center;line-height:1em}
.title-add {height:calc(3rem + 1px);border-top:1px solid var(--bg-light4);background:#fff;display:flex;align-items:center;justify-content:center;line-height:1em}
.title-sub {background:var(--bg-light2);min-height:calc(3rem + 2px);font-size:var(--font-size-bigtitle);display:flex;align-items:center;justify-content:center;line-height:1em;border-top:1px solid #ff0000;border-bottom:1px solid #ff0000;}

#main.main-aside .page {display:grid;grid-template-columns:310px 1fr;align-items:flex-start;justify-items:stretch;gap:10px}
.title-container.title-aside {padding-left:320px}
#gotomenu {display:none;}

#aside {position:sticky;top:152px;margin-top:-52px;padding-bottom:20px}
.asideheader {background:var(--bg-akcja);min-height:40px;display:flex;align-items:center;justify-content:flex-start;padding:5px}

#menulewe {display:flex;align-items:stretch;justify-content:stretch;gap:1px;flex-flow:column nowrap;background:var(--bg-light4)}
#menulewe li a {display:flex;min-height:40px;;align-items:center;justify-content:flex-start;padding:5px;background:#fff}
#menulewe li a.selected {color:var(--bwazne)}
#menulewe li a.sub {padding-left:15px;position:relative}
#menulewe li a.sub:after {content:">";position:absolute;left:5px;top:0;bottom:0;width:5px;display:flex;align-items:center;}
#menulewe li a.sub.kat1 {padding-left:30px}
#menulewe li a.sub.kat1:after {;left:20px;}
#menulewe li a.sub.kat2 {padding-left:45px}
#menulewe li a.sub.kat2:after {;left:35px;}
#menulewe li a.kat1 {padding-left:15px}
#menulewe li a.kat2 {padding-left:30px}

#content {padding:0}
#content.content-podstrona {background:#fff;padding:0px;box-shadow: 0px -16px 12px -12px rgba(31, 31, 31, 0.10), 0px 40px 24px -24px rgba(31, 31, 31, 0.20);}
.section {position:relative;min-height:2rem}
.section-spacer {padding-bottom:4rem;}
.section-spacer-2 {padding-bottom:3rem;}
.section-text {padding:2rem 1rem;border-radius:1.6rem}
.section.content>img {max-width:100%;width:100%}
#start-haslo {border-radius:24px;min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.665em;
font-size:60px;color:var(--bwazne);position:relative;box-shadow:rgba(31, 31, 31, 0.20) 0px 8px 24px 0px;text-align:center;padding:30px}
#start-haslo:before {content:"";opacity:0.20;background:url(gfx/logo_60.png) no-repeat center center;background-size:auto 88px;
position:absolute;inset:0}
#start-obraz {box-shadow:rgba(31, 31, 31, 0.20) 0px 16px 24px 0px;margin-bottom:8px}
/*
.kafle {display:grid;gap:48px;grid-template-columns:repeat(auto-fit,minmax(365px,1fr));align-items:flex-start;justify-items:center;margin:0 auto;padding:0 2px}
.kafel {max-width:500px;}
*/
.kafle {display:flex;flex-flow:row wrap;gap:48px;align-items:flex-start;justify-content:center;margin:0 auto;padding:0 2px;justify-items:center}
.kafel {width:500px;cursor:pointer;max-width:100%}
.kafel>div {border-radius:24px;overflow:hidden;transition:var(--t-ease-out);max-width:500px;background:#fff;}

.kafel>div {container-type: inline-size;container-name: kafel;width:100%}

/* ;box-shadow:var(--box-shadow1) */
.kafel:hover>div {transform:translateY(-24px);box-shadow:rgba(31,31,31,0.15) 0 12px 24px 0}
/* box-shadow:var(--box-shadow1-hover); */
.kafel>div>img {width:100%;transition:var(--t-ease-out);object-fit:cover;transform-origin: center bottom;display:block;height:282px}
.kafel:hover>div>img {transform:scale(1.08)}
.kafel>div>div {background:#fff;position:relative;padding:24px 8px 32px}
.kafel h3 {font-size:var(--font-size-bigtitle2);font-weight:var(--bold);color:var(--text);margin:0 16px 24px;display:flex;align-items:center;
    justify-content:flex-start;gap:21px;line-height: 1em}
.kafel h3 label {gap:24px;transition:var(--t-ease-out)}
.kafel h3 label span:not(.kafel-rozwin-opis) {flex:0 1 fit-content}
.kafel:hover h3 {color:var(--hover)}
.kafel:hover:active h3 {color:var(--active)}
.kafel:hover .rozwijane-wiecej .icon-svg-hover img:nth-of-type(1){opacity:0;}
.kafel:hover .rozwijane-wiecej .icon-svg-hover img:nth-of-type(3){opacity:1;}
.kafel:hover:active .rozwijane-wiecej .icon-svg-hover img:nth-of-type(3){opacity:0;}
.kafel:hover:active .rozwijane-wiecej .icon-svg-hover img:nth-of-type(2){opacity:1;}

.kafel h3 .kafel-rozwin-opis {width:16px;height:10px;background:url(gfx/dol_normal.svg) no-repeat center center;background-size:16px 10px;flex:0 0 auto}
.kafel:hover h3 .kafel-rozwin-opis {background-image:url(gfx/dol_active.svg)}
.kafel:hover:active h3 .kafel-rozwin-opis {background-image:url(gfx/dol_hover.svg)}
.kafel .rozwijane-wiecej:has(:checked) .kafel-rozwin-opis {background-image:url(gfx/gora_active.svg)}
.kafel:has(:checked)>div {transform:translateY(-24px);box-shadow:rgba(31,31,31,0.15) 0 12px 24px 0}

.kafel:hover:active .rozwijane-wiecej:has(:checked) h3 .kafel-rozwin-opis {background-image:url(gfx/gora_hover.svg)}
.kafel .rozwijane-wiecej:hover h3 {}
.kafel h3 i {font-size:var(--font-size3)}
.kafel .content {font-size:17px}
.kafel-more {background:#fff;border-radius:24px;padding:0 24px;min-height:48px;display:inline-flex;flex-flow:row wrap;margin-left:24px;
    border:1px solid var(--bg-light3);align-items:center;justify-content:center;gap:16px;color:var(--text);position:relative;
    box-shadow:0 0 16px rgba(31,31,31,0.25);font-size:20px;text-wrap: balance;}
.kafel-more:hover {border-color:var(--bwazne)}
.kafel .rozwijane>div.content {height:calc(var(--line-height-content)*3)}
.kafel .rozwijane  {gap:0px;flex-flow:column nowrap;align-items:flex-start;justify-items:flex-start;margin:0 auto;}
.kafel .rozwijane  {margin-bottom:32px}
.kafel .rozwijane-wiecej {order:1}

#start-ofirmie {box-shadow:rgba(31, 31, 31, 0.25) 0px 8px 16px 0px;padding:48px}
#start-ofirmie>div {display:grid;grid-template-columns:1fr 1fr;align-items:flex-start;justify-content:flex-start;gap:32px}
#start-ofirmie div {font-size:18px;line-height:1.5em}
#start-ofirmie div img {max-width:100%}
#start-ofirmie div h2 {font-size:32px;font-weight:700;margin-bottom:45px;letter-spacing:1px}
#start-ofirmie p + * {margin:25px 0 0 0;}
#start-ofirmie cite {background:var(--bg-light1);display:block;padding:20px;border-radius:24px;text-align:center;font-size:20px;line-height:1.5em;}

#menu-stopka {background:#e1e1e1;padding:48px;min-height:300px;border-radius:24px;
    box-shadow: 0px -32px 24px -24px rgba(31, 31, 31, 0.15),0px 8px 24px -24px rgba(31, 31, 31, 0.15);}
.menu-stopka {display:flex;flex-flow:row wrap;gap:16px;}
.menu-stopka>div {display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;justify-content:flex-start;grid-template-rows:auto 1fr}
.menu-stopka>div>a {display:grid;grid-column:1/3;grid-template-columns:subgrid ;align-items:center}
.menu-stopka>div h3 {padding-right:48px;font-weight:700;font-size:22px}
.menu-stopka>div ul {grid-column:2/3;align-self:flex-start;margin:0;padding:0;line-height:29px;font-size:18px}
.menu-stopka>div a {color:var(--text-light)}
.menu-stopka>div a:hover {color:var(--hover)}
.menu-stopka>div a:focus {color:var(--hover)}
.menu-stopka>div a:active {color:var(--active)}

#wlasciciel-stopka {background:#d7d7d7;padding:48px;border-radius:0px;font-size:20px;line-height:1.5em;color:var(--text-light);
    box-shadow: 0px -16px 12px -12px rgba(31, 31, 31, 0.10), 0px 40px 24px -24px rgba(31, 31, 31, 0.20)}
#wlasciciel-stopka div {font-size:20px;color:var(--text-light)}
#wlasciciel-stopka small {font-size:18px;color:var(--text-light);}
#dane-wlasciciel {padding-top:30px;display:grid;align-items:flex-start;grid-template-columns:1fr auto 1fr;}
#dane-wlasciciel div {text-align:left;color:var(--text-light)}
#dane-wlasciciel div:has(.znak-wodny) {text-align:right}
#dane-wlasciciel img.znak-wodny {height:64px;opacity:0.25;margin: 0;padding: 0;}
#dane-wlasciciel #dane-wlasciciel-kontakt {display:grid;align-items:center;grid-template-columns:auto 1fr;row-gap:8px;
    column-gap:24px;font-size:18px;text-align:left;color:var(--text-light)}

#footer-container {position:relative;overflow:hidden;}
#footer {position:relative;overflow:hidden}
#footer>* {position:relative;}

/*
#stopka1 .page {display:flex;flex-flow:row wrap;align-items:flex-start;justify-content:flex-start;gap:0}
#stopka1 .page>div {flex:1 1 auto}
#stopka1 .page>div h3 {line-height: 1.5rem;margin: 0;font-size: var(--font-size3);border-bottom: 1px solid var(--bg-light4);
    padding: 1rem 2rem 1rem 0;}
#stopka1 .page>div ul {padding: 1rem 2rem 2rem 0;}
#stopka1 .page>div li {padding: 0;margin: 0;font-size: var(--font-size2);line-height: 1.5em;max-width: 50ch;}
#stopka1 .page>div li a {color:var(--text)}
#stopka1 .page>div li a:hover {color:var(--hover)}
#stopka1 .page>div:last-child {flex:1000000 0 auto}

#stopka2 {padding:1.4rem 0}
#stopka3 .page {padding:1.4rem 0 4rem}
#stopka3 #cookie1 {display:grid;grid-template-columns: 180px 1fr 180px;gap:1rem;padding:0.5rem 0;align-items:center;
    justify-items:center;border-bottom:1px solid #fff}
*/

#slider-banery {position:fixed;top:186px;left:100%;z-index:4;display:flex;flex-flow:column nowrap;gap:48px}
.slider-baner {width:548px;height:282px;box-shadow:-8px 0 16px rgba(31,31,31,0.25);display:grid;grid-template-columns: 48px 1fr;
    align-items:center;overflow:hidden;border-radius:24px 0 0 24px;background:#fff no-repeat;background-image:url(gfx/lewo_normal.svg);
    background-size:10px 18px;background-position:19px 16px;}
.slider-baner:hover {background-image:url(gfx/lewo_active.svg);}
.slider-baner {transform:translateX(-48px);transition:all 0.4s ease}
.slider-baner.active {transform:translateX(-100%);background-image:url(gfx/prawo_hover.svg)}
.slider-baner.active:hover {transform:translateX(-100%);background-image:url(gfx/prawo_active.svg)}
.slider-baner a {grid-column:2/3;grid-row:1/2;width:500px;height:282px}
.slider-baner a img {width:100%;height:100%}
.slider-baner-title {position:relative;width:282px;height:48px;grid-column:1/3;grid-row:1/2;transform: translateX(calc(-50% + 24px));}
.slider-baner-title>span {transform: rotate(90deg);display:flex;width:282px;height:48px;align-items:center;text-align:center;
transform-origin:50% 50%;justify-content:center;font-size:16px;color:#1f1f1f;cursor:pointer}
.slider-baner-title {border-radius:24px 0 0 0}

#start-scroll {z-index:1001;font-size:2em;position:fixed;bottom:4px;right:8px;background:#fff;border-radius:50%;line-height:0;
    border:1px solid var(--bwazne);background:var(--bg-akcja);padding-bottom:4px;
    width:56px;height:56px;display:flex;align-items: center;justify-content: center;}

body:has(#cookie-stopka) #start-scroll {bottom:229px;right:8px}
body:has(#cookie-stopka) {}
body:has(#cookie-stopka) #all {margin-bottom:289px;/*min-height:calc(100svh - 289px)*/}
/*
body:has(#cookie-stopka) {padding-bottom:225px}
 */
#start-scroll:hover {color:var(--akcja);background:var(--bg-hover);border-color:var(--bg-akcja)}

/*
body {display:flex;align-items:stretch;justify-content:stretch;flex-flow:column nowrap;max-height:100dvh;height:100dvh;overflow:hidden}
 */
#all {position:relative;background:var(--bg-light1);display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;/*min-height:100svh*/}
/*
#all {overflow:auto;flex:1 1 auto;}
#cookie-stopka {background:#fff;position:relative;width:100%;z-index:1000;flex:0 0 auto}
 */
#cookie-stopka {background:#fff;position:fixed;bottom:0;right:0;left:0;width:100%;z-index:1000;flex:0 0 auto}
#cookie-stopka-content {border-top:1px solid var(--bwazne);background:#fafafa;padding:24px 0;box-shadow:rgba(0,0,0,0.2) 0 -8px 16px 0;}
#cookie-stopka .page>div:first-of-type {border-right:1px solid #d2d2d2;padding-right:24px}
#cookie-stopka .page>div:last-of-type {display:flex;gap:20px;flex-flow:column wrap;align-items:flex-start}
#cookie-stopka .page {display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px}
#cookie-stopka .page div {line-height:1.6em;font-size:18px}
#cookie-stopka .page h3 {font-size:22px;margin-bottom:18px}

/*
800 pol strony
50 odstep od konca strony na duzym ekrani
500/600 szerokosc banera/hover
=/-20 to schowany kawalek
*/

.slider-baner:nth-of-type(1) {left:max(-432px,calc(50% - 848px - 480px));}
.slider-baner:nth-of-type(1):hover {left:max(-32px,calc(50% - 600px - 848px));}
.slider-baner:nth-of-type(2) {left:min(calc(100% - 48px),calc(50% + 848px));}
.slider-baner:nth-of-type(2):hover {left:min(calc(100% - 600px + 30px),calc(50% + 848px));}

#cta-bottom {position:fixed;bottom:0;left:0;right:0;z-index:4;}
#cta-bottom>* {display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 0.5rem 0.5rem;background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));}
#cta-bottom a {;box-shadow:var(--box-shadow1)}

#map {width:100%;height:400px;max-height:100vh}
#map iframe {width: 100%;height: 100%;position: relative;z-index: 2;display: block;margin: 0;padding: 0;}





/* katalog -----------------------------------------------------------------------------------------------------------*/


.pagehurt .kolor-rodzaj-zamowienia {color:var(--kolor-hurt)}
.pagestock .kolor-rodzaj-zamowienia {color:var(--kolor-stock)}

div:has(> #tytul) {display:none}

.katalog_obrazki {display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));row-gap:3rem;column-gap:2.5rem;align-items:flex-start;justify-items:center}
.katalog_pic {display:flex;flex-direction:column;position:relative;overflow:hidden;transition:var(--t-ease);max-width:288px}
.katalog_pic img {aspect-ratio:288/408;object-fit:cover;object-position:center}
.katalog_pic:hover {z-index:4;scale:1.25;transform-origin: center center;}
.katalog_pic h2 {height: 0;overflow: hidden;margin: 0;display:inline}

/* produkt kafel */
#produkty_lista_kafle {display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:2.5rem;align-items:flex-start;justify-items:center}
.produkt-poz {border-radius:12px;box-shadow:var(--box-shadow1);background:#fff;position:relative;overflow:hidden;padding-top:12px}
.produkt-poz-katalog {position:absolute;top:8px;left:8px;height:12px}
.produkt-poz-katalog2 {height:12px}
.produkt-poz-pic {aspect-ratio:288/162;overflow:hidden}
.produkt-poz-pic img {aspect-ratio:288/162;object-fit:cover;object-position:center}
.produkt-poz img {max-width:100%}
.produkt-poz .produkt-poz-pic *  {display:none}
.produkt-poz .produkt-poz-pic img:nth-of-type(2)  {display:block;margin:0;padding:0}
.produkt-poz-indeks {height:40px;font-size:22px;font-weight:var(--bold);color:var(--text);padding:8px 8px 0;line-height:24px}
.produkt-poz .produkt-poz-nazwa {font-size:14px;line-height:17px;height:62px;padding:0 8px 0;display:flex;}
.produkt-poz-ceny {background:var(--bg-wazne);display:flex;height:32px;align-items:center;justify-content:flex-end;padding:0 8px;font-size:12px;flex:1 0 auto}
div:has(> .produkt-poz-ceny) {padding:0 8px 8px}
.produkt-poz-ceny>span {display:grid;grid-template-columns:1fr 56px;gap:8px;justify-items:flex-end}
.produkt-poz-dane {display:grid;align-items:center;justify-items:stretch;gap:8px;padding:0 8px 8px;grid-template-columns:64px 80px 112px}
.produkt-poz-dane .ilosc {border:0;background:none;max-width:102px;text-align:center}
.wyliczony-rabat {width:40px;display: flex;align-items: center;justify-content: flex-end;color:var(--bwazne)}
.produkt-do-koszyka {display:flex;flex-flow:row wrap;align-items:center;justify-items:center;padding-top:4px;height:28px}
.produkt-do-koszyka a.button.mini {padding:0 16px;margin:0 auto;flex:0 1 auto}
.produkt-poz-ikony {display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;gap:8px;padding:12px 4px}
.produkt-poz-ikony img {display:block;margin:0;padding:0}

/* produkt linia */
.produkt-linia-katalog img {height:12px}


/* produkt szczegoly */
#produkt_producent {height:50px}


/* zamowienie */
.produkt-zam-katalog img {height:12px}

#ikony a.icon-all {background-image:url(gfx/all_on.png)}
#ikony a.icon-soon {background-image:url(gfx/soon_on.png)}
#ikony a.icon-new {background-image:url(gfx/new_on.png)}
#ikony a.icon-sale {background-image:url(gfx/sale_on.png)}
#ikony a.icon-hit {background-image:url(gfx/hit_on.png)}
#ikony a.icon-promo {background-image:url(gfx/promo_on.png)}
#ikony a.icon-old {background-image:url(gfx/old_on.png)}
#ikony a.icon-zinterwencji {background-image:url(gfx/zinterwencji_on.png)}
#ikony a.icon-zinterwencji0001 {background-image:url(gfx/zinterwencji0001_on.png)}
#ikony a.icon-zinterwencji0002 {background-image:url(gfx/zinterwencji0002_on.png)}
#ikony a.icon-zinterwencji0003 {background-image:url(gfx/zinterwencji0003_on.png)}
#ikony a.icon-nobrand {background-image:url(gfx/nobrand_on.png)}
#ikony a.icon-nobrand0001 {background-image:url(gfx/nobrand0001_on.png)}
#ikony a.icon-nobrand0002 {background-image:url(gfx/nobrand0002_on.png)}
#ikony a.icon-nobrand0003 {background-image:url(gfx/nobrand0003_on.png)}


#waluta {width:105px;padding-left:10px}
#waluta span {display:inline-block;width:50px;text-align:center;vertical-align: middle}
#waluty {width:70px;padding:0;line-height:1px;margin-left:0px;width:auto}
#waluty .waluta {width:70px;padding:0;background-position:center center}
#waluty2 {width:130px;line-height:1px;width:auto}
.waluta {padding-right:80px;width:40px;height:40px;background:no-repeat 50px center;display:inline-block;text-align:right;line-height:40px}
.walutapln {background-image:url(gfx/waluta1_pln.png);position:relative}
.walutapln:hover:after {content:"";background:url(gfx/waluta1_pln_hover.png) no-repeat center center;width:90px;height:50px;position:absolute;top:-5px;right:-10px}
.walutaeur {background-image:url(gfx/waluta1_eur.png)}
.walutausd {background-image:url(gfx/waluta1_usd.png)}
.walutaoff.walutaeur {background-image:url(gfx/waluta1_eur_off.png)}
.walutaoff.walutausd {background-image:url(gfx/waluta1_usd_off.png)}




/* CONTAINER QUERIES ------------------------------------------------------------------------------------------------*/
@container kafel (width < 500px) {
    .kafel h3 {font-size:26px}
}
@container kafel (width < 450px) {
    .kafel h3 {font-size:24px}
}
@container kafel (width < 420px) {
    .kafel h3 {font-size:22px}
}
@container kafel (width < 370px) {
    .kafel h3 {font-size:20px}
}
/* MEDIA QUERIES -----------------------------------------------------------------------------------------------------*/

@media (pointer: coarse)  {
    /* mobile device */
}

@media (pointer: fine), (pointer: none) {
    /* desktop */
}

@media (pointer: fine) and (any-pointer: coarse) {
    /* touch desktop */
}

@media
only screen  and (max-width:1600px) {
    #top {padding-left:10px;padding-right:10px}
    .section {margin:0 10px}
    #footer>* {padding-left:10px;padding-right:10px}
    #baner .page {margin-left: 10px;margin-right:10px}
    .kafle {padding-left:10px;padding-right:10px;gap:32px}
    .kafle {display:grid;grid-template-columns:repeat(auto-fit,minmax(375px,1fr))}
    .kafel {width:500px;max-width:100%;cursor:pointer;flex:1 1 auto}
    .kafel>div>img {height:auto;aspect-ratio:500/282}
    .kafel-more {padding:0 20px;margin-left:auto;margin-right:auto;gap:12px;font-size:18px;flex-flow:row nowrap;}

    .katalog_obrazki {padding-left:10px;padding-right:10px}
    #cookie-stopka .page {padding-left:10px;padding-right:10px}
    #menu-stopka {margin-left:10px;margin-right:10px}
}

@media
only screen  and (max-width:1366px) {
    :root {
        --top_height:70px;
    }

    /*
    #top {display:none}
    #top-mobile {display:block}
    #slider-banery {top:auto;bottom:0;}
    .slider-baner {top:auto;bottom:10px}
    */
}

@media
only screen  and (max-width:1280px) {
    :root {
        --font-size0: 0.875rem;
        --font-size2: 1.1rem;
        --font-size3: 1.2rem;
        --font-size4: 1.3rem;
        --font-size5: 1.4rem;
        --font-size-vbig: 1.5rem;
        --font-size-bigtitle: 1.5rem;
        --font-size-bigtitle2: 1.6rem;
        --font-size-bigtitle3: 1.8rem;
    }
    .kafle {display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
    .kafel-naglowek .svg-48 {height:32px}
    .kafel h3 label {gap:16px}
    .kafel h3 .kafel-rozwin-opis {margin-left:0}
    .kafel-more {font-size:16px}

    #glowna-marki .scrollable > span {width:calc(33.33%)}

    #wlasciciel-stopka {padding:32px;font-size:18px}
    #dane-wlasciciel {padding-top:24px;gap:16px}
    #dane-wlasciciel img.znak-wodny {height:48px;}
    #wlasciciel-stopka div {font-size:18px;color:var(--text-light)}
    #wlasciciel-stopka small {font-size:16px;color:var(--text-light);}
    #dane-wlasciciel #dane-wlasciciel-kontakt {column-gap:20px;font-size:16px;}
    #dane-wlasciciel #dane-wlasciciel-kontakt .svg-24 {height:20px}

    #cookie-stopka .page {display:grid;grid-template-columns:1fr;align-items:center;gap:24px}
    #cookie-stopka .page div {font-size:16px}
    #cookie-stopka .page h3 {font-size:20px}
    #cookie-stopka .page > div:first-of-type {border-right: 0;padding-right: 0;}
    #cookie-stopka .page > div:last-of-type {gap: 20px;flex-flow: row wrap;align-items: center;justify-content: center;}

    .scrollable {overflow-x:auto;padding-bottom:5px;height:fit-content !important;}
    .scrollnavi {display:none}
    .scrollable-container {position:relative;padding:0;margin:0 !important}
}

@media
only screen  and (max-width:1024px) {

    .kafel:hover>div {transform:none}
    .kafel h3 {margin:0 0 24px;}
    /*
    #slider-banery {display:none;}
    */
    #start-ofirmie {padding:32px}
    #start-ofirmie>div {gap:24px}
    #start-ofirmie div {font-size:16px}
    #start-ofirmie div h2 {font-size:24px}

    #menu-stopka {padding:32px}
    .menu-stopka {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
    .menu-stopka>div h3 {padding-right:36px;font-size:20px}
    .menu-stopka>div ul {line-height:1.2em;font-size:16px}
    .menu-stopka>div ul li {padding-bottom:8px}

}

@media
only screen  and (max-width:880px) {
    :root {
        --top_height:50px;
    }

    #mobile-home img {max-width:calc(297px * 2 / 3);max-height:40px;aspect-ratio: 4.95/1}

    #start-haslo {font-size:40px}

    #wlasciciel-stopka {padding:24px;font-size:16px;}
    #wlasciciel-stopka div {font-size:16px;}
    #wlasciciel-stopka small {font-size:14px;}
    #dane-wlasciciel {padding-top:20px;display:grid;justify-items:center;grid-template-columns:1fr;gap:24px }
    #dane-wlasciciel img.znak-wodny {height:40px;}
    #dane-wlasciciel #dane-wlasciciel-kontakt {column-gap:18px;font-size:16px}
    #dane-wlasciciel #dane-wlasciciel-kontakt .svg-24 {height:16px}


}

@media
only screen  and (max-width:720px) {
    :root {
        --top_height:100px;
    }

    #stopka3 #cookie1 {grid-template-columns: 1fr;}
    #mobile-home {align-self:center;}
    #mobile-options {gap:15px;justify-content:space-evenly}
    #top-mobile .page {align-items:stretch;display:flex;flex-flow:column nowrap}
    .button {border-radius:0.5em;padding:0.3em 0.6em;min-height:30px;gap:0.8em}

    /*
    .kafel .rozwijane {margin-bottom:0}
    .kafel .rozwijane:has(:checked) {margin-bottom:1rem}
    .kafel .rozwijane>div.content {height:0}
    */
    .kafel-naglowek .svg-48 {height:24px}

    #start-scroll {width:3rem;height:3rem;font-size:1.5em;}
    #start-scroll .svg-24 {height:16px}

    #start-ofirmie>div {grid-template-columns:1fr}


}

@media
only screen  and (max-width:540px) {
    :root {
        --font-size1: 14px;

        --top_height:90px;
    }

    .langs {position:fixed;top:5px;right:5px}
    #cta-bottom>* {gap:0.6rem}

}
@media
only screen  and (max-width:480px) {
    #mobile-home {align-self:flex-start;}
}