/*
 * Yasta Fashion V3.2.1
 * SEO-route and mobile viewport hardening.
 */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
}

.yf-header,
.yf-announcement,
.yf-navbar,
.yf-detail,
.yf-detail-container,
.yf-detail-card,
.yf-footer,
main {
    max-width: 100%;
}

.yf-detail-card .row > *,
.yf-navbar-content > *,
.yf-gallery,
.yf-media-stage,
.yf-product-info,
.yf-product-content {
    min-width: 0;
}

@media (max-width: 767.98px) {
    body {
        min-width: 0 !important;
    }

    .yf-frontend-page-product .container,
    .yf-frontend-page-product .container-fluid,
    .yf-frontend-page-product .yf-detail-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .yf-navbar {
        min-height: auto;
        padding: 8px 0;
    }

    .yf-navbar-content {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    .yf-navbar-brand {
        min-width: 0;
        max-width: 100%;
    }

    .yf-brand-logo {
        max-width: 132px;
        height: 40px;
    }

    .yf-brand-text {
        min-width: 0;
    }

    .yf-brand-name {
        max-width: 145px;
    }

    .yf-detail {
        overflow: hidden;
    }

    .yf-frontend-page-product .yf-detail-container {
        margin-inline: auto;
    }

    .yf-detail-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 7px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .yf-detail-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .yf-detail-breadcrumb strong {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 160px;
    }

    .yf-detail-card {
        width: 100%;
        max-width: 100%;
        border-radius: 18px;
        overflow: hidden;
    }

    .yf-detail-card .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .yf-detail-card .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .yf-gallery,
    .yf-media-stage,
    .yf-media-item {
        width: 100%;
        max-width: 100%;
    }

    .yf-media-stage {
        aspect-ratio: 1 / 1;
        min-height: 0 !important;
    }

    .yf-media-item img,
    .yf-media-item video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .yf-thumbnails {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .yf-thumbnails::-webkit-scrollbar {
        display: none;
    }

    .yf-product-name {
        overflow-wrap: anywhere;
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    .yf-product-meta,
    .yf-product-services {
        max-width: 100%;
    }

    .yf-mobile-dock,
    .yf-sticky-buy-bar,
    .mobile-buy-bar {
        width: 100%;
        max-width: 100vw;
        left: 0;
        right: 0;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .yf-announcement-content {
        gap: 8px;
        justify-content: space-around;
    }

    .yf-announcement-item {
        font-size: 9px;
    }

    .yf-frontend-page-product .yf-detail-container {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .yf-detail-card {
        border-radius: 15px;
    }

    .yf-thumbnail {
        flex: 0 0 62px;
        width: 62px;
        height: 62px;
    }
}