/*
Theme Name: Kryspol
Version: 1.0
Author: WebReklama
*/
* {padding:0;margin:0;box-sizing:border-box;}
html {height:100%;-moz-text-size-adjust: none;-webkit-text-size-adjust: none;text-size-adjust: none;scroll-behavior: smooth;}
body {height:100%;min-width:320px;}
a {text-decoration:none !important;outline:none;color:#d1161d;}
img {vertical-align:top;}

a.float-phone {
    position:fixed;z-index:10;right:1em;bottom:1em;
    width:80px;height:80px;box-sizing:border-box;border-radius:50%;background-color:#d50207;color:#fff;padding:.5em;
    border:1px solid #fff;box-shadow:0 0 15px rgba(0,0,0,.4);
    svg {width:100%;height:100%;vertical-align:top;fill:currentColor}
}

article.text-wrap {padding-inline:2em;}

.wrapper {min-height:100%;display:grid;grid-template-rows:1fr auto;}

header.main {background-color:#fff;box-shadow:0 20px 20px rgba(0, 0, 0, 0.02);position:relative;z-index:20;padding-inline:1em;}
header.main>.inner {
    display:grid;
    gap:10px 3em;
    align-items:center;
    &:has(>.custom-logo-link) {
        grid-template-columns:minmax(auto, 20%) 1fr;
        &>.custom-logo-link {grid-row-start:span 2;}
        img {max-width:100%;height:auto;max-height:100%;width:auto;}
    }
}

.limit-content {max-width:var(--wp--style--global--content-size, 1460px);margin-inline:auto;box-sizing:border-box;}
nav.top-menu {}
nav.top-menu ul {list-style:none;display:flex;align-items:center;gap:10px;justify-content:space-between;}
nav.top-menu ul>li {flex:0 1 auto;}
nav.top-menu ul a {font-weight:600;text-transform:uppercase;font-size:clamp(1em, 1.2vw, 1.0625em);color:#000;display:grid;place-items:center;text-align:center;}
nav.top-menu ul li.current-menu-item>a,
nav.top-menu ul a:hover {color:#d1161d;}
button.showMenu {display:none;background:#d1161d;width:40px;height:40px;border-radius:50%;flex:0 0 30px;border:none;color:transparent;outline-style:none;cursor:pointer;position:relative;z-index:0;font-size:0;margin-left:auto;}
button.showMenu span {display:block;height:4px;background-color:#fff;transition:background-color .3s;border-radius:3px;left:0;right:0;width:calc(100% - 20px);margin-inline:auto;}
button.showMenu::before {content:'';position:absolute;top:10px;height:4px;left:0;right:0;width:calc(100% - 20px);margin-inline:auto;background-color:#fff;transition:transform .3s;border-radius:3px;}
button.showMenu::after {content:'';position:absolute;bottom:10px;height:4px;left:0;right:0;width:calc(100% - 20px);margin-inline:auto;background-color:#fff;transition:transform .3s;border-radius:3px;}
button.showMenu.on span {background-color:transparent;}
button.showMenu.on::before {transform:rotate(45deg) translate(5px, 6px)}
button.showMenu.on::after {transform:rotate(-45deg) translate(6px, -6px);}

.top-bar {display:flex;justify-content:flex-end;}
.top-bar p>img,
.footer-widgets-wrap p>img {vertical-align:middle;margin-inline-end:10px;}

.wp-block-file.pdf-file:has(>a>svg) {
    a {display:grid;color:#d50207;text-decoration:none;font-size:1.125rem;height:100%;font-weight:600;place-content:center;border:2px solid currentColor;box-sizing:border-box;}
    a svg {display:block;fill:currentColor;margin:0 auto 10px;}
}

.wp-block-column.pdf-file-wrap {display:grid;grid-template-rows:auto 1fr;}

.text-wrap {margin-block:2em;}
.text-wrap>h1 {font-size:clamp(2em, 5vw, 3.75em);font-weight:700;line-height:1.2;margin-block:1em;text-transform:uppercase;text-align:center;}
.text-wrap>.text-content {line-height:1.5;font-size:1.25em;}
.text-content p,
.text-content blockquote,
.text-content ol,
.text-content ul {margin:revert;padding:revert;}
.text-wrap .text-content::after {content:'';display:table;}

.text-content .wp-block-media-text[style*="grid-template-columns:15% auto"] {grid-template-columns:auto 1fr !important;gap:1em;}
.text-content .wp-block-media-text p {margin-top:0;}
.text-content .wp-block-media-text>.wp-block-media-text__content {padding:0 !important;}
.text-content .wp-block-separator {border-top:1px solid #ececec;}

footer.main {background-color:#d1161d;color:#fff;}
footer.main a {color:#fff;text-decoration:underline;}
footer.main>.top {display:flex;justify-content:space-between;align-items:center;padding:0 1em .7em;gap:3em;}
footer.main>.bottom {background-color:#a40204;padding:.7em 1em;font-size:clamp(1em, 2vw,1.125em);}
footer.main>.bottom>.limit-content {
    display:flex;justify-content:space-between;align-items:center;text-align:center;
    &>.end {display:flex;align-items:center;gap:4em;}
}
.footer-widgets-wrap {flex:1 0 auto;}
.footer-menu ul {list-style:none;display:flex;align-items:center;gap:4em;}

.slider-wrap {background-color:#fafafa;padding:2em;&>* {background-color:#fff;border-radius:20px;overflow:hidden;}}
.n2-ss-slider .n2-ss-slider-wrapper-inside .n2-ss-slider-controls {max-width:735px;padding-bottom:2.5em;}


header.products-type {display:flex;flex-wrap:wrap;gap:2em;}
header.products-type>a {border-radius:6px;background-color:#fff;color:#000;font-weight:bold;padding:.7em 1em;flex:1 0 auto;box-shadow:0 0 20px rgba(0,0,0,.05);font-size:1.875em;text-transform:uppercase;display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:center;}
header.products-type>a:not(:has(>img)) {grid-template-columns:auto;}

h2.products-list-title {font-size:3.125em;text-align:center;margin-block:2em 1em;}

.products-list-wrap {container:products-list / inline-size;}

ul.products-list {
    --gap:2em;--columns:3;
    list-style:none;display:flex;flex-wrap:wrap;gap:var(--gap);
}

ul.wp-block-list.red-list {color:#D50207;>::marker {color:currentColor;}}

.wp-block-columns.contact-with-map {margin-bottom:3em;}
.wp-block-columns.contact-with-map>*>:last-child {margin-bottom:0;}
.wp-block-columns.contact-with-map p {margin-block:0 20px;}
.wp-block-columns.contact-with-map hr {margin-bottom:20px;}
.wp-block-columns.contact-with-map iframe {min-height:100%;}
.wp-block-columns.contact-with-map>*+* {
    position:relative;
    z-index:0;
    &::before {content:'';inset:0 auto 0 -1em;width:1px;background-color:#ececec;position:absolute;z-index:0;}
}

.wp-block-columns.shadow-block>* {display:grid;grid-template-rows:auto 1fr;}
.wp-block-columns.shadow-block figure {box-shadow:0 0 20px rgba(0,0,0,.05);padding-inline:1em;}
.wp-block-columns.shadow-block .wp-block-file {box-shadow:0 0 20px rgba(0,0,0,.05);padding:1em;}

ul.products-list li {flex:0 0 auto;width:calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));}
ul.products-list li>a {color:inherit;display:grid;grid-template-columns:1fr auto;font-size:1.25em;border-radius:6px;overflow:hidden;box-shadow:0 0 20px rgba(0,0,0,.05);height:100%;}
ul.products-list li>a:not(:has(>footer)) {grid-template-columns:auto;}
ul.products-list .image {aspect-ratio:1.369;padding:1em;grid-column-start:span 2;img {width:100%;height:100%;object-fit:contain;};}
ul.products-list .image:empty {background:url('./assets/images/zaslepka.png') no-repeat center;}
ul.products-list .image img {width:100%;height:100%;object-fit:scale-down;}
ul.products-list header {padding:10px 20px;text-transform:uppercase;}
ul.products-list footer {position:relative;z-index:0;margin-top:-20px;font-size:1.5em;padding:30px 1em 10px;font-weight:bold;background-color:#d50207;background-repeat:no-repeat;background-position:center bottom;color:#fff;text-align:center;white-space:nowrap;display:grid;place-items:center;line-height:1;}
ul.products-list footer.w {background-image:url('./assets/images/weight.png')}
ul.products-list footer.h {background-image:url('./assets/images/height.png')}
ul.products-list footer.w.h {background-image:url('./assets/images/weight-height.png')}
ul.products-list footer::before {content:'';position:absolute;top:0;bottom:0;right:calc(100% - 1px);width:3em;background-color:#d50207;clip-path:polygon(100% 0, 100% 100%, 0 100%);}
ul.products-list h2 {font-size:1.5em;line-height:1;}
ul.products-list li>a:has(>.labels) {position:relative;z-index:0;}
ul.products-list .labels {position:absolute;top:0;right:20px;z-index:1;display:flex;align-items:flex-start;gap:3px;}

@container products-list (width < 1024px) {
    ul.products-list {--columns:2;}
}
@container products-list (width < 706px) {
    ul.products-list {--columns:1;margin-inline:-1em;}
}

figure.wp-block-table.index-setting {
    table {width:100%;border-collapse:collapse;border-spacing:0;box-sizing:border-box;border:none;}
    td {border-width:0 0 1px;border-color:#ececec;}
}

.short-contact {display:flex;align-items:center;gap:1em;}
.short-contact>span.social {display:flex;align-items:center;gap:5px;}
.short-contact a.classic {
    display:grid;align-items:center;grid-template-columns:auto 1fr;gap:7px;
    i {width:40px;height:40px;box-sizing:border-box;border-radius:50%;background-color:#d50207;color:#fff;padding:5px;}
    svg {vertical-align:top;fill:currentColor;width:100%;height:100%;}
}
footer.main .short-contact {justify-content:space-evenly;font-size:1.112em}
header.main .short-contact {gap:4em;}
header.main .short-contact>span.social a {flex:0 0 auto;width:50px;height:50px;svg {width:100%;height:100%;vertical-align:top;}}
header.main .short-contact a.classic {
    color:#000;font-weight:600;font-size:clamp(1em, 2vw,1.5em);
    i {width:50px;height:50px;}
}

@media screen and (max-width:1144px){
    footer.main>.bottom>.limit-content>.end,
    .footer-menu ul {gap:1em;}
}
@media screen and (max-width:1024px){
    header.main>.inner:has(> .custom-logo-link) {
        grid-template-columns:auto 1fr;
        padding-block:10px;
        .custom-logo-link {grid-row-start:auto;height:40px;}
        nav.top-menu {grid-column-start:span 2;}
    }
    .short-contact a>i {width:30px;height:30px;}

    header.main .short-contact a.classic i,
    header.main .short-contact>span.social a {width:40px;height:40px;}
    .n2-ss-slider .n2-ss-slider-wrapper-inside .n2-ss-slider-controls {max-width:500px;padding-bottom:1.5em;}
}

@media screen and (max-width:994px){
    nav.top-menu ul a {text-transform:none;}
    footer.main>.top>.footer-logo {max-width:20%;height:auto;}
    footer.main>.top .short-contact {flex-direction:column;gap:10px;}

    header.products-type {gap:1em;}
    header.products-type>a {padding:10px;gap:15px;font-size:1.5em;}
}
@media screen and (max-width:782px){
    /*.text-wrap > .text-content {font-size:1em;}*/
    article.text-wrap {padding-inline:1em;}
    header.main .short-contact {
        gap:5px;
        a {grid-template-columns:auto;span {display:none;}}
    }
    header.main {padding-inline:10px;}
    header.main>.inner {grid-template-columns:auto auto;justify-content:space-between;gap:10px;}
    header.main>.inner:has(> .custom-logo-link) {
        grid-template-columns:auto 1fr auto;
        padding-block:0;
        .custom-logo-link {height:70px;max-width:105px;max-height:70px;}
    }
    nav.top-menu {
        grid-column-start:auto !important;
        button.showMenu {display:block;}
    }
    nav.top-menu>ul {position:fixed;top:70px;right:0;width:calc(100% - 2em);bottom:0;display:block;background-color:#a40204;}
    body.admin-bar nav.top-menu>ul {top:calc(70px + var(--wp-admin--admin-bar--height, 46px));}
    nav.top-menu>ul:not(.on) {display:none;}
    nav.top-menu>ul a {color:#fff;display:block;padding:10px 1em;border-bottom:1px solid #c53030;text-align:left;}
    nav.top-menu ul li.current-menu-item > a,
    nav.top-menu ul a:hover {color:#e38286;}

    .slider-wrap {padding:1em;}

    footer.main {font-size:1em;}
    footer.main>.bottom {padding:10px;}
    footer.main>.bottom>.limit-content {font-size:.9em;flex-direction:column;gap:.5em;}
    footer.main>.bottom>.limit-content>.end {flex-direction:column;}

    footer.main>.top,
    .footer-menu ul {flex-direction:column;gap:10px;}
    footer.main>.top>.footer-logo {max-width:none;}
    footer.main>.top .short-contact {gap:0;}

    .n2-ss-slider .n2-ss-slider-wrapper-inside .n2-ss-slider-controls {max-width:none;padding-bottom:0;}
}
@media screen and (max-width:600px){
    header.main .short-contact {display:none;}
    .text-content .wp-block-media-text[style*="grid-template-columns:15% auto"] {grid-template-columns:auto !important;gap:5px;figure {width:23px}}
}