/* ==========================================
   RANGILEE - RESPONSIVE LAYOUT OVERRIDES
   Desktop | Laptop | Tablet | Mobile
   ========================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}

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

img {
    height: auto;
}

/* Main page sections */

.section,
.story,
.collection-band,
.hero,
.header,
.footer {
    width: 100%;
    max-width: 100%;
}

.section {
    padding: clamp(42px, 6vw, 86px) clamp(16px, 5vw, 72px);
}

/* Hero banner */

.hero {
    min-height: clamp(360px, 38vw, 600px);
    display: flex;
    align-items: center;
    padding: clamp(38px, 5vw, 80px) clamp(20px, 8vw, 135px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-content {
    width: 100%;
    max-width: 560px;
    min-width: 0;
}

    .hero-content h1,
    .hero h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
        line-height: 1.06;
    }

    .hero-content p,
    .hero p {
        max-width: 100%;
        line-height: 1.7;
    }

/* Category section */

.category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 28px);
    width: 100%;
    max-width: 1400px;
    margin: 32px auto 0;
    align-items: stretch;
}

.category {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    border-radius: 0;
}

    .category img,
    .category > a img,
    .category-image,
    .category video {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center;
    }

    .category a {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .category h3,
    .category h2,
    .category-title {
        overflow-wrap: anywhere;
    }

/* Product cards */

.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 26px);
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.product-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    overflow: hidden;
}

.product-image {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

    .product-image img,
    .product-image video,
    .product-card img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        object-position: center;
    }

.product-info {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Shared content width */

.container,
.container-fluid,
.page-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Tablet and smaller laptops */

@media screen and (max-width: 1024px) {
    .category-grid,
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero {
        min-height: 390px;
        padding: 48px 6%;
    }

    .hero-content {
        max-width: 520px;
    }
}

/* Mobile landscape and small tablets */

@media screen and (max-width: 767px) {
    .section {
        padding: 44px 18px;
    }

    .hero {
        min-height: 340px;
        padding: 38px 22px;
        background-position: center;
    }

    .hero-content {
        max-width: 100%;
    }

        .hero-content h1,
        .hero h1 {
            font-size: clamp(34px, 8vw, 48px);
            line-height: 1.08;
        }

        .hero-content p,
        .hero p {
            font-size: 14px;
        }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 26px;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .category,
    .product-card {
        min-width: 0;
    }

        .category img,
        .category > a img,
        .category-image,
        .category video {
            width: 100%;
            aspect-ratio: 3 / 4;
            object-fit: cover;
        }

        .product-image img,
        .product-image video,
        .product-card img {
            aspect-ratio: 3 / 4;
        }

    .section-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .collection-band {
        padding: 30px 18px;
    }

    .story {
        padding: 36px 18px;
    }
}

/* Very small mobile screens */

@media screen and (max-width: 380px) {
    .section {
        padding: 36px 14px;
    }

    .hero {
        min-height: 310px;
        padding: 32px 17px;
    }

        .hero-content h1,
        .hero h1 {
            font-size: 34px;
        }

    .category-grid {
        gap: 10px;
    }

    .product-grid {
        gap: 9px;
    }
}

/* Large desktop screens */

@media screen and (min-width: 1440px) {
    .category-grid,
    .product-grid {
        max-width: 1400px;
    }
}