/* ==========================================
   Ramazan Market
   Responsive Fix
========================================== */

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

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================
   Container
========================================== */

.container {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: 20px;
}


/* ==========================================
   Header
========================================== */

.header,
.header__announcement,
.header__main,
.header__nav {
    width: 100%;
    max-width: 100%;
}

.header__announcement-inner,
.header__main-inner {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
}


/* ==========================================
   Tablet
========================================== */

@media (max-width: 992px) {

    .container {
        padding-inline: 18px;
    }

    .header__main-inner {
        gap: 15px;
    }

}


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

@media (max-width: 768px) {

    /* Prevent desktop width from leaking */

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


    /* ==============================
       Announcement
    ============================== */

    .header__announcement-inner {

        display: flex;

        justify-content: center;

        align-items: center;

        text-align: center;

        padding: 8px 14px;

    }

    .header__location {
        display: none;
    }

    .header__delivery {
        width: 100%;
        font-size: 13px;
    }


    /* ==============================
       Main Header
    ============================== */

    .header__main-inner {

        display: grid;

        grid-template-columns: auto 1fr auto;

        align-items: center;

        gap: 8px;

        padding: 12px;

    }


    /* ==============================
       Logo
    ============================== */

    .header__logo {

        min-width: 0;

        max-width: 110px;

        overflow: hidden;

    }

    .header__logo img {

        display: block;

        width: 100%;

        height: auto;

    }

    .custom-logo-link {

        display: block;

        max-width: 110px;

    }


    /* ==============================
       Search
    ============================== */

    .header__search {

        min-width: 0;

        width: 100%;

    }

    .header__search-form {

        display: flex;

        width: 100%;

    }

    .header__search-input {

        min-width: 0;

        width: 100%;

        height: 48px;

        font-size: 14px;

    }

    .header__search-button {

        flex: 0 0 70px;

        height: 48px;

        padding: 0 10px;

    }


    /* ==============================
       Header Actions
    ============================== */

    .header__actions {

        display: flex;

        align-items: center;

        gap: 6px;

        min-width: 0;

    }


    .header__cart {

        width: 48px;

        min-width: 48px;

        height: 48px;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 3px;

    }

    .header__cart-icon {

        font-size: 17px;

    }

    .header__cart-count {

        width: 24px;

        height: 24px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 12px;

    }


    /* Hide large WhatsApp button on mobile */

    .header__whatsapp {

        width: 48px;

        min-width: 48px;

        height: 48px;

        padding: 0;

        font-size: 0;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .header__whatsapp::before {

        content: "🟢";

        font-size: 20px;

    }


    /* ==============================
       Navigation
    ============================== */

    .header__nav {

        width: 100%;

        overflow-x: auto;

    }

    .header__menu {

        display: flex;

        justify-content: center;

        gap: 25px;

        white-space: nowrap;

        padding: 10px 0;

    }


    /* ==============================
       HERO
    ============================== */

    .hero {

        width: 100%;

        max-width: 100%;

        padding: 50px 0;

        overflow: hidden;

    }

    .hero-grid {

        width: 100%;

        max-width: 100%;

        grid-template-columns: 1fr;

        gap: 30px;

        padding-inline: 18px;

    }

    .hero-content {

        width: 100%;

        max-width: 100%;

        text-align: center;

        order: 1;

    }

    .hero-image {

        width: 100%;

        max-width: 100%;

        order: 2;

    }

    .hero h1 {

        font-size: 38px;

        line-height: 1.25;

        word-break: normal;

        overflow-wrap: break-word;

    }

    .hero p {

        font-size: 17px;

        line-height: 1.7;

    }

    .hero-buttons {

        display: flex;

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 10px;

    }

    .hero-buttons a {

        max-width: 100%;

    }


    /* ==============================
       Categories
    ============================== */

    .categories {

        width: 100%;

        max-width: 100%;

        padding: 60px 0;

        overflow: hidden;

    }

    .categories-grid {

        width: 100%;

        max-width: 100%;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;

    }

    .category-card {

        min-width: 0;

    }


    /* ==============================
       Offers
    ============================== */

    .offers {

        width: 100%;

        max-width: 100%;

        overflow: hidden;

    }

    .offers .container {

        width: 100%;

        max-width: 100%;

    }

    .offers__grid {

        width: 100%;

        max-width: 100%;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

    }


    /* ==============================
       Product Cards
    ============================== */

    .product-card {

        min-width: 0;

        max-width: 100%;

        overflow: hidden;

    }

    .product-card img {

        max-width: 100%;

        height: auto;

    }

}


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

@media (max-width: 480px) {

    .container {

        padding-inline: 12px;

    }


    .header__main-inner {

        grid-template-columns: auto minmax(0, 1fr) auto;

        gap: 5px;

        padding-inline: 8px;

    }


    .header__logo {

        max-width: 75px;

    }

    .custom-logo-link {

        max-width: 75px;

    }


    .header__search-button {

        flex-basis: 58px;

        font-size: 14px;

    }


    .header__cart,
    .header__whatsapp {

        width: 42px;

        min-width: 42px;

        height: 42px;

    }


    .header__cart-count {

        width: 21px;

        height: 21px;

        font-size: 11px;

    }


    .hero {

        padding: 40px 0;

    }

    .hero-grid {

        padding-inline: 14px;

    }

    .hero h1 {

        font-size: 32px;

    }

    .hero p {

        font-size: 16px;

    }


    .offers__grid,
    .categories-grid {

        gap: 10px;

    }

}