/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {
    .header {
        gap: 12px;
        padding: 0 14px;
    }

    .desktop-primary-nav {
        gap: 8px;
    }

    .desktop-primary-nav > a,
    .desktop-primary-nav > .desktop-nav-dropdown > summary {
        padding: 0 8px;
        font-size: 12px;
    }

    .desktop-header-search {
        width: min(210px, 28vw);
    }
}

@media (max-width: 900px) {

    .header {
        padding: 0 20px;
    }


    /* HERO */

    .home-hero {
        width: 100vw;

        margin-left: calc(50% - 50vw);

        height: auto;

        min-height: 0;

        overflow: hidden;
    }

    .home-hero-image {
        width: 100%;

        height: auto;

        object-fit: contain;
    }


    /* HERO CONTENT */

    .home-hero-content {
        left: 6%;

        bottom: 35px;

        top: auto;

        transform: none;

        max-width: 450px;
    }

    .home-hero-content h1 {
        font-size: 70px;
    }

    .hero-location {
        font-size: 11px;

        margin-bottom: 20px;
    }

    .hero-shop-button {
        padding: 14px 20px;

        min-width: 185px;

        font-size: 11px;
    }


    /* CATEGORY */

    .category-section {
        padding: 65px 20px 60px;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-tile {
        height: 350px;
    }


    /* PRODUCT */

    .grid,
    .details {
        grid-template-columns: 1fr 1fr;
    }


    /* CONTACT */

    .contact-grid {
        gap: 40px;
    }


    /* FOOTER */

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    /* ANNOUNCEMENT */

    .announcement-bar {
        height: 30px;

        font-size: 9px;

        letter-spacing: 1.5px;
    }


    /* HEADER */

    .header {
        height: 65px;

        padding: 0 12px;
    }

    .brand img {
        width: 90px;

        max-height: 48px;
    }

    .header nav {
        gap: 8px;
    }

    .header nav a {
        font-size: 12px;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .header-actions .header-icon {
        display: inline-flex;
        width: 34px;
        height: 38px;
        flex: 0 0 34px;
    }

    .header-actions > a[aria-label="Browse products"] {
        color: #24191d;
    }


    /* HERO */

    .home-hero {
        position: relative;

        width: 100vw;

        margin-left: calc(50% - 50vw);

        height: auto;

        min-height: 0;

        overflow: hidden;
    }

    .home-hero-image {
        display: block;

        width: 100%;

        height: auto;

        object-fit: contain;

        object-position: center;
    }


    /* HERO OVERLAY */

    .home-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(20, 10, 13, 0.80) 0%,
                rgba(20, 10, 13, 0.45) 45%,
                rgba(20, 10, 13, 0.20) 100%
            );
    }


    /* HERO CONTENT */

    .home-hero-content {
        left: 25px;

        right: 25px;

        bottom: 25px;

        top: auto;

        transform: none;

        max-width: 80%;
    }


    /* LOCATION */

    .hero-location {
        font-size: 9px;

        letter-spacing: 1.3px;

        margin: 0 0 15px;
    }


    /* HERO TITLE */

    .home-hero-content h1 {
        font-size: 55px;

        letter-spacing: -2px;
    }


    /* DESCRIPTION */

    .hero-description {
        font-size: 14px;

        margin: 20px 0 25px;
    }


    /* SHOP BUTTON */

    .hero-shop-button {
        width: fit-content;
        max-width: 100%;
        white-space: nowrap;
        min-width: 0;
        gap: 12px;
        padding: 10px 14px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .hero-shop-button span {
        font-size: 16px;
    }


    /* =====================================================
       CATEGORY MOBILE
       ===================================================== */

    .category-section {
        padding: 55px 15px 50px;
    }

    .category-header {
        align-items: flex-end;

        margin-bottom: 24px;
    }

    .category-eyebrow {
        font-size: 9px;

        letter-spacing: 1.5px;

        margin-bottom: 7px;
    }

    .category-header h2 {
        font-size: 30px;
    }

    .category-view-all {
        font-size: 10px;

        letter-spacing: 1px;

        gap: 5px;
    }

    .category-view-all span {
        font-size: 15px;
    }


    /* CATEGORY GRID */

    .category-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    /* Use the full row when the home page has only one featured category. */
    .category-tile:only-child {
        grid-column: 1 / -1;
        height: clamp(240px, 70vw, 340px);
    }


    /* CATEGORY TILE */

    .category-tile {
        height: 280px;
    }


    .category-tile-content {
        left: 15px;

        right: 15px;

        bottom: 17px;
    }

    .category-tile-content h3 {
        font-size: 21px;

        margin-bottom: 5px;
    }

    .category-tile-content > span {
        font-size: 8px;

        letter-spacing: 1px;
    }

    .category-arrow {
        font-size: 13px;
    }


    /* HERO SLIDE INFO */

    .hero-slide-info {
        right: 25px;

        bottom: 25px;
    }


    /* FEATURED */

    .featured-section {
        padding: 55px 20px;
    }

    .section-heading h2 {
        font-size: 32px;
    }


    /* PRODUCT GRID */

    .grid,
    .details {
        grid-template-columns: 1fr;
    }

    .card img {
        height: 380px;
    }


    /* CONTACT */

    .contact-page {
        padding: 50px 20px;
    }

    .contact-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .contact-info h1 {
        font-size: 40px;
    }


    /* SIDE MENU */

    .side-menu {
        width: 320px;

        max-width: 88vw;
    }


    /* FOOTER */

    .footer-main {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 45px 20px;
    }

    .footer-bottom {
        padding: 18px 20px;
    }
}