```css
/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* ==========================================================================
   1. SORTING DROPDOWN / BASIC ACCESSIBILITY VISUAL FIXES
   ========================================================================== */

.select-title .select-title-name {
    color: #222222 !important;
    font-weight: 600 !important;
}

button.select-title.expand-more.form-control {
    color: #222222 !important;
    border-color: #cccccc !important;
    background-color: #ffffff !important;
}

button.select-title.expand-more.form-control i.fa-angle-down {
    color: #444444 !important;
}

button.select-title.expand-more.form-control:hover {
    color: #000000 !important;
    background-color: #f8f9fa !important;
}

.social-links li a,
.js-search-link {
    min-width: 48px;
    min-height: 22px;
    width: 48px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
}

.block-categories a {
    display: block;
    line-height: 1.4;
    padding: 3px 0;
}

/* Hide top social brand icons on mobile to reduce Font Awesome brands usage */
@media (max-width: 767px) {
    .social-links._topbar {
        display: none !important;
    }
}

/* ==========================================================================
   2. TYPOGRAPHY OPTIMIZATION - MONTSERRAT LOCAL FONT FIX
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/modules/iqitthemeeditor/views/fonts/Montserrat-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/modules/iqitthemeeditor/views/fonts/Montserrat-Bold.woff2') format('woff2');
}

body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   3. PRODUCT TEXTURE SWATCHES
   ========================================================================== */

.custom-variant-texture-box {
    display: block !important;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
    background-image: none !important;
}

.product-variants-item ul li .color.texture,
.product-variants-item ul li .color {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    border-radius: 50% !important;
    border: 2px solid #dddddd !important;
    margin: 6px !important;
    cursor: pointer !important;
    background-size: cover !important;
    background-position: center !important;
}

.product-variants-item ul li .input-color:checked + .color {
    border: 4px solid #111111 !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

@media (max-width: 767px) {
    .product-variants-item ul li .color.texture,
    .product-variants-item ul li .color {
        width: 85px !important;
        height: 85px !important;
        max-width: 85px !important;
        max-height: 85px !important;
        margin: 4px !important;
    }
}

/* ==========================================================================
   4. PRODUCT DETAIL PAGE - MAIN IMAGE SAFETY
   ========================================================================== */

.page-product .images-container .product-cover img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   5. PRODUCT THUMBNAIL SIZE CONTROL
   Desktop source: home_default 480x480
   Mobile source: mobile_home_default 340x340
   ========================================================================== */

.product-miniature img.product-thumbnail,
.product-miniature img.product-thumbnail-first,
.product-miniature img.product-thumbnail-second,
img.img-fluid.product-thumbnail-first {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1;
    image-rendering: -webkit-optimize-contrast;
}

@media (min-width: 768px) {
    .page-category .product-miniature .thumbnail-container {
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .page-category .product-miniature img.product-thumbnail,
    .page-category .product-miniature img.product-thumbnail-first {
        max-width: 480px !important;
    }

    .page-category .products-list .product-miniature .row > div:first-child,
    .page-category .products-list .thumbnail-container {
        flex: 0 0 480px !important;
        max-width: 480px !important;
        width: 100% !important;
    }

    .page-category .products-list .product-miniature .row > div:last-child {
        flex: 1 !important;
        max-width: calc(100% - 480px) !important;
    }
}

@media (max-width: 767px) {
    .page-category .product-miniature .thumbnail-container {
        max-width: 340px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .page-category .product-miniature img.product-thumbnail,
    .page-category .product-miniature img.product-thumbnail-first,
    .page-category .products-list img.img-fluid.product-thumbnail-first {
        max-width: 340px !important;
        width: 100% !important;
        height: auto !important;
    }

    .page-category .products-list .product-miniature .row > div:first-child,
    .page-category .products-list .thumbnail-container,
    .page-category .products-list .product-miniature .row > div:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   6. GLOBAL FOOTER LAYERS + MOBILE CLS FIX
   ========================================================================== */

#footer,
.footer-container,
.footer-after {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

#main-page-content,
#wrapper,
#content-wrapper {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    body #wrapper,
    main #wrapper,
    section#wrapper {
        margin-bottom: 0 !important;
    }

    #footer.js-footer,
    #footer,
    .footer-container,
    .footer-after {
        position: relative !important;
        bottom: auto !important;
        width: 100% !important;
        z-index: 2 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   7. PRODUCT ZOOM MODAL - MINIMAL SAFE FIX
   Supports Warehouse modal ID: #product-modal
   ========================================================================== */

#product-modal,
#product-images-modal,
.modal.js-product-images-modal {
    z-index: 10550 !important;
}

.modal-backdrop.show {
    z-index: 10540 !important;
}

#product-modal.show,
#product-images-modal.show,
.modal.js-product-images-modal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#product-modal img,
#product-images-modal img,
.modal.js-product-images-modal img {
    max-width: 100% !important;
    max-height: 82vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   8. LANGUAGE FLAG IMAGE FIX - SCOPED ONLY TO LANGUAGE SELECTOR
   ========================================================================== */

.language-selector img,
.language-selector .dropdown-menu img {
    display: inline-block !important;
    visibility: visible !important;
    width: 16px !important;
    height: 11px !important;
    min-width: 16px !important;
    min-height: 11px !important;
    object-fit: contain !important;
}

.language-selector .dropdown-item[href*="/en/"] img {
    content: url('/img/l/1.webp') !important;
}

.language-selector .dropdown-item[href*="/fr/"] img {
    content: url('/img/l/2.webp') !important;
}

.language-selector .dropdown-item[href*="/de/"] img {
    content: url('/img/l/3.webp') !important;
}

.language-selector .dropdown-item[href*="/nl/"] img {
    content: url('/img/l/4.webp') !important;
}

.language-selector .dropdown-item[href*="/it/"] img {
    content: url('/img/l/5.webp') !important;
}

.language-selector .dropdown-item[href*="/es/"] img {
    content: url('/img/l/6.webp') !important;
}

.language-selector .dropdown-item[href*="/sk/"] img {
    content: url('/img/l/7.webp') !important;
}
```

/* Mobile category LCP fix: hide second hover image */
@media (max-width: 767px) {
    .page-category .product-miniature .product-thumbnail-second,
    .page-category .product-miniature .thumbnail-container picture:nth-of-type(2),
    .page-category .product-miniature .thumbnail-container picture:nth-child(2) {
        display: none !important;
        visibility: hidden !important;
    }
}