/* --------------------------------------------------------------------------
   8) MODAL DE AMPLIAÇÃO DA ARTE
   -------------------------------------------------------------------------- */
body.modal-aberto {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal[hidden] {
    display: none;
}

.modal-fundo {
    position: absolute;
    inset: 0;
    background: rgba(9, 43, 82, 0.86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: pointer;
    animation: modal-aparecer 0.25s ease both;
}

.modal-caixa {
    position: relative;
    width: min(880px, 100%);
    max-width: 100%;
    min-width: 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--raio);
    background: var(--branco);
    box-shadow: 0 30px 70px rgba(9, 43, 82, 0.5);
    animation: modal-subir 0.3s ease both;
    overflow: hidden;
}

.modal-conteudo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 3px 3px 0;
    scrollbar-gutter: stable;
}

.mockup-canecas {
    --ground-y-left: 70.7%;
    --ground-y-right: 76.4%;
    position: relative;
    isolation: isolate;
    flex: none;
    width: min(600px, 100%);
    aspect-ratio: 736 / 631;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 12px;
    background: #FFFFFF;
}

.mockup--oculto {
    display: none !important;
}

.mockup-chopp {
    position: relative;
    isolation: isolate;
    flex: none;
    width: min(700px, 100%);
    aspect-ratio: 1.24;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

body[data-catalogo="copos-chopp"] #mockupChopp {
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mockup-chopp[hidden] {
    display: none;
}

.mockup-chopp.mockup--visivel {
    display: block;
}

.mockup-chopp-scale {
    position: absolute;
    top: 50%;
    left: -7.5%;
    width: 115%;
    aspect-ratio: 1;
    margin-top: -57.5%;
}

.mockup-chopp-float {
    position: absolute;
    inset: 0;
    animation: none;
}

.modal-aberto .mockup-chopp.mockup--visivel .mockup-chopp-float {
    animation: choppFloat 4.8s ease-in-out -1.6s infinite;
}

.mockup-chopp-base,
.mockup-chopp-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mockup-chopp-base {
    z-index: 1;
}

.mockup-chopp-canvas {
    z-index: 2;
    mix-blend-mode: multiply;
    opacity: 0.98;
}

body[data-catalogo="copos-chopp"] .modal-conteudo:has(.mockup-chopp.mockup--visivel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "mockup"
        "arte"
        "detalhes";
    align-items: center;
    gap: 14px;
}

body[data-catalogo="copos-chopp"] .modal-conteudo:has(.mockup-chopp.mockup--visivel) #mockupChopp {
    grid-area: mockup;
    width: 100%;
    max-width: 430px;
}

body[data-catalogo="copos-chopp"] .modal-conteudo:has(.mockup-chopp.mockup--visivel) #modalGaleria {
    grid-area: arte;
}

body[data-catalogo="copos-chopp"] .modal-conteudo:has(.mockup-chopp.mockup--visivel) .modal-slide img {
    aspect-ratio: auto;
    max-height: none;
}

body[data-catalogo="copos-chopp"] .modal-conteudo:has(.mockup-chopp.mockup--visivel) .modal-footer {
    grid-area: detalhes;
}

.mockup-sombra {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    transform-origin: center center;
}

.mockup-sombra--chao-continuo {
    left: 18%;
    top: calc(var(--ground-y-right) - 0.7%);
    width: 75%;
    height: clamp(24px, 5.4%, 30px);
    background: radial-gradient(
        ellipse at 55% 38%,
        rgba(24, 28, 34, 0.46) 0%,
        rgba(24, 28, 34, 0.30) 34%,
        rgba(24, 28, 34, 0.14) 55%,
        rgba(24, 28, 34, 0.035) 70%,
        rgba(24, 28, 34, 0) 86%
    );
    filter: blur(9px);
    transform: translate(5px, 2px);
}

.mockup-sombra--projetada-esquerda {
    --shadow-x: 4px;
    --shadow-y: 2px;
    --shadow-blur-base: 6px;
    --shadow-blur-lift: 9px;
    left: 12%;
    top: calc(var(--ground-y-left) - 2%);
    width: 38%;
    height: clamp(15px, 3.6%, 20px);
    background: radial-gradient(
        ellipse at 28% 45%,
        rgba(24, 30, 38, 0.34) 0%,
        rgba(24, 30, 38, 0.22) 42%,
        rgba(24, 30, 38, 0) 78%
    );
    filter: blur(6px);
    transform: translate(4px, 2px);
    transform-origin: 28% 50%;
}

.mockup-sombra--contato-esquerda {
    --shadow-x: 0px;
    --shadow-y: 0px;
    --shadow-blur-base: 2px;
    --shadow-blur-lift: 4px;
    left: 13%;
    top: calc(var(--ground-y-left) - 2.6%);
    width: 20%;
    height: clamp(7px, 1.7%, 10px);
    background: radial-gradient(
        ellipse at 35% 45%,
        rgba(20, 25, 32, 0.60) 0%,
        rgba(20, 25, 32, 0.44) 30%,
        rgba(20, 25, 32, 0.20) 55%,
        rgba(20, 25, 32, 0) 80%
    );
    filter: blur(2px);
    transform-origin: 35% 50%;
}

.mockup-sombra--projetada-direita {
    --shadow-x: 4px;
    --shadow-y: 2px;
    --shadow-blur-base: 6px;
    --shadow-blur-lift: 9px;
    left: 51.5%;
    top: calc(var(--ground-y-right) - 0.45%);
    width: 40%;
    height: clamp(15px, 3.6%, 20px);
    background: radial-gradient(
        ellipse at center,
        rgba(24, 30, 38, 0.34) 0%,
        rgba(24, 30, 38, 0.22) 42%,
        rgba(24, 30, 38, 0) 78%
    );
    filter: blur(6px);
    transform: translate(4px, 2px);
}

.mockup-sombra--contato-direita {
    --shadow-x: 0px;
    --shadow-y: 0px;
    --shadow-blur-base: 2px;
    --shadow-blur-lift: 4px;
    left: 56.5%;
    top: calc(var(--ground-y-right) - 0.8%);
    width: 29%;
    height: clamp(7px, 1.7%, 10px);
    background: radial-gradient(
        ellipse at center,
        rgba(20, 25, 32, 0.58) 0%,
        rgba(20, 25, 32, 0.42) 30%,
        rgba(20, 25, 32, 0.20) 55%,
        rgba(20, 25, 32, 0) 80%
    );
    filter: blur(2px);
}

.mockup-motion {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.mockup-motion--esquerda {
    --float-lift: -8px;
    left: 3.5%;
    top: 26%;
    z-index: 1;
    width: 47%;
    aspect-ratio: 345 / 310;
}

.mockup-motion--direita {
    --float-lift: -7px;
    left: 51%;
    top: 36.5%;
    z-index: 2;
    width: 44%;
    aspect-ratio: 340 / 315;
}

/* Vista frontal central: usa a mesma base fotográfica e fica elevada para
   destacar a faixa central sem encobrir as duas vistas laterais. */
.mockup-motion--centro {
    --float-lift: -6px;
    left: 34.333%;
    top: 0;
    z-index: 3;
    width: 31.333%;
    aspect-ratio: 345 / 310;
}

/* Amplia somente a área do conjunto. As duas laterais conservam suas
   dimensões visuais originais; a nova área cria espaço real entre as três. */
.mockup-canecas--triplo {
    width: min(1000px, 100%);
    aspect-ratio: 1000 / 631;
}

/* O modal ganha área horizontal para que cada caneca mantenha a escala
   visual anterior, agora com espaço adicional para a terceira vista. */
.modal-caixa:has(.mockup-canecas--triplo) {
    width: min(1000px, 100%);
}

.mockup-canecas--triplo .mockup-motion--esquerda {
    left: 2.333%;
    top: 21.2%;
    width: 31.333%;
}

.mockup-canecas--triplo .mockup-motion--direita {
    left: 68%;
    top: 29.75%;
    width: 29.333%;
}

.mockup-canecas--triplo .mockup-motion--centro {
    left: 34.333%;
    top: 0;
    width: 31.333%;
}

.mockup-grupo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

.mockup-grupo--esquerda {
    transform: rotate(-12deg);
    transform-origin: 65% 90%;
}

.mockup-grupo--direita {
    transform: none;
}

.mockup-grupo--centro {
    transform: none;
    /* A base reutilizada contém a alça da vista lateral. Este recorte deixa
       somente o corpo frontal, sem alterar a arte ou as laterais. */
    clip-path: inset(0 22% 0 15%);
}

.modal-aberto .mockup-motion--esquerda {
    animation: mugFloat 4.2s ease-in-out -0.7s infinite;
}

.modal-aberto .mockup-motion--direita {
    animation: mugFloat 4.8s ease-in-out -2.1s infinite;
}

.modal-aberto .mockup-motion--centro {
    animation: mugFloat 4.5s ease-in-out -1.4s infinite;
}

.modal-aberto .mockup-sombra--projetada-esquerda,
.modal-aberto .mockup-sombra--contato-esquerda {
    animation: mugShadowFloat 4.2s ease-in-out -0.7s infinite;
}

.modal-aberto .mockup-sombra--projetada-direita,
.modal-aberto .mockup-sombra--contato-direita {
    animation: mugShadowFloat 4.8s ease-in-out -2.1s infinite;
}

@keyframes mugFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(var(--float-lift));
    }
}

@keyframes mugShadowFloat {
    0%, 100% {
        transform: translate(var(--shadow-x), var(--shadow-y)) scaleX(1);
        opacity: 1;
        filter: blur(var(--shadow-blur-base));
    }

    50% {
        transform: translate(var(--shadow-x), var(--shadow-y)) scaleX(0.84);
        opacity: 0.68;
        filter: blur(var(--shadow-blur-lift));
    }
}

@keyframes choppFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.mockup-layer {
    position: absolute;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.mockup-grupo--esquerda .mockup-layer {
    left: -10.145%;
    top: -25.806%;
    width: 213.334%;
}

.mockup-grupo--direita .mockup-layer {
    left: -110.882%;
    top: -74.603%;
    width: 216.471%;
}

.mockup-grupo--centro .mockup-layer {
    left: -29%;
    top: -25.806%;
    width: 213.334%;
}

.mockup-canecas-base {
    z-index: 1;
    object-fit: contain;
    background: transparent;
}

.mockup-canvas {
    z-index: 2;
    background: transparent;
    mix-blend-mode: multiply;
}

.modal-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(9, 43, 82, 0.08);
    color: var(--azul-forte);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.modal-fechar:hover {
    background: var(--azul-principal);
    color: var(--branco);
    transform: rotate(90deg);
}

.modal-fechar:focus-visible {
    outline: 3px solid var(--dourado-suave);
    outline-offset: 2px;
}

.modal-fechar-icone {
    width: 20px;
    height: 20px;
}

.modal-galeria {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #EAF6FF 0%, #F3F9FF 50%, #E0F0FC 100%);
    border: 1px solid rgba(22, 116, 209, 0.18);
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body[data-catalogo="copos-chopp"] .chopp-modal-seta-proximo {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: 10px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    color: #FFFFFF;
    background: #A44FAF;
    border: 2px solid rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 16px rgba(72, 37, 83, 0.4);
    cursor: pointer;
    transform: translateY(-50%);
    animation: chopp-modal-seta-pulso 0.75s ease-in-out infinite alternate;
    touch-action: manipulation;
}

body[data-catalogo="copos-chopp"] .chopp-modal-seta-proximo svg {
    width: 22px;
    height: 22px;
}

body[data-catalogo="copos-chopp"] .chopp-modal-seta-proximo:hover,
body[data-catalogo="copos-chopp"] .chopp-modal-seta-proximo:focus-visible {
    color: #FFFFFF;
    background: #78388D;
    outline: 3px solid rgba(117, 66, 135, 0.32);
    outline-offset: 2px;
}

body[data-catalogo="copos-chopp"] .chopp-modal-seta-proximo[hidden] {
    display: none;
}

@keyframes chopp-modal-seta-pulso {
    from { opacity: 0.48; transform: translate(0, -50%); }
    to { opacity: 1; transform: translate(5px, -50%); }
}

@media (prefers-reduced-motion: reduce) {
    body[data-catalogo="copos-chopp"] .chopp-modal-seta-proximo {
        animation: none;
    }
}

.modal-faixa {
    display: flex;
    will-change: transform;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.modal-faixa--sem-transicao {
    transition: none;
}

.modal-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.modal-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1280 / 608;
    max-height: 62vh;
}

.modal-carrinho-atalho {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(217, 92, 139, 0.28);
    border-radius: 50%;
    background: linear-gradient(135deg, #D95C8B, #A874BE);
    color: #FFFFFF;
    box-shadow: 0 5px 12px rgba(130, 67, 105, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-carrinho-atalho:hover,
.modal-carrinho-atalho:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(130, 67, 105, 0.26);
}

.modal-carrinho-atalho--pop {
    animation: modal-carrinho-pop 0.3s ease both;
}

@keyframes modal-carrinho-pop {
    50% { transform: scale(1.12); }
}

.modal-carrinho-atalho:focus-visible {
    outline: 3px solid rgba(217, 92, 139, 0.32);
    outline-offset: 2px;
}

.modal-carrinho-atalho svg {
    width: 18px;
    height: 18px;
}

.modal-carrinho-atalho .carrinho-contador {
    position: absolute;
    top: -5px;
    right: -5px;
}

.modal-galeria--lembrancinha {
    width: min(100%, 560px);
    aspect-ratio: 1;
    margin-inline: auto;
}

.modal-galeria--centro-de-mesa {
    aspect-ratio: 9 / 16;
}

.modal-galeria--lembrancinha .modal-faixa,
.modal-galeria--lembrancinha .modal-slide {
    height: 100%;
}

.modal-galeria--lembrancinha .modal-slide img {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 12px;
    aspect-ratio: auto;
    object-fit: contain;
}

.modal-imagem-botao {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.modal-imagem-botao:focus-visible {
    outline: 3px solid #D95C8B;
    outline-offset: -3px;
}

.modal-imagem-lupa {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    box-shadow: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.modal-imagem-lupa::before {
    position: absolute;
    inset: 2px;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background: rgba(99, 48, 71, 0.83);
    box-shadow: 0 3px 8px rgba(99, 48, 71, 0.18);
    content: "";
}

.modal-imagem-lupa .card-lupa-icone {
    width: 15px;
    height: 15px;
}

.modal-imagem-botao:hover .modal-imagem-lupa,
.modal-imagem-botao:focus-visible .modal-imagem-lupa {
    background: transparent;
    transform: scale(1.08);
}

.modal-imagem-botao:hover .modal-imagem-lupa::before,
.modal-imagem-botao:focus-visible .modal-imagem-lupa::before {
    background: rgba(217, 92, 139, 0.84);
}

.modal-imagem-modal {
    z-index: 120;
}

.modal-imagem-caixa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(1080px, 100%);
    max-width: 100%;
    max-height: 94vh;
    padding: 18px;
    border: 1px solid rgba(161, 75, 128, 0.2);
    border-radius: 20px;
    background: #FFFDFC;
    box-shadow: 0 30px 70px rgba(99, 48, 71, 0.42);
    animation: modal-subir 0.3s ease both;
}

.modal-imagem-grande {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(94vh - 36px);
    object-fit: contain;
    border-radius: 10px;
}

#modalImagemGrandeGarrafas .modal-imagem-grande {
    filter: drop-shadow(0 9px 12px rgba(74, 45, 64, 0.28));
}

#modalImagemGrande .modal-imagem-grande {
    filter: drop-shadow(0 9px 14px rgba(74, 45, 64, 0.3));
}

#modalImagemGrandeCentroMesa .modal-imagem-grande.centro-mesa-imagem-grande--sombra {
    filter: drop-shadow(0 4px 5px rgba(74, 45, 64, 0.24));
}

#modalImagemGrandeCentroMesa .modal-imagem-grande.centro-mesa-imagem-grande--abajur {
    filter: brightness(1.04) drop-shadow(0 6px 7px rgba(74, 45, 64, 0.30));
}

/* Carrossel vertical de lembrancinhas: os itens são gerados por
   js/lembrancinhas.js a partir da lista de modelos. */
.modal-caixa--lembrancinhas {
    width: min(660px, 100%);
    isolation: isolate;
}

.modal-conteudo--lembrancinhas {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-right: 0;
}

.modal-particulas--lembrancinhas {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.modal-particula {
    position: absolute;
    top: var(--particula-topo);
    left: var(--particula-esquerda);
    width: var(--particula-tamanho);
    height: var(--particula-tamanho);
    border-radius: 50%;
    background: var(--particula-cor);
    opacity: 0.55;
    pointer-events: none;
    will-change: transform, opacity;
    animation: modalParticulaFlutuar var(--particula-duracao) ease-in-out var(--particula-atraso) infinite alternate;
}

@keyframes modalParticulaFlutuar {
    from { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.45; }
    to { transform: translate3d(var(--particula-desvio-x), var(--particula-desvio-y), 0) scale(1.04); opacity: 0.9; }
}

.lembrancinhas-carrossel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: min(68dvh, 620px);
    padding: 0 3px 70px 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    touch-action: pan-y;
}

.lembrancinhas-combo {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: calc(100% - 56px);
    padding: 2px 2px 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.lembrancinhas-combo-galeria {
    flex: none;
    width: min(100%, 200px);
    aspect-ratio: 1;
    margin-inline: auto;
}

.lembrancinhas-combo-galeria .modal-imagem-botao img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

.lembrancinhas-combo .lembrancinhas-combo-galeria .modal-imagem-botao img {
    filter: drop-shadow(0 5px 8px rgba(74, 45, 64, 0.26));
}

.lembrancinhas-combo[data-modelo-id="combo-simples-1"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-simples-3"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-classico-1"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-classico-2"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-classico-3"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-luxo-1"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-luxo-2"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-luxo-3"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-luxo-4"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-luxo-5"] .lembrancinhas-combo-galeria,
.lembrancinhas-combo[data-modelo-id="combo-luxo-6"] .lembrancinhas-combo-galeria {
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

.lembrancinhas-combo[data-modelo-id="combo-simples-1"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-simples-3"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-classico-1"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-classico-2"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-classico-3"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-luxo-1"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-luxo-2"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-luxo-3"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-luxo-4"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-luxo-5"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-luxo-6"] .lembrancinhas-combo-galeria .modal-imagem-botao img {
    object-fit: contain;
    filter: brightness(1.04) drop-shadow(0 4px 7px rgba(74, 45, 64, 0.22));
}

.lembrancinhas-combo[data-modelo-id="combo-luxo-2"] .lembrancinhas-combo-galeria .modal-imagem-botao img,
.lembrancinhas-combo[data-modelo-id="combo-luxo-3"] .lembrancinhas-combo-galeria .modal-imagem-botao img {
    filter: brightness(1.04) drop-shadow(0 6px 10px rgba(74, 45, 64, 0.3));
}

.centro-mesa-combo-galeria .modal-imagem-botao img {
    object-fit: cover;
    background: transparent;
}

#modalCentroMesa .centro-mesa-combo-galeria {
    border: 0;
    background: transparent;
}

#modalCentroMesa .centro-mesa-combo-galeria--destaque {
    border: 1px solid rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalCentroMesa .centro-mesa-combo-galeria--destaque .modal-imagem-botao img {
    padding: 10px;
    object-fit: contain;
    filter: brightness(1.04) drop-shadow(0 7px 12px rgba(74, 45, 64, 0.28));
}

#modalCentroMesa .lembrancinhas-combo[data-produto-id="centro1"] .centro-mesa-combo-galeria--destaque .modal-imagem-botao img {
    filter: brightness(1.08) drop-shadow(0 7px 12px rgba(74, 45, 64, 0.28));
}

#modalCentroMesa .lembrancinhas-combo[data-produto-id="centro2"] .centro-mesa-combo-galeria--destaque .modal-imagem-botao img {
    filter: drop-shadow(0 3px 4px rgba(74, 45, 64, 0.22));
}

#modalCentroMesa .lembrancinhas-combo[data-produto-id="centro3"] .centro-mesa-combo-galeria--destaque .modal-imagem-botao img {
    padding: 4px;
    transform: scale(1.3);
}

#modalCentroMesa .lembrancinhas-combo[data-produto-id="centro4"] .centro-mesa-combo-galeria--destaque .modal-imagem-botao img {
    padding: 4px;
    transform: scale(1.04);
    filter: brightness(1.04) drop-shadow(0 7px 9px rgba(74, 45, 64, 0.30));
}

#modalCentroMesa .lembrancinhas-combo[data-produto-id="centro7"] .centro-mesa-combo-galeria--destaque .modal-imagem-botao img {
    padding: 4px;
    transform: scale(1.08);
}

#modalCentroMesa .lembrancinhas-combo[data-produto-id="centro9"] .centro-mesa-combo-galeria--destaque .modal-imagem-botao img {
    padding: 5px;
    transform: scale(1.12);
}

#modalCentroMesa .centro-mesa-combo--unido {
    gap: 0;
}

#modalCentroMesa .centro-mesa-combo--unido .centro-mesa-combo-galeria--destaque {
    border-radius: 14px 14px 0 0;
}

#modalCentroMesa .centro-mesa-combo--unido .centro-mesa-detalhes {
    margin-top: -1px;
    border-radius: 0 0 14px 14px;
}

#modalCentroMesa .centro-mesa-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #AA7BC2, #8F63A8);
    color: #FFFFFF;
    box-shadow: 0 7px 16px rgba(143, 99, 168, 0.28);
    font-size: 0.86rem;
    text-decoration: none;
}

#modalCentroMesa .centro-mesa-whatsapp:hover {
    background: linear-gradient(135deg, #9E6FB7, #805796);
    box-shadow: 0 10px 20px rgba(128, 87, 150, 0.34);
}

#modalCentroMesa .centro-mesa-whatsapp .botao-wa-icone {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

#modalCentroMesa .centro-mesa-whatsapp:focus-visible {
    outline: 3px solid rgba(168, 116, 190, 0.4);
    outline-offset: 2px;
}

#modalArte .lembrancinhas-combo {
    gap: 0;
}

#modalArte .lembrancinhas-combo .lembrancinhas-combo-galeria {
    border-radius: 14px 14px 0 0;
}

#modalArte .lembrancinhas-combo .lembrancinhas-combo-detalhes {
    margin-top: -1px;
    border-radius: 0 0 14px 14px;
}

.kit-colorido-combo-galeria .modal-imagem-botao img {
    object-fit: cover;
    background: transparent;
}

#modalSacolasECopos .modal-caixa--sacolas .lembrancinhas-combo-galeria {
    border-color: rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos9"] .lembrancinhas-combo-galeria {
    border-color: rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos9"] .modal-imagem-botao img {
    padding: 14px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(74, 45, 64, 0.08));
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos10"] .lembrancinhas-combo-galeria {
    border-color: rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos10"] .modal-imagem-botao img {
    padding: 14px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(74, 45, 64, 0.08));
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos11"] .lembrancinhas-combo-galeria {
    border-color: rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos11"] .modal-imagem-botao img {
    padding: 14px;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.28));
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos3"] .modal-imagem-botao img {
    padding: 8px;
    object-fit: contain;
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos1"] .modal-imagem-botao img {
    padding: 8px;
    object-fit: contain;
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos2"] .modal-imagem-botao img {
    padding: 8px;
    object-fit: contain;
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos4"] .modal-imagem-botao img {
    padding: 8px;
    object-fit: contain;
    transform: scale(0.86);
}

#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos1"] .modal-imagem-botao img,
#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos2"] .modal-imagem-botao img,
#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos3"] .modal-imagem-botao img,
#modalSacolasECopos .lembrancinhas-combo[data-produto-id="sacolas-e-copos4"] .modal-imagem-botao img {
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.28));
}

#modalKitColorido .kit-colorido-combo-galeria {
    border: 0;
    background: transparent;
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit1"] .kit-colorido-combo-galeria,
#modalKitColorido .lembrancinhas-combo[data-produto-id="kit2"] .kit-colorido-combo-galeria,
#modalKitColorido .lembrancinhas-combo[data-produto-id="kit3"] .kit-colorido-combo-galeria,
#modalKitColorido .lembrancinhas-combo[data-produto-id="kit5"] .kit-colorido-combo-galeria,
#modalKitColorido .lembrancinhas-combo[data-produto-id="kit6"] .kit-colorido-combo-galeria,
#modalKitColorido .lembrancinhas-combo[data-produto-id="kit7"] .kit-colorido-combo-galeria,
#modalKitColorido .lembrancinhas-combo[data-produto-id="kit8"] .kit-colorido-combo-galeria,
#modalKitColorido .lembrancinhas-combo[data-produto-id="kit11"] .kit-colorido-combo-galeria {
    border: 1px solid rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit1"] .kit-colorido-combo-galeria .modal-imagem-botao img {
    padding: 10px;
    object-fit: contain;
    filter: brightness(1.04) drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit2"] .kit-colorido-combo-galeria .modal-imagem-botao img {
    padding: 10px;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit3"] .kit-colorido-combo-galeria .modal-imagem-botao img {
    padding: 10px;
    object-fit: contain;
    filter: brightness(1.03) drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit6"] .kit-colorido-combo-galeria .modal-imagem-botao img {
    object-fit: contain;
    transform: scale(0.9);
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit7"] .kit-colorido-combo-galeria .modal-imagem-botao img {
    padding: 6px;
    object-fit: contain;
    transform: scale(1.12);
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit8"] .kit-colorido-combo-galeria .modal-imagem-botao img {
    padding: 6px;
    object-fit: contain;
    transform: scale(1.04);
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .lembrancinhas-combo[data-produto-id="kit11"] .kit-colorido-combo-galeria .modal-imagem-botao img {
    padding: 6px;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .kit-colorido-combo--unido {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(168, 116, 190, 0.3);
    border-radius: 15px;
    background: linear-gradient(135deg, #FBF7FD, #F3EEFA);
    box-shadow: 0 5px 13px rgba(106, 71, 124, 0.12);
}

#modalKitColorido .kit-colorido-combo--unido .kit-colorido-combo-galeria {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
}

#modalKitColorido .kit-colorido-combo--unido .lembrancinhas-combo-detalhes {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 9px 10px;
    border: 0;
    border-top: 1px solid rgba(168, 116, 190, 0.2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#modalKitColorido .kit-colorido-whatsapp {
    width: 100%;
    min-height: 34px;
    margin-top: 6px;
    padding: 7px 8px;
    gap: 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #B68AC9, #9362AF);
    color: #FFFFFF;
    box-shadow: 0 5px 11px rgba(147, 98, 175, 0.26);
    font-size: 0.74rem;
}

#modalKitColorido .kit-colorido-whatsapp:hover {
    background: linear-gradient(135deg, #AA7BC2, #8F63A8);
    box-shadow: 0 7px 14px rgba(143, 99, 168, 0.32);
}

#modalKitColorido .kit-colorido-whatsapp .botao-wa-icone {
    width: 16px;
    height: 16px;
}

#modalDiversos .lembrancinhas-combo[data-produto-id="kit9"] .lembrancinhas-combo-galeria {
    border: 1px solid rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalDiversos .lembrancinhas-combo[data-produto-id="kit10"] .lembrancinhas-combo-galeria {
    border: 1px solid rgba(168, 116, 190, 0.28);
    background:
        radial-gradient(circle at 86% 25%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 28%, transparent 0 73px, rgba(222, 164, 195, 0.25) 74px 76px, transparent 77px),
        radial-gradient(circle at 17% 82%, transparent 0 45px, rgba(219, 170, 204, 0.28) 46px 48px, transparent 49px),
        radial-gradient(circle at 7% 62%, rgba(237, 174, 205, 0.62) 0 4px, transparent 5px),
        radial-gradient(circle at 92% 70%, rgba(229, 170, 197, 0.6) 0 4px, transparent 5px),
        linear-gradient(135deg, #F9EDF4, #F0EFFF);
}

#modalDiversos .lembrancinhas-combo[data-produto-id="kit9"] .lembrancinhas-combo-galeria .modal-imagem-botao img {
    padding: 6px;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalDiversos .lembrancinhas-combo[data-produto-id="kit10"] .lembrancinhas-combo-galeria .modal-imagem-botao img {
    padding: 8px;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(74, 45, 64, 0.24));
}

#modalKitColorido .modal-caixa--lembrancinhas {
    background: linear-gradient(145deg, #E9DDF5 0%, #F8F3FC 52%, #DCC6EC 100%);
}

#modalArte .modal-caixa--lembrancinhas,
#modalCentroMesa .modal-caixa--lembrancinhas,
#modalDiversos .modal-caixa--lembrancinhas,
#modalEncantoCriativo .modal-caixa--lembrancinhas {
    background: linear-gradient(145deg, #E9DDF5 0%, #F8F3FC 52%, #DCC6EC 100%);
}

.lembrancinhas-combo-detalhes {
    width: min(100%, 330px);
    margin-inline: auto;
    padding: 10px 12px;
}

.lembrancinhas-combo-detalhes .carrinho-opcoes {
    gap: 4px;
    margin-top: 6px;
}

.lembrancinhas-combo-detalhes .carrinho-opcao-conteudo {
    padding: 5px 9px;
    font-size: 0.8rem;
}

.modal-footer--lembrancinhas {
    padding-top: 2px;
}

.lembrancinhas-mensagem-selecao {
    margin: 0;
    color: #A13D67;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.lembrancinhas-navegacao {
    display: none;
}

.centro-mesa-detalhes {
    gap: 10px;
}

.centro-mesa-preco,
.centro-mesa-quantidade,
.centro-mesa-total {
    width: 100%;
}

.centro-mesa-preco {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FFFFFF;
    color: #806174;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 3px 9px rgba(99, 48, 71, 0.08);
}

.centro-mesa-preco strong,
.centro-mesa-total strong {
    color: #A13D67;
    font-weight: 900;
}

.centro-mesa-quantidade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #633047;
    font-size: 0.88rem;
    font-weight: 800;
}

.kit-colorido-quantidade-descricao,
.sacolas-e-copos-quantidade-descricao,
.encanto-criativo-quantidade-descricao {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.kit-colorido-quantidade-minima,
.sacolas-e-copos-quantidade-minima,
.encanto-criativo-quantidade-minima {
    display: block;
    color: #806174;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
}

.centro-mesa-quantidade input {
    width: 52px;
    min-height: 44px;
    padding: 6px;
    border: 2px solid #A874BE;
    border-radius: 10px;
    background: #FFFFFF;
    color: #633047;
    font: inherit;
    font-weight: 900;
    text-align: center;
}

.centro-mesa-quantidade input:focus-visible {
    outline: 3px solid rgba(168, 116, 190, 0.3);
    outline-offset: 2px;
}

.centro-mesa-seletor {
    display: grid;
    grid-template-columns: 44px 52px 44px;
    grid-template-rows: 44px;
    width: 140px;
}

.centro-mesa-quantidade-controle {
    display: grid;
    width: 44px;
    min-height: 44px;
    place-items: center;
    border: 2px solid #A874BE;
    background: #F3EEFF;
    color: #A13D67;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.centro-mesa-quantidade-controle:first-child {
    border-radius: 10px 0 0 10px;
}

.centro-mesa-quantidade-controle:last-child {
    border-radius: 0 10px 10px 0;
}

.centro-mesa-seletor .centro-mesa-quantidade-controle:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.centro-mesa-seletor .centro-mesa-quantidade-controle:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid rgba(168, 116, 190, 0.3);
    outline-offset: -3px;
}

.centro-mesa-seletor input {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.centro-mesa-total {
    margin: 0;
    color: #633047;
    font-size: 0.92rem;
    font-weight: 800;
}

@media (max-width: 639px) {
    html,
    body {
        overflow-x: hidden;
    }

    #modalArte,
    #modalDiversos,
    #modalCentroMesa,
    #modalKitColorido,
    #modalEncantoCriativo {
        padding:
            max(4px, env(safe-area-inset-top))
            max(4px, env(safe-area-inset-right))
            max(4px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left));
    }

    #modalArte .modal-caixa--lembrancinhas,
    #modalDiversos .modal-caixa--lembrancinhas,
    #modalCentroMesa .modal-caixa--lembrancinhas,
    #modalKitColorido .modal-caixa--lembrancinhas,
    #modalEncantoCriativo .modal-caixa--lembrancinhas {
        --lembrancinhas-preview: 56px;
        width: 100%;
        height: 100%;
        max-height: none;
        gap: 0;
        padding: 36px 4px 4px;
        border: 1px solid rgba(161, 61, 103, 0.18);
        border-radius: 16px;
    }

    #modalArte .modal-fechar,
    #modalDiversos .modal-fechar,
    #modalCentroMesa .modal-fechar,
    #modalKitColorido .modal-fechar,
    #modalEncantoCriativo .modal-fechar {
        top: 3px;
        right: 5px;
        width: 32px;
        height: 32px;
    }

    .modal-conteudo--lembrancinhas {
        flex: 1 1 auto;
        min-height: 0;
        gap: 5px;
        padding: 0;
        overflow: hidden;
        scrollbar-gutter: auto;
    }

    .lembrancinhas-carrossel {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        gap: 8px;
        padding: 0 1px var(--lembrancinhas-preview);
    }

    .lembrancinhas-combo {
        display: grid;
        flex: 0 0 auto;
        grid-template-rows: var(--lembrancinhas-media-frame-altura, 0px) auto;
        align-items: stretch;
        align-content: start;
        width: 100%;
        min-height: var(--lembrancinhas-slide-altura, calc(100% - var(--lembrancinhas-preview)));
        gap: 5px;
        padding: 0;
    }

    .lembrancinhas-media-frame {
        width: 100%;
        min-height: 0;
        height: var(--lembrancinhas-media-frame-altura, 0px);
        aspect-ratio: auto;
    }

    .lembrancinhas-combo-galeria .modal-imagem-botao img {
        padding: 0;
    }

    .lembrancinhas-combo-detalhes {
        width: 100%;
        max-width: none;
        padding: 6px 8px;
    }

    .lembrancinhas-combo-detalhes .modal-nome {
        font-size: 1.04rem;
        line-height: 1.15;
    }

    .lembrancinhas-combo-detalhes .carrinho-opcoes {
        gap: 3px;
        margin-top: 5px;
    }

    .lembrancinhas-combo-detalhes .carrinho-opcao-conteudo {
        min-height: 38px;
        padding: 6px 10px;
        font-size: 0.86rem;
    }

    .modal-footer--lembrancinhas {
        flex: none;
        gap: 4px;
        padding-top: 0;
    }

    .modal-footer--lembrancinhas .modal-botao {
        min-height: 48px;
        padding: 11px 14px;
        font-size: 0.96rem;
    }

    .lembrancinhas-navegacao {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        align-items: center;
        gap: 5px;
        width: 100%;
        min-height: 30px;
        padding: 1px 5px;
        border: 1px solid rgba(168, 116, 190, 0.22);
        border-radius: 10px;
        background: linear-gradient(135deg, #FFF8FC, #F3EEFF);
    }

    .lembrancinhas-navegacao[hidden] {
        display: none;
    }

    .lembrancinhas-nav-botao {
        display: inline-grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border: 1px solid rgba(161, 61, 103, 0.16);
        border-radius: 50%;
        background: #FFFFFF;
        color: #A13D67;
        font-size: 0.95rem;
        font-weight: 900;
        line-height: 1;
    }

    .lembrancinhas-nav-botao:disabled {
        opacity: 0.38;
    }

    .lembrancinhas-nav-informacao {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 7px;
        min-width: 0;
        text-align: center;
    }

    .lembrancinhas-navegacao .modal-contador {
        color: #8E315B;
        font-size: 0.82rem;
        font-weight: 900;
    }

    .lembrancinhas-nav-instrucao {
        margin: 0;
        color: #806174;
        font-size: 0.64rem;
        font-weight: 700;
        white-space: nowrap;
    }
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.modal-galeria--lembrancinha .modal-video {
    display: block;
    width: 100%;
    height: 100%;
    padding: 12px;
    object-fit: contain;
}

@media (max-width: 639px) {
    .modal-caixa--lembrancinhas .lembrancinhas-carrossel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: max-content;
        align-content: start;
        align-items: start;
        gap: 10px 8px;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 2px 70px;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: none;
    }

    .modal-caixa--lembrancinhas .lembrancinhas-combo {
        display: flex;
        align-self: start;
        min-width: 0;
        width: 100%;
        height: max-content;
        min-height: 0 !important;
        gap: 6px;
        padding: 0;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .modal-caixa--lembrancinhas .lembrancinhas-combo-galeria,
    .modal-caixa--lembrancinhas .lembrancinhas-media-frame {
        width: 100%;
        height: auto !important;
        aspect-ratio: 1;
    }

    .modal-caixa--lembrancinhas .lembrancinhas-combo-detalhes {
        width: 100%;
        min-width: 0;
        padding: 6px 3px;
    }

    .modal-caixa--lembrancinhas .lembrancinhas-combo-detalhes .modal-nome {
        font-size: 0.84rem;
        line-height: 1.15;
    }

    .modal-caixa--lembrancinhas .lembrancinhas-combo-detalhes .carrinho-opcoes {
        width: 100%;
        min-width: 0;
        gap: 3px;
    }

    .modal-caixa--lembrancinhas .lembrancinhas-combo-detalhes .carrinho-opcao,
    .modal-caixa--lembrancinhas .lembrancinhas-combo-detalhes .carrinho-opcao-conteudo {
        min-width: 0;
    }

    .modal-caixa--lembrancinhas .lembrancinhas-combo-detalhes .carrinho-opcao-conteudo {
        min-height: 34px;
        gap: 2px;
        padding: 5px 4px;
        font-size: 0.7rem;
        line-height: 1.1;
        text-align: center;
    }

    .modal-caixa--lembrancinhas .centro-mesa-preco {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
        font-size: 0.7rem;
        text-align: center;
    }

    .modal-caixa--lembrancinhas .centro-mesa-quantidade {
        flex-direction: column;
        gap: 4px;
        font-size: 0.72rem;
        text-align: center;
    }

    .modal-caixa--lembrancinhas .centro-mesa-seletor {
        grid-template-columns: 30px 36px 30px;
        grid-template-rows: 30px;
        width: 96px;
    }

    .modal-caixa--lembrancinhas .centro-mesa-quantidade-controle {
        width: 30px;
        min-height: 30px;
        font-size: 0.88rem;
    }

    .modal-caixa--lembrancinhas .centro-mesa-quantidade input {
        width: 36px;
        min-height: 30px;
        padding: 3px;
        font-size: 0.78rem;
    }

    .modal-caixa--lembrancinhas .centro-mesa-total {
        font-size: 0.76rem;
        text-align: center;
    }
}

@media (max-width: 359px) {
    .modal-caixa--lembrancinhas .lembrancinhas-combo-detalhes .carrinho-opcao-conteudo {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
}

.modal-detalhes {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 330px);
    min-width: 0;
    margin-inline: auto;
    padding: 16px 18px;
    border: 1px solid rgba(22, 116, 209, 0.16);
    border-radius: 14px;
    background: linear-gradient(135deg, #F6FBFF 0%, #EAF6FF 100%);
    text-align: center;
}

.modal-detalhes .modal-nome {
    margin: 0;
    font-size: 1.2rem;
}

.modal-descricao {
    display: grid;
    gap: 5px;
    width: 100%;
    margin: 12px 0 0;
    color: var(--azul-forte);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
}

.modal-descricao span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--branco);
    box-shadow: 0 2px 7px rgba(9, 43, 82, 0.08);
}

.modal-descricao strong {
    color: var(--azul-marinho);
    font-weight: 900;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.modal-contador {
    margin: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-suave);
    line-height: 1.4;
    white-space: nowrap;
}

.modal-nome {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(19px, 5vw, 24px);
    font-weight: 800;
    color: var(--azul-marinho);
    line-height: 1.2;
}

.modal-botao {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    padding: 13px 16px;
    border-radius: var(--raio-p);
    background: linear-gradient(135deg, #B68AC9, #9362AF);
    color: var(--branco);
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(147, 98, 175, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-botao:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(147, 98, 175, 0.45);
}

.modal-botao:focus-visible {
    outline: 3px solid var(--dourado-suave);
    outline-offset: 2px;
}

.modal-botao .icone-wa {
    width: 18px;
    height: 18px;
    flex: none;
}

@media (min-width: 640px) {
    .modal-caixa {
        padding: 26px;
    }
}

@media (max-width: 639px) {
    /* Em telas estreitas, a disposição triangular preserva o tamanho das
       canecas antigas: a central fica acima e as laterais ocupam a base,
       sem forçar três canecas pequenas numa única linha. */
    .mockup-canecas--triplo:not(.canecas-categoria-mockup) {
        aspect-ratio: 1000 / 860;
    }

    .mockup-canecas--triplo:not(.canecas-categoria-mockup) .mockup-motion--esquerda {
        left: 0;
        top: 51%;
        width: 47%;
    }

    .mockup-canecas--triplo:not(.canecas-categoria-mockup) .mockup-motion--direita {
        left: 53%;
        top: 51%;
        width: 47%;
    }

    .mockup-canecas--triplo:not(.canecas-categoria-mockup) .mockup-motion--centro {
        left: 26.5%;
        top: 0;
        width: 47%;
    }

    .modal {
        padding: 8px;
    }

    .modal-caixa {
        max-height: calc(100dvh - 16px);
        gap: 10px;
        padding: 44px 12px 12px;
    }

    .modal-conteudo {
        gap: 10px;
    }

    .mockup-chopp {
        width: min(430px, 100%);
        aspect-ratio: 1.18;
    }

    .mockup-chopp-scale {
        left: -12.5%;
        width: 125%;
        margin-top: -62.5%;
    }

    .mockup-motion--esquerda {
        --float-lift: -4px;
    }

    .mockup-motion--direita {
        --float-lift: -3.5px;
    }

    .mockup-sombra--projetada-esquerda,
    .mockup-sombra--projetada-direita {
        filter: blur(5px);
        transform: translate(3px, 2px);
    }

    .mockup-sombra--contato-esquerda,
    .mockup-sombra--contato-direita {
        filter: blur(2px);
    }

    .mockup-sombra--chao-continuo {
        filter: blur(8px);
        transform: translate(4px, 2px);
    }

    .modal-slide img {
        max-height: 27vh;
    }

    .modal-galeria--lembrancinha {
        width: min(100%, 42dvh);
    }
}

@media (min-width: 768px) {
    .modal-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .modal-contador {
        flex: none;
        order: -1;
        text-align: left;
    }

    .modal-nome {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 1.15rem;
    }

    .modal-detalhes {
        flex: 1 1 auto;
        margin-inline: 0;
    }

    .modal-botao {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
}
@keyframes modal-aparecer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modal-subir {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}