/* =====================================================================
   QUICK OVERRIDES (Coffee Brand Edition)
   ---------------------------------------------------------------------
   Amaç:
   - Mevcut Quick HTML/CSHTML yapısını BOZMADAN görünümü yenilemek
   - Değişimi büyük ölçüde CSS ile yapmak
   - Ürün detayı (sidebar/bottom sheet) alanına DOKUNMAMAK

   Notlar:
   - Bu dosya style.css ve theme css'lerden SONRA yüklenmelidir.
   - Ürün detayı kapsam dışı: .sidebar-wrap, #productdetayload, .menu-open...
   ===================================================================== */

/* =====================================================================
   0) COFFEE BRAND PALETTE (Token'lar)
   ---------------------------------------------------------------------
   Palet mantığı:
   - Arka plan: sıcak krem
   - Yüzey: porselen beyaz
   - Metin: koyu espresso
   - Brand: kavrulmuş kahve / karamel vurgu
   - Border: sıcak, düşük kontrast
   ===================================================================== */

:root {
    /* Typography */
    --qs-font: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --qs-font-alt: "PT Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    /* Coffee Colors */
    --qs-bg: #F6F0E6; /* crema */
    --qs-surface: #FFFFFF; /* porselen */
    --qs-surface-2: #FFF9F0; /* latte foam */
    --qs-text: #2B1D14; /* espresso */
    --qs-muted: #7A665A; /* mocha grey */
    --qs-border: rgba(43, 29, 20, 0.12);
    /* Brand */
    --qs-brand: #6B3F2A; /* roasted coffee */
    --qs-brand-2: #C79B6D; /* caramel */
    --qs-accent: #2F6F6D; /* opsiyonel: teal (soğuk vurgu) */
    --qs-danger: #B42318;
    /* Radius */
    --qs-r-sm: 10px;
    --qs-r-md: 16px;
    --qs-r-lg: 22px;
    /* Shadows (warm) */
    --qs-shadow-sm: 0 6px 18px rgba(43, 29, 20, 0.06);
    --qs-shadow-md: 0 14px 34px rgba(43, 29, 20, 0.10);
    /* Spacing scale */
    --qs-1: 4px;
    --qs-2: 8px;
    --qs-3: 12px;
    --qs-4: 16px;
    --qs-5: 20px;
    --qs-6: 24px;
    /* Focus ring */
    --qs-ring: 0 0 0 3px rgba(107, 63, 42, 0.22);
}

/* =====================================================================
   1) BASE (Global)
   ===================================================================== */

html, body {
    font-family: var(--qs-font);
    color: var(--qs-text);
}

body {
    background: #faf7ee!important;
}

a {
    color: inherit;
    text-decoration: none;
}

    a:hover {
        color: var(--qs-brand);
    }

/* Headings */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.2px;
}

h3, .h3 {
    font-weight: 800;
    color: #fe5803;
}

h5, .h5 {
    font-weight: 800;
}

h6, .h6 {
    font-weight: 800;
}
.text-color-theme {
    color: #fe5803;
}
.text-muted, .small, small {
    color: var(--qs-muted) !important;
}

/* Layout spacing */
main.container-fluid.has-header.has-footer { 
    padding-bottom: calc(var(--qs-6) + 6px);
}

/* Reduce mobile tap highlight */
a, button {
    -webkit-tap-highlight-color: transparent;
}
.footer .nav .nav-item.center-item .nav-link > span {
    background: #fe5803;
}
/* =====================================================================
   2) FORMS (Search vb.)
   ===================================================================== */

.form-control,
.form-select,
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: var(--qs-r-md);
    border: 1px solid var(--qs-border);
    background: var(--qs-surface);
    box-shadow: none;
}

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(107, 63, 42, 0.45);
        box-shadow: var(--qs-ring);
    }

.form-floating > label {
    color: rgba(122, 102, 90, 0.95);
    font-weight: 700;
}

.form-floating .form-control {
    padding-top: 1.1rem;
}

/* Search input + overlay button */
.form-floating {
    position: relative;
}

    .form-floating > .form-control {
        min-height: 52px;
        padding-right: 52px;
    }

    .form-floating .search-btn,
    .form-floating button[type="submit"],
    .form-floating button[type="button"] {
        position: absolute;
        right: 11px;
        top: 77%;
        transform: translateY(-50%);
        height: 40px;
        width: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(107, 63, 42, 0.18);
        background: rgba(107, 63, 42, 0.10);
        color: var(--qs-brand);
    }

        .form-floating .search-btn:hover,
        .form-floating button[type="submit"]:hover,
        .form-floating button[type="button"]:hover {
            background: rgba(107, 63, 42, 0.14);
            border-color: rgba(107, 63, 42, 0.28);
            box-shadow: var(--qs-shadow-sm);
        }

/* =====================================================================
   3) BUTTONS
   ===================================================================== */

.btn {
    border-radius: var(--qs-r-md);
    font-weight: 800;
}

    .btn:focus {
        box-shadow: var(--qs-ring) !important;
    }

.btn-primary {
    background: var(--qs-brand);
    border-color: var(--qs-brand);
}

    .btn-primary:hover {
        background: #5A3423;
        border-color: #5A3423;
    }

/* Chips (kategori vb.) */
a.btn.btn-sm,
button.btn.btn-sm {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--qs-border);
    background: var(--qs-surface);
    font-weight: 900;
}

    a.btn.btn-sm:hover,
    button.btn.btn-sm:hover {
        border-color: rgba(107, 63, 42, 0.25);
        box-shadow: var(--qs-shadow-sm);
    }

    a.btn.btn-sm.is-active,
    button.btn.btn-sm.is-active {
        background: rgba(107, 63, 42, 0.10);
        border-color: rgba(107, 63, 42, 0.30);
        color: var(--qs-brand);
    }

/* =====================================================================
   4) CARDS / LISTS
   ===================================================================== */

.card {
    border-radius: var(--qs-r-lg);
    border: 1px solid var(--qs-border);
    box-shadow: var(--qs-shadow-sm);
    background: var(--qs-surface);
}

    .card .card-body {
        padding: var(--qs-4);
    }

    /* Images */
    .card figure {
        border-top-left-radius: var(--qs-r-lg);
        border-top-right-radius: var(--qs-r-lg);
        overflow: hidden;
        background: var(--qs-surface-2);
        min-height: 120px; /* yumuşak standardizasyon */
    }

        .card figure img {
            width: 100%; 
            height: 100%;
            object-fit: cover;
        }

/* Showcase slider variants (slightly different min-heights) */
.shopslides .card figure,
.offerslides .card figure {
    min-height: 110px;
}

.maincaseswiper1 .card figure {
    min-height: 140px;
}

/* Product title clamp */
.card h6,
.card .h6 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 900;
    letter-spacing: -0.2px;
}

/* Price / emphasis */
.price,
.product-price,
.card .text-secondary,
.card .fw-semibold {
    color: var(--qs-text);
}

/* List group (MainShowcase5) */
.list-group-item {
    border-color: rgba(43, 29, 20, 0.08);
    border-radius: var(--qs-r-md);
    margin-bottom: 10px;
    box-shadow: var(--qs-shadow-sm);
    background: rgba(255,255,255,0.98);
}

    .list-group-item:last-child {
        margin-bottom: 0;
    }

    .list-group-item .fw-bold,
    .list-group-item h6 {
        font-weight: 900;
    }

/* Badges */
.badge {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.badge-new {
    background: rgba(107, 63, 42, 0.10);
    color: var(--qs-brand);
    border: 1px solid rgba(107, 63, 42, 0.18);
    font-weight: 900;
    padding: 6px 10px;
}

/* Sold-out (davranış aynı) */
.sold-out {
    opacity: 0.50;
    filter: grayscale(0.25);
}

    .sold-out::after {
        content: "TÜKENDİ";
        border-radius: 999px;
        font-weight: 900;
        letter-spacing: 0.4px;
        padding: 6px 10px;
        top: 10px;
        right: 10px;
        background: rgba(180, 35, 24, 0.92);
        color: #fff;
        box-shadow: 0 10px 20px rgba(180, 35, 24, 0.18);
    }

/* Desktop hover polish (safe) */
@media (hover: hover) and (pointer: fine) {
    .card:hover {
        box-shadow: var(--qs-shadow-md);
        border-color: rgba(107, 63, 42, 0.16);
        transform: translateY(-1px);
        transition: all 160ms ease;
    }
}

/* =====================================================================
   5) CATEGORIES
   ===================================================================== */

/* Category swiper cards (categorySetting=1) */
.categoriesswiper {
    padding-bottom: 8px;
}

    .categoriesswiper .swiper-slide {
        padding-bottom: 10px;
    }

    .categoriesswiper .card {
        border-radius: var(--qs-r-lg);
        overflow: hidden;
    }

        .categoriesswiper .card figure {
            border-radius: var(--qs-r-lg);
            overflow: hidden;
            background: var(--qs-surface-2);
            min-height: 110px;
        }

            .categoriesswiper .card figure img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .categoriesswiper .card .categoryname,
        .categoriesswiper .card .mt-1.fw-normal {
            font-weight: 900 !important;
            color: var(--qs-text);
        }

/* Category overlay (categorySetting=3) */
.cat-overlay {
    position: relative;
    border-radius: var(--qs-r-lg) !important;
    overflow: hidden;
    box-shadow: var(--qs-shadow-sm);
    border: 1px solid var(--qs-border);
}

    .cat-overlay img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: saturate(1.05) contrast(1.02);
    }

.cat-title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(8px);
    color: var(--qs-text) !important;
    font-weight: 900;
    text-align: left;
}

/* categorySetting=2 button spacing */
.mb-2 a.btn.btn-sm,
.mb-2 button.btn.btn-sm {
    margin: 4px 6px 6px 0;
}

/* =====================================================================
   6) HEADER / FOOTER (App feel)
   ===================================================================== */

.header,
.footer {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    border-color: rgba(43, 29, 20, 0.08);
}

.header {
    border-bottom: 1px solid rgba(43, 29, 20, 0.08);
}

    .header a,
    .header button {
        border-radius: 999px;
    }

    .header .fw-bold,
    .header .title,
    .header h6,
    .header .h6 {
        font-weight: 900;
    }

.footer {
    border-top: 1px solid rgba(43, 29, 20, 0.08);
}

    .footer a,
    .footer button {
        padding: 10px 12px;
    }

    .footer .btn,
    .footer a {
        border-radius: 999px;
    }

        .footer a.active,
        .footer a[aria-current="page"],
        .footer button.active {
            background: rgba(107, 63, 42, 0.10);
            color: var(--qs-brand);
            box-shadow: var(--qs-shadow-sm);
            border: 1px solid rgba(107, 63, 42, 0.18);
        }

    .footer i,
    .footer .bi {
        font-size: 1.15rem;
    }

    .footer small,
    .footer .small {
        font-weight: 800;
        color: var(--qs-muted) !important;
    }

    .footer .p-3 {
        background-color: #e05710 !important;
    }

/* Touch feedback */
a:active,
button:active,
.btn:active {
    transform: translateY(0.5px);
}

/* =====================================================================
   7) SWIPER
   ===================================================================== */

.swiper .card {
    transform: translateZ(0);
}

.maincaseswiper1 .card,
.shopslides .card,
.offerslides .card {
    border-radius: var(--qs-r-lg);
}

.swiper-pagination {
    bottom: 6px !important;
}

.swiper-pagination-bullet {
    opacity: 0.25;
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.swiper-pagination-bullet-active {
    opacity: 0.85;
    transform: scale(1.15);
}

/* =====================================================================
   8) SECTION / DIVIDERS / SPACING
   ===================================================================== */

.showcase-title,
h5.showcase-title,
h5.mb-2 {
    font-family: var(--qs-font);
    font-weight: 900;
    letter-spacing: -0.3px;
    color: var(--qs-text);
}

.showcase-title {
    margin: var(--qs-5) 0 var(--qs-3);
}

section,
.section {
    margin-bottom: var(--qs-5);
}

.hr-soft,
hr {
    border-color: rgba(43, 29, 20, 0.08);
}

.container-fluid .row {
    --bs-gutter-x: 1rem;
}
 
/* =====================================================================
   9) SCOPE (Quick main only) - Theme çakışmalarını azalt
   ===================================================================== */

main.container-fluid.has-header.has-footer .card,
main.container-fluid.has-header.has-footer .list-group-item {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 14px;
    border: 2px solid rgb(227 117 56 / 47%);
}

/* =====================================================================
   10) OPTIONAL DARK TOKENS (aktif değil)
   - Kullanmak istersen: body data-theme="dark"
   ===================================================================== */

body[data-theme="dark"] {
    --qs-bg: #0C0F12;
    --qs-surface: #121820;
    --qs-surface-2: #141C26;
    --qs-text: #E7E1DA;
    --qs-muted: #B3A79E;
    --qs-border: rgba(231, 225, 218, 0.12);
    --qs-brand: #C79B6D;
    --qs-brand-2: #6B3F2A;
    --qs-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.38);
    --qs-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.46);
    --qs-ring: 0 0 0 3px rgba(199, 155, 109, 0.22);
}

    body[data-theme="dark"] .header,
    body[data-theme="dark"] .footer {
        background: rgba(18, 24, 32, 0.72);
        border-color: rgba(231, 225, 218, 0.12);
    }

    body[data-theme="dark"] main.container-fluid.has-header.has-footer .card,
    body[data-theme="dark"] main.container-fluid.has-header.has-footer .list-group-item {
        background: rgba(18, 24, 32, 0.92);
        border-color: rgba(231, 225, 218, 0.12);
        border-radius: 14px;
        border: 2px solid var(--qs-border);
    }

/* =====================================================================
   11) SAFETY: ÜRÜN DETAYI (KAPSAM DIŞI)
   ===================================================================== */

.sidebar-wrap,
.sidebar-wrap * {
    /* bilerek boş: ürün detayı aynı kalacak */
}


/* =====================================================================
   QUICK GLASS HEADER – Coffee Brand
   ---------------------------------------------------------------------
   Amaç:
   - style-primary.css içindeki mavi header'ı tamamen devre dışı bırakmak
   - Glass (cam) efektli, premium kahve hissi vermek
   - HTML/CSHTML'e dokunmamak
   ===================================================================== */

/* 1) Header container – cam yüzey */
.header {
    position: fixed; /* mevcut davranışı koru */
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(43, 29, 20, 0.10);
    box-shadow: 0 8px 24px rgba(43, 29, 20, 0.08);
    color: var(--qs-text) !important;
}

    /* 2) style-primary.css’ten gelen mavi arka planı iptal et */
    .header.bg-primary,
    .header.bg-dark,
    .header.bg-theme {
        background: rgb(224 87 16) !important;
    }

    /* 3) Header içindeki tüm link & ikonlar */
    .header a,
    .header button,
    .header i,
    .header svg {
        color: var(--qs-text) !important;
        text-decoration: none;
    }

    /* 4) Header başlık / logo yazısı */
    .header .fw-bold,
    .header .title,
    .header h6,
    .header .h6,
    .header .navbar-brand {
        font-weight: 900;
        letter-spacing: -0.2px;
        color: var(--qs-text) !important;
    }

    /* 5) Header ikon butonları (geri, menü, arama vs.) */
    .header .btn,
    .header a.btn,
    .header button {
        border-radius: 999px;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 8px;
    }

        /* 6) Hover & active state – kahve vurgusu */
        .header a:hover,
        .header button:hover {
            background: rgba(107, 63, 42, 0.08);
            color: var(--qs-brand) !important;
        }

        .header a:active,
        .header button:active {
            background: rgba(107, 63, 42, 0.14);
        }

    /* 7) Header ikon boyutları (mobil için netlik) */
    .header i,
    .header .bi {
        font-size: 1.2rem;
        line-height: 1;
    }

/* 8) Güvenli alan: header altındaki içerik kaymasın */
main.container-fluid.has-header {
    padding-top: 82px; /* 64px header + nefes */
}

/* 9) Fallback (blur desteklemeyen cihazlar) */
@supports not (backdrop-filter: blur(10px)) {
    .header {
        background: rgba(255, 255, 255, 0.92) !important;
    }
}


/* =====================================================================
   QUICK CATEGORIES – Coffee Brand
   ---------------------------------------------------------------------
   Kapsam:
   - categorySetting = 1 (Swiper kart)
   - categorySetting = 2 (Buton/Chip grid)
   - categorySetting = 3 (Overlay görsel kutular)
   Not:
   - Ürün detayı alanına dokunmaz.
   ===================================================================== */

/* Genel kategori alanı spacing */
.categoriesswiper {
    padding: 6px 0 10px;
}

/* ---------------------------------------------------------------------
   categorySetting = 2  (Buton / Chip)
   - Mevcut: a.btn.btn-sm / button.btn.btn-sm
   - Kahve hissi: porselen zemin + espresso border + caramel vurgu
--------------------------------------------------------------------- */

a.btn.btn-sm,
button.btn.btn-sm {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(43, 29, 20, 0.12);
    color: var(--qs-text);
    font-weight: 900;
    border-radius: 999px;
    padding: 10px 14px;
}

    a.btn.btn-sm:hover,
    button.btn.btn-sm:hover {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(107, 63, 42, 0.22);
        box-shadow: 0 10px 24px rgba(43, 29, 20, 0.08);
        color: var(--qs-brand);
    }

    /* Aktif kategori için hazır kural:
   (HTML/JS active basmıyorsa şimdilik görünmez; ileride minimal hook ekleriz) */
    a.btn.btn-sm.is-active,
    button.btn.btn-sm.is-active {
        background: rgba(107, 63, 42, 0.10);
        border-color: rgba(107, 63, 42, 0.30);
        color: var(--qs-brand);
    }

/* Buton gridde nefes */
.mb-2 a.btn.btn-sm,
.mb-2 button.btn.btn-sm {
    margin: 4px 6px 6px 0;
}

/* ---------------------------------------------------------------------
   categorySetting = 1  (Swiper kart)
   - Mevcut: .categoriesswiper .card figure img + altta categoryname
--------------------------------------------------------------------- */

.categoriesswiper .swiper-slide {
    padding-bottom: 8px;
}

.categoriesswiper .card {
    border-radius: var(--qs-r-lg);
    border: 1px solid rgba(43, 29, 20, 0.10);
    box-shadow: 0 10px 26px rgba(43, 29, 20, 0.08);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
}

    /* Kategori görseli: “kahve menü panosu” gibi */
    .categoriesswiper .card figure {
        border-radius: var(--qs-r-lg);
        overflow: hidden;
        background: var(--qs-surface-2);
        min-height: 110px;
    }

        .categoriesswiper .card figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(1.06) contrast(1.02);
            transform: translateZ(0);
        }

    /* Kategori adı: daha güçlü ve okunur */
    .categoriesswiper .card .categoryname,
    .categoriesswiper .card .mt-1.fw-normal {
        font-weight: 900 !important;
        color: var(--qs-text);
        letter-spacing: -0.2px;
    }

/* ---------------------------------------------------------------------
   categorySetting = 3  (Overlay görsel)
   - Mevcut: .cat-overlay + .cat-title (inline css vardı, bunu bastırıyoruz)
--------------------------------------------------------------------- */

.cat-overlay {
    position: relative;
    border-radius: var(--qs-r-lg) !important;
    overflow: hidden;
    border: 1px solid rgba(43, 29, 20, 0.10);
    box-shadow: 0 12px 30px rgba(43, 29, 20, 0.10);
    background: rgba(255, 255, 255, 0.98);
}

    .cat-overlay img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: saturate(1.06) contrast(1.02);
    }

/* Overlay title: “etiket” gibi, cam + sıcak vurgu */
.cat-title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(43, 29, 20, 0.10);
    box-shadow: 0 10px 24px rgba(43, 29, 20, 0.08);
    color: var(--qs-text) !important;
    font-weight: 900;
    text-align: left;
    letter-spacing: -0.2px;
}

    /* Overlay title içinde “fiyat/alt metin” varsa sakinleştir */
    .cat-title small,
    .cat-title .small {
        color: var(--qs-muted) !important;
        font-weight: 800;
    }

/* ---------------------------------------------------------------------
   Kategori Swiper pagination (varsa) – caramel dokunuş
--------------------------------------------------------------------- */

.categoriesswiper .swiper-pagination-bullet-active {
    opacity: 0.95;
}

/* (Opsiyonel) bullet rengi: caramel hissi
   Not: Swiper bullet rengi inline gelmiyorsa etkili olur */
.categoriesswiper .swiper-pagination-bullet {
    background: rgba(199, 155, 109, 0.55);
}

.categoriesswiper .swiper-wrapper .swiper-slide img {
    width: 100%;
    margin: 0 auto;
    max-height: 90px;
    border-radius: 18px!important;
}

/* ==============================
   QS Multi Price – Base (ROW-KEY VERSION)
   data-mp-key artık .qs-mp__row üstünde
   ============================== */

.qs-mp {
}

/* Head (ikon yok, sadece başlık) */
.qs-mp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.qs-mp__title {
    font-weight: 600;
}

/* Row layout (ikon satırda) */
.qs-mp__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-top: 1px dashed rgba(43,29,20,.12);
}

    .qs-mp__row:first-of-type {
        border-top: 0;
    }

.qs-mp__label {
    flex: 1 1 auto;
    font-weight: 500;
}

.qs-mp__price {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Icon base */
.qs-mp__icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(107,63,42,.10);
    border: 1px solid rgba(107,63,42,.18);
    position: relative;
    flex: 0 0 28px;
}

    .qs-mp__icon::before {
        content: "";
        position: absolute;
        inset: 6px;
        background: #6B3F2A;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }

/* ==============================
   ICON MAP (ROW KEY)
   ============================== */
.qs-mp__row[data-mp-key="MP_SIZE_SMALL"] .qs-mp__icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12v9c0 2-2 4-4 4H8c-2 0-4-2-4-4V8zm12 1h2c2 0 4 1.8 4 4s-2 4-4 4h-2v-2h2c1 0 2-.9 2-2s-1-2-2-2h-2V9zM4 22h12v2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12v9c0 2-2 4-4 4H8c-2 0-4-2-4-4V8zm12 1h2c2 0 4 1.8 4 4s-2 4-4 4h-2v-2h2c1 0 2-.9 2-2s-1-2-2-2h-2V9zM4 22h12v2H4z'/%3E%3C/svg%3E");
}
.qs-mp__row[data-mp-key="MP_SIZE_MEDIUM"] .qs-mp__icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h12v11c0 2.5-2 5-4.5 5h-3C6 22 4 19.5 4 17V6zm12 1h2.5c2.2 0 4.5 2 4.5 4.5S20.7 16 18.5 16H16v-2.2h2.3c1.1 0 2-.9 2-2s-.9-2-2-2H16V7zM4 22h12v2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h12v11c0 2.5-2 5-4.5 5h-3C6 22 4 19.5 4 17V6zm12 1h2.5c2.2 0 4.5 2 4.5 4.5S20.7 16 18.5 16H16v-2.2h2.3c1.1 0 2-.9 2-2s-.9-2-2-2H16V7zM4 22h12v2H4z'/%3E%3C/svg%3E");
}
.qs-mp__row[data-mp-key="MP_SIZE_LARGE"] .qs-mp__icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h12v14c0 3-2.5 6-5.5 6h-1C6.5 24 4 21 4 18V4zm12 1h3c2.5 0 5 2.2 5 5s-2.5 5-5 5h-3v-2.5h3c1.3 0 2.5-1.2 2.5-2.5S20.3 7.5 19 7.5h-3V5zM4 22h12v2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h12v14c0 3-2.5 6-5.5 6h-1C6.5 24 4 21 4 18V4zm12 1h3c2.5 0 5 2.2 5 5s-2.5 5-5 5h-3v-2.5h3c1.3 0 2.5-1.2 2.5-2.5S20.3 7.5 19 7.5h-3V5zM4 22h12v2H4z'/%3E%3C/svg%3E");
}
.qs-mp__row[data-mp-key="MP_SIZE_XL"] .qs-mp__icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h13v16c0 3.5-3 7-6.5 7h-0C6 26 3 22.5 3 19V3zm13 1h3.5c3 0 5.5 2.5 5.5 5.5S22.5 15 19.5 15H16v-3h3.5c1.6 0 2.5-1.2 2.5-2.5S21.1 7 19.5 7H16V4zM3 22h13v2H3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h13v16c0 3.5-3 7-6.5 7h-0C6 26 3 22.5 3 19V3zm13 1h3.5c3 0 5.5 2.5 5.5 5.5S22.5 15 19.5 15H16v-3h3.5c1.6 0 2.5-1.2 2.5-2.5S21.1 7 19.5 7H16V4zM3 22h13v2H3z'/%3E%3C/svg%3E");
}


.qs-mp__row[data-mp-key="MP_TEMP_HOT"] .qs-mp__icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9h10v7c0 2-2 4-4 4H10c-2 0-4-2-4-4V9zm10 1h2c2 0 4 1.8 4 4s-2 4-4 4h-2v-2h2c1 0 2-.9 2-2s-1-2-2-2h-2V10zM6 21h10v2H6zM8 3c1.2 1.2 1.2 2.8 0 4-1.2 1.2-1.2 2.8 0 4h2c-1.2-1.2-1.2-2.8 0-4 1.2-1.2 1.2-2.8 0-4H8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9h10v7c0 2-2 4-4 4H10c-2 0-4-2-4-4V9zm10 1h2c2 0 4 1.8 4 4s-2 4-4 4h-2v-2h2c1 0 2-.9 2-2s-1-2-2-2h-2V10zM6 21h10v2H6zM8 3c1.2 1.2 1.2 2.8 0 4-1.2 1.2-1.2 2.8 0 4h2c-1.2-1.2-1.2-2.8 0-4 1.2-1.2 1.2-2.8 0-4H8z'/%3E%3C/svg%3E");
}

.qs-mp__row[data-mp-key="MP_TEMP_ICED"] .qs-mp__icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10l-1 18c0 1.7-1.3 3-3 3H11c-1.7 0-3-1.3-3-3L7 3zm2.2 5.2h3v3h-3v-3zm4.6 1.2h3v3h-3v-3zM8 1h8v2H8V1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10l-1 18c0 1.7-1.3 3-3 3H11c-1.7 0-3-1.3-3-3L7 3zm2.2 5.2h3v3h-3v-3zm4.6 1.2h3v3h-3v-3zM8 1h8v2H8V1z'/%3E%3C/svg%3E");
}

.qs-mp__row[data-mp-key="MP_TEMP_EXTRA_HOT"] .qs-mp__icon::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9h10v7c0 2-2 4-4 4H10c-2 0-4-2-4-4V9zm10 1h2c2 0 4 1.8 4 4s-2 4-4 4h-2v-2h2c1 0 2-.9 2-2s-1-2-2-2h-2V10zM6 21h10v2H6zM7.5 2.5c1.2 1.2 1.2 2.8 0 4-1.2 1.2-1.2 2.8 0 4h2c-1.2-1.2-1.2-2.8 0-4 1.2-1.2 1.2-2.8 0-4h-2zm5 0c1.2 1.2 1.2 2.8 0 4-1.2 1.2-1.2 2.8 0 4h2c-1.2-1.2-1.2-2.8 0-4 1.2-1.2 1.2-2.8 0-4h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9h10v7c0 2-2 4-4 4H10c-2 0-4-2-4-4V9zm10 1h2c2 0 4 1.8 4 4s-2 4-4 4h-2v-2h2c1 0 2-.9 2-2s-1-2-2-2h-2V10zM6 21h10v2H6zM7.5 2.5c1.2 1.2 1.2 2.8 0 4-1.2 1.2-1.2 2.8 0 4h2c-1.2-1.2-1.2-2.8 0-4 1.2-1.2 1.2-2.8 0-4h-2zm5 0c1.2 1.2 1.2 2.8 0 4-1.2 1.2-1.2 2.8 0 4h2c-1.2-1.2-1.2-2.8 0-4 1.2-1.2 1.2-2.8 0-4h-2z'/%3E%3C/svg%3E");
}





/* Milk Regular */
.qs-mp__row[data-mp-key="MP_MILK_REGULAR"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8v20H8z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8v20H8z'/%3E%3C/svg%3E");
}

/* Milk Lactose Free */
.qs-mp__row[data-mp-key="MP_MILK_LACTOSE_FREE"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}

/* Milk Oat */
.qs-mp__row[data-mp-key="MP_MILK_OAT"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-4 6 4 10 0 20'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-4 6 4 10 0 20'/%3E%3C/svg%3E");
}

/* Milk Almond */
.qs-mp__row[data-mp-key="MP_MILK_ALMOND"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c3 5 6 10 0 20'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c3 5 6 10 0 20'/%3E%3C/svg%3E");
}

/* Shot Single */
.qs-mp__row[data-mp-key="MP_SHOT_SINGLE"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Shot Double */
.qs-mp__row[data-mp-key="MP_SHOT_DOUBLE"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='12' r='3'/%3E%3Ccircle cx='15' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='12' r='3'/%3E%3Ccircle cx='15' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Shot Extra */
.qs-mp__row[data-mp-key="MP_SHOT_EXTRA"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l4 10-4 10-4-10z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l4 10-4 10-4-10z'/%3E%3C/svg%3E");
}

/* Person 1 */
.qs-mp__row[data-mp-key="MP_PERSON_1"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}

/* Person 2 */
.qs-mp__row[data-mp-key="MP_PERSON_2"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Ccircle cx='15' cy='8' r='4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Ccircle cx='15' cy='8' r='4'/%3E%3C/svg%3E");
}

/* Person 3 */
.qs-mp__row[data-mp-key="MP_PERSON_3"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='8' r='4'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Ccircle cx='18' cy='8' r='4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='8' r='4'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Ccircle cx='18' cy='8' r='4'/%3E%3C/svg%3E");
}

/* Service Dine-in */
.qs-mp__row[data-mp-key="MP_SERVICE_DINEIN"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2h18v4H3z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2h18v4H3z'/%3E%3C/svg%3E");
}

/* Service Takeaway */
.qs-mp__row[data-mp-key="MP_SERVICE_TAKEAWAY"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h12v16H6z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h12v16H6z'/%3E%3C/svg%3E");
}

/* Service Delivery */
.qs-mp__row[data-mp-key="MP_SERVICE_DELIVERY"] .qs-mp__icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h20v4H2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h20v4H2z'/%3E%3C/svg%3E");
}