/* ==========================================================
   MEOW SHOP - EVENT THEME SYSTEM
   Tối ưu bằng CSS variables: mỗi event chủ yếu khai báo màu,
   phần component chỉ viết một lần.
   ========================================================== */

/* ===================== 1. THEME VARIABLES ===================== */

.theme-normal {
    --page-bg: #eaf6ff;
    --surface: #fff;
    --text: #394b6a;
    --heading: #40577d;
    --accent: #8faae1;
    --accent2: #607fc4;
    --on-accent: #fff;
    --nav: linear-gradient(90deg,#8faae1,#a9c3f5);
    --drop-bg: #fff;
    --drop-text: #333;
    --drop-hover: #f3f8ff;
    --filter-bg: #f4f7fc;
    --filter-border: #d9e3f4;
    --filter-hover: #e9f0fb;
    --filter-active: #8faae1;
    --section-bg: linear-gradient(90deg,#f7fbff,#e8f1ff,#dbe8fb,#e8f1ff,#f7fbff);
    --section-border: #c9d8f0;
    --section-line: #8faae1;
    --subcat: #607fc4;
    --card-bg: #fff;
    --card-hover: #f8fbff;
    --card-border: #dce6f5;
    --card-hover-border: #8faae1;
    --card-shadow: rgba(56,83,126,.10);
    --price: #607fc4;
    --footer-bg: linear-gradient(180deg,#f5f9ff,#e6f1ff);
    --footer-border: #8faae1;
    --footer-link: #607fc4;
    --divider: linear-gradient(to right,transparent,#b8cbee,#8faae1,#b8cbee,transparent);
}

.theme-normal {
    --page-bg: url('/images/normal-body.png') top center / 100% auto no-repeat fixed, linear-gradient( 180deg, #fff6d8 0%, #fff9e8 50%, #ffffff 100% );
    --surface: #fffef8;
    --text: #163b70;
    --heading: #163b70;
}


.theme-tet {
    --page-bg: radial-gradient(circle at top,#fff1f4 0%,#fde2e2 40%,#fff 70%);
    --surface: #fffaf7;
    --text: #9d001a;
    --heading: #b30000;
    --accent: #ffb300;
    --accent2: #c4001a;
    --on-accent: #9b0000;
    --nav: linear-gradient(90deg,#bf0021,#e53935,#ffb300);
    --drop-bg: #fffdf7;
    --drop-text: #9d001a;
    --drop-hover: #fff2cc;
    --filter-bg: #fff7ed;
    --filter-border: #f4c57b;
    --filter-hover: #fff0c9;
    --filter-active: linear-gradient(180deg,#ffd54f,#ffb300);
    --section-bg: linear-gradient(90deg,#fff7ed,#ffe0d7,#ffd4bc,#ffe0d7,#fff7ed);
    --section-border: rgba(196,0,26,.20);
    --section-line: linear-gradient(90deg,#c4001a,#ffb300);
    --subcat: #b30000;
    --card-bg: #fffaf5;
    --card-hover: #fff3e8;
    --card-border: #f5d1a2;
    --card-hover-border: #ffb300;
    --card-shadow: rgba(164,0,0,.09);
    --price: #c68100;
    --footer-bg: linear-gradient(180deg,#fff7ed,#ffe1d4);
    --footer-border: #ffb300;
    --footer-link: #c4001a;
    --divider: linear-gradient(to right,transparent,#f7b5b5,#c4001a,#ffb300,#c4001a,#f7b5b5,transparent);
}

.theme-tet {
    --page-bg: url('/images/tet-body.png') top center / 100% auto no-repeat fixed, linear-gradient( 180deg, #fff6d8 0%, #fff9e8 50%, #ffffff 100% );
    --surface: #fffef8;
    --text: #163b70;
    --heading: #163b70;
}

.theme-valentine {
    --page-bg: radial-gradient(circle at top,#ffe9f2 0%,#fff4f8 45%,#fff 100%);
    --surface: #fffafd;
    --text: #b84672;
    --heading: #b84672;
    --accent: #e85d8f;
    --accent2: #d94a7e;
    --on-accent: #fff;
    --nav: linear-gradient(90deg,#d94a7e,#ef7fa7,#f7abc4);
    --drop-bg: #fff;
    --drop-text: #b84672;
    --drop-hover: #fff0f5;
    --filter-bg: #fff7fa;
    --filter-border: #f2bfd1;
    --filter-hover: #ffe9f1;
    --filter-active: linear-gradient(180deg,#f58caf,#df5f8e);
    --section-bg: linear-gradient(90deg,#fff8fb,#ffe3ed,#ffd1e1,#ffe3ed,#fff8fb);
    --section-border: #f2bfd1;
    --section-line: #e85d8f;
    --subcat: #c6537f;
    --card-bg: #fffafd;
    --card-hover: #fff3f7;
    --card-border: #f2cbd9;
    --card-hover-border: #e85d8f;
    --card-shadow: rgba(173,55,101,.09);
    --price: #df5f8e;
    --footer-bg: linear-gradient(180deg,#fff7fa,#ffe1eb);
    --footer-border: #e85d8f;
    --footer-link: #d94a7e;
    --divider: linear-gradient(to right,transparent,#f7bfd2,#e85d8f,#f7abc4,#e85d8f,transparent);
}

.theme-womens-day {
    --page-bg: linear-gradient(180deg,#fff4f9,#fffafc);
    --surface: #fffbfd;
    --text: #b94f7f;
    --heading: #b94f7f;
    --accent: #df699c;
    --accent2: #cb5789;
    --on-accent: #fff;
    --nav: linear-gradient(90deg,#d85f94,#ed8fb6,#f6b3ce);
    --drop-bg: #fff;
    --drop-text: #b94f7f;
    --drop-hover: #fff0f6;
    --filter-bg: #fff7fb;
    --filter-border: #efbfd3;
    --filter-hover: #ffeaf3;
    --filter-active: linear-gradient(180deg,#ef8eb7,#df699c);
    --section-bg: linear-gradient(90deg,#fff9fc,#fbe3ed,#f6d4e3,#fbe3ed,#fff9fc);
    --section-border: #efbfd3;
    --section-line: #df699c;
    --subcat: #b94f7f;
    --card-bg: #fffbfd;
    --card-hover: #fff3f8;
    --card-border: #efd0dc;
    --card-hover-border: #df699c;
    --card-shadow: rgba(178,68,116,.09);
    --price: #d26091;
    --footer-bg: linear-gradient(180deg,#fff8fb,#f8ddea);
    --footer-border: #df699c;
    --footer-link: #cb5789;
    --divider: linear-gradient(to right,transparent,#efbfd3,#df699c,#f2a7c6,transparent);
}

.theme-childrens-day {
    --page-bg: linear-gradient(180deg,#eaf9ff,#fff8e8,#fff);
    --surface: #fbfeff;
    --text: #267da7;
    --heading: #267da7;
    --accent: #49aeda;
    --accent2: #f2c84b;
    --on-accent: #fff;
    --nav: linear-gradient(90deg,#49aeda,#73c7f2,#f2c84b);
    --drop-bg: #fff;
    --drop-text: #267da7;
    --drop-hover: #eaf9ff;
    --filter-bg: #f4fbff;
    --filter-border: #b9e2f4;
    --filter-hover: #e8f8ff;
    --filter-active: linear-gradient(180deg,#73c7f2,#49aeda);
    --section-bg: linear-gradient(90deg,#f4fbff,#dbf3ff,#fff1b9,#dbf3ff,#f4fbff);
    --section-border: #b9e2f4;
    --section-line: linear-gradient(90deg,#49aeda,#f2c84b);
    --subcat: #267da7;
    --card-bg: #fbfeff;
    --card-hover: #f1fbff;
    --card-border: #bfe5f4;
    --card-hover-border: #49aeda;
    --card-shadow: rgba(34,122,172,.09);
    --price: #3299c7;
    --footer-bg: linear-gradient(180deg,#f4fbff,#e1f5ff);
    --footer-border: #49aeda;
    --footer-link: #2485b5;
    --divider: linear-gradient(to right,transparent,#9edcf5,#49aeda,#ffe07a,#49aeda,transparent);
}

.theme-mid-autumn {
 /*--page-bg:
        url('/images/mid-autumn-body.png')
        top center / 100% auto repeat-y,
        #fff6d8;

    --surface: #fffef8;
    --text: #163b70;
    --heading: #163b70;*/

    --accent: #f3ad32;
    --accent2: #f6c85f;
    --on-accent: #092b57;
    --nav: linear-gradient(90deg,#071f42,#092b57 30%,#123b73 65%,#1a518d);
    --drop-bg: #fffdf5;
    --drop-text: #163b70;
    --drop-hover: #fff3ca;
    --filter-bg: #fffaf0;
    --filter-border: #f2d98f;
    --filter-hover: #fff1c6;
    --filter-active: linear-gradient(180deg,#ffd86b,#f3ad32);
    --section-bg: linear-gradient(90deg,#fffaf0,#fff2c7 30%,#ffe39b 50%,#fff2c7 70%,#fffaf0);
    --section-border: rgba(246,200,95,.35);
    --section-line: linear-gradient(90deg,#f6c85f,#f28c28);
    --subcat: #b66a0b;
    --card-bg: #fffef8;
    --card-hover: #fff9e8;
    --card-border: #f5dfa1;
    --card-hover-border: #edc75b;
    --card-shadow: rgba(9,43,87,.08);
    --price: #d08414;
    --footer-bg: linear-gradient(180deg,#fff9e9,#ffeebc);
    --footer-border: #f6c85f;
    --footer-link: #b66a0b;
    --divider: linear-gradient(to right,transparent,#f5dfa1,#f6c85f,#f28c28,#f6c85f,#f5dfa1,transparent);
}
.theme-mid-autumn {
    --page-bg: url('/images/mid-autumn-body.png') top center / 100% auto no-repeat fixed, linear-gradient( 180deg, #fff6d8 0%, #fff9e8 50%, #ffffff 100% );
    --surface: #fffef8;
    --text: #163b70;
    --heading: #163b70;
}

.theme-halloween {
    --page-bg: radial-gradient(circle at 50% 0%,rgba(242,140,40,.18),rgba(112,36,111,.10) 25%,transparent 45%), linear-gradient(180deg,#fff4e6 0%,#f7edf9 45%,#fff 100%);
    --surface: #fffaf5;
    --text: #542268;
    --heading: #542268;
    --accent: #f28c28;
    --accent2: #70246f;
    --on-accent: #321043;
    --nav: linear-gradient(90deg,#211037,#42185e 35%,#70246f 65%,#f28c28);
    --drop-bg: #fff9f1;
    --drop-text: #542268;
    --drop-hover: #ffe5c5;
    --filter-bg: #fff8f0;
    --filter-border: #efbd8a;
    --filter-hover: #ffe4c7;
    --filter-active: linear-gradient(180deg,#ff9d32,#e87317);
    --section-bg: linear-gradient(90deg,#fff7ed,#f4dced 30%,#e8cbea 50%,#f4dced 70%,#fff7ed);
    --section-border: rgba(242,140,40,.35);
    --section-line: linear-gradient(90deg,#70246f,#f28c28);
    --subcat: #70246f;
    --card-bg: #fffaf5;
    --card-hover: #fff2e6;
    --card-border: #f4c28d;
    --card-hover-border: #f28c28;
    --card-shadow: rgba(52,18,72,.08);
    --price: #d96e13;
    --footer-bg: linear-gradient(180deg,#fff6ed,#f2dfec);
    --footer-border: #f28c28;
    --footer-link: #c85e0a;
    --divider: linear-gradient(to right,transparent,#6f377e,#f28c28,#8a3d8c,#f28c28,transparent);
}
.theme-halloween {
    --page-bg: url('/images/halloween-body.png') top center / 100% auto no-repeat fixed, linear-gradient( 180deg, #fff6d8 0%, #fff9e8 50%, #ffffff 100% );
    --surface: #fffef8;
    --text: #163b70;
    --heading: #163b70;
}


.theme-christmas {
    --page-bg: radial-gradient( circle at 50% 0%, rgba(198,40,40,.12) 0%, rgba(11,102,35,.10) 25%, transparent 45% ), linear-gradient( 180deg, #eef9f1 0%, #f7fff8 45%, #ffffff 100% );
    --surface: rgba(255,255,255,.96);
    --text: #145c2d;
    --heading: #145c2d;
    --accent: #0b6623;
    --accent2: #c62828;
    --on-accent: #fff;
    --nav: linear-gradient(90deg,#0b6623,#147b32,#c62828);
    --drop-bg: #fff;
    --drop-text: #145c2d;
    --drop-hover: #e8f5e9;
    --filter-bg: #f6fff7;
    --filter-border: #a8d9b4;
    --filter-hover: #e9f7ec;
    --filter-active: linear-gradient(180deg,#19853b,#0b6623);
    --section-bg: linear-gradient(90deg,#f7fff8,#dff3e4,#ffe0df,#dff3e4,#f7fff8);
    --section-border: #a8d9b4;
    --section-line: linear-gradient(90deg,#0b6623,#c62828);
    --subcat: #0b6623;
    --card-bg: #fff;
    --card-hover: #f7fff8;
    --card-border: #bddfc5;
    --card-hover-border: #0b6623;
    --card-shadow: rgba(20,92,45,.09);
    --price: #c62828;
    --footer-bg: linear-gradient(180deg,#f7fff8,#e3f4e7);
    --footer-border: #c62828;
    --footer-link: #0b6623;
    --divider: linear-gradient(to right,transparent,#72bc84,#0b6623,#c62828,#0b6623,#72bc84,transparent);
}

.theme-christmas {
    --page-bg: url('/images/christmas-body.png') top center / 100% auto no-repeat fixed, linear-gradient( 180deg, #fff6d8 0%, #fff9e8 50%, #ffffff 100% );
    --surface: #fffef8;
    --text: #163b70;
    --heading: #163b70;
}


/* ===================== 2. GLOBAL THEME ===================== */

body[class*="theme-"] {
    background: var(--page-bg);
    color: var(--text);
}

.theme-christmas {
    background-size: 300px;
}

.header-normal,
.header-tet,
.header-valentine,
.header-womens-day,
.header-childrens-day,
.header-mid-autumn,
.header-halloween,
.header-christmas {
    position: relative;
    overflow: visible;
    min-height: 220px;
    z-index: 50;
}

    .header-normal > *, .header-tet > *, .header-valentine > *,
    .header-womens-day > *, .header-childrens-day > *,
    .header-mid-autumn > *, .header-halloween > *, .header-christmas > * {
        position: relative;
        z-index: 3;
    }

    .header-normal a, .header-normal i, .header-tet a, .header-tet i,
    .header-valentine a, .header-valentine i, .header-womens-day a, .header-womens-day i,
    .header-childrens-day a, .header-childrens-day i, .header-mid-autumn a, .header-mid-autumn i,
    .header-halloween a, .header-halloween i, .header-christmas a, .header-christmas i {
        color: #fff !important;
    }

.header-normal {
    background: linear-gradient(180deg,#8faae1,#a9c3f5);
}

.header-tet {
    background: linear-gradient(180deg,#c4001a,#ff7043);
}

.header-valentine {
    background: linear-gradient(135deg,#f58caf,#f7abc4,#ffd0dd);
}

.header-womens-day {
    background: linear-gradient(135deg,#ef8eb7,#f6b3ce,#ffd7e5);
}

.header-childrens-day {
    background: linear-gradient(135deg,#73c7f2,#91d9f5,#ffe07a);
}

.header-mid-autumn {
    background: linear-gradient(180deg,#071f42,#092b57 45%,#123b73);
    box-shadow: 0 8px 25px rgba(5,31,68,.25);
}

.header-halloween {
    background: linear-gradient(180deg,#180b2b,#291342 45%,#542268);
    box-shadow: 0 8px 25px rgba(30,10,50,.30);
}

.header-christmas {
    background: linear-gradient(180deg,#0b6623,#147b32,#c62828);
}

/*.header-normal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/header-normal.png') top center / cover no-repeat;
    z-index: 0;
    pointer-events: none;
}*/
.header-normal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/header-normal.png') center / cover no-repeat;
    z-index: 1;
    pointer-events: none;
}

.header-tet::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/tet-firework.png') top center / cover no-repeat;
    opacity: .9;
    z-index: 0;
    pointer-events: none;
}

.header-tet::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/tet-lantern-peach.png') top center / 100% auto no-repeat;
    z-index: 1;
    pointer-events: none;
}

.header-mid-autumn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/mid-autumn-header.png') center / cover no-repeat;
    z-index: 1;
    pointer-events: none;
}

.header-halloween::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/halloween-header.png') center / cover no-repeat;
    z-index: 1;
    pointer-events: none;
}

.header-christmas::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/christmas-header.png') center / cover no-repeat;
    z-index: 1;
    pointer-events: none;
}

#mainLogo {
    transition: transform .25s ease, filter .25s ease;
}

    #mainLogo:hover {
        transform: scale(1.03);
    }

.theme-mid-autumn #mainLogo {
    filter: drop-shadow(0 5px 14px rgba(255,208,89,.30));
}

.theme-halloween #mainLogo {
    filter: drop-shadow(0 5px 14px rgba(255,132,28,.45));
}

/* ===================== 3. NAVBAR ===================== */

.navbar-theme {
    position: relative;
    z-index: 1000;
    overflow: visible;
    background: var(--nav);
    font-weight: 700;
}

    .navbar-theme .navbar-collapse,
    .navbar-theme .navbar-nav,
    .navbar-theme .nav-item {
        overflow: visible;
    }

    .navbar-theme .nav-link {
        color: #fff !important;
    }

    .navbar-theme .dropdown-menu {
        position: absolute;
        z-index: 9999;
        background: var(--drop-bg);
        border: 1px solid var(--filter-border);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(0,0,0,.18);
    }

    .navbar-theme .dropdown-item {
        color: var(--drop-text) !important;
        background: transparent;
    }

        .navbar-theme .dropdown-item:hover,
        .navbar-theme .dropdown-item:focus {
            background: var(--drop-hover);
            color: var(--accent2) !important;
        }

/* ===================== 4. HOME / CONTENT ===================== */

.content {
    position: relative;
    z-index: 1;
}

.backgroundWhite {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--surface) !important;
    color: var(--text);
}

    .backgroundWhite .row {
        margin-left: 0;
        margin-right: 0;
    }

#menu-filters {
    position: relative;
    z-index: 2;
    margin: 30px 0 35px;
    padding: 0;
}

    #menu-filters li {
        display: inline-block;
        margin: 5px;
        padding: 10px 22px;
        background: var(--filter-bg);
        color: var(--heading);
        border: 1px solid var(--filter-border);
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s ease;
    }

        #menu-filters li:hover {
            transform: translateY(-1px);
            background: var(--filter-hover);
            color: var(--accent2);
        }

        #menu-filters li.active {
            background: var(--filter-active) !important;
            color: var(--on-accent) !important;
            border-color: var(--accent) !important;
        }

/* Hỗ trợ cả markup cũ id và markup mới class */
:is(.menu-wrapper,[id="menu-wrapper"]) {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 35px;
    padding-bottom: 28px;
    box-sizing: border-box;
}

    :is(.menu-wrapper,[id="menu-wrapper"])::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 0;
        height: 2px;
        border-radius: 999px;
        background: var(--divider);
    }

    :is(.menu-wrapper,[id="menu-wrapper"]) .post {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

        :is(.menu-wrapper,[id="menu-wrapper"]) .post > .row {
            width: 100%;
            max-width: 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

/* ===================== 5. CATEGORY / PRODUCT ===================== */

.section-divider {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 34px 15px;
    margin: 30px 0 25px;
    background: var(--section-bg);
    border-top: 1px solid var(--section-border);
    border-bottom: 1px solid var(--section-border);
    border-radius: 4px;
}

.section-title {
    margin: 0;
    color: var(--heading);
    font-weight: 700;
}

    .section-title::after {
        content: "";
        display: block;
        width: 60px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 2px;
        background: var(--section-line);
    }

.subcategory-title {
    color: var(--subcat);
    border-left-color: var(--accent);
}

.product-item {
    min-width: 0;
    box-sizing: border-box;
}

.card.product {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 5px 16px var(--card-shadow);
    transition: transform .3s ease,background .3s ease,border-color .3s ease;
}

    .card.product:hover {
        transform: translateY(-6px);
        background: var(--card-hover);
        border-color: var(--card-hover-border);
    }

    .card.product .card-title {
        color: var(--heading);
        font-weight: 600;
    }

.product-price {
    color: var(--price);
    font-weight: bold;
}

.btn-primary {
    background: var(--filter-active);
    border-color: var(--accent);
    color: var(--on-accent);
}

    .btn-primary:hover {
        filter: brightness(1.04);
    }

/* ===================== 6. FOOTER ===================== */

.site-footer {
    margin-top: 40px;
    padding-top: 28px;
    background: var(--footer-bg);
    color: var(--text);
    border-top: 2px solid var(--footer-border);
}

    .site-footer .title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .site-footer p {
        margin-bottom: 8px;
    }

    .site-footer a,
    .site-footer .footer-brand {
        color: var(--footer-link);
    }

    .site-footer a {
        text-decoration: none;
    }

    .site-footer .footer-brand {
        font-weight: 700;
    }

    .site-footer .footer-bottom {
        padding: 18px 0;
    }

    .site-footer .footer-bottom-item {
        text-align: center;
    }

/* ===================== 7. RESPONSIVE ===================== */

@media (min-width:992px) {
    .col-5th {
        flex: 0 0 20%;
        width: 20%;
        max-width: 20%;
        padding-left: 4px;
        padding-right: 4px;
        box-sizing: border-box;
    }
}

@media (max-width:768px) {
    .header-normal, .header-tet, .header-valentine, .header-womens-day,
    .header-childrens-day, .header-mid-autumn, .header-halloween, .header-christmas {
        min-height: 180px;
    }

    #mainLogo {
        max-height: 115px;
    }

    #menu-filters {
        margin: 12px 0 24px;
        padding-top: 6px;
    }

        #menu-filters li {
            margin: 4px 2px;
            padding: 8px 14px;
            font-size: 13px;
        }

    :is(.menu-wrapper,[id="menu-wrapper"]) {
        margin-bottom: 28px;
        padding-bottom: 22px;
    }
}

@media (max-width:576px) {
    #mainLogo {
        max-height: 105px;
    }

    #menu-filters {
        margin: 8px 0 20px;
    }

        #menu-filters li {
            padding: 7px 11px;
            font-size: 12px;
        }

    /* Home thoát khỏi Bootstrap container, gần full viewport */
    .content .backgroundWhite {
        position: relative !important;
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    :is(.menu-wrapper,[id="menu-wrapper"]),
    .menu-restaurant,
    .menu-restaurant.post {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .menu-restaurant .row {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .menu-restaurant .product-item {
            flex: 0 0 100% !important;
            width: 100% !important;
            max-width: 100% !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
        }

        .menu-restaurant .card.product {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-bottom: 10px !important;
        }

        .menu-restaurant .card-img-top {
            width: 100% !important;
            height: 320px !important;
            object-fit: contain !important;
            margin-top: 8px;
            padding: 0 4px;
        }

        .menu-restaurant .card.product .card-body {
            padding: 10px 8px 14px;
        }

        .menu-restaurant .section-divider {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
}