:root {
    --caca-ink: #5a2d1c;
    --caca-ink-deep: #3f1d13;
    --caca-brown: #8e4f32;
    --caca-caramel: #c98958;
    --caca-coral: #ef6f74;
    --caca-coral-dark: #d95761;
    --caca-pink: #ffd6d4;
    --caca-peach: #f8cfaa;
    --caca-cream: #fff8ef;
    --caca-cream-deep: #f9eadb;
    --caca-aqua: #8bd7df;
    --caca-aqua-deep: #4daeb9;
    --caca-yellow: #f6bc62;
    --caca-paper: #fffdf9;
    --caca-border: #efd7c4;
    --caca-muted: #8a6c5c;
    --caca-shadow: 0 22px 58px rgba(91, 45, 28, .13);

    --kk-black: var(--caca-ink);
    --kk-charcoal: var(--caca-ink-deep);
    --kk-gray: var(--caca-muted);
    --kk-gray-soft: #c6aa9a;
    --kk-surface: var(--caca-cream-deep);
    --kk-red-dark: var(--caca-coral-dark);
    --kk-red: var(--caca-coral);
    --kk-red-soft: #f49a9e;
    --kk-red-pale: #ffe6e4;
    --kk-green-dark: #3f8f98;
    --kk-green: var(--caca-aqua-deep);
    --kk-green-soft: var(--caca-aqua);
    --kk-green-pale: #e6f8fa;
    --kk-gold-dark: #a4662d;
    --kk-gold: var(--caca-yellow);
    --kk-gold-soft: #ffd891;
    --kk-cream: var(--caca-cream);
    --kk-cream-deep: var(--caca-cream-deep);
    --paper: var(--caca-paper);
    --border: var(--caca-border);
    --muted: var(--caca-muted);
    --shadow: var(--caca-shadow);
}

html { background: var(--caca-cream); }
body {
    color: var(--caca-ink);
    background:
        radial-gradient(circle at 8% 12%, rgba(239,111,116,.09), transparent 24rem),
        radial-gradient(circle at 92% 24%, rgba(139,215,223,.10), transparent 25rem),
        var(--caca-paper);
    font-family: "Nunito", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection { color: #fff; background: var(--caca-coral); }

.coffee-navbar {
    min-height: 84px;
    color: var(--caca-ink);
    background: rgba(255,248,239,.93);
    border-bottom: 1px solid rgba(142,79,50,.13);
    box-shadow: 0 10px 32px rgba(91,45,28,.08);
}
.coffee-navbar.navbar-dark .navbar-brand { color: var(--caca-ink); }
.coffee-navbar .navbar-brand { min-width: 0; }
.brand-logo-shell {
    width: 68px;
    height: 58px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 20px;
    background: var(--caca-cream);
    box-shadow: 0 9px 22px rgba(91,45,28,.14), 0 0 0 1px rgba(239,111,116,.18);
    transform: rotate(-2deg);
}
.brand-logo-shell img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { color: var(--caca-ink-deep); font-size: 1rem; font-weight: 900; letter-spacing: -.02em; }
.brand-mini { color: var(--caca-coral-dark); font-size: .55rem; font-weight: 900; letter-spacing: .13em; }
.nav-outlet-button {
    color: var(--caca-ink);
    border: 1px solid rgba(239,111,116,.3);
    background: #fff;
    box-shadow: 0 8px 20px rgba(91,45,28,.06);
}
.nav-outlet-button i { color: var(--caca-coral); }
.nav-outlet-button:hover { color: var(--caca-ink-deep); border-color: var(--caca-coral); background: var(--kk-red-pale); }
.nav-outlet-button.is-disabled { opacity: .62; }
.wifi-nav-button {
    color: var(--caca-ink) !important;
    border-color: rgba(77,174,185,.34) !important;
    background: #fff !important;
    border-radius: 999px;
    font-weight: 800;
}
.wifi-nav-button:hover { background: var(--kk-green-pale) !important; border-color: var(--caca-aqua-deep) !important; }
.wifi-mobile-button {
    color: var(--caca-aqua-deep);
    border-color: rgba(77,174,185,.3);
    background: #fff;
    box-shadow: 0 7px 18px rgba(91,45,28,.08);
}
.cart-button {
    color: #fff;
    background: linear-gradient(145deg, var(--caca-coral), var(--caca-coral-dark));
    box-shadow: 0 11px 25px rgba(217,87,97,.25);
}
.cart-button:hover { color: #fff; background: var(--caca-coral-dark); }
.cart-count { color: var(--caca-ink-deep); background: #fff; }
.service-closed-banner { top: 84px; background: var(--caca-ink-deep); }

.hero-section {
    min-height: 730px;
    padding: 165px 0 92px;
    background:
        radial-gradient(circle at 89% 22%, rgba(139,215,223,.38), transparent 23%),
        radial-gradient(circle at 10% 76%, rgba(239,111,116,.16), transparent 26%),
        linear-gradient(145deg, #fffdf9 0%, #fff3e8 48%, #fbe2cf 100%);
}
.hero-section::before {
    opacity: .5;
    background-image:
        radial-gradient(circle, rgba(239,111,116,.22) 1.5px, transparent 1.7px),
        radial-gradient(circle, rgba(91,45,28,.11) 1px, transparent 1.2px);
    background-position: 0 0, 13px 13px;
    background-size: 26px 26px;
    mask-image: linear-gradient(to right, #000 0%, transparent 77%);
}
.hero-shape-red { width: 280px; height: 280px; right: -92px; top: 132px; background: var(--caca-pink); opacity: .9; }
.hero-shape-green { width: 160px; height: 160px; right: 23%; bottom: -85px; background: var(--caca-aqua); opacity: .82; }
.eyebrow, .section-kicker { color: var(--caca-coral-dark); font-weight: 1000; }
.hero-section h1 {
    color: var(--caca-ink-deep);
    font-weight: 1000;
    letter-spacing: -.055em;
    text-wrap: balance;
}
.hero-copy { color: #795b4b; font-weight: 600; }
.btn-coffee {
    color: #fff;
    border-color: var(--caca-coral);
    border-radius: 17px;
    background: linear-gradient(145deg, var(--caca-coral), var(--caca-coral-dark));
    box-shadow: 0 14px 30px rgba(217,87,97,.24);
}
.btn-coffee:hover, .btn-coffee:focus { color: #fff; border-color: var(--caca-ink); background: var(--caca-ink); }
.btn-order-guide {
    color: var(--caca-ink-deep);
    border: 1px solid #fff;
    border-radius: 17px;
    background: #fff;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(91,45,28,.1);
}
.btn-order-guide:hover { color: var(--caca-coral-dark); border-color: var(--caca-pink); background: var(--kk-red-pale); }
.hero-actions .btn-outline-dark {
    color: var(--caca-ink);
    border-color: rgba(91,45,28,.22);
    border-radius: 17px;
    background: rgba(255,255,255,.48);
}
.hero-actions .btn-outline-dark:hover { color: #fff; border-color: var(--caca-ink); background: var(--caca-ink); }
.meta-card { color: #745747; font-weight: 800; }
.meta-card i { color: var(--caca-aqua-deep); background: #fff; box-shadow: 0 8px 18px rgba(91,45,28,.08); }

.hero-cup-card {
    min-height: 535px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 46px;
    background:
        radial-gradient(circle at 16% 20%, rgba(255,255,255,.95), transparent 17%),
        linear-gradient(150deg, #ffd9d5 0%, #fff1e5 52%, #dff6f7 100%);
    box-shadow: 0 34px 76px rgba(91,45,28,.2), 0 0 0 1px rgba(239,111,116,.14);
    transform: rotate(1deg);
}
.hero-cup-card::before {
    width: 350px;
    height: 350px;
    top: 74px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 0 0 18px rgba(255,255,255,.2), 0 24px 56px rgba(91,45,28,.12);
}
.hero-cup-card::after { width: 140px; height: 140px; background: var(--caca-aqua); opacity: .72; box-shadow: none; }
.hero-card-badge {
    top: 26px;
    left: 27px;
    padding: .48rem .75rem;
    color: #fff;
    border-radius: 999px;
    background: var(--caca-coral);
    letter-spacing: .12em;
    box-shadow: 0 8px 18px rgba(217,87,97,.22);
}
.caca-hero-logo {
    position: absolute;
    z-index: 4;
    width: min(88%, 440px);
    max-height: 410px;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%) rotate(-1deg);
    object-fit: contain;
    border-radius: 30px;
    filter: drop-shadow(0 24px 24px rgba(91,45,28,.16));
}
.caca-sparkle { position: absolute; z-index: 5; color: var(--caca-coral); animation: cacaFloat 4s ease-in-out infinite; }
.caca-sparkle-one { top: 90px; right: 48px; font-size: 2.2rem; }
.caca-sparkle-two { left: 35px; bottom: 126px; color: var(--caca-aqua-deep); font-size: 1.8rem; animation-delay: -1.5s; }
.hero-card-copy { color: var(--caca-ink); }
.hero-card-copy span { color: var(--caca-coral-dark); font-weight: 900; }
.hero-card-copy strong { color: var(--caca-ink-deep); }
@keyframes cacaFloat { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-10px) rotate(6deg)} }

.outlet-section { padding: 88px 0 58px; background: var(--caca-paper); }
.outlet-panel {
    color: #fff8ef;
    border: 2px solid rgba(255,255,255,.22);
    border-radius: 38px;
    background:
        radial-gradient(circle at 88% 15%, rgba(239,111,116,.42), transparent 27%),
        radial-gradient(circle at 8% 100%, rgba(139,215,223,.25), transparent 35%),
        linear-gradient(135deg, #5a2d1c 0%, #78412b 56%, #4b2619 100%);
    box-shadow: 0 30px 74px rgba(91,45,28,.2);
}
.outlet-panel::before {
    opacity: .11;
    background-image: radial-gradient(circle, #fff 1.2px, transparent 1.4px);
    background-size: 20px 20px;
}
.outlet-panel h2 { font-weight: 1000; }
.outlet-panel > .row > div:first-child > p { color: #f4dcca; }
.outlet-panel .section-kicker, .service-note i { color: #ffd394; }
.service-note { color: #fff1e6; border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.08); }
.outlet-search-card {
    border: 2px solid rgba(255,255,255,.84);
    border-radius: 26px;
    background: rgba(255,250,244,.97);
    box-shadow: 0 23px 48px rgba(47,20,12,.25);
}
.form-control, .form-select {
    color: var(--caca-ink);
    border-color: var(--caca-border);
    border-radius: 15px;
    background-color: #fffdf9;
}
.form-control:focus, .form-select:focus {
    border-color: var(--caca-coral);
    box-shadow: 0 0 0 .22rem rgba(239,111,116,.15);
}
.outlet-results { border-color: var(--caca-border); background: rgba(255,253,249,.98); box-shadow: 0 24px 60px rgba(91,45,28,.2); }
.outlet-result { border-color: #f0ddd0; border-radius: 17px; color: var(--caca-ink); background: #fff; }
.outlet-result:hover { border-color: var(--caca-coral); background: #fff0ed; }
.outlet-status.open { color: #33919c; }
.outlet-status.closed { color: #a57e68; }
.selected-outlet-card { border-color: #a7dde2; border-radius: 18px; background: #e9f8f9; }
.selected-outlet-icon { background: var(--caca-aqua-deep); }
.selected-outlet-card small { color: #347e87; }

.menu-section { background: linear-gradient(180deg, #fffdf9 0%, #fff8f1 100%); }
.menu-heading h2 { color: var(--caca-ink-deep); font-weight: 1000; }
.menu-heading p { color: var(--caca-muted); }
.search-box { filter: drop-shadow(0 8px 15px rgba(91,45,28,.06)); }
.search-box .input-group-text { color: var(--caca-coral); border-color: var(--caca-border); background: #fff; }
.category-pill { color: var(--caca-ink); border-color: var(--caca-border); background: #fff; box-shadow: 0 7px 16px rgba(91,45,28,.04); }
.category-pill:hover, .category-pill.active { color: #fff; border-color: var(--caca-coral); background: var(--caca-coral); }
.menu-card {
    border: 1px solid #f0d9c8;
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(91,45,28,.07);
}
.menu-card:hover { border-color: #efb9aa; box-shadow: 0 24px 50px rgba(91,45,28,.15); }
.menu-card-image { background: linear-gradient(145deg, #fff7ee, #ffe9df); }
.menu-badge { background: var(--caca-coral); box-shadow: 0 7px 16px rgba(217,87,97,.22); }
.menu-category, .modal-category { color: var(--caca-coral-dark); }
.menu-card h3 { color: var(--caca-ink-deep); font-weight: 900; }
.menu-card-description { color: var(--caca-muted); }
.menu-price strong, .price-line strong, .menu-card-footer strong { color: var(--caca-ink-deep); }
.menu-add { background: var(--caca-coral); box-shadow: 0 8px 18px rgba(217,87,97,.23); }
.menu-add:hover { background: var(--caca-ink); }

.feature-section {
    color: var(--caca-ink);
    background:
        radial-gradient(circle at 15% 18%, rgba(239,111,116,.17), transparent 25%),
        radial-gradient(circle at 86% 85%, rgba(139,215,223,.23), transparent 26%),
        linear-gradient(145deg, #fff1e7, #fff9f2);
    border-top: 1px solid #f3dfcf;
}
.feature-heading .section-kicker { color: var(--caca-coral-dark); }
.feature-heading h2 { color: var(--caca-ink-deep); font-weight: 1000; }
.feature-card {
    border: 2px solid #fff;
    border-radius: 28px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 18px 40px rgba(91,45,28,.09);
}
.feature-card > i { color: #fff; background: var(--caca-coral); }
.feature-card:nth-child(2n) > i { background: var(--caca-aqua-deep); }
.feature-card h3 { color: var(--caca-ink-deep); font-weight: 900; }
.feature-card p { color: var(--caca-muted); }
.step-number { color: rgba(239,111,116,.13); }

.coffee-footer { color: #efd8c7; background: var(--caca-ink-deep); border-top: 5px solid var(--caca-coral); }
.coffee-footer strong { color: #fff8ef; }
.footer-brand { display: inline-flex; align-items: center; gap: .75rem; }
.footer-brand img { width: 58px; height: 58px; object-fit: cover; border: 2px solid #fff; border-radius: 17px; }
.footer-link { color: #ffd395; }
.footer-link:hover { color: #fff; }

.product-modal-content, .checkout-modal, .order-guide-modal-content, .wifi-modal-content {
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 30px;
    background: var(--caca-paper);
    box-shadow: 0 40px 110px rgba(91,45,28,.3);
}
.product-modal-media { background: linear-gradient(145deg, #ffe9df, #fff8ef); }
.product-modal-image-frame { border-color: #f0d7c4; background: #fff; }
.product-modal-media-caption { color: var(--caca-muted); }
.product-modal-panel, .product-modal-actions { background: var(--caca-paper); }
.option-group { border-color: #f0d9c8; border-radius: 20px; background: #fff; }
.option-group-title small { color: var(--caca-muted); }
.option-pill label { border-color: var(--caca-border); border-radius: 13px; background: #fff; }
.option-pill input:checked + label { color: var(--caca-ink-deep); border-color: var(--caca-coral); background: var(--kk-red-pale); box-shadow: 0 0 0 3px rgba(239,111,116,.1); }
.quantity-control { border-color: var(--caca-border); background: #fff; }
.quantity-control button, .cart-mini-qty button { color: var(--caca-coral-dark); }
.cart-canvas { background: var(--caca-paper); }
.cart-canvas .offcanvas-header { border-bottom-color: var(--caca-border); background: #fff8ef; }
.cart-outlet-box, .checkout-outlet-summary { border-color: #acdfe3; border-radius: 18px; background: #eaf8f9; }
.cart-outlet-box > i { color: var(--caca-aqua-deep); }
.cart-item { border-color: var(--caca-border); border-radius: 20px; background: #fff; box-shadow: 0 8px 20px rgba(91,45,28,.05); }
.cart-item h4 { color: var(--caca-ink-deep); }
.cart-remove { color: var(--caca-coral-dark); background: var(--kk-red-pale); }
.cart-summary-panel { border-color: var(--caca-border); background: #fff7ef; }
.order-guide-icon { color: #fff; background: linear-gradient(145deg, var(--caca-coral), var(--caca-coral-dark)); }
.order-guide-title, .wifi-modal-title { color: var(--caca-ink-deep); }
.order-guide-message { color: #765847; border-color: var(--caca-border); background: #fff7ef; }
.wifi-modal-visual { color: var(--caca-aqua-deep); background: #e7f8fa; }
.wifi-password-box { border-color: var(--caca-border); background: #fff7ef; }
.wifi-copy-button { color: #fff; background: var(--caca-aqua-deep); }
.scroll-top-button { border-color: #fff; background: linear-gradient(145deg, var(--caca-coral), var(--caca-coral-dark)); box-shadow: 0 16px 38px rgba(217,87,97,.3); }
.toast { color: var(--caca-ink); background: #fff8ef; border: 1px solid var(--caca-border) !important; box-shadow: 0 16px 38px rgba(91,45,28,.18); }

@media (max-width: 991.98px) {
    .coffee-navbar { min-height: 78px; }
    .hero-section { padding-top: 138px; }
    .hero-cup-card { min-height: 500px; }
}

@media (max-width: 767.98px) {
    .coffee-navbar { min-height: 70px; }
    .coffee-navbar .container { padding-inline: .72rem; }
    .brand-logo-shell { width: 48px; height: 44px; border-radius: 14px; }
    .brand-name { max-width: 110px; font-size: .84rem; }
    .brand-mini { display: none; }
    .hero-section { min-height: auto; padding: 112px 0 62px; }
    .hero-section h1 { font-size: clamp(2.65rem, 14vw, 4.2rem); }
    .hero-copy { font-size: .98rem; line-height: 1.65; }
    .hero-actions { gap: .65rem !important; }
    .hero-actions .btn { flex: 1 1 calc(50% - .65rem); min-width: 142px; padding-inline: .8rem; }
    .hero-cup-card { min-height: 455px; border-radius: 32px; }
    .caca-hero-logo { width: 91%; max-height: 350px; }
    .hero-card-copy { left: 22px; right: 22px; bottom: 22px; }
    .outlet-panel { border-radius: 27px; }
    .menu-card { border-radius: 20px; }
    .feature-card { border-radius: 22px; }
    .product-modal-content { border-width: 0; }
}

@media (max-width: 575.98px) {
    .brand-logo-shell { width: 46px; height: 42px; }
    .brand-name { max-width: 92px; }
    .cart-button { min-width: 58px; }
    .hero-actions .btn { width: 100%; flex-basis: 100%; }
    .hero-meta .col-sm-4 { width: 100%; }
    .hero-cup-card { min-height: 420px; }
    .caca-hero-logo { top: 46%; }
    .footer-brand { align-items: flex-start; }
    .footer-brand img { width: 50px; height: 50px; border-radius: 14px; }
}


/* ===== SUPER CUTE THEME PATCH ===== */
:root {
    --caca-berry: #ff7f9d;
    --caca-berry-deep: #eb6285;
    --caca-mint: #9fe3df;
    --caca-mint-deep: #5dc5bf;
    --caca-cookie: #d9a173;
    --caca-cookie-deep: #b9774f;
    --caca-icing: #fff6fb;
    --caca-lilac: #eadfff;
    --caca-shadow-soft: 0 22px 48px rgba(170, 111, 73, .16);
}

body.caca-theme {
    background:
        radial-gradient(circle at 8% 10%, rgba(255,185,208,.32), transparent 18rem),
        radial-gradient(circle at 95% 16%, rgba(159,227,223,.22), transparent 20rem),
        radial-gradient(circle at 15% 90%, rgba(255,222,183,.34), transparent 18rem),
        linear-gradient(180deg, #fffdfb 0%, #fff8f3 46%, #fffdf9 100%);
}

body.caca-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .48;
    background-image:
        radial-gradient(circle at 10px 10px, rgba(255,127,157,.28) 0 3px, transparent 3.2px),
        radial-gradient(circle at 34px 22px, rgba(159,227,223,.32) 0 2.6px, transparent 2.8px),
        radial-gradient(circle at 56px 8px, rgba(255,211,117,.32) 0 2.4px, transparent 2.6px);
    background-size: 76px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.08));
    z-index: -1;
}

@media (min-width: 1200px) {
    .container { max-width: 1080px; }
}

.coffee-navbar {
    min-height: 88px;
    background: rgba(255, 251, 247, .82);
    border-bottom: 1px solid rgba(255, 192, 203, .28);
    box-shadow: 0 16px 38px rgba(164, 110, 74, .08);
    backdrop-filter: blur(16px);
}

.brand-logo-shell {
    width: 74px;
    height: 62px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff8fb 0%, #fff2ea 100%);
    box-shadow:
        0 12px 24px rgba(170, 111, 73, .15),
        inset 0 -4px 0 rgba(255, 255, 255, .9),
        inset 0 0 0 2px rgba(255, 255, 255, .75);
    transform: rotate(-3deg);
}

.brand-logo-shell img,
.footer-brand img,
.login-logo img {
    object-fit: contain !important;
}

.brand-name { font-size: 1.02rem; }
.brand-mini { color: var(--caca-berry-deep); letter-spacing: .15em; }

.nav-outlet-button,
.wifi-nav-button,
.wifi-mobile-button,
.hero-actions .btn-outline-dark,
.btn-order-guide,
.category-pill,
.footer-link-button {
    position: relative;
    border-radius: 999px !important;
    border-width: 2px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(170, 111, 73, .12), inset 0 2px 0 rgba(255,255,255,.9);
}

.nav-outlet-button,
.btn-order-guide,
.hero-actions .btn-outline-dark,
.category-pill,
.footer-link-button {
    color: var(--caca-ink-deep);
    border-color: #ffd8de !important;
    background: linear-gradient(180deg, #fff 0%, #fff4f7 100%) !important;
}

.nav-outlet-button:hover,
.btn-order-guide:hover,
.hero-actions .btn-outline-dark:hover,
.category-pill:hover,
.footer-link-button:hover {
    color: var(--caca-berry-deep) !important;
    border-color: #ffc2cf !important;
    background: linear-gradient(180deg, #fff9fb 0%, #ffe8ee 100%) !important;
}

.wifi-nav-button,
.wifi-mobile-button {
    color: #1f5b58 !important;
    border-color: rgba(93,197,191,.28) !important;
    background: linear-gradient(180deg, #ffffff 0%, #eefdfb 100%) !important;
}

.cart-button,
.btn-coffee,
.menu-add,
.wifi-copy-button,
.btn-login {
    position: relative;
    border: 2px solid rgba(255,255,255,.88) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ff94b0 0%, #ff7f9d 58%, #eb6285 100%) !important;
    box-shadow: 0 16px 28px rgba(235, 98, 133, .28), inset 0 2px 0 rgba(255,255,255,.55);
}

.cart-button:hover,
.btn-coffee:hover,
.menu-add:hover,
.wifi-copy-button:hover,
.btn-login:hover {
    background: linear-gradient(180deg, #ff85a5 0%, #f56d92 58%, #df5278 100%) !important;
}

.hero-section {
    min-height: 760px;
    padding: 158px 0 96px;
    background:
        radial-gradient(circle at 88% 16%, rgba(255,220,233,.82), transparent 24%),
        radial-gradient(circle at 8% 78%, rgba(159,227,223,.36), transparent 26%),
        linear-gradient(180deg, #fffdfb 0%, #fff5ef 48%, #fff9f5 100%);
}

.hero-section::before {
    opacity: .6;
    background-image:
        radial-gradient(circle at 10px 10px, rgba(255,127,157,.18) 0 3px, transparent 3.2px),
        radial-gradient(circle at 36px 18px, rgba(255,210,111,.22) 0 2.7px, transparent 2.9px),
        radial-gradient(circle at 58px 8px, rgba(93,197,191,.2) 0 2.2px, transparent 2.4px);
    background-size: 72px 42px;
}

.hero-cup-card {
    width: min(100%, 430px);
    margin-inline: auto;
    min-height: 560px;
    overflow: visible;
    border: 0;
    border-radius: 46px;
    background:
        radial-gradient(circle at 22% 16%, rgba(255,255,255,.92), transparent 18%),
        linear-gradient(180deg, #fff7fb 0%, #fff0e8 52%, #f3fffd 100%);
    box-shadow: 0 28px 70px rgba(170,111,73,.22), inset 0 0 0 3px rgba(255,255,255,.82);
    transform: rotate(-1.5deg);
}

.hero-cup-card::before {
    width: 320px;
    height: 320px;
    top: 68px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 0 0 18px rgba(255,255,255,.22), 0 24px 50px rgba(170,111,73,.1);
}

.hero-cup-card::after {
    width: 120px;
    height: 120px;
    right: -18px;
    bottom: 96px;
    background:
        radial-gradient(circle at 30% 30%, #ffe2af 0 24%, transparent 24%),
        radial-gradient(circle at 70% 68%, #ffc8d5 0 20%, transparent 20%),
        var(--caca-mint);
    opacity: .95;
}

.hero-card-badge {
    top: 24px;
    left: 24px;
    padding: .52rem .82rem;
    border: 2px solid rgba(255,255,255,.85);
    background: linear-gradient(180deg, #ff9bb4 0%, #ff7f9d 100%);
}

.caca-hero-logo {
    z-index: 4;
    width: min(84%, 355px);
    max-height: 300px;
    top: 39%;
    transform: translate(-50%, -50%) rotate(-1deg);
    filter: drop-shadow(0 18px 20px rgba(170,111,73,.18));
}

.hero-card-copy {
    z-index: 7;
    left: 24px;
    right: 24px;
    bottom: 22px;
    padding: 1rem 1.05rem;
    border: 2px solid rgba(255,255,255,.86);
    border-radius: 24px;
    background: rgba(255, 251, 247, .92);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(170,111,73,.12);
}

.hero-card-copy span {
    margin-bottom: .3rem;
    color: var(--caca-berry-deep);
    font-size: .73rem;
    letter-spacing: .12em;
}

.hero-card-copy strong {
    max-width: none;
    font-size: 1.02rem;
    line-height: 1.5;
}

.meta-card {
    border: 2px solid rgba(255,255,255,.88);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,246,251,.8) 100%);
    box-shadow: 0 14px 30px rgba(170,111,73,.09);
}

.meta-card i {
    color: var(--caca-berry-deep);
    background: linear-gradient(180deg, #fff 0%, #fff4f7 100%);
}

.outlet-section {
    position: relative;
    padding: 102px 0 70px;
    background:
        linear-gradient(180deg, rgba(255,250,244,.12) 0, rgba(255,250,244,.12) 100%),
        linear-gradient(180deg, #fffdf9 0%, #fff6ef 100%);
}

.outlet-section::before,
.outlet-section::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,.78) 0 14%, transparent 14%),
        radial-gradient(circle at 64% 34%, rgba(125,76,46,.22) 0 5%, transparent 5%),
        radial-gradient(circle at 34% 70%, rgba(125,76,46,.22) 0 5.5%, transparent 5.5%),
        radial-gradient(circle at 72% 68%, rgba(125,76,46,.18) 0 6%, transparent 6%),
        linear-gradient(180deg, #efc28f 0%, #d69c6a 100%);
    box-shadow: 0 16px 32px rgba(170,111,73,.14);
    opacity: .95;
}

.outlet-section::before { top: 38px; left: clamp(8px, 4vw, 60px); }
.outlet-section::after { right: clamp(12px, 4vw, 60px); bottom: 18px; transform: scale(.82) rotate(18deg); }

.outlet-panel {
    position: relative;
    overflow: hidden;
    color: var(--caca-ink);
    border: 0;
    border-radius: 42px;
    background:
        radial-gradient(circle at 20% 14%, rgba(255,255,255,.28), transparent 18%),
        radial-gradient(circle at 82% 80%, rgba(255,214,222,.24), transparent 22%),
        linear-gradient(180deg, #dca06f 0%, #cf9464 100%);
    box-shadow: 0 28px 68px rgba(170,111,73,.2), inset 0 0 0 3px rgba(255,255,255,.16);
}

.outlet-panel::before {
    opacity: 1;
    background-image:
        radial-gradient(circle at 24px 24px, rgba(124,76,46,.22) 0 6px, transparent 6.2px),
        radial-gradient(circle at 72px 44px, rgba(124,76,46,.18) 0 5px, transparent 5.2px),
        radial-gradient(circle at 42px 78px, rgba(124,76,46,.16) 0 4px, transparent 4.2px);
    background-size: 120px 120px;
    inset: 0;
}

.outlet-panel::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,251,247,.96) 0%, rgba(255,245,237,.94) 100%);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.65);
    z-index: 1;
}

.outlet-panel > * { position: relative; z-index: 2; }
.outlet-panel .section-kicker,
.outlet-panel h2,
.outlet-panel > .row > div:first-child > p,
.service-note,
.service-note i { color: var(--caca-ink) !important; }

.outlet-search-card,
.selected-outlet-card,
.service-note,
.outlet-result,
.outlet-results,
.cart-outlet-box,
.checkout-outlet-summary,
.product-modal-content,
.checkout-modal,
.order-guide-modal-content,
.wifi-modal-content,
.cart-summary-panel,
.option-group,
.cart-item,
.feature-card {
    border-width: 2px !important;
    border-color: rgba(255, 220, 227, .78) !important;
    box-shadow: var(--caca-shadow-soft);
}

.outlet-search-card {
    border-radius: 30px;
    background: linear-gradient(180deg, #fffefe 0%, #fff5f8 100%);
    box-shadow: 0 22px 48px rgba(170,111,73,.16), inset 0 0 0 3px rgba(255,255,255,.8);
}

.form-control, .form-select {
    border-radius: 18px;
    background-color: #fffdfd;
}

.selected-outlet-card {
    background: linear-gradient(180deg, #fff3f7 0%, #eefdfb 100%);
}

.menu-section {
    position: relative;
    background:
        radial-gradient(circle at 14% 12%, rgba(255,223,229,.6), transparent 20%),
        linear-gradient(180deg, #fffdfb 0%, #fff7f2 100%);
}

.menu-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 32px 20px, rgba(255,127,157,.14) 0 4px, transparent 4.2px),
        radial-gradient(circle at 72px 46px, rgba(159,227,223,.16) 0 3px, transparent 3.2px),
        radial-gradient(circle at 108px 18px, rgba(255,210,111,.18) 0 3px, transparent 3.2px);
    background-size: 140px 80px;
    opacity: .8;
}

.search-box .input-group-text,
.search-box .form-control {
    border-width: 2px;
    border-color: #ffd8de;
    background: #fff;
}

.menu-card {
    position: relative;
    overflow: visible;
    border-width: 2px;
    border-color: #ffdbe4;
    border-radius: 30px;
    background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%);
    box-shadow: 0 16px 34px rgba(170,111,73,.1);
}

.menu-card::before,
.menu-card::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
}

.menu-card::before {
    width: 62px;
    height: 18px;
    top: -9px;
    left: 26px;
    background: linear-gradient(180deg, #ffd6e2 0%, #ffb9cb 100%);
    box-shadow: 0 6px 14px rgba(255,127,157,.16);
}

.menu-card::after {
    width: 18px;
    height: 18px;
    top: 16px;
    right: 18px;
    background:
        radial-gradient(circle at 30% 30%, #fff 0 16%, transparent 16%),
        linear-gradient(180deg, #fff1ab 0%, #ffd36f 100%);
    box-shadow: 0 8px 16px rgba(255,211,111,.2);
}

.menu-card:hover {
    border-color: #ffc5d4;
    transform: translateY(-7px) rotate(-.5deg);
    box-shadow: 0 26px 52px rgba(170,111,73,.16);
}

.menu-card-image {
    margin: 14px 14px 0;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff7fb 0%, #fff0e6 100%);
    box-shadow: inset 0 0 0 1px rgba(255,218,228,.55);
}

.menu-card-image img {
    object-fit: contain;
    padding: 10px;
}

.menu-card-body { padding: 1.1rem 1.1rem 1.22rem; }
.menu-card h3 { min-height: auto; font-size: 1.05rem; }
.menu-card-description { min-height: 2.5rem; }
.menu-badge {
    border: 2px solid rgba(255,255,255,.78);
    border-radius: 999px;
    background: linear-gradient(180deg, #ff9ab3 0%, #ff7f9d 100%);
}

.feature-section {
    background:
        radial-gradient(circle at 14% 20%, rgba(255,223,229,.5), transparent 24%),
        radial-gradient(circle at 84% 82%, rgba(159,227,223,.34), transparent 22%),
        linear-gradient(180deg, #fff7f2 0%, #fffdfb 100%);
}

.feature-card {
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,247,251,.92) 100%);
}

.feature-card > i {
    border: 2px solid rgba(255,255,255,.8);
    background: linear-gradient(180deg, #ff94b0 0%, #ff7f9d 100%) !important;
}

.coffee-footer {
    color: #ffeada;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,162,186,.15), transparent 20%),
        linear-gradient(180deg, #74472e 0%, #5d3824 100%);
    border-top: 6px solid #ffc3d0;
}

.footer-brand img {
    width: 78px;
    height: 78px;
    padding: 6px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff8fb 0%, #fff1e9 100%);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.footer-link,
.footer-link:hover {
    color: #ffe39d;
}

.product-modal-content,
.checkout-modal,
.order-guide-modal-content,
.wifi-modal-content,
.feature-card,
.cart-summary-panel,
.option-group,
.cart-item {
    border-radius: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%);
}

@media (max-width: 991.98px) {
    .coffee-navbar { min-height: 80px; }
    .hero-cup-card { min-height: 520px; }
    .caca-hero-logo { top: 38%; max-height: 280px; }
}

@media (max-width: 767.98px) {
    .brand-logo-shell { width: 54px; height: 48px; border-radius: 16px; }
    .hero-section { padding: 114px 0 62px; min-height: auto; }
    .hero-cup-card {
        width: min(100%, 390px);
        min-height: 470px;
        transform: none;
    }
    .caca-hero-logo {
        width: 86%;
        max-height: 248px;
        top: 36%;
    }
    .hero-card-copy {
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: .86rem .9rem;
    }
    .outlet-section { padding-top: 88px; }
    .outlet-panel { border-radius: 32px; }
    .outlet-panel::after { inset: 12px; border-radius: 25px; }
    .menu-card { border-radius: 24px; }
    .feature-card { border-radius: 24px; }
    .footer-brand img { width: 62px; height: 62px; }
}

@media (max-width: 575.98px) {
    .brand-logo-shell { width: 50px; height: 44px; }
    .hero-cup-card { min-height: 438px; }
    .caca-hero-logo { width: 88%; max-height: 218px; top: 35%; }
    .hero-card-copy strong { font-size: .94rem; }
    .outlet-section::before, .outlet-section::after { width: 68px; height: 68px; opacity: .8; }
}