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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:#fff;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0,150,70,.24),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #001c12 0%,
            #00351f 35%,
            #00180f 65%,
            #002a19 100%
        );
    min-height:100vh;
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.18;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0 40px,
            rgba(255,223,0,.09) 41px 43px,
            transparent 44px 90px
        );

    z-index:-1;
}

.wrap{
    width:min(1500px,94%);
    margin:auto;
}


/* =========================
   MENU
========================= */

.topbar{
    background:rgba(0,15,10,.95);
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;
    z-index:20;
}

.nav{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.logo{
    color:#ffd900;
    text-decoration:none;
    font-weight:900;
    font-style:italic;
    font-size:34px;
    transform:rotate(-3deg);
    line-height:.8;
}

.logo small{
    display:block;
    color:#fff;
    font-size:13px;
    margin-top:8px;
    text-align:center;
    letter-spacing:2px;
}

nav{
    display:flex;
    align-items:center;
    gap:34px;
}

nav a{
    color:#fff;
    text-decoration:none;
    font-weight:800;
    font-size:13px;
    transition:.2s;
}

nav a:hover{
    color:#ffd900;
}


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

.hero{
    min-height:340px;
    position:relative;
    overflow:hidden;

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

    background:
        linear-gradient(
            rgba(0,45,24,.4),
            rgba(0,15,8,.5)
        ),
        linear-gradient(
            115deg,
            #006b38,
            #00853f 35%,
            #004d2a 70%,
            #00753c
        );

    border-bottom:4px solid #e4c600;
}

.hero:before{
    content:"";
    position:absolute;
    width:900px;
    height:250px;

    background:#f6d900;

    transform:rotate(-8deg);

    left:50%;
    top:45%;
    translate:-50% -50%;

    opacity:.85;
}

.hero:after{
    content:"";
    position:absolute;
    width:440px;
    height:440px;

    border-radius:50%;

    background:#063b8c;

    left:50%;
    top:50%;

    translate:-50% -50%;

    box-shadow:
        0 0 0 14px rgba(255,255,255,.08);

    opacity:.85;
}

.hero-content{
    position:relative;
    z-index:5;
    text-align:center;
    text-shadow:0 5px 12px rgba(0,0,0,.8);
}

.hero-content span{
    color:#00f26a;
    font-size:17px;
    letter-spacing:4px;
    font-weight:900;
}

.hero-content h1{
    font-size:94px;
    font-weight:1000;
    font-style:italic;
    line-height:.9;
    margin-top:10px;
    color:#fff;
}

.hero-content h2{
    font-size:39px;
    color:#ffd900;
    font-weight:1000;
    font-style:italic;
}

.hero-line{
    width:340px;
    max-width:80%;
    height:5px;
    margin:16px auto;
    background:#fff;
}

.hero-content p{
    font-size:17px;
    font-weight:900;
    letter-spacing:4px;
}


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

.products-area{
    padding:48px 0 55px;
}

.section-title{
    text-align:center;
    margin-bottom:32px;
}

.section-title span{
    color:#00e75e;
    font-weight:900;
    letter-spacing:4px;
    font-size:13px;
}

.section-title h2{
    font-size:32px;
    margin-top:7px;
}


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


/* =========================
   CARD
========================= */

.card{
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(0,28,18,.97),
            rgba(0,13,8,.98)
        );

    border:1px solid rgba(0,230,95,.42);

    border-radius:13px;

    overflow:hidden;

    min-width:0;

    box-shadow:
        0 12px 30px rgba(0,0,0,.35);

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

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

    border-color:#00ed62;

    box-shadow:
        0 17px 35px rgba(0,0,0,.55),
        0 0 20px rgba(0,230,90,.15);
}

.card-lula{
    border-color:rgba(220,35,35,.48);
}

.card-lula:hover{
    border-color:#e83333;

    box-shadow:
        0 17px 35px rgba(0,0,0,.55),
        0 0 20px rgba(220,20,20,.16);
}


/* =========================
   ETIQUETA
========================= */

.product-type{
    position:absolute;
    z-index:8;

    top:13px;
    left:13px;

    padding:8px 11px;

    border-radius:7px;

    background:#00a843;

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

    box-shadow:0 3px 10px rgba(0,0,0,.4);
}

.card-lula .product-type{
    background:#d92020;
}


/* =========================
   IMAGEM
========================= */

.product-photo{
    display:block;

    width:100%;
    height:390px;

    overflow:hidden;

    background:#00150c;
}

.product-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .4s ease;
}

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


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

.product-info{
    padding:19px 15px 17px;
    text-align:center;

    display:flex;
    flex-direction:column;

    min-height:205px;
}

.product-info h3{
    color:#fff;

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

    min-height:44px;

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

.price{
    color:#00f267;

    font-size:23px;

    font-weight:1000;

    margin:14px 0;
}

.btn{
    display:block;

    margin-top:auto;

    padding:14px 8px;

    background:
        linear-gradient(
            180deg,
            #00c34d,
            #009b3a
        );

    border:1px solid #00df5b;

    border-radius:7px;

    color:#fff;

    font-weight:900;

    font-size:13px;

    text-decoration:none;

    box-shadow:
        0 5px 15px rgba(0,0,0,.25);

    transition:.2s;
}

.btn:hover{
    filter:brightness(1.14);
    transform:translateY(-2px);
}


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

.benefits{
    width:min(1250px,92%);

    margin:0 auto 40px;

    background:rgba(0,15,10,.9);

    border:1px solid rgba(0,210,85,.25);

    border-radius:13px;

    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.benefits-grid{
    width:100%;

    display:grid;

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

.benefit{
    padding:25px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    border-right:1px solid rgba(255,255,255,.08);
}

.benefit:last-child{
    border-right:0;
}

.benefit-icon{
    width:45px;
    height:45px;

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

    border:2px solid #fff;

    border-radius:50%;

    font-size:21px;
}

.benefit strong{
    display:block;

    font-size:12px;

    margin-bottom:5px;
}

.benefit span{
    display:block;

    color:#aebbb4;

    font-size:11px;
}


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

footer{
    text-align:center;

    padding:25px;

    background:#00140c;

    border-top:1px solid rgba(0,220,90,.2);

    color:#aabbb2;

    font-size:12px;

    letter-spacing:2px;
}

.footer-flag{
    font-size:25px;
    margin-bottom:9px;
}


/* =========================
   RESPONSIVO
========================= */

@media(max-width:1250px){

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

    .product-photo{
        height:430px;
    }

}


@media(max-width:800px){

    .nav{
        height:auto;
        padding:20px 0;
        flex-direction:column;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    .hero{
        min-height:290px;
    }

    .hero-content h1{
        font-size:65px;
    }

    .hero-content h2{
        font-size:26px;
    }

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

    .product-photo{
        height:330px;
    }

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

}


@media(max-width:520px){

    .wrap{
        width:94%;
    }

    nav a{
        font-size:10px;
    }

    .hero{
        min-height:240px;
    }

    .hero-content span{
        font-size:10px;
    }

    .hero-content h1{
        font-size:52px;
    }

    .hero-content h2{
        font-size:20px;
    }

    .hero-content p{
        font-size:11px;
    }

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

    .product-photo{
        height:440px;
    }

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

    .benefit{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

}
/* =========================
   DESTAQUE FRETE GRÁTIS
========================= */

.frete-gratis strong{
    color:#ff2b2b !important;
    font-size:14px;
    font-weight:900;
    text-shadow:
        0 0 6px rgba(255,43,43,.55),
        0 0 12px rgba(255,43,43,.25);
}

.frete-gratis .benefit-icon{
    border-color:#ff2b2b !important;
    color:#ff2b2b !important;
    box-shadow:0 0 12px rgba(255,43,43,.25);
}
/* =========================================
   PÁGINA DE PRODUTO
========================================= */

.product-page{
    background:#f5f5f5;
    color:#111;
}


/* CABEÇALHO */

.product-header{
    background:#001a10;
    border-bottom:3px solid #00a843;
}

.product-nav{
    min-height:76px;

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

.product-logo{
    color:#ffd900;

    font-size:27px;
    font-weight:1000;
    font-style:italic;

    text-decoration:none;

    line-height:.8;
}

.product-logo small{
    display:block;

    color:#fff;

    font-size:9px;

    letter-spacing:2px;

    margin-top:7px;
}

.back-store{
    color:#fff;

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

    text-decoration:none;
}

.back-store:hover{
    color:#00e85e;
}


/* CONTAINER */

.product-detail-wrap{
    width:min(1450px,94%);
    margin:auto;

    padding:25px 0 60px;
}


/* CAMINHO */

.breadcrumb{
    display:flex;
    flex-wrap:wrap;

    gap:9px;

    align-items:center;

    color:#777;

    font-size:12px;

    margin-bottom:25px;
}

.breadcrumb a{
    color:#111;
    text-decoration:none;
}

.breadcrumb strong{
    color:#333;
}


/* LAYOUT */

.product-detail-layout{
    display:grid;

    grid-template-columns:minmax(0,1.55fr) minmax(370px,.7fr);

    gap:45px;

    align-items:start;
}


/* GALERIA */

.detail-gallery{
    display:grid;

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

    gap:14px;
}

.detail-photo{
    background:#eee;

    overflow:hidden;

    min-height:450px;

    border-radius:3px;
}

.detail-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .35s ease;
}

.detail-photo:hover img{
    transform:scale(1.025);
}


/* PAINEL */

.detail-panel{
    position:sticky;

    top:20px;

    background:#fff;

    padding:30px;

    border-radius:5px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);
}


/* DISPONIBILIDADE */

.detail-stock{
    color:#00a843;

    font-size:11px;

    font-weight:900;

    margin-bottom:15px;
}

.detail-tag{
    display:inline-block;

    padding:6px 10px;

    border:1px solid #ddd;

    border-radius:30px;

    font-size:11px;

    margin-bottom:14px;
}


/* NOME */

.detail-panel h1{
    color:#111;

    font-size:30px;

    line-height:1.12;

    margin-bottom:13px;
}


/* AVALIAÇÃO */

.detail-rating{
    color:#111;

    font-size:17px;

    margin:10px 0 23px;
}

.detail-rating span{
    color:#777;

    font-size:11px;

    margin-left:8px;
}


/* PREÇO */

.detail-price{
    color:#111;

    font-size:31px;

    font-weight:1000;
}

.pix-label{
    color:#009b3a;

    font-size:12px;

    font-weight:900;

    margin-top:4px;
}


/* FRETE */

.shipping-box{
    display:flex;

    align-items:center;

    gap:13px;

    background:#f3f8f5;

    border:1px solid #d7e8dc;

    padding:15px;

    margin:23px 0;

    border-radius:5px;
}

.shipping-icon{
    width:43px;
    height:43px;

    border-radius:50%;

    background:#001a10;

    display:flex;

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

    font-size:19px;
}

.shipping-box strong{
    display:block;

    color:#e02020;

    font-size:13px;
}

.shipping-box span{
    display:block;

    color:#555;

    font-size:11px;

    margin-top:3px;
}


/* TAMANHOS */

.option-title{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:13px;
}

.option-title strong{
    font-size:14px;
}

.option-title span{
    color:#777;

    font-size:10px;
}


.size-options{
    display:grid;

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

    gap:8px;

    margin-bottom:22px;
}

.size-box input{
    display:none;
}

.size-box span{
    height:48px;

    border:1px solid #ccc;

    border-radius:4px;

    display:flex;

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

    cursor:pointer;

    font-size:13px;

    font-weight:800;

    transition:.2s;
}

.size-box span:hover{
    border-color:#111;
}

.size-box input:checked + span{
    background:#001a10;

    border-color:#001a10;

    color:#fff;
}


/* QUANTIDADE */

.quantity-area{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:20px 0;
}

.quantity-area label{
    font-size:13px;

    font-weight:900;
}

.quantity-area input{
    width:75px;

    height:43px;

    border:1px solid #bbb;

    border-radius:4px;

    text-align:center;

    font-size:15px;
}


/* BOTÃO */

.detail-buy-btn{
    width:100%;

    border:0;

    padding:18px;

    border-radius:5px;

    cursor:pointer;

    background:
        linear-gradient(
            180deg,
            #00c94e,
            #009b3a
        );

    color:#fff;

    font-size:15px;

    font-weight:1000;

    box-shadow:
        0 7px 18px rgba(0,150,60,.25);

    transition:.2s;
}

.detail-buy-btn:hover{
    filter:brightness(1.1);

    transform:translateY(-2px);
}


/* BENEFÍCIOS */

.detail-benefits{
    margin-top:24px;

    border-top:1px solid #eee;

    padding-top:18px;
}

.detail-benefits > div{
    display:flex;

    align-items:center;

    gap:11px;

    padding:8px 0;
}

.detail-benefits b{
    width:30px;
    height:30px;

    display:flex;

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

    border:1px solid #ddd;

    border-radius:50%;
}

.detail-benefits span{
    display:flex;

    flex-direction:column;

    color:#777;

    font-size:10px;
}

.detail-benefits strong{
    color:#222;

    font-size:11px;

    margin-bottom:2px;
}


/* FOOTER */

.product-footer{
    background:#00140c;

    color:#aebbb4;

    text-align:center;

    padding:24px;

    font-size:10px;

    letter-spacing:2px;
}

.product-footer div{
    font-size:22px;

    margin-bottom:7px;
}


/* RESPONSIVO */

@media(max-width:1000px){

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

    .detail-panel{
        position:static;
    }

}


@media(max-width:650px){

    .product-detail-wrap{
        width:94%;
    }

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

    .detail-photo{
        min-height:400px;
    }

    .detail-panel{
        padding:21px;
    }

    .detail-panel h1{
        font-size:25px;
    }

    .detail-price{
        font-size:27px;
    }

    .product-logo{
        font-size:21px;
    }

    .back-store{
        font-size:10px;
    }

}
/* ===== AJUSTE PÁGINA DO PRODUTO ===== */

.product-detail{
    display:grid;
    grid-template-columns:minmax(0, 620px) minmax(380px, 470px);
    gap:55px;
    align-items:start;
    justify-content:center;
    max-width:1250px;
    margin:0 auto;
}

.product-gallery{
    width:100%;
}

.product-gallery .main-image{
    width:100%;
    max-width:620px;
    aspect-ratio:1 / 1;
    object-fit:cover;
    display:block;
    border-radius:4px;
}

.product-buy-box{
    width:100%;
    max-width:470px;
}

/* Notebook/telas menores */
@media(max-width:1000px){
    .product-detail{
        grid-template-columns:minmax(0,560px) minmax(350px,430px);
        gap:30px;
    }
}

/* Celular */
@media(max-width:800px){
    .product-detail{
        grid-template-columns:1fr;
        gap:25px;
    }

    .product-gallery .main-image{
        max-width:100%;
    }

    .product-buy-box{
        max-width:100%;
    }
}
/* =========================================
   AJUSTE FINAL - PÁGINA DO PRODUTO
========================================= */

.product-detail-wrap{
    width:min(1400px,94%);
    margin:0 auto;
    padding:25px 0 60px;
}

/* Caminho */
.breadcrumb{
    max-width:1250px;
    margin:0 auto 25px;
}

/* Foto + painel */
.product-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,620px) minmax(380px,470px);
    gap:55px;
    align-items:start;
    justify-content:center;
}

/* GALERIA */
.detail-gallery{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.detail-photo{
    width:100%;
    overflow:hidden;
    background:#f1f1f1;
    border-radius:5px;
}

.detail-photo.main-photo{
    grid-column:1 / -1;
}

.detail-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Primeira imagem maior e quadrada */
.detail-photo.main-photo{
    height:620px;
}

.detail-photo.main-photo img{
    object-fit:cover;
}

/* Imagens secundárias */
.detail-photo:not(.main-photo){
    height:300px;
}

/* PAINEL DE COMPRA */
.detail-panel{
    width:100%;
    max-width:470px;
    padding:32px;

    background:#fff;
    color:#111;

    border-radius:8px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.12);

    position:sticky;
    top:25px;
}

/* Título */
.detail-panel h1{
    font-size:30px;
    line-height:1.08;
    margin:18px 0;
}

/* Preço */
.detail-price{
    font-size:34px;
    font-weight:900;
    margin-top:25px;
}

/* Botão */
.detail-buy-btn{
    width:100%;
    min-height:55px;

    background:#00b947;
    color:#fff;

    border:0;
    border-radius:5px;

    font-size:15px;
    font-weight:900;

    cursor:pointer;

    margin-top:20px;

    box-shadow:0 8px 18px rgba(0,185,71,.20);
}

.detail-buy-btn:hover{
    background:#009e3d;
}

/* RESPONSIVO */
@media(max-width:1000px){

    .product-detail-layout{
        grid-template-columns:minmax(0,520px) minmax(350px,430px);
        gap:30px;
    }

    .detail-photo.main-photo{
        height:520px;
    }

}

@media(max-width:800px){

    .product-detail-wrap{
        width:94%;
    }

    .product-detail-layout{
        grid-template-columns:1fr;
        gap:25px;
    }

    .detail-panel{
        max-width:none;
        position:static;
    }

    .detail-photo.main-photo{
        height:auto;
        aspect-ratio:1/1;
    }

    .detail-photo:not(.main-photo){
        height:auto;
        aspect-ratio:1/1;
    }

}
/* =========================================
   CHECKOUT
========================================= */

.checkout-page{
    background:#f5f6f5;
    color:#111;
    min-height:100vh;
}

.checkout-header{
    height:82px;
    background:#001d12;
    border-bottom:3px solid #00b94a;
}

.checkout-header-inner{
    width:min(1180px,92%);
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.checkout-logo{
    color:#ffd900;
    text-decoration:none;
    font-size:27px;
    font-weight:900;
    font-style:italic;
    line-height:.8;
}

.checkout-logo small{
    display:block;
    color:#fff;
    font-size:9px;
    letter-spacing:2px;
    text-align:center;
    margin-top:7px;
}

.checkout-secure{
    color:#fff;
    font-size:12px;
    font-weight:800;
}


/* CONTAINER */

.checkout-container{
    width:min(1180px,92%);
    margin:auto;
    padding:25px 0 60px;
}

.checkout-breadcrumb{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:25px;
    color:#777;
    font-size:12px;
}

.checkout-breadcrumb a{
    color:#555;
    text-decoration:none;
}

.checkout-breadcrumb strong{
    color:#111;
}


/* DUAS COLUNAS */

.checkout-layout{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);
    gap:28px;
    align-items:start;
}


/* CARDS */

.checkout-card{
    background:#fff;
    border:1px solid #e3e5e4;
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,.07);
}

.checkout-form-card{
    padding:34px;
}

.checkout-title{
    margin-bottom:32px;
}

.checkout-title > span{
    color:#00a541;
    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
}

.checkout-title h1{
    font-size:28px;
    margin:7px 0 8px;
}

.checkout-title p{
    color:#777;
    font-size:13px;
}


/* TÍTULO DAS ETAPAS */

.checkout-section-title{
    display:flex;
    align-items:center;
    gap:13px;
    padding-bottom:15px;
    margin-bottom:20px;
    border-bottom:1px solid #eee;
}

.delivery-title{
    margin-top:35px;
}

.checkout-number{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#001d12;
    color:#fff;
    font-weight:900;
}

.checkout-section-title h2{
    font-size:17px;
    margin:0 0 3px;
}

.checkout-section-title p{
    color:#777;
    font-size:11px;
}


/* CAMPOS */

.checkout-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.checkout-fields label{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.checkout-fields label > span{
    font-size:12px;
    font-weight:800;
}

.checkout-fields .field-full{
    grid-column:1 / -1;
}

.checkout-fields input{
    width:100%;
    height:48px;
    padding:0 14px;

    background:#fff;
    color:#111;

    border:1px solid #d6d9d7;
    border-radius:6px;

    font-size:14px;
    outline:none;

    transition:.2s;
}

.checkout-fields input:focus{
    border-color:#00ad45;
    box-shadow:0 0 0 3px rgba(0,173,69,.10);
}

.checkout-fields input::placeholder{
    color:#aaa;
}


/* BOTÃO PIX */

.checkout-pay-btn{
    width:100%;
    height:56px;
    margin-top:30px;

    border:0;
    border-radius:6px;

    background:#00b947;
    color:#fff;

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

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,185,71,.20);

    transition:.2s;
}

.checkout-pay-btn:hover{
    background:#009e3d;
    transform:translateY(-1px);
}

.checkout-protection{
    text-align:center;
    margin-top:13px;
    color:#777;
    font-size:10px;
}


/* =========================================
   RESUMO
========================================= */

.order-summary{
    padding:28px;
    position:sticky;
    top:25px;
}

.order-summary > h2{
    font-size:19px;
    margin-bottom:22px;
}

.summary-product{
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.summary-image{
    width:100px;
    height:100px;
    flex:0 0 100px;
    position:relative;
}

.summary-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:6px;
    border:1px solid #eee;
}

.summary-image > span{
    position:absolute;
    top:-8px;
    right:-8px;

    width:24px;
    height:24px;

    border-radius:50%;

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

    background:#001d12;
    color:#fff;

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

.summary-product-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.summary-product-info > strong{
    font-size:13px;
    line-height:1.35;
}

.summary-product-info small{
    color:#777;
    font-size:11px;
}

.summary-product-info b{
    color:#111;
    font-size:15px;
    margin-top:3px;
}

.summary-divider{
    height:1px;
    background:#e8e8e8;
    margin:23px 0;
}

.summary-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:13px 0;
    font-size:13px;
}

.free-shipping{
    color:#00a541;
}

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

.summary-total span{
    font-size:15px;
    font-weight:800;
}

.summary-total strong{
    font-size:28px;
    font-weight:900;
}

.summary-pix{
    text-align:right;
    margin-top:4px;
    color:#00a541;
    font-size:11px;
    font-weight:900;
}


/* BENEFÍCIOS */

.summary-benefits{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #eee;

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

.summary-benefits > div{
    display:flex;
    align-items:center;
    gap:11px;
}

.summary-benefits > div > b{
    width:32px;
    height:32px;
    flex:0 0 32px;

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

    border:1px solid #ddd;
    border-radius:50%;
}

.summary-benefits span{
    display:flex;
    flex-direction:column;
    color:#888;
    font-size:10px;
}

.summary-benefits span strong{
    color:#222;
    font-size:11px;
    margin-bottom:2px;
}


/* RODAPÉ */

.checkout-footer{
    background:#001d12;
    color:#aaa;
    border-top:1px solid rgba(0,200,80,.2);

    padding:25px;

    text-align:center;
    font-size:11px;
    letter-spacing:2px;
}

.checkout-footer span{
    display:block;
    margin-top:7px;
}


/* RESPONSIVO */

@media(max-width:850px){

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

    .order-summary{
        position:static;
    }

}

@media(max-width:550px){

    .checkout-container{
        width:94%;
    }

    .checkout-form-card,
    .order-summary{
        padding:20px;
    }

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

    .checkout-fields .field-full{
        grid-column:auto;
    }

    .checkout-secure{
        font-size:9px;
    }

    .checkout-title h1{
        font-size:23px;
    }

}