:root{
    --bg:#f6f7f5;
    --surface:#fff;
    --surface-2:#f0f2ee;
    --ink:#161816;
    --mut:#6f746e;

    --lime:#b7ef00;
    --lime-strong:#9ed500;
    --line:#e2e6df;
    --dark:#111411;

    --shadow:0 10px 30px rgba(16,20,16,.08);
    --radius:18px;

    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:145px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'DM Sans',Arial,sans-serif;
    font-size:15px;
}

body.menu-open{
    overflow:hidden;
}

h1,
h2,
h3,
h4,
.logo,
.brand-name,
.footer-brand{
    font-family:'Montserrat',Arial,sans-serif;
    margin:0;
}

button,
input,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

a{
    color:inherit;
}

.lime{
    color:var(--lime-strong);
}


/* =========================
   PROMO
========================= */

.promo{
    height:38px;
    background:var(--dark);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px;
    padding:0 5vw;
}

.promo-links{
    display:flex;
    gap:24px;
    color:#bfc5bd;
    font-weight:500;
}


/* =========================
   CABEÇALHO
========================= */

.site-header{
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}

.head-main{
    max-width:1440px;
    margin:auto;
    min-height:88px;
    padding:14px 4vw;
    display:flex;
    align-items:center;
    gap:28px;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
    cursor:pointer;
    min-width:210px;
}

.brand-logo{
    width:52px;
    height:52px;
    border-radius:14px;
    object-fit:cover;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.brand-small{
    display:block;
    font-size:9px;
    letter-spacing:4px;
    font-weight:800;
    color:var(--mut);
    margin-bottom:2px;
}

.brand-name{
    display:block;
    font-size:21px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.7px;
}

.brand-name b{
    color:#1b1f1a;
}

.head-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto;
}

.account-action,
.head-cart{
    background:none;
    border:0;
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--ink);
    text-align:left;
    padding:5px;
}

.account-action small{
    display:block;
    color:var(--mut);
    font-size:11px;
    line-height:1.1;
}

.account-action b{
    display:block;
    font-size:13px;
    white-space:nowrap;
}

.account-avatar,
.account-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
    display:grid;
    place-items:center;
    background:#eef1eb;
    border:1px solid #dfe4db;
    font-size:18px;
}

.head-cart{
    position:relative;
    gap:7px;
    font-weight:700;
}

.head-cart span{
    font-size:20px;
}

.head-cart b{
    font-size:13px;
}

.badge{
    position:absolute;
    top:-6px;
    left:17px;
    background:var(--lime);
    border:2px solid #fff;
    color:#111;
    min-width:20px;
    height:20px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:10px;
    font-style:normal;
}

.nav-main{
    max-width:1440px;
    margin:auto;
    padding:0 4vw;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid #f0f1ef;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:2px;
    overflow:auto;
    scrollbar-width:none;
}

.main-nav::-webkit-scrollbar{
    display:none;
}

.main-nav button,
.nav-social button{
    border:0;
    background:none;
    padding:13px 14px;
    color:#4c514b;
    font-weight:600;
    white-space:nowrap;
}

.main-nav button:hover,
.main-nav button.active{
    color:#111;
    font-weight:800;
}


.nav-cat{
    color:#171a16!important;
    font-weight:800!important;
}

.nav-social{
    display:flex;
    gap:2px;
}

.nav-social button{
    font-size:12px;
    color:#737970;
}

.mobile-menu{
    display:none;
    border:0;
    background:none;
    font-size:22px;
}


/* =========================
   CONTEÚDO
========================= */

main{
    max-width:1440px;
    margin:auto;
    padding:0 4vw 70px;
    min-height:65vh;
}


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

.hero-pro{
    padding:26px 0 0;
}

.hero-slider{
    position:relative;
    min-height:470px;
    border-radius:24px;
    overflow:hidden;
    background:#121612;
    box-shadow:var(--shadow);
}

.hero-slide{
    display:none;
    min-height:470px;
    grid-template-columns:1.02fr .98fr;
    align-items:center;
    padding:48px 7%;
    gap:20px;
    position:relative;
}

.hero-slide.active{
    display:grid;
    animation:fadeHero .45s ease;
}

@keyframes fadeHero{
    from{
        opacity:.5;
        transform:translateX(12px);
    }

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

.hero-copy{
    max-width:650px;
    color:#fff;
    position:relative;
    z-index:2;
}

.eyebrow{
    font-size:11px;
    letter-spacing:2.4px;
    font-weight:800;
    color:#72796f;
    display:inline-block;
    margin-bottom:12px;
}

.hero-copy .eyebrow{
    color:var(--lime);
}

.hero-copy h1{
    font-size:clamp(34px,4.3vw,65px);
    line-height:1.02;
    letter-spacing:-2px;
    margin-bottom:18px;
}

.hero-copy h1 strong{
    color:var(--lime);
    font-weight:800;
}

.hero-copy p{
    font-size:17px;
    line-height:1.65;
    color:#c9cec7;
    max-width:570px;
    margin:0;
}

.hero-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:26px;
}

.btn{
    background:var(--lime);
    color:#111;
    border:1px solid var(--lime);
    font-weight:800;
    padding:12px 20px;
    border-radius:10px;
    text-decoration:none;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    letter-spacing:.1px;
    transition:.2s;
}

.btn:hover{
    background:#d0ff43;
    border-color:#d0ff43;
    transform:translateY(-1px);
}

.btn-light{
    background:#fff;
    color:#151815;
    border:1px solid #fff;
    padding:12px 20px;
    border-radius:10px;
    font-weight:800;
}

.btn-light:hover{
    background:#eef0ec;
}

.btn.o{
    background:transparent;
    color:var(--ink);
    border-color:#d7ddd4;
}

.btn.sm{
    padding:7px 11px;
    font-size:12px;
}

.btn.d{
    background:#d93535;
    border-color:#d93535;
    color:#fff;
}

.hero-note{
    margin-top:22px;
    font-size:12px;
    color:#9ca49a;
}

.hero-note span{
    display:inline-grid;
    place-items:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--lime);
    color:#111;
    margin-right:7px;
}

.hero-media{
    height:100%;
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.hero-media img{
    max-width:86%;
    max-height:390px;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:18px;
    filter:drop-shadow(0 22px 35px rgba(0,0,0,.45));
}

.hero-media.alt img{
    max-height:350px;
    max-width:74%;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.hero-badge{
    position:absolute;
    right:2%;
    top:16%;
    z-index:2;
    background:var(--lime);
    color:#111;
    width:96px;
    height:96px;
    border-radius:50%;
    display:grid;
    place-items:center;
    text-align:center;
    font-size:11px;
    font-weight:700;
    line-height:1.05;
    transform:rotate(8deg);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.hero-badge b{
    font-size:13px;
}

.floating-product{
    position:absolute;
    right:5%;
    top:13%;
    z-index:2;
    width:80px;
    height:80px;
    border-radius:50%;
    background:var(--lime);
    display:grid;
    place-items:center;
    font-size:34px;
    box-shadow:0 12px 30px rgba(0,0,0,.3);
}

.hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#111;
    font-size:30px;
    line-height:1;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    z-index:4;
}

.hero-arrow.prev{
    left:18px;
}

.hero-arrow.next{
    right:18px;
}

.hero-arrow:hover{
    background:var(--lime);
}

.hero-dots{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:4;
}

.hero-dots .dot{
    width:8px;
    height:8px;
    border:0;
    border-radius:50%;
    padding:0;
    background:#7d847b;
}

.hero-dots .dot.active{
    width:24px;
    border-radius:6px;
    background:var(--lime);
}


/* =========================
   BENEFÍCIOS
========================= */

.trust-strip{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    margin:18px 0 46px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    box-shadow:0 5px 18px rgba(20,25,20,.04);
}

.trust-strip>div{
    padding:20px 22px;
    border-right:1px solid var(--line);
}

.trust-strip>div:last-child{
    border-right:0;
}

.trust-strip b{
    display:block;
    font-size:13px;
    margin-bottom:4px;
}

.trust-strip span{
    color:var(--mut);
    font-size:12px;
}


/* =========================
   TÍTULOS DE SEÇÃO
========================= */

.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.section-head h2{
    font-size:30px;
    letter-spacing:-1px;
}

.section-head h2 strong{
    color:#77a400;
}

.section-head p{
    margin:7px 0 0;
    color:var(--mut);
}

.text-link{
    border:0;
    background:none;
    font-weight:800;
    color:#5e7900;
    padding:8px;
}


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

.quick-cats{
    margin-bottom:52px;
}

.cat-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.cat-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    background:#fff;
    border-radius:16px;
    min-height:170px;
    padding:0;
    text-align:left;
    box-shadow:0 6px 20px rgba(15,20,15,.04);
    transition:.2s;
}

.cat-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
    border-color:#d1d8cb;
}

.cat-card img{
    width:100%;
    height:125px;
    object-fit:cover;
    display:block;
}

.cat-card span{
    display:block;
    padding:10px 14px 0;
    font-weight:800;
    font-size:14px;
}

.cat-card small{
    display:block;
    padding:2px 14px 12px;
    color:#7d837b;
}


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

.products-section{
    scroll-margin-top:145px;
}

.bar{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:18px 0 20px;
    align-items:center;
}

.chip{
    border:1px solid var(--line);
    background:#fff;
    color:#535951;
    padding:9px 14px;
    border-radius:999px;
    cursor:pointer;
    font-weight:600;
}

.chip:hover{
    border-color:#bfc8b8;
}

.chip.on{
    background:#161a15;
    color:#fff;
    border-color:#161a15;
}

.sortsel{
    margin-left:auto;
    background:#fff;
    color:#30352f;
    border:1px solid var(--line);
    padding:9px 12px;
    border-radius:9px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}


/* =========================
   CARDS DE PRODUTO
========================= */

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 5px 18px rgba(16,20,16,.04);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 32px rgba(16,20,16,.11);
    border-color:#d0d7cb;
}

.card .im{
    height:auto;
    aspect-ratio:1/1;
    display:grid;
    place-items:center;
    background:#f2f3ef;
    overflow:hidden;
}

.card .im img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}

.card:hover .im img{
    transform:scale(1.04);
}

.card .b{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:7px;
    flex:1;
}

.card .mut{
    color:var(--mut);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.card h3{
    font-size:16px;
    line-height:1.3;
    min-height:42px;
}

.price{
    font-size:21px;
    color:#1c221a;
    font-weight:800;
    margin-top:3px;
}

.card .btn{
    width:100%;
    margin-top:auto;
    padding:11px;
    border-radius:11px;
}

.mut{
    color:var(--mut);
    font-size:12px;
}


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

.about-preview{
    margin:64px 0 10px;
    border-radius:22px;
    background:#151914;
    color:#fff;
    padding:48px 6%;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:40px;
    align-items:center;
    overflow:hidden;
}

.about-preview h2{
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-1.5px;
}

.about-preview h2 strong{
    color:var(--lime);
}

.about-preview p{
    max-width:620px;
    color:#c1c8bf;
    line-height:1.7;
    margin:18px 0 24px;
}

.about-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.about-stats div{
    background:#20261e;
    border:1px solid #31392e;
    border-radius:14px;
    padding:24px 14px;
    text-align:center;
}

.about-stats b{
    display:block;
    color:var(--lime);
    font-size:26px;
}

.about-stats span{
    font-size:11px;
    color:#aeb5ab;
}


/* =========================
   PÁGINA SOBRE
========================= */

.about-page{
    padding-top:26px;
}

.about-hero{
    background:#151914;
    border-radius:24px;
    padding:60px 7%;
    color:#fff;
    display:grid;
    grid-template-columns:1fr .8fr;
    align-items:center;
    gap:40px;
    overflow:hidden;
}

.about-hero h1{
    font-size:clamp(38px,5vw,68px);
    line-height:1;
    letter-spacing:-2px;
}

.about-hero h1 strong{
    color:var(--lime);
}

.about-hero p{
    font-size:18px;
    color:#c4cbc1;
    max-width:580px;
    line-height:1.6;
}

.about-hero img{
    max-width:100%;
    max-height:330px;
    object-fit:contain;
    border-radius:16px;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding:70px 5%;
}

.about-grid h2{
    font-size:40px;
    line-height:1.05;
}

.about-grid h2 strong{
    color:#78a400;
}

.about-grid p{
    color:var(--mut);
    line-height:1.75;
}

.about-points{
    display:grid;
    gap:13px;
}

.about-points>div{
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    padding:20px;
}

.about-points b{
    color:#7ca300;
    font-size:12px;
}

.about-points h3{
    margin:6px 0;
}

.about-points p{
    margin:0;
}

.about-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.about-values>div{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px;
    box-shadow:0 6px 18px rgba(20,25,20,.04);
}

.about-values span{
    color:#8ab500;
    font-size:24px;
}

.about-values h3{
    margin:12px 0 6px;
}

.about-values p{
    margin:0;
    color:var(--mut);
    line-height:1.6;
}

.about-cta{
    margin-top:55px;
    background:var(--lime);
    border-radius:18px;
    padding:30px 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.about-cta .eyebrow{
    color:#4d6100;
}

.about-cta h2{
    font-size:27px;
}

.about-cta .btn{
    background:#161a15;
    color:#fff;
    border-color:#161a15;
}


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

.site-footer{
    background:#121612;
    color:#c7cdc4;
    margin:70px -4vw -70px;
    padding:48px 4vw 20px;
}

.footer-top{
    max-width:1440px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.2fr;
    gap:35px;
    padding-bottom:35px;
    border-bottom:1px solid #2d332c;
}

.footer-brand{
    font-size:20px;
    color:#fff;
}

.footer-brand span{
    color:var(--lime);
}

.footer-top p{
    color:#91998e;
    line-height:1.6;
    font-size:13px;
}

.footer-top h4{
    color:#fff;
    font-size:13px;
    margin-bottom:13px;
}

.footer-top button,
.footer-top a{
    display:block;
    background:none;
    border:0;
    padding:4px 0;
    color:#aab1a6;
    text-decoration:none;
    font-size:13px;
    text-align:left;
}

.footer-top button:hover,
.footer-top a:hover{
    color:var(--lime);
}

.footer-bottom{
    max-width:1440px;
    margin:18px auto 0;
    display:flex;
    justify-content:space-between;
    color:#777f75;
    font-size:11px;
}


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

.wa{
    position:fixed;
    right:20px;
    bottom:20px;
    width:54px;
    height:54px;
    border-radius:50%;
    background:#25d366;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:26px;
    text-decoration:none;
    z-index:40;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    border:3px solid #fff;
}


/* =========================
   MODAIS
========================= */

.ov{
    position:fixed;
    inset:0;
    background:rgba(8,12,8,.65);
    backdrop-filter:blur(5px);
    z-index:200;
    display:flex;
    justify-content:flex-end;
}

.ov.c{
    justify-content:center;
    align-items:center;
    padding:15px;
}

.pan{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    width:min(470px,100%);
    height:100%;
    overflow:auto;
    padding:26px;
    box-shadow:0 20px 60px rgba(0,0,0,.2);
}

.ov.c .pan{
    height:auto;
    max-height:94%;
    width:min(560px,100%);
    border-radius:18px;
}

.pan h2{
    font-size:25px;
    margin-bottom:15px;
}

.row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
}

.q{
    display:flex;
    align-items:center;
    gap:6px;
}

.q button{
    width:30px;
    height:30px;
    background:#eef1eb;
    border:1px solid var(--line);
    border-radius:7px;
    font-weight:700;
    cursor:pointer;
}

.fld{
    margin:13px 0;
}

.fld label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:6px;
    color:var(--mut);
    font-weight:700;
}

.fld input,
.fld select{
    background:#fff;
    color:var(--ink);
    border:1px solid #d7ddd3;
    border-radius:9px;
    padding:11px;
    width:100%;
    outline:0;
}

.fld input:focus,
.fld select:focus{
    border-color:#a6bd84;
    box-shadow:0 0 0 3px rgba(183,239,0,.15);
}

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

.tabs{
    display:flex;
    gap:8px;
    margin:14px 0;
    flex-wrap:wrap;
}

.box{
    border:1px solid var(--line);
    padding:16px;
    margin:14px 0;
    background:#fff;
    border-radius:12px;
}

.st{
    display:inline-block;
    padding:4px 10px;
    font-size:11px;
    text-transform:uppercase;
    font-weight:800;
    background:#e8ebe6;
    border-radius:999px;
}

.st.Pago,
.st.Entregue{
    background:var(--lime);
    color:#111;
}

.st.Enviado{
    background:#bfe8ff;
    color:#123;
}

.st.Cancelado{
    background:#ffd2d2;
    color:#8c1111;
}

.st.Aguardando{
    background:#ffe7a8;
    color:#654600;
}

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:14px;
}

.stats div{
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:16px;
}

.stats b{
    display:block;
    font-size:26px;
    color:#78a000;
}


/* =========================
   CARRINHO
========================= */

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

.cart-head h2{
    margin:0;
}

.cart-close{
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    background:#f5f6f3;
    color:#151914;
    font-size:28px;
    line-height:1;
    display:grid;
    place-items:center;
    cursor:pointer;
}

.cart-close:hover{
    background:#151914;
    color:#fff;
    border-color:#151914;
    transform:none;
}

.code{
    word-break:break-all;
    background:#f4f6f2;
    border:1px dashed #aab4a5;
    padding:10px;
    font-size:12px;
    margin:10px 0;
    border-radius:8px;
}

.tbl{
    overflow-x:auto;
}

.qr{
    display:inline-block;
    background:#fff;
    padding:10px;
    margin:10px 0;
    border:1px solid var(--line);
    border-radius:10px;
}


/* =========================
   TOAST
========================= */

.toast{
    position:fixed;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    background:#161a15;
    color:#fff;
    padding:12px 20px;
    border:1px solid #2d352b;
    border-radius:10px;
    z-index:99;
    font-weight:700;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}


/* =========================
   RESPONSIVIDADE 1100
========================= */

@media(max-width:1100px){

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

    .head-main{
        gap:16px;
    }

    .brand{
        min-width:180px;
    }

    .nav-social{
        display:none;
    }

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

    .trust-strip>div:nth-child(2){
        border-right:0;
    }

    .trust-strip>div:nth-child(-n+2){
        border-bottom:1px solid var(--line);
    }
}


/* =========================
   RESPONSIVIDADE 800
========================= */

@media(max-width:800px){

    .site-header{
        position:sticky;
        top:0;
        z-index:100;
    }

    .promo{
        height:auto;
        min-height:34px;
        padding:7px 15px;
        text-align:center;
    }

    .promo-links{
        display:none;
    }

    .head-main{
        min-height:72px;
        padding:10px 4vw;
        gap:10px;
        flex-wrap:wrap;
    }

    .mobile-menu{
        display:block;
        order:-1;
    }

    .brand{
        min-width:auto;
    }

    .brand-logo{
        width:42px;
        height:42px;
    }

    .brand-name{
        font-size:17px;
    }

    .brand-small{
        font-size:7px;
    }

    .head-actions{
        margin-left:auto;
        gap:3px;
    }

    .account-action span:not(.account-icon){
        display:none;
    }

    .account-action{
        padding:4px;
    }

    .account-action .account-avatar,
    .account-action .account-icon{
        width:34px;
        height:34px;
    }

    .head-cart b{
        display:none;
    }

    .head-cart span{
        font-size:21px;
    }

    .nav-main{
        height:auto;
        padding:0 4vw;
        display:block;
    }

    .main-nav{
        display:none;
        padding:5px 0 10px;
        flex-wrap:wrap;
        overflow:visible;
    }

    .menu-open .main-nav{
        display:flex;
    }

    .main-nav button{
        padding:10px 8px;
    }

    .nav-social{
        display:none;
    }

    .hero-slide{
        grid-template-columns:1fr;
        min-height:560px;
        padding:38px 9% 55px;
    }

    .hero-copy h1{
        font-size:40px;
    }

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

    .hero-media{
        min-height:230px;
    }

    .hero-media img{
        max-height:245px;
        max-width:75%;
    }

    .hero-badge{
        width:75px;
        height:75px;
        font-size:9px;
    }

    .floating-product{
        width:62px;
        height:62px;
        font-size:27px;
    }

    .hero-arrow{
        display:none;
    }

    .trust-strip{
        grid-template-columns:1fr 1fr;
        margin-bottom:36px;
    }

    .trust-strip>div{
        padding:15px 12px;
    }

    .trust-strip b{
        font-size:11px;
    }

    .trust-strip span{
        font-size:10px;
    }

    .section-head{
        align-items:flex-start;
    }

    .section-head h2{
        font-size:25px;
    }

    .cat-cards{
        grid-template-columns:1fr 1fr;
    }

    .cat-card{
        min-height:155px;
    }

    .cat-card img{
        height:105px;
    }

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

    .card .b{
        padding:11px;
    }

    .card h3{
        font-size:13px;
    }

    .price{
        font-size:17px;
    }

    .sortsel{
        margin-left:0;
    }

    .bar{
        gap:6px;
    }

    .about-preview{
        grid-template-columns:1fr;
        padding:34px 25px;
    }

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

    .about-hero{
        grid-template-columns:1fr;
        padding:40px 7%;
    }

    .about-hero img{
        max-height:220px;
    }

    .about-grid{
        grid-template-columns:1fr;
        padding:48px 2%;
    }

    .about-values{
        grid-template-columns:1fr;
    }

    .about-cta{
        align-items:flex-start;
        flex-direction:column;
    }

    .site-footer{
        margin:60px -4vw -70px;
        padding:40px 7vw 20px;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:25px;
    }

    .footer-top>div:first-child{
        grid-column:1/-1;
    }

    .footer-bottom{
        flex-direction:column;
        gap:6px;
    }
}


/* =========================
   RESPONSIVIDADE 420
========================= */

@media(max-width:420px){

    .brand-name{
        font-size:15px;
    }

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

    .cat-cards{
        gap:9px;
    }

    .hero-copy h1{
        font-size:34px;
    }

    .about-stats{
        gap:5px;
    }

    .about-stats div{
        padding:18px 8px;
    }
}


/* =========================
   REDUÇÃO DE MOVIMENTO
========================= */

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

    *{
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important;
    }
}


/* =========================
   AJUSTES DE RESPONSIVIDADE
========================= */

.account-action{
    min-width:0;
    flex-shrink:1;
}

.account-action>span:last-child{
    min-width:0;
}

.account-action b,
.account-action small{
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:150px;
}

.avatar-preview{
    margin-top:10px;
    min-height:0;
    display:flex;
    align-items:center;
    gap:10px;
}

.avatar-preview:empty{
    display:none;
}

.avatar-preview img{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--lime);
    display:block;
}

.row{
    min-width:0;
}

.row .th{
    width:52px!important;
    height:52px!important;
    min-width:52px;
    max-width:52px;
    object-fit:cover;
    border-radius:10px;
    display:block;
    flex:0 0 52px;
    background:#f2f3ef;
}

.row .th+*{
    min-width:0;
}

.box{
    max-width:100%;
    overflow:hidden;
}

.box .row{
    overflow:hidden;
}

.box .row span:last-child{
    margin-left:auto;
    white-space:nowrap;
}


/* =========================
   RESPONSIVIDADE 1100
========================= */

@media(max-width:1100px){

    .head-main{
        padding-left:3vw;
        padding-right:3vw;
    }

    .brand{
        min-width:0;
        flex:0 1 auto;
    }

    .head-actions{
        min-width:0;
    }

    .account-action b,
    .account-action small{
        max-width:115px;
    }
}


/* =========================
   RESPONSIVIDADE 800
========================= */

@media(max-width:800px){

    body{
        overflow-x:hidden;
    }

    main{
        width:100%;
        padding-left:4vw;
        padding-right:4vw;
    }

    .head-main{
        width:100%;
        min-height:72px;
        gap:7px;
        padding:9px 3.5vw;
    }

    .mobile-menu{
        flex:0 0 30px;
    }

    .brand{
        gap:7px;
        flex:1 1 auto;
        min-width:0;
    }

    .brand-logo{
        width:40px;
        height:40px;
        flex:0 0 40px;
    }

    .brand-name{
        font-size:16px;
        white-space:nowrap;
    }

    .brand-small{
        font-size:6px;
        letter-spacing:3px;
    }

    .head-actions{
        flex:0 0 auto;
        gap:2px;
    }

    .account-action{
        display:flex;
        gap:6px;
        padding:3px;
        align-items:center;
    }

    .account-action>span:last-child{
        display:flex;
        flex-direction:column;
        min-width:0;
        line-height:1.05;
    }

    .account-action small{
        font-size:9px;
        line-height:1.1;
        white-space:nowrap;
        max-width:88px;
    }

    .account-action b{
        font-size:11px;
        line-height:1.15;
        white-space:nowrap;
        max-width:88px;
    }

    .account-action .account-avatar,
    .account-action .account-icon{
        width:32px;
        height:32px;
        flex:0 0 32px;
        font-size:15px;
    }

    .head-cart{
        padding:4px;
        flex:0 0 auto;
    }

    .head-cart b{
        display:none;
    }

    .head-cart span{
        font-size:20px;
    }

    .badge{
        left:14px;
        top:-4px;
    }

    .hero-slider{
        min-height:0;
        border-radius:18px;
    }

    .hero-slide{
        min-height:0;
        height:auto;
        padding:34px 8% 64px;
        gap:12px;
    }

    .hero-copy{
        width:100%;
    }

    .hero-copy h1{
        font-size:clamp(32px,9vw,40px);
        letter-spacing:-1.2px;
    }

    .hero-copy p{
        font-size:14px;
        line-height:1.55;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-light{
        width:100%;
        max-width:260px;
    }

    .hero-media{
        min-height:210px;
        height:210px;
    }

    .hero-media img{
        max-width:80%;
        max-height:205px;
    }

    .hero-media.alt img{
        max-width:72%;
        max-height:195px;
    }

    .hero-badge{
        right:1%;
        top:6%;
        width:68px;
        height:68px;
        font-size:8px;
    }

    .floating-product{
        width:58px;
        height:58px;
        font-size:25px;
    }

    .hero-dots{
        bottom:18px;
    }

    .trust-strip{
        margin-left:0;
        margin-right:0;
    }

    .section-head{
        gap:12px;
    }

    .section-head h2{
        font-size:24px;
    }

    .bar{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:3px;
        scrollbar-width:none;
    }

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

    .chip{
        flex:0 0 auto;
    }

    .sortsel{
        flex:0 0 auto;
    }

    .grid{
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .card{
        min-width:0;
    }

    .card .im{
        width:100%;
    }

    .card .b{
        min-width:0;
        padding:11px;
    }

    .card h3{
        overflow-wrap:anywhere;
    }

    .card .mut{
        line-height:1.4;
    }

    .price{
        font-size:17px;
    }

    .about-hero,
    .about-grid,
    .about-values,
    .about-preview{
        min-width:0;
    }

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

    .about-grid h2{
        font-size:32px;
    }

    .footer-top{
        min-width:0;
    }

    .ov{
        overflow:auto;
    }

    .ov.c{
        padding:10px;
    }

    .ov.c .pan{
        width:100%;
        max-width:560px;
        max-height:calc(100dvh - 20px);
        padding:20px;
    }

    .pan{
        max-width:100%;
        padding:20px;
    }

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

    .row{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .row .th{
        width:48px!important;
        height:48px!important;
        min-width:48px;
        max-width:48px;
        flex-basis:48px;
    }

    .box .row span:last-child{
        margin-left:auto;
    }

    .wa{
        right:14px;
        bottom:calc(14px + env(safe-area-inset-bottom,0px));
        width:50px;
        height:50px;
    }

    .toast{
        max-width:calc(100vw - 28px);
        text-align:center;
    }
}


/* =========================
   RESPONSIVIDADE 560
========================= */

@media(max-width:560px){

    .promo{
        font-size:11px;
    }

    .head-main{
        gap:5px;
    }

    .brand-logo{
        width:36px;
        height:36px;
        flex-basis:36px;
        border-radius:11px;
    }

    .brand-name{
        font-size:14px;
        letter-spacing:-.5px;
    }

    .brand-small{
        font-size:5px;
        letter-spacing:2px;
    }

    .account-action .account-avatar,
    .account-action .account-icon{
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    .account-action small{
        font-size:8px;
        max-width:76px;
    }

    .account-action b{
        font-size:10px;
        max-width:76px;
    }

    .hero-slide{
        padding-left:7%;
        padding-right:7%;
    }

    .trust-strip{
        grid-template-columns:1fr 1fr;
    }

    .trust-strip>div{
        border-right:1px solid var(--line)!important;
    }

    .trust-strip>div:nth-child(2n){
        border-right:0!important;
    }

    .trust-strip>div:nth-child(-n+2){
        border-bottom:1px solid var(--line);
    }

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

    .cat-card img{
        height:98px;
    }

    .site-footer{
        margin-left:-4vw;
        margin-right:-4vw;
    }
}


/* =========================
   RESPONSIVIDADE 390
========================= */

@media(max-width:390px){

    .mobile-menu{
        font-size:19px;
        flex-basis:25px;
    }

    .brand-logo{
        width:33px;
        height:33px;
        flex-basis:33px;
    }

    .brand-name{
        font-size:13px;
    }

    .brand-small{
        display:none;
    }

    .account-action small{
        display:none!important;
    }

    .account-action b{
        font-size:10px;
        max-width:72px;
    }

    .account-action .account-avatar,
    .account-action .account-icon{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .head-cart span{
        font-size:18px;
    }

    .hero-copy h1{
        font-size:31px;
    }

    .grid{
        gap:8px;
    }

    .card .b{
        padding:9px;
    }

    .card .btn{
        font-size:12px;
        padding:9px 7px;
    }

    .about-stats{
        grid-template-columns:1fr;
    }
}


/* =========================
   DESKTOP
========================= */

@media(min-width:801px){

    .account-action>span:last-child{
        display:flex;
        flex-direction:column;
    }
}


/* =========================
   PERFIL
========================= */

.profile-pan{
    text-align:center;
}

.profile-photo-wrap{
    display:flex;
    justify-content:center;
    margin:4px 0 8px;
}

.profile-avatar-large{
    width:104px;
    height:104px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--lime);
    display:grid;
    place-items:center;
    background:#eef1eb;
    font-size:38px;
}

.profile-email{
    word-break:break-word;
    margin:0 0 14px;
}

.profile-pan .avatar-preview{
    justify-content:center;
}

@media(max-width:420px){

    .profile-avatar-large{
        width:92px;
        height:92px;
    }
}


/* =========================
   CARRINHO
========================= */

.cart-pan{
    min-width:0;
    overflow-x:hidden;
}

.cart-delivery{
    margin:18px 0 12px;
    min-width:0;
}

.cart-delivery>b{
    display:block;
    margin-bottom:10px;
}

.cart-choice-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    min-width:0;
}

.cart-choice-grid .btn{
    width:100%;
    min-width:0;
    white-space:normal;
    text-align:center;
    line-height:1.25;
    padding-left:10px;
    padding-right:10px;
}

.cart-info{
    margin:0 0 14px;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-2);
    font-size:12px;
    line-height:1.55;
    width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.cart-info b{
    overflow-wrap:anywhere;
}

.cart-whatsapp{
    display:inline-block;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}

@media(max-width:800px){

    .cart-pan{
        width:100%!important;
        max-width:560px!important;
        padding:18px!important;
    }

    .cart-pan h2{
        font-size:23px;
    }
}

@media(max-width:420px){

    .cart-pan{
        padding:16px!important;
        border-radius:16px!important;
    }

    .cart-choice-grid{
        grid-template-columns:1fr;
    }

    .cart-choice-grid .btn{
        padding:11px 10px;
    }

    .cart-info{
        font-size:11.5px;
    }
}


/* =========================
   RESPONSIVIDADE GLOBAL
========================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img,
svg,
video,
canvas{
    max-width:100%;
    height:auto;
}

button,
input,
select,
textarea{
    max-width:100%;
}

main,
.head-main,
.nav-main,
.site-footer,
.footer-top,
.footer-bottom{
    min-width:0;
}

@media(min-width:1201px){

    .head-main,
    .nav-main,
    main,
    .footer-top,
    .footer-bottom{
        max-width:1440px;
    }
}

@media(min-width:801px) and (max-width:1200px){

    .head-main{
        padding-left:3vw;
        padding-right:3vw;
        gap:16px;
    }

    .brand{
        min-width:0;
        flex:0 1 auto;
    }

    .brand-name{
        font-size:19px;
    }

    .head-actions{
        gap:8px;
        min-width:0;
    }

    .account-action{
        min-width:0;
    }

    .account-action b,
    .account-action small{
        max-width:120px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .nav-main{
        padding-left:3vw;
        padding-right:3vw;
    }

    main{
        padding-left:3vw;
        padding-right:3vw;
    }

    .hero-slide{
        padding-left:6%;
        padding-right:6%;
        gap:14px;
    }

    .hero-copy h1{
        font-size:clamp(34px,5vw,54px);
    }

    .cat-cards{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:10px;
    }

    .grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:13px;
    }

    .about-preview{
        grid-template-columns:1.1fr .9fr;
        padding-left:5%;
        padding-right:5%;
        gap:24px;
    }

    .footer-top{
        grid-template-columns:1.7fr 1fr 1fr 1.1fr;
        gap:20px;
    }

    .ov{
        padding:18px;
    }

    .pan{
        max-width:min(560px,94vw);
    }
}


/* =========================
   TABLET
========================= */

@media(min-width:601px) and (max-width:800px){

    main{
        padding-left:24px;
        padding-right:24px;
    }

    .head-main{
        padding-left:20px;
        padding-right:20px;
    }

    .nav-main{
        padding-left:20px;
        padding-right:20px;
    }

    .hero-slide{
        padding:34px 7% 58px;
    }

    .hero-copy h1{
        font-size:clamp(34px,6vw,46px);
    }

    .hero-media{
        min-height:250px;
        height:250px;
    }

    .cat-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .cat-card{
        min-height:165px;
    }

    .grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
    }

    .card .b{
        padding:12px;
    }

    .section-head{
        flex-wrap:wrap;
    }

    .about-preview{
        padding:34px 30px;
    }

    .about-hero{
        padding:40px 6%;
    }

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


/* =========================
   MOBILE 600
========================= */

@media(max-width:600px){

    .promo{
        padding-left:12px;
        padding-right:12px;
    }

    main{
        padding-left:16px;
        padding-right:16px;
        padding-bottom:55px;
    }

    .head-main{
        padding-left:14px;
        padding-right:14px;
    }

    .nav-main{
        padding-left:14px;
        padding-right:14px;
    }

    .hero-slider{
        width:100%;
        max-width:100%;
    }

    .hero-copy,
    .hero-media,
    .section-head,
    .cat-cards,
    .grid,
    .about-preview,
    .about-hero,
    .about-grid,
    .about-values,
    .site-footer{
        min-width:0;
        max-width:100%;
    }

    .hero-buttons{
        width:100%;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-light{
        max-width:100%;
    }

    .section-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .section-head h2{
        max-width:100%;
        overflow-wrap:anywhere;
    }

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

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

    .sortsel{
        width:100%;
        margin-left:0;
    }

    .bar{
        max-width:100%;
    }

    .about-stats{
        min-width:0;
    }

    .about-stats div{
        min-width:0;
        overflow-wrap:anywhere;
    }

    .site-footer{
        overflow:hidden;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:22px;
    }

    .footer-top>div:first-child{
        grid-column:auto;
    }

    .footer-bottom{
        gap:8px;
        overflow-wrap:anywhere;
    }

    .ov{
        padding:8px;
    }

    .ov .pan{
        width:min(100%,560px);
        max-width:100%;
        margin:auto;
    }

    .ov.c .pan{
        width:100%;
        max-width:100%;
        max-height:calc(100dvh - 16px);
        padding:16px;
    }

    .cart-pan{
        width:100%!important;
        max-width:100%!important;
    }

    .cart-choice-grid{
        grid-template-columns:1fr;
    }

    .row{
        width:100%;
        max-width:100%;
    }

    .row .th{
        flex:0 0 46px;
        width:46px!important;
        height:46px!important;
        min-width:46px;
        max-width:46px;
    }
}


/* =========================
   MOBILE PEQUENO
========================= */

@media(max-width:380px){

    main{
        padding-left:12px;
        padding-right:12px;
    }

    .head-main{
        padding-left:10px;
        padding-right:10px;
    }

    .nav-main{
        padding-left:10px;
        padding-right:10px;
    }

    .grid,
    .cat-cards{
        gap:7px;
    }

    .card .b{
        padding:8px;
    }

    .card h3{
        font-size:12px;
    }

    .price{
        font-size:16px;
    }

    .btn{
        padding-left:12px;
        padding-right:12px;
    }
}


/* =========================
   AMPLIAÇÃO DA FOTO DE PERFIL
========================= */

.profile-avatar-clickable{
    cursor:zoom-in;
}

.avatar-zoom-ov{
    z-index:1000;
    background:rgba(0,0,0,.86);
    padding:20px;
}

.avatar-zoom-pan{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:min(92vw,720px);
    max-height:92vh;
}

.avatar-zoom-pan img{
    display:block;
    width:auto;
    height:auto;
    max-width:88vw;
    max-height:84vh;
    border-radius:18px;
    border:3px solid var(--lime);
    object-fit:contain;
    box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.avatar-zoom-close{
    position:absolute;
    right:-12px;
    top:-12px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#111;
    font-size:28px;
    line-height:1;
    cursor:pointer;
}

@media(max-width:600px){

    .avatar-zoom-pan img{
        max-width:90vw;
        max-height:78vh;
        border-radius:14px;
    }

    .avatar-zoom-close{
        right:-6px;
        top:-10px;
    }
}


/* =========================
   PEDIDOS
========================= */

.orders-page-head{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:24px;
}

.back-page-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid #dfe5da;
    background:#fff;
    color:#20251e;
    padding:11px 16px;
    border-radius:999px;
    font-weight:800;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 5px 16px rgba(20,25,20,.06);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.back-page-btn::first-letter{
    font-size:19px;
}

.back-page-btn:hover{
    background:var(--lime);
    border-color:var(--lime);
    box-shadow:0 8px 22px rgba(20,25,20,.10);
    transform:translateX(-2px);
}

.back-page-btn:active{
    transform:translateX(-1px) scale(.98);
}

.back-page-btn:focus-visible{
    outline:3px solid rgba(183,239,0,.35);
    outline-offset:3px;
}

.orders-page-head h2{
    margin:0 0 8px;
}

.orders-page-head p{
    margin:0;
}

@media(max-width:700px){

    .orders-page-head{
        gap:10px;
        align-items:center;
    }

    .back-page-btn{
        padding:9px 12px;
        font-size:13px;
    }

    .orders-page-head h2{
        font-size:32px!important;
    }

    .orders-page-head p{
        font-size:13px;
    }
}


/* =========================
   AVALIAÇÕES
========================= */

.product-photo-btn,
.order-product-photo{
    display:block;
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
    text-align:left;
    color:inherit;
}

.product-photo-btn{
    width:100%;
}

.product-photo-btn .im{
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease;
}

.product-photo-btn:hover .im{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(20,25,20,.10);
}

.order-product-photo{
    flex:0 0 auto;
}

.order-product-photo .th{
    transition:transform .2s ease;
}

.order-product-photo:hover .th{
    transform:scale(1.04);
}

.order-item-row{
    align-items:center;
}

.review-order-btn{
    padding:0;
    margin-top:5px;
    font-size:11px;
}

.review-pan{
    width:min(680px,100%)!important;
}

.review-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
}

.review-head h2{
    margin:4px 0 0;
}

.review-product{
    display:flex;
    gap:15px;
    align-items:center;
    background:#f7f8f5;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
    margin:12px 0 18px;
}

.review-product-img{
    width:78px;
    height:78px;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    flex:0 0 78px;
}

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

.review-product .price{
    font-size:20px;
}

.reviews-list{
    display:grid;
    gap:10px;
    max-height:380px;
    overflow:auto;
    padding-right:3px;
}

.review-card{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
    background:#fff;
}

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

.review-user>img,
.review-user>span{
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    background:#eef1eb;
    display:grid;
    place-items:center;
}

.review-user>div{
    min-width:0;
}

.review-user time{
    margin-left:auto;
    font-size:10px;
    color:var(--mut);
    white-space:nowrap;
}

.review-card p{
    margin:10px 0 0;
    line-height:1.55;
    color:#444b42;
}

.review-star{
    font-size:15px;
    color:#cfd5cb;
    letter-spacing:1px;
}

.review-star.on{
    color:#f5b400;
}

.review-photo{
    display:block;
    width:min(220px,100%);
    max-height:240px;
    object-fit:cover;
    border-radius:10px;
    margin-top:11px;
    cursor:pointer;
}

.review-empty{
    border:1px dashed #cfd6ca;
    border-radius:14px;
    padding:25px;
    text-align:center;
    color:#5f675c;
    display:grid;
    gap:5px;
}

.review-form{
    border-top:1px solid var(--line);
    margin-top:18px;
    padding-top:18px;
}

.review-form h3{
    margin:0 0 3px;
}

.review-rate{
    display:flex;
    gap:4px;
    margin:10px 0 14px;
}

.review-rate-btn{
    border:0;
    background:transparent;
    font-size:32px;
    line-height:1;
    color:#d5d9d2;
    cursor:pointer;
    padding:0 3px;
    transition:.15s;
}

.review-rate-btn:hover,
.review-rate-btn.on{
    color:#f5b400;
    transform:scale(1.05);
}

.review-form textarea{
    width:100%;
    resize:vertical;
    background:#fff;
    color:var(--ink);
    border:1px solid #d7ddd3;
    border-radius:9px;
    padding:11px;
    outline:0;
    font-family:inherit;
}

.review-form textarea:focus{
    border-color:#a6bd84;
    box-shadow:0 0 0 3px rgba(183,239,0,.15);
}

.review-photo-preview{
    margin-top:8px;
}

.review-photo-preview img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--line);
}

.review-own-note,
.review-login-note{
    margin-top:16px;
    padding:12px 14px;
    border-radius:11px;
    background:#f0f7df;
    color:#506700;
    font-size:13px;
}

.review-login-note{
    background:#f5f6f3;
    color:#5d665a;
}

@media(max-width:600px){

    .review-pan{
        padding:20px!important;
    }

    .review-product-img{
        width:64px;
        height:64px;
        flex-basis:64px;
    }

    .review-user time{
        display:none;
    }

    .reviews-list{
        max-height:330px;
    }
}


/* =========================
   DETALHES DO PRODUTO
========================= */

.product-detail-pan{
    width:min(760px,100%)!important;
}

.product-tabs{
    display:flex;
    gap:6px;
    border-bottom:1px solid var(--line);
    margin:4px 0 20px;
}

.product-tab{
    border:0;
    background:transparent;
    padding:11px 16px;
    color:#697166;
    font-weight:700;
    cursor:pointer;
    border-bottom:3px solid transparent;
}

.product-tab.active{
    color:var(--ink);
    border-bottom-color:#a8d900;
}

.product-detail-body{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(240px,1fr);
    gap:24px;
    align-items:center;
}

.product-detail-image{
    aspect-ratio:1;
    border-radius:18px;
    background:#f7f8f5;
    overflow:hidden;
    border:1px solid var(--line);
    display:grid;
    place-items:center;
}

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

.product-detail-info h2{
    margin:5px 0 8px;
}

.product-detail-price{
    font-size:28px;
    font-weight:800;
    margin-bottom:14px;
}

.product-description{
    color:#535b50;
    line-height:1.7;
    margin:0 0 20px;
}

.product-rating-summary{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    background:#f7f8f5;
    border:1px solid var(--line);
    border-radius:14px;
    margin-bottom:14px;
}

.rating-big{
    font-size:30px;
    font-weight:800;
}

.product-reviews-body .reviews-list{
    max-height:430px;
}

@media(max-width:600px){

    .product-detail-body{
        grid-template-columns:1fr;
        gap:16px;
    }

    .product-detail-image{
        max-height:280px;
    }

    .product-detail-info{
        padding-bottom:4px;
    }

    .product-tabs{
        margin-bottom:14px;
    }

    .product-tab{
        flex:1;
        padding:10px 8px;
    }
}


/* =========================
   ADMIN - AVALIAÇÕES
========================= */

.admin-review-list{
    display:grid;
    gap:12px;
}

.admin-review-card{
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
    padding:15px;
}

.admin-review-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.admin-review-top>div{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.admin-review-top img,
.admin-review-thumb{
    width:54px;
    height:54px;
    border-radius:10px;
    object-fit:cover;
    background:#f2f4ef;
    display:grid;
    place-items:center;
    flex:0 0 54px;
}

.admin-review-card p{
    margin:12px 0 0;
    line-height:1.55;
}

.admin-review-photo{
    display:block;
    width:min(220px,100%);
    max-height:240px;
    object-fit:cover;
    border-radius:10px;
    margin-top:11px;
}

@media(max-width:600px){

    .admin-review-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-review-top .btn{
        width:100%;
    }
}


/* =========================
   SUCESSO DA AVALIAÇÃO
========================= */

.review-success{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 18px;
    padding:14px 16px;
    border:1px solid #16a34a55;
    background:#16a34a12;
    border-radius:16px;
    animation:reviewSuccessIn .35s ease-out;
}

.review-success-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#16a34a;
    color:#fff;
    font-size:28px;
    font-weight:800;
    animation:reviewCheck .55s ease-out;
}

.review-success b{
    display:block;
    color:#16a34a;
    font-size:18px;
}

.review-success span{
    display:block;
    margin-top:3px;
    color:#888;
}

@keyframes reviewSuccessIn{

    from{
        opacity:0;
        transform:translateY(-6px);
    }

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

@keyframes reviewCheck{

    0%{
        transform:scale(.4);
        opacity:0;
    }

    70%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}















/* =========================================================
   MICROANIMAÇÕES — LOJA DO PRETO
========================================================= */

/* ---------------------------------------------------------
   TRANSIÇÕES GERAIS
--------------------------------------------------------- */

button,
a,
.card,
.cat-card,
.chip,
.account-action,
.head-cart,
.main-nav button,
.nav-social button,
.btn,
.btn-light,
.text-link {
    transition:
        transform .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        box-shadow .22s ease,
        opacity .22s ease;
}


/* ---------------------------------------------------------
   BOTÕES
--------------------------------------------------------- */

.btn:hover,
.btn-light:hover {
    transform: translateY(-2px);
}

.btn:active,
.btn-light:active,
.chip:active,
.main-nav button:active {
    transform: scale(.97);
}


/* ---------------------------------------------------------
   MENU PRINCIPAL
--------------------------------------------------------- */

.main-nav button {
    position: relative;
}

.main-nav button::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 7px;
    height: 2px;
    border-radius: 10px;
    background: var(--lime);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .22s ease;
}

.main-nav button:hover::after,
.main-nav button.active::after {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   LOGO
--------------------------------------------------------- */

.brand-logo {
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.brand:hover .brand-logo {
    transform: scale(1.04);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
}


/* ---------------------------------------------------------
   CONTA / PERFIL
--------------------------------------------------------- */

.account-action:hover .account-avatar,
.account-action:hover .account-icon {
    transform: scale(1.05);
}


/* ---------------------------------------------------------
   CARRINHO
--------------------------------------------------------- */

.head-cart:hover {
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   BADGE DO CARRINHO
--------------------------------------------------------- */

.badge {
    animation: badgeAppear .25s ease;
}

@keyframes badgeAppear {

    from {
        opacity: 0;
        transform: scale(.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================================
   CARDS DE PRODUTOS
========================================================= */

.card {
    animation: cardEnter .45s ease both;
}

@keyframes cardEnter {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Hover do card */

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


/* Imagem */

.card .im img {
    transition:
        transform .4s cubic-bezier(.2, .7, .2, 1),
        filter .3s ease;
}

.card:hover .im img {
    transform: scale(1.045);
}


/* Conteúdo do card */

.card .b {
    transition: transform .25s ease;
}

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


/* Preço */

.card .price {
    transition:
        transform .25s ease,
        color .25s ease;
}

.card:hover .price {
    transform: translateX(2px);
}


/* Botão do card */

.card .btn {
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background-color .22s ease;
}

.card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(16, 20, 16, .12);
}

.card .btn:active {
    transform: scale(.97);
}


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

.cat-card {
    animation: categoryEnter .5s ease both;
}

@keyframes categoryEnter {

    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Imagem da categoria */

.cat-card img {
    transition:
        transform .4s cubic-bezier(.2, .7, .2, 1);
}

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


/* =========================================================
   CHIPS / FILTROS
========================================================= */

.chip:hover {
    transform: translateY(-1px);
    border-color: #b7c1b0;
}

.chip.on {
    box-shadow: 0 5px 14px rgba(22, 26, 21, .12);
}


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

.hero-media img {
    animation: heroImageEnter .7s ease both;
}

@keyframes heroImageEnter {

    from {
        opacity: 0;
        transform: scale(.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}


/* Badge do hero */

.hero-badge {
    animation: heroBadgeFloat 4s ease-in-out infinite;
}

@keyframes heroBadgeFloat {

    0%,
    100% {
        transform: rotate(8deg) translateY(0);
    }

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

}


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

.section-head h2 {
    transition: transform .25s ease;
}

.section-head:hover h2 {
    transform: translateX(2px);
}


/* Links */

.text-link:hover {
    color: #789d00;
    transform: translateX(3px);
}


/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip > div {
    transition:
        background-color .22s ease,
        transform .22s ease;
}

.trust-strip > div:hover {
    background: #fafbf9;
    transform: translateY(-2px);
}


/* =========================================================
   REVEAL DAS SEÇÕES AO ENTRAR NA TELA
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2, .7, .2, 1);

    will-change: opacity, transform;
}


.reveal.show {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   CARDS DENTRO DAS SEÇÕES
========================================================= */

/*
   Enquanto a seção ainda não apareceu,
   os cards ficam escondidos.
*/

.reveal .card,
.reveal .cat-card {
    opacity: 0;
    transform: translateY(18px);

    animation: none;
}


/*
   Quando a seção aparece,
   os cards começam a entrar.
*/

.reveal.show .card {
    animation:
        cardEnter .55s cubic-bezier(.2, .7, .2, 1) both;
}


.reveal.show .cat-card {
    animation:
        categoryEnter .55s cubic-bezier(.2, .7, .2, 1) both;
}


/* =========================================================
   EFEITO CASCATA DOS PRODUTOS
========================================================= */

.reveal.show .card:nth-child(1) {
    animation-delay: .05s;
}

.reveal.show .card:nth-child(2) {
    animation-delay: .10s;
}

.reveal.show .card:nth-child(3) {
    animation-delay: .15s;
}

.reveal.show .card:nth-child(4) {
    animation-delay: .20s;
}

.reveal.show .card:nth-child(5) {
    animation-delay: .25s;
}

.reveal.show .card:nth-child(6) {
    animation-delay: .30s;
}

.reveal.show .card:nth-child(7) {
    animation-delay: .35s;
}

.reveal.show .card:nth-child(8) {
    animation-delay: .40s;
}


/* =========================================================
   EFEITO CASCATA DAS CATEGORIAS
========================================================= */

.reveal.show .cat-card:nth-child(1) {
    animation-delay: .05s;
}

.reveal.show .cat-card:nth-child(2) {
    animation-delay: .12s;
}

.reveal.show .cat-card:nth-child(3) {
    animation-delay: .19s;
}

.reveal.show .cat-card:nth-child(4) {
    animation-delay: .26s;
}

.reveal.show .cat-card:nth-child(5) {
    animation-delay: .33s;
}

.reveal.show .cat-card:nth-child(6) {
    animation-delay: .40s;
}


/* =========================================================
   HOVER DOS CARDS DEPOIS DO REVEAL
========================================================= */

/*
   Isso é importante porque o .reveal também usa transform.
   Aqui garantimos que o hover continue funcionando.
*/

.reveal.show .card:hover {
    transform: translateY(-6px);
}

.reveal.show .card:hover .im img {
    transform: scale(1.045);
}

.reveal.show .cat-card:hover img {
    transform: scale(1.035);
}


/* =========================================================
   REDUZIR ANIMAÇÕES PARA QUEM PREFERE MENOS MOVIMENTO
========================================================= */

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal.show,
    .reveal .card,
    .reveal .cat-card {
        opacity: 1;
        transform: none;
    }

}