:root{
    --cls_bg:#f7f7f7;
    --cls_card:#ffffff;
    --cls_text:#111111;
    --cls_muted:#667085;
    --cls_line:#e5e7eb;
    --cls_dark:#111111;
    --cls_accent:#ff825c;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--cls_bg);
    color:var(--cls_text);
}

.cls_home{
    width:100%;
    max-width:430px;
    min-height:100vh;
    margin:0 auto;
    background:#fff;
    padding:26px 18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.cls_hero{
    text-align:center;
    padding-top:22px;
}

.cls_logo_box{
    width:116px;
    height:116px;
    margin:0 auto;
    border:1px solid var(--cls_line);
    border-radius:32px;
    background:#f8fafc;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 16px 34px rgba(0,0,0,.06);
}

.cls_logo_box img{
    width:82px;
    height:auto;
    object-fit:contain;
}

.cls_title{
    margin-top:24px;
    font-size:31px;
    font-weight:900;
    letter-spacing:-1px;
    line-height:1.05;
}

.cls_title span{
    color:var(--cls_accent);
}

.cls_subtitle{
    margin:13px auto 0;
    max-width:340px;
    color:var(--cls_muted);
    font-size:15px;
    line-height:1.5;
}

.cls_actions{
    margin-top:34px;
    display:grid;
    gap:14px;
}

.cls_action_card{
    border:1px solid var(--cls_line);
    border-radius:24px;
    padding:17px;
    text-decoration:none;
    color:#111;
    background:#fff;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.cls_action_card:active{
    transform:scale(.99);
}

.cls_action_primary{
    background:#111;
    color:#fff;
    border-color:#111;
}

.cls_action_icon{
    width:52px;
    height:52px;
    border-radius:18px;
    background:#111;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:900;
    flex:0 0 auto;
}

.cls_action_primary .cls_action_icon{
    background:#fff;
    color:#111;
}

.cls_action_title{
    font-size:17px;
    font-weight:900;
    line-height:1.2;
}

.cls_action_text{
    margin-top:4px;
    font-size:13px;
    line-height:1.35;
    color:var(--cls_muted);
}

.cls_action_primary .cls_action_text{
    color:#e5e7eb;
}

.cls_info_card{
    margin-top:22px;
    border:1px solid var(--cls_line);
    background:#fafafa;
    border-radius:22px;
    padding:16px;
}

.cls_info_title{
    font-weight:900;
    font-size:14px;
}

.cls_info_text{
    margin-top:6px;
    color:var(--cls_muted);
    font-size:13px;
    line-height:1.45;
}

.cls_footer{
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid var(--cls_line);
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:#98a2b3;
    font-size:11px;
}

.cls_app_store_card{
    margin-top:22px;
    border:1px solid var(--cls_line);
    background:#ffffff;
    border-radius:22px;
    padding:16px;
    text-align:center;
    box-shadow:0 10px 24px rgba(0,0,0,.04);
}

.cls_app_store_title{
    font-size:15px;
    font-weight:900;
    color:#111;
}

.cls_app_store_text{
    margin-top:7px;
    font-size:13px;
    line-height:1.45;
    color:var(--cls_muted);
}

.cls_app_store_buttons{
    margin-top:14px;
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.cls_store_badge img{
    height:40px;
    width:auto;
    display:block;
}

.cls_header_context{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:2px;
    font-size:12px;
    font-weight:800;
    color:#667085;
}

.cls_header_context_icon{
    font-size:13px;
    line-height:1;
}

.cls_header_context_name{
    line-height:1.2;
}

/* ------------------------------------------------------------ */

:root {
        --cls_bg: #f7f7f7;
        --cls_card: #fff;
        --cls_text: #111;
        --cls_muted: #667085;
        --cls_line: #e5e7eb;
        --cls_dark: #111;
        --cls_soft: #f3f4f6;
        --cls_accent: #ffb30b;
        --cls_success: #16a34a;
        --cls_toast: #5fa8dc;
        --cls_add: #ff825c
      }

      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent
      }

      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: var(--cls_bg);
        color: var(--cls_text);
        padding-bottom:78px;
      }

      .cls_app {
        width: 100%;
        max-width: 430px;
        min-height: 100vh;
        margin: 0 auto;
        background: #fff;
        padding: 14px;
        padding-bottom: 96px
      }

      .cls_status {
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 700;
        color: #111
      }

      .cls_status_icons {
        letter-spacing: 1px;
        font-size: 12px
      }

      .cls_header {
        background: #f2f2f3;
        box-shadow:0 6px 18px rgba(0,0,0,.03);
        border: 1px solid var(--cls_line);
        border-radius: 24px;
        padding: 16px;
        margin-top: 8px;
        position: sticky;
        top: 8px;
        z-index: 30
      }

      .cls_logo {
        width: 82px;
        height: auto;
        display: block
      }

      .cls_header_title {
        flex: 1;
        min-width: 0
      }

      .cls_header_title h1 {
        margin: 0;
        font-size: 20px;
        letter-spacing: -.3px;
        line-height:1.05;
        color: #111;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

.cls_header_subtitle{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin-top:2px;
}

.cls_qrbar_slogan{
    display:flex;
    align-items:center;
    gap:3px;
    font-size:10px;
    font-weight:900;
    letter-spacing:-.15px;
    line-height:1;
}

.cls_qrbar_slogan b{
    padding: 0 0 0 5px;
    display:inline-block;
}

.cls_qrbar_slogan b:nth-child(1){
    color:#ff6b3d;
}

.cls_qrbar_slogan b:nth-child(2){
    color:#111;
}

.cls_qrbar_slogan b:nth-child(3){
    color:#ffb30b;
}

.cls_header_identity{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:2px;
    max-width:100%;
}

.cls_header_identity .cls_header_user,
.cls_header_identity .cls_header_context{
    display:flex;
    align-items:center;
    gap:4px;
    min-width:0;
}

.cls_header_user{
    padding:0;
    margin:0;
    background:transparent;
    border:0;
    box-shadow:none;
    color:#475467;
    max-width:100%;
}

.cls_header_user_icon{
    color:#ff825c;
    font-size:13px;
    line-height:1;
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.cls_header_user_name{
    color:#475467;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:170px;
}

.cls_header_context{
    color:#667085;
    font-size:10px;
    font-weight:600;
    line-height:1;
    max-width:100%;
}

.cls_header_context::before{
    content:"•";
    color:#98a2b3;
    margin-right:4px;
    line-height:1;
}

.cls_header_context_icon{
    display:none;
}

.cls_header_context_name{
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:180px;
}

      .cls_search {
        position: relative;
        margin-top: 12px
      }

      .cls_search input {
        width: 100%;
        border: 1px solid var(--cls_line);
        border-radius: 15px;
        padding: 12px 12px 12px 38px;
        font-size: 14px;
        outline: none;
        background: #fff
      }

      .cls_input_disabled{
        background-color:#efefef;
      }

      .cls_search span {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        opacity: .7
      }

      .cls_chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 14px 0 2px;
        scroll-snap-type: x mandatory
      }

      .cls_chips::-webkit-scrollbar {
        display: none
      }

      .cls_chip {
        flex: 0 0 auto;
        border: 1px solid #d9dee8;
        background: #f9fafb;
        color: #344054;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
        cursor: pointer;
        scroll-snap-align: start
      }

      .cls_chip.cls_active {
        background: #111;
        color: #fff;
        border-color: #111
      }

      .cls_chips{
        scroll-behavior:smooth;
      }

      .cls_section {
        margin-top: 18px;
        scroll-margin-top: 180px;
      }

      .cls_section_title {
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        margin:24px 4px 12px;
      }

      .cls_section_title h2 {
        margin: 0;
        font-size: 18px;
        letter-spacing: -.2px
      }

      .cls_section_title span {
        font-size: 12px;
        color: var(--cls_muted);
        font-weight: 700
      }

      .cls_product {
        position: relative;
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 12px;
        align-items: center;
        border: 1px solid var(--cls_line);
        border-radius: 18px;
        background: #fff;
        padding: 10px;
        padding-right: 54px;
        margin-bottom: 10px;
        cursor: pointer
      }

      .cls_product_img {
        width: 70px;
        height: 70px;
        border-radius: 15px;
        object-fit: cover;
        background: #ddd
      }

      .cls_product_info {
        min-width: 0
      }

      .cls_product_name {
        font-size: 15px;
        font-weight: 900;
        line-height: 1.15;
        color: #111
      }

      .cls_product_desc {
        margin-top: 5px;
        font-size: 12px;
        color: var(--cls_muted);
        line-height: 1.25
      }

      .cls_product_price {
        margin-top: 7px;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap
      }

      .cls_btn_product_add {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 34px;
        height: 30px;
        border: 0;
        border-radius: 8px;
        background: #eef2ff;
        color: #53627c;
        font-size: 22px;
        font-weight: 900;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center
      }

      .cls_btn_product_add.cls_has_qty {
        background: var(--cls_add);
        color: #fff;
        font-size: 15px
      }

    .cls_featured_scroll{
        display:flex;
        gap:10px;
        overflow-x:auto;
        padding:2px 2px 12px;
        scroll-snap-type:x mandatory;
    }

    .cls_featured_scroll::-webkit-scrollbar{
        display:none;
    }

    .cls_featured_card{
        flex:0 0 calc((100% - 20px) / 3);
        min-width:calc((100% - 20px) / 3);
        max-width:calc((100% - 20px) / 3);

        background:#fff;
        border:1px solid var(--cls_line);
        border-radius:18px;
        overflow:hidden;
        scroll-snap-align:start;
        box-shadow:0 6px 14px rgba(0,0,0,.05);
        position:relative;
        cursor:pointer;
    }

    .cls_featured_img{
        width:100%;
        height:92px;
        object-fit:cover;
        display:block;
    }

    .cls_featured_body{
        padding:7px;
        padding-bottom:34px;
        min-height:72px;
    }

    .cls_featured_name{
        font-size:11px;
        font-weight:900;
        line-height:1.1;

        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;

        min-height:24px;
    }

    .cls_featured_desc{
        display:none;
    }

    .cls_featured_price{
        margin-top:4px;
        font-weight:900;
        font-size:12px;
    }

    .cls_featured_add{
        position:absolute;
        right:8px;
        bottom:8px;
        min-width:28px;
        height:28px;
        border:0;
        border-radius:8px;
        background:#eef2ff;
        color:#53627c;
        font-size:18px;
        font-weight:900;
        cursor:pointer;
    }

    .cls_featured_add.cls_has_qty{
        background:var(--cls_add);
        color:#fff;
        font-size:13px;
    }


.cls_featured_title{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:20px;
    margin-bottom:8px;
    padding:0 4px;

}

.cls_featured_title h2{
    margin:0;
    font-size:21px;
    font-weight:900;
    letter-spacing:-.4px;
}

.cls_featured_title button{
    border:0;
    background:transparent;
    color:#ff4b4b;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    padding:6px 4px;
    white-space:nowrap;
}

      .cls_bottom_cart {
        position: fixed;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        width: min(400px, calc(100% - 28px));
        background: #111;
        color: #fff;
        border: 0;
        border-radius: 15px;
        padding: 15px;
        font-size: 15px;
        font-weight: 900;
        box-shadow: 0 16px 36px rgba(0, 0, 0, .25);
        display: none;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        z-index: 50
      }

      .cls_bottom_cart.cls_show {
        display: flex
      }

      .cls_bottom_cart small {
        display: block;
        color: #d1d5db;
        margin-top: 2px;
        font-size: 11px
      }

    .cls_modal_overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.55);
        z-index:9999;
        display:none;
        align-items:center;
        justify-content:center;
        padding:16px;
        box-sizing:border-box;      
    }

    .cls_modal_overlay.cls_open{
        display:flex;
    }

    .cls_modal{
        width:100%;
        max-width:520px;
        max-height:calc(100vh - 32px);
        background:#fff;
        border-radius:28px;
        overflow:hidden;
        display:flex;
        flex-direction:column;
        box-sizing:border-box;
        margin:auto;
    }

    .cls_modal_header {
        padding: 16px;
        border-bottom: 1px solid var(--cls_line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
    }

      .cls_modal_header h3 {
        margin: 0;
        font-size: 20px
      }

      .cls_close {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 12px;
        background: var(--cls_soft);
        font-size: 22px;
        font-weight: 900;
        cursor: pointer
      }

    .cls_modal_body{
        flex:1 1 auto;
        overflow:auto;
        padding:18px;
        box-sizing:border-box;
    }

      .cls_cart_item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        border: 1px solid var(--cls_line);
        border-radius: 16px;
        padding: 12px;
        margin-bottom: 10px
      }

      .cls_cart_name {
        font-weight: 900
      }

      .cls_cart_sub {
        color: var(--cls_muted);
        font-size: 12px;
        margin-top: 4px
      }

      .cls_qty {
        display: flex;
        align-items: center;
        gap: 9px
      }

      .cls_qty button {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        border: 1px solid var(--cls_line);
        background: #fff;
        font-weight: 900;
        cursor: pointer
      }

      .cls_form {
        margin-top: 16px;
        display: grid;
        gap: 10px
      }

      .cls_form label {
        font-size: 13px;
        font-weight: 900
      }

      .cls_form input,
      .cls_form select {
        width: 100%;
        border: 1px solid var(--cls_line);
        border-radius: 14px;
        padding: 12px;
        font-size: 14px;
        outline: none
      }

      .cls_payment_box {
        margin-top: 14px;
        border: 1px solid var(--cls_line);
        background: #fafafa;
        border-radius: 18px;
        padding: 14px;
        display: none
      }

      .cls_payment_box.cls_show {
        display: block
      }

      .cls_pix_img {
        width: 220px;
        max-width: 100%;
        margin: 10px auto;
        display: block
      }

      .cls_pix_text {
        width: 100%;
        height: 88px;
        border: 1px solid var(--cls_line);
        border-radius: 12px;
        padding: 10px;
        font-size: 12px
      }

      .cls_copy {
        width: 100%;
        margin-top: 8px;
        border: 0;
        background: #111;
        color: #fff;
        border-radius: 14px;
        padding: 12px;
        font-weight: 900;
        cursor: pointer
      }

.cls_modal_footer{
    flex:0 0 auto;
    padding:16px 18px;
    border-top:1px solid #ececec;
    background:#fff;
    box-sizing:border-box;
}

      .cls_total {
        display: flex;
        justify-content: space-between;
        font-size: 17px;
        font-weight: 900;
        margin-bottom: 12px
      }

      .cls_pay {
        width: 100%;
        border: 0;
        background: #111;
        color: #fff;
        border-radius: 15px;
        padding: 15px;
        font-size: 15px;
        font-weight: 900;
        cursor: pointer
      }

      .cls_empty {
        color: var(--cls_muted);
        text-align: center;
        padding: 18px
      }

      .cls_app_toast {
        position: fixed;
        left: 50%;
        top: 0;
        transform: translate(-50%, -120%);
        width: min(430px, 100%);
        background: var(--cls_toast);
        color: #fff;
        padding: 18px;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        transition: transform .28s ease;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .16)
      }

      .cls_app_toast.cls_show {
        transform: translate(-50%, 0)
      }

      .cls_app_toast_close {
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 22px;
        cursor: pointer
      }

      .cls_logo_line{
          display:flex;
          align-items:center;
          gap:10px;
          margin-bottom:10px;
      }

      .cls_partner_logo_box{
          width:60px;
          height:60px;
          border-radius:18px;
          background:#fff;
          border:1px solid var(--cls_line);
          display:flex;
          align-items:center;
          justify-content:center;
          overflow:hidden;
          flex:0 0 auto;
      }

      .cls_partner_logo{
          width:100%;
          height:100%;
          object-fit:contain;
          // padding:4px;
          border-radius:18px;
      }

      .cls_powered_box{
          width:74px;
          flex:0 0 auto;
          text-align:center;
      }

      .cls_powered_text{
          font-size:8px;
          color:var(--cls_muted);
          font-weight:700;
          margin-bottom:2px;
          text-transform:uppercase;
      }

      .cls_qrbar_powered_logo{
          width:70px;
          max-height:34px;
          object-fit:contain;
          display:block;
      }

      .cls_payment_choice{
          display:grid;
          grid-template-columns:1fr 1fr;
          gap:10px;
      }

      .cls_payment_choice.cls_has_tab{
          grid-template-columns:1fr 1fr 1fr;
      }

      .cls_payment_btn_tab{
          display:none;
      }

      .cls_payment_choice.cls_paying_tab .cls_payment_btn_tab{
          display:none !important;
      }

      .cls_tab_payment_summary{
          margin-top:12px;
          border-top:1px solid var(--cls_line);
          padding-top:12px;
          display:grid;
          gap:6px;
          font-size:12px;
          color:var(--cls_muted);
      }

      .cls_tab_payment_summary div{
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:10px;
      }

      .cls_tab_payment_summary b{
          color:#111;
          font-size:13px;
      }

      .cls_payment_btn{
          border:1px solid var(--cls_line);
          background:#fff;
          color:#111;
          border-radius:14px;
          padding:13px;
          font-size:14px;
          font-weight:900;
          cursor:pointer;
      }

      .cls_payment_btn.cls_active{
          background:#111;
          color:#fff;
          border-color:#111;
      }

      .cls_card_fields{
          display:none;
          border:1px solid var(--cls_line);
          background:#fafafa;
          border-radius:16px;
          padding:14px;
      }

      .cls_card_grid{
          display:grid;
          grid-template-columns:1fr .7fr;
          gap:10px;
      }

        .cls_customer_order_status{
            display:grid;
            gap:10px;
            margin-top:12px;
        }

        .cls_customer_status_item{
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:center;
            border:1px solid var(--cls_line);
            border-radius:14px;
            padding:12px;
            background:#fff;
        }

        .cls_customer_status_item small{
            display:block;
            margin-top:4px;
            color:var(--cls_muted);
            font-size:12px;
        }

        .cls_customer_status_badge{
            font-size:11px;
            font-weight:900;
            padding:7px 9px;
            border-radius:999px;
            white-space:nowrap;
        }

        .cls_status_NEW{
            background:#f3f4f6;
            color:#374151;
        }

        .cls_status_WAITING_PAYMENT{
            background:#fff7ed;
            color:#c2410c;
        }

        .cls_status_PARTIALLY_PAID{
            background:#fef3c7;
            color:#92400e;
        }

        .cls_status_PAID{
            background:#dcfce7;
            color:#15803d;
        }

        .cls_status_PREPARING{
            background:#fff7ed;
            color:#c2410c;
        }

        .cls_status_READY{
            background:#ecfeff;
            color:#0e7490;
        }

        .cls_status_DELIVERED{
            background:#dcfce7;
            color:#15803d;
        }

        .cls_status_CANCELLED{
            background:#fee2e2;
            color:#b91c1c;
        }

        .cls_my_orders{
            margin-top:18px;
        }

        .cls_my_orders_title{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:10px;
        }

        .cls_my_orders_title h2{
            margin:0;
            font-size:18px;
        }

        .cls_my_orders_title span{
            background:#111;
            color:#fff;
            border-radius:999px;
            padding:5px 9px;
            font-size:12px;
            font-weight:900;
        }

        .cls_my_order_card{
            border:1px solid var(--cls_line);
            border-radius:18px;
            background:#fff;
            padding:12px;
            margin-bottom:10px;
            cursor:pointer;
            box-shadow:0 8px 20px rgba(0,0,0,.04);
        }

.cls_my_order_top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.cls_my_order_title{
    font-weight:900;
}

.cls_my_order_sub{
    color:var(--cls_muted);
    font-size:12px;
    margin-top:4px;
}

.cls_my_order_badge{
    border-radius:999px;
    padding:7px 9px;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.cls_my_order_right_actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.cls_my_order_items{
    margin-top:10px;
    border-top:1px solid var(--cls_line);
    padding-top:10px;
    display:none;
}

.cls_my_order_card.cls_open .cls_my_order_items{
    display:block;
}

.cls_my_order_item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    font-size:13px;
}

.cls_my_order_item span{
    color:var(--cls_muted);
    font-size:11px;
    font-weight:900;
}

    .cls_qrbar_footer{
        margin-top:40px;
        background:#ffffff;
        border-top:1px solid var(--cls_line);
        padding:22px 18px 28px;
    }

    .cls_qrbar_footer_top{
        display:flex;
        align-items:center;
        gap:14px;
    }

    .cls_qrbar_footer_logo{
        width:58px;
        height:58px;
        border-radius:16px;
        background:#f8fafc;
        border:1px solid var(--cls_line);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        flex-shrink:0;
    }

    .cls_qrbar_footer_logo img{
        width:42px;
        height:auto;
        object-fit:contain;
    }

    .cls_qrbar_footer_title{
        font-size:18px;
        font-weight:900;
        color:#111;
    }

    .cls_qrbar_footer_sub{
        margin-top:3px;
        font-size:12px;
        color:var(--cls_muted);
    }

    .cls_qrbar_footer_text{
        margin-top:18px;
        line-height:1.6;
        color:#667085;
        font-size:13px;
    }

    .cls_qrbar_footer_bottom{
        margin-top:18px;
        padding-top:14px;
        border-top:1px solid var(--cls_line);
        display:flex;
        align-items:center;
        justify-content:space-between;
        font-size:11px;
        color:#98a2b3;
    }

.cls_bottom_nav{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:min(430px,100%);
    height:70px;
    background:#fff;
    border-top:1px solid var(--cls_line);
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    z-index:90;
    box-shadow:0 -8px 24px rgba(0,0,0,.06);
}

.cls_bottom_nav_item{
    border:0;
    background:#fff;
    color:#667085;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.cls_bottom_nav_icon{
    font-size:22px;
    line-height:1;
}

.cls_bottom_nav_item.cls_active{
    color:#ff6b3d;
}

.cls_header{
    position:sticky;
    top:8px;
}

.cls_header_cart{
    position:absolute;
    right:16px;
    top:16px;
    width:42px;
    height:42px;
    border:0;
    border-radius:14px;
    background:#111;
    color:#fff;
    font-size:20px;
    display:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
}

.cls_header_cart.cls_show{
    display:flex;
}

.cls_header_cart span{
    position:absolute;
    right:-5px;
    top:-5px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:999px;
    background:#ff6b3d;
    color:#fff;
    font-size:11px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cls_bottom_nav_icon_wrap{
    position:relative;
}

.cls_bottom_nav_badge{
    position:absolute;
    right:-12px;
    top:-8px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#ff6b3d;
    color:#fff;
    font-size:10px;
    font-weight:900;
    display:none;
    align-items:center;
    justify-content:center;
}

.cls_bottom_nav_badge.cls_show{
    display:flex;
}

.cls_attr_option{
    border:1px solid var(--cls_line);
    border-radius:14px;
    padding:12px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    background:#fff;
}

.cls_attr_option_left{
    display:flex;
    align-items:center;
    gap:10px;
}

.cls_attr_option input{
    width:18px;
    height:18px;
}

.cls_attr_option_name{
    font-weight:900;
}

.cls_attr_option_price{
    color:var(--cls_muted);
    font-size:12px;
    margin-top:3px;
}

.cls_attr_option.cls_selected{
    border-color:#111;
    background:#f9fafb;
}

.cls_item_attrs{
    margin-top:5px;
    display:grid;
    gap:2px;
}

.cls_item_attr{
    font-size:11px;
    color:#667085;
    font-weight:700;
}

.cls_item_note{
    margin-top:5px;
    font-size:11px;
    color:#c2410c;
    font-weight:900;
}

.cls_product_unavailable{
    opacity:.45;
    filter:grayscale(1);
    pointer-events:none;
}

.cls_product_unavailable::after{
    content:'Indisponível';
    position:absolute;
    right:10px;
    top:10px;
    background:#111;
    color:#fff;
    border-radius:999px;
    padding:5px 8px;
    font-size:10px;
    font-weight:900;
}

.cls_processing_overlay{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

.cls_processing_overlay.cls_open{
    display:flex;
}

.cls_processing_box{
    width:min(300px, calc(100% - 48px));
    background:#fff;
    border:1px solid var(--cls_line);
    border-radius:26px;
    padding:28px 22px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.14);
}

.cls_processing_spinner{
    width:48px;
    height:48px;
    border-radius:50%;
    border:4px solid #e5e7eb;
    border-top-color:#111;
    margin:0 auto 18px;
    animation:cls_spin .8s linear infinite;
}

.cls_my_order_pix_box{
    margin-top:10px;
    border-top:1px solid var(--cls_line);
    padding-top:10px;
}

.cls_btn_pix_details{
    border:0;
    background:#f3f4f6;
    color:#111;
    border-radius:12px;
    padding:9px 12px;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.cls_my_order_pix_details{
    display:none;
    margin-top:10px;
    background:#fafafa;
    border:1px solid var(--cls_line);
    border-radius:14px;
    padding:12px;
}

.cls_my_order_pix_details.cls_open{
    display:block;
}

.cls_my_order_pix_img{
    width:190px;
    max-width:100%;
    display:block;
    margin:0 auto 10px;
}

.cls_my_order_pix_text{
    width:100%;
    min-height:82px;
    border:1px solid var(--cls_line);
    border-radius:12px;
    padding:9px;
    font-size:11px;
    resize:none;
}

.cls_btn_copy_order_pix{
    width:100%;
    margin-top:8px;
    border:0;
    background:#111;
    color:#fff;
    border-radius:12px;
    padding:11px;
    font-weight:900;
    cursor:pointer;
}

.cls_form_row_2,
.cls_form_row_address,
.cls_form_row_city{
    display:grid;
    gap:10px;
}

.cls_form_row_2{
    grid-template-columns:1fr 1fr;
}

.cls_form_row_address{
    grid-template-columns:1fr 100px;
}

.cls_form_row_city{
    grid-template-columns:1fr 90px;
}

.cls_form_row_address{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:10px;
}


.cls_profile_tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    background:#f3f4f6;
    border-radius:16px;
    padding:5px;
    margin-bottom:14px;
}

.cls_profile_tab_btn{
    border:0;
    background:transparent;
    border-radius:12px;
    padding:11px;
    font-weight:900;
    color:#667085;
    cursor:pointer;
}

.cls_profile_tab_btn.cls_active{
    background:#111;
    color:#fff;
}

.cls_profile_panel{
    display:none;
}

.cls_profile_panel.cls_active{
    display:block;
}

.cls_profile_link_btn{
    border:0;
    background:transparent;
    color:#ff6b3d;
    font-weight:900;
    padding:8px;
    cursor:pointer;
}

.cls_profile_avatar_badge{
    width:28px;
    height:28px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:11px;
    font-weight:900;
    display:none;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.cls_profile_avatar_badge.cls_show{
    display:flex;
}

.cls_profile_logged_hint{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fafafa;
    border:1px solid var(--cls_line);
    border-radius:18px;
    padding:12px;
    margin-bottom:12px;
}

.cls_profile_logged_badge{
    width:42px;
    height:42px;
    border-radius:999px;
    background:#111;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    flex:0 0 auto;
}

.cls_profile_logged_hint strong{
    display:block;
    font-size:13px;
    font-weight:900;
}

.cls_profile_logged_hint small{
    display:block;
    margin-top:3px;
    color:#667085;
    font-size:12px;
    line-height:1.35;
}


.cls_profile_logout{
    width:100%;
    margin-top:8px;
    border:1px solid #fee2e2;
    background:#fff1f2;
    color:#b91c1c;
    border-radius:15px;
    padding:14px;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.cls_profile_logout:hover,
.cls_profile_logout:active{
    background:#b91c1c;
    color:#fff;
}

.cls_profile_logged_actions{
    display:grid;
    gap:8px;
    margin-top:10px;
}

@keyframes cls_spin{
    to{
        transform:rotate(360deg);
    }
}

.cls_processing_title{
    font-size:17px;
    font-weight:900;
    color:#111;
}

.cls_processing_text{
    margin-top:8px;
    font-size:13px;
    color:#667085;
    line-height:1.4;
}


.cls_split_bill_box{
    display:none;
    border:1px solid var(--cls_line);
    background:#fafafa;
    border-radius:18px;
    padding:14px;
    margin-top:12px;
}

.cls_split_bill_box.cls_show{
    display:block;
}

.cls_split_bill_title{
    font-size:13px;
    font-weight:900;
    margin-bottom:10px;
}

.cls_split_bill_options{
    display:grid;
    gap:8px;
}

.cls_split_bill_option{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--cls_line);
    background:#fff;
    border-radius:14px;
    padding:11px;
    cursor:pointer;
    font-size:13px;
    font-weight:900;
}

.cls_split_bill_option input{
    width:18px;
    height:18px;
    flex:0 0 auto;
}

.cls_split_bill_custom{
    display:none;
    margin-top:10px;
}

.cls_split_bill_custom.cls_show{
    display:block;
}

.cls_split_bill_custom input{
    width:100%;
    border:1px solid var(--cls_line);
    border-radius:14px;
    padding:12px;
    font-size:15px;
    font-weight:900;
    outline:none;
    background:#fff;
}

.cls_split_bill_summary{
    display:grid;
    gap:6px;
    margin-top:12px;
    border-top:1px solid var(--cls_line);
    padding-top:12px;
    font-size:12px;
    color:var(--cls_muted);
}

.cls_split_bill_summary div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.cls_split_bill_summary b{
    color:#111;
    font-size:13px;
}


/* Pagamentos parciais / recibos */
.cls_partial_payments_wrap{
    margin-top:14px;
    border:1px solid var(--cls_line);
    border-radius:18px;
    background:#fff;
    padding:12px;
}

.cls_partial_payments_title{
    font-size:14px;
    font-weight:900;
    margin-bottom:10px;
}

.cls_partial_payments_list{
    display:grid;
    gap:10px;
}

.cls_partial_payment_card{
    border:1px solid var(--cls_line);
    border-radius:16px;
    background:#fafafa;
    padding:11px;
}

.cls_partial_payment_header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.cls_partial_payment_number{
    font-size:13px;
    font-weight:900;
}

.cls_partial_payment_line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:5px;
    font-size:13px;
}

.cls_partial_payment_line span{
    color:var(--cls_muted);
    font-weight:700;
}

.cls_partial_payment_line b{
    color:#111;
    font-weight:900;
}

.cls_partial_payment_date{
    margin-top:7px;
    font-size:11px;
    color:var(--cls_muted);
    font-weight:700;
}

.cls_partial_payment_actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.cls_btn_receipt,
.cls_btn_partial_pix{
    border:0;
    border-radius:12px;
    padding:9px 11px;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.cls_btn_receipt{
    background:#111;
    color:#fff;
}

.cls_btn_partial_pix{
    background:#f3f4f6;
    color:#111;
}

.cls_partial_payment_pix_wrap{
    display:none;
    margin-top:10px;
    border-top:1px solid var(--cls_line);
    padding-top:10px;
}

.cls_partial_payment_pix_wrap.cls_open{
    display:block;
}


.cls_partial_payment_pix_qrcode_wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
}

.cls_partial_payment_pix_qrcode{
    width:180px;
    max-width:100%;
    background:#fff;
    padding:8px;
    border-radius:12px;
    border:1px solid #e5e7eb;
}

.cls_pix_copy_line{
    width:100%;
    max-width:100%;
    box-sizing:border-box;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;

    margin-top:8px;
    padding:10px 12px;

    border:1px solid var(--cls_line);
    border-radius:12px;
    background:#fafafa;

    overflow:hidden;
}

.cls_pix_copy_preview{
    min-width:0;
    max-width:100%;

    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    font-size:11px;
    line-height:1.2;
    color:#667085;
}

.cls_pix_copy_link{
    border:0;
    background:transparent;
    padding:0;
    margin:0;

    color:#e87400;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
    line-height:1.2;
}

.cls_baas_legal_links{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--cls_line);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:11px;
    font-weight:900;
}

.cls_baas_legal_links a{
    color:#475467;
    text-decoration:none;
}

.cls_baas_legal_links span{
    color:#98a2b3;
}

.cls_asaas_baas_seal{
    margin-top:8px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-content:center;
    align-items:center;
}

.cls_asaas_baas_seal_text{
    font-size:12px;
    margin: 5px 0 8px 0;
    text-align:center;
    font-weight:400;
    color:#454545;
}

.cls_asaas_baas_seal img{
    width:110px;
    max-width:100%;
    height:auto;
}


      @media(max-width:360px) {
        .cls_product {
          grid-template-columns: 58px 1fr
        }

        .cls_product_img {
          width: 58px;
          height: 58px
        }

        .cls_product_price {
          font-size: 12px
        }
      }