/* Lamisco performance — CLS helpers and font-display overrides */

@font-face {
    font-family: 'FontAwesome';
    font-display: swap;
    src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'themify';
    font-display: swap;
    src: url('../fonts/themify.woff?-fvbane') format('woff'),
         url('../fonts/themify.ttf?-fvbane') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reserve space for product thumbnails (home, catalog, related) */
.tred-pro .tr-pro-img {
    position: relative; 
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #fafafa;
}

.tred-pro .tr-pro-img a {
    display: block;
    width: 100%;
    height: 100%;
}

.tred-pro .tr-pro-img a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Banner blocks — prevent reflow while images load */
.home-banner .banner-grid .banner img {
    width: 100%;
    height: auto;
    aspect-ratio: 2080 / 2048;
    object-fit: cover;
}

.home-about .about-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 612 / 408;
    object-fit: cover;
}

/* Breadcrumb page titles — one h1 per catalog page without layout shift */
.breadcrumb-page-title {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    line-height: inherit;
    color: inherit;
}

/* Footer service icons (decorative, not links) */
.footer-service ul.service-ul li.service-li .service-icon {
    position: relative;
    font-size: 30px;
    width: 80px;
    height: 80px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f5ab1e;
    border-radius: 100%;
    flex-shrink: 0;
}

.footer-service ul.service-ul li.service-li .service-icon::before,
.footer-service ul.service-ul li.service-li .service-icon::after {
    content: "";
    position: absolute;
    background-color: #f5ab1e;
    transition: all 0.3s ease-in-out 0s;
}

.footer-service ul.service-ul li.service-li .service-icon::after {
    width: 65px;
    height: 65px;
    border-radius: 50px;
}

.footer-service ul.service-ul li.service-li .service-icon::before {
    right: 0;
    width: 15px;
    height: 2px;
    opacity: 0;
    visibility: hidden;
}

.footer-service ul.service-ul li.service-li:hover .service-icon::after {
    transform: skew(5deg, 5deg);
}

.footer-service ul.service-ul li.service-li:hover .service-icon::before {
    right: -15px;
    opacity: 1;
    visibility: visible;
}

.footer-service ul.service-ul li.service-li .service-icon i {
    position: relative;
    color: #fff;
    z-index: 1;
}

/* Back-to-top as button (a11y) */
button.scroll {
    position: fixed;
    bottom: 80px;
    right: 30px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0s ease-in-out 0s;
}

button.scroll.show {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in-out 0s;
}

button.scroll span {
    color: #F5AB1E;
    font-size: 20px;
    height: 37px;
    width: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #F5AB1E;
    border-radius: 4px;
    transition: all 0.3s ease-in-out 0s;
}

button.scroll:hover span {
    color: #fff;
    background-color: #F5AB1E;
}

button.shopping-cart-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    line-height: inherit;
}