/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #241c19;
    background: #000;
}


/* =========================================
   HEADER
========================================= */

.header {
    background: #000;
}

.nav {
    max-width: 1200px;
    margin: auto;

    min-height: 90px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    width: 76px;
    height: 78px;
    object-fit: contain;
}

.brand h1 {
    margin: 0;
    font-size: 28px;
    color: #fff;
}

.brand p {
    margin: 4px 0;
    color: #e95b3c;
}

.nav a {
    background: #b30d12;
    color: #fff;

    text-decoration: none;

    padding: 12px 22px;

    border-radius: 8px;

    font-weight: bold;
}


/* =========================================
   DELIVERY BAR
========================================= */

.delivery-bar {
    width: 100%;

    background: #000;

    color: #f5c542;

    padding: 10px 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 14px;
    font-weight: 600;

    border-bottom: 1px solid #333;
}

.delivery-location {
    color: #f5c542;
}


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

.hero {
    position: relative;

    width: 100%;
    min-height: 520px;

    background-image: url("images/marys_super_food_design.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
}

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.35);

    z-index: 1;
}

.hero-content {
    position: relative;

    z-index: 2;

    max-width: 650px;

    padding: 60px;

    color: #fff;
}

.hero-content > span {
    display: block;

    color: #ffd65a;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.hero-content h2 {
    margin: 0;

    font-size: 58px;

    line-height: 1.05;

    color: #fff;
}

.hero-content h2 b {
    color: #ffd34d;
}

.hero-content p {
    margin-top: 25px;

    max-width: 560px;

    font-size: 18px;

    line-height: 1.5;

    color: #fff;
}

.hero-content .cta {
    display: inline-block;

    margin-top: 25px;

    padding: 14px 28px;

    background: #ffd34d;

    color: #222;

    text-decoration: none;

    font-weight: 700;

    border-radius: 8px;
}

.cta {
    display: inline-block;

    margin-top: 15px;

    padding: 13px 24px;

    background: #e7b34d;

    color: #250b08;

    text-decoration: none;

    border-radius: 8px;

    font-weight: bold;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.layout {
    max-width: 1200px;

    margin: auto;

    padding: 45px 20px;

    display: flex;

    flex-direction: column;

    gap: 30px;
}

.title {
    font-size: 35px;

    color: #fff;

    margin-top: 0;
}


/* =========================================
   PRODUCTS
========================================= */

#grid {
    display: block;

    width: 100%;
}

.product-section {
    width: 100%;

    margin-bottom: 40px;
}

.section-title {
    font-size: 32px;

    color: #fff;

    margin: 20px 0;
}

.product-section .grid {
    display: grid;

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

    gap: 15px;

    width: 100%;

    align-items: stretch;
}


/* =========================================
   PRODUCT CARD
========================================= */

.card {
    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    background: #fff;

    transition: 0.2s;
}

.card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.12);
}


/* =========================================
   PRODUCT IMAGE
========================================= */

.card img {
    width: 100%;

    height: auto;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    display: block;

    background: #fff;
}

.product-image {
    cursor: pointer;
}


/* =========================================
   PRODUCT INFO
========================================= */

.card .info {
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    padding: 14px;
}

.info {
    padding: 13px;
}

.card h3 {
    min-height: 30px;

    margin: 0 0 8px;

    line-height: 1.15;

    min-width: 0;
}

.card .price {
    min-height: 15px;

    min-width: 0;
}

.price {
    color: #a50c10;

    font-weight: bold;

    margin-bottom: 12px;
}


/* =========================================
   QUANTITY CONTROLS - DESKTOP
========================================= */

.controls {
    width: 100%;

    min-width: 0;

    display: grid;

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

    gap: 0;

    align-items: stretch;

    justify-content: stretch;

    margin-top: auto;

    overflow: hidden;
}


/* =========================================
   PLUS / MINUS BUTTONS
========================================= */

.quantity-btn,
.controls button.quantity-btn {
    width: 48px;

    min-width: 48px;
    max-width: 48px;

    height: 48px;

    min-height: 48px;
    max-height: 48px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: #b0000a;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    font-weight: bold;

    line-height: 1;

    cursor: pointer;
}

.quantity-btn:hover {
    background: #8f0008;
}


/* =========================================
   NUMBER BOX
========================================= */

.qty-input {
    width: 100%;

    min-width: 0;

    max-width: 100%;

    height: 48px;

    min-height: 48px;
    max-height: 48px;

    margin: 0;

    padding: 0 4px;

    border: 1px solid #b0000a;

    border-left: 0;
    border-right: 0;

    border-radius: 0;

    background: #fff;

    color: #111;

    text-align: center;

    font-size: 19px;

    font-weight: 500;

    outline: none;

    box-sizing: border-box;

    display: block;
}

.qty-input:focus {
    border-color: #b0000a;

    outline: none;
}


/* =========================================
   REMOVE NUMBER INPUT ARROWS
========================================= */

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;

    margin: 0;
}


/* =========================================
   ADD TO ORDER
========================================= */

.card .add {
    width: 100%;

    height: 44px;

    min-height: 44px;

    margin-top: 10px;

    padding: 9px;

    border: 0;

    border-radius: 6px;

    background: #222;

    color: #fff;

    cursor: pointer;

    font-weight: bold;

    font-size: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.add:hover {
    background: #111;
}


/* =========================================
   OUT OF STOCK
========================================= */

.out-of-stock {
    width: 100%;

    margin-top: 15px;

    padding: 10px;

    text-align: center;

    background: #555;

    color: #fff;

    font-weight: 700;

    border-radius: 6px;

    letter-spacing: 1px;
}


/* =========================================
   ORDER PANEL
========================================= */

aside {
    width: 100%;

    border: 1px solid #ddd;

    border-radius: 14px;

    padding: 25px;

    background: #fff;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.08);
}

aside h2 {
    margin-top: 0;
}

#count {
    background: #a50c10;

    color: #fff;

    border-radius: 50%;

    padding: 4px 9px;

    font-size: 14px;
}

.summary {
    min-height: 80px;

    color: #666;
}

.line {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 8px;

    border-bottom: 1px solid #eee;

    padding: 10px 0;
}

.remove {
    border: 0;

    background: none;

    color: #b00000;

    cursor: pointer;
}


/* =========================================
   TOTAL
========================================= */

.total {
    border-top:
        2px solid #222;

    margin-top: 15px;

    padding-top: 15px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.total strong {
    font-size: 24px;

    color: #a50c10;
}


/* =========================================
   CLEAR ORDER
========================================= */

.clear {
    width: 100%;

    margin: 15px 0;

    background: #a50c10;

    color: #fff;

    border: 0;

    padding: 12px;

    border-radius: 7px;

    font-weight: bold;

    cursor: pointer;
}


/* =========================================
   DELIVERY INFORMATION
========================================= */

.d {
    margin: 10px 0;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================
   CUSTOMER
========================================= */

.customer {
    border-top:
        1px solid #ddd;

    padding-top: 20px;
}

.customer h2 {
    font-size: 20px;
}

label {
    display: block;

    font-weight: bold;

    font-size: 14px;

    margin: 12px 0;
}

input,
textarea {
    width: 100%;

    margin-top: 6px;

    padding: 11px;

    border:
        1px solid #ccc;

    border-radius: 7px;

    font: inherit;

    outline: none;
}

input:focus,
textarea:focus {
    border-color: #a50c10;
}

textarea {
    resize: vertical;
}


/* =========================================
   LOCATION
========================================= */

.location {
    width: 100%;

    padding: 12px;

    border:
        1px solid #198b42;

    background: #fff;

    color: #08742e;

    border-radius: 7px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;
}

.location:hover {
    background: #198b42;

    color: #fff;
}

.status {
    font-size: 12px;

    color: #555;

    min-height: 16px;
}


/* =========================================
   WHATSAPP
========================================= */

.whatsapp {
    width: 100%;

    background: #159447;

    color: #fff;

    border: 0;

    padding: 14px;

    border-radius: 7px;

    font-weight: bold;

    font-size: 15px;

    cursor: pointer;
}

.whatsapp:hover {
    background: #0d7d3b;
}

.note {
    font-size: 12px;

    color: #777;

    text-align: center;

    margin-top: 12px;
}


/* =========================================
   FOOTER
========================================= */

footer {
    background: #000;

    color: #fff;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 20px;

    justify-content: center;
}

footer img {
    width: 70px;

    height: 70px;

    object-fit: contain;
}

.footer-phone {
    margin-top: 10px;

    color: #fff;

    font-weight: 600;

    font-size: 16px;
}


/* =========================================
   INSTAGRAM
========================================= */

.instagram-link {
    display: inline-block;

    color: #000;

    text-decoration: none;

    font-weight: bold;

    padding: 10px 16px;

    border-radius: 8px;

    background: #ffd65a;
}

.instagram-link:hover {
    opacity: 0.85;
}


/* =========================================
   SUBTOTAL / DELIVERY
========================================= */

.subtotal-row,
.delivery-charge {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 10px 0;
}

.subtotal-row span,
.delivery-charge span {
    font-size: 14px;
}

.subtotal-row strong,
.delivery-charge strong {
    font-size: 15px;
}


/* =========================================
   IMAGE MODAL
========================================= */

.image-modal {
    display: none;

    position: fixed;

    z-index: 9999;

    inset: 0;

    background: rgba(0, 0, 0, 0.9);

    align-items: center;

    justify-content: center;

    padding: 20px;
}

.image-modal.show {
    display: flex;
}

.image-modal img {
    max-width: 95%;

    max-height: 90vh;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 10px;
}

.close-image {
    position: absolute;

    top: 15px;

    right: 25px;

    color: #fff;

    font-size: 45px;

    font-weight: bold;

    cursor: pointer;

    z-index: 10000;
}


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

@media (max-width: 900px) {

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

    aside {
        position: static;
    }
}


/* =========================================
   MOBILE
   3 PRODUCTS PER ROW
========================================= */

@media (max-width: 600px) {

    .delivery-bar {
        font-size: 12px;

        padding: 9px 12px;
    }

    .delivery-location {
        font-size: 12px;
    }


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

    .hero {
        min-height: 600px;

        background-position: center center;
    }

    .hero-content {
        padding: 40px 25px;

        max-width: 100%;
    }

    .hero-content > span {
        font-size: 15px;

        letter-spacing: 1.5px;
    }

    .hero-content h2 {
        font-size: 42px;

        line-height: 1.08;
    }

    .hero-content p {
        font-size: 16px;

        line-height: 1.4;
    }

    .hero-content .cta {
        padding: 13px 22px;
    }


    /* =====================================
       MAIN
    ===================================== */

    .layout {
        padding: 30px 6px;
    }

    .title {
        font-size: 30px;
    }


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

    #grid {
        display: block;

        width: 100%;
    }

    .product-section {
        width: 100%;

        margin-bottom: 30px;
    }

    .section-title {
        font-size: 25px;

        margin: 20px 0 15px;
    }


    /* =====================================
       3 PRODUCTS PER ROW
    ===================================== */

    .product-section .grid {
        display: grid;

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

        gap: 5px;

        width: 100%;

        align-items: stretch;
    }


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

    .card {
        width: 100%;

        min-width: 0;

        max-width: 100%;

        height: 100%;

        display: flex;

        flex-direction: column;

        overflow: hidden;

        background: #fff;
    }


    /* =====================================
       MOBILE PRODUCT IMAGE
    ===================================== */

    .card img {
        width: 100%;

        height: 105px;

        aspect-ratio: auto;

        object-fit: cover;

        display: block;

        flex-shrink: 0;
    }


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

    .card .info {
        width: 100%;

        min-width: 0;

        padding: 7px 6px;

        display: flex;

        flex-direction: column;

        flex: 1;

        overflow: hidden;
    }


    /* =====================================
       PRODUCT NAME
       FIXED HEIGHT
    ===================================== */

    .card h3 {
        width: 100%;

        min-width: 0;

        font-size: 14px;

        line-height: 1.15;

        margin: 0 0 6px;

        min-height: 34px;

        max-height: 34px;

        overflow: hidden;

        word-break: normal;

        overflow-wrap: break-word;
    }


    /* =====================================
       PRICE
       FIXED HEIGHT
    ===================================== */

    .price {
        width: 100%;

        min-width: 0;

        font-size: 13px;

        line-height: 1.2;

        min-height: 32px;

        max-height: 32px;

        margin-bottom: 7px;

        overflow: hidden;

        overflow-wrap: break-word;
    }


    /* =====================================
       MOBILE QUANTITY BAR

       SMALL BUTTONS
       BIG NUMBER AREA

       24px | FLEXIBLE NUMBER | 24px
    ===================================== */

    .controls {
        width: 100%;

        min-width: 0;

        max-width: 100%;

        height: 46px;

        min-height: 46px;

        max-height: 46px;

        display: grid;

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

        gap: 0;

        align-items: stretch;

        justify-content: stretch;

        margin-top: auto;

        overflow: hidden;
    }


    /* =====================================
       MOBILE MINUS / PLUS

       ONLY 24PX WIDE
    ===================================== */

    .quantity-btn,
    .controls button.quantity-btn {
        width: 24px !important;

        min-width: 24px !important;

        max-width: 24px !important;

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: #b0000a;

        color: #fff;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 17px;

        font-weight: bold;

        line-height: 1;

        cursor: pointer;

        flex-shrink: 0;
    }

    .quantity-btn:hover {
        background: #8f0008;
    }


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

       GETS ALL REMAINING SPACE

       THIS PREVENTS 45 / 100 FROM HIDING
    ===================================== */

    .qty-input {
        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: 46px !important;

        min-height: 46px !important;

        max-height: 46px !important;

        margin: 0 !important;

        padding: 0 2px !important;

        border: 1px solid #b0000a !important;

        border-left: 0 !important;

        border-right: 0 !important;

        border-radius: 0 !important;

        background: #fff;

        color: #111;

        text-align: center;

        font-size: 17px;

        font-weight: 500;

        outline: none;

        box-sizing: border-box;

        display: block;

        overflow: hidden;

        flex: 1 1 auto;
    }

    .qty-input:focus {
        border-color: #b0000a;

        outline: none;
    }


    /* =====================================
       REMOVE NUMBER ARROWS
    ===================================== */

    .qty-input::-webkit-inner-spin-button,
    .qty-input::-webkit-outer-spin-button {
        -webkit-appearance: none;

        margin: 0;
    }

    /* =====================================
       ADD TO ORDER MOBILE

       SAME HEIGHT FOR ALL CARDS
    ===================================== */

    .card .add {
        width: 100%;

        height: 53px;

        min-height: 53px;

        max-height: 53px;

        margin-top: 10px;

        padding: 5px 2px;

        border: 0;

        border-radius: 7px;

        background: #222;

        color: #fff;

        font-size: 13px;

        font-weight: bold;

        line-height: 1.1;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        overflow: hidden;
    }


    /* =====================================
       OUT OF STOCK MOBILE
    ===================================== */

    .out-of-stock {
        width: 100%;

        padding: 8px 2px;

        font-size: 10px;

        line-height: 1.1;

        margin-top: auto;
    }


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

    footer {
        flex-direction: column;

        text-align: center;

        padding: 25px 15px;
    }
}


/* =========================================
   VERY SMALL MOBILE
   360px / 375px / 390px
========================================= */

@media (max-width: 390px) {

    .layout {
        padding-left: 5px;

        padding-right: 5px;
    }

    .product-section .grid {
        gap: 4px;
    }

    .card .info {
        padding: 6px 5px;
    }


    /* =====================================
       PRODUCT NAME
    ===================================== */

    .card h3 {
        font-size: 13px;

        min-height: 34px;

        max-height: 34px;

        line-height: 1.15;
    }


    /* =====================================
       PRICE
    ===================================== */

    .price {
        font-size: 12px;

        min-height: 34px;

        max-height: 34px;

        line-height: 1.2;
    }


    /* =====================================
       VERY SMALL QUANTITY BAR

       22px | BIG NUMBER | 22px
    ===================================== */

    .controls {
        width: 100%;

        height: 44px;

        min-height: 44px;

        max-height: 44px;

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

        gap: 0;

        overflow: hidden;
    }


    /* =====================================
       VERY SMALL PLUS / MINUS
    ===================================== */

    .quantity-btn,
    .controls button.quantity-btn {
        width: 22px !important;

        min-width: 22px !important;

        max-width: 22px !important;

        height: 44px !important;

        min-height: 44px !important;

        max-height: 44px !important;

        font-size: 16px;

        padding: 0 !important;

        margin: 0 !important;
    }


    /* =====================================
       VERY SMALL NUMBER

       REMAINS THE LARGEST PART
    ===================================== */

    .qty-input {
        width: 100% !important;

        min-width: 0 !important;

        height: 44px !important;

        min-height: 44px !important;

        max-height: 44px !important;

        font-size: 16px;

        padding: 0 1px !important;

        text-align: center;
    }


    /* =====================================
       ADD BUTTON
    ===================================== */

    .card .add {
        height: 52px;

        min-height: 52px;

        max-height: 52px;

        font-size: 12px;

        padding: 4px 2px;
    }
}


/* =========================================
   EXTRA SMALL DEVICES
   320px - 350px
========================================= */

@media (max-width: 350px) {

    .layout {
        padding-left: 3px;

        padding-right: 3px;
    }

    .product-section .grid {
        gap: 3px;
    }

    .card .info {
        padding: 5px 4px;
    }

    .card h3 {
        font-size: 12px;

        min-height: 32px;

        max-height: 32px;
    }

    .price {
        font-size: 11px;

        min-height: 32px;

        max-height: 32px;
    }


    /* 20px buttons on very narrow screens */

    .controls {
        height: 42px;

        min-height: 42px;

        max-height: 42px;

        grid-template-columns:
            20px
            minmax(0, 1fr)
            20px;
    }

    .quantity-btn,
    .controls button.quantity-btn {
        width: 20px !important;

        min-width: 20px !important;

        max-width: 20px !important;

        height: 42px !important;

        min-height: 42px !important;

        max-height: 42px !important;

        font-size: 15px;
    }

    .qty-input {
        height: 42px !important;

        min-height: 42px !important;

        max-height: 42px !important;

        font-size: 15px;
    }

    .card .add {
        height: 50px;

        min-height: 50px;

        max-height: 50px;

        font-size: 11px;
    }
}

/* =========================================
   FOOTER SHOP LOCATION
========================================= */

.footer-location {
    margin: 10px 0 5px;
    color: white;
    font-weight: 700;
    font-size: 15px;
}

.footer-location-link {
    display: inline-block;
    margin-top: 5px;
    padding: 9px 14px;

    background: #ffd65a;
    color: #000;

    text-decoration: none;
    border-radius: 7px;

    font-size: 13px;
    font-weight: bold;

    transition: 0.2s;
}

.footer-location-link:hover {
    opacity: 0.85;
}