:root {
    --fs-micro: 8px;
    --fs-caption: 12px;
    --fs-body: 14px;
    --fs-title: 16px;
    --fs-section: 20px;
    --fs-highlight: 24px;
    --fs-screen: 32px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --tracking-display: -0.02em;

    --field-focus-ring: inset 0 0 0 2px rgba(31, 134, 237, 0.364);
}

/*---------- FONT SECTION ----------*/



:root {
    --color-text: #1D1D1F;
    --color-text-soft: rgba(29, 29, 31, 0.8);
}

:root {
    --duration-stagger: 40ms;
    --duration-micro: 80ms;
    --duration-quick: 150ms;
    --duration-fast: 250ms;
    --duration-medium: 350ms;
    --duration-slow: 400ms;
    --duration-very-slow: 500ms;

    --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: ease-in-out;
    --ease-out: ease-out;
    --ease-linear: linear;
    --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);

    --distance-micro: 4px;
    --distance-small: 6px;
    --distance-base: 8px;
    --distance-medium: 12px;

    --scale-large: 0.96;
    --scale-medium: 0.97;
    --scale-small: 0.98;
    --scale-tiny: 0.99;

    --blur-small: 2px;
    --blur-medium: 3px;


    --modal-abre: var(--duration-fast);
    --modal-fecha: var(--duration-quick);
    --modal-escala: var(--scale-large);
    --modal-curva: var(--ease-smooth-out);

    --veu-abre: var(--duration-fast);
    --veu-fecha: var(--duration-quick);

    --shake-distance: var(--distance-small);
    --shake-overshoot: var(--distance-micro);
    --shake-dur-a: var(--duration-micro);
    --shake-dur-b: 60ms;
    --shake-ease: var(--ease-smooth-out);
    --revert-dur: 280ms;

    --toast-abre: var(--duration-medium);
    --toast-fecha: var(--duration-fast);
    --toast-distancia: 16px;
    --toast-escala: var(--scale-medium);
    --toast-curva: var(--ease-smooth-out);

    --tt-abre: var(--duration-quick);
    --tt-fecha: 50ms;
    --tt-atraso: var(--duration-micro);
    --tt-escala: var(--scale-small);
    --tt-curva: var(--ease-out);

    --dropdown-abre: var(--duration-fast);
    --dropdown-fecha: var(--duration-quick);
    --dropdown-escala: var(--scale-medium);
    --dropdown-curva: var(--ease-smooth-out);

    --acc-abre: var(--duration-fast);
    --acc-fecha: var(--duration-fast);
    --acc-chevron: var(--duration-fast);
    --acc-curva: var(--ease-smooth-out);

    --pagina-dur: var(--duration-fast);
    --pagina-distancia: var(--distance-base);
    --pagina-desfoque: var(--blur-medium);
    --pagina-curva: var(--ease-smooth-out);
    --pagina-saida-dur: var(--duration-quick);
    --pagina-volta-dur: var(--pagina-dur);

    --skel-base: #F2F3F5;
    --skel-brilho: rgba(255, 255, 255, 0.5);
    --skel-raio: 8px;
    --skel-pulso: 1.7s;

    --enfase-dur: var(--duration-very-slow);
    --enfase-curva: var(--ease-bounce);

    --troca-dur: var(--duration-quick);
    --icone-dur: var(--duration-fast);
    --troca-curva: var(--ease-in-out);

    --toque-dur: var(--duration-quick);
    --toque-curva: var(--ease-smooth-out);
}

:root {
    --folha-abre: var(--duration-slow);
    --folha-fecha: var(--duration-medium);
    --folha-curva: var(--ease-smooth-out);
    --folha-curva-saida: cubic-bezier(0.4, 0, 1, 1);
    --folha-desfoque: var(--blur-small);
}

html {
    font-family: 'Inter', sans-serif;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}


* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* iOS Safari */
    /* Safari */
    /* Konqueror HTML */
    /* Old versions of Firefox */
    /* Internet Explorer/Edge */
}

* {
    touch-action: manipulation;
}

.select,
.select * {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html,
body,
.section {
    min-height: 100vh;
}

@supports (height: 100dvh) {

    html,
    body,
    .section {
        min-height: 100dvh;
    }
}

input,
textarea {
    -webkit-user-select: text;
}

.d-flex {
    display: flex !important;
}

h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
}

a {
    text-decoration: none;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.section {
    padding: unset;
    max-width: 720px;
    background: #ffffff;
    margin: 0 auto;
}

body {
    background: #f5f5f5;
}

body:has(> .product-area) {
    background: #fff;
}

.not-scroll {
    overflow: hidden !important;
}

button {
    cursor: pointer;
}

/*----------- OPACITY BODY ----------*/

#opacity-image {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

#opacity-image svg {
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}

#opacity-body-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000000000;
}

#opacity-body-modal,
#opacity-image,
.bottom-modal-fade,
.bottom-modal-pix-fade,
.address-confirm-opacity,
#qr-background {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--veu-fecha) linear,
        visibility 0s linear var(--veu-fecha);
}

#opacity-body-modal.is-open,
#opacity-image.is-open,
.bottom-modal-fade.is-open,
.bottom-modal-pix-fade.is-open,
#qr-background.is-open,
.address-confirm-opacity.opened {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--veu-abre) linear,
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {

    #opacity-body-modal,
    #opacity-image,
    .bottom-modal-fade,
    .bottom-modal-pix-fade,
    .address-confirm-opacity,
    #qr-background {
        transition: opacity .01s linear, visibility 0s linear;
    }
}

.pagina-entrando {
    animation: pagina-entra var(--pagina-dur) var(--pagina-curva);
}

@keyframes pagina-entra {
    from {
        opacity: 0;
        transform: translateY(var(--pagina-distancia));
        filter: blur(var(--pagina-desfoque));
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.pagina-voltando {
    animation: pagina-volta var(--pagina-volta-dur) var(--pagina-curva);
}

@keyframes pagina-volta {
    from {
        opacity: 0;
        transform: translateY(calc(var(--pagina-distancia) * -1));
        filter: blur(var(--pagina-desfoque));
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.pagina-saindo {
    animation: pagina-sai var(--pagina-saida-dur) var(--pagina-curva) forwards;
}

@keyframes pagina-sai {
    from {
        opacity: 1;
        transform: none;
        filter: none;
    }

    to {
        opacity: 0;
        transform: translateY(calc(var(--pagina-distancia) / 2));
        filter: blur(var(--pagina-desfoque));
    }
}

@media (prefers-reduced-motion: reduce) {

    .pagina-entrando,
    .pagina-saindo,
    .pagina-voltando {
        animation: none;
    }
}

.final-bill .alert {
    transition: opacity var(--toast-fecha) var(--toast-curva);
}

.final-bill .alert.is-closing {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .final-bill .alert {
        transition: opacity .01s linear;
    }
}

.is-shaking {
    animation: tremor-erro calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}

@media (prefers-reduced-motion: reduce) {
    .is-shaking {
        animation: none;
        transform: none;
    }
}

/*----------- ALERT MESSAGE ----------*/

.alert-center {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    min-height: 48px;
    position: fixed;
    top: 118px;
    right: 16px;
    width: 320px;
    max-width: calc(100% - 32px);
    background: #FFFFFF;
    border: 0.5px solid #DDDDDD;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(29, 29, 31, 0.14), 0 2px 6px rgba(29, 29, 31, 0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 1000000;
    overflow: hidden;
    transform: translateY(calc(var(--toast-distancia) * -1)) scale(var(--toast-escala));
    opacity: 0;
    filter: blur(var(--blur-small));
    pointer-events: none;
    transition: transform var(--toast-fecha) var(--toast-curva),
        opacity var(--toast-fecha) var(--toast-curva),
        filter var(--toast-fecha) var(--toast-curva);
    will-change: transform, opacity;
}

.alert-center.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: none;
    pointer-events: auto;
    transition: transform var(--toast-abre) var(--toast-curva),
        opacity var(--toast-abre) var(--toast-curva),
        filter var(--toast-abre) var(--toast-curva);
}

@media (prefers-reduced-motion: reduce) {

    .alert-center,
    .alert-center.is-open {
        transition: opacity .01s linear;
        transform: none;
        filter: none;
    }
}


.alert-center .alert-icone {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    margin-top: -2px;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: 1;
}

.alert-center .alert-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.alert-center .alert-titulo {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    line-height: 129%;
    font-weight: 600;
    color: var(--color-text);
}

.alert-center .alert-corpo {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-caption);
    line-height: 133%;
    font-weight: 400;
    color: var(--color-text-soft);
}

.alert-center .alert-tempo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    background: rgba(29, 29, 31, 0.12);
}

.alert-center.is-open .alert-tempo {
    animation: aviso-escoar var(--aviso-vida, 5000ms) linear forwards;
}

.alert-center:hover .alert-tempo {
    animation-play-state: paused;
}

@keyframes aviso-escoar {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.alert-success .alert-icone { background: #E1F5E9; color: #25A65B; }
.alert-success .alert-icone::before { content: "\2713"; }

.alert-error .alert-icone { background: #FCEBEA; color: #B00020; }
.alert-error .alert-icone::before { content: "!"; }

.alert-info .alert-icone { background: #EBF5FF; color: #0962BA; }
.alert-info .alert-icone::before { content: "i"; }

@media (prefers-reduced-motion: reduce) {

    .alert-center.is-open .alert-tempo {
        animation: none;
    }
}

@keyframes tremor-erro {
    0%     { transform: translateX(0);                                animation-timing-function: var(--shake-ease); }
    28.57% { transform: translateX(var(--shake-distance));            animation-timing-function: var(--shake-ease); }
    57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
    78.57% { transform: translateX(var(--shake-overshoot));           animation-timing-function: var(--shake-ease); }
    100%   { transform: translateX(0); }
}

#folha-decisao-veu {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000001;
    background: rgba(29, 29, 31, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--veu-fecha) var(--ease-smooth-out);
}

#folha-decisao-veu.is-open {
    opacity: 1;
    pointer-events: auto;
    transition-duration: var(--veu-abre);
}

#folha-decisao {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000002;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
    background: #FFFFFF;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateY(100%);
    transition: transform var(--folha-fecha) var(--folha-curva-saida);
    will-change: transform;
}

#folha-decisao.is-open {
    transform: translateY(0);
    transition-duration: var(--folha-abre);
    transition-timing-function: var(--folha-curva);
}

.folha-decisao-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#folha-decisao h3 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-title);
    line-height: 138%;
    font-weight: 600;
    color: var(--color-text);
}

#folha-decisao .folha-decisao-texto {
    white-space: pre-line;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    line-height: 143%;
    color: var(--color-text-soft);
}

.folha-decisao-acoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.folha-decisao-botao {
    height: 48px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    font-weight: 600;
    background: #F2F2F3;
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-micro) var(--ease-smooth-out);
}

.folha-decisao-botao.primario {
    background: var(--color-primary);
    color: #FFFFFF;
}

.folha-decisao-botao:active {
    transform: scale(.98);
}

@media (prefers-reduced-motion: reduce) {

    #folha-decisao,
    #folha-decisao-veu {
        transition-duration: .01s;
    }

    .folha-decisao-botao:active {
        transform: none;
    }
}

.aviso-ancorado {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 12px;
    background: #FFF4DE;
    box-shadow: inset 0 0 0 1px rgba(154, 82, 0, 0.22);
    animation: aviso-ancorado-entra var(--duration-slow) var(--ease-smooth-out);
}

.aviso-ancorado.is-closing {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--toast-fecha) var(--toast-curva),
        transform var(--toast-fecha) var(--toast-curva);
}

@keyframes aviso-ancorado-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.aviso-ancorado-linha {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aviso-ancorado-icone {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    margin-top: -2px;
    background: rgba(154, 82, 0, 0.14);
    color: #8A5200;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: 1;
}

.aviso-ancorado-icone::before {
    content: "!";
}

.aviso-ancorado-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.aviso-ancorado-titulo {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    line-height: 129%;
    font-weight: 600;
    color: var(--color-text);
}

.aviso-ancorado-corpo {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text-soft);
}

.aviso-ancorado-botao {
    align-self: flex-end;
    border: none;
    cursor: pointer;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-caption);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(29, 29, 31, 0.08);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-micro) var(--ease-smooth-out);
}

.aviso-ancorado-botao:active {
    transform: scale(.98);
}

@media (prefers-reduced-motion: reduce) {

    .aviso-ancorado {
        animation: none;
    }

    .aviso-ancorado-botao:active {
        transform: none;
    }

    .aviso-ancorado.is-closing {
        transform: none;
    }
}

.faixa-loja {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    background: #FFF4DE;
}

.faixa-loja p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: var(--fs-caption);
    line-height: 150%;
    font-weight: 500;
    color: #8A5200;
}

.faixa-loja-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8A5200;
    flex: none;
}

/**************************************** PRODUCT AREA *****************************************/

/*----------- HEADER SECTION ----------*/

.header-start {
    width: 100%;
    background: #FFFFFF;
}

.default-area {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 10;
    transition: opacity var(--toast-fecha) var(--toast-curva),
        transform var(--toast-fecha) var(--toast-curva),
        visibility 0s linear var(--toast-fecha);
}

.header-logo {
    height: 64px;
}

.header-logo img {
    height: 50px;
    width: 50px;
    border-radius: 25px;
}

.header-category {
    height: 44px;
    white-space: nowrap;
    position: relative;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s;
    transform: scale(0.98);
    will-change: transform;
    user-select: none;
    cursor: pointer;
}

.header-category.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.header-category .category.selected,
.header-category .category {
    width: max-content;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px !important;
    position: static;
    left: 0px;
    top: 0px;
    order: 0;
    flex-grow: 0;
    margin: 0px 4px;
    display: inline-block;
    cursor: pointer;
}

.header-category .category.selected span {
    color: var(--color-primary);
    font-weight: 500;
}

.header-category .category span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    align-items: center;
    text-align: center;
    color: var(--color-text);
}

/*----------- PRODUCTS SECTION ----------*/

.product-start .title {
    margin-bottom: 8px;
    margin-top: 8px;
    max-width: 384px;
    width: 100%;
}

.product-start .title.title-category {
    margin-top: 24px;
    margin-bottom: 16px;
}

.product-start .title span {
    display: -webkit-box;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 150%;
    letter-spacing: -0.01em;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-start .list {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 120px;
    max-width: 384px;

}

.product-start .list .product {
    max-width: 384px;
    width: 100%;
    height: fit-content;
    border: 0.5px solid #DDDDDD;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    padding: 8px;
    margin: 0 0 16px 0;
    transition: 0.2s;
}

/* Fora do horário recebe o mesmo visual apagado do esgotado; o card ainda abre o produto com a janela em que ele volta */
.product-start .list .product.esgotado,
.product-start .list .product.fora-horario {
    cursor: not-allowed;
    opacity: 0.9;
}

.product-start .list .product.esgotado .product-info-content,
.product-start .list .product.fora-horario .product-info-content {
    filter: saturate(0%) !important;
}

.product-start .list .product.esgotado .product-image-area img,
.product-start .list .product.fora-horario .product-image-area img {
    filter: saturate(0%) !important;
    opacity: 0.9;
}

.product-start .list .product.esgotado .product-info>svg rect,
.product-start .list .product.fora-horario .product-info>svg rect {
    fill: #BFBFBF !important;
}

.product-start .list .product:not(.esgotado):not(.fora-horario):hover,
.product-start .list .product:not(.esgotado):not(.fora-horario):active {
    box-shadow: 0px 0px 24px -8px rgba(0, 0, 0, 0.3);
}

.product-start .list .product-info {
    display: flex;
}

.product-detais:not(.w-photo) .product-info {
    position: relative;
}

.product-detais.w-photo .product-info>img {
    display: none;
}

.product-start .list .product-info-content {
    width: 100%;
    margin-right: 12px;
    min-height: 88px;
    position: relative;
}

.product-start .list .product-image-area {
    position: relative;
    width: 112px;
    height: 112px;
    min-width: 112px;
    min-height: 112px;
    border-radius: 4px;
}

.product-start .list .product-image-area .product-tag,
.destaques-section .destaque-card-img-wrapper .product-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    gap: 2px;
    z-index: 1;
}

.product-start .list .product-image-area .product-tag p,
.destaques-section .destaque-card-img-wrapper .product-tag p {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: #FFFFFF;
}

.product-start .list .product-image-area .product-tag svg,
.destaques-section .destaque-card-img-wrapper .product-tag svg {
    width: 16px;
    height: 16px;
}

.product-start .list .product-image-area .product-tag.mais-vendido,
.destaques-section .destaque-card-img-wrapper .product-tag.mais-vendido {
    background: #FF5511;
}

.product-start .list .product-image-area .product-tag.promocao,
.destaques-section .destaque-card-img-wrapper .product-tag.promocao {
    background: #09A84C;
}

.product-start .list .product-image-area .product-tag.novidade,
.destaques-section .destaque-card-img-wrapper .product-tag.novidade {
    background: #1780E8;
}

.product-start .list .product-image-area .product-tag.esgotado,
.destaques-section .destaque-card-img-wrapper .product-tag.esgotado {
    background: #B00020;
}

/* Produto fora da janela de agendamento, mantido no cardápio por opção da loja (exibirItensForaHorario) */
.product-start .list .product-image-area .product-tag.fora-horario,
.destaques-section .destaque-card-img-wrapper .product-tag.fora-horario {
    background: #F16B24;
}

.product-start .list .product-image-area img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.product-start .list .product-header {
    width: 100%;
    margin-bottom: 22px;
}

.product-start .list .product-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-title);
    line-height: 150%;
    color: var(--color-text);
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.product-start .list .product-weight {
    display: flex;
    width: 100%;
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 4px;
}

.product-start .list .product-weight div {
    height: 20px;
    padding: 0px 4px;
    background: #F5F5F5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.product-start .list .product-weight .serves span:nth-child(3) {
    margin: 0 3.25px;
}

.product-start .list .product-weight img {
    height: 14px;
    width: 14px;
    margin-right: 2px;
}

.product-start .list .product-weight span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-caption);
    color: var(--color-text);
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.product-section .title .subdescription .inventory {
    color: #B00020;
    background: #FFF0F2;
}

.product-section .title .subdescription .inventory::after {
    content: "Últimas unidades!";
}

.product-section .title .subdescription .inventory[quantity="1"]::after {
    content: "Última unidade!";
}

.product-section .title .subdescription .inventory[quantity="0"]::after {
    content: "Produto esgotado!";
}

.product-start .list .product-value {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
}

.product-start .list .product-value .value-final {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 114%;
    color: var(--color-text);
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.product-start .list .product-value .value-final.promo {
    color: #25A65B;
}

.product-start .list .product-value .value-final span {
    color: var(--color-text);
    font-family: "Inter", sans-serif;
    font-size: var(--fs-caption);
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
    margin-right: 4px;
}

.product-start .list .product-value .old-value {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text);
    text-decoration-line: line-through;
}

.product-start .list .product-description {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text);
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-start .list .product-description span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: #999999;
    margin-left: 4px;
}

.product-detais.w-photo .product-description {
    width: calc(100% - 20px);
}

.product-start .list .product .product-info>svg,
.destaque-card-img-wrapper>svg {
    position: absolute;
    right: 4px;
    bottom: 4px;
}

.product-detais.w-photo .product-info>svg {
    right: 8px !important;
    bottom: 8px !important;
}

.product-start .list .product .product-info>svg rect,
.destaque-card-img-wrapper>svg rect {
    fill: var(--color-primary);
}

.product-area {
    padding: 0 16px;
}

.product-area .search-area {
    transition: opacity var(--toast-fecha) var(--toast-curva);
}

.product-area.default-show .search-area {
    opacity: 0;
    z-index: -1;
}

.product-area:not(.default-show) .default-area {
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--toast-distancia) * -1));
    pointer-events: none;
}

.product-area.default-show .default-area {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--toast-abre) var(--toast-curva),
        transform var(--toast-abre) var(--toast-curva),
        visibility 0s linear 0s;
}

.product-area:not(.default-show) .search-area {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    .default-area,
    .product-area.default-show .default-area,
    .product-area .search-area {
        transition: opacity .01s linear, visibility 0s linear;
        transform: none;
    }
}

.product-area.default-show .default-area {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(130%) blur(12px);
    backdrop-filter: saturate(130%) blur(12px);
    border-bottom: 0.5px solid #DDDDDD;
}

.product-area .search-area .title {
    display: flex;
}

.product-area .search-area .seemore-area {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 86px;
    height: 32px;
    position: absolute;
    right: 0;
    cursor: pointer;
}

.product-area .search-area .seemore-area span {
    height: 32px;
    display: flex;
    align-items: center;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-caption) !important;
    line-height: 133%;
    color: var(--color-primary);
    margin-right: 4px;
}

.product-area .search-area .header-category {
    margin-bottom: 16px;
    height: 48px;
    box-sizing: border-box;
    width: calc(100% + 32px);
    max-width: 416px;
    padding: 0 12px;
}

.product-area .search-area .header-category {
    scrollbar-width: none;
}

.product-area .search-area .header-category::-webkit-scrollbar {
    display: none;
}

.product-area .search-area .header-category .category {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px !important;
    min-width: max-content;
    height: 40px;
    align-content: center;
    background: #F7F7F7;
    border-radius: 48px;
    text-align: center;
}

.product-area .search-area .header-category .category span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-body);
    color: var(--color-text);
}

.product-area .search-area .header-category .category.selected span {
    color: var(--color-primary);
}

.product-area .search-area .title span {
    height: 32px;
    font-size: var(--fs-title);
}

.list-left,
.list-right {
    width: 100%;
}

/*---------- BOTTOM BAR SECTION ----------*/

.bottom-bar {
    position: fixed;
    height: 60px;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    background: #FFFFFF;
    border-top: 0.5px solid #DDDDDD;
    z-index: 2000;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(130%) blur(12px);
    backdrop-filter: saturate(130%) blur(12px);
    transition: transform var(--folha-abre) var(--folha-curva),
        visibility 0s linear 0s;
}

html.teclado-aberto .bottom-bar {
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--folha-fecha) var(--folha-curva-saida),
        visibility 0s linear var(--folha-fecha);
}

@media (prefers-reduced-motion: reduce) {

    .bottom-bar,
    html.teclado-aberto .bottom-bar {
        transition: visibility 0s linear;
        transform: none;
    }
}

.bottom-bar .option {
    height: 100%;
    width: 33.33%;
    margin: 0 12px 0 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bottom-bar .option p {
    width: max-content;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text);
    margin: 0 auto;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transition: opacity var(--troca-dur) var(--troca-curva),
        color var(--troca-dur) var(--troca-curva),
        visibility 0s linear var(--troca-dur);
}

.bottom-bar .option>div {
    display: grid;
    grid-template-rows: auto 0fr;
    justify-items: center;
    transition: grid-template-rows var(--troca-dur) var(--troca-curva),
        transform var(--toque-dur) var(--toque-curva);
}

.bottom-bar>.option.selected>div {
    grid-template-rows: auto 1fr;
}

.bottom-bar .option:active>div {
    transform: scale(.92);
    transition: grid-template-rows var(--troca-dur) var(--troca-curva),
        transform 0s;
}

.bottom-bar .option svg path,
.bottom-bar .option svg rect {
    transition: fill var(--troca-dur) var(--troca-curva);
}

@media (prefers-reduced-motion: reduce) {

    .bottom-bar .option p,
    .bottom-bar .option>div,
    .bottom-bar .option:active>div,
    .bottom-bar .option svg path,
    .bottom-bar .option svg rect {
        transition: none;
    }

    .bottom-bar .option:active>div {
        transform: none;
    }
}

.bottom-bar .option-2 svg circle {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    transition: transform var(--enfase-dur) var(--enfase-curva);
}

.bottom-bar.has-bill .option-2 svg circle {
    fill: #25A65B !important;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .bottom-bar .option-2 svg circle {
        transition: none;
    }
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.bottom-bar .selected p {
    color: var(--color-primary);
}

.bottom-bar .item-disabled * {
    fill: var(--color-text) !important;
}

.bottom-bar>.option.selected p {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--troca-dur) var(--troca-curva),
        color var(--troca-dur) var(--troca-curva),
        visibility 0s linear 0s;
}

/*----------- HEADER WITH BACK BUTTON ----------*/

.header {
    position: sticky;
    height: 64px;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 0.5px solid #DDDDDD;
    top: 0;
    left: 0;
    z-index: 2000;
}

.header .back-arrow {
    position: absolute;
    width: 64px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    -webkit-tap-highlight-color: transparent;
}

.chevron {
    --chevron-box: 32px;
    --chevron-gutter: 16px;
    --chevron-inset: calc(var(--chevron-gutter) - var(--chevron-box) * 5 / 24);
    --chevron-inset-rotated: calc(var(--chevron-gutter) - var(--chevron-box) * 8 / 24);
    display: block;
    flex: none;
    width: var(--chevron-box);
    height: var(--chevron-box);
    margin-left: var(--chevron-inset);
    color: var(--color-primary);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: center;
}

.chevron-voltar {
    transform: rotate(90deg);
    margin-left: var(--chevron-inset-rotated);
}

.pagina-entrando .chevron-voltar {
    animation: chevron-vira var(--pagina-dur) var(--pagina-curva);
}

@keyframes chevron-vira {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(90deg);
    }
}

.pagina-voltando .chevron:not(.chevron-voltar) {
    animation: chevron-desvira var(--pagina-volta-dur) var(--pagina-curva);
}

@keyframes chevron-desvira {
    from {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .pagina-entrando .chevron-voltar,
    .pagina-voltando .chevron:not(.chevron-voltar) {
        animation: none;
    }
}

.header .logo {
    height: 50px;
    width: 50px;
    border-radius: 25px;
}

/*----------- GLOBAL SECTION ----------*/

.center-rel {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-rel-hor {
    position: relative;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.center-rel-ver {
    position: relative;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

.center-abs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-abs-hor {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.center-abs-ver {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

.center-fix {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center-fix-hor {
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.center-fix-ver {
    position: fixed;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

/***********************************************************************************************/

/**************************************** SEARCH AREA ******************************************/

.search-start {
    padding-top: 16px;
}

.search-area.section .search-start {
    height: 100vh;
    padding: 24px 16px;
}

.search-start .divider {
    width: calc(100% - 16px);
}

.search-area .header-logo {
    border-bottom: 0.5px solid #DDDDDD;
}

.search-area .search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: 384px;
    width: 100%;
    height: 40px;
    padding: 0 16px 0 12px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 12px;
    cursor: text;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--duration-quick) var(--ease-out);
}

.search-area .search:focus-within {
    box-shadow: var(--field-focus-ring);
}

.search-area .search svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
}

.search-area .search input[type="text"] {
    position: static;
    flex: 1;
    min-width: 0;
    width: auto;
    height: 20px;
    padding-left: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 143%;
    display: flex;
    align-items: center;
    color: var(--color-text);
    order: 1;
    border: none;
    border-color: transparent;
    margin: 0;
}

.search-area .search input[type="text"]:focus:not([readonly]) {
    border: none;
    box-shadow: none;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {

    .search-area .search {
        transition: none;
    }
}

/*.search-area .search input[type="text"]:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}*/

.product-section textarea,
.address-area textarea,
.checkout-field input,
.bottom-modal-fields input,
.dropdown-districts-search input[type="text"] {
    transition: box-shadow var(--duration-quick) var(--ease-out);
}

.product-section textarea:focus-visible,
.address-area textarea:focus-visible,
.checkout-field input:focus-visible,
.bottom-modal-fields input:focus-visible,
.dropdown-districts-search input[type="text"]:focus-visible {
    outline: none;
    box-shadow: var(--field-focus-ring);
}

.coupon-field-inner {
    position: relative;
    border-radius: 8px;
}

.coupon-field-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--field-focus-ring);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-quick) var(--ease-out);
}

.coupon-field-inner:focus-within::after {
    opacity: 1;
}

.coupon-field input[type="text"]:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {

    .product-section textarea,
    .address-area textarea,
    .checkout-field input,
    .bottom-modal-fields input,
    .dropdown-districts-search input[type="text"],
    .coupon-field-inner::after {
        transition: none;
    }
}

.search-area .product-start .title {
    margin: 16px 0px 8px 0px;
}

.search-area .product-start .list .category {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px;
    width: 100%;
    height: 48px;
    background: var(--color-primary-category);
    border-radius: 8px;
    border: none;
    max-width: unset;
}

.search-area .product-start .list .category:nth-child(odd) {
    /* margin: 0 16px 16px 0; */
}

.search-area .product-start .list .category span {
    position: static;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-primary);
    order: 0;
    align-self: stretch;
    margin: 0 auto;
}

.search-area-second .header-logo {
    height: 64px;
    border-bottom: 0.5px solid #DDDDDD;
    display: flex;
}

.search-area-second .header-logo .icon-search {
    width: 18px;
    height: 18px;
    margin-left: 16px;
    margin-right: 8px;
    margin-top: 1px;
}

.search-area-second .header-logo .icon-search-close {
    width: 20px;
    height: 20px;
    float: right;
    margin-right: 15.09px;
}

.search-area-second .header-logo input[type="text"]:focus {
    outline: none;
    box-shadow: none;
}

.search-area-second .header-logo input[type="text"] {
    width: calc(100% - 80px);
    height: 20px;
    padding-left: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    display: flex;
    align-items: center;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    color: var(--color-text);
    order: 1;
    border: none;
    border-color: transparent;
    margin: 0;
}

.search-area-second .header-logo div {
    display: flex;
    margin-top: 22px;
    width: 100%;
}

.no-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 60px;
}

.no-result span:nth-child(1) {
    position: static;
    width: 328px;
    height: 32px;
    left: calc(50% - 328px/2);
    top: 0px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-screen);
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--color-primary);
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin: 8px 0px;
}

.no-result span:nth-child(2) {
    position: static;
    width: 328px;
    height: 20px;
    left: calc(50% - 328px/2);
    top: 40px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: var(--fs-title);
    line-height: 125%;
    display: flex;
    align-items: center;
    font-feature-settings: 'tnum' on, 'lnum' on, 'cpsp' on;
    color: var(--color-text);
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    margin: 8px 0px;
}

/********** PRODUCT SECTION **********/

.product-section,
.cart-section {
    width: 100%;
    background: #FFFFFF;
    margin: 0 auto;
    max-width: 720px;
    height: calc(100% - 16px);
    overflow: hidden;
    position: fixed;
    z-index: 10000;
    border-radius: 24px 24px 0 0;
    bottom: 0%;
    left: 0;
    right: 0;
    transform: translateY(100%);
    opacity: 0;
    filter: blur(var(--folha-desfoque));
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--folha-fecha) var(--folha-curva-saida),
        opacity calc(var(--folha-fecha) / 2) linear calc(var(--folha-fecha) / 2),
        filter calc(var(--folha-fecha) / 2) linear calc(var(--folha-fecha) / 2),
        visibility 0s linear var(--folha-fecha);
    will-change: transform, opacity;
}

@supports (height: 100dvh) {

    .product-section,
    .cart-section {
        height: calc(100dvh - 16px);
    }
}

html.teclado-aberto .product-section.opened,
html.teclado-aberto .cart-section.opened {
    box-sizing: border-box;
    padding-bottom: calc(var(--teclado, 0px) + 8px);
}

html.teclado-aberto .bottom-modal.is-open {
    padding-bottom: var(--teclado, 0px);
}

html.teclado-aberto .cart-section .bottom-action {
    position: static;
}

.cart-section > .section {
    min-height: 100%;
}

.product-section.opened,
.cart-section.opened {
    transform: translateY(0);
    opacity: 1;
    filter: none;
    visibility: visible;
    pointer-events: auto;
    overflow: auto;
    overscroll-behavior: contain;
    transition: transform var(--folha-abre) var(--folha-curva),
        opacity var(--folha-abre) var(--folha-curva),
        filter var(--folha-abre) var(--folha-curva),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {

    .product-section,
    .cart-section,
    .product-section.opened,
    .cart-section.opened {
        transition: opacity .01s linear, visibility 0s linear;
        transform: translateY(0);
        filter: none;
    }
}

.product-section.opened~.section-opacity,
.cart-section.opened~.section-opacity {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--folha-abre) var(--folha-curva),
        visibility 0s linear 0s;
}

.section-opacity {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--folha-fecha) linear,
        visibility 0s linear var(--folha-fecha);
}

@supports selector(:has(*)) {
    body:has(> .section-opacity) {
        position: relative;
    }

    .section-opacity {
        position: absolute;
    }
}

@media (prefers-reduced-motion: reduce) {

    .section-opacity {
        transition: opacity .01s linear, visibility 0s linear;
    }
}

.product-section .main-area {
    width: 100%;
    padding-bottom: 40px;
    min-height: 100vh;
}

.product-section .main-area.center-rel-hor,
.product-section .image.center-rel-hor {
    left: 0;
    transform: none;
    margin-left: auto;
    margin-right: auto;
}

.product-section .image {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
}

.product-section .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.product-section .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 32px;
    padding: 0px 16px;
}

.product-section .info .product-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}

.product-section .info .product-tag-container .product-tag {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
}

.product-section .info .product-tag-container .product-tag.mais-vendido {
    background: #FF5511;
    color: #FFFFFF;
}

.product-section .info .product-tag-container .product-tag.promocao {
    background: #09A84C;
    color: #FFFFFF;
}

.product-section .info .product-tag-container .product-tag.novidade {
    background: #1780E8;
    color: #FFFFFF;
}

.product-section .info .product-tag-container .product-tag.esgotado {
    background: #B00020;
    color: #FCFCFC;
}

/* Selo "Fora do horário • Seg-Qui | 11-16h": informa quando o produto volta, em tom mais leve que o Esgotado */
/* A linha ocupa a largura toda para o selo ficar sozinho, acima das demais tags, sem esticar o fundo dele */
.product-section .info .product-tag-container .fora-horario-linha {
    flex-basis: 100%;
    display: flex;
}

.product-section .info .product-tag-container .product-tag.fora-horario {
    gap: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    background: #FFF2EB;
    color: #D96020;
    font-size: 12px;
    line-height: 16px;
}

/* Skeleton do selo inteiro na prévia do produto, no tamanho de "Fora do horário • Seg-Qui | 11-16h" */
.product-section .info .product-tag-container .janela-skeleton {
    display: block;
    width: 192px;
    max-width: 100%;
    height: 20px;
    border-radius: 4px;
}

.product-section .info .product-tag-container .cashback {
    height: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: var(--fs-caption);
    display: flex;
    align-items: center;
    padding: 0 4px;
    border-radius: 4px;
    background: #E1F5E9;
    border: 0.5px solid #E1F5E9;
    color: #25A65B;
    font-weight: 500;
}

.product-section .description {
    user-select: text;
}

.product-section .description span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 171%;
    color: var(--color-text);
    user-select: text;
}

.product-section .tags-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background-color: #F5F5F5;
}

.product-section .tags-container .product-tag {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: #1F87ED;
}

.product-section .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.product-section .title h5 {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-section);
    line-height: 120%;
    color: var(--color-text);
}

.product-section .title .subdescription {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    position: static;
    width: 328px;
    left: 0px;
    top: 48px;
    order: 1;
    flex-grow: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.product-section .title .subdescription span {
    height: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-caption);
    display: flex;
    align-items: center;
    color: var(--color-text);
    padding: 0 4px;
    border-radius: 4px;
    background: #F5F5F5;
}

.product-section .pizza-alert {
    padding: 8px 12px;
    border-radius: 8px;
    background: #F5F5F5;
    margin-bottom: -24px;
    width: 100%;
}

.product-section .pizza-alert h1 {
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 171%;
    margin-bottom: 4px;
}

.product-section .pizza-alert p {
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-caption);
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
}

.product-section .pizza-alert.expensive p::after {
    content: "Ao escolher mais de um sabor, será cobrado o preço cheio do sabor mais caro.";
}

.product-section .note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
    height: 184px;
    margin-top: 20px;
    border-radius: 4px;
    padding: 0px 16px 0px 16px;
}

.product-section .note-text {
    position: static;
    height: 20px;
    left: 0px;
    top: 0px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    color: var(--color-text);
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin: 4px 0px;
}

.product-section textarea {
    display: block;
    position: static;
    height: 48px;
    min-height: 48px;
    max-height: 168px;
    overflow-y: auto;
    resize: none;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 8px;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    margin: 4px 0px;
    padding: 4px 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    color: var(--color-text);
}

.product-section .bottom-options-container {
    position: sticky;
    width: 100%;
    bottom: 0%;
    left: 0%;
    z-index: 10;
    transition: transform var(--folha-abre) var(--folha-curva),
        visibility 0s linear 0s;
}

html.teclado-aberto .product-section .bottom-options-container {
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--folha-fecha) var(--folha-curva-saida),
        visibility 0s linear var(--folha-fecha);
}

@media (prefers-reduced-motion: reduce) {

    .product-section .bottom-options-container,
    html.teclado-aberto .product-section .bottom-options-container {
        transition: visibility 0s linear;
        transform: none;
    }
}

.product-section .bottom-options-container .hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background-color: #EBF5FF;
    color: #0962BA;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    opacity: 0;
    transform: translateY(20px);
    max-height: 0;
    overflow: hidden;
    transition:
        opacity 0.5s ease-in,
        transform 0.5s ease-in,
        max-height 0.5s ease-in;
}

.product-section .bottom-options-container.show .hint {
    opacity: 1;
    transform: translateY(0);
    max-height: 48px;
}

.product-section .bottom-options-container .bottom-options {
    position: sticky;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    background: #FFFFFF;
    border-top: 0.5px solid #DDDDDD;
}

.shine {
    position: relative;
    overflow: hidden;
    background: var(--skel-base);
    border-radius: var(--skel-raio);
}

.shine::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            var(--skel-brilho) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: skel-varredura var(--skel-pulso) var(--ease-linear) infinite;
}

@keyframes skel-varredura {
    0% {
        transform: translateX(-100%);
    }

    66% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .shine::after {
        display: none;
    }
}

/*Skeleton*/

.list-product .skeleton {
    width: 100%;
    max-width: 384px;
}

.list-product .skeleton>.shine {
    width: 128px;
    height: 16px;
    margin: 28px 0 20px;
}

.list-product .skeleton>div:not(.shine) {
    display: flex;
    gap: 12px;
    padding: 8px;
    box-sizing: border-box;
    border: 0.5px solid #DDDDDD;
    border-radius: 12px;
    margin-bottom: 16px;
}

.list-product .skeleton>div:not(.shine)>div:not(.shine) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 88px;
}

.list-product .skeleton>div:not(.shine)>div:not(.shine)>.shine:nth-child(1),
.list-product .skeleton>div:not(.shine)>div:not(.shine)>.shine:nth-child(2) {
    height: 16px;
    margin: 4px 0;
}

.list-product .skeleton>div:not(.shine)>div:not(.shine)>.shine:nth-child(1) {
    width: 100%;
}

.list-product .skeleton>div:not(.shine)>div:not(.shine)>.shine:nth-child(2) {
    width: 62%;
}

.list-product .skeleton>div:not(.shine)>div:not(.shine)>.shine:nth-child(3) {
    width: 72px;
    height: 14px;
    margin: auto 0 3px;
}

.list-product .skeleton>div:not(.shine)>.shine {
    flex: none;
    width: 112px;
    height: 112px;
    border-radius: 4px;
}

.product-section .skeleton {
    padding: 0;
}

.product-section .skeleton>div:nth-child(1)>.shine {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0;
}

.product-section .skeleton>div:nth-child(1)>div:nth-child(2) {
    margin: 16px 0 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-section .skeleton>div:nth-child(1)>div>.shine:nth-child(1) {
    width: 70%;
    height: 20px;
    margin: 2px 0;
}

.product-section .skeleton>div:nth-child(1)>div>.shine:nth-child(2) {
    width: 40%;
    height: 14px;
    margin: 15px 0 3px;
}

.product-section .skeleton>div:nth-child(1)>div>.shine:nth-child(n+3) {
    height: 14px;
    margin: 5px 0;
}

.product-section .skeleton>div:nth-child(1)>div>.shine:nth-child(3) {
    width: 100%;
    margin-top: 17px;
}

.product-section .skeleton>div:nth-child(1)>div>.shine:nth-child(4) {
    width: 92%;
}

.product-section .skeleton>div:nth-child(1)>div>.shine:nth-child(5) {
    width: 64%;
}

.product-section .skeleton>div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    border-top: 0.5px solid #DDDDDD;
}

.product-section .skeleton>div:nth-child(2)>.shine:nth-child(1) {
    flex: none;
    width: 124px;
    height: 48px;
    border-radius: 12px;
}

.product-section .skeleton>div:nth-child(2)>.shine:nth-child(2) {
    flex: 0 1 192px;
    margin-left: auto;
    height: 48px;
    border-radius: 12px;
}

.cart-section .skeleton {
    margin: 0 auto;
}

.cart-section .skeleton>div:nth-child(1) {
    width: 100%;
    height: 48px;
    border-bottom: 0.5px solid #DDDDDD;
    position: relative;
}

.cart-section .skeleton>div:nth-child(1)>.shine {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 16px;
}

.cart-section .skeleton>div:nth-child(2) {
    padding: 16px 16px 0;
}

.cart-section .skeleton>div:nth-child(2)>div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
}

.cart-section .skeleton>div:nth-child(2)>div:nth-child(1) .shine:nth-child(1) {
    width: 110px;
    height: 14px;
}

.cart-section .skeleton>div:nth-child(2)>div:nth-child(1) .shine:nth-child(2) {
    width: 136px;
    height: 14px;
}

.cart-section .skeleton>div:nth-child(3) {
    padding: 16px 16px 14px;
}

.cart-section .skeleton>div:nth-child(3)>div:not(.shine) {
    border: 0.5px solid #DDDDDD;
    border-radius: 12px;
    padding: 8px;
    display: flex;
}

.cart-section .skeleton>div:nth-child(3)>div:not(.shine):nth-child(1) {
    margin-bottom: 12px;
}

.cart-section .skeleton>div:nth-child(3)>div>.shine {
    width: 88px;
    height: 88px;
    min-width: 88px;
    flex: none;
    border-radius: 4px;
}

.cart-section .skeleton>div:nth-child(3)>div>div:not(.shine) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 88px;
    padding-left: 8px;
}

.cart-section .skeleton>div:nth-child(3)>div>div>.shine {
    width: 100%;
    height: 14px;
    margin: 3px 0;
}

.cart-section .skeleton>div:nth-child(3)>div>div>div:nth-child(2) {
    display: flex;
}

.cart-section .skeleton>div:nth-child(3)>div>div>div:nth-child(2)>.shine:nth-child(1) {
    width: 60%;
    height: 14px;
    margin: 3px 0;
}

.cart-section .skeleton>div:nth-child(3)>div>div>div:nth-child(2)>.shine:nth-child(2) {
    display: none;
}

.cart-section .skeleton>div:nth-child(3)>div>div>div:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    margin-top: auto;
}

.cart-section .skeleton>div:nth-child(3)>div>div>div:nth-child(3)>.shine:nth-child(1) {
    width: 88px;
    height: 16px;
    flex: none;
}

.cart-section .skeleton>div:nth-child(3)>div>div>div:nth-child(3)>.shine:nth-child(2) {
    width: 94px;
    height: 32px;
    flex: none;
}

.cart-section .skeleton>div:nth-child(3)>.shine {
    width: 116px;
    height: 12px;
    margin: 30px auto 0;
}

.cart-section .skeleton>div:nth-child(4) {
    display: flex;
    align-items: center;
    height: 20px;
    margin-top: 16px;
    padding: 0 16px;
}

.cart-section .skeleton>div:nth-child(4) .shine:nth-child(1) {
    width: 128px;
    height: 14px;
}

.cart-section .skeleton>div:nth-child(4) .shine:nth-child(2) {
    display: none;
}

.cart-section .skeleton>div:nth-child(5),
.cart-section .skeleton>div:nth-child(6),
.cart-section .skeleton>div:nth-child(7) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 16px;
}

.cart-section .skeleton>div:nth-child(5) .shine,
.cart-section .skeleton>div:nth-child(6) .shine {
    height: 14px;
    margin: 3px 0;
}

.cart-section .skeleton>div:nth-child(7) .shine {
    height: 16px;
    margin: 4px 0;
}

.cart-section .skeleton>div:nth-child(5) .shine:nth-child(1) {
    width: 72px;
}

.cart-section .skeleton>div:nth-child(5) .shine:nth-child(2) {
    width: 80px;
}

.cart-section .skeleton>div:nth-child(6) .shine:nth-child(1) {
    width: 96px;
}

.cart-section .skeleton>div:nth-child(6) .shine:nth-child(2) {
    width: 64px;
}

.cart-section .skeleton>div:nth-child(7) .shine:nth-child(1) {
    width: 56px;
}

.cart-section .skeleton>div:nth-child(7) .shine:nth-child(2) {
    width: 88px;
}

.cart-section .skeleton>div:nth-child(8) {
    display: flex;
    align-items: center;
    height: 24px;
    margin-top: 16px;
    padding: 0 16px;
}

.cart-section .skeleton>div:nth-child(8) .shine:nth-child(1) {
    width: 144px;
    height: 14px;
}

.cart-section .skeleton>.shine {
    width: calc(100% - 32px);
    margin-left: 16px;
    height: 40px;
    position: absolute;
    bottom: 32px;
    border-radius: 12px;
}


.final-bill {
    padding-bottom: 40px;
}

.final-bill .skeleton {
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 16px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.final-bill .skeleton>div:nth-child(1) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.final-bill .skeleton>div:nth-child(1)>div:not(.shine) {
    display: flex;
    flex-direction: column;
}

.final-bill .skeleton>div:nth-child(1)>div:not(.shine)>.shine:nth-child(1) {
    width: 124px;
    height: 16px;
    margin: 4px 0;
}

.final-bill .skeleton>div:nth-child(1)>div:not(.shine)>.shine:nth-child(2) {
    width: 96px;
    height: 12px;
    margin: 2px 0;
}

.final-bill .skeleton>div:nth-child(1)>.shine {
    flex: none;
    width: 88px;
    height: 20px;
    border-radius: 4px;
}

.final-bill .skeleton>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.5px solid #DDDDDD;
    border-radius: 12px;
}

.final-bill .skeleton>div:nth-child(2)>.shine:nth-child(1) {
    width: 64px;
    height: 12px;
    margin: 2px 0;
}

.final-bill .skeleton>div:nth-child(2)>.shine:nth-child(2) {
    width: 172px;
    height: 16px;
    margin: 4px 0;
}

.final-bill .skeleton>div:nth-child(3) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-bill .skeleton>div:nth-child(3)>div {
    display: flex;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.5px solid #DDDDDD;
    border-radius: 12px;
}

.final-bill .skeleton>div:nth-child(3)>div>.shine {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 4px;
}

.final-bill .skeleton>div:nth-child(3)>div>div:not(.shine) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.final-bill .skeleton>div:nth-child(3)>div>div:not(.shine)>.shine:nth-child(1),
.final-bill .skeleton>div:nth-child(3)>div>div:not(.shine)>.shine:nth-child(2) {
    height: 14px;
    margin: 3px 0;
}

.final-bill .skeleton>div:nth-child(3)>div>div:not(.shine)>.shine:nth-child(1) {
    width: 100%;
}

.final-bill .skeleton>div:nth-child(3)>div>div:not(.shine)>.shine:nth-child(2) {
    width: 60%;
    margin-bottom: 7px;
}

.final-bill .skeleton>div:nth-child(3)>div>div:not(.shine)>.shine:nth-child(3) {
    width: 88px;
    height: 16px;
    margin: auto 0 4px;
}

.final-bill .skeleton>div:nth-child(4) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.final-bill .skeleton>div:nth-child(4)>.shine {
    width: 88px;
    height: 14px;
    margin: 3px 0;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine) {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div>.shine {
    flex: none;
    height: 14px;
    margin: 3px 0;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div:nth-child(1)>.shine:nth-child(1) {
    width: 64px;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div:nth-child(1)>.shine:nth-child(2) {
    width: 80px;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div:nth-child(2)>.shine:nth-child(1) {
    width: 44px;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div:nth-child(2)>.shine:nth-child(2) {
    width: 64px;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div:nth-child(3)>.shine {
    height: 16px;
    margin: 4px 0;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div:nth-child(3)>.shine:nth-child(1) {
    width: 48px;
}

.final-bill .skeleton>div:nth-child(4)>div:not(.shine)>div:nth-child(3)>.shine:nth-child(2) {
    width: 92px;
}

.final-bill .skeleton>div:nth-child(5) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.final-bill .skeleton>div:nth-child(5)>.shine {
    flex: none;
    height: 14px;
    margin: 5px 0;
}

.final-bill .skeleton>div:nth-child(5)>.shine:nth-child(1) {
    width: 112px;
}

.final-bill .skeleton>div:nth-child(5)>.shine:nth-child(2) {
    width: 132px;
}

.final-bill .skeleton>div:nth-child(6) {
    display: flex;
    flex-direction: column;
}

.final-bill .skeleton>div:nth-child(6)>.shine {
    height: 14px;
    margin: 3px 0;
}

.final-bill .skeleton>div:nth-child(6)>.shine:nth-child(1) {
    width: 72px;
}

.final-bill .skeleton>div:nth-child(6)>.shine:nth-child(2) {
    width: 100%;
    margin-top: 11px;
}

.final-bill .skeleton>div:nth-child(6)>.shine:nth-child(3) {
    width: 68%;
}

.final-bill .skeleton>div:nth-child(6)>div:not(.shine) {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    border-top: 0.5px solid #DDDDDD;
    padding-top: 8px;
}

.final-bill .skeleton>div:nth-child(6)>div:not(.shine)>.shine {
    height: 14px;
    margin: 3px 0;
}

.final-bill .skeleton>div:nth-child(6)>div:not(.shine)>.shine:nth-child(1) {
    width: 152px;
}

.final-bill .skeleton>div:nth-child(6)>div:not(.shine)>.shine:nth-child(2) {
    width: 120px;
}

.product-section .confirm {
    flex: 0 1 auto;
    margin-left: auto;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    background: #CCCCCC;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    line-height: 143%;
    font-weight: 500;
    color: #FFFFFF;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--toque-dur) var(--toque-curva), background-color var(--troca-dur) var(--troca-curva);
}

.product-section .confirm:not([disabled]):active {
    transform: scale(.98);
    transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {

    .product-section .confirm {
        transition: none;
    }

    .product-section .confirm:not([disabled]):active {
        transform: none;
    }
}

.product-section .confirm-enabled {
    background: var(--color-primary);
}


.product-section .confirm-disabled {
    background: var(--color-primary);
}

.product-section .confirm span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}

.product-section .confirm div {
    display: inline-flex;
    flex: none;
    min-width: 84px;
    justify-content: flex-end;
}

.product-section .confirm div span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    color: #FFFFFF;
    width: max-content;
}

.product-section .confirm[disabled] {
    background: #CCCCCC;
}

/*********** BILL SECTION **********/

.no-bill {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 328px;
    height: 224px;
}

.no-bill div {
    flex-direction: column;
    width: 328px;
    height: 44px;
    order: 1;
    flex-grow: 0;
    text-align: center;
    margin-top: 32px;
}

.no-bill div .first {
    width: 328px;
    height: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 150%;
    color: var(--color-text);
}

.no-bill div .second {
    width: 328px;
    height: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 167%;
    color: var(--color-text);
    order: 1;
    flex-grow: 0;
    margin-top: 4px;
}

.no-bill svg .fill {
    fill: var(--color-primary);
}

.bill {
    max-width: calc(100% - 32px);
    min-width: 0;
    padding: 16px 0 40px;
    min-height: calc(100vh - 170px);
}

.bill .bill-title {
    margin-bottom: 16px;
    position: relative;
}

.bill .bill-title span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 150%;
    color: var(--color-text);
}

.bill .bill-title button {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    background: none;
    border: none;
}

.recado-loja {
    border-radius: 12px;
    border: 0.5px solid #DDD;
    background: #F5F5F5;
    padding: 8px;
    margin: 24px 0;
}

.recado-loja h3 {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-title);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* margin-bottom: 8px; */
    color: var(--color-text);
}

.recado-loja p {
    color: var(--color-text);
    font-family: "Inter", sans-serif;
    font-size: var(--fs-caption);
    font-style: normal;
    font-weight: 500;
    line-height: 133%;
}

.bill .sub-title {
    margin-bottom: 8px;
    align-items: center;
}

.bill .sub-title span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 150%;
    color: var(--color-text);
}

.bill .order-bill {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bill .order-bill div {
    display: flex;
    align-items: center;
}

.bill .order-bill span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    color: var(--color-text);
}

.bill .order-bill div span:nth-child(2) {
    position: absolute;
    right: 0;
    left: unset;
    top: unset;
}

.bill .order-bill div:last-child span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 150%;
    color: var(--color-text);
    user-select: text;
}

.bill .order-bill.only-total div:last-child {
    width: 100%;
    height: 40px;
    background: #F7F7F7;
    border-radius: 8px;
    padding: 10px 8px 8px 8px;
}

.bill .order-bill.only-total div:last-child span:nth-child(2) {
    right: 8px;
}

.bill .order-bill div span.free-shipping {
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    color: #25A65B;
}

.bill .order-bill .cashback span {
    color: #25A65B;
}

.bill .buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 0;
    place-content: space-between;
}

.bill .buttons .value-area {
    height: 40px;
    width: 88px;
    text-align: center;
    align-items: center;
    justify-content: left;
    display: flex;
}

.bill .value {
    width: 100%;
    height: 40px;
    background: #F7F7F7;
    border-radius: 8px;
    padding: 10px 8px 8px 8px;
}

.bill .value span {
    height: 24px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 150%;
    font-feature-settings: 'tnum' on, 'lnum' on, 'cpsp' on;
    color: var(--color-text);
}

.bill .value span:nth-child(2) {
    float: right;
    margin: 0;
}

.bill .value-area span:nth-child(1) {
    margin-right: 2px;
}

.bill .value-area span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    text-align: center;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    color: var(--color-text);
    line-height: 114%;
}

.elegant-button .remove path {
    fill: #B00020;
}

.cart-area .item-pedido .elegant-button .remove {
    height: 32px;
}

.cart-area .bill .buttons .value-area {
    flex: 1;
    width: auto;
    min-width: 0;
    justify-content: flex-start;
    white-space: nowrap;
    transform-origin: left center;
}

.cart-area .item-pedido .elegant-button {
    flex: none;
    margin-right: -8px;
}

.cart-area .item-pedido .elegant-button div,
.cart-area .item-pedido .elegant-button h3 {
    height: 32px;
}

.cart-area .bill .buttons .value-area {
    height: 32px;
}

.cart-area .item-pedido .elegant-button div::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 40px;
    transform: translateY(-50%);
}

.cart-area .item-pedido .pedido-produto .description .product-title {
    margin-bottom: 0;
}

.cart-area .item-pedido .elegant-button div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-ten);
    transform: translate(-50%, -50%) scale(.8);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity var(--toque-dur) var(--toque-curva),
                transform var(--toque-dur) var(--toque-curva);
}

.cart-area .item-pedido .elegant-button div:active::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .cart-area .item-pedido .elegant-button div::before {
        transform: translate(-50%, -50%);
        transition: opacity .01s linear;
    }
}

.item-pedido .pedido-extra {
    padding: 4px 0 0;
    margin-top: 8px;
    border-top: 0.5px solid #DDDDDD;
}

.item-pedido .pedido-extra:not(.observacao) {
    display: grid;
    gap: 2px;
}

.item-pedido .pedido-extra .title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-caption);
    line-height: 133%;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    color: var(--color-text);
}

.item-pedido .pedido-extra span:not(.title) {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 133%;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    color: var(--color-text);
}

/*********** FLOATING BUTTON ***********/

.demo-button {
    background: #e4002b;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 53.5%;
    bottom: 76px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #fcfcfc;
}

.hide .demo-button {
    bottom: 124px;
}

.floating-button {
    position: fixed;
    left: 50%;
    bottom: 68px;
    --fb-repouso: translate(-50%, 0%);
    transform: var(--fb-repouso);
    width: calc(100% - 32px);
    max-width: 384px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 12px;
    z-index: 10;
    transition: opacity .18s var(--ease-smooth-out),
        transform .18s var(--ease-smooth-out),
        visibility 0s linear 0s;
}

.floating-button.impacto:not(.recolhido) {
    animation: fb-impacto var(--fb-impacto-dur, 180ms) ease-out;
}

@keyframes fb-impacto {
    0% {
        transform: var(--fb-repouso) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }

    40% {
        transform: var(--fb-repouso) scale(.985);
        animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
    }

    100% {
        transform: var(--fb-repouso) scale(1);
    }
}

.floating-button.recolhido,
html.teclado-aberto .floating-button {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, var(--distance-medium)) scale(var(--scale-large));
    pointer-events: none;
    transition: opacity .18s var(--ease-smooth-out),
        transform .18s var(--ease-smooth-out),
        visibility 0s linear .18s;
}

@media (prefers-reduced-motion: reduce) {

    .floating-button,
    .floating-button.recolhido,
    html.teclado-aberto .floating-button {
        transition: opacity .01s linear, visibility 0s linear;
        transform: translate(-50%, 0%);
    }

    .floating-button.impacto:not(.recolhido) {
        animation: none;
    }
}

.floating-button-qtd {
    min-width: 24px;
    padding: 0px 8px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    color: var(--color-primary);
    margin-right: 8px;
}

.floating-button-qtd:not(.rol-com-texto) {
    background: none;
}

.floating-button-qtd.rol-com-texto {
    animation: fb-qtd-surge var(--duration-fast) var(--enfase-curva) var(--duration-micro) backwards;
}

@keyframes fb-qtd-surge {
    from {
        transform: scale(0);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-button-qtd.rol-com-texto {
        animation: none;
    }
}

.floating-button>p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    color: #FFFFFF;
}

.rol {
    display: inline-flex;
    white-space: pre;
}

.rol-slot {
    position: relative;
    display: inline-flex;
    flex: none;
    justify-content: center;
    align-items: baseline;
    overflow: hidden;
    line-height: 1.3;
}

@supports (overflow: clip) {
    .rol-slot {
        overflow-x: visible;
        overflow-y: clip;
    }

    .rol-slot.rol-cortando {
        overflow-x: clip;
    }
}

.rol-medida {
    visibility: hidden;
    white-space: pre;
}

.rol-leitura {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.rol-face {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre;
}

.elegant-button h3.rolando::after {
    content: none;
}

.floating-button-qtd .rol-slot,
.floating-button-value .rol-slot {
    line-height: inherit;
}

.floating-button-value {
    position: absolute;
    right: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    color: #FFFFFF;
}

.hide {
    display: none;
}

svg {
    vertical-align: middle;
}

svg:not(.not-wl):not(.datepicker-modal *):not(.timepicker-container *):not(.linktree-button.pedir-online *):not(.mapboxgl-map *) * {
    fill: var(--color-primary);
}

/********** QR CODE **********/

#r-options .leitura-iniciada {
    height: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 167%;
    display: flex;
    align-items: center;
    color: var(--color-text);
    padding: 0 12px;
    margin: 8px;
}

#r-options .leitura-tipo {
    width: 100%;
    display: flex;
    justify-content: center;
    color: var(--color-text);
    font-variant-numeric: lining-nums tabular-nums;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 400;
    line-height: 143%;
    padding: 12px 0 8px;
}

#r-options .alterar-camera {
    position: absolute;
    right: 0px;
    height: 20px;
    padding: 0 12px;
    margin: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 167%;
    align-items: center;
    text-align: center;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    color: var(--color-primary);
    cursor: pointer;
}

#r-options {
    width: 100%;
    height: 100%;
}

#r-options svg {
    position: fixed;
    top: 0;
    right: 0;
    margin: 13px 13px 0 0;
    cursor: pointer;
}

body.qr div {
    display: none;
}

#reader,
#r-options {
    display: none;
}

body.qr #reader,
body.qr #r-options {
    display: block;
}

body.qr #reader,
body.qr #r-options {
    z-index: 10000;
    position: relative;
    background: #f5f5f5;
}

body.qr #reader {
    display: flex;
    justify-content: center;
}

body.qr #r-options {
    display: block;
}

body.qr #r-options p {
    display: flex;
    align-items: center;
}

/********* QR ALERT *********/

.cart-section.opened.bottom-modal-aberto {
    overflow: hidden;
}

.cart-section.opened:has(.bottom-modal.is-open) {
    overflow: hidden;
}

.product-section:focus,
.cart-section:focus,
.bottom-modal:focus {
    outline: none;
}

.bottom-modal-fade {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10001;
    left: 0;
    top: calc(0px + var(--rolagem-carrinho, 0px));
    touch-action: none;
    overscroll-behavior: contain;
}

.bottom-modal {
    position: fixed;
    height: auto;
    width: 100%;
    border-radius: 24px 24px 0 0;
    background: #FFFFFF;
    bottom: calc(0px - var(--rolagem-carrinho, 0px));
    left: 0;
    z-index: 10002;
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateY(100%);
    opacity: 0;
    filter: blur(var(--folha-desfoque));
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--folha-fecha) var(--folha-curva-saida),
        opacity calc(var(--folha-fecha) / 2) linear calc(var(--folha-fecha) / 2),
        filter calc(var(--folha-fecha) / 2) linear calc(var(--folha-fecha) / 2),
        visibility 0s linear var(--folha-fecha);
    will-change: transform, opacity;
}

.bottom-modal.is-open {
    transform: translateY(0);
    opacity: 1;
    filter: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--folha-abre) var(--folha-curva),
        opacity var(--folha-abre) var(--folha-curva),
        filter var(--folha-abre) var(--folha-curva),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {

    .bottom-modal,
    .bottom-modal.is-open {
        transition: opacity .01s linear, visibility 0s linear;
        transform: translateY(0);
        filter: none;
    }
}

#bottom-modal svg:nth-child(1) {
    display: flex;
    height: 32px;
}

#bottom-modal-area {
    width: calc(100% - 32px);
    max-width: 392px;
    padding-bottom: 24px;
}

#bottom-modal:not(.bottom-modal-flags) #bottom-modal-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bottom-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#bottom-modal-title {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    text-align: center;
    color: var(--color-text);
}

.bottom-modal-fields {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
}

.bottom-modal-fields div p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    color: var(--color-text);
}

.bottom-modal-fields div p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 167%;
    color: var(--color-text);
}

.bottom-modal-fields input {
    flex: none;
    width: 112px;
    height: 48px;
    padding: 14px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    color: var(--color-text);
    text-align: center;
}

.bottom-modal-fields input.error {
    border: 1px solid #B00020;
}

.bottom-modal-fields input[disabled] {
    background: #F7F7F7;
    border: 1px solid #F7F7F7;
    color: var(--color-text) !important;
    -webkit-text-fill-color: var(--color-text);
    opacity: 1;
}

#bottom-modal-hint {
    display: none;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    background: #F7F7F7;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 167%;
    text-align: center;
    color: var(--color-text);
}

#bottom-modal-hint.visible {
    display: flex;
}

#bottom-modal-hint.error {
    color: #B00020;
}

#bottom-modal-topbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    text-align: center;
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-touch-callout: none;
    transition: background-color var(--troca-dur) var(--troca-curva);
}

@media (hover: hover) {
    #bottom-modal-topbutton:hover {
        background: var(--color-primary-ten);
    }
}

#bottom-modal-topbutton:focus:not(:focus-visible),
#bottom-modal-button:focus:not(:focus-visible) {
    outline: none;
}

#bottom-modal-topbutton:focus-visible,
#bottom-modal-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

#bottom-modal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0;
    background: var(--color-primary);
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-touch-callout: none;
}

/********** Lista Final Bill **********/

.list-bill {
    width: 328px;
    padding-top: 24px;
}

.list-bill-all {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    width: 328px;
    height: 93px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 8px;
    margin-bottom: 10px;
}

.list-bill-data {
    width: 132px;
    height: 93px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 136%;
    display: flex;
    align-items: center;
    text-align: center;
    font-feature-settings: 'lnum' on;
    color: var(--color-text);
    display: block;
    padding-top: 28px;
}

.list-bill-data .date {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 136%;
    align-items: center;
    text-align: center;
    font-feature-settings: 'lnum' on;
    color: var(--color-text);
}

.list-bill-data .time {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 114%;
    align-items: center;
    text-align: center;
    font-feature-settings: 'lnum' on;
    color: var(--color-text);
}

.list-bill-details {
    flex-direction: column;
    align-items: flex-start;
    position: static;
    width: 180px;
    height: 74px;
    order: 1;
    flex-grow: 0;
    margin: 9.5px 8px;
}

.list-bill-details .status span {
    height: 20px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 167%;
    align-items: center;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    color: #25A65B;
}

.list-bill-details .details {
    width: 180px;
    height: 32px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 12px;
}

.list-bill-details .details span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-micro);
    font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off;
    color: var(--color-text);
    order: 0;
    align-self: stretch;
}

.list-bill-details .value-final {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 143%;
    align-items: center;
    /* font-feature-settings: 'tnum' on, 'lnum' on; */
    margin-top: 4px;
    color: var(--color-text);
}

/*Final Bill*/

.final-bill #quantity-value {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 143%;
    color: var(--color-text);
    margin-left: 16px;
    min-width: unset;
}

/*Bottom Cta*/

.bottom-cta {
    margin-top: 40px;
    margin-bottom: 4px;
    width: 100%;
    text-align: center;
}

.bottom-cta p {
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 133%;
    text-align: center;
    margin-bottom: 4px;
}

.responsive-cart {
    display: flex;
    margin-bottom: 16px;
}

@media screen and (min-width: 720px) {
    .search-area .search {
        max-width: 672px;
    }

    .product-start .list {
        max-width: 672px;
    }

    .product-start .title {
        max-width: 672px;
        height: max-content;
    }

    .product-area .list .product {
        width: 328px;
        top: unset;
        left: unset;
        transform: unset;
    }

    .product-area .list .product.left {
        margin-right: 16px;
    }

    .product-section .image,
    .product-section .image.center-rel-hor {
        max-width: 328px;
        aspect-ratio: 1 / 1;
        height: auto;
        left: 0;
        margin: 0 16px 16px 24px;
        transform: none;
    }

    .product-section .image img {
        border-radius: 8px;
    }

    .responsive-product {
        display: flex;
        padding-top: 24px;
    }

    .product-section .info {
        justify-content: start;
        margin-top: 0;
    }

    .floating-button {
        max-width: 672px;
    }

    .search-area .product-detais:nth-child(odd) {
        margin-right: 16px;
    }

    .bill {
        max-width: 688px;
    }

    .final-bill .skeleton {
        max-width: 688px;
    }

    .final-bill .skeleton>div:nth-child(3) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .final-bill .skeleton>div:nth-child(3)>div {
        flex: none;
        width: 328px;
    }

    .bill .itens {
        display: flex;
        flex-wrap: wrap;
    }

    .responsive-cart .name-user {
        margin-right: 16px;
    }

    .bill .value {
        margin-top: 16px;
    }

    .final-bill .name {
        width: 100%;
    }

    .final-bill .tel-desk .tel,
    .final-bill .tel-desk .desk-num {
        width: 100%;
    }

    .itens-1 {
        margin-right: 16px;
    }

    .product-area .search-area .header-category {
        max-width: 704px;
    }

    .product-section .remove-ingredients,
    .product-section .ingredientes.closed {
        height: 72px;
        min-height: 72px;
    }

    .product-section .skeleton {
        padding: 24px 0 0;
    }

    .product-section .skeleton>div:nth-child(1) {
        display: flex;
    }

    .product-section .skeleton>div:nth-child(1)>.shine {
        flex: none;
        width: 328px;
        margin: 0 16px 16px 24px;
        border-radius: 8px;
    }

    .product-section .skeleton>div:nth-child(1)>div:nth-child(2) {
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0 24px 0 0;
    }

    .list-left {
        width: unset;
        margin-right: 16px;
    }

    .list-right {
        width: unset;
    }

    .bottom-modal-pix-info {
        align-items: center;
    }

    .list-product .skeleton {
        max-width: 672px;
        display: flex;
        flex-wrap: wrap;
        gap: 0 16px;
    }

    .list-product .skeleton>.shine {
        flex: none;
        margin-right: 100%;
    }

    .list-product .skeleton>div:not(.shine) {
        width: 328px;
    }
}

@media screen and (max-width: 335px) {
    .elegant-button h3 {
        min-width: 30px;
    }

    .elegant-button {
        max-width: 114px;
    }

    .product-section .confirm {
        min-width: 0;
    }

    .product-section .confirm div {
        min-width: 0;
    }

    .product-section .confirm > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-section .info {
        justify-content: start;
        margin-top: 0;
        padding: 20px 16px;
    }
}

@media screen and (max-width: 355px) {
    .serves span:not(:nth-child(3)) {
        display: none;
    }
}

/********** COMBO ITENS **********/

.selected-combo {
    display: flex;
    background: #FCFCFC;
    border: 1px solid #DDDDDD;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 8px;
    margin-left: 16px;
    position: relative !important;
    width: calc(100% - 32px);
}

.selected-combo:first-child {
    margin-top: 16px;
}

.selected-combo {
    margin-bottom: 16px;
}

.selected-combo-quantity {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-micro);
    line-height: 150%;
    color: var(--color-text);
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 0;
    z-index: 3;
}

.selected-combo .image {
    border-radius: 8px 0 0 8px;
    margin: -1px 0 0 -1px;
    background-color: #FCFCFC !important;
    z-index: 2;
    height: 112px;
    min-width: 112px;
    max-width: 112px;
    object-fit: cover;
}

.selected-combo .selected-combo-title {
    display: -webkit-box;
    max-height: 48px;
    margin: 8px 12px 4px 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 171%;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.selected-combo .selected-combo-description {
    margin: 0 12px 8px 8px !important;
    height: 32px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.selected-combo .value {
    align-items: center;
    display: flex;
    height: 24px;
    margin: 0 0 8px 8px;
}

.selected-combo .value .measure {
    width: max-content;
    height: 20px;
    background: #F5F5F5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 133%;
    padding: 2px 4px;
    margin-right: 8px;
    color: var(--color-text);
}

.selected-combo .value .serves {
    width: max-content;
    height: 20px;
    background: #F5F5F5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 133%;
    padding: 2px 4px;
    margin-right: 8px;
    color: var(--color-text);
}

.selected-combo .value .price {
    width: max-content;
    height: 24px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 171%;
    padding: 0 9.5px;
    color: #4F4F4F;
}

/*ITEM PEDIDO*/

.item-pedido {
    -webkit-tap-highlight-color: transparent;
    padding: 8px;
    width: 100%;
    max-width: 328px;
    min-width: 328px;
    height: max-content;
    background: #FFFFFF;
    border: 0.5px solid #DDDDDD;
    box-sizing: border-box;
    border-radius: 12px;
    margin-bottom: 12px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.item-pedido .pedido-produto {
    width: 100%;
    display: flex;
    position: static;
}

.item-pedido .pedido-produto .product-image {
    min-width: 88px;
    max-width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 4px;
}

.item-pedido .pedido-produto .description {
    position: relative;
    min-height: 88px;
    width: 100%;
    padding-left: 8px;
}

.item-pedido .pedido-produto .description .product-header {
    padding: 0;
}

.item-pedido .pedido-produto .description .product-title {
    width: calc(100% - 32px);
    height: max-content;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 143%;
    font-feature-settings: "pnum", "lnum";
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
}

.pedido-produto .elegant-button h3[quantity="0"],
.pedido-produto .elegant-button h3[quantity="0"]~div:nth-child(2) {
    display: flex !important;
}

.edit-item-pedido {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #FCFCFC;
    box-shadow: 0px 1px 2px -0.5px rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    border: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-item-pedido svg {
    min-width: 14px;
    min-height: 14px;
}

/*DIVIDER*/

.divider {
    border-bottom: 0.5px solid #DDDDDD;
    margin-bottom: 16px;
}

/*FINISH BILL*/

.finish-bill {
    width: 720px;
    height: 100%;
    background: #FCFCFC;
    z-index: 100000;
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.finish-bill div {
    text-align: center;
}

.finish-bill img {
    width: 128px;
    margin-bottom: 24px;
}

#lottie-loading-pedido {
    width: 264px;
    height: 264px;
    margin: 0 auto -29px;
    opacity: 0.65;
}

#lottie-loading-pedido svg * {
    fill: #DDDDDD !important;
}

.finish-bill .d-flex {
    justify-content: center;
    align-items: baseline;
}

.finish-bill p {
    height: 32px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 200%;
    text-align: center;
    color: var(--color-text);
    margin-top: 24px;
    margin-right: 6px;
    width: max-content;
}

.finish-bill p.finished {
    color: #25A65B;
    margin: unset;
    margin-bottom: 4px;
}

.finish-bill p.text {
    height: unset;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-body);
    line-height: 171%;
    text-align: center;
    color: var(--color-text);
    margin: unset;
}

.finish-bill p.mail {
    font-weight: 600;
}

.finish-bill span {
    height: 32px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 500%;
    color: var(--color-text);
    opacity: 0;
}

.finish-bill span:nth-child(2) {
    -webkit-animation: dot 1.3s infinite;
    animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    animation: dot 1.3s infinite;
    animation-delay: 0.1s;
}

.finish-bill span:nth-child(3) {
    -webkit-animation: dot 1.3s infinite;
    animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    animation: dot 1.3s infinite;
    animation-delay: 0.2s;
}

.finish-bill span:nth-child(4) {
    -webkit-animation: dot 1.3s infinite;
    animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    animation: dot 1.3s infinite;
    animation-delay: 0.3s;
}

@keyframes dot {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.finish-bill input[type="submit"] {
    justify-content: center;
    padding: 4px 8px;
    width: 192px;
    height: 32px;
    background: #4D4D4D;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 171%;
    align-items: center;
    text-align: center;
    color: #FCFCFC;
    margin-top: 24px;
    border: none;
}

/*Dropdown Districts*/

.dropdown-districts {
    width: 100%;
    cursor: pointer;
    margin-top: 16px;
}

.dropdown-districts-button {
    display: flex;
    height: 40px;
    align-items: center;
    place-content: space-between;
    border-radius: 8px;
    background: var(--color-primary-radioe);
    padding: 0 8px 0 16px;
    transition: 0.2s;
}


.dropdown-districts-button.error::after {
    content: "Escolha o bairro";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    color: #c52727;
    font-family: "Inter", sans-serif;
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    background: #f8e8e8;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding-left: 16px;
}

.dropdown-districts-button:hover {
    box-shadow: 0px 0px 4px 0px var(--color-primary-radio);
}

.dropdown-districts-button.selected:hover {
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
}

.dropdown-districts-button.clicked {
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
    border: 1px solid#DDD;
}

.dropdown-districts-button.clicked,
.dropdown-districts-button.selected {
    background: #FCFCFC;
    border: 1px solid#DDD;
}

.dropdown-districts-button span {
    color: var(--color-primary);
    font-family: "Inter", sans-serif;
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 400;
    line-height: 171%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 240px;
}

.dropdown-districts-button.clicked span,
.dropdown-districts-button.selected span {
    color: var(--color-text);
}

.dropdown-districts-button.selected span {
    font-weight: 500;
}

.dropdown-districts-button svg {
    min-width: 24px;
    height: 24px;
    align-self: center;
    margin-left: 8px;
}

.dropdown-districts-button.clicked svg {
    transform: rotate(180deg);
}

.dropdown-districts-button.clicked svg path,
.dropdown-districts-button.selected svg path {
    fill: var(--color-text) !important;
}

.dropdown-districts-button.error svg {
    z-index: 1;
}

.dropdown-districts-button.error svg path {
    fill: #c52727 !important;
}

.dropdown-districts-content {
    max-height: 280px;
    border-radius: 12px;
    border: 1px solid#DDD;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
    background: #FCFCFC;
    padding: 8px;
    margin-top: 8px;
    z-index: 10;
    position: absolute;
    min-width: 280px;
    transform-origin: top left;
    transform: scale(var(--dropdown-escala));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--dropdown-fecha) var(--dropdown-curva),
        opacity var(--dropdown-fecha) var(--dropdown-curva),
        visibility 0s linear var(--dropdown-fecha);
    will-change: transform, opacity;
}

.dropdown-districts-content.show {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--dropdown-abre) var(--dropdown-curva),
        opacity var(--dropdown-abre) var(--dropdown-curva),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {

    .dropdown-districts-content,
    .dropdown-districts-content.show {
        transition: opacity .01s linear, visibility 0s linear;
        transform: none;
    }
}

.dropdown-districts-noresults {
    display: none;
    padding: 40px 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    color: var(--color-text);
    text-align: center;
}

.dropdown-districts-content .option-district {
    display: flex;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #FCFCFC;
    color: var(--color-text) !important;
    font-size: var(--fs-body);
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.option-district-name {
    display: flex;
    text-align: left;
    width: calc(100% - 72px);
}

.dropdown-districts-content .option-district:hover {
    color: var(--color-primary) !important;
    align-self: stretch;
    border-radius: 8px;
    box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.30), 0px 0px 2px 0px rgba(0, 0, 0, 0.25) inset;
}

.dropdown-districts-content .option-district.selected {
    color: var(--color-primary) !important;
    font-weight: 500 !important;
}

.dropdown-districts-content .option-district.selected .svg-district-yes {
    display: flex;
}

.dropdown-districts-content .option-district.selected:hover {
    color: var(--color-text) !important;
    border-radius: 8px;
    border: 1px solid #4D4D4D;
    background: #F5F5F5;
    padding: 7px;
}

.dropdown-districts-content .option-district.selected:hover .svg-district-no {
    display: block;
}

.dropdown-districts-content .option-district.selected:hover .svg-district-yes {
    display: none !important;
}

.dropdown-districts-content .dropdown-districts-list {
    display: flex;
    flex-direction: column;
    max-height: 216px;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 8px;
}

.dropdown-districts-content .dropdown-districts-list::-webkit-scrollbar {
    width: 0;
}

.dropdown-districts-content .dropdown-districts-list::-webkit-scrollbar-track {
    background: transparent;
}

.option-district-name>div {
    display: flex;
    justify-content: center;
}

.svg-district-yes,
.svg-district-no {
    display: none;
    margin-left: -4px;
}

.dropdown-districts-search {
    position: relative;
    display: flex;
    align-items: center;
    align-self: center;
    box-sizing: border-box;
    justify-content: space-between;
}

.dropdown-districts-search svg {
    position: absolute;
    right: 8px;
}

.dropdown-districts-search input[type="text"] {
    display: flex;
    width: 100%;
    height: 48px;
    padding: 0px 40px 0 8px;
    border: none;
    border-bottom: 1px solid #DDD;
    background: #FCFCFC;
    color: var(--color-text);
    font-size: var(--fs-body);
    transition: 0.2s;
}

.dropdown-districts-search input[type="text"]:focus {
    outline: none;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
}

.option-district-price {
    white-space: nowrap;
}

.option-district.unavailable .option-district-price {
    color: #B00020;
    font-family: "Inter", sans-serif;
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 400;
    line-height: 171%;
}

/*Select Text*/

.linktree-profile-address p {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.t-troca-icone {
    display: inline-grid;
    line-height: 0;
}

.t-troca-icone>svg {
    grid-area: 1 / 1;
    transition: opacity var(--icone-dur) var(--troca-curva),
        filter var(--icone-dur) var(--troca-curva),
        transform var(--icone-dur) var(--troca-curva);
    will-change: opacity, transform;
}

.t-troca-icone>.t-icone-b {
    opacity: 0;
    filter: blur(var(--blur-small));
    transform: scale(.25);
}

.bottom-modal-pix-key button.copied .t-troca-icone>.t-icone-a {
    opacity: 0;
    filter: blur(var(--blur-small));
    transform: scale(.25);
}

.bottom-modal-pix-key button.copied .t-troca-icone>.t-icone-b {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .t-troca-icone>svg {
        transition: none;
        filter: none;
        transform: none;
    }
}

/*Tooltip*/

.toolinfo {
    position: absolute;
    background: #000000;
    border-radius: 4px;
    width: fit-content;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: var(--fs-body);
    line-height: 143%;
    color: #FFFFFF;
    padding: 4px 8px;
    z-index: 100000;
    text-align: center;
    opacity: 0;
    transform: scale(var(--tt-escala));
    transform-origin: 50% 0;
    pointer-events: none;
    transition: opacity var(--tt-fecha) var(--tt-curva),
        transform var(--tt-fecha) var(--tt-curva);
    will-change: transform, opacity;
}

.toolinfo.is-open {
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--tt-abre) var(--tt-curva) var(--tt-atraso),
        transform var(--tt-abre) var(--tt-curva) var(--tt-atraso);
}

.toolinfo.bottom {
    transform-origin: 50% 100%;
}

.toolinfo.right {
    transform-origin: 100% 50%;
}

.toolinfo.left {
    transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {

    .toolinfo,
    .toolinfo.is-open {
        transition: opacity .01s linear;
        transform: none;
    }
}

.toolinfo svg {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translate(-50%, 0px);
}

.toolinfo.bottom svg {
    top: unset;
    bottom: -6px;
    transform: translate(-50%, 0px) rotate(180deg);
}

.toolinfo.right svg {
    right: -9px;
    top: 50%;
    left: unset;
    transform: translate(0, -50%) rotate(90deg);
}

.toolinfo.left svg {
    left: -9px;
    top: 50%;
    transform: translate(0, -50%) rotate(270deg);
}

/********* Bottom Modal Pix *********/

.bottom-modal-pix-fade {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10001;
    left: 0;
    top: 0;
}

.bottom-modal-pix {
    position: fixed;
    height: auto;
    max-height: calc(100% - 16px);
    width: 100%;
    border-radius: 24px 24px 0 0;
    background: #FFFFFF;
    bottom: 0;
    left: 0;
    z-index: 10002;
    overflow: auto;
    transform: translateY(100%);
    opacity: 0;
    filter: blur(var(--folha-desfoque));
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--folha-fecha) var(--folha-curva-saida),
        opacity calc(var(--folha-fecha) / 2) linear calc(var(--folha-fecha) / 2),
        filter calc(var(--folha-fecha) / 2) linear calc(var(--folha-fecha) / 2),
        visibility 0s linear var(--folha-fecha);
    will-change: transform, opacity;
}

.bottom-modal-pix.is-open {
    transform: translateY(0);
    opacity: 1;
    filter: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--folha-abre) var(--folha-curva),
        opacity var(--folha-abre) var(--folha-curva),
        filter var(--folha-abre) var(--folha-curva),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {

    .bottom-modal-pix,
    .bottom-modal-pix.is-open {
        transition: opacity .01s linear, visibility 0s linear;
        transform: translateY(0);
        filter: none;
    }
}

#bottom-modal-pix svg:nth-child(1) {
    display: flex;
    height: 32px;
}

#bottom-modal-pix-area {
    width: 100%;
    max-width: 400px;
    padding: 0 16px 24px;
}

.bottom-modal-pix-title {
    display: flex;
    height: 24px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-section);
    line-height: 120%;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    margin-bottom: 16px;
}

.bottom-modal-pix-title svg {
    margin-right: 4px;
}

.bottom-modal-pix-value {
    margin-bottom: 16px;
    text-align: center;
}

.bottom-modal-pix-value p:nth-child(1) {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 200%;
    color: var(--color-text);
    user-select: text;
}

.bottom-modal-pix-value p:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text);
}

.bottom-modal-pix-key {
    display: flex;
    align-items: center;
    border: 0.5px solid #DDDDDD;
    background: #F5F5F5;
    padding: 8px;
    width: 100%;
    border-radius: 8px;
    position: relative;
    margin-bottom: 16px;
}

.bottom-modal-pix-key p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 171%;
    color: var(--color-text);
    max-width: 68%;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.bottom-modal-pix-key button {
    display: flex;
    align-items: center;
    position: absolute;
    padding: 0 8px;
    right: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-primary);
    border: none;
    background: none;
}

.bottom-modal-pix-key button::before {
    content: "Copiar chave";
}

.bottom-modal-pix-key button.copied {
    color: #25A65B;
}

.bottom-modal-pix-key button.copied::before {
    content: "Copiado";
}

.bottom-modal-pix-key button .t-troca-icone {
    margin-left: 4px;
}

.bottom-modal-pix-info {
    background: #EBF5FF;
    padding: 8px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 171%;
    color: #0962BA;
    display: flex;
    margin-bottom: 16px;
}

.bottom-modal-pix-info svg {
    margin-right: 6px;
    min-width: 24px;
}

.bottom-modal-pix-whatsapp {
    width: 100%;
    display: flex;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 171%;
    color: #128C7E;
    margin-bottom: 16px;
    padding: 12px 0;
    border: 0.5px solid #0B132412;
    box-shadow: 0px -0.5px 0px 0px #0B13241A inset;
    box-shadow: 0px 0.5px 3px 0px #0B13241A;
}

.bottom-modal-pix-whatsapp svg {
    margin-right: 8px;
}

.bottom-modal-pix-close {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 171%;
    color: var(--color-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    text-align: center;
}

.bottom-modal-pix-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/*Input Group*/

.input-group .dropdown-menu {
    position: absolute;
    transform: translate3d(123px, 34px, 0px);
    top: 0px;
    left: 0px;
    will-change: transform;
}

.input-group .dropdown-toggle {
    display: flex;
    align-items: center;
    width: 88px;
    height: 32px;
    background: none;
    background: var(--color-primary-radioe);
    border: 1px solid #DDDDDD;
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: var(--color-primary);
}

.input-group .dropdown-toggle p {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-primary);
    margin-bottom: 0 !important;
    width: 100%;
}

/*Iframe*/

.iframe .final-bill>.header,
.iframe .bottom-bar,
.iframe .linktree {
    display: none !important;
}

.iframe .floating-button {
    bottom: 80px;
}

.iframe .floating-button.full {
    width: 100%;
}

.iframe .final-bill,
.iframe .final-bill .bill {
    padding-top: 0;
}

.iframe .header-logo {
    height: 4px;
}

/*Tabs Main Hint*/

.tabs-main-hint {
    padding: 16px;
    width: calc(100% - 32px);
    background: #F5F5F5;
    border-radius: 8px;
    position: relative;
    margin: 16px 16px 0;
}

.tabs-main-hint svg {
    position: absolute;
    left: 14px;
    top: 16px;
}

.tabs-main-hint p {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: var(--fs-title);
    line-height: 150%;
    color: var(--color-text);
    margin-bottom: 0;
    padding-left: 34px;
}

/* Address Confirm */

.address-confirm {
    width: 100%;
    background: #FFFFFF;
    margin: 0 auto;
    max-width: 720px;
    height: calc(100% - 64px);
    overflow: auto;
    position: fixed;
    z-index: 100000;
    border-radius: 24px 24px 0 0;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--folha-fecha) var(--folha-curva-saida),
        opacity calc(var(--folha-fecha) / 2) linear calc(var(--folha-fecha) / 2),
        visibility 0s linear var(--folha-fecha);
    will-change: transform, opacity;
}

.address-confirm-opacity {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

.address-confirm .map-skeleton {
    width: 100%;
    min-height: calc(100vh - 192px);
    display: none;
    position: relative;
}

.address-confirm .map-skeleton img {
    width: 100%;
    min-height: calc(100vh - 192px);
    object-fit: cover;
    filter: blur(6px);
}

.address-confirm .map-skeleton div {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 18px);
    width: 3rem;
    height: 3rem;
    border: .40em solid var(--color-primary);
    border-right-color: transparent;
    z-index: 1000;
}

.address-confirm.loading .map-skeleton {
    display: block;
}

.address-confirm.loading #map {
    display: none;
}

.address-confirm-opacity.opened~.address-confirm {
    transform: translate(-50%, 0%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--folha-abre) var(--folha-curva),
        opacity var(--folha-abre) var(--folha-curva),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {

    .address-confirm,
    .address-confirm-opacity.opened~.address-confirm {
        transition: opacity .01s linear, visibility 0s linear;
        transform: translate(-50%, 0%);
    }
}

.back-arrow-address-confirm {
    position: absolute;
    width: 64px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.address-confirm .header p {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 143%;
    text-align: center;
    color: var(--color-text);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-confirm-area-body .mapboxgl-map {
    width: 100%;
    min-height: calc(100vh - 234px) !important;
}

.address-confirm-area-body p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: var(--fs-title);
    color: var(--color-text);
    text-align: left;
    overflow: hidden;
    padding: 40px 24px;
    line-height: 150%;
    font-weight: 500;
}

.address-confirm-area-button {
    height: 40px;
    background: var(--color-primary);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center;
    width: calc(100% - 48px);
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    color: #FFFFFF;
    border: none;
    position: fixed;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 5000;
    margin: 48px auto;
}

.address-confirm-area-button::before {
    content: "Confirmar localização";
}

.address-confirm-area-button .spinner-border {
    margin-left: 16px;
    display: none;
}

.address-confirm-area-button[disabled]::before {
    content: "Confirmando localização";
}

.address-confirm-area-button[disabled] {
    opacity: 0.8;
    cursor: wait;
}

.address-confirm-area-button[disabled] .spinner-border {
    display: block;
}

.address-confirm-area-body .maplibregl-marker path {
    fill: var(--color-primary);
}

.address-confirm-alert {
    background: #B00020;
    color: #FFF0F2;
    border-radius: 12px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 143%;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    z-index: 1000000;
    width: calc(100% - 48px);
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 50px;
    display: none;
}

/*Spinner Border*/

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s var(--ease-linear) infinite;
}

/*Modal*/

.modal-exclude-product {
    border-radius: 16px;
    background: #FCFCFC;
    min-width: 200px;
    overflow: hidden;
    z-index: 1000000001;
    transform: translate(-50%, -50%) scale(var(--modal-escala));
    opacity: 0;
    pointer-events: none;
    transition: transform var(--modal-abre) var(--modal-curva),
        opacity var(--modal-abre) var(--modal-curva);
    will-change: transform, opacity;
}

.modal-exclude-product.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.modal-exclude-product.is-closing {
    transform: translate(-50%, -50%) scale(var(--modal-escala));
    opacity: 0;
    pointer-events: none;
    transition: transform var(--modal-fecha) var(--modal-curva),
        opacity var(--modal-fecha) var(--modal-curva);
}

@media (prefers-reduced-motion: reduce) {

    .modal-exclude-product,
    .modal-exclude-product.is-open,
    .modal-exclude-product.is-closing {
        transition: opacity .01s linear;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-exclude-product.category {
    width: 288px;
}

.modal-exclude-product-body {
    padding: 16px;
    display: flex;
    align-items: center;
}

.modal-exclude-product.category .modal-exclude-product-body {
    flex-direction: column;
}

.modal-exclude-product-body img {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    border: 0.25px solid #DDD;
    background: #F5F5F5;
    object-fit: cover;
    margin-right: 16px;
}

.modal-exclude-product-body p {
    color: var(--color-text);
    font-family: "Inter", sans-serif;
    font-size: var(--fs-section);
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}

.modal-exclude-product-body h3 {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-section);
    font-weight: 700;
    line-height: 120%;
    text-align: center;
    color: var(--color-text);
    margin: 8px 0;
}

.modal-exclude-product-body h3 b {
    color: #B00020;
}

.modal-exclude-product-body h4 {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-title);
    font-weight: 500;
    line-height: 150%;
    text-align: center;
    color: var(--color-text);
    margin-bottom: 8px;
}

.modal-exclude-product-body h2 {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: 150%;
    text-align: center;
    color: #B00020;
}

.modal-exclude-product-body img~p {
    text-align: left;
    max-width: 272px;
}

.modal-exclude-product-footer {
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 0.5px solid #DDDDDD
}

.modal-exclude-product-footer button {
    width: 100%;
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
    background: #FCFCFC;
    border: none;
    color: var(--color-text);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: var(--fs-title);
    font-style: normal;
    font-weight: 500;
    transition: 0.2s;
}

.can-copy {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.modal-exclude-product-footer button svg {
    display: none;
    margin-left: 8px;
    width: 24px;
    height: 24px;
}

.modal-exclude-product-footer button:nth-child(1):hover {
    color: var(--color-primary);
    text-decoration: underline !important;
}

.modal-exclude-product-footer button:nth-child(2) {
    color: #B00020;
    background: #FFF0F2;
}

.modal-exclude-product-footer button:nth-child(2):not([disabled]):hover {
    background: #B00020;
    color: #FCFCFC;
}

.modal-exclude-product-footer button[disabled]:nth-child(2) {
    background: #F7F7F7;
    cursor: wait;
}

.loading .modal-exclude-product-footer button:nth-child(2)::before {
    content: "Excluir";
}

.loading .modal-exclude-product-footer button:nth-child(2)[title]::before {
    content: attr(title);
}

.loading .modal-exclude-product-footer button[disabled]:nth-child(2) {
    background: #FFF0F2;
}

.loading .modal-exclude-product-footer button[disabled]:nth-child(2)::before {
    content: "Excluindo";
}

.loading .modal-exclude-product-footer button[disabled]:nth-child(2)[clicked]::before {
    content: attr(clicked);
}

.loading .modal-exclude-product-footer button[disabled]:nth-child(2) svg {
    display: block;
}

/*Modal Main*/

.modal-main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 32px) !important;
    z-index: 10000003 !important;
}

.modal-main.on-modal {
    z-index: 10000004 !important;
}

@media screen and (min-width: 720px) {
    .address-confirm .header p {
        font-family: "Inter", sans-serif;
        font-size: var(--fs-body);
        font-weight: 500;
        line-height: 143%;
        text-align: center;
        color: var(--color-text);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 800px) {
    .address-confirm .header p {
        font-size: var(--fs-body);
        line-height: 143%;
        font-weight: 500;
        color: var(--color-text);
    }

    .address-confirm {
        height: calc(100% - 24px);
    }

    .address-confirm-area-body .mapboxgl-map {
        width: 100%;
        min-height: calc(100vh - 192px) !important;
    }

    .address-confirm-area-body p {
        font-family: 'Inter', sans-serif;
        font-style: normal;
        font-size: var(--fs-title);
        padding: 24px 16px;
        line-height: 150%;
        font-weight: 500;
        color: var(--color-text);
    }

    .address-confirm-area-button {
        margin: 24px auto;
    }

    /*Modal Main*/

    .modal-main {
        position: fixed !important;
        bottom: 0 !important;
        top: unset !important;
        right: unset !important;
        left: 0 !important;
        transform: unset !important;
        max-width: unset !important;
        border-radius: 24px 24px 0px 0px !important;
        max-height: calc(100% - 32px) !important;
        width: 100% !important;
        max-width: unset !important;
        margin: 0 !important;
    }

    .modal-main-title {
        font-weight: 500 !important;
        font-size: var(--fs-title) !important;
        line-height: 175% !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
        width: 100%;
    }
}

@media screen and (max-width: 720px) {
    .cart-area .item-pedido {
        width: 100%;
        max-width: 100%;
        width: unset;
        min-width: 0;
    }

    .cart-area .item-pedido .pedido-produto {
        max-width: 100%;
        width: 100%;
    }

    .cart-area .item-pedido .elegant-button {
        max-width: fit-content;
    }

}

@media only screen and (max-height: 575px) {
    .modal-main {
        max-height: calc(100% - 16px) !important;
    }
}

@media screen and (max-width: 380px) {
    .cart-area .bill .buttons {
        padding: 0 4px 0 2px;
    }
}

/* B2C DESTAQUES SECTION */

.destaques-section {
    padding: 16px 0 8px;
}

.destaques-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
}

.destaques-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: var(--fs-title);
    line-height: 150%;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.destaques-nav {
    display: flex;
}

.destaques-nav button {
    border: none;
    background: none;
    cursor: pointer;
}

.destaques-nav button:disabled {
    cursor: not-allowed;
}

.destaques-nav button:first-child {
    padding: 4px 8px 4px 0;
}

.destaques-nav button:last-child {
    padding: 4px 0 4px 8px;
}

.destaques-nav button g path {
    fill: var(--color-primary);
}

.destaques-nav button:disabled g path {
    fill: #BFBFBF;
}

.destaques-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px 8px;
    margin: 0 -16px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.destaques-list::-webkit-scrollbar {
    display: none;
}

.destaque-card {
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 120px;
    border: 0.5px solid #DDDDDD;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
    padding: 4px;
}

.destaque-card:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.05);
}

@media (hover: none) {
    .destaque-card:hover {
        box-shadow: none;
    }
}

.sugestoes-section.busy .destaque-card,
.sugestoes-section.busy .destaque-card:hover {
    box-shadow: none;
}

.destaque-card-img-wrapper {
    position: relative;
    width: 112px;
    height: 112px;
    overflow: hidden;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 4px;
}

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

/* Etiquetas de destaque/esgotado: reutiliza .product-tag da listagem
   (estilos definidos acima neste mesmo style.css). */

.destaque-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.destaque-card-name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text);
    margin-bottom: 8px;
}

.destaque-card-old-price {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 100%;
    color: var(--color-text);
    text-decoration-line: line-through;
    margin-top: auto;
    margin-bottom: 4px;
}

.destaque-card-price {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 114%;
    color: var(--color-text);
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.destaque-card-price > span {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: var(--fs-caption);
    line-height: 133%;
    color: var(--color-text);
}

.destaque-card-old-price + .destaque-card-price {
    color: #25A65B;
    margin-top: 0;
}



.sugestoes-section {
    margin-left: -16px;
    margin-right: -16px;
    padding: 8px 0 16px;
}

.cart-area .cart .sugestoes-section {
    padding-top: 0;
    padding-bottom: 0;
}

.sugestoes-section .destaques-header {
    max-width: none;
    margin: 0 0 8px;
    padding: 0 16px;
}

.sugestoes-section .destaques-list {
    margin: 0;
    padding: 0 16px 8px;
}

.destaques-vitrine .destaque-add {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    color: var(--color-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--toque-dur) var(--toque-curva),
        color var(--troca-dur) var(--troca-curva);
}

.destaques-vitrine .destaque-add::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
}

.destaques-vitrine .destaque-add:active {
    transform: scale(.96);
    transition-duration: 0s;
}

.destaques-vitrine .destaque-add-qtd {
    display: none;
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-body);
    line-height: 143%;
    font-weight: 400;
}

.destaques-vitrine .destaque-add[data-qtd]:not([data-qtd="0"]) {
    color: #FFFFFF;
}

.destaques-vitrine .destaque-add[data-qtd]:not([data-qtd="0"])::before {
    background: var(--color-primary);
}

.destaques-vitrine .destaque-add.em-texto .ico {
    display: none;
}

.destaques-vitrine .destaque-add.em-texto .destaque-add-qtd {
    display: block;
}

.vitrine-bolinha {
    position: fixed;
    z-index: 100001;
    pointer-events: none;
    transition: transform .44s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.vitrine-bolinha>div {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 6px;
    background: var(--color-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transition: transform .44s cubic-bezier(0.55, 0.085, 0.68, 0.53),
        opacity .12s linear .38s;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {

    .destaques-vitrine .destaque-add {
        transition: none;
    }

    .destaques-vitrine .destaque-add:active {
        transform: none;
    }
}

.ico {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.ico path {
    fill: none;
    transition: d var(--icone-dur) var(--troca-curva);
}

.ico.girando {
    transform-box: fill-box;
    transform-origin: center;
    animation: ico-girar .7s var(--ease-linear) infinite;
}

@keyframes ico-girar {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .ico path {
        transition: none;
    }

    .ico.girando {
        animation-duration: 1.4s;
    }
}

.sugestoes-section .sugestao-add {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 32px;
    height: 32px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 16px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: transform var(--toque-dur) var(--toque-curva), opacity var(--troca-dur) var(--troca-curva);
}

.sugestoes-section .sugestao-add::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
}

@media (hover: hover) {
    .sugestoes-section .sugestao-add:hover {
        transform: scale(1.06);
    }
}

.destaques-vitrine .destaque-add,
.sugestoes-section .sugestao-add {
    -webkit-user-select: none;
    user-select: none;
}

.destaques-vitrine .destaque-add,
.sugestoes-section .sugestao-add {
    background: none;
    box-shadow: none;
}

.destaques-vitrine .destaque-add::before,
.sugestoes-section .sugestao-add::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #FCFCFC;
    box-shadow: inset 0 0 0 0.5px rgba(85, 85, 85, 0.1);
}

.destaques-vitrine .destaque-add .ico,
.destaques-vitrine .destaque-add .destaque-add-qtd,
.sugestoes-section .sugestao-add .ico {
    position: relative;
}

.sugestoes-section .sugestao-add:active {
    transform: scale(.96);
    transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {

    .sugestoes-section .sugestao-add {
        transition: none;
    }

    .sugestoes-section .sugestao-add:active {
        transform: none;
    }
}

.sugestoes-section .sugestao-add[disabled] {
    cursor: default;
}

.sugestoes-section .sugestao-add.is-loading:hover,
.sugestoes-section .sugestao-add.is-loading:active {
    transform: none;
}

.cart .itens .item-pedido.is-provisorio {
    pointer-events: none;
}


.sugestoes-section.busy .destaque-card {
    pointer-events: none;
}

.sugestoes-section .destaque-card {
    transition: opacity var(--duration-quick) var(--ease-smooth-out),
                transform var(--duration-quick) var(--ease-smooth-out),
                box-shadow var(--duration-quick);
}

.sugestoes-section .destaque-card.is-leaving {
    opacity: 0;
    transform: scale(.94);
}

.cart .itens .item-pedido {
    transition: opacity .19s var(--ease-smooth-out),
                transform .19s var(--ease-smooth-out);
}

.cart .itens .item-pedido.is-leaving {
    opacity: 0;
    transform: scale(.97);
    pointer-events: none;
}

.cart .itens .item-pedido.is-limpando {
    transition-duration: .28s;
}

.cart .itens.limpando {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

    .cart .itens .item-pedido.is-limpando {
        transition-duration: .01s;
        transition-delay: 0s !important;
    }
}

.sugestoes-section .destaque-card.is-reacomodando,
.cart .itens .item-pedido.is-reacomodando {
    transition: transform .26s var(--ease-smooth-out);
}

.sugestoes-section .destaque-card.is-entering {
    animation: sugestao-entra .28s var(--ease-smooth-out) .06s backwards;
}

@keyframes sugestao-entra {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}

.cart .itens .item-pedido.is-entering {
    animation: item-entra .26s var(--ease-smooth-out) backwards;
}

@keyframes item-entra {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.categories-start .skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.categories-start .skeleton .shine {
    flex: none;
    width: 104px;
    height: 40px;
    border-radius: 48px;
}

.categories-start .skeleton .shine:nth-child(2) {
    width: 88px;
}

.categories-start .skeleton .shine:nth-child(4) {
    width: 168px;
}

.product-section .skeleton.com-previa {
    padding: 0;
    min-height: 0;
}

.product-section .skeleton.com-previa>div:nth-child(1) {
    display: none;
}

.product-section .previa-carregando {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
}

.product-section .previa-carregando .shine {
    width: 92%;
    height: 14px;
}

.product-section .previa-carregando .shine:nth-child(1) {
    width: 40%;
    height: 20px;
}

.product-section .previa-carregando .shine:nth-child(3) {
    width: 64%;
}

@media (prefers-reduced-motion: reduce) {
    .sugestoes-section .destaque-card,
    .cart .itens .item-pedido {
        transition: opacity .15s linear;
    }

    .sugestoes-section .destaque-card.is-leaving,
    .cart .itens .item-pedido.is-leaving {
        transform: none;
    }

    .sugestoes-section .destaque-card.is-reacomodando,
    .cart .itens .item-pedido.is-reacomodando {
        transition: none;
    }

    .sugestoes-section .destaque-card.is-entering,
    .cart .itens .item-pedido.is-entering {
        animation: none;
    }
}