:root{--butla-icons-max-size:3rem}

.butla-fa-svg {
    display: inline-block;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
    fill: currentColor;
}

/* Inline icons in both header variants: presentation lives in CSS, not HTML. */
[id="header"] .butla-fa-svg {
    width: 1em;
}

[id="header"] .fa-id-card > .butla-fa-svg,
[id="header"] .fa-shopping-cart > .butla-fa-svg {
    width: 1.125em;
}


/* Ikony stopki bez inline SVG w HTML. */
:is(.butla-footer-icon, :where(.footer-widgets .custom-html-widget i)[data-icon]) {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--butla-footer-icon) center / contain no-repeat;
    mask: var(--butla-footer-icon) center / contain no-repeat;
}
:is(.butla-footer-icon.fa-briefcase, :where(.footer-widgets .custom-html-widget i)[data-icon="briefcase"]) { --butla-footer-icon: var(--butla-icon-fa-briefcase); }
:is(.butla-footer-icon.fa-business-time, :where(.footer-widgets .custom-html-widget i)[data-icon="business-time"]) { --butla-footer-icon: var(--butla-icon-fa-business-time-f); width: 1.25em; }
:is(.butla-footer-icon.fa-map-marker-alt, :where(.footer-widgets .custom-html-widget i)[data-icon="location"]) { --butla-footer-icon: var(--butla-icon-fa-location-dot-f); width: .75em; }
:is(.butla-footer-icon.fa-phone, :where(.footer-widgets .custom-html-widget i)[data-icon="phone"]) { --butla-footer-icon: var(--butla-icon-fa-phone); }
:is(.butla-footer-icon.fa-envelope, :where(.footer-widgets .custom-html-widget i)[data-icon="envelope"]) { --butla-footer-icon: var(--butla-icon-fa-envelope); }
:is(.butla-footer-icon.fa-truck, :where(.footer-widgets .custom-html-widget i)[data-icon="truck"]) { --butla-footer-icon: var(--butla-icon-fa-truck-f); width: 1.25em; }
:is(.butla-footer-icon.fa-arrows-rotate, :where(.footer-widgets .custom-html-widget i)[data-icon="arrows-rotate"]) { --butla-footer-icon: var(--butla-icon-fa-arrows-rotate); }
:is(.butla-footer-icon.fa-hand-holding-dollar, :where(.footer-widgets .custom-html-widget i)[data-icon="hand-holding-dollar"]) { --butla-footer-icon: var(--butla-icon-fa-hand-holding-dollar-f); width: 1.125em; }
:is(.butla-footer-icon.fa-book, :where(.footer-widgets .custom-html-widget i)[data-icon="book"]) { --butla-footer-icon: var(--butla-icon-fa-book-f); width: .875em; }
:is(.butla-footer-icon.fa-cookie-bite, :where(.footer-widgets .custom-html-widget i)[data-icon="cookie-bite"]) { --butla-footer-icon: var(--butla-icon-fa-cookie-bite); }

:is(svg.butla-fa-svg,svg.ikona-svg,svg:has(>use[href*="ico.svg"]):not(.eu-svg,.delivery-svg),.benefits>[role="listitem"]>svg,.uses>[role="listitem"] svg,.hero-note svg,.hero-cta svg,.password-toggle>svg,.zzcc-manage--icon svg,.zzcc-shortcode--icon svg,img[src*="/svg-icons/ico.svg"]:not(.eu-svg,.delivery-svg,.custom-logo),.butla-footer-icon,.footer-widgets .custom-html-widget i[data-icon],.ikona-css),
.woocommerce-MyAccount-navigation ul li a::before,
.woocommerce-form-login-toggle .woocommerce-info::before,
.butla-top a.more::after,
.butla-top a.rec-link::after,
.butla-top a.more-products-btn::after,
.butla-top .pp-go::before {
    max-width:var(--butla-icons-max-size);
    max-height:var(--butla-icons-max-size);
}
img[src*="/svg-icons/ico.svg"]:not(.eu-svg,.delivery-svg,.custom-logo){object-fit:contain}

.slider-button-prev::before,
.slider-button-next::before {
    width:min(.55em,calc(var(--butla-icons-max-size)*.55));
    height:min(1em,var(--butla-icons-max-size));
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

:is(.butla-service-form .woocommerce h3,.zzct-delivery-page>h2,.contact-form .kont h2)>i {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:min(1.5rem,var(--butla-icons-max-size));
    height:min(1.5rem,var(--butla-icons-max-size));
    font-size:inherit;
    line-height:1;
    vertical-align:-.125em;
    color:#009ece;
}
:is(.butla-service-form .woocommerce h3,.zzct-delivery-page>h2,.contact-form .kont h2)>i>svg {
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
}