:root {
    --cute-choco: #5b2f22;
    --cute-choco-soft: #7f4a36;
    --cute-cookie: #e9ad69;
    --cute-cookie-light: #f6c98e;
    --cute-cookie-dark: #c9783f;
    --cute-strawberry: #ff7f91;
    --cute-strawberry-dark: #df5a70;
    --cute-bubblegum: #ffd8e1;
    --cute-milk: #fffaf3;
    --cute-vanilla: #fff0d8;
    --cute-mint: #aee9e4;
    --cute-mint-dark: #55bdb8;
    --cute-lemon: #ffd97d;
    --cute-shadow: 0 18px 0 rgba(121, 66, 42, .08), 0 28px 60px rgba(91, 47, 34, .12);
}

body.caca-theme {
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 127, 145, .09), transparent 24rem),
        radial-gradient(circle at 90% 22%, rgba(174, 233, 228, .12), transparent 25rem),
        var(--cute-milk);
}

.caca-theme h1,
.caca-theme h2,
.caca-theme h3,
.caca-theme .brand-name,
.caca-theme .btn,
.caca-theme .category-pill,
.caca-theme .menu-badge {
    font-family: "Fredoka", "Nunito", sans-serif;
}

.coffee-navbar {
    min-height: 88px;
    background: rgba(255, 250, 243, .94);
    border-bottom: 3px solid rgba(255, 127, 145, .22);
    box-shadow: 0 9px 0 rgba(255,255,255,.78), 0 18px 38px rgba(91,47,34,.10);
}

.brand-logo-shell {
    width: 72px;
    height: 64px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: rotate(-3deg);
}
.brand-logo-shell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 7px rgba(91,47,34,.16));
}
.brand-name { font-size: 1.06rem; }
.brand-mini { color: var(--cute-strawberry-dark); }

.nav-outlet-button,
.wifi-nav-button,
.cart-button {
    min-height: 45px;
    border-width: 2px !important;
    border-radius: 18px 18px 16px 16px !important;
    font-weight: 900;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.75), 0 5px 0 rgba(111,61,39,.13), 0 10px 22px rgba(91,47,34,.10) !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-outlet-button:hover,
.wifi-nav-button:hover,
.cart-button:hover { transform: translateY(-2px) rotate(-.5deg); }
.nav-outlet-button:active,
.wifi-nav-button:active,
.cart-button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 rgba(111,61,39,.13) !important; }
.nav-outlet-button { background: #fff4dc; border-color: #f2c77a; }
.wifi-nav-button { background: #e9fbf8 !important; border-color: #9edbd7 !important; }
.cart-button {
    border: 2px solid #ffbdc8;
    background: linear-gradient(180deg, #ff9baa 0%, #ff7f91 70%, #ed667b 100%);
}
.cart-count { box-shadow: inset 0 -2px 0 rgba(91,47,34,.08); }

.hero-section {
    min-height: 760px;
    padding: 168px 0 92px;
    background:
        radial-gradient(circle at 8% 23%, rgba(255,255,255,.95) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 19%, rgba(255,255,255,.9) 0 5px, transparent 6px),
        radial-gradient(circle at 84% 24%, rgba(174,233,228,.62), transparent 24%),
        radial-gradient(circle at 12% 75%, rgba(255,127,145,.20), transparent 27%),
        linear-gradient(145deg, #fffdf8 0%, #fff0e5 48%, #ffe3d8 100%);
}
.hero-section::before {
    opacity: .72;
    background-image:
        radial-gradient(circle, rgba(255,127,145,.24) 1.7px, transparent 1.9px),
        radial-gradient(circle, rgba(91,47,34,.11) 1.1px, transparent 1.3px);
    background-position: 0 0, 14px 14px;
    background-size: 29px 29px;
}
.hero-section .container,
.outlet-section .container,
.menu-section .container,
.feature-section .container,
.coffee-footer .container { max-width: 1180px; }

.eyebrow,
.section-kicker {
    padding: .48rem .78rem;
    border: 2px solid rgba(255,127,145,.24);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 2px 0 #fff, 0 6px 14px rgba(91,47,34,.07);
    letter-spacing: .12em;
}
.hero-section h1 {
    max-width: 700px;
    margin-top: 1.1rem;
    font-size: clamp(3.1rem, 6.5vw, 5.8rem);
    line-height: .96;
}
.hero-copy { max-width: 650px; }

.btn-coffee,
.btn-order-guide,
.hero-actions .btn-outline-dark {
    position: relative;
    overflow: hidden;
    min-height: 54px;
    padding: .82rem 1.25rem;
    border-width: 2px;
    border-radius: 20px 20px 18px 18px;
    font-weight: 900;
    letter-spacing: .01em;
    box-shadow: inset 0 4px 0 rgba(255,255,255,.48), 0 7px 0 rgba(115,61,39,.15), 0 14px 28px rgba(91,47,34,.10);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-coffee::before,
.btn-order-guide::before,
.hero-actions .btn-outline-dark::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 13px;
    top: 6px;
    left: 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.32);
    transform: rotate(-8deg);
    pointer-events: none;
}
.btn-coffee:hover,
.btn-order-guide:hover,
.hero-actions .btn-outline-dark:hover { transform: translateY(-2px) rotate(-.35deg); }
.btn-coffee:active,
.btn-order-guide:active,
.hero-actions .btn-outline-dark:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 2px 0 rgba(115,61,39,.15); }
.btn-coffee {
    border-color: #ffb2bf;
    background: linear-gradient(180deg, #ff9cab, #ff7f91 68%, #e96279);
}
.btn-order-guide {
    color: var(--cute-choco);
    border-color: #f3c47d;
    background: linear-gradient(180deg, #fff1c9, #ffd98b);
}
.hero-actions .btn-outline-dark {
    color: #397e7b;
    border-color: #9bdcd7;
    background: linear-gradient(180deg, #f2fffd, #bfece8);
}

.meta-card {
    padding: .72rem .78rem;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 20px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 9px 22px rgba(91,47,34,.08);
}
.meta-card i { border-radius: 14px; }

.hero-cup-card {
    min-height: 550px;
    border: 4px solid #fff;
    border-radius: 54px 46px 58px 48px;
    background:
        radial-gradient(circle at 15% 16%, #fff 0 5px, transparent 6px),
        radial-gradient(circle at 82% 20%, #fff 0 4px, transparent 5px),
        radial-gradient(circle at 88% 72%, rgba(174,233,228,.75), transparent 23%),
        linear-gradient(150deg, #ffd7df 0%, #fff0df 55%, #dff8f5 100%);
    box-shadow: 0 14px 0 rgba(255,127,145,.13), 0 38px 72px rgba(91,47,34,.18);
    transform: rotate(.7deg);
}
.hero-cup-card::before {
    width: 370px;
    height: 370px;
    top: 66px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 0 0 16px rgba(255,255,255,.28), 0 24px 56px rgba(91,47,34,.10);
}
.hero-cup-card::after {
    width: 130px;
    height: 130px;
    right: -28px;
    bottom: 105px;
    background: var(--cute-mint);
    opacity: .75;
}
.hero-card-badge {
    top: 24px;
    left: 26px;
    padding: .5rem .78rem;
    border: 2px solid #ffb5c1;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff9aaa, #ff7488);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.42), 0 6px 0 rgba(129,61,43,.12);
}
.caca-hero-logo {
    position: absolute;
    z-index: 4;
    width: calc(100% - 50px);
    height: calc(100% - 188px);
    max-height: none;
    left: 50%;
    top: 52px;
    transform: translateX(-50%) rotate(-1deg);
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    filter: drop-shadow(0 18px 16px rgba(91,47,34,.16));
}
.hero-card-copy {
    z-index: 7;
    left: 24px;
    right: 24px;
    bottom: 22px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.15rem 1rem 1.25rem;
    border: 3px solid #fff;
    border-radius: 26px 30px 24px 28px;
    background: rgba(255,250,243,.95);
    box-shadow: inset 0 4px 0 rgba(255,255,255,.9), 0 9px 0 rgba(255,127,145,.12), 0 18px 30px rgba(91,47,34,.13);
    backdrop-filter: blur(8px);
}
.hero-card-copy span { margin-bottom: .22rem; font-size: .66rem; }
.hero-card-copy strong { max-width: none; font-size: 1.08rem; line-height: 1.35; }
.caca-sparkle-one { z-index: 8; }
.caca-sparkle-two { z-index: 8; bottom: 148px; }

.outlet-section {
    padding: 96px 0 68px;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,127,145,.08), transparent 22rem),
        linear-gradient(180deg, #fffdf9 0%, #fff6eb 100%);
}
.outlet-panel {
    overflow: visible;
    padding: clamp(2rem, 4vw, 3rem);
    color: var(--cute-choco);
    border: 5px solid #f7c889;
    border-radius: 54px 46px 58px 48px;
    background:
        radial-gradient(circle at 9% 22%, #875139 0 7px, transparent 8px),
        radial-gradient(circle at 27% 78%, #a35d39 0 6px, transparent 7px),
        radial-gradient(circle at 76% 24%, #8b5036 0 8px, transparent 9px),
        radial-gradient(circle at 91% 70%, #9b5a37 0 5px, transparent 6px),
        radial-gradient(circle at 52% 47%, rgba(255,255,255,.18) 0 6px, transparent 7px),
        linear-gradient(145deg, #f6c98e 0%, #e9ad69 58%, #de9857 100%);
    box-shadow: inset 0 5px 0 rgba(255,255,255,.44), inset 0 -8px 0 rgba(157,85,47,.10), var(--cute-shadow);
}
.outlet-panel::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -17px 28px auto;
    height: 38px;
    border: 4px solid #fff;
    border-bottom: 0;
    border-radius: 26px 26px 8px 8px;
    background:
        radial-gradient(circle at 18px 34px, #fff 0 17px, transparent 18px) 0 0 / 36px 38px repeat-x,
        linear-gradient(180deg, #fff7fb, #ffd8e1);
    box-shadow: 0 -6px 0 rgba(255,127,145,.10);
    opacity: 1;
    transform: none;
    pointer-events: none;
}
.outlet-panel::after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 76px;
    height: 76px;
    right: 30px;
    top: -42px;
    border: 4px solid #f8cf99;
    border-radius: 50%;
    background:
        radial-gradient(circle at 25% 31%, #77432f 0 5px, transparent 6px),
        radial-gradient(circle at 67% 24%, #8d5035 0 4px, transparent 5px),
        radial-gradient(circle at 64% 69%, #7b4631 0 6px, transparent 7px),
        #edb772;
    box-shadow: inset 0 4px 0 rgba(255,255,255,.34), 0 8px 0 rgba(117,64,40,.12), 0 14px 25px rgba(91,47,34,.14);
    transform: rotate(12deg);
}
.outlet-panel > * { position: relative; z-index: 2; }
.outlet-panel h2 { color: var(--cute-choco); }
.outlet-panel > .row > div:first-child > p { color: #704737; font-weight: 700; }
.outlet-panel .section-kicker {
    color: var(--cute-strawberry-dark);
    border-color: rgba(255,255,255,.78);
    background: rgba(255,250,243,.75);
}
.service-note {
    color: #694331;
    border: 2px dashed rgba(119,67,43,.25);
    border-radius: 20px;
    background: rgba(255,250,243,.68);
    font-weight: 700;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.5);
}
.service-note i { color: var(--cute-strawberry-dark); }
.outlet-search-card {
    position: relative;
    padding: 1.25rem;
    border: 4px solid #fff;
    border-radius: 32px 38px 30px 36px;
    background:
        radial-gradient(circle at 15px 15px, rgba(255,255,255,.95) 0 5px, transparent 6px) 0 0 / 30px 30px,
        linear-gradient(150deg, #fff8fb, #ffe1e8);
    box-shadow: inset 0 4px 0 rgba(255,255,255,.9), 0 9px 0 rgba(183,89,106,.13), 0 23px 45px rgba(91,47,34,.16);
}
.outlet-search-card::before {
    content: "♡";
    position: absolute;
    top: -18px;
    left: 24px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--cute-strawberry);
    font-size: 1.25rem;
    font-weight: 900;
    box-shadow: 0 7px 0 rgba(112,60,40,.12);
    transform: rotate(-9deg);
}
.outlet-search-wrap .form-control,
.search-box .form-control,
.search-box .input-group-text {
    min-height: 56px;
    border-width: 2px;
    border-color: #f0c9ac;
    background: #fffdf9;
}
.outlet-search-wrap .form-control { border-radius: 20px; }
.outlet-search-wrap > i { color: var(--cute-strawberry-dark); }
.selected-outlet-card {
    border: 3px solid #fff;
    border-radius: 24px;
    background: linear-gradient(145deg, #dff8f5, #bfece8);
    box-shadow: 0 7px 0 rgba(71,151,146,.12);
}
.selected-outlet-icon {
    border: 2px solid #fff;
    border-radius: 16px;
    background: var(--cute-mint-dark);
}
.selected-outlet-card .btn {
    border: 2px solid #784a39;
    border-radius: 14px;
    background: #fffaf3;
    font-weight: 900;
}
.outlet-results { border-width: 3px; border-color: #ffd3dc; border-radius: 23px; }
.outlet-result { border-width: 2px; border-radius: 20px; }
.outlet-result:hover { transform: translateX(3px); }

.menu-section {
    padding: 88px 0 110px;
    background:
        radial-gradient(circle at 8% 16%, rgba(255,127,145,.10), transparent 20rem),
        radial-gradient(circle at 92% 82%, rgba(174,233,228,.15), transparent 24rem),
        linear-gradient(180deg, #fff7ec 0%, #fffdf9 45%, #fff3e8 100%);
}
.menu-heading h2 { text-wrap: balance; }
.search-box {
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 23px;
    box-shadow: 0 7px 0 rgba(255,127,145,.11), 0 14px 30px rgba(91,47,34,.08);
}
.search-box .input-group-text { border-radius: 0; }
.search-box .form-control { border-radius: 0; }
.category-scroller { gap: .8rem; padding-top: .5rem; }
.category-pill {
    min-height: 44px;
    padding: .7rem 1.05rem;
    border: 2px solid #f2c79a;
    border-radius: 18px 18px 16px 16px;
    background: linear-gradient(180deg, #fffdf8, #ffeddb);
    box-shadow: inset 0 3px 0 #fff, 0 5px 0 rgba(120,69,45,.10);
}
.category-pill:nth-child(3n+2) { border-color: #ffb9c5; background: linear-gradient(180deg, #fff7fa, #ffdce4); }
.category-pill:nth-child(3n+3) { border-color: #9edfd9; background: linear-gradient(180deg, #f4fffd, #ccefeb); }
.category-pill:hover,
.category-pill.active {
    color: #fff;
    border-color: #ff9cad;
    background: linear-gradient(180deg, #ff9cad, #ff7188);
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 rgba(124,60,42,.13), 0 13px 20px rgba(91,47,34,.10);
}

#menuGrid { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.35rem; }
.menu-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 36px 30px 40px 32px;
    background: #fff8ef;
    box-shadow: 0 8px 0 rgba(255,127,145,.10), 0 18px 38px rgba(91,47,34,.11);
}
.menu-card::before {
    content: "";
    position: absolute;
    z-index: 5;
    width: 56px;
    height: 56px;
    top: -18px;
    right: -16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 32%, #fff 0 4px, transparent 5px),
        linear-gradient(145deg, #ffd8e1, #ff8fa0);
    box-shadow: 0 0 0 4px #fff, 0 7px 15px rgba(91,47,34,.12);
    transform: rotate(11deg);
}
.menu-card::after {
    content: "✦";
    position: absolute;
    z-index: 6;
    top: 9px;
    right: 11px;
    color: #fff;
    font-size: 1rem;
    pointer-events: none;
}
.menu-card:hover {
    transform: translateY(-8px) rotate(-.45deg);
    border-color: #fff;
    box-shadow: 0 10px 0 rgba(255,127,145,.14), 0 28px 54px rgba(91,47,34,.16);
}
.menu-card-image {
    height: 205px;
    aspect-ratio: auto;
    padding: .75rem .75rem 1rem;
    overflow: hidden;
    border-bottom: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.95) 0 4px, transparent 5px),
        radial-gradient(circle at 83% 74%, rgba(255,255,255,.75) 0 5px, transparent 6px),
        linear-gradient(145deg, #ffe9ef, #fff0db 62%, #dff7f4);
}
.menu-card-image::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 24px;
    background: radial-gradient(circle at 12px 0, transparent 0 11px, #fff8ef 12px) 0 0 / 24px 24px repeat-x;
}
.menu-card-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: .2rem;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 10px 10px rgba(91,47,34,.10));
    transform: none;
}
.menu-card:hover .menu-card-image img { transform: scale(1.025) rotate(.5deg); }
.menu-badge {
    z-index: 7;
    top: 12px;
    left: 12px;
    padding: .42rem .68rem;
    border: 2px solid #fff;
    border-radius: 15px;
    background: linear-gradient(180deg, #ff9dad, #ff7188);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.38), 0 5px 0 rgba(118,59,40,.12);
}
.menu-card-body {
    min-height: 194px;
    padding: 1rem 1.05rem 1.1rem;
    background:
        radial-gradient(circle at 90% 88%, rgba(255,216,225,.55), transparent 42px),
        #fff8ef;
}
.menu-category {
    display: inline-flex;
    width: fit-content;
    padding: .27rem .52rem;
    border-radius: 999px;
    color: #b84e62;
    background: #ffe2e8;
    letter-spacing: .09em;
}
.menu-card h3 { margin-top: .55rem; font-size: 1.04rem; }
.menu-card-description { color: #846454; }
.menu-add {
    width: 42px;
    height: 42px;
    border: 3px solid #fff;
    border-radius: 16px 18px 15px 17px;
    background: linear-gradient(180deg, #ff9cad, #ff7188);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.38), 0 5px 0 rgba(119,58,41,.14), 0 10px 18px rgba(91,47,34,.10);
    transition: transform .14s ease, box-shadow .14s ease;
}
.menu-add:hover { transform: translateY(-2px) rotate(4deg); background: linear-gradient(180deg, #ff9cad, #ff7188); }
.menu-add:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 rgba(119,58,41,.14); }

.feature-section {
    padding: 100px 0;
    border-top: 5px solid #ffd6df;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,127,145,.19), transparent 24%),
        radial-gradient(circle at 86% 84%, rgba(174,233,228,.30), transparent 28%),
        linear-gradient(145deg, #fff0e4, #fffaf3);
}
.feature-card {
    border: 4px solid #fff;
    border-radius: 36px 30px 38px 32px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 0 rgba(255,127,145,.09), 0 20px 38px rgba(91,47,34,.10);
}
.feature-card::after {
    content: "";
    position: absolute;
    width: 68px;
    height: 68px;
    right: -20px;
    bottom: -24px;
    border-radius: 50%;
    background: rgba(255,216,225,.58);
}
.feature-card > i {
    border: 3px solid #fff;
    border-radius: 19px;
    box-shadow: 0 6px 0 rgba(105,56,39,.12);
}
.feature-card:nth-child(2n) > i { background: var(--cute-mint-dark); }
.feature-card h3 { font-family: "Fredoka", "Nunito", sans-serif; }
.step-number { color: rgba(255,127,145,.16); }

.coffee-footer {
    padding: 42px 0;
    color: #f7dacc;
    border-top: 7px solid #ff8fa0;
    background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,.06) 0 3px, transparent 4px) 0 0 / 28px 28px,
        #51291f;
}
.footer-brand img {
    width: 76px;
    height: 68px;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    filter: drop-shadow(0 7px 8px rgba(0,0,0,.18));
}
.footer-link {
    display: inline-flex;
    align-items: center;
    padding: .55rem .8rem;
    border: 2px solid rgba(255,255,255,.19);
    border-radius: 16px;
    color: #ffe1a3;
    background: rgba(255,255,255,.06);
}

.product-modal-content,
.checkout-modal,
.order-guide-modal-content,
.wifi-modal-content {
    border: 4px solid #fff;
    border-radius: 38px 32px 40px 34px;
    box-shadow: 0 10px 0 rgba(255,127,145,.10), 0 40px 100px rgba(91,47,34,.28);
}
.option-group,
.cart-item,
.cart-summary-panel,
.order-guide-message,
.wifi-password-box { border-width: 2px; border-radius: 22px; }
.scroll-top-button { border-width: 3px; border-radius: 18px; }

@media (min-width: 1200px) {
    #menuGrid > .col-xl-3 { width: 25%; }
    .menu-card-image { height: 220px; }
}

@media (max-width: 991.98px) {
    .coffee-navbar { min-height: 78px; }
    .brand-logo-shell { width: 58px; height: 53px; }
    .hero-section { min-height: auto; padding-top: 138px; }
    .hero-cup-card { min-height: 520px; max-width: 590px; margin-inline: auto; }
    .outlet-panel { padding-top: 2.35rem; }
}

@media (max-width: 767.98px) {
    .coffee-navbar { min-height: 72px; }
    .brand-logo-shell { width: 48px; height: 46px; }
    .hero-section { padding: 116px 0 66px; }
    .hero-actions .btn { min-height: 52px; border-radius: 18px; }
    .hero-cup-card { min-height: 470px; border-radius: 38px 34px 42px 36px; }
    .caca-hero-logo { width: calc(100% - 28px); height: calc(100% - 174px); top: 44px; }
    .hero-card-copy { left: 16px; right: 16px; bottom: 16px; min-height: 102px; border-radius: 23px; }
    .outlet-section { padding-top: 76px; }
    .outlet-panel { border-width: 4px; border-radius: 38px 32px 42px 34px; }
    .outlet-panel::before { inset-inline: 22px; }
    .outlet-panel::after { width: 62px; height: 62px; right: 18px; top: -34px; }
    .outlet-search-card { border-radius: 27px; }
    #menuGrid { --bs-gutter-x: .82rem; --bs-gutter-y: .95rem; }
    .menu-card { border-width: 3px; border-radius: 25px 22px 29px 24px; }
    .menu-card::before { width: 46px; height: 46px; }
    .menu-card::after { top: 7px; right: 8px; font-size: .82rem; }
    .menu-card-image { height: clamp(132px, 38vw, 180px); padding: .5rem .5rem .8rem; }
    .menu-card-body { min-height: 162px; padding: .75rem; }
    .menu-card h3 { font-size: .84rem; }
    .menu-add { width: 34px; height: 34px; border-radius: 13px; }
    .feature-card { border-radius: 28px 24px 30px 26px; }
    .footer-brand img { width: 62px; height: 56px; }
}

@media (max-width: 575.98px) {
    .hero-cup-card { min-height: 440px; }
    .caca-hero-logo { height: calc(100% - 168px); top: 40px; }
    .hero-card-copy strong { font-size: .96rem; }
    .outlet-panel { padding: 1.25rem 1rem 1rem; }
    .outlet-panel::before { inset-inline: 16px; }
    .outlet-search-card::before { width: 36px; height: 36px; top: -16px; }
    .menu-card-body { min-height: 156px; }
}

/* Hero video and product image background refinement */
.caca-hero-video {
    position: absolute;
    z-index: 4;
    width: calc(100% - 34px);
    height: clamp(270px, 22vw, 310px);
    left: 50%;
    top: 70px;
    display: block;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.96);
    border-radius: 30px 34px 28px 36px;
    background: #f8f4ec;
    box-shadow:
        inset 0 0 0 1px rgba(126,72,49,.06),
        0 10px 0 rgba(255,127,145,.10),
        0 24px 38px rgba(91,47,34,.16);
    object-fit: cover;
    object-position: center;
    transform: translateX(-50%) rotate(-.7deg);
    animation: cacaHeroVideoFloat 4.8s ease-in-out infinite;
}

.caca-hero-video::-webkit-media-controls,
.caca-hero-video::-webkit-media-controls-enclosure,
.caca-hero-video::-webkit-media-controls-panel,
.caca-hero-video::-webkit-media-controls-play-button,
.caca-hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

@keyframes cacaHeroVideoFloat {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-.7deg); }
    50% { transform: translateX(-50%) translateY(-7px) rotate(.35deg); }
}

.menu-card-image {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(122,72,48,.055);
}

@media (prefers-reduced-motion: reduce) {
    .caca-hero-video { animation: none; }
}

@media (max-width: 991.98px) {
    .caca-hero-video {
        width: calc(100% - 38px);
        height: 272px;
        top: 70px;
        border-radius: 28px 32px 26px 34px;
    }
}

@media (max-width: 767.98px) {
    .caca-hero-video {
        width: calc(100% - 26px);
        height: 238px;
        top: 66px;
        border-width: 3px;
        border-radius: 24px 27px 22px 29px;
    }
}

@media (max-width: 575.98px) {
    .caca-hero-video {
        width: calc(100% - 22px);
        height: 220px;
        top: 62px;
    }
}

/* Caca readability patch v2.2 */
:root {
    --caca-muted: #68402f;
    --kk-gray: #68402f;
    --kk-gray-soft: #8a5e49;
    --muted: #68402f;
    --bs-secondary-color: #68402f;
    --bs-secondary-color-rgb: 104, 64, 47;
}

body.caca-theme .hero-copy,
body.caca-theme .meta-card,
body.caca-theme .menu-heading p,
body.caca-theme .menu-state,
body.caca-theme .menu-card-description,
body.caca-theme .outlet-result .outlet-address,
body.caca-theme .outlet-result .outlet-hours,
body.caca-theme .outlet-empty,
body.caca-theme .selected-outlet-card span,
body.caca-theme .feature-card p,
body.caca-theme .product-modal-media-caption,
body.caca-theme .modal-description,
body.caca-theme .option-group-title small,
body.caca-theme .product-options-grid .option-group-title small,
body.caca-theme .cart-item-options,
body.caca-theme .empty-cart,
body.caca-theme .checkout-outlet-summary span,
body.caca-theme .cart-summary-panel small,
body.caca-theme #checkoutHint,
body.caca-theme .text-muted,
body.caca-theme .text-secondary {
    color: #68402f !important;
}

body.caca-theme .hero-copy,
body.caca-theme .menu-heading p,
body.caca-theme .menu-card-description,
body.caca-theme .feature-card p,
body.caca-theme .modal-description {
    font-weight: 650;
}

body.caca-theme .old-price {
    color: #8a5e49;
}

body.caca-theme .option-price {
    color: #7f4a36;
    opacity: 1;
}

body.caca-theme .outlet-status.closed {
    color: #a14d58;
}

body.caca-theme .empty-cart i {
    color: #df6d80;
}

body.caca-theme .form-control::placeholder,
body.caca-theme textarea::placeholder {
    color: #8a5e49;
    opacity: 1;
}

body.caca-theme .category-pill:hover,
body.caca-theme .category-pill.active {
    color: #5b2f22 !important;
    border-color: #e8ae4f !important;
    background: linear-gradient(180deg, #fff0b7 0%, #ffd97d 100%) !important;
    text-shadow: none;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.72), 0 6px 0 rgba(124,60,42,.13), 0 13px 20px rgba(91,47,34,.10);
}

body.caca-theme .category-pill:hover i,
body.caca-theme .category-pill.active i {
    color: #b85b3f;
}

body.caca-theme .menu-card-image {
    background: #ffffffff !important;
    background-color: #ffffffff !important;
}

body.caca-theme .hero-card-copy span {
    align-self: flex-start;
    padding: .3rem .58rem;
    color: #b84e62;
    border: 1px solid #ffc5d0;
    border-radius: 999px;
    background: #fff0f4;
    text-shadow: none;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.82);
}

body.caca-theme .cart-summary-panel {
    color: #5b2f22;
}

body.caca-theme .cart-summary-panel > div strong {
    color: #b84e62;
}

body.caca-theme .wifi-date,
body.caca-theme .wifi-password-box small,
body.caca-theme .wifi-note {
    color: #68402f;
}


/* Caca product cutout patch v2.4 */
body.caca-theme .menu-card-image,
body.caca-theme .product-modal-image-frame,
body.caca-theme .cart-item img {
    background: #ffffffff !important;
    background-color: #ffffffff !important;
}

body.caca-theme .menu-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

body.caca-theme .menu-card-image img,
body.caca-theme #productModalImage,
body.caca-theme .cart-item img {
    image-rendering: auto;
    transform-origin: center bottom;
}

body.caca-theme .menu-card-image img.caca-cutout-loading,
body.caca-theme #productModalImage.caca-cutout-loading,
body.caca-theme .cart-item img.caca-cutout-loading {
    opacity: .96;
}

body.caca-theme .menu-card-image img.caca-cutout-ready,
body.caca-theme #productModalImage.caca-cutout-ready,
body.caca-theme .cart-item img.caca-cutout-ready {
    mix-blend-mode: normal;
    filter: drop-shadow(0 12px 14px rgba(91,47,34,.12));
}

body.caca-theme .product-modal-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.caca-theme .product-modal-media img {
    object-fit: contain;
    object-position: center;
}

body.caca-theme .cart-item img {
    object-fit: contain;
    padding: .18rem;
}

/* Caca multi-store patch v3.0 */
:root {
    --store-primary: #ff7f91;
    --store-secondary: #5b2f22;
}

body.caca-theme .btn-coffee,
body.caca-theme .cart-button,
body.caca-theme .menu-add {
    background: linear-gradient(180deg, color-mix(in srgb, var(--store-primary) 78%, white), var(--store-primary));
    border-color: var(--store-primary);
}

body.caca-theme .section-kicker,
body.caca-theme .eyebrow,
body.caca-theme .menu-category {
    color: var(--store-secondary);
}

.current-store-chip {
    min-height: 43px;
    align-items: center;
    gap: .55rem;
    padding: .3rem .7rem .3rem .35rem;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    color: #5b2f22;
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 0 rgba(91,47,34,.12);
    font-family: inherit;
}
.current-store-chip img { width: 34px; height: 34px; padding: 2px; border-radius: 50%; object-fit: contain; background: #fff; }
.current-store-chip span { display: grid; line-height: 1.05; text-align: left; }
.current-store-chip small { color: #8a5e49; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.current-store-chip strong { max-width: 145px; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.current-store-chip i { font-size: .72rem; }

.btn-change-store {
    border: 3px solid #fff;
    border-radius: 18px 22px 17px 21px;
    color: #fff;
    background: linear-gradient(180deg, #77d8d0, #42bdb3);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.36), 0 6px 0 rgba(91,47,34,.14), 0 14px 22px rgba(91,47,34,.1);
    font-weight: 900;
}
.btn-change-store:hover,
.btn-change-store:focus { color: #fff; background: linear-gradient(180deg, #86e1d9, #42bdb3); transform: translateY(-2px); }

.store-selector-modal { --bs-modal-zindex: 1090; }
.store-selector-content {
    position: relative;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 38px;
    background:
        radial-gradient(circle at 8% 10%, rgba(255,255,255,.95) 0 6px, transparent 7px),
        radial-gradient(circle at 92% 18%, rgba(255,255,255,.78) 0 5px, transparent 6px),
        linear-gradient(145deg, #fff7ee, #ffe7ed 52%, #e8faf7);
    box-shadow: 0 18px 0 rgba(255,127,145,.14), 0 45px 100px rgba(91,47,34,.28);
}
.store-selector-content::before,
.store-selector-content::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, #c58458 0 7px, #e6b77b 8px 24px);
    opacity: .25;
}
.store-selector-content::before { top: -62px; left: -48px; transform: rotate(18deg); }
.store-selector-content::after { right: -52px; bottom: -64px; transform: rotate(-17deg); }
.store-selector-close { position: absolute; z-index: 5; top: 20px; right: 20px; padding: .75rem; border-radius: 50%; background-color: #fff; box-shadow: 0 5px 0 rgba(91,47,34,.12); }
.store-selector-head { position: relative; z-index: 1; padding: 2.6rem 2.5rem 1.25rem; text-align: center; }
.store-selector-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border: 2px solid #fff; border-radius: 999px; color: #b84e62; background: #ffe4ea; box-shadow: 0 5px 0 rgba(91,47,34,.08); font-size: .74rem; font-weight: 1000; letter-spacing: .11em; }
.store-selector-head h2 { margin: .9rem 0 .45rem; color: #5b2f22; font-family: Fredoka, Nunito, sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -.04em; }
.store-selector-head p { max-width: 700px; margin: 0 auto; color: #68402f; font-weight: 700; }
.store-selector-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; max-height: min(58vh, 620px); overflow: auto; padding: 1rem 2.2rem 2rem; }
.store-choice-card {
    --choice-primary: #ff7f91;
    position: relative;
    display: flex;
    min-height: 330px;
    flex-direction: column;
    align-items: center;
    padding: 1.15rem;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 30px 34px 27px 36px;
    color: #5b2f22;
    text-decoration: none;
    background: #fffaf4;
    box-shadow: 0 9px 0 color-mix(in srgb, var(--choice-primary) 22%, transparent), 0 24px 35px rgba(91,47,34,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.store-choice-card::after { content: "✦"; position: absolute; top: 12px; right: 15px; color: var(--choice-primary); font-size: 1.3rem; }
.store-choice-card:hover { color: #5b2f22; transform: translateY(-8px) rotate(-.45deg); box-shadow: 0 12px 0 color-mix(in srgb, var(--choice-primary) 24%, transparent), 0 32px 48px rgba(91,47,34,.18); }
.store-choice-card.is-current { outline: 4px solid color-mix(in srgb, var(--choice-primary) 70%, white); }
.store-choice-badge { align-self: flex-start; padding: .36rem .68rem; border-radius: 999px; color: #fff; background: var(--choice-primary); font-size: .68rem; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.store-choice-logo { display: grid; width: 138px; height: 138px; margin: .7rem 0; place-items: center; border: 4px solid #fff; border-radius: 38% 44% 40% 46%; background: linear-gradient(145deg, #fff, #fff5ef); box-shadow: 0 8px 0 rgba(91,47,34,.08); }
.store-choice-logo img { width: 88%; height: 88%; object-fit: contain; }
.store-choice-copy { display: grid; width: 100%; gap: .3rem; text-align: center; }
.store-choice-copy strong { font-family: Fredoka, Nunito, sans-serif; font-size: 1.2rem; }
.store-choice-copy small { color: #b84e62; font-weight: 900; }
.store-choice-copy span { color: #68402f; font-size: .82rem; font-weight: 700; line-height: 1.45; }
.store-choice-action { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding: .65rem 1rem; border-radius: 999px; color: #fff; background: var(--choice-primary); font-weight: 1000; }
.store-selector-foot { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: .45rem; padding: .9rem 1.5rem 1.4rem; color: #68402f; font-size: .8rem; font-weight: 800; text-align: center; }

@media (max-width: 991.98px) {
    .store-selector-content { min-height: 100dvh; border: 0; border-radius: 0; }
    .store-selector-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: none; }
}
@media (max-width: 575.98px) {
    .store-selector-head { padding: 2.8rem 1rem 1rem; }
    .store-selector-head h2 { font-size: 2rem; }
    .store-selector-grid { grid-template-columns: 1fr; padding: .8rem 1rem 1.5rem; }
    .store-choice-card { min-height: 270px; }
    .store-choice-logo { width: 112px; height: 112px; }
    .hero-actions .btn { width: 100%; justify-content: center; }
}

/* Caca store selector and order queue patch v3.1 */
.store-selector-modal .modal-dialog {
    width: min(1180px, calc(100vw - 1.25rem));
    max-width: 1180px;
    height: calc(100dvh - 1.25rem);
    margin: .625rem auto;
}

.store-selector-content {
    display: flex;
    max-height: 100%;
    flex-direction: column;
}

.store-selector-head {
    flex: 0 0 auto;
    padding: 1.45rem 2rem .65rem;
}

.store-selector-head h2 {
    margin: .55rem 0 .25rem;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}

.store-selector-head p {
    max-width: 760px;
    font-size: .9rem;
    line-height: 1.4;
}

.store-selector-body {
    position: relative;
    z-index: 1;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .15rem 1.65rem .85rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(184,78,98,.45) transparent;
}

.store-selector-body::-webkit-scrollbar { width: 8px; }
.store-selector-body::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(184,78,98,.38); }

.store-choice-group + .store-choice-group { margin-top: .45rem; }

.store-choice-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .15rem 0 .65rem;
    color: #7a4835;
    font-size: .75rem;
    font-weight: 1000;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.store-choice-divider::before,
.store-choice-divider::after {
    content: "";
    height: 2px;
    flex: 1 1 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(184,78,98,.35), rgba(66,189,179,.35), transparent);
}

.store-choice-divider span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .32rem .72rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff7ef;
    box-shadow: 0 4px 0 rgba(91,47,34,.07);
}

.store-choice-group-food .store-choice-divider span {
    color: #7b4a20;
    background: #fff0c9;
}

.store-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 225px));
    justify-content: center;
    gap: .8rem;
    max-height: none;
    overflow: visible;
    padding: 0 .15rem .55rem;
}

.store-choice-card {
    min-height: 205px;
    padding: .72rem;
    border-width: 3px;
    border-radius: 24px 28px 22px 30px;
    box-shadow: 0 7px 0 color-mix(in srgb, var(--choice-primary) 22%, transparent), 0 16px 25px rgba(91,47,34,.1);
}

.store-choice-card:hover {
    transform: translateY(-4px) rotate(-.25deg);
    box-shadow: 0 9px 0 color-mix(in srgb, var(--choice-primary) 24%, transparent), 0 22px 32px rgba(91,47,34,.15);
}

.store-choice-badge {
    padding: .25rem .52rem;
    font-size: .57rem;
}

.store-choice-logo {
    width: 84px;
    height: 84px;
    margin: .35rem 0;
    border-width: 3px;
    border-radius: 31% 39% 34% 42%;
    box-shadow: 0 5px 0 rgba(91,47,34,.07);
}

.store-choice-copy { gap: .12rem; }
.store-choice-copy strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .94rem;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.store-choice-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.store-choice-copy span {
    display: -webkit-box;
    overflow: hidden;
    font-size: .64rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.store-choice-action {
    margin-top: .45rem;
    padding: .38rem .72rem;
    font-size: .68rem;
}

.store-selector-foot {
    flex: 0 0 auto;
    padding: .55rem 1.25rem .85rem;
    font-size: .7rem;
}

@media (min-width: 992px) and (max-height: 760px) {
    .store-selector-head { padding-top: .85rem; }
    .store-selector-kicker { padding: .28rem .65rem; font-size: .64rem; }
    .store-selector-head h2 { margin-top: .35rem; font-size: 1.75rem; }
    .store-selector-head p { font-size: .78rem; }
    .store-choice-card { min-height: 178px; }
    .store-choice-logo { width: 68px; height: 68px; }
    .store-choice-copy span { display: none; }
    .store-selector-foot { padding-block: .4rem .6rem; }
}

@media (max-width: 991.98px) {
    .store-selector-modal .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100dvh;
        margin: 0;
    }
    .store-selector-content { min-height: 100dvh; max-height: 100dvh; }
    .store-selector-head { padding: 1.45rem 1rem .45rem; }
    .store-selector-head h2 { font-size: clamp(1.55rem, 5vw, 2.15rem); }
    .store-selector-head p { font-size: .78rem; }
    .store-selector-body { padding: .1rem .8rem .8rem; }
    .store-selector-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .58rem; }
    .store-choice-card { min-height: 164px; }
    .store-choice-copy small,
    .store-choice-copy span { display: none; }
}

@media (max-width: 575.98px) {
    .store-selector-close { top: 10px; right: 10px; padding: .58rem; }
    .store-selector-head { padding: 1.1rem .8rem .35rem; }
    .store-selector-kicker { padding: .26rem .58rem; font-size: .58rem; }
    .store-selector-head h2 { margin: .38rem 2rem .12rem; font-size: 1.42rem; }
    .store-selector-head p {
        max-width: 315px;
        font-size: .68rem;
        line-height: 1.25;
    }
    .store-selector-body { padding: 0 .55rem .55rem; }
    .store-choice-group + .store-choice-group { margin-top: .18rem; }
    .store-choice-divider { gap: .35rem; margin: .1rem 0 .4rem; font-size: .58rem; }
    .store-choice-divider span { gap: .28rem; padding: .2rem .48rem; border-width: 1px; }
    .store-selector-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: .48rem;
        padding-bottom: .38rem;
    }
    .store-choice-card {
        min-width: 0;
        min-height: 142px;
        padding: .42rem .3rem .45rem;
        border-width: 2px;
        border-radius: 17px 20px 16px 22px;
        box-shadow: 0 4px 0 color-mix(in srgb, var(--choice-primary) 20%, transparent), 0 9px 14px rgba(91,47,34,.08);
    }
    .store-choice-card::after { top: 5px; right: 7px; font-size: .7rem; }
    .store-choice-badge {
        max-width: 100%;
        padding: .16rem .34rem;
        overflow: hidden;
        font-size: .46rem;
        letter-spacing: .045em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .store-choice-logo {
        width: 58px;
        height: 58px;
        margin: .22rem 0;
        border-width: 2px;
        border-radius: 28% 37% 31% 40%;
        box-shadow: 0 3px 0 rgba(91,47,34,.06);
    }
    .store-choice-copy strong {
        font-size: .69rem;
        line-height: 1.08;
    }
    .store-choice-action {
        gap: .18rem;
        margin-top: auto;
        padding: .22rem .42rem;
        font-size: .52rem;
    }
    .store-choice-action i { font-size: .52rem; }
    .store-selector-foot { display: none; }
}

@media (max-width: 360px) {
    .store-selector-grid { gap: .34rem; }
    .store-choice-card { min-height: 134px; }
    .store-choice-logo { width: 52px; height: 52px; }
}

@media (min-width: 992px) {
    .store-selector-content.is-minimal-copy .store-choice-card { min-height: 176px; }
    .store-selector-content.is-minimal-copy .store-choice-logo { width: 92px; height: 92px; }
    .store-selector-content.is-minimal-copy .store-choice-action { margin-top: .3rem; }
}
