/* DEMIS UX: compact two-column home category grid on phones only. */
@media (max-width: 575.98px) {
    .home-categories-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    .home-categories-grid > [class*="col-"] {
        flex: none;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 0;
        margin-bottom: 0 !important;
    }

    .home-categories-grid .catalog__category,
    .home-categories-grid .catalog__category::before {
        border-radius: 16px;
    }

    .home-categories-grid .catalog__category {
        display: block;
        height: 100%;
    }

    .home-categories-grid .catalog__category-flexbody {
        min-width: 0;
        padding: 12px 8px;
    }

    .home-categories-grid .catalog__category-img {
        width: min(100px, 100%);
        height: auto;
        aspect-ratio: 1;
        margin: 0 auto 10px;
        padding: 4px;
        border-radius: 14px;
    }

    .home-categories-grid .catalog__category-img img {
        display: block;
        border-radius: 10px;
    }

    .home-categories-grid .catalog__category-title {
        font-size: 14px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .home-categories-grid .catalog__category-count {
        font-size: 11px;
        line-height: 1.25;
        margin-top: 6px;
    }
}

/* DEMIS UX: finger-friendly quantity controls in product cards and detail. */
@media (max-width: 767.98px) {
    .product__detail-calc_counter .counter-btn {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 10px;
        background: rgba(255, 255, 255, .12);
        touch-action: manipulation;
    }

    .product__detail-calc_counter .counter-valuewrap {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .product__item-footer .product__detail-calc_counter {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .product__item-footer .product__detail-calc_counter .counter-btn {
        background: #f7f0e9;
        border-color: rgba(167, 117, 77, .35);
        color: #1c1f21;
    }

    .product__detail-calc_counter .counter-btn:focus-visible {
        outline: 2px solid #eab464;
        outline-offset: 2px;
    }
}

/* DEMIS UX: native horizontal article swiping instead of Slick on mobile. */
@media (max-width: 767.98px) {
    .news__itemslider.demis-articles-native {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        width: calc(100% + 30px);
        max-height: none;
        margin-left: -15px;
        padding: 0 15px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .news__itemslider.demis-articles-native::-webkit-scrollbar {
        display: none;
    }

    .news__itemslider.demis-articles-native > .news__item {
        flex: 0 0 min(calc(100vw - 64px), 360px);
        width: min(calc(100vw - 64px), 360px);
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .news__itemslider .slickslider-btn {
        display: none !important;
    }
}

/* DEMIS UX: Slick variableWidth needs an explicit review-card width on phones. */
@media (max-width: 575.98px) {
    .reviews__itemslider .reviews__itemv2 {
        width: calc(100vw - 90px) !important;
        max-width: calc(100vw - 90px);
    }
}

/* DEMIS UX: readable legal information in the dark footer. */
.footer__bottom-info {
    color: #d0d0d0;
}

.footer__bottom-info_copyright {
    color: #f0f0f0;
    font-size: 16px;
    line-height: 1.4;
}

.footer__bottom-info_text {
    font-size: 14px;
    line-height: 1.5;
}

/* DEMIS UX: native category swiping, with a preview of the next card, on mobile. */
@media (max-width: 767.98px) {
    .catalog__slidercategoreys.demis-categories-native {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        width: calc(100% + 30px);
        max-height: none;
        margin-left: -15px;
        padding: 0 15px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .catalog__slidercategoreys.demis-categories-native::-webkit-scrollbar {
        display: none;
    }

    .catalog__slidercategoreys.demis-categories-native > .catalog__category {
        flex: 0 0 clamp(160px, 65vw, 225px);
        width: clamp(160px, 65vw, 225px);
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .catalog__slidercategoreys .slickslider-btn {
        display: none !important;
    }
}

/* DEMIS UX: compact finger-friendly catalog pagination on mobile only. */
.pagination--mobile {
    display: none;
}

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

    .pagination--mobile {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        margin-top: 20px;
        padding: 4px 0;
    }

    .pagination--mobile li {
        flex: 0 0 auto;
        margin: 0;
        font-size: 14px;
    }

    .pagination--mobile li a,
    .pagination--mobile li a.is-active {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        border: 1px solid rgba(167, 117, 77, .3);
        border-radius: 10px;
        touch-action: manipulation;
    }

    .pagination--mobile li a.is-active {
        border-color: #a7754d;
    }

    .pagination--mobile li a:focus-visible {
        outline: 2px solid #a7754d;
        outline-offset: 2px;
    }

    .pagination--mobile .pagination__dots {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        min-width: 18px;
        font-size: 14px;
    }

    .pagination--mobile .pagination__last {
        font-size: 17px;
        font-weight: 700;
    }
}

/* DEMIS UX: larger tappable product color variants on mobile only. */
@media (max-width: 767.98px) {
    .product__detail-colorlist {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .product__detail-colorlist .product__detail-color {
        box-sizing: border-box;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 3px;
        border-radius: 8px;
        touch-action: manipulation;
    }

    .product__detail-colorlist .product__detail-color img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }

    .product__detail-colorlist .product__detail-color:focus-visible {
        outline: 2px solid #a7754d;
        outline-offset: 2px;
    }
}

/* DEMIS UX: high-contrast inline links in catalog SEO copy on mobile only. */
@media (max-width: 767.98px) {
    .catalog-seo-text .content a,
    .catalog-seo-text .content a:visited {
        color: #654321 !important;
        text-decoration: underline !important;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .catalog-seo-text .content a:hover,
    .catalog-seo-text .content a:focus-visible {
        color: #442a15 !important;
        text-decoration-thickness: 2px;
    }

    .catalog-seo-text .content a:focus-visible {
        outline: 2px solid #654321;
        outline-offset: 3px;
    }
}

