/* ========================================================================== */
/* Root variables & base setup                                                */
/* ========================================================================== */

:root {
    --alfa-grey: #f3f3f3;
    --alfa-gold: #b3924a;
    --alfa-black: #000000;
    --alfa-white: #ffffff;
    --alfa-glass: #d4d4d466;
    --alfa-gold-grad: linear-gradient(
        62deg,
        #b3924a 0%,
        #f5e37a 50%,
        #b3924a 75%,
        #8f6830 100%
    );
    --alfa-extra: #8fbc8f;

    --alfa-border-radius: 15px;
    --ce-widgets-space: 22px;

    --color-primary: var(--alfa-gold, #b3924a);
    --color-extra: var(--alfa-extra, darkseagreen);

    --color-light: color-mix(in oklab, var(--color-primary) 70%, white 30%);
    --color-extra-light: color-mix(in oklab, var(--color-extra) 70%, white 30%);

    --bs-primary: var(--alfa-gold, #b3924a);

    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 179, 146, 74;

    --bs-link-hover-color: var(--color-light);
    --bs-link-hover-color-rgb: 202, 178, 130;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/themes/abcweb/assets/font/Montserrat-VariableFont_wght.ttf') format('truetype');
}


/* ========================================================================== */
/* Buttons (Bootstrap variants + custom)                                      */
/* ========================================================================== */

.btn-outline-primary {
    --bs-btn-color: black;
    --bs-btn-border-color: black;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-primary);
    --bs-gradient: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-light);
    --bs-btn-hover-border-color: var(--color-light);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-light);
    --bs-btn-active-border-color: var(--color-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

body .btn-extra {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-extra);
    --bs-btn-border-color: var(--color-extra);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-extra-light);
    --bs-btn-hover-border-color: var(--color-extra-light);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-extra-light);
    --bs-btn-active-border-color: var(--color-extra-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-extra);
    --bs-btn-disabled-border-color: var(--color-extra);
}

/* Generic button */

.btn-general {
    border: 1px solid #000;
    border: 1px solid var(--alfa-black, black);
    border-radius: var(--alfa-border-radius, 15px);
    padding: 0.25em 2em;
    display: inline-block;
}

.btn-general:hover {
    background: hsla(0, 0%, 0%, 0.1);
}


/* ========================================================================== */
/* Forms                                                                      */
/* ========================================================================== */

input:invalid {
    border-color: darkred;
}

#wrapper input[type="text"]:focus,
#wrapper input[type="password"]:focus,
#wrapper input[type="tel"]:focus,
#wrapper input[type="email"]:focus {
    border-color: hsl(0, 0%, 95%);
    box-shadow: 0 2px 0 0px var(--color-primary);
}

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"] {
    border-radius: unset;
    background: hsl(0, 0%, 98%);
    border: 1px solid hsl(0, 0%, 95%);
}

#wrapper select {
    border-radius: unset;
    background-color: hsl(0, 0%, 98%);
    border: 1px solid hsl(0, 0%, 95%);
}

#wrapper select:focus {
    box-shadow: 0 0 0 2px var(--color-primary);
}

#wrapper input[type="checkbox"] {
    border-radius: 0;
}

input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

input[type="checkbox"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-light);
}


/* ========================================================================== */
/* Base typography & layout                                                   */
/* ========================================================================== */

html {
    font-size: 14px;
}

@media (max-width: 1400px) {
    html {
        width: 100%;
        overflow-x: hidden;
    }
}

body {
    font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-display: swap;
    overflow-x: hidden;
    color: #000;
    color: var(--alfa-black, black);
}

@media (max-width: 1400px) {
    body {
        max-width: 1180px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

h1,
h2,
.h1,
.h2 {
    font-size: 24px;
    font-weight: 400;
}

h3,
.h3 {
    font-size: 20px;
    font-weight: 400;
}

@media (max-width: 991.98px) {
    h1,
    h2,
    .h1,
    .h2 {
        font-size: 20px;
        font-weight: 400;
    }

    h3,
    .h3 {
        font-size: 18px;
        font-weight: 400;
    }
}

img {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    width: 100%;
}

#content-wrapper {
    padding-bottom: 0;
}

#content-wrapper .page-footer {
    margin-top: 0;
}

#content {
    /* base padding set later in responsive section */
}

@media (max-width: 991.98px) {
    #content {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.container-xxl {
    padding-left: 0;
    padding-right: 0;
}


/* ========================================================================== */
/* Header                                                                     */
/* ========================================================================== */

.header {
    box-sizing: border-box;
    position: initial;
}

/* Sticky header */

.abc-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 90vh;
}

.abc-sticky::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    min-height: 87.5px;
    min-width: 100vw;
    background: white;
    border-bottom: 1px solid whitesmoke;
}

.abc-sticky > .row {
    z-index: 10;
}

.header:has(.abc-sticky)::after {
    content: '';
    display: block;
    min-height: 87.5px;
}

/* Header images */

header img,
footer img {
    /* kept empty intentionally */
}

/* Header above & middle */

.header .abc-above,
.header .abc-middle {
    border-bottom: 1px solid var(--alfa-gold, goldenrod);
}

.header .abc-above .row {
    min-height: 66px;
}

.header .abc-middle .row {
    min-height: 59px;
    margin-left: 0;
    margin-right: 0;
}

.header .abc-middle .header-top__left,
.header .abc-middle .header-top__right {
    font-size: 0.9rem;
}

.header .header-middle-contact .abcweb-menu-level-0 .abcweb-menu-title {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.header .header-middle-contact .abcweb-menu-level-0 li:first-of-type .abcweb-menu-title::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1.5rem;
    margin-left: 1.5rem;
    margin-right: 1rem;
    border-left: 1px solid var(--alfa-black, black);
}

.header .header-middle-contact .abcweb-menu-link:first-of-type {
    padding-left: 0;
}

.header .header-middle-contact .icon-image {
    width: auto;
    height: 20px;
    margin-right: 0.5em;
}

.header .header-middle-contact .email .icon-image {
    margin-bottom: 1px;
}

/* User info */

#_desktop_user_info {
    margin-right: 0;
}

#_desktop_user_info i {
    max-width: 1em;
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    #_desktop_user_info i {
        font-size: 20px;
    }
}

#_desktop_user_info a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

#_desktop_user_info .dropdown-menu {
    z-index: 9999;
}

/* Menus */

.header .header-middle-menu .abcweb-menu-item {
    margin-left: 20px;
}

.header .main-menu .abcweb-menu-item {
    margin-right: 10px;
}

@media screen and (min-width: 768px) {
    .header .main-menu .abcweb-menu-item:first-of-type .abcweb-menu-link {
        padding-left: 0;
    }
    .main-menu .has-children .abcweb-menu-link {
        padding-left: 0;
    }
}

/* Search & cart */

#_desktop_search {
    margin-right: 5px;
}

#_desktop_cart .header-block__action-btn {
    padding-right: 0;
}

#_desktop_cart i {
    max-width: 1em;
    font-size: 20px;
}

/* Header middle text */

.header .abc-middle .abcweb-menu-title,
.header .header-block__title {
    line-height: 1em;
    white-space: nowrap;
}

.header .header-block__icon {
    margin-right: 0.5em;
}

.header .abc-middle .header-top__right .abcweb-menu-link {
    padding: 0.5em 0em 0.375em 1em;
}

/* Header bottom */

.header .abc-bottom {
    box-sizing: border-box;
    border: unset;
}

.header .abc-bottom .row {
    display: flex;
    align-items: center;
}

.header .abc-bottom .header-bottom__menu .abcweb-menu-level-0 > .abcweb-menu-item {
    padding-top: 2em;
    padding-bottom: 2em;
}

.header .abc-bottom .header-bottom__logo {
    text-align: center;
}

.header .abc-bottom .header-bottom__logo img {
    height: 25px;
}

.header .abc-bottom .header-bottom__actions {
    text-align: right;
    align-items: center;
}

/* Header search widget */

#search_widget {
    min-width: 126px;
    max-width: 136px;
}

#search_widget form i {
    position: absolute;
    top: 3px;
    left: 6px;
    padding: 0;
    font-size: 20px;
}

@supports (-webkit-touch-callout: none) {
    #search_widget form i {
        top: 6px;
    }
}

#search_widget form input {
    padding: 4px 13px 4px 26px;
    background-color: unset;
    border-radius: var(--alfa-border-radius, 15px);
    border: 1px solid var(--alfa-gold, goldenrod);
}


/* ========================================================================== */
/* Footer                                                                     */
/* ========================================================================== */

.footer .footer__main {
    background: var(--alfa-white, white);
    color: var(--alfa-black, black);
}

.footer .footer__main h1,
.footer .footer__main h2,
.footer .footer__main h3,
.footer .footer__main h4,
.footer .footer__main h5,
.footer .footer__main h6,
.footer .footer__main .h1,
.footer .footer__main .h2,
.footer .footer__main .h3,
.footer .footer__main .h4,
.footer .footer__main .h5,
.footer .footer__main .h6,
.footer .footer__main a {
    color: var(--alfa-black, black);
}

.footer .footer__main .h2.contact {
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase !important;
    margin-bottom: 32px;
}

.footer .footer__main .h2.menu {
    font-size: 15px;
    font-weight: 700;
}

.footer .footer__main .footer__main__top {
    padding: 34px 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 26px;
    border-top: 1px solid var(--alfa-gold, goldenrod);
    border-bottom: 1px solid var(--alfa-gold, goldenrod);
}

.footer .footer__main .footer__main__top img {
    height: 24px;
    width: auto;
}

.footer .footer__main .footer__main__top .navbar-brand {
    padding-left: 0;
    padding-right: 0;
}

.footer .footer__main > .container {
    padding-left: 0;
    padding-right: 0;
}

.footer [class*="menu-"] .h2 {
    margin-bottom: 32px;
}

.footer [class*="footer-menu-"] .icon-image {
    width: 14px;
    height: 14px;
    margin-right: 0.5em;
    display: inline-block;
}

.footer [class*="footer-menu-"] .abcweb-menu-link {
    padding-left: 0;
}

.footer [class*="footer-menu-"] .abcweb-menu-level-0 {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
}

.footer .footer__main .copyright-link {
    background: var(--alfa-grey, grey);
    margin-top: 62px;
    margin-top: 2rem;
    padding: 0.55em 1.5em;
}

.footer .footer__main .copyright-link .footer-text {
    font-size: 11px;
}

.footer__main__bottom .menu-shop .abcweb-menu-title span,
.footer__main__bottom .menu-about-us .abcweb-menu-title span,
.footer__main__bottom .menu-shopping .abcweb-menu-title span,
.footer__main__bottom .menu-follow-us .abcweb-menu-title span {
    white-space: normal;
}


/* ========================================================================== */
/* Content blocks: hero, categories, mirrors, products, customers, blog       */
/* ========================================================================== */

/* Hero */

.hero {
    padding-left: 0;
    padding-right: 0;
}

.hero .swiper-slide {
    transition: opacity 0.3s;
}

.hero .swiper-slide:not(.swiper-slide-active) {
    opacity: 0 !important;
}

.hero .swiper-button-prev {
    left: -40px;
}

.hero .swiper-button-next {
    right: calc(50% + 3% - 40px);
}

.hero .swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 1rem;
    z-index: 10;
    width: 47%;
}

/* slider optimization */
.hero .swiper-wrapper .swiper-slide:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hero .swiper-wrapper .swiper-slide:not(:first-child) {
    display: none;
}

.swiper-initialized .swiper-wrapper .swiper-slide:not(:first-child) {
    display: flex;
}

@media screen and (min-width: 1440px) {
    .hero {
        display: block;
    }
}

/* Categories */

.categories .swiper .carousel-slides {
    /* intentionally left for potential future overflow */
}

.categories .swiper-button-prev {
    left: -40px;
}

.categories .swiper-button-next {
    right: -40px;
}

.categories .arr-bot .swiper-button-prev,
.categories .arr-bot .swiper-button-next {
    bottom: 0.5rem;
}
.categories .arr-bot ~ .swiper-button-prev,
.categories .arr-bot ~ .swiper-button-next {
    bottom: 15px;
}

.categories .carousel-element-wrapper {
    padding-bottom: 5px;
}

/* Mirrors shape */

.mirrors-shape {
    padding-top: 8px;
}

.mirrors-shape .swiper {
    margin-top: 3px;
}

.mirrors-shape .btn-general {
    color: #000;
    color: var(--alfa-black, black);
}

.mirrors-shape .btn-general .title {
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.mirrors-shape .btn-general .title::after {
    content: '';
    background: url('/themes/abcweb/assets/img/icons/arrow.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    width: 15px;
    height: 13px;
    display: inline-block;
    margin-left: 1ch;
    font-size: 1.2em;
}

.mirrors-shape .swiper .image-element .image-info {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.swiper .image-element .image-link .title {
    margin-top: unset;
    margin-bottom: unset;
    line-height: 1em;
}

.mirrors-shape .swiper .image-element .image-info > .title {
    border: 1px solid var(--alfa-black, black);
    border-radius: var(--alfa-border-radius, 15px);
    padding: 2px 10px;
    display: flex;
    margin-top: unset;
    margin-bottom: unset;
    line-height: 1em;
}

.mirrors-shape .swiper-wrapper {
    align-items: end;
}

.mirrors-shape .swiper-button-prev,
.mirrors-shape .swiper-button-next {
    top: auto;
    bottom: 0.25rem;
}

.mirrors-shape .swiper-button-prev {
    left: -40px;
}

.mirrors-shape .swiper-button-next {
    right: -40px;
}

/* Home products */

.products {
    padding-top: 0;
}

.products .swiper {
    padding-top: 18px;
}

.products .product-grid-container .product-miniature .card {
    height: unset;
}

.products .product-grid-container .product-miniature .card:hover {
    filter: unset;
}

.products .carousel-slide-item {
    height: auto;
}

.products .product-miniature .product-miniature__image-container,
.products .product-miniature .card-img,
.products .product-miniature .card-img-top {
    border-radius: 0;
}

.products .product-miniature .product-miniature__link {
    display: flex;
    flex-flow: column;
}

.products .product-miniature .product-miniature__infos__top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.products .product-miniature .product-flags {
    position: unset;
    order: 20;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}

.products .product-miniature .product-flags .badge {
    padding: 2px 6px;
    font-size: 1rem;
    border: 1px solid #000;
    border: 1px solid var(--alfa-black, black);
    border-radius: var(--alfa-border-radius, 15px);
    background-color: transparent;
    color: var(--alfa-black, black);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    max-height: 20px;
}

.products .product-miniature .product-flags .badge::before {
    width: auto;
    height: 1em;
    margin-right: 6px;
    margin-top: auto;
    margin-bottom: auto;
}

.products .product-miniature .product-flags .badge.on-sale {
    color: #b3924a;
    color: var(--alfa-gold, goldenrod);
    border-color: #b3924a;
    border-color: var(--alfa-gold, goldenrod);
}

.products .product-miniature .product-flags .badge.on-sale::before {
    content: url('/themes/abcweb/assets/img/icons/info.svg');
}

/* .discount hidden intentionally */
.products .product-miniature .product-flags .badge.discount {
    display: none;
}

.products .product-miniature .product-flags .badge.new::before {
    content: url('/themes/abcweb/assets/img/icons/diamond.svg');
}

.products .product-miniature .product-miniature__title,
.products .product-miniature .product-miniature__price,
.products .product-miniature .product-miniature__regular-price {
    color: #000;
    color: var(--alfa-black, black);
    font-size: 15px;
}

.product-miniature .thumbnail-container {
    position: relative;
}

.product-miniature__image-wrapper {
    display: block;
    width: 100%;
}

.product-miniature__image-main,
.product-miniature__image-hover {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
}

.product-miniature__image-wrapper--main {
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
}

.product-miniature__image-wrapper--hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .product-miniature .thumbnail-container.has-hover-image:hover .product-miniature__image-wrapper--hover {
        opacity: 1;
    }

    .product-miniature .thumbnail-container.has-hover-image:hover .product-miniature__image-wrapper--main {
        opacity: 0;
    }
}


.products .product-miniature .product-miniature__prices {
    font-size: 15px;
}

.products .product-miniature .product-miniature__price {
    font-weight: 700;
    margin-right: 1rem !important;
}

.products .product-miniature .product-miniature__infos__bottom {
    display: flex;
    flex-flow: column;
}

.products .product-miniature .product-miniature__infos__bottom a {
    display: none;
}

.products .product-miniature .product-list-reviews {
    order: 20;
}

.products .product-miniature .product_reference {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 4px 10px;
    font-size: 1rem;
    border: 1px solid #000;
    border: 1px solid var(--alfa-black, black);
    border-radius: var(--alfa-border-radius, 15px);
    background-color: transparent;
    color: var(--alfa-black, black);
    width: fit-content;
    line-height: 1;
}

.products .swiper[data-nav="true"] ~ .swiper-button-prev {
    left: -40px;
}
.products .swiper[data-nav="true"] ~ .swiper-button-next {
    right: -40px;
}

/* Customers */

.customers {
    border-radius: var(--alfa-border-radius, 15px);
    background: #f3f3f3;
    background: var(--alfa-grey, whitesmoke);
    padding-bottom: 1rem;
}

.customers .title {
    text-align: center;
}

.customers .swiper-button-prev {
    top: calc(50% + 2rem + 24px);
    left: -40px;
}

.customers .swiper-button-next {
    top: calc(50% + 2rem + 24px);
    right: -40px;
}

.customers .swiper {
    padding: 10px;
}

.customers .image-info {
    padding-left: 2rem;
    padding-right: 2rem;
}

.customers .image-info .title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.customers .image-info .description .details {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
}

.customers .image-info .description .tag {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #000;
    border-radius: 25px;
    font-size: 11px;
    color: #000;
    background: #fff;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-right: 10px;
    margin-bottom: 10px;
}

.customers .image-element,
.customers .image-wrapper img {
    transition: transform 0.4s ease;
}

.customers .image-element:hover {
    transform: translateY(-5px);
}

.customers .image-wrapper {
    overflow: clip;
    position: relative;
    display: block;
    padding: 0 2rem;
}

.customers .image-link {
    display: block;
}

.customers .image-wrapper img:hover {
    transform: scale(1.05);
}

.customers .image-wrapper::after {
    content: 'View details';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: hsla(0, 0%, 0%, 0.6);
    transition: opacity 0.3s ease;
    opacity: 0;
    color: white;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
}

.customers .image-wrapper:hover::after {
    opacity: 1;
}

[lang="pl-PL"] .customers .image-wrapper::after {
    content: 'Zobacz szczegóły';
}

[lang="fr-FR"] .customers .image-wrapper::after {
    content: 'Voir les détails';
}

/* Portfolio element (custom element carousel — analogous to .customers) */

.portfolio-element {
    border-radius: var(--alfa-border-radius, 15px);
    background: var(--alfa-grey, whitesmoke);
    padding-bottom: 1rem;
}

.portfolio-element .title {
    text-align: center;
}
.portfolio-element .image-info .title {
    text-align: left;
    padding-top: unset;
    padding-bottom: unset;
}

.portfolio-element .swiper-button-prev {
    top: calc(50% + 2rem + 24px);
    left: -40px;
}

.portfolio-element .swiper-button-next {
    top: calc(50% + 2rem + 24px);
    right: -40px;
}

.portfolio-element .swiper {
    padding: 10px;
}

.portfolio-element .image-info {
    padding-left: 2rem;
    padding-right: 2rem;
}

.portfolio-element .image-info .title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.portfolio-element .image-info .description .details {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
}

.portfolio-element .image-info .description .tag {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #000;
    border-radius: 25px;
    font-size: 11px;
    color: #000;
    background: #fff;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-right: 10px;
    margin-bottom: 10px;
}

.portfolio-element .image-element,
.portfolio-element .image-wrapper img {
    transition: transform 0.4s ease;
}

.portfolio-element .image-element:hover {
    transform: translateY(-5px);
}

.portfolio-element .image-wrapper {
    overflow: clip;
    position: relative;
    display: block;
}

.portfolio-element .image-link {
    display: block;
    padding: 0 2rem;
}

.portfolio-element .image-wrapper img:hover {
    transform: scale(1.05);
}

.portfolio-element .image-wrapper .image-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: hsla(0, 0%, 0%, 0.6);
    transition: opacity 0.3s ease;
    opacity: 0;
    color: white;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    pointer-events: none;
}

.portfolio-element .image-wrapper:hover .image-overlay {
    opacity: 1;
}

/* Blog */

.blog .title {
    padding: 0 0 2rem;
    text-transform: initial;
}

.blog .swiper-button-prev {
    left: -40px;
}

.blog .swiper-button-next {
    right: -40px;
}

.blog .thumbnail {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.blog .carousel-slide-item,
.blog .carousel-slide-item .blog-item {
    display: flex;
    flex-direction: column;
    height: auto !important;
    flex-grow: 1;
}

.blog .carousel-slide-item .blog-item > *:last-child {
    margin-top: auto;
}

.blog .blog-item .blog-link {
    width: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: inline-block;
}

/**/
.blog .blog-item .title {
    line-height: 1.2;
    min-height: calc(1em * 1.2 * 2);

    line-clamp: 2;
    block-ellipsis: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.blog .blog-item .description {
    margin-bottom: 1rem;
    line-height: 1.2;
    min-height: calc(1em * 1.2 * 4);

    line-clamp: 4;
    block-ellipsis: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}



/* ========================================================================== */
/* Generic layout helpers                                                     */
/* ========================================================================== */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.html-shortcode {
    padding-bottom: 1rem;
}

/* Breadcrumb */

.breadcrumb__wrapper {
    background: unset;
}

.breadcrumb__wrapper > .container {
    padding: .55em 1, 5em;
    background: var(--alfa-grey, lightgrey);
}

.breadcrumb-item + .breadcrumb-item:before {
    content: '\2014';
    color: inherit;
}

.breadcrumb a {
    color: var(--alfa-black, black);
}

/* Titles in elements */

.categories .title,
.mirrors-shape .title,
.products .title,
.customers .title,
.portfolio-element .title,
.blog .title,
.carousel-element-wrapper .title {
    margin-top: 8px;
    margin-bottom: 1px;
}

/* Hover overrides */

.product-miniature .card:hover {
    filter: none;
}


/* ========================================================================== */
/* Shared arrow / button styling                                              */
/* ========================================================================== */

.hero .btn-general,
.mirrors-shape .btn-general,
.arrow-after .elementor-heading-title,
.strzalka .elementor-button-text {
    padding: 2px 10px;
}

.hero .btn-general,
.mirrors-shape .btn-general .title,
.arrow-after .elementor-heading-title,
.blog .blog-item .blog-link__arrow,
.strzalka .elementor-button-text {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.hero .btn-general::after,
.mirrors-shape .btn-general .title::after,
.arrow-after .elementor-heading-title::after,
.blog .blog-item .blog-link__arrow::after,
.strzalka .elementor-button-text::after {
    content: '';
    background: url('/themes/abcweb/assets/img/icons/arrow.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    width: 15px;
    height: 13px;
    display: inline-block;
    margin-left: 1ch;
}

.hero .btn-general {
    font-size: 12px;
}


/* ========================================================================== */
/* Alerts                                                                     */
/* ========================================================================== */

.alert {
    color: var(--alfa-black, black);
}

.alert.alert-success {
    background-color: hsl(137, 39%, 93%);
    border-color: hsl(142, 77%, 22%);
}

.alert.alert-danger {
    background-color: hsl(355, 85%, 95%);
    border-color: hsl(0, 84%, 35%);
}

.alert.alert-warning {
    background-color: hsl(46, 94%, 94%);
    border-color: hsl(45, 97%, 50%);
}

.alert.alert-info {
    background-color: hsl(218, 92%, 95%);
    border-color: hsl(217, 76%, 37%);
}

.password-strength-feedback .progress-bar {
    background-color: var(--alfa-gold, #b3924a) !important;
}


/* ========================================================================== */
/* Responsive header layout                                                   */
/* ========================================================================== */

@media screen and (min-width: 1400px) {
    #content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (max-width: 1399.98px) {
    #content {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    #header .abc-sticky {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (max-width: 1199.98px) {
    .abc-middle,
    .abc-bottom {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (max-width: 991.98px) {
    .abc-middle,
    .abc-bottom {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .header-top__left {
        flex: 1 1;
    }

    .header-top__right {
        flex: 1 1 20%;
        flex-wrap: nowrap;
    }

    .header-bottom__logo {
        order: 10;
        flex: 1 0 100%;
        padding-top: 35px;
        padding-bottom: 10px;
        justify-content: flex-start !important;
    }

    .header-bottom__menu {
        order: 20;
    }

    .header-bottom__actions {
        order: 30;
        justify-content: flex-end;
    }

    #_desktop_search {
        position: absolute;
        top: 35px;
        right: 2rem;
        z-index: 1;
        margin-right: unset;
    }

    #search_widget {
        min-width: 40vw;
        max-width: 100%;
    }

    .abc-sticky::before {
        min-height: 145px;
    }

    .header:has(.abc-sticky)::after {
        min-height: 145px;
    }

    .image-element .image-info {
        margin-bottom: 2px;
    }
}

@media screen and (max-width: 767.98px) {
    #header:not(:has(.abc-sticky)) {
        margin-bottom: unset;
    }

    .header-bottom__logo {
        order: 20;
        flex: 1 0 0%;
        padding-top: 20px;
        padding-bottom: 20px;
        justify-content: center !important;
    }

    .abc-sticky::before {
        min-height: 65px;
    }

    .header:has(.abc-sticky)::after {
        min-height: 0;
    }

    .product-miniature .card:hover {
        filter: unset;
    }

    .hero .swiper-slide {
        height: auto !important;
        display: flex;
    }
    .hero .banner-element {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .hero .banner-element.image-left .content-wrapper {
        height: 100%;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 575.98px) {
    .header-bottom__logo {
        justify-content: flex-start !important;
    }

    .header-bottom__menu {
        padding-left: 0;
    }

    .header-bottom__menu,
    .header-bottom__actions {
        display: inline-block;
        width: auto;
    }

    @supports (max-width: fit-content) {
        .header-bottom__menu,
        .header-bottom__actions {
            max-width: fit-content;
        }
    }
}

/* Mobile header-specific */

@media screen and (max-width: 767px) {
    .header .header-top__right {
        display: none;
    }

    #header .header-middle-contact {
        width: 100%;
    }

    #header .header-middle-contact .abcweb-menu {
        text-align: center;
        margin-bottom: 0;
    }

    #header .header-middle-contact .abcweb-menu-item {
        display: inline-block;
        width: unset;
        border: unset;
    }

    .header .abcweb-menu-toggle i {
        font-size: 2rem;
        color: #b3924a;
        color: var(--alfa-gold, goldenrod);
    }

    #header:not(:has(.abc-sticky)) {
        /* margin-bottom: -20px; */
    }

    #header:has(.abc-sticky) {
        margin-bottom: 76px;
    }
}


/* ========================================================================== */
/* Responsive global layout                                                   */
/* ========================================================================== */

@media screen and (max-width: 1199.98px) {
    #footer .footer__main > .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (max-width: 991.98px) {
    .footer .footer__main > .container {
        padding-left: 2rem;
        padding-right: 2rem;
        max-width: 100%;
    }

    .footer .footer__main .footer__main__top {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 34px 0;
    }

    .footer__main__bottom {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer__main__bottom .col-lg-6 {
        width: 100%;
    }

    .footer__main__bottom .col-lg-6:first-of-type {
        order: 20;
        margin-top: 32px;
        padding-top: 32px;
        padding-left: 0;
        padding-right: 0;
        border-top: 1px solid #b3924a;
        border-top: 1px solid var(--alfa-gold, goldenrod);
    }

    .footer__main__bottom .col-lg-6:nth-of-type(2) {
        gap: 0.5em;
    }

    .footer [class*="menu-"] .h2 {
        margin-bottom: 1rem;
    }

    .footer .abcweb-menu-item {
        border-bottom: unset;
    }

    .footer .footer__main .copyright-link {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 767.98px) {
    #content {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .header .abc-above .d-flex {
        display: initial !important;
        padding: 1rem 2rem;
        text-align: center;
        vertical-align: middle;
    }

    .header .abc-above .row {
        min-height: unset;
    }

    .header .header-middle-contact {
        text-align: center;
    }

    .footer .footer__main > .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer__main__bottom .col-lg-6:nth-of-type(2) {
        flex-flow: row wrap;
    }

    .footer__main__bottom .col-lg-6:nth-of-type(2) .col {
        flex: 1 1 calc(50% - 1rem);
        margin-bottom: 1rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .hero .swiper-pagination {
        width: 100%;
        top: 0;
        max-height: 8px;
    }

    .mirrors-shape {
        margin-bottom: 56px;
    }

    .mirrors-shape .title {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 34px;
        padding-bottom: 26px;
    }

    .mirrors-shape .image-info .title {
        padding: 0;
    }

    .mirrors-shape .swiper.arr-bot ~ .swiper-button-prev,
    .mirrors-shape .swiper.arr-bot ~ .swiper-button-next {
        bottom: 0.25rem;
    }

    /* displayAbcwebMenuAbove hook */
    [class*="menu-above"].mobile #_desktop_search {
        display: flex !important;
        position: relative;
        top: unset;
        right: unset;
        margin-top: 1rem;
    }

    [class*="menu-above"].mobile #search_widget form input {
        padding: 8px 13px 8px 26px;
        text-align: center;
    }

    [class*="menu-above"].mobile #search_widget form i {
        top: 50%;
        transform: translateY(-50%);
    }

    /* displayAbcwebMenuBelow hook */
    [class*="menu-below"].mobile .header-block__title {
        display: inline !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    [class*="menu-above"].mobile .d-md-flex,
    [class*="menu-below"].mobile .user-info.d-flex,
    [class*="menu-below"].mobile .d-flex.blockcart {
        justify-content: center;
    }

    [class*="menu-below"].mobile #_desktop_user_info::before,
    [class*="menu-below"].mobile #_desktop_cart::after {
        content: '';
        width: 100%;
        display: block;
        margin: 0.5rem auto;
    }

    [class*="menu-below"].mobile #_desktop_user_info::before {
        border-top: 1px solid var(--alfa-gold);
    }

    [class*="menu-below"].mobile #_desktop_cart::after {
        border-bottom: 1px solid var(--alfa-gold);
    }

    [class*="menu-below"].mobile #_desktop_currency_selector {
        max-width: 100px;
        margin: 1rem auto;
    }

    @supports (-webkit-touch-callout: none) {
        [class*="menu-below"].mobile #_desktop_user_info .icon-image {
            margin-top: 0;
            margin-bottom: 2rem;
        }

        [class*="menu-below"].mobile #_desktop_cart i {
            margin-top: 0;
            margin-bottom: 1rem;
        }
    }
}

@media screen and (max-width: 575.98px) {
    #content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .categories .carousel-element-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .footer .footer__main .footer__main__top {
        border-bottom: unset;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    .footer .footer__main .footer__main__top .navbar-brand {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .abcweb-menu-container.header-middle-contact > .abcweb-menu-level-0 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .abcweb-menu-container.header-middle-contact > .abcweb-menu-level-0 li:first-of-type .abcweb-menu-title::after {
        margin-left: 1rem;
    }
    .abcweb-menu-container.header-above > .abcweb-menu-level-0 .abcweb-menu-link {
        padding: 0;
    }
    .abcweb-menu-container.header-above > .abcweb-menu-level-0 .abcweb-menu-title span {
        white-space: wrap;
    }
}

@media screen and (max-width: 424.98px) {
    .footer__main__bottom .col-lg-6:nth-of-type(2) {
        flex-flow: column;
    }
}


/* ========================================================================== */
/* Swiper buttons visibility on mobile                                        */
/* ========================================================================== */

@media (max-width: 991.98px) {
    .hero .swiper-button-prev,
    .hero .swiper-button-next,
    .customers .swiper-button-prev,
    .customers .swiper-button-next,
    .portfolio-element .swiper-button-prev,
    .portfolio-element .swiper-button-next {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .mirrors-shape .title {
        padding: 30px 0;
        margin-bottom: 0;
    }

    .mirrors-shape .swiper-button-prev,
    .mirrors-shape .swiper-button-next {
        width: 19px;
        height: 19px;
    }

    .mirrors-shape .swiper.arr-bot ~ .swiper-button-prev,
    .mirrors-shape .swiper.arr-bot ~ .swiper-button-next {
        top: auto;
    }

    .mirrors-shape .swiper-button-prev {
        left: -24px;
    }

    .mirrors-shape .swiper-button-next {
        right: -24px;
    }
}

@media screen and (max-width: 575.98px) {
    .categories .carousel-element-wrapper .swiper-button-prev,
    .mirrors-shape .swiper-button-prev {
        left: 0;
    }

    .categories .carousel-element-wrapper .swiper-button-next,
    .mirrors-shape .swiper-button-next {
        right: 0;
    }
}


/* ========================================================================== */
/* Display utilities (no-desktop/tablet/mobile)                               */
/* ========================================================================== */

@media (min-width: 992px) {
    .no-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .no-tablet {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .no-mobile {
        display: none !important;
    }
}

#ps_checkout-payment-method-logo-block-container {
    display: none !important;
}

#checkout .ps_checkout-mark.paypal-mark {
    display: flex !important;
    width: fit-content;
}

#checkout .paypal-button-space {
    padding: 0px 0.5rem;
}

#checkout .paypal-button-space:last-child {
    padding: 0;
}

#checkout .paypal-mark {
    display: flex;
}

#checkout .paypal-mark .paypal-button-text {
    line-height: 1.5em;
}

#checkout .ps_checkout-payment-option label {
    display: flex !important;
}


/* ========================================================================== */
/* Dynamic product                                                            */
/* ========================================================================== */

/* Space between "Starting from" label and price on product miniatures (dynamicproduct module) */
.product-miniature__before-price {
    margin-right: 0.35em;
}


/* === Menu: Bestsellers === */
@media (min-width: 768px) {
    .main-menu .bestsellers .abcweb-menu-title {
        border: 1px solid var(--alfa-gold, goldenrod);
        border-radius: 15px;
        padding: 0.25em 0.5em;
    }
}
@media (max-width: 767px) {
    .main-menu .bestsellers {
        background: hsl(41, 42%, 90%);
    }
}