:root {
            --brand: #5d1a57;
            --ink: #1f2937;
            --muted: #6b7280;
            --bg: #fafafa;
            --card: #fff;
            --line: #ececec;
            --ok: #10b981;
            --danger: #ef4444;
            --pill: #f4f4f5;

            /* calculado via JS */
            --hero-h: 0px;
            --cat-h: 0px;
            --sticky-offset: 140px;
        }
.slidesWrap{
    display:none
}
        html,
        body {
            background: var(--bg);
            color: var(--ink)
        }

        body {
            padding-bottom: calc(var(--cart-h) + 12px);
        }

        .border-line {
            border-color: var(--line) !important
        }

        .nowrap {
            white-space: nowrap
        }

        /* HEADER */
        .hero {
            position: relative;
            z-index: 20;
            background: var(--card);
            border-bottom: 1px solid var(--line);
            overflow: visible;
        }

        .hero.shrink {
            box-shadow: 0 6px 24px rgba(0, 0, 0, .06)
        }

        .hero-actions {
            position: absolute;
            right: 12px;
            top: 12px;
            z-index: 10;
        }

        .hero-cover {
            height: 150px;
            overflow: hidden;
            border-bottom: 1px solid var(--line);
        }

        .hero-cover img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
        }

        .brand-float {
            display: flex;
            justify-content: center;
            margin-top: 8px;
            position: relative;
            z-index: 5;
        }

        .brand-logo {
            width: 76px;
            height: 76px;
            border-radius: 999px;
            border: 4px solid #fff;
            background: #fff;
            object-fit: contain;
            box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
            transition: all .25s ease;
        }

        .brand-meta {
            margin-top: 6px
        }

        .brand-name {
            font-weight: 800;
            font-size: 1.25rem;
            letter-spacing: .2px;
        }

        .brand-sub {
            margin-top: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .35rem;
            flex-wrap: wrap;
            color: var(--muted);
            font-size: .95rem;
        }

        .brand-sub .dot {
            margin: 0 .25rem;
            opacity: .65
        }

        .brand-more {
            color: var(--muted);
            text-decoration: none
        }

        .brand-more:hover {
            text-decoration: underline
        }

        .brand-open {
            font-weight: 800;
            margin-top: 6px
        }

        .brand-open.open-yes {
            color: var(--ok)
        }

        .brand-open.open-no {
            color: var(--danger)
        }

        .hero.shrink .hero-cover {
            display: block
        }

        .hero.shrink .brand-float {
            margin-top: 8px
        }

        .hero.shrink .brand-logo {
            width: 92px;
            height: 92px;
            border-width: 5px;
            box-shadow: 0 16px 34px rgba(0,0,0,.16);
        }

        .hero.shrink .brand-sub,
        .hero.shrink .brand-open {
            display: flex
        }

        /* CATEGORIAS (SELECT) */
        .catbar {
            position: sticky;
            top: 0;
            z-index: 2140;
            background: var(--bg);
            border-bottom: 1px solid var(--line);
        }

        .catbar .form-select {
            border-radius: 999px;
            border-color: var(--line);
            font-weight: 800;
        }

        /* scroll alinhado (header + select) */
        [data-cat-section] {
            scroll-margin-top: var(--sticky-offset)
        }

        /* Slides */
        .slides {
            margin: 8px auto 12px;
            border-radius: 14px;
            overflow: hidden;
            max-height: 220px
        }

        .slides img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: none;
        }

        .slides img:first-child {
            display: block
        }

        /* Cards */
        .prod-card,
        .combo-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: .75rem;
            display: flex;
            gap: .75rem
        }

        .prod-thumb,
        .combo-thumb {
            width: 96px;
            height: 96px;
            border-radius: 10px;
            object-fit: cover;
            background: #f3f4f6;
            flex: 0 0 auto;
            border: 1px solid var(--line)
        }

        .prod-title {
            font-weight: 800;
            margin-bottom: 2px
        }

        .prod-desc {
            color: var(--muted);
            font-size: .9rem;
            line-height: 1.25
        }

        .price {
            font-weight: 800;
            font-size: 1rem;
            letter-spacing: .2px;
            white-space: nowrap
        }

        .btn-add {
            white-space: nowrap
        }

        /* Carrinho */
        .cartbar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1030;
            background: var(--card);
            border-top: 1px solid var(--line);
            padding: .6rem .75rem;
            box-shadow: 0 -8px 20px rgba(0, 0, 0, .04);
        }


        .cart-total {
            font-weight: 800;
            font-size: 1.05rem
        }

        .cart-pill {
            background: var(--brand);
            color: #fff;
            border: none;
            border-radius: 999px;
            padding: .55rem 1.1rem;
            font-weight: 800
        }

        /* Modais */
        #productModal .modal-dialog-scrollable .modal-content,
        #cartModal .modal-dialog-scrollable .modal-content {
            max-height: 92vh
        }

        #productModal .modal-dialog-scrollable .modal-body,
        #cartModal .modal-dialog-scrollable .modal-body {
            overflow: auto
        }

        .modal-backdrop {
            z-index: 3000 !important;
            background: rgba(0, 0, 0, .55)
        }

        .modal {
            z-index: 3010 !important
        }

        body.modal-open .hero,
        body.modal-open .catbar {
            pointer-events: none
        }

        .group-card {
            border: 1px dashed var(--line);
            border-radius: 12px;
            padding: .6rem .7rem;
            background: #fff
        }

        .rule {
            font-size: .85rem;
            color: var(--muted)
        }

        .addon {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: .45rem .45rem;
            border-radius: .5rem;
            background: #f7f7f8
        }

        
        .group-title{
            font-weight:900;
            font-size:1rem;
            letter-spacing:.2px;
            color:var(--ink);
        }
        .group-kicker{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.26rem .55rem;
            border-radius:999px;
            background:color-mix(in srgb,var(--brand) 8%,transparent);
            color:var(--brand);
            font-size:.72rem;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.04em;
            margin-bottom:.45rem;
        }
        .group-card{
            border:1px solid rgba(17,24,39,.08);
            border-radius:16px;
            padding:.85rem .9rem;
            background:#fff;
            box-shadow:0 8px 20px rgba(17,24,39,.04)
        }
        .group-card.is-highlight{
            border-color:color-mix(in srgb,var(--brand) 16%,transparent);
            box-shadow:0 12px 24px color-mix(in srgb,var(--brand) 8%,transparent)
        }
        .rule{
            font-size:.79rem;
            color:var(--muted);
            font-weight:700
        }
        .addon{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.65rem;
            padding:.62rem .68rem;
            border-radius:.8rem;
            background:#fff;
            border:1px solid rgba(17,24,39,.08);
            transition:.15s ease
        }
        .addon:hover{
            border-color:color-mix(in srgb,var(--brand) 20%,transparent);
            box-shadow:0 8px 18px rgba(17,24,39,.05)
        }
        .addon small{
            color:var(--muted);
            font-weight:700;
            white-space:nowrap
        }
        .addon.tag-half .name-wrap::after{
            content:'1/2';
            display:inline-flex;
            align-items:center;
            justify-content:center;
            margin-left:.5rem;
            padding:.14rem .4rem;
            border-radius:999px;
            background:#fff3cd;
            color:#8a5700;
            font-size:.68rem;
            font-weight:800;
            vertical-align:middle
        }
        .half-choice-block{
            display:grid;
            gap:.8rem
        }
        .half-cat{
            border:1px solid rgba(17,24,39,.08);
            border-radius:14px;
            padding:.7rem;
            background:#fcfcfd
        }
        .half-cat-title{
            font-weight:900;
            font-size:.84rem;
            color:var(--ink);
            margin-bottom:.55rem;
            display:flex;
            align-items:center;
            gap:.45rem
        }
        .half-cat-title .badge{
            background:color-mix(in srgb,var(--brand) 8%,transparent)!important;
            color:var(--brand)!important;
            border:1px solid color-mix(in srgb,var(--brand) 12%,transparent)!important
        }
        .half-flavor-option{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:.6rem;
            padding:.62rem .68rem;
            border:1px solid rgba(17,24,39,.08);
            border-radius:12px;
            background:#fff;
            cursor:pointer;
            transition:.15s ease
        }
        .half-flavor-option:hover{
            border-color:color-mix(in srgb,var(--brand) 22%,transparent);
            box-shadow:0 8px 18px rgba(17,24,39,.05)
        }
        .half-flavor-option.active{
            border-color:var(--brand);
            box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 12%,transparent)
        }
        .half-flavor-option .price-tag{
            color:var(--brand);
            font-weight:800;
            white-space:nowrap
        }
        .half-summary{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.75rem;
            border:1px solid color-mix(in srgb,var(--brand) 16%,transparent);
            border-radius:14px;
            padding:.72rem .8rem;
            background:color-mix(in srgb,var(--brand) 4%,transparent)
        }
        .half-summary .txt{
            min-width:0
        }
        .half-summary .txt strong{
            display:block;
            line-height:1.2
        }
        .half-summary .txt small{
            color:var(--muted);
            font-weight:700
        }

.qty-box {
            display: flex;
            align-items: center;
            gap: .4rem
        }

        .qty-btn {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center
        }

        @keyframes shake {
            0% {
                transform: translateX(0)
            }

            25% {
                transform: translateX(-3px)
            }

            50% {
                transform: translateX(3px)
            }

            75% {
                transform: translateX(-2px)
            }

            100% {
                transform: translateX(0)
            }
        }

        .shake {
            animation: shake .25s
        }

        .toast-container {
            z-index: 4000
        }

        .toast-success {
            --bs-toast-bg: #ecfeff;
            --bs-toast-color: #065f46;
            border-left: 4px solid var(--ok)
        }

        /* Overlay de navegação */
        .hero {
            background:
                radial-gradient(circle at top right, rgba(255,255,255,.92), rgba(255,255,255,.98)),
                var(--card);
        }
        .hero-cover{
            position:relative;
            height:190px;
            border-bottom:none;
        }
        .hero-cover::after{
            content:'';
            position:absolute; inset:0;
            background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.22));
            pointer-events:none;
        }
        .hero-cover img{height:190px; object-fit:cover; filter:saturate(1.05) contrast(1.02)}
        .brand-float{margin-top:8px}
        .brand-logo{
            width:92px; height:92px;
            border-width:5px;
            box-shadow:0 16px 34px rgba(0,0,0,.16);
        }
        .hero-actions .btn{
            box-shadow:0 10px 24px rgba(0,0,0,.10);
            border:1px solid rgba(255,255,255,.8)!important;
            font-weight:700;
        }
        .catbar{
            box-shadow:0 10px 22px rgba(17,24,39,.05);
            backdrop-filter:saturate(140%) blur(8px);
        }
        .slides{
            position:relative;
            margin:12px auto 16px;
            max-height:260px;
            box-shadow:0 18px 42px rgba(0,0,0,.10);
        }
        .slides img{
            height:260px;
            border-radius:14px;
        }
        .slides-dots{
            position:absolute;
            left:50%;
            bottom:12px;
            transform:translateX(-50%);
            display:flex;
            gap:8px;
            z-index:3;
        }
        .slides-dots button{
            width:10px; height:10px; border:none; border-radius:999px;
            background:rgba(255,255,255,.55);
            padding:0;
            transition:all .2s ease;
        }
        .slides-dots button.active{
            width:26px;
            background:#fff;
        }
        .prod-card,.combo-card{
            border-radius:18px;
            padding:.95rem;
            box-shadow:0 8px 18px rgba(17,24,39,.035);
            transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .prod-card.no-media,.combo-card.no-media{
            display:block;
        }
        .prod-card.no-media .content-stack,.combo-card.no-media .content-stack{
            width:100%;
        }
        .prod-card:hover,.combo-card:hover{
            transform:translateY(-2px);
            box-shadow:0 14px 28px rgba(17,24,39,.08);
            border-color:color-mix(in srgb,var(--brand) 18%,transparent);
        }
        .prod-card,.combo-card{cursor:pointer;}
        .prod-thumb,.combo-thumb{
            width:102px; height:102px; border-radius:14px;
        }
        .thumb-wrap{
            flex:0 0 auto;
        }
        .content-stack{
            min-width:0;
        }
        .prod-title,.combo-title{
            line-height:1.2;
            word-break:break-word;
        }
        .prod-desc{
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .price{
            color:var(--brand);
            font-size:1.05rem;
        }
        .btn-add, .btn-add-combo{
            min-width:124px;
            font-weight:800;
            border:none;
            box-shadow:0 10px 20px rgba(0,0,0,.10);
            background:linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 78%, #111));
        }
        .btn-add:hover, .btn-add-combo:hover{
            filter:brightness(1.06);
        }
        .cartbar{
            padding:.72rem .75rem;
            background:rgba(255,255,255,.96);
            backdrop-filter:saturate(140%) blur(10px);
        }
        .cart-pill{
            min-width:170px;
            box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 22%,transparent);
        }
        .cart-total{font-size:1.02rem}
        .modal .btn-close{
            opacity:1;
            background-color:#fff;
            border:1px solid rgba(17,24,39,.12);
            border-radius:999px;
            box-shadow:0 10px 22px rgba(0,0,0,.08);
            padding:.85rem;
        }
        .modal-header{
            border-bottom:1px solid rgba(17,24,39,.06);
            background:linear-gradient(180deg, rgba(250,250,250,.9), rgba(255,255,255,1));
        }
        .modal-footer{
            border-top:1px solid rgba(17,24,39,.06);
            background:linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,250,.96));
        }
        .choice-segment{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
        }
        .choice-segment .btn{
            border-radius:14px;
            padding:.85rem 1rem;
            font-weight:800;
            border:1px solid var(--line);
            background:#fff;
        }
        .choice-segment .btn.active{
            background:var(--brand);
            color:#fff;
            border-color:var(--brand);
            box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 18%,transparent);
        }
        .choice-segment small{display:block; opacity:.8; font-weight:600}
        .maps-frame{
            width:100%;
            height:220px;
            border:0;
            border-radius:14px;
            overflow:hidden;
            box-shadow:0 10px 28px rgba(0,0,0,.08);
        }
        .info-pill{
            border:1px solid var(--line);
            border-radius:14px;
            padding:.8rem .95rem;
            background:#fff;
        }
        @media (max-width: 767.98px){
            .hero-cover, .hero-cover img{height:158px}
            .brand-float{margin-top:8px}
            .brand-logo{width:84px; height:84px}
            .slides{max-height:220px}
            .slides img{height:220px}
            .prod-card,.combo-card{padding:.75rem}
            .prod-thumb,.combo-thumb{width:88px;height:88px}
            .btn-add,.btn-add-combo{min-width:110px}
        }


        @media (max-width: 767.98px){
            .prod-thumb,.combo-thumb{width:88px;height:88px}
            .prod-card,.combo-card{padding:.85rem}
            .hero-actions{right:10px;top:10px}
            .brand-name{font-size:1.1rem}
        }