/* =========================================================
   DÉA CESTAS
   STYLE.CSS
   Desktop + Tablet + Mobile
========================================================= */


/* =========================================================
   1. CONFIGURAÇÕES GERAIS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {

    /* CORES */
    --cor-fundo: #fffaf8;
    --cor-fundo-secundario: #f8efec;
    --cor-fundo-rosa: #f4e3e1;

    --cor-rosa: #b97878;
    --cor-rosa-escuro: #965c5c;
    --cor-rosa-claro: #ead0cd;

    --cor-verde: #7f8d6a;
    --cor-verde-claro: #e7eadf;

    --cor-texto: #292323;
    --cor-texto-suave: #766d6b;

    --cor-branco: #ffffff;
    --cor-borda: #eadfdb;

    /* SOMBRAS */
    --sombra-suave:
        0 12px 35px rgba(71, 49, 45, 0.08);

    --sombra-card:
        0 15px 40px rgba(71, 49, 45, 0.10);

    /* TAMANHOS */
    --largura-container: 1200px;

    /* BORDAS */
    --raio-pequeno: 10px;
    --raio-medio: 18px;
    --raio-grande: 30px;
}


/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    overflow-x: hidden;
}


img {
    max-width: 100%;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    border: none;
    cursor: pointer;
}


.container {
    width: min(
        calc(100% - 48px),
        var(--largura-container)
    );

    margin: 0 auto;
}


.secao {
    padding: 100px 0;
}


/* =========================================================
   2. CABEÇALHO
========================================================= */

.topo {
    width: 100%;
    background: rgba(255, 250, 248, 0.96);
    border-bottom: 1px solid var(--cor-borda);

    position: sticky;
    top: 0;
    z-index: 1000;

    backdrop-filter: blur(14px);
}


.topo-container {
    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}


/* MARCA */

.marca {
    display: flex;
    align-items: center;
    gap: 13px;

    flex-shrink: 0;
}


.logo {
    width: 62px;
    height: 62px;

    object-fit: cover;
    border-radius: 50%;

    border: 2px solid var(--cor-rosa-claro);
}


.marca-texto {
    display: flex;
    flex-direction: column;

    line-height: 1.25;
}


.marca-texto strong {
    font-family: 'Playfair Display', serif;

    font-size: 21px;
    font-weight: 700;

    color: var(--cor-texto);
}


.marca-texto span {
    margin-top: 4px;

    font-size: 10px;
    font-weight: 600;

    color: var(--cor-texto-suave);

    text-transform: uppercase;
    letter-spacing: 1px;
}


/* MENU */

.menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 34px;

    margin-left: auto;
}


.menu a {
    position: relative;

    padding: 31px 0;

    font-size: 14px;
    font-weight: 600;

    color: var(--cor-texto-suave);

    transition: 0.25s ease;
}


.menu a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 24px;

    width: 0;
    height: 2px;

    background: var(--cor-rosa);

    transform: translateX(-50%);

    transition: 0.25s ease;
}


.menu a:hover {
    color: var(--cor-rosa-escuro);
}


.menu a:hover::after {
    width: 100%;
}


/* AÇÕES DO TOPO */

.acoes-topo {
    display: flex;
    align-items: center;

    gap: 10px;
}


.botao-carrinho {
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 14px;

    background: var(--cor-branco);

    border: 1px solid var(--cor-borda);
    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;

    transition: 0.25s ease;
}


.botao-carrinho:hover {
    border-color: var(--cor-rosa);
    transform: translateY(-1px);
}


.icone-carrinho {
    font-size: 17px;
}


.quantidade-carrinho {
    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cor-rosa);
    color: var(--cor-branco);

    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;
}


.botao-menu-mobile {
    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    background: transparent;

    color: var(--cor-texto);

    border: 1px solid var(--cor-borda);
    border-radius: 50%;

    font-size: 21px;
}


/* =========================================================
   3. HERO
========================================================= */

.hero {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(234, 208, 205, 0.58),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fffaf8 0%,
            #fff7f4 52%,
            #f8e9e6 100%
        );

    overflow: hidden;
}


.hero::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -170px;
    bottom: -150px;

    border-radius: 50%;

    background: rgba(127, 141, 106, 0.08);
}


.hero-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, 0.92fr);

    align-items: center;

    gap: 80px;

    padding-top: 70px;
    padding-bottom: 70px;
}


/* CONTEÚDO HERO */

.hero-conteudo {
    max-width: 650px;
}


.hero-etiqueta {
    display: inline-flex;
    align-items: center;

    padding: 9px 15px;

    margin-bottom: 22px;

    background: var(--cor-fundo-rosa);

    border-radius: 50px;

    color: var(--cor-rosa-escuro);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.3px;
}


.hero h1 {
    max-width: 620px;

    font-family: 'Playfair Display', serif;

    font-size: clamp(50px, 5vw, 72px);
    line-height: 1.02;

    font-weight: 600;

    letter-spacing: -2.5px;
}


.hero h1 span {
    display: block;

    color: var(--cor-rosa-escuro);

    font-style: italic;
}


.hero-conteudo > p {
    max-width: 580px;

    margin-top: 25px;

    font-size: 17px;
    line-height: 1.75;

    color: var(--cor-texto-suave);
}


/* BOTÕES HERO */

.hero-botoes {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


.botao {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 25px;

    border-radius: 50px;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.botao:hover {
    transform: translateY(-2px);
}


.botao-principal {
    background: var(--cor-rosa-escuro);
    color: var(--cor-branco);

    box-shadow:
        0 12px 28px rgba(150, 92, 92, 0.20);
}


.botao-principal:hover {
    background: #814e4e;
}


.botao-secundario {
    background: rgba(255, 255, 255, 0.68);

    color: var(--cor-texto);

    border: 1px solid var(--cor-borda);
}


.botao-secundario:hover {
    background: var(--cor-branco);
}


/* BENEFÍCIOS HERO */

.hero-beneficios {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 38px;
}


.hero-beneficios div {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--cor-texto-suave);

    font-size: 12px;
    font-weight: 600;
}


.hero-beneficios strong {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cor-branco);

    color: var(--cor-rosa-escuro);

    border: 1px solid var(--cor-borda);
    border-radius: 50%;
}


/* VISUAL HERO */

.hero-visual {
    min-height: 500px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}


.hero-forma {
    position: absolute;

    border-radius: 50%;
}


.hero-forma-1 {
    width: 420px;
    height: 420px;

    background:
        linear-gradient(
            145deg,
            rgba(234, 208, 205, 0.95),
            rgba(255, 255, 255, 0.62)
        );
}


.hero-forma-2 {
    width: 355px;
    height: 355px;

    border: 1px solid rgba(150, 92, 92, 0.20);

    transform: translate(55px, -45px);
}


.hero-logo-container {
    position: relative;
    z-index: 3;

    width: 340px;
    height: 340px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid rgba(255, 255, 255, 0.85);

    border-radius: 50%;

    box-shadow:
        0 30px 70px rgba(93, 65, 60, 0.15);

    backdrop-filter: blur(10px);
}


.hero-logo {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


.detalhe-floral {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--cor-rosa);

    font-size: 31px;
}


.detalhe-1 {
    top: 15px;
    right: -12px;
}


.detalhe-2 {
    left: -15px;
    bottom: 35px;

    color: var(--cor-verde);
}


/* =========================================================
   4. TÍTULOS DAS SEÇÕES
========================================================= */

.titulo-secao {
    max-width: 720px;

    margin: 0 auto 52px;

    text-align: center;
}


.titulo-secao > span,
.subtitulo {
    display: block;

    margin-bottom: 10px;

    color: var(--cor-rosa-escuro);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 2px;
}


.titulo-secao h2,
.sobre-conteudo h2,
.chamada-whatsapp h2 {
    font-family: 'Playfair Display', serif;

    font-size: clamp(35px, 4vw, 48px);
    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -1.2px;
}


.titulo-secao p {
    max-width: 580px;

    margin: 16px auto 0;

    color: var(--cor-texto-suave);

    font-size: 15px;
}


/* =========================================================
   5. CATEGORIAS
========================================================= */

.categorias {
    background: var(--cor-branco);
}


.grid-categorias {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


.categoria-card {
    min-width: 0;
    min-height: 205px;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 27px;

    text-align: left;

    background: var(--cor-fundo);

    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-medio);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.categoria-card:hover {
    transform: translateY(-6px);

    border-color: var(--cor-rosa-claro);

    box-shadow: var(--sombra-card);
}


.categoria-icone {
    width: 49px;
    height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 21px;

    background: var(--cor-fundo-rosa);

    border-radius: 50%;

    font-size: 21px;
}


.categoria-card h3 {
    margin-bottom: 6px;

    font-family: 'Playfair Display', serif;

    font-size: 21px;
}


.categoria-card p {
    padding-right: 20px;

    color: var(--cor-texto-suave);

    font-size: 12px;
    line-height: 1.55;
}


.categoria-seta {
    position: absolute;

    right: 22px;
    bottom: 22px;

    color: var(--cor-rosa-escuro);

    font-size: 20px;

    transition: 0.25s ease;
}


.categoria-card:hover .categoria-seta {
    transform: translateX(4px);
}


/* =========================================================
   6. PRODUTOS
========================================================= */

.produtos {
    background: var(--cor-fundo);
}


.cabecalho-produtos {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 48px;
}


.titulo-secao-esquerda {
    max-width: 550px;

    margin: 0;

    text-align: left;
}


.titulo-secao-esquerda p {
    margin-left: 0;
    margin-right: 0;
}


.filtros-produtos {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}


.filtro {
    min-height: 39px;

    padding: 0 16px;

    background: transparent;

    border: 1px solid var(--cor-borda);
    border-radius: 50px;

    color: var(--cor-texto-suave);

    font-size: 12px;
    font-weight: 600;

    transition: 0.2s ease;
}


.filtro:hover,
.filtro.ativo {
    background: var(--cor-rosa-escuro);
    border-color: var(--cor-rosa-escuro);

    color: var(--cor-branco);
}


/* GRID PARA PRODUTOS REAIS */

.grid-produtos {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/* ESTADO PROVISÓRIO */

.produtos-vazio {
    min-height: 300px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 50px 30px;

    background:
        linear-gradient(
            135deg,
            var(--cor-branco),
            var(--cor-fundo-secundario)
        );

    border: 1px dashed var(--cor-rosa-claro);
    border-radius: var(--raio-grande);

    text-align: center;
}


.produtos-vazio-icone {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    background: var(--cor-fundo-rosa);

    border-radius: 50%;

    color: var(--cor-rosa-escuro);

    font-size: 29px;
}


.produtos-vazio h3 {
    font-family: 'Playfair Display', serif;

    font-size: 28px;
}


.produtos-vazio p {
    max-width: 480px;

    margin-top: 9px;

    color: var(--cor-texto-suave);

    font-size: 14px;
}


/* =========================================================
   7. SOBRE
========================================================= */

.sobre {
    background: var(--cor-branco);
}


.sobre-container {
    display: grid;

    grid-template-columns:
        minmax(350px, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 90px;
}


/* VISUAL */

.sobre-visual {
    min-height: 490px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            var(--cor-fundo-secundario),
            var(--cor-fundo-rosa)
        );

    border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
}


.sobre-logo {
    width: 315px;
    height: 315px;

    padding: 14px;

    background: rgba(255, 255, 255, 0.72);

    border-radius: 50%;

    box-shadow: var(--sombra-card);
}


.sobre-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


/* TEXTO */

.sobre-conteudo {
    max-width: 570px;
}


.sobre-conteudo h2 {
    margin-bottom: 24px;
}


.sobre-conteudo > p {
    margin-bottom: 15px;

    color: var(--cor-texto-suave);

    font-size: 15px;
    line-height: 1.8;
}


.sobre-destaques {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin-top: 31px;
}


.sobre-destaques div {
    padding: 19px;

    background: var(--cor-fundo);

    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
}


.sobre-destaques strong {
    display: block;

    margin-bottom: 5px;

    color: var(--cor-rosa-escuro);

    font-size: 13px;
}


.sobre-destaques span {
    display: block;

    color: var(--cor-texto-suave);

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   8. COMO FUNCIONA
========================================================= */

.como-funciona {
    background: var(--cor-fundo-secundario);
}


.passos {
    position: relative;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

    max-width: 950px;

    margin: 0 auto;
}


.passos::before {
    content: "";

    position: absolute;

    top: 45px;
    left: 16.5%;

    width: 67%;
    height: 1px;

    background: var(--cor-rosa-claro);
}


.passo {
    position: relative;
    z-index: 2;

    padding: 0 25px;

    text-align: center;
}


.passo-numero {
    position: absolute;

    top: 3px;
    right: 28px;

    color: rgba(150, 92, 92, 0.22);

    font-family: 'Playfair Display', serif;

    font-size: 25px;
    font-weight: 700;
}


.passo-icone {
    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 22px;

    background: var(--cor-branco);

    border: 1px solid var(--cor-rosa-claro);
    border-radius: 50%;

    box-shadow: var(--sombra-suave);

    color: var(--cor-rosa-escuro);

    font-size: 26px;
}


.passo h3 {
    margin-bottom: 8px;

    font-family: 'Playfair Display', serif;

    font-size: 21px;
}


.passo p {
    max-width: 240px;

    margin: 0 auto;

    color: var(--cor-texto-suave);

    font-size: 12px;
}


/* =========================================================
   9. CHAMADA WHATSAPP
========================================================= */

.chamada-whatsapp {
    padding: 75px 0;

    background: var(--cor-rosa-escuro);
    color: var(--cor-branco);
}


.chamada-whatsapp-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


.chamada-whatsapp-container > div {
    max-width: 720px;
}


.chamada-whatsapp span {
    display: block;

    margin-bottom: 8px;

    color: #f1d6d3;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 2px;
}


.chamada-whatsapp h2 {
    color: var(--cor-branco);
}


.chamada-whatsapp p {
    max-width: 630px;

    margin-top: 14px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 14px;
}


.botao-whatsapp {
    flex-shrink: 0;

    background: var(--cor-branco);

    color: var(--cor-rosa-escuro);

    box-shadow:
        0 15px 35px rgba(67, 38, 38, 0.16);
}


/* =========================================================
   10. RODAPÉ
========================================================= */

.rodape {
    background: #292323;

    color: var(--cor-branco);
}


.rodape-container {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}


.rodape-marca {
    display: flex;
    align-items: center;

    gap: 13px;
}


.rodape-marca img {
    width: 58px;
    height: 58px;

    object-fit: cover;

    border-radius: 50%;
}


.rodape-marca div {
    display: flex;
    flex-direction: column;
}


.rodape-marca strong {
    font-family: 'Playfair Display', serif;

    font-size: 18px;
}


.rodape-marca span {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: 1px;
}


.rodape-links {
    display: flex;
    align-items: center;

    gap: 25px;
}


.rodape-links a {
    color: rgba(255, 255, 255, 0.70);

    font-size: 12px;

    transition: 0.2s ease;
}


.rodape-links a:hover {
    color: var(--cor-branco);
}


.rodape-final {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.rodape-final .container {
    min-height: 58px;

    display: flex;
    align-items: center;
}


.rodape-final p {
    color: rgba(255, 255, 255, 0.42);

    font-size: 10px;
}


/* =========================================================
   11. TABLET
   769px até 1024px
========================================================= */

@media (max-width: 1024px) {

    .container {
        width: min(
            calc(100% - 40px),
            var(--largura-container)
        );
    }


    .secao {
        padding: 85px 0;
    }


    /* TOPO */

    .topo-container {
        min-height: 80px;

        gap: 18px;
    }


    .logo {
        width: 55px;
        height: 55px;
    }


    .marca-texto span {
        display: none;
    }


    .menu {
        gap: 20px;
    }


    .menu a {
        font-size: 13px;
    }


    /* HERO */

    .hero {
        min-height: 620px;
    }


    .hero-container {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(300px, 0.95fr);

        gap: 35px;
    }


    .hero h1 {
        font-size: clamp(45px, 6vw, 60px);
    }


    .hero-conteudo > p {
        font-size: 15px;
    }


    .hero-visual {
        min-height: 410px;
    }


    .hero-forma-1 {
        width: 340px;
        height: 340px;
    }


    .hero-forma-2 {
        width: 290px;
        height: 290px;
    }


    .hero-logo-container {
        width: 280px;
        height: 280px;
    }


    /* CATEGORIAS */

    .grid-categorias {
        grid-template-columns: repeat(2, 1fr);
    }


    .categoria-card {
        min-height: 185px;
    }


    /* PRODUTOS */

    .grid-produtos {
        grid-template-columns: repeat(3, 1fr);
    }


    .cabecalho-produtos {
        align-items: flex-start;
        flex-direction: column;

        gap: 25px;
    }


    .filtros-produtos {
        justify-content: flex-start;
    }


    /* SOBRE */

    .sobre-container {
        gap: 50px;
    }


    .sobre-visual {
        min-height: 410px;
    }


    .sobre-logo {
        width: 260px;
        height: 260px;
    }

}


/* =========================================================
   12. MOBILE
   Até 768px
========================================================= */

@media (max-width: 768px) {

    .container {
        width: calc(100% - 32px);
    }


    .secao {
        padding: 70px 0;
    }


    /* =====================================================
       TOPO MOBILE
    ===================================================== */

    .topo-container {
        min-height: 70px;

        gap: 10px;
    }


    .logo {
        width: 48px;
        height: 48px;
    }


    .marca {
        gap: 9px;
    }


    .marca-texto strong {
        font-size: 17px;
    }


    .marca-texto span {
        display: none;
    }


    .texto-carrinho {
        display: none;
    }


    .botao-carrinho {
        min-width: 44px;
        min-height: 44px;

        justify-content: center;

        padding: 0 8px;

        position: relative;
    }


    .icone-carrinho {
        font-size: 17px;
    }


    .quantidade-carrinho {
        position: absolute;

        top: -5px;
        right: -5px;

        width: 20px;
        height: 20px;

        border: 2px solid var(--cor-fundo);

        font-size: 9px;
    }


    .botao-menu-mobile {
        display: flex;
    }


    /* MENU MOBILE */

    .menu {
        width: 100%;

        position: absolute;

        top: 70px;
        left: 0;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        margin: 0;

        padding: 10px 16px 18px;

        background: var(--cor-fundo);

        border-bottom: 1px solid var(--cor-borda);

        box-shadow: var(--sombra-suave);
    }


    .menu.ativo {
        display: flex;
    }


    .menu a {
        width: 100%;

        padding: 13px 5px;

        border-bottom: 1px solid var(--cor-borda);

        font-size: 13px;
    }


    .menu a:last-child {
        border-bottom: none;
    }


    .menu a::after {
        display: none;
    }


    /* =====================================================
       HERO MOBILE
    ===================================================== */

    .hero {
        min-height: auto;
    }


    .hero-container {
        display: flex;
        flex-direction: column;

        gap: 45px;

        padding-top: 55px;
        padding-bottom: 60px;
    }


    .hero-conteudo {
        width: 100%;

        max-width: none;

        text-align: center;
    }


    .hero-etiqueta {
        margin-bottom: 18px;

        padding: 8px 12px;

        font-size: 9px;

        letter-spacing: 1px;
    }


    .hero h1 {
        max-width: 520px;

        margin: 0 auto;

        font-size: clamp(41px, 12vw, 56px);

        line-height: 1.03;

        letter-spacing: -1.7px;
    }


    .hero-conteudo > p {
        max-width: 500px;

        margin: 20px auto 0;

        font-size: 14px;
        line-height: 1.7;
    }


    .hero-botoes {
        width: 100%;

        justify-content: center;

        margin-top: 27px;
    }


    .botao {
        min-height: 49px;

        padding: 0 21px;

        font-size: 12px;
    }


    .hero-beneficios {
        justify-content: center;

        gap: 13px;

        margin-top: 28px;
    }


    .hero-beneficios div {
        font-size: 10px;
    }


    .hero-beneficios strong {
        width: 27px;
        height: 27px;
    }


    /* LOGO HERO MOBILE */

    .hero-visual {
        width: 100%;
        min-height: 360px;
    }


    .hero-forma-1 {
        width: min(330px, 85vw);
        height: min(330px, 85vw);
    }


    .hero-forma-2 {
        width: min(280px, 72vw);
        height: min(280px, 72vw);

        transform: translate(30px, -25px);
    }


    .hero-logo-container {
        width: min(270px, 70vw);
        height: min(270px, 70vw);

        padding: 14px;
    }


    .detalhe-floral {
        font-size: 25px;
    }


    /* =====================================================
       TÍTULOS MOBILE
    ===================================================== */

    .titulo-secao {
        margin-bottom: 37px;
    }


    .titulo-secao > span,
    .subtitulo {
        font-size: 9px;

        letter-spacing: 1.6px;
    }


    .titulo-secao h2,
    .sobre-conteudo h2,
    .chamada-whatsapp h2 {
        font-size: clamp(31px, 9vw, 40px);

        letter-spacing: -0.8px;
    }


    .titulo-secao p {
        margin-top: 12px;

        font-size: 13px;
    }


    /* =====================================================
       CATEGORIAS MOBILE
    ===================================================== */

    .grid-categorias {
        grid-template-columns: repeat(2, 1fr);

        gap: 11px;
    }


    .categoria-card {
        min-height: 185px;

        padding: 18px;
    }


    .categoria-icone {
        width: 43px;
        height: 43px;

        margin-bottom: 17px;

        font-size: 18px;
    }


    .categoria-card h3 {
        font-size: 18px;
    }


    .categoria-card p {
        padding-right: 0;

        font-size: 10px;
    }


    .categoria-seta {
        right: 15px;
        bottom: 13px;

        font-size: 17px;
    }


    /* =====================================================
       PRODUTOS MOBILE
    ===================================================== */

    .cabecalho-produtos {
        margin-bottom: 32px;
    }


    .titulo-secao-esquerda {
        text-align: center;
    }


    .titulo-secao-esquerda p {
        margin-left: auto;
        margin-right: auto;
    }


    .filtros-produtos {
        width: 100%;

        flex-wrap: nowrap;

        justify-content: flex-start;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }


    .filtros-produtos::-webkit-scrollbar {
        display: none;
    }


    .filtro {
        flex-shrink: 0;

        min-height: 37px;

        padding: 0 14px;

        font-size: 10px;
    }


    .grid-produtos {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;
    }


    .produtos-vazio {
        min-height: 260px;

        padding: 35px 20px;

        border-radius: 22px;
    }


    .produtos-vazio-icone {
        width: 56px;
        height: 56px;

        font-size: 25px;
    }


    .produtos-vazio h3 {
        font-size: 24px;
    }


    .produtos-vazio p {
        font-size: 12px;
    }


    /* =====================================================
       SOBRE MOBILE
    ===================================================== */

    .sobre-container {
        display: flex;
        flex-direction: column;

        gap: 45px;
    }


    .sobre-visual {
        width: 100%;

        min-height: 360px;
    }


    .sobre-logo {
        width: min(260px, 68vw);
        height: min(260px, 68vw);
    }


    .sobre-conteudo {
        max-width: none;

        text-align: center;
    }


    .sobre-conteudo h2 {
        margin-bottom: 19px;
    }


    .sobre-conteudo > p {
        font-size: 13px;
    }


    .sobre-destaques {
        grid-template-columns: 1fr;

        margin-top: 25px;

        text-align: left;
    }


    /* =====================================================
       PASSOS MOBILE
    ===================================================== */

    .passos {
        grid-template-columns: 1fr;

        gap: 42px;

        max-width: 450px;
    }


    .passos::before {
        display: none;
    }


    .passo {
        padding: 0 20px;
    }


    .passo-numero {
        right: 25%;
    }


    .passo-icone {
        width: 78px;
        height: 78px;

        margin-bottom: 17px;

        font-size: 23px;
    }


    .passo h3 {
        font-size: 20px;
    }


    .passo p {
        font-size: 11px;
    }


    /* =====================================================
       WHATSAPP MOBILE
    ===================================================== */

    .chamada-whatsapp {
        padding: 60px 0;
    }


    .chamada-whatsapp-container {
        flex-direction: column;

        gap: 28px;

        text-align: center;
    }


    .chamada-whatsapp p {
        margin-left: auto;
        margin-right: auto;

        font-size: 12px;
    }


    .botao-whatsapp {
        width: 100%;

        max-width: 330px;
    }


    /* =====================================================
       RODAPÉ MOBILE
    ===================================================== */

    .rodape-container {
        min-height: auto;

        flex-direction: column;

        padding-top: 42px;
        padding-bottom: 35px;

        text-align: center;
    }


    .rodape-marca {
        flex-direction: column;
    }


    .rodape-marca div {
        align-items: center;
    }


    .rodape-links {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 15px 22px;
    }


    .rodape-links a {
        font-size: 11px;
    }


    .rodape-final .container {
        min-height: 55px;

        justify-content: center;

        text-align: center;
    }

}


/* =========================================================
   13. CELULARES PEQUENOS
   Até 480px
========================================================= */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 28px);
    }


    /* TOPO */

    .marca-texto strong {
        font-size: 16px;
    }


    .logo {
        width: 45px;
        height: 45px;
    }


    /* HERO */

    .hero-container {
        padding-top: 45px;
    }


    .hero h1 {
        font-size: clamp(38px, 12vw, 49px);
    }


    .hero-botoes {
        flex-direction: column;
    }


    .hero-botoes .botao {
        width: 100%;
    }


    .hero-beneficios {
        display: grid;

        grid-template-columns: 1fr;

        max-width: 220px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }


    .hero-visual {
        min-height: 315px;
    }


    .hero-logo-container {
        width: min(235px, 68vw);
        height: min(235px, 68vw);
    }


    /* CATEGORIAS */

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


    .categoria-card {
        min-height: 145px;
    }


    /* PRODUTOS */

    .grid-produtos {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 9px;
    }


    /* SOBRE */

    .sobre-visual {
        min-height: 310px;
    }


    .sobre-logo {
        width: min(225px, 66vw);
        height: min(225px, 66vw);
    }

}


/* =========================================================
   14. REFINAMENTO MOBILE - DÉA CESTAS
   Layout compacto e melhor aproveitamento horizontal
   Mantém o desktop inalterado
========================================================= */

@media (max-width: 768px) {

    /* SEÇÕES */
    .secao {
        padding: 58px 0;
    }

    /* HERO */
    .hero-container {
        gap: 30px;
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .hero h1 {
        font-size: clamp(39px, 10vw, 51px);
    }

    .hero-conteudo > p {
        max-width: 440px;
        margin-top: 17px;
        font-size: 13px;
    }

    .hero-botoes {
        margin-top: 23px;
    }

    .hero-beneficios {
        margin-top: 23px;
        gap: 10px 17px;
    }

    .hero-visual {
        min-height: 310px;
    }

    .hero-forma-1 {
        width: min(300px, 75vw);
        height: min(300px, 75vw);
    }

    .hero-forma-2 {
        width: min(255px, 65vw);
        height: min(255px, 65vw);
        transform: translate(27px, -20px);
    }

    .hero-logo-container {
        width: min(245px, 62vw);
        height: min(245px, 62vw);
    }

    /* TÍTULOS */
    .titulo-secao {
        margin-bottom: 30px;
    }

    /* CATEGORIAS - 2 x 2 */
    .grid-categorias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .categoria-card {
        min-height: 165px;
        padding: 17px;
    }

    .categoria-icone {
        width: 40px;
        height: 40px;
        margin-bottom: 14px;
    }

    /* PRODUTOS */
    .cabecalho-produtos {
        gap: 19px;
        margin-bottom: 27px;
    }

    .produtos-vazio {
        min-height: 225px;
    }

    /* SOBRE */
    .sobre-container {
        gap: 32px;
    }

    .sobre-visual {
        min-height: 300px;
    }

    .sobre-logo {
        width: min(220px, 55vw);
        height: min(220px, 55vw);
    }

    .sobre-conteudo > p {
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Destaques lado a lado */
    .sobre-destaques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 22px;
    }

    .sobre-destaques div {
        min-width: 0;
        padding: 16px 14px;
    }

    .sobre-destaques strong {
        font-size: 12px;
    }

    .sobre-destaques span {
        font-size: 10px;
    }

    /* COMO FAZER O PEDIDO - 3 cards lado a lado */
    .como-funciona {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .passos {
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .passos::before {
        display: none;
    }

    .passo {
        min-width: 0;
        padding: 18px 8px;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid var(--cor-borda);
        border-radius: 16px;
    }

    .passo-numero {
        position: static;
        display: block;
        margin-bottom: 8px;
        font-size: 16px;
    }

    .passo-icone {
        width: 55px;
        height: 55px;
        margin: 0 auto 12px;
        font-size: 19px;
    }

    .passo h3 {
        margin-bottom: 6px;
        font-size: 16px;
    }

    .passo p {
        max-width: 125px;
        font-size: 9px;
        line-height: 1.45;
    }

    /* WHATSAPP */
    .chamada-whatsapp {
        padding: 48px 0;
    }

    .chamada-whatsapp-container {
        gap: 22px;
    }

    /* RODAPÉ */
    .rodape-container {
        gap: 25px;
        padding-top: 32px;
        padding-bottom: 27px;
    }

    .rodape-links {
        gap: 11px 20px;
    }
}


/* =========================================================
   15. CELULARES PEQUENOS - AJUSTES FINAIS
   Sobrescreve apenas o necessário do bloco antigo <= 480px
========================================================= */

@media (max-width: 480px) {

    /* Mantém os botões principais lado a lado quando houver espaço */
    .hero-botoes {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .hero-botoes .botao {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Benefícios em uma linha mais compacta */
    .hero-beneficios {
        display: flex;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
        text-align: left;
        gap: 8px 12px;
    }

    .hero-beneficios div {
        font-size: 9px;
    }

    /* Mantém categorias em 2 x 2 */
    .grid-categorias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .categoria-card {
        min-height: 150px;
        padding: 15px;
    }

    .categoria-card h3 {
        font-size: 17px;
    }

    .categoria-card p {
        font-size: 9px;
    }

    /* Mantém destaques do Sobre lado a lado */
    .sobre-destaques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sobre-destaques div {
        padding: 14px 11px;
    }

    /* Mantém os 3 passos lado a lado */
    .passos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .passo {
        padding: 15px 5px;
    }

    .passo-numero {
        font-size: 14px;
    }

    .passo-icone {
        width: 48px;
        height: 48px;
        font-size: 17px;
    }

    .passo h3 {
        font-size: 14px;
    }

    .passo p {
        font-size: 8px;
    }
}
/* =========================================================
   16. PÁGINA DE PRODUTO - DÉA CESTAS
========================================================= */


/* =========================================================
   ESTRUTURA
========================================================= */

.pagina-produto {
    background: var(--cor-fundo);
    min-height: 70vh;
}

.voltar-produtos {
    display: inline-flex;
    align-items: center;

    margin-top: 34px;

    color: var(--cor-texto-suave);

    font-size: 12px;
    font-weight: 600;

    transition: 0.2s ease;
}

.voltar-produtos:hover {
    color: var(--cor-rosa-escuro);
    transform: translateX(-3px);
}


/* =========================================================
   PRODUTO
========================================================= */

.produto-detalhe {
    padding: 42px 0 100px;
}

.produto-detalhe-container {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    align-items: start;

    gap: 75px;
}


/* =========================================================
   GALERIA
========================================================= */

.produto-galeria {
    min-width: 0;
    width: 100%;

    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);

    align-items: start;
    gap: 16px;
}


/* MINIATURAS */

.produto-miniaturas {
    width: 78px;

    display: flex;
    flex-direction: column;

    gap: 11px;
}

.produto-miniatura {
    width: 78px;
    height: 78px;

    flex: 0 0 78px;

    padding: 4px;

    background: var(--cor-branco);

    border: 1px solid var(--cor-borda);
    border-radius: 13px;

    overflow: hidden;

    transition: 0.2s ease;
}

.produto-miniatura:hover,
.produto-miniatura.ativa {
    border-color: var(--cor-rosa);
}

.produto-miniatura.ativa {
    box-shadow:
        0 5px 18px rgba(150, 92, 92, 0.13);
}

.produto-miniatura img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 9px;
}


/* FOTO PRINCIPAL */

.produto-galeria-principal {
    position: relative;

    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;

    display: block;

    padding: 0;

    background: var(--cor-branco);

    border: 1px solid var(--cor-borda);
    border-radius: 28px;

    overflow: hidden;
}

.produto-galeria-principal img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 0;
}

.produto-detalhe-etiqueta {
    position: absolute;

    z-index: 2;

    top: 18px;
    left: 18px;

    padding: 7px 12px;

    background: var(--cor-rosa-escuro);
    color: var(--cor-branco);

    border-radius: 50px;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =========================================================
   INFORMAÇÕES
========================================================= */

.produto-detalhe-info {
    min-width: 0;

    padding-top: 12px;
}

.produto-detalhe-categoria {
    display: inline-block;

    margin-bottom: 13px;

    color: var(--cor-rosa-escuro);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.7px;
}

.produto-detalhe-info h1 {
    max-width: 540px;

    font-family: 'Playfair Display', serif;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -1.5px;
}

.produto-detalhe-descricao {
    max-width: 560px;

    margin-top: 20px;

    color: var(--cor-texto-suave);

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   PREÇO
========================================================= */

.produto-preco-area {
    display: flex;
    flex-direction: column;

    margin-top: 30px;
    padding: 23px 0;

    border-top: 1px solid var(--cor-borda);
    border-bottom: 1px solid var(--cor-borda);
}

.produto-preco-area span {
    margin-bottom: 3px;

    color: var(--cor-texto-suave);

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.produto-preco-area strong {
    color: var(--cor-rosa-escuro);

    font-family: 'Playfair Display', serif;

    font-size: 34px;
    line-height: 1.2;
}


/* =========================================================
   PERSONALIZAÇÃO
========================================================= */

.produto-personalizacao {
    align-items: flex-start;

    gap: 13px;

    margin-top: 23px;
    padding: 17px;

    background: var(--cor-fundo-secundario);

    border: 1px solid var(--cor-rosa-claro);
    border-radius: 14px;
}

.produto-personalizacao:not([hidden]) {
    display: flex;
}

.produto-personalizacao-icone {
    width: 37px;
    height: 37px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cor-branco);

    border-radius: 50%;

    color: var(--cor-rosa-escuro);
}

.produto-personalizacao strong {
    display: block;

    margin-bottom: 3px;

    color: var(--cor-rosa-escuro);

    font-size: 12px;
}

.produto-personalizacao p {
    color: var(--cor-texto-suave);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   QUANTIDADE
========================================================= */

.produto-quantidade-area {
    margin-top: 27px;
}

.produto-campo-titulo {
    display: block;

    margin-bottom: 9px;

    color: var(--cor-texto-suave);

    font-size: 11px;
    font-weight: 700;
}

.controle-quantidade {
    width: 126px;
    height: 44px;

    display: grid;

    grid-template-columns:
        42px
        42px
        42px;

    align-items: center;

    background: var(--cor-branco);

    border: 1px solid var(--cor-borda);
    border-radius: 50px;

    overflow: hidden;
}

.controle-quantidade button {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    color: var(--cor-texto);

    font-size: 20px;

    transition: 0.2s ease;
}

.controle-quantidade button:hover {
    background: var(--cor-fundo-secundario);

    color: var(--cor-rosa-escuro);
}

.controle-quantidade span {
    text-align: center;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   BOTÕES
========================================================= */

.produto-acoes {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    gap: 10px;

    margin-top: 26px;
}

.produto-acoes .botao {
    width: 100%;

    padding-left: 15px;
    padding-right: 15px;

    text-align: center;
}

.produto-adicionar {
    border: none;
}

.produto-whatsapp {
    background: var(--cor-branco);
}


/* =========================================================
   INFORMAÇÕES EXTRAS
========================================================= */

.produto-informacoes-extras {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 28px;
}

.produto-informacoes-extras > div {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 15px;

    background: rgba(255, 255, 255, 0.55);

    border: 1px solid var(--cor-borda);
    border-radius: 13px;
}

.produto-extra-icone {
    width: 31px;
    height: 31px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cor-fundo-rosa);

    border-radius: 50%;

    color: var(--cor-rosa-escuro);

    font-size: 13px;
}

.produto-informacoes-extras strong {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
}

.produto-informacoes-extras p {
    color: var(--cor-texto-suave);

    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   PRODUTO NÃO ENCONTRADO
========================================================= */

.produto-nao-encontrado {
    padding: 65px 0 100px;
}

.produto-nao-encontrado-card {
    max-width: 650px;

    margin: 0 auto;
    padding: 70px 35px;

    background:
        linear-gradient(
            145deg,
            var(--cor-branco),
            var(--cor-fundo-secundario)
        );

    border: 1px solid var(--cor-borda);
    border-radius: 28px;

    text-align: center;
}

.produto-nao-encontrado-icone {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    background: var(--cor-fundo-rosa);

    border-radius: 50%;

    color: var(--cor-rosa-escuro);

    font-size: 28px;
}

.produto-nao-encontrado-card > span {
    color: var(--cor-rosa-escuro);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.7px;
}

.produto-nao-encontrado-card h1 {
    margin-top: 7px;

    font-family: 'Playfair Display', serif;

    font-size: clamp(32px, 4vw, 45px);
    line-height: 1.15;
}

.produto-nao-encontrado-card p {
    max-width: 470px;

    margin: 16px auto 25px;

    color: var(--cor-texto-suave);

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   TABLET - PÁGINA DE PRODUTO
========================================================= */

@media (max-width: 1024px) {

    .produto-detalhe-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.9fr);

        gap: 40px;
    }

    .produto-galeria {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 11px;
    }

    .produto-miniaturas {
        width: 65px;
    }

    .produto-miniatura {
        width: 65px;
        height: 65px;
        flex-basis: 65px;
    }

    .produto-detalhe-info h1 {
        font-size: clamp(34px, 4.5vw, 45px);
    }

}


/* =========================================================
   MOBILE - PÁGINA DE PRODUTO
========================================================= */

@media (max-width: 768px) {

    .voltar-produtos {
        margin-top: 23px;

        font-size: 11px;
    }

    .produto-detalhe {
        padding: 27px 0 65px;
    }

    .produto-detalhe-container {
        display: flex;
        flex-direction: column;

        gap: 31px;
    }


    /* GALERIA */

    .produto-galeria {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 11px;
    }

    .produto-galeria-principal {
        width: 100%;
        aspect-ratio: 1 / 1;

        padding: 0;

        border-radius: 21px;
    }

    .produto-galeria-principal img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        border-radius: 0;
    }

    .produto-miniaturas {
        width: 100%;

        flex-direction: row;

        gap: 8px;

        overflow-x: auto;

        padding-bottom: 3px;

        scrollbar-width: none;
    }

    .produto-miniaturas::-webkit-scrollbar {
        display: none;
    }

    .produto-miniatura {
        width: 62px;
        height: 62px;

        flex-shrink: 0;
    }

    .produto-detalhe-etiqueta {
        top: 13px;
        left: 13px;
    }


    /* INFORMAÇÕES */

    .produto-detalhe-info {
        width: 100%;

        padding-top: 0;
    }

    .produto-detalhe-categoria {
        margin-bottom: 9px;
    }

    .produto-detalhe-info h1 {
        font-size: clamp(33px, 9vw, 42px);
    }

    .produto-detalhe-descricao {
        margin-top: 15px;

        font-size: 12px;
        line-height: 1.7;
    }


    /* PREÇO */

    .produto-preco-area {
        margin-top: 22px;
        padding: 18px 0;
    }

    .produto-preco-area strong {
        font-size: 29px;
    }


    /* PERSONALIZAÇÃO */

    .produto-personalizacao {
        margin-top: 18px;

        padding: 14px;
    }


    /* QUANTIDADE */

    .produto-quantidade-area {
        margin-top: 21px;
    }


    /* BOTÕES */

    .produto-acoes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 22px;
    }

    .produto-acoes .botao {
        min-height: 48px;

        padding: 0 10px;

        font-size: 10px;
    }


    /* EXTRAS */

    .produto-informacoes-extras {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 22px;
    }

    .produto-informacoes-extras > div {
        padding: 12px 9px;

        gap: 8px;
    }

    .produto-extra-icone {
        width: 28px;
        height: 28px;
    }

    .produto-informacoes-extras strong {
        font-size: 9px;
    }

    .produto-informacoes-extras p {
        font-size: 8px;
    }


    /* NÃO ENCONTRADO */

    .produto-nao-encontrado {
        padding: 40px 0 65px;
    }

    .produto-nao-encontrado-card {
        padding: 50px 20px;

        border-radius: 22px;
    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 420px) {

    .produto-galeria-principal {
        aspect-ratio: 1 / 0.95;
    }

    .produto-acoes {
        grid-template-columns: 1fr;
    }

    .produto-acoes .botao {
        font-size: 11px;
    }

    .produto-informacoes-extras {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   17. CARDS DE PRODUTOS - HOME
   Produtos carregados pelo Supabase
========================================================= */

.produto-card {
    min-width: 0;
    height: 100%;
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-medio);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(71, 49, 45, 0.06);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.produto-card:hover {
    transform: translateY(-5px);
    border-color: var(--cor-rosa-claro);
    box-shadow: var(--sombra-card);
}

.produto-card-link {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.produto-imagem {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background:
        linear-gradient(
            145deg,
            var(--cor-branco),
            var(--cor-fundo-secundario)
        );
    overflow: hidden;
}

.produto-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.produto-card:hover .produto-imagem img {
    transform: scale(1.035);
}

.produto-etiqueta {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 2;
    max-width: calc(100% - 26px);
    padding: 7px 11px;
    background: var(--cor-rosa-escuro);
    color: var(--cor-branco);
    border-radius: 50px;
    box-shadow: 0 5px 16px rgba(71, 49, 45, 0.13);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.produto-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 19px 18px 18px;
}

.produto-categoria {
    display: block;
    margin-bottom: 7px;
    color: var(--cor-rosa-escuro);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

.produto-info h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--cor-texto);
}

.produto-info > p {
    margin-top: 9px;
    color: var(--cor-texto-suave);
    font-size: 11px;
    line-height: 1.55;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.produto-rodape {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}

.produto-rodape strong {
    color: var(--cor-rosa-escuro);
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    line-height: 1.1;
    white-space: nowrap;
}

.produto-rodape span {
    color: var(--cor-texto-suave);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.produto-card:hover .produto-rodape span {
    color: var(--cor-rosa-escuro);
    transform: translateX(2px);
}


/* TABLET */

@media (max-width: 1024px) {

    .produto-info {
        padding: 17px 15px 16px;
    }

    .produto-info h3 {
        font-size: 18px;
    }

    .produto-rodape {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

}


/* MOBILE */

@media (max-width: 768px) {

    .produto-card {
        border-radius: 15px;
    }

    .produto-imagem {
        aspect-ratio: 1 / 1.05;
    }

    .produto-etiqueta {
        top: 9px;
        left: 9px;
        max-width: calc(100% - 18px);
        padding: 5px 8px;
        font-size: 7px;
        letter-spacing: 0.5px;
    }

    .produto-info {
        padding: 13px 11px 12px;
    }

    .produto-categoria {
        margin-bottom: 5px;
        font-size: 7px;
        letter-spacing: 0.8px;
    }

    .produto-info h3 {
        font-size: 16px;
        line-height: 1.22;
    }

    .produto-info > p {
        margin-top: 7px;
        font-size: 9px;
        line-height: 1.45;
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

    .produto-rodape {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-top: 13px;
    }

    .produto-rodape strong {
        font-size: 17px;
    }

    .produto-rodape span {
        font-size: 8px;
    }

}


/* CELULARES PEQUENOS */

@media (max-width: 480px) {

    .produto-info {
        padding: 11px 9px 11px;
    }

    .produto-info h3 {
        font-size: 15px;
    }

    .produto-info > p {
        font-size: 8px;
    }

    .produto-rodape strong {
        font-size: 16px;
    }

    .produto-rodape span {
        font-size: 7px;
    }

}

/* =========================================================
   19. GALERIA DO PRODUTO - CORREÇÃO DEFINITIVA DESKTOP
   Foto principal em largura total + miniaturas abaixo
========================================================= */

@media (min-width: 1025px) {

    .produto-detalhe-container {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 0.92fr);
        gap: 72px;
        align-items: start;
    }

    .produto-galeria {
        width: 100%;
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .produto-galeria-principal {
        position: relative;

        width: 100%;
        min-width: 0;
        height: auto;
        aspect-ratio: 1 / 1;

        display: block;

        padding: 0;

        background: var(--cor-branco);

        border: 1px solid var(--cor-borda);
        border-radius: 28px;

        overflow: hidden;
    }

    .produto-galeria-principal img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        max-width: none !important;

        object-fit: cover;

        margin: 0;
        padding: 0;

        border-radius: 0;
    }

    .produto-miniaturas {
        width: 100%;

        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;

        gap: 10px;
    }

    .produto-miniatura {
        width: 72px;
        height: 72px;
        flex: 0 0 72px;

        padding: 4px;
    }

    .produto-miniatura img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    /* Com apenas uma foto não há necessidade de miniatura. */
    .produto-miniaturas:empty {
        display: none !important;
    }

    .produto-detalhe-info {
        width: 100%;
        min-width: 0;
    }

}

/* =========================================================
   20. PÁGINA DE PRODUTO - DESKTOP EQUILIBRADO
   Foto menor + textos pequenos mais legíveis
========================================================= */

@media (min-width: 1025px) {

    .pagina-produto {
        padding-top: 0;
    }

    .voltar-produtos {
        margin-top: 22px;
        margin-bottom: 22px;
    }

    .produto-detalhe {
        padding-top: 0;
        padding-bottom: 70px;
    }

    .produto-detalhe-container {
        max-width: 1060px;

        grid-template-columns:
            minmax(0, 420px)
            minmax(0, 1fr);

        justify-content: center;
        align-items: start;
        gap: 54px;
    }

    .produto-galeria {
        width: 100%;
        max-width: 420px;
    }

    .produto-galeria-principal {
        width: 100%;
        max-width: 420px;
        aspect-ratio: 1 / 1;

        border-radius: 22px;
    }

    .produto-galeria-principal img,
    #produtoImagemPrincipal {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .produto-detalhe-etiqueta {
        top: 14px;
        left: 14px;

        padding: 6px 10px;

        font-size: 8px;
    }

    .produto-detalhe-info {
        padding-top: 5px;
    }

    .produto-detalhe-categoria {
        margin-bottom: 11px;

        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .produto-detalhe-info h1 {
        max-width: 520px;

        font-size: clamp(34px, 2.8vw, 43px);
        line-height: 1.04;

        margin-bottom: 18px;
    }

    .produto-detalhe-descricao {
        max-width: 540px;

        font-size: 14px;
        line-height: 1.7;

        margin-bottom: 24px;
    }

    .produto-preco-area {
        padding: 19px 0;
    }

    .produto-preco-area > span {
        font-size: 11px;
    }

    .produto-preco-area strong {
        margin-top: 5px;

        font-size: 34px;
    }

    .produto-personalizacao {
        margin-top: 18px;

        padding: 14px 15px;

        border-radius: 14px;
    }

    .produto-personalizacao-icone {
        width: 35px;
        height: 35px;

        min-width: 35px;
    }

    .produto-personalizacao strong {
        font-size: 12px;
    }

    .produto-personalizacao p {
        margin-top: 4px;

        font-size: 11px;
        line-height: 1.5;
    }

    .produto-quantidade-area {
        margin-top: 20px;
    }

    .produto-campo-titulo {
        margin-bottom: 9px;

        font-size: 11px;
    }

    .controle-quantidade {
        width: 112px;
        height: 42px;
    }

    .controle-quantidade button {
        width: 36px;
        height: 40px;

        font-size: 17px;
    }

    .controle-quantidade span {
        min-width: 34px;

        font-size: 12px;
    }

    .produto-acoes {
        margin-top: 21px;
        gap: 10px;
    }

    .produto-acoes .botao {
        min-height: 46px;

        padding: 12px 17px;

        font-size: 11px;
    }

    .produto-informacoes-extras {
        margin-top: 24px;
        padding-top: 19px;
        gap: 13px;
    }

    .produto-informacoes-extras > div {
        padding: 13px 14px;
    }

    .produto-extra-icone {
        width: 32px;
        height: 32px;

        min-width: 32px;
    }

    .produto-informacoes-extras strong {
        font-size: 11px;
    }

    .produto-informacoes-extras p {
        margin-top: 3px;

        font-size: 10px;
        line-height: 1.45;
    }

    .produto-miniatura {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

}

/* =========================================================
   21. HOME - CARDS DE PRODUTOS MAIS COMPACTOS
========================================================= */

/* DESKTOP */

@media (min-width: 1025px) {

    .produtos-grid {
        grid-template-columns:
            repeat(4, minmax(0, 245px));

        justify-content: start;
        gap: 22px;
    }

    .produto-card {
        width: 100%;
        max-width: 245px;

        border-radius: 16px;
    }

    .produto-imagem {
        aspect-ratio: 1 / 0.92;
    }

    .produto-etiqueta {
        top: 11px;
        left: 11px;

        padding: 6px 9px;

        font-size: 8px;
    }

    .produto-info {
        padding: 15px 14px 14px;
    }

    .produto-categoria {
        margin-bottom: 6px;

        font-size: 8px;
        letter-spacing: 1.1px;
    }

    .produto-info h3 {
        font-size: 17px;
        line-height: 1.22;
    }

    .produto-info > p {
        margin-top: 7px;

        font-size: 9px;
        line-height: 1.5;

        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

    .produto-rodape {
        gap: 8px;

        padding-top: 13px;
    }

    .produto-rodape strong {
        font-size: 18px;
    }

    .produto-rodape span {
        font-size: 8px;
    }

}


/* TABLET */

@media (min-width: 769px) and (max-width: 1024px) {

    .produtos-grid {
        grid-template-columns:
            repeat(3, minmax(0, 220px));

        justify-content: start;
        gap: 18px;
    }

    .produto-card {
        max-width: 220px;
    }

    .produto-info h3 {
        font-size: 16px;
    }

    .produto-info > p {
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

}


/* MOBILE */

@media (max-width: 768px) {

    .produtos-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .produto-card {
        max-width: none;
    }

    .produto-imagem {
        aspect-ratio: 1 / 0.95;
    }

    .produto-info {
        padding: 11px 9px 10px;
    }

    .produto-info h3 {
        font-size: 14px;
    }

    .produto-info > p {
        font-size: 8px;

        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

    .produto-rodape {
        padding-top: 10px;
    }

    .produto-rodape strong {
        font-size: 15px;
    }

}

/* =========================================================
   22. PÁGINA DO CARRINHO
========================================================= */

.pagina-carrinho {
    background: var(--cor-fundo);
}

.carrinho-secao {
    padding: 30px 0 90px;
}

.carrinho-cabecalho {
    max-width: 610px;
    margin: 26px 0 34px;
}

.carrinho-cabecalho > span,
.carrinho-resumo-label {
    display: block;

    margin-bottom: 9px;

    color: var(--cor-rosa-escuro);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.carrinho-cabecalho h1 {
    font-family: 'Playfair Display', serif;

    color: var(--cor-texto);

    font-size: 42px;
    line-height: 1;

    font-weight: 600;
}

.carrinho-cabecalho p {
    margin-top: 12px;

    color: var(--cor-texto-suave);

    font-size: 12px;
    line-height: 1.7;
}


/* LAYOUT */

.carrinho-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    align-items: start;

    gap: 34px;
}

.carrinho-lista {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* ITEM */

.carrinho-item {
    min-width: 0;

    display: grid;

    grid-template-columns:
        120px
        minmax(0, 1fr)
        125px;

    align-items: center;

    gap: 18px;

    padding: 14px;

    background: var(--cor-branco);

    border: 1px solid var(--cor-borda);
    border-radius: 18px;

    box-shadow:
        0 7px 22px rgba(71, 49, 45, 0.05);
}

.carrinho-item-imagem {
    width: 120px;
    height: 120px;

    display: block;

    border-radius: 14px;

    overflow: hidden;

    background: var(--cor-fundo-secundario);
}

.carrinho-item-imagem img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.carrinho-item-info {
    min-width: 0;
}

.carrinho-item-categoria {
    display: block;

    margin-bottom: 5px;

    color: var(--cor-rosa-escuro);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.carrinho-item-nome {
    display: inline-block;

    max-width: 100%;

    font-family: 'Playfair Display', serif;

    color: var(--cor-texto);

    font-size: 19px;
    line-height: 1.2;

    font-weight: 600;
}

.carrinho-item-preco {
    display: block;

    margin-top: 8px;

    color: var(--cor-rosa-escuro);

    font-family: 'Playfair Display', serif;

    font-size: 18px;
}

.carrinho-item-controles {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 13px;
}

.carrinho-quantidade {
    height: 36px;

    display: flex;
    align-items: center;

    border: 1px solid var(--cor-borda);
    border-radius: 10px;

    overflow: hidden;

    background: var(--cor-branco);
}

.carrinho-quantidade button {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    color: var(--cor-texto);

    font-size: 16px;

    transition: background 0.2s ease;
}

.carrinho-quantidade button:hover {
    background: var(--cor-fundo-secundario);
}

.carrinho-quantidade span {
    min-width: 34px;

    text-align: center;

    font-size: 10px;
    font-weight: 700;
}

.carrinho-remover {
    background: transparent;

    color: var(--cor-texto-suave);

    font-size: 9px;
    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 3px;
}

.carrinho-remover:hover {
    color: var(--cor-rosa-escuro);
}

.carrinho-item-subtotal {
    text-align: right;
}

.carrinho-item-subtotal span {
    display: block;

    margin-bottom: 5px;

    color: var(--cor-texto-suave);

    font-size: 8px;

    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.carrinho-item-subtotal strong {
    color: var(--cor-texto);

    font-family: 'Playfair Display', serif;

    font-size: 18px;
}


/* RESUMO */

.carrinho-resumo {
    position: sticky;
    top: 105px;

    padding: 24px;

    background:
        linear-gradient(
            145deg,
            var(--cor-branco),
            var(--cor-fundo-secundario)
        );

    border: 1px solid var(--cor-borda);
    border-radius: 20px;

    box-shadow: var(--sombra-card);
}

.carrinho-resumo h2 {
    margin-bottom: 22px;

    font-family: 'Playfair Display', serif;

    color: var(--cor-texto);

    font-size: 26px;
    line-height: 1.1;
}

.carrinho-resumo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 11px 0;

    border-bottom: 1px solid var(--cor-borda);

    color: var(--cor-texto-suave);

    font-size: 10px;
}

.carrinho-resumo-linha strong {
    color: var(--cor-texto);

    font-size: 10px;
}

.carrinho-resumo-aviso {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 17px 0;

    padding: 12px;

    background: rgba(243, 225, 225, 0.5);

    border-radius: 12px;
}

.carrinho-resumo-aviso > span {
    color: var(--cor-rosa-escuro);

    font-size: 14px;
}

.carrinho-resumo-aviso p {
    color: var(--cor-texto-suave);

    font-size: 8px;
    line-height: 1.55;
}

.carrinho-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    padding: 5px 0 21px;
}

.carrinho-total span {
    color: var(--cor-texto);

    font-size: 10px;
    font-weight: 600;
}

.carrinho-total strong {
    color: var(--cor-rosa-escuro);

    font-family: 'Playfair Display', serif;

    font-size: 25px;
}

.carrinho-finalizar {
    width: 100%;

    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.carrinho-continuar {
    display: block;

    margin-top: 13px;

    color: var(--cor-texto-suave);

    text-align: center;

    font-size: 9px;
    font-weight: 600;
}

.carrinho-continuar:hover {
    color: var(--cor-rosa-escuro);
}


/* CARRINHO VAZIO */

.carrinho-vazio {
    max-width: 560px;

    margin: 45px auto 20px;

    padding: 50px 35px;

    text-align: center;

    background: var(--cor-branco);

    border: 1px solid var(--cor-borda);
    border-radius: 22px;

    box-shadow: var(--sombra-card);
}

.carrinho-vazio-icone {
    width: 58px;
    height: 58px;

    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--cor-fundo-secundario);

    border-radius: 50%;

    font-size: 22px;
}

.carrinho-vazio > span {
    display: block;

    margin-bottom: 7px;

    color: var(--cor-rosa-escuro);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.carrinho-vazio h2 {
    font-family: 'Playfair Display', serif;

    color: var(--cor-texto);

    font-size: 31px;
}

.carrinho-vazio p {
    max-width: 390px;

    margin: 12px auto 22px;

    color: var(--cor-texto-suave);

    font-size: 10px;
    line-height: 1.7;
}


/* TABLET */

@media (max-width: 1024px) {

    .carrinho-layout {
        grid-template-columns: 1fr;
    }

    .carrinho-resumo {
        position: static;

        max-width: 520px;
        width: 100%;
    }

}


/* MOBILE */

@media (max-width: 768px) {

    .carrinho-secao {
        padding: 20px 0 65px;
    }

    .carrinho-cabecalho {
        margin: 20px 0 25px;
    }

    .carrinho-cabecalho h1 {
        font-size: 32px;
    }

    .carrinho-cabecalho p {
        font-size: 10px;
    }

    .carrinho-layout {
        gap: 22px;
    }

    .carrinho-item {
        grid-template-columns:
            88px
            minmax(0, 1fr);

        gap: 12px;

        padding: 10px;

        border-radius: 15px;
    }

    .carrinho-item-imagem {
        width: 88px;
        height: 88px;

        border-radius: 11px;
    }

    .carrinho-item-categoria {
        font-size: 7px;
    }

    .carrinho-item-nome {
        font-size: 15px;
    }

    .carrinho-item-preco {
        margin-top: 5px;

        font-size: 15px;
    }

    .carrinho-item-controles {
        gap: 9px;

        margin-top: 9px;
    }

    .carrinho-quantidade {
        height: 32px;
    }

    .carrinho-quantidade button {
        width: 30px;
        height: 30px;

        font-size: 14px;
    }

    .carrinho-quantidade span {
        min-width: 29px;

        font-size: 9px;
    }

    .carrinho-remover {
        font-size: 8px;
    }

    .carrinho-item-subtotal {
        grid-column: 1 / -1;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-top: 10px;

        border-top: 1px solid var(--cor-borda);

        text-align: left;
    }

    .carrinho-item-subtotal span {
        margin: 0;
    }

    .carrinho-item-subtotal strong {
        font-size: 16px;
    }

    .carrinho-resumo {
        max-width: none;

        padding: 20px 17px;

        border-radius: 17px;
    }

    .carrinho-resumo h2 {
        font-size: 23px;
    }

    .carrinho-total strong {
        font-size: 22px;
    }

    .carrinho-vazio {
        margin-top: 25px;

        padding: 38px 20px;
    }

    .carrinho-vazio h2 {
        font-size: 25px;
    }

}


/* CELULARES PEQUENOS */

@media (max-width: 480px) {

    .carrinho-item {
        grid-template-columns:
            76px
            minmax(0, 1fr);
    }

    .carrinho-item-imagem {
        width: 76px;
        height: 76px;
    }

    .carrinho-item-nome {
        font-size: 14px;
    }

    .carrinho-item-controles {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   23. CARRINHO - MELHORIA DE LEGIBILIDADE
   Mantém o layout compacto e aumenta apenas textos/controles.
========================================================= */

/* DESKTOP */

@media (min-width: 769px) {

    .carrinho-cabecalho > span,
    .carrinho-resumo-label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .carrinho-cabecalho p {
        font-size: 14px;
        line-height: 1.65;
    }

    .carrinho-item-categoria {
        font-size: 10px;
        letter-spacing: 1.1px;
    }

    .carrinho-item-nome {
        font-size: 20px;
    }

    .carrinho-item-preco {
        font-size: 19px;
    }

    .carrinho-quantidade {
        height: 39px;
    }

    .carrinho-quantidade button {
        width: 38px;
        height: 37px;
        font-size: 18px;
    }

    .carrinho-quantidade span {
        min-width: 38px;
        font-size: 12px;
    }

    .carrinho-remover {
        font-size: 11px;
    }

    .carrinho-item-subtotal span {
        font-size: 10px;
    }

    .carrinho-item-subtotal strong {
        font-size: 20px;
    }

    .carrinho-resumo-linha {
        font-size: 12px;
    }

    .carrinho-resumo-linha strong {
        font-size: 12px;
    }

    .carrinho-resumo-aviso p {
        font-size: 10px;
        line-height: 1.55;
    }

    .carrinho-total span {
        font-size: 12px;
    }

    .carrinho-continuar {
        font-size: 11px;
    }

    .carrinho-vazio > span {
        font-size: 11px;
    }

    .carrinho-vazio p {
        font-size: 12px;
    }

}


/* MOBILE */

@media (max-width: 768px) {

    .carrinho-cabecalho > span,
    .carrinho-resumo-label {
        font-size: 9px;
    }

    .carrinho-cabecalho p {
        font-size: 11px;
        line-height: 1.6;
    }

    .carrinho-item-categoria {
        font-size: 8px;
    }

    .carrinho-item-nome {
        font-size: 16px;
    }

    .carrinho-item-preco {
        font-size: 16px;
    }

    .carrinho-quantidade {
        height: 35px;
    }

    .carrinho-quantidade button {
        width: 33px;
        height: 33px;
        font-size: 16px;
    }

    .carrinho-quantidade span {
        min-width: 32px;
        font-size: 10px;
    }

    .carrinho-remover {
        font-size: 9px;
    }

    .carrinho-item-subtotal span {
        font-size: 9px;
    }

    .carrinho-item-subtotal strong {
        font-size: 17px;
    }

    .carrinho-resumo-linha {
        font-size: 11px;
    }

    .carrinho-resumo-linha strong {
        font-size: 11px;
    }

    .carrinho-resumo-aviso p {
        font-size: 9px;
        line-height: 1.6;
    }

    .carrinho-total span {
        font-size: 11px;
    }

    .carrinho-continuar {
        font-size: 10px;
    }

    .carrinho-vazio > span {
        font-size: 9px;
    }

    .carrinho-vazio p {
        font-size: 11px;
    }

}


/* CELULARES PEQUENOS */

@media (max-width: 480px) {

    .carrinho-item-nome {
        font-size: 15px;
    }

    .carrinho-item-preco {
        font-size: 15px;
    }

    .carrinho-resumo-aviso p {
        font-size: 9px;
    }

}

/* =========================================================
   24. CARRINHO - BOTÕES "CONTINUAR COMPRANDO"
========================================================= */

/* Botão secundário abaixo de "Finalizar pelo WhatsApp" */

.carrinho-continuar {
    width: 100%;
    min-height: 44px;

    margin-top: 11px;
    padding: 11px 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background: rgba(183, 112, 112, 0.07);

    border: 1px solid rgba(183, 112, 112, 0.34);
    border-radius: 999px;

    color: var(--cor-rosa-escuro);

    font-size: 11px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.carrinho-continuar::before {
    content: "←";

    font-size: 15px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.carrinho-continuar:hover {
    background: rgba(183, 112, 112, 0.13);

    border-color: var(--cor-rosa-escuro);

    color: var(--cor-rosa-escuro);

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(120, 73, 73, 0.08);
}

.carrinho-continuar:hover::before {
    transform: translateX(-3px);
}


/* Link de voltar no topo da página */

.voltar-produtos {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 999px;

    color: var(--cor-texto-suave);

    font-size: 11px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.voltar-produtos:hover {
    background: rgba(183, 112, 112, 0.07);

    border-color: rgba(183, 112, 112, 0.25);

    color: var(--cor-rosa-escuro);

    transform: translateX(-2px);
}


/* MOBILE */

@media (max-width: 768px) {

    .carrinho-continuar {
        min-height: 43px;

        padding: 10px 15px;

        font-size: 10px;
    }

    .voltar-produtos {
        padding: 7px 9px;

        font-size: 10px;
    }

}

/* =========================================================
   DÉA CESTAS
   DADOS DO CLIENTE - CARRINHO
   Adicionar ao final do css/style.css
========================================================= */

.carrinho-dados-cliente {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(120, 95, 85, 0.14);
}

.carrinho-dados-titulo {
    margin-bottom: 15px;
}

.carrinho-dados-titulo > span {
    display: block;
    color: #2e2725;
    font-size: 13px;
    font-weight: 700;
}

.carrinho-dados-titulo p {
    margin-top: 4px;
    color: #756b67;
    font-size: 11px;
    line-height: 1.5;
}

.carrinho-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.carrinho-campo label {
    color: #2e2725;
    font-size: 11px;
    font-weight: 700;
}

.carrinho-campo label span {
    color: #8b817d;
    font-size: 9px;
    font-weight: 500;
}

.carrinho-campo input,
.carrinho-campo textarea {
    width: 100%;
    border: 1px solid #eadfda;
    outline: none;
    background: #ffffff;
    color: #2e2725;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.carrinho-campo input {
    height: 44px;
    padding: 0 12px;
}

.carrinho-campo textarea {
    min-height: 82px;
    padding: 11px 12px;
    line-height: 1.5;
    resize: vertical;
}

.carrinho-campo input::placeholder,
.carrinho-campo textarea::placeholder {
    color: #a79c97;
}

.carrinho-campo input:focus,
.carrinho-campo textarea:focus {
    border-color: #c98686;
    box-shadow: 0 0 0 3px rgba(201, 134, 134, 0.11);
}

.carrinho-mensagem {
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1.5;
}

.carrinho-mensagem.erro {
    background: #fbeeee;
    color: #a85353;
    border: 1px solid #efd2d2;
}

.carrinho-mensagem.sucesso {
    background: #edf5f0;
    color: #56836b;
    border: 1px solid #d2e6d9;
}

.carrinho-finalizar:disabled {
    opacity: 0.68;
    cursor: wait;
    transform: none;
}

@media (max-width: 768px) {

    .carrinho-dados-cliente {
        margin-top: 18px;
        padding-top: 18px;
    }

    .carrinho-dados-titulo > span {
        font-size: 13px;
    }

    .carrinho-dados-titulo p {
        font-size: 11px;
    }

    .carrinho-campo label {
        font-size: 12px;
    }

    .carrinho-campo input,
    .carrinho-campo textarea {
        font-size: 16px;
    }

    .carrinho-campo input {
        height: 47px;
    }

    .carrinho-campo textarea {
        min-height: 90px;
    }

    .carrinho-mensagem {
        font-size: 11px;
    }

}


/* =========================================================
   CORREÇÃO MOBILE - TÍTULOS DAS CATEGORIAS
   Impede Safari/iPhone de aplicar azul padrão aos botões
========================================================= */

.categoria-card,
.categoria-card:link,
.categoria-card:visited,
.categoria-card:hover,
.categoria-card:active,
.categoria-card:focus {
    color: var(--cor-texto);
    -webkit-text-fill-color: var(--cor-texto);
}

.categoria-card h3 {
    color: var(--cor-texto);
    -webkit-text-fill-color: var(--cor-texto);
}

.categoria-card p {
    color: var(--cor-texto-suave);
    -webkit-text-fill-color: var(--cor-texto-suave);
}

.categoria-card .categoria-seta {
    color: var(--cor-rosa-escuro);
    -webkit-text-fill-color: var(--cor-rosa-escuro);
}

/* =========================================================
   28. HERO MOBILE - TEXTO E LOGO LADO A LADO
   Mantém o conceito visual do desktop no celular
========================================================= */

@media (max-width: 768px) {

    .hero {
        min-height: auto;
    }

    .hero-container {
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(125px, 0.82fr);
        align-items: center;
        gap: 12px;

        padding-top: 42px;
        padding-bottom: 46px;
    }

    .hero-conteudo {
        width: 100%;
        max-width: none;
        text-align: left;
    }

    .hero-etiqueta {
        margin-bottom: 13px;
        padding: 7px 10px;

        font-size: 8px;
        line-height: 1.25;
        letter-spacing: 0.8px;
    }

    .hero h1 {
        max-width: 100%;
        margin: 0;

        font-size: clamp(30px, 8.1vw, 43px);
        line-height: 1.01;
        letter-spacing: -1.3px;
    }

    .hero-conteudo > p {
        max-width: 100%;
        margin: 14px 0 0;

        font-size: 11px;
        line-height: 1.55;
    }

    .hero-botoes {
        width: 100%;
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;

        gap: 8px;
        margin-top: 18px;
    }

    .hero-botoes .botao {
        width: 100%;
        min-height: 42px;
        padding: 0 12px;

        font-size: 10px;
    }

    .hero-beneficios {
        display: grid;
        grid-template-columns: 1fr;

        justify-content: flex-start;
        gap: 7px;

        max-width: none;
        margin: 18px 0 0;

        text-align: left;
    }

    .hero-beneficios div {
        gap: 7px;
        font-size: 9px;
        line-height: 1.25;
    }

    .hero-beneficios strong {
        flex: 0 0 auto;

        width: 25px;
        height: 25px;

        font-size: 9px;
    }

    .hero-visual {
        width: 100%;
        min-width: 0;
        min-height: 270px;

        align-self: center;
    }

    .hero-forma-1 {
        width: min(190px, 43vw);
        height: min(190px, 43vw);
    }

    .hero-forma-2 {
        width: min(160px, 36vw);
        height: min(160px, 36vw);

        transform: translate(16px, -14px);
    }

    .hero-logo-container {
        width: min(150px, 34vw);
        height: min(150px, 34vw);

        padding: 8px;
    }

    .detalhe-floral {
        font-size: 17px;
    }

    .detalhe-1 {
        top: 34px;
        right: 0;
    }

    .detalhe-2 {
        bottom: 35px;
        left: 0;
    }
}


/* CELULARES MENORES */

@media (max-width: 480px) {

    .hero-container {
        grid-template-columns: minmax(0, 1.16fr) minmax(115px, 0.84fr);
        gap: 8px;

        padding-top: 34px;
        padding-bottom: 38px;
    }

    .hero-etiqueta {
        max-width: 100%;
        margin-bottom: 11px;

        padding: 6px 8px;

        font-size: 7px;
        letter-spacing: 0.65px;
    }

    .hero h1 {
        font-size: clamp(28px, 8vw, 36px);
        letter-spacing: -1px;
    }

    .hero-conteudo > p {
        margin-top: 12px;

        font-size: 10px;
        line-height: 1.5;
    }

    .hero-botoes {
        margin-top: 15px;
        gap: 7px;
    }

    .hero-botoes .botao {
        min-height: 39px;

        padding: 0 9px;

        font-size: 9px;
    }

    .hero-beneficios {
        gap: 6px;

        margin-top: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .hero-beneficios div {
        font-size: 8px;
    }

    .hero-beneficios strong {
        width: 23px;
        height: 23px;
    }

    .hero-visual {
        min-height: 235px;
    }

    .hero-forma-1 {
        width: min(165px, 42vw);
        height: min(165px, 42vw);
    }

    .hero-forma-2 {
        width: min(140px, 35vw);
        height: min(140px, 35vw);

        transform: translate(13px, -12px);
    }

    .hero-logo-container {
        width: min(132px, 33vw);
        height: min(132px, 33vw);

        padding: 7px;
    }

    .detalhe-floral {
        font-size: 15px;
    }
}

/* =========================================================
   29. HERO MOBILE - BENEFÍCIOS EM UMA ÚNICA LINHA
   Feito com carinho | Personalizado para você | Rio de Janeiro
========================================================= */

@media (max-width: 768px) {

    .hero-beneficios {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 6px;

        width: 100%;
        max-width: none;

        margin: 18px 0 0;
    }

    .hero-beneficios div {
        min-width: 0;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        gap: 5px;

        font-size: 7.5px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .hero-beneficios strong {
        flex: 0 0 22px;

        width: 22px;
        height: 22px;

        font-size: 8px;
    }
}


/* CELULARES MENORES */

@media (max-width: 480px) {

    .hero-beneficios {
        gap: 3px;
        margin-top: 15px;
    }

    .hero-beneficios div {
        gap: 3px;

        font-size: 6.5px;
        letter-spacing: -0.1px;
    }

    .hero-beneficios strong {
        flex-basis: 19px;

        width: 19px;
        height: 19px;

        font-size: 7px;
    }
}

/* =========================================================
   30. HERO MOBILE - BENEFÍCIOS REFINADOS
   Três colunas com ícone acima e texto abaixo
========================================================= */

@media (max-width: 768px) {

    .hero-beneficios {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;

        width: 100%;
        max-width: none;

        gap: 12px;
        margin: 22px 0 0;
    }

    .hero-beneficios div {
        min-width: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        gap: 7px;

        text-align: center;
        white-space: normal;

        font-size: 8px;
        line-height: 1.25;
    }

    .hero-beneficios strong {
        flex: 0 0 auto;

        width: 25px;
        height: 25px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        font-size: 8px;
    }
}


/* CELULARES MENORES */

@media (max-width: 480px) {

    .hero-beneficios {
        gap: 8px;
        margin-top: 20px;
    }

    .hero-beneficios div {
        gap: 6px;

        padding: 0 2px;

        font-size: 7.5px;
        line-height: 1.22;
        letter-spacing: 0;
    }

    .hero-beneficios strong {
        width: 24px;
        height: 24px;

        font-size: 8px;
    }
}