/* =========================================================
   ZENCHESS — CSS PRINCIPAL
   Design System Oficial
   ========================================================= */


/* =========================
   RESET
========================= */

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


    background:#f6f7fb;

    color:#1f2933;

    min-height:100vh;

}



/* =========================
   VARIÁVEIS ZENCHESS
========================= */


:root{

    --dark:#0b1628;

    --dark-2:#172033;

    --gold:#c9a44c;

    --gold-hover:#b8913e;

    --white:#ffffff;

    --gray:#64748b;

    --light:#f6f7fb;

    --border:#e5e7eb;


    --shadow:
    0 15px 40px rgba(0,0,0,.08);


    --radius:18px;

}




a{

    color:inherit;

    text-decoration:none;

}



img{

    max-width:100%;

}





/* =========================================================
   HEADER
========================================================= */


.site-header{


    background:

    linear-gradient(

        135deg,

        #0b1628,

        #111f38

    );


    position:sticky;

    top:0;

    z-index:900;


    box-shadow:

    0 5px 25px rgba(0,0,0,.15);


}




.header-container{


    max-width:1250px;

    margin:auto;


    padding:18px 30px;



    display:flex;

    justify-content:space-between;

    align-items:center;


}




.logo{


    color:white;


    font-size:21px;


    font-weight:800;


    letter-spacing:3px;


}



.logo::before{

    content:"♟ ";

    color:var(--gold);

}




/* MENU */


.main-nav{


    display:flex;


    align-items:center;


    gap:32px;


}



.main-nav a{


    color:white;


    font-size:15px;


    font-weight:500;


    opacity:.9;


    position:relative;


}




.main-nav a::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-8px;



    width:0;


    height:2px;


    background:var(--gold);


    transition:.3s;


}




.main-nav a:hover::after{


    width:100%;


}






/* =========================
   HEADER AÇÕES
========================= */


.header-actions{


    display:flex;


    align-items:center;


    gap:22px;


}





.cart-icon{


    position:relative;


    color:white;


    font-size:22px;


}




.cart-badge{


    position:absolute;


    top:-8px;


    right:-12px;



    background:var(--gold);


    color:white;



    width:20px;


    height:20px;



    display:flex;


    align-items:center;


    justify-content:center;



    font-size:11px;


    border-radius:50%;


}





.user-button{


    width:42px;


    height:42px;



    border-radius:50%;



    border:1px solid rgba(255,255,255,.2);



    background:

    rgba(255,255,255,.08);



    color:white;



    cursor:pointer;


    font-size:18px;



    display:flex;


    align-items:center;


    justify-content:center;



    transition:.25s;


}




.user-button:hover{


    background:var(--gold);


    transform:translateY(-2px);


}







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



.btn-primary{


    display:inline-flex;


    align-items:center;


    justify-content:center;



    padding:13px 28px;



    background:

    linear-gradient(

    135deg,

    var(--gold),

    #d8b75f

    );



    color:white;



    border:none;


    border-radius:999px;



    font-weight:700;


    cursor:pointer;



    transition:.25s;


}




.btn-primary:hover{


    transform:translateY(-2px);


    box-shadow:

    0 12px 25px rgba(201,164,76,.35);


}





.btn-secondary{


    padding:12px 25px;


    background:var(--dark);


    color:white;


    border-radius:999px;


}






/* =========================================================
   CONTAINERS PADRÃO
========================================================= */


.container{


    max-width:1200px;


    margin:auto;


    padding:50px 25px;


}







/* =========================================================
   FOOTER
========================================================= */


.site-footer{


    margin-top:70px;


    background:var(--dark);


    color:white;


    text-align:center;


    padding:35px 20px;


    font-size:14px;


}



.site-footer strong{


    color:var(--gold);


}/* =========================================================
   SEÇÕES PADRÃO
========================================================= */


.cards-section{


padding:

80px 40px;


max-width:1300px;


margin:

0 auto;


}




.cards-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:35px;


align-items:stretch;


}






/* =========================
   CARD PADRÃO ZENCHESS
========================= */



.card{


    background:white;



    border-radius:22px;



    overflow:hidden;



    box-shadow:

    var(--shadow);



    transition:.3s ease;



    position:relative;


}




.card:hover{


    transform:

    translateY(-8px);



    box-shadow:

    0 25px 55px rgba(0,0,0,.12);


}






.card-image{


    width:100%;


    height:240px;



    object-fit:cover;



    background:#eee;


}




.card-info{


    padding:22px;


}




.card-title{


    font-size:20px;



    color:var(--dark);



    font-weight:800;



    margin-bottom:10px;


}






.card-description{


    color:var(--gray);



    font-size:14px;



    line-height:1.6;



    margin-bottom:18px;


}







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


.product-price{


    color:var(--dark);



    font-size:22px;



    font-weight:800;


}



.product-price::before{


    color:var(--gold);


}









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



.category-title{


    text-align:center;



    margin-bottom:45px;



    font-size:34px;



    color:var(--dark);



    font-weight:800;


}





.category-title::after{


    content:"";



    display:block;



    width:70px;



    height:4px;



    background:var(--gold);



    border-radius:20px;



    margin:15px auto 0;


}






.empty-message{


    background:white;



    padding:40px;



    border-radius:20px;



    text-align:center;



    box-shadow:var(--shadow);



    color:var(--gray);



}








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



.hero{


    padding:

    100px 25px;



    text-align:center;


}





.hero h1{


    font-size:46px;



    color:var(--dark);



    margin-bottom:18px;


}





.hero h1 span{


    color:var(--gold);


}





.hero p{


    max-width:700px;



    margin:auto;



    font-size:18px;



    color:var(--gray);



    line-height:1.7;


}








/* =========================================================
   CARD DE PRODUTO
========================================================= */



.product-card{


    background:white;



    border-radius:22px;



    overflow:hidden;



    box-shadow:var(--shadow);



    transition:.3s;


}





.product-card:hover{


    transform:

    translateY(-8px);


}







.product-card img{


    width:100%;



    height:260px;



    object-fit:cover;


}






.product-card-content{


    padding:22px;


}






.product-card h3{


    color:var(--dark);



    margin-bottom:8px;



    font-size:19px;


}






.product-card p{


    color:var(--gray);



    font-size:14px;



    margin-bottom:15px;


}









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



@media(max-width:1000px){


.cards-grid{


grid-template-columns:

repeat(2,1fr);


}



}




@media(max-width:650px){


.cards-grid{


grid-template-columns:1fr;


}



.hero h1{


font-size:34px;


}



}/* =========================================================
   PÁGINA DO PRODUTO — ZENCHESS
========================================================= */


.product-page{

    padding:70px 25px;

}



.product-wrapper{


    max-width:1250px;


    margin:auto;



    display:grid;



    grid-template-columns:

    1fr 1fr;



    gap:55px;



    align-items:start;


}






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


.product-gallery{


    background:white;


    padding:25px;


    border-radius:24px;


    box-shadow:var(--shadow);


}





.product-main-image{


    width:100%;


    max-height:520px;


    object-fit:contain;


    border-radius:18px;



    transition:.3s;


}





.product-main-image:hover{


    transform:scale(1.04);


}







.product-thumbs{


    margin-top:20px;



    display:flex;



    gap:14px;



}



.product-thumb{


    width:75px;



    height:75px;



    object-fit:cover;



    border-radius:14px;



    cursor:pointer;



    border:2px solid transparent;



    transition:.2s;


}





.product-thumb:hover{


    border-color:var(--gold);



    transform:translateY(-3px);


}










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


.product-info{


    background:white;



    padding:35px;



    border-radius:24px;



    box-shadow:var(--shadow);


}






.product-title{


    font-size:34px;



    color:var(--dark);



    margin-bottom:15px;


}






.product-short-desc{


    color:var(--gray);



    line-height:1.7;



    margin-bottom:20px;


}






.product-rating{


    margin:15px 0;


}





.stars{


    color:#eab308;



    letter-spacing:3px;


}





.rating-count{


    color:var(--gray);



    font-size:14px;


}







.product-price{


    font-size:42px;



    margin:25px 0;



    color:var(--dark);


}









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



.frete-box{


    margin-top:25px;



    background:#f8fafc;



    padding:20px;



    border-radius:18px;


}






.frete-box label{


    display:block;



    margin-bottom:10px;



    font-weight:700;



    color:var(--dark);


}






.frete-input{


    display:flex;



    gap:12px;


}






.frete-input input{


    flex:1;



    padding:14px;



    border-radius:14px;



    border:1px solid var(--border);


}






.frete-input button{


    padding:0 22px;



    border-radius:14px;



    border:none;



    background:var(--dark);



    color:white;



    cursor:pointer;


}









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


.cart-container{


    max-width:1200px;



    margin:50px auto;



    padding:25px;


}






.cart-container h1{


    margin-bottom:30px;



    color:var(--dark);



    font-size:34px;


}








.cart-table{ 


    width:100%;



    border-collapse:collapse;



    background:white;



    border-radius:24px;



    overflow:hidden;



    box-shadow:var(--shadow);


}







.cart-table th{


    background:#f8fafc;



    color:var(--dark);



    padding:18px;



    text-align:left;


}






.cart-table td{


    padding:20px;



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


}








.cart-product{


    display:flex;



    align-items:center;



    gap:18px;


}






.cart-image{


    width:90px;



    height:90px;



    object-fit:cover;



    border-radius:18px;



    background:#eee;


}








/* QUANTIDADE */


.qty-box{


    display:flex;



    align-items:center;



    gap:10px;


}





.qty-btn{


    width:38px;



    height:38px;



    border-radius:50%;



    border:none;



    background:var(--dark);



    color:white;



    font-size:18px;



    cursor:pointer;



    transition:.2s;


}






.qty-btn:hover{


    background:var(--gold);


}






.qty-input{


    width:55px;



    height:38px;



    border:1px solid var(--border);



    border-radius:12px;



    text-align:center;



    font-weight:700;


}






.remove-item{


    font-size:22px;



    opacity:.7;



    transition:.2s;


}





.remove-item:hover{


    opacity:1;


}








/* ===============================
   TOTAL CARRINHO PREMIUM
================================ */


.cart-total-area{


background:white;


border-radius:28px;


box-shadow:var(--shadow);


padding:35px;


margin-top:35px;


display:flex;


align-items:center;


justify-content:space-between;


gap:60px;


}







.cart-total-area h3{


    font-size:24px;



    color:var(--dark);


}


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

@media(max-width:850px){

.cart-container{

    padding:18px;

}

.cart-container h1{

    font-size:28px;

    text-align:center;

}

/* tabela */

.cart-table{

    display:block;

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

    border-radius:18px;

}

.cart-table{

    min-width:650px;

}

/* produto */

.cart-product{

    gap:12px;

    min-width:180px;

}

.cart-image{

    width:65px;

    height:65px;

    border-radius:12px;

}

.cart-product span{

    font-size:14px;

    line-height:1.4;

}

/* quantidade */

.qty-box{

    gap:6px;

}

.qty-btn{

    width:32px;

    height:32px;

    font-size:16px;

}

.qty-input{

    width:42px;

    height:32px;

}

/* total */

.cart-total-area{

    flex-direction:column;

    gap:25px;

    padding:22px;

}

.cart-final{

    width:100%;

    text-align:center;

}

.cart-final .btn-primary{

    width:100%;

}

/* frete */

.free-shipping-box{

    width:100%;

}

.shipping-progress{

    width:100%;

    max-width:100%;

    overflow:hidden;

}

.shipping-fill{

    max-width:100%;

}

.pawn-marker{

    right:-8px;

}

.shipping-values{

    width:100%;

    display:flex;

    justify-content:space-between;

    font-size:14px;

}

/* evita textos enormes */

.cart-total-area p{

    word-break:break-word;

}

}

}/* =========================================================
   ÁREA DO USUÁRIO — ZENCHESS
========================================================= */


.account-container,
.orders-container,
.checkout{

    max-width:1200px;

    margin:60px auto;

    padding:25px;

}




.account-container h1,
.orders-container h1,
.checkout h1{

    color:var(--dark);

    font-size:34px;

    margin-bottom:35px;

}





/* =========================================================
   MINHA CONTA
========================================================= */


.account-card{


    background:white;


    border-radius:24px;


    padding:35px;


    box-shadow:var(--shadow);


    margin-bottom:25px;

}





.account-card h2{


    color:var(--dark);


    margin-bottom:15px;


}





.account-info{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:20px;

}





.account-info div{


    background:#f8fafc;


    padding:18px;


    border-radius:16px;

}





.account-info span{


    display:block;


    color:var(--gray);


    font-size:14px;


    margin-bottom:5px;

}









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


.orders-list{


    display:flex;


    flex-direction:column;


    gap:22px;

}






.order-card{


    background:white;


    border-radius:24px;


    padding:28px;


    box-shadow:var(--shadow);


    transition:.25s;

}





.order-card:hover{


    transform:translateY(-5px);

}





.order-header{


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:20px;

}






.order-number{


    font-size:20px;


    font-weight:800;


    color:var(--dark);

}






.order-date{


    color:var(--gray);


    font-size:14px;

}






.order-info{


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;

}







.order-total{


    font-size:22px;


    font-weight:800;


    color:var(--dark);

}









/* STATUS */


.badge{


    display:inline-flex;


    padding:8px 15px;


    border-radius:999px;


    font-size:13px;


    font-weight:700;

}





.badge.success{


    background:#dcfce7;


    color:#166534;

}




.badge.warning{


    background:#fef3c7;


    color:#92400e;

}




.badge.danger{


    background:#fee2e2;


    color:#991b1b;

}








/* =========================================================
   ENDEREÇOS
========================================================= */


.address-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;

}







.address-card{


    display:block;


    background:white;


    padding:28px;


    border-radius:24px;


    box-shadow:var(--shadow);


    border:2px solid transparent;


    cursor:pointer;


    transition:.25s;

}







.address-card:hover{


    border-color:var(--gold);


    transform:translateY(-5px);

}






.address-card input{


    margin-bottom:15px;

}





.address-card h3{


    color:var(--dark);


    margin-bottom:12px;

}





.address-card p{


    color:var(--gray);


    line-height:1.6;

}









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


.checkout form{


    background:white;


    padding:35px;


    border-radius:26px;


    box-shadow:var(--shadow);

}





.checkout h2{


    color:var(--dark);


    margin:


    25px 0 20px;

}







.checkout-summary{


    margin-top:30px;


    background:#f8fafc;


    padding:25px;


    border-radius:20px;

}







.checkout-summary div{


    display:flex;


    justify-content:space-between;


    margin-bottom:15px;


    color:var(--gray);

}






.checkout-summary strong{


    color:var(--dark);


    font-size:22px;

}








/* =========================================================
   FORMULÁRIOS
========================================================= */


input,
textarea,
select{


    width:100%;


    padding:14px 16px;


    border-radius:14px;


    border:1px solid var(--border);


    outline:none;


    transition:.2s;


    font-family:inherit;

}





input:focus,
textarea:focus,
select:focus{


    border-color:var(--gold);


    box-shadow:

    0 0 0 3px rgba(201,164,76,.15);

}








/* RESPONSIVO */


@media(max-width:900px){


.address-grid,
.account-info{


grid-template-columns:1fr;


}



.order-info{


flex-direction:column;


align-items:flex-start;


}


}/* =========================================================
   USER DRAWER — ZENCHESS PREMIUM
========================================================= */


.user-drawer{

    position:fixed;

    top:0;

    right:-420px;


    width:380px;

    max-width:92%;

    height:100vh;


    background:white;


    z-index:9999;


    padding:28px;


    box-shadow:

    -15px 0 50px rgba(0,0,0,.18);


    transition:.35s ease;


    overflow-y:auto;

}



.user-drawer.active{

    right:0;

}



/* TOPO */


.drawer-header{


    display:flex;


    align-items:center;


    justify-content:space-between;


    margin-bottom:30px;

}




.drawer-header h3{


    font-size:24px;


    font-weight:800;


    color:var(--dark);

}




.drawer-header button{


    width:38px;

    height:38px;


    border-radius:50%;


    border:none;


    background:#f1f5f9;


    cursor:pointer;


    font-size:18px;


    transition:.2s;

}



.drawer-header button:hover{


    background:var(--dark);


    color:white;

}







/* BLOCO USUÁRIO */


.drawer-user{


    background:

    linear-gradient(

        135deg,

        var(--dark),

        var(--dark-2)

    );



    color:white;


    border-radius:26px;


    padding:32px 20px;


    text-align:center;


    margin-bottom:30px;


}




/* NÃO USA FOTO/LETRA */
.drawer-avatar{


    width:75px;


    height:75px;


    margin:

    0 auto 18px;



    border-radius:50%;


    background:

    rgba(201,164,76,.15);



    display:flex;


    align-items:center;


    justify-content:center;


}




.drawer-avatar::before{


    content:"♟";


    color:var(--gold);


    font-size:42px;

}




.drawer-avatar{

    font-size:0;

}




.drawer-user h4{


    font-size:20px;


    margin-bottom:6px;


    font-weight:800;

}




.drawer-user span{


    color:#d1d5db;


    font-size:14px;

}









/* MENU */


.drawer-content{


    display:flex;


    flex-direction:column;

}




.drawer-menu{


    display:flex;


    flex-direction:column;


    gap:14px;

}





.drawer-item{


    width:100%;


    min-height:55px;


    display:flex;


    align-items:center;


    gap:12px;



    padding:

    0 18px;



    background:#f8fafc;



    border-radius:18px;



    color:var(--dark);



    font-weight:700;



    text-decoration:none;



    transition:.25s;



}





.drawer-item:hover{


    background:var(--dark);


    color:white;


    transform:

    translateX(-6px);

}






.drawer-item.primary{


    justify-content:center;


    background:var(--gold);


    color:white;

}






.drawer-item.logout{


    margin-top:25px;


    background:#fff1f2;


    color:#b91c1c;

}





.drawer-item.logout:hover{


    background:#b91c1c;


    color:white;

}










/* =========================================================
   ANIMAÇÕES GERAIS
========================================================= */


.card,
.product-card,
.order-card,
.address-card,
.cart-table,
.checkout form{


    animation:

    fadeUp .35s ease;

}





@keyframes fadeUp{


from{


opacity:0;


transform:

translateY(15px);


}



to{


opacity:1;


transform:

translateY(0);


}



}









/* =========================================================
   MOBILE FINAL
========================================================= */



@media(max-width:768px){



.header-container{


    flex-direction:column;


    gap:20px;

}




.main-nav{


    flex-wrap:wrap;


    justify-content:center;


    gap:18px;

}




.cart-total-area{


    flex-direction:column;


    align-items:stretch;

}



.btn-primary{


    width:100%;

}




.product-title{


    font-size:28px;

}




}




@media(max-width:500px){



.user-drawer{


    width:100%;


    right:-100%;

}



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


.cards-section{

padding:

180px 40px 90px;


max-width:1300px;


margin:

0 auto;

}



.cart-table{


    display:block;


    overflow-x:auto;

}



}/* =====================================================
   AJUSTES FINAIS ZENCHESS — POLIMENTO
===================================================== */


/* ==========================
   CENTRALIZA PÁGINAS
========================== */

main,
.page-container,
.content-page,
.community,
.contact,
.tournaments,
.product-page{

    max-width:1200px;

    margin:0 auto;

    padding:50px 25px;

}


/* títulos das páginas */

h1,
.page-title{

    text-align:center;

    color:var(--dark);

    margin-bottom:35px;

}



/* ==========================
   HOME - CARDS PRINCIPAIS
========================== */


.home-cards,
.features,
.home-grid{

    max-width:1200px;

    margin:50px auto;


    display:grid;


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


    gap:35px;

}



.home-cards .card,
.features .card,
.home-grid .card{


    min-height:300px;


    padding:35px;


    text-align:center;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;

}



.home-cards .card h3,
.features .card h3{


    font-size:26px;


    margin-bottom:15px;


}




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


.category-card,
.category-item{


    text-align:center;


}


.category-card img,
.category-item img{


    margin:auto;


    display:block;


}




.category-card h3,
.category-item h3{


    text-align:center;


    margin-top:15px;


}








/* ==========================
   TORNEIOS
========================== */


.tournament-detail,
.tournament-page{


    max-width:1000px;


    margin:50px auto;


    background:white;


    padding:35px;


    border-radius:24px;


    box-shadow:var(--shadow);


}




.tournament-detail img,
.tournament-page img{


    width:100%;


    max-height:420px;


    object-fit:cover;


    border-radius:20px;


    margin-bottom:30px;


}





.tournament-detail p,
.tournament-page p{


    text-align:center;


    line-height:1.7;


}









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


.product-wrapper{


    align-items:center;


}




.product-info{


    display:flex;


    flex-direction:column;


    gap:18px;


}




.product-info form{


    margin-top:20px;


}




.product-info .btn-primary,
.product-info button{


    width:100%;


    height:55px;


    font-size:17px;


}





.product-main-image{


    max-height:450px;


}









/* ==========================
   CONTATO / COMUNIDADE
========================== */


.contact,
.community{


    text-align:center;


}




.contact > *,
.community > *{


    margin-left:auto;


    margin-right:auto;


}




.contact form{


    max-width:650px;


    background:white;


    padding:35px;


    border-radius:24px;


    box-shadow:var(--shadow);


}









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


@media(max-width:800px){


.home-cards,
.features,
.home-grid{


grid-template-columns:1fr;


}



}/* ===============================
   HOME FINAL
================================ */

.home-card{

min-height:330px;

padding:40px 30px;


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;


text-align:center;

}


.home-icon{

font-size:46px;

margin-bottom:20px;

}


.home-card h3{

font-size:26px;

color:var(--dark);

margin-bottom:15px;

}


.home-card p{

color:var(--gray);

line-height:1.7;

margin-bottom:25px;

}


.home-card span{

color:var(--gold);

font-weight:800;

}
/* ===============================
   AJUSTE HOME ESPAÇAMENTO
================================ */

.hero{

    padding-bottom:30px;

}


.cards-section{

    padding-top:10px;

}


.home-grid{

    margin-top:0;

}/* ===============================
   BOTÃO CARRINHO PRODUTO
================================ */

.btn-cart{


width:100%;


height:58px;


border:none;


border-radius:999px;


background:

linear-gradient(
135deg,
var(--gold),
#d8b75f
);



color:white;


font-size:17px;


font-weight:800;


cursor:pointer;


margin-top:20px;


transition:.25s;


}



.btn-cart:hover{


transform:translateY(-3px);


box-shadow:

0 15px 35px rgba(201,164,76,.4);


}




.product-buy{


background:white;


border-radius:22px;


margin-top:20px;


}



.product-stock{


font-weight:700;


color:#166534;


margin-bottom:10px;


}/* ===============================
   COMUNIDADE
================================ */


.community-page{


min-height:550px;


display:flex;


align-items:center;


justify-content:center;


padding:50px 20px;


}




.community-card{


max-width:750px;


background:white;


padding:60px 45px;


border-radius:30px;


box-shadow:var(--shadow);


text-align:center;


}




.community-icon{


font-size:60px;


color:var(--gold);


margin-bottom:20px;


}





.community-card h1{


font-size:42px;


margin-bottom:20px;


}





.community-card p{


font-size:18px;


line-height:1.8;


color:var(--gray);


margin-bottom:35px;


}




.community-btn{


display:inline-flex;


align-items:center;


justify-content:center;


height:55px;


padding:0 40px;


background:var(--dark);


color:white;


border-radius:999px;


font-weight:800;


transition:.25s;


}



.community-btn:hover{


background:var(--gold);


transform:translateY(-3px);


}/* ===============================
   CONTATO ZENCHESS FINAL
================================ */


.contact-page{

min-height:650px;

display:flex;

justify-content:center;

align-items:center;

padding:60px 20px;

}



.contact-card{

width:100%;

max-width:720px;


background:white;


padding:55px 50px;


border-radius:32px;


box-shadow:

0 25px 60px rgba(0,0,0,.08);


text-align:center;

}




.contact-icon{


font-size:52px;


color:var(--gold);


margin-bottom:15px;


}



.contact-card h1{


font-size:42px;


margin-bottom:15px;


color:var(--dark);


}



.contact-subtitle{


font-size:19px;


font-weight:600;


margin-bottom:10px;


}



.contact-description{


color:var(--gray);


line-height:1.7;


margin-bottom:35px;


}




.contact-form{


display:flex;


flex-direction:column;


gap:18px;


}



.contact-form input,
.contact-form select,
.contact-form textarea{


height:55px;


border:1px solid #ddd;


border-radius:16px;


padding:0 18px;


font-size:15px;


outline:none;


transition:.2s;


}




.contact-form textarea{


height:140px;


padding-top:18px;


resize:none;


}




.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{


border-color:var(--gold);


box-shadow:

0 0 0 3px rgba(201,164,76,.15);


}






.contact-btn{


height:58px;


border:none;


border-radius:999px;


background:var(--dark);


color:white;


font-size:17px;


font-weight:800;


cursor:pointer;


transition:.25s;


}





.contact-btn:hover{


background:var(--gold);


transform:translateY(-3px);


}/* ===============================
   TORNEIO INDIVIDUAL
================================ */


.tournament-page{

max-width:1200px;

margin:50px auto;

padding:25px;

}



.tournament-title{

font-size:42px;

text-align:center;

margin-bottom:40px;

color:var(--dark);

}



.tournament-wrapper{

display:grid;

grid-template-columns:1fr 420px;

gap:40px;

align-items:start;

}



.tournament-image-box{

background:white;

padding:20px;

border-radius:28px;

box-shadow:var(--shadow);

}



.tournament-image-box img{

width:100%;

height:450px;

object-fit:cover;

border-radius:22px;

}





.tournament-info{

background:white;

padding:35px;

border-radius:28px;

box-shadow:var(--shadow);

}



.tournament-info h2{

margin-bottom:25px;

}



.tournament-detail{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

border-bottom:1px solid #eee;

}



.tournament-detail span{

color:var(--gray);

}



.tournament-buttons{

display:flex;

gap:15px;

margin-top:30px;

}



.tournament-buttons a{

flex:1;

}





.tournament-description,
.tournament-categories{

background:white;

padding:35px;

border-radius:28px;

box-shadow:var(--shadow);

margin-top:35px;

text-align:center;

}



.tournament-description p{

line-height:1.8;

color:var(--gray);

margin-top:20px;

}




.category-list{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

margin-top:25px;

}



.category-box{

background:#f8fafc;

padding:25px;

border-radius:20px;

display:flex;

flex-direction:column;

gap:10px;

}



.category-box{

font-size:25px;

}


.category-box strong{

font-size:17px;

color:var(--dark);

}



.category-box span{

font-size:14px;

color:var(--gray);

}




@media(max-width:900px){


.tournament-wrapper{

grid-template-columns:1fr;

}


.category-list{

grid-template-columns:1fr;

}


}/* ===============================
   INSCRIÇÃO TORNEIO
================================ */


.registration-page{

min-height:700px;

display:flex;

align-items:center;

justify-content:center;

padding:60px 20px;

}



.registration-card{

width:100%;

max-width:850px;

background:white;

padding:50px;

border-radius:32px;

box-shadow:var(--shadow);

}




.registration-header{

text-align:center;

margin-bottom:35px;

}



.registration-icon{

font-size:55px;

color:var(--gold);

}



.registration-header h1{

font-size:40px;

color:var(--dark);

margin:10px 0;

}



.registration-header p{

color:var(--gray);

font-size:18px;

}




.registration-form{

display:flex;

flex-direction:column;

gap:22px;

}



.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



.form-group label{

display:block;

font-weight:700;

margin-bottom:8px;

color:var(--dark);

}




.terms-box{

display:flex;

align-items:center;

gap:12px;

background:#f8fafc;

padding:18px;

border-radius:18px;

font-weight:600;

cursor:pointer;

}



.terms-box input{

width:18px;

height:18px;

}



.registration-button{

height:58px;

font-size:17px;

}




@media(max-width:750px){

.form-row{

grid-template-columns:1fr;

}

}/* ===============================
   COMPRA PRODUTO FINAL
================================ */


.product-buy{

margin:25px 0;

background:transparent;

padding:0;

}



.product-stock{

font-size:14px;

font-weight:700;

color:#15803d;

margin-bottom:10px;

}



.btn-cart{


width:100%;

max-width:420px;


height:60px;


border:none;


border-radius:18px;


background:

linear-gradient(
135deg,
var(--gold),
#d7b75d
);



color:white;


font-size:17px;


font-weight:800;


cursor:pointer;


box-shadow:

0 12px 30px rgba(201,164,76,.25);


transition:.25s;

}




.btn-cart:hover{


transform:translateY(-3px);


box-shadow:

0 18px 40px rgba(201,164,76,.35);


}/* ===============================
   FRETE GRATIS CARRINHO
================================ */


.free-shipping-box{


background:transparent;


box-shadow:none;


padding:0;


margin:0;


width:450px;


}


.free-success{

color:#15803d !important;

font-size:17px !important;

}



.shipping-progress{

height:14px;

background:#e5e7eb;

border-radius:50px;

overflow:visible;

position:relative;

}



.shipping-fill{

height:100%;

background:linear-gradient(
90deg,
var(--gold),
#e7c96d
);

border-radius:50px;

position:relative;

transition:.4s ease;

}



.pawn-marker{

position:absolute;

right:-13px;

top:-18px;

font-size:32px;

color:var(--gold);

filter:

drop-shadow(
0 4px 5px rgba(0,0,0,.25)
);

}



.shipping-values{

display:flex;

justify-content:space-between;

margin-top:12px;

font-size:13px;

font-weight:700;

color:var(--gray);

}.cart-final{


display:flex;


align-items:center;


gap:35px;


}



.cart-final h3{


font-size:28px;


font-weight:900;


color:var(--dark);


}/* ===============================
   USER DRAWER ZENCHESS
================================ */


.user-drawer{

position:fixed;

right:-420px;

top:0;

width:380px;

height:100vh;

background:white;

z-index:9999;

padding:30px;

box-shadow:

-20px 0 50px rgba(0,0,0,.15);

transition:.35s ease;

}



.user-drawer.active{

right:0;

}





.drawer-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}



.drawer-header h3{

font-size:24px;

color:var(--dark);

}



.drawer-header button{

border:none;

background:#f1f5f9;

width:35px;

height:35px;

border-radius:50%;

cursor:pointer;

font-size:20px;

}





.drawer-content{

text-align:center;

}





.drawer-avatar{

width:80px;

height:80px;

background:

linear-gradient(
135deg,
var(--dark),
#15233a
);

color:var(--gold);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

margin:

0 auto 18px;

box-shadow:var(--shadow);

}





.drawer-profile h2{

font-size:26px;

color:var(--dark);

}



.drawer-profile span{

color:var(--gray);

font-weight:600;

}




.drawer-menu{

margin-top:40px;

display:flex;

flex-direction:column;

gap:14px;

}




.drawer-menu a{


height:55px;


padding:0 20px;


border-radius:18px;


display:flex;


align-items:center;


gap:15px;


text-decoration:none;


font-size:16px;


font-weight:700;


color:var(--dark);


background:#f8fafc;


transition:.25s;

}




.drawer-menu a:hover{


background:var(--dark);


color:white;


transform:translateX(-5px);


}



.drawer-menu span{

font-size:22px;

}




.logout-link{

color:#dc2626!important;

}




.logout-link:hover{

background:#dc2626!important;

color:white!important;

}





.drawer-btn{

display:flex;

height:55px;

align-items:center;

justify-content:center;

border-radius:18px;

margin-top:15px;

font-weight:800;

text-decoration:none;

background:#f8fafc;

color:var(--dark);

}



.drawer-btn.primary{

background:var(--gold);

color:white;

}/* ===============================
   MINHA CONTA ZENCHESS
================================ */


.account-page{

min-height:700px;

display:flex;

align-items:center;

justify-content:center;

padding:80px 20px;

}



.account-card{


width:100%;

max-width:800px;


background:white;


border-radius:35px;


padding:55px;


box-shadow:var(--shadow);


}





.account-header{


text-align:center;


margin-bottom:40px;


}



.account-avatar{


width:90px;


height:90px;


border-radius:50%;


background:

linear-gradient(
135deg,
var(--dark),
#15233a
);


display:flex;


align-items:center;


justify-content:center;


font-size:45px;


color:var(--gold);


margin:

0 auto 20px;


}





.account-header h1{


font-size:34px;


color:var(--dark);


}




.account-header p{


font-weight:700;


color:var(--gray);


}








.account-info{


display:flex;


flex-direction:column;


gap:18px;


}





.account-item{


background:#f8fafc;


padding:22px;


border-radius:20px;


display:flex;


align-items:center;


justify-content:space-between;


}





.account-item span{


font-weight:700;


color:var(--gray);


}



.account-item strong{


color:var(--dark);


}








.account-actions{


margin-top:35px;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:18px;


}






.account-btn{


height:55px;


display:flex;


align-items:center;


justify-content:center;


border-radius:18px;


background:var(--dark);


color:white;


font-weight:800;


text-decoration:none;


transition:.25s;


}






.account-btn:hover{


background:var(--gold);


transform:translateY(-3px);


}






@media(max-width:700px){


.account-actions{


grid-template-columns:1fr;


}



.account-item{


flex-direction:column;


gap:8px;


}



}/* ===============================
   ALTERAR SENHA
================================ */


.password-page{

min-height:650px;

display:flex;

align-items:center;

justify-content:center;

padding:80px 20px;

}



.password-card{

width:100%;

max-width:600px;

background:white;

padding:50px;

border-radius:32px;

box-shadow:var(--shadow);

}



.password-header{

text-align:center;

margin-bottom:35px;

}



.password-header h1{

font-size:36px;

}



.password-header p{

color:var(--gray);

font-weight:600;

}





.password-form{

display:flex;

flex-direction:column;

gap:22px;

}



.alert-error{

background:#fee2e2;

color:#991b1b;

padding:15px;

border-radius:15px;

font-weight:700;

margin-bottom:20px;

}



.alert-success{

background:#dcfce7;

color:#166534;

padding:15px;

border-radius:15px;

font-weight:700;

margin-bottom:20px;

}/* ===============================
   MEUS TORNEIOS
================================ */


.user-tournaments{

max-width:1100px;

margin:100px auto;

padding:20px;

}


.user-tournaments h1{

text-align:center;

font-size:42px;

margin-bottom:40px;

}



.user-tournament-grid{

display:flex;

flex-direction:column;

gap:25px;

}



.user-tournament-card{

background:white;

border-radius:28px;

padding:25px;

box-shadow:var(--shadow);

display:flex;

gap:25px;

align-items:center;

}



.user-tournament-card img{

width:170px;

height:120px;

object-fit:cover;

border-radius:20px;

}



.status-badge{

display:inline-block;

margin-top:15px;

padding:8px 18px;

background:var(--gold);

border-radius:20px;

font-weight:800;

color:white;

}



.empty-card{

background:white;

border-radius:30px;

padding:60px;

box-shadow:var(--shadow);

text-align:center;

}


.empty-card{

font-size:40px;

}/* ===============================
   AVISO ZENCHESS
================================ */

.notice-page{

min-height:650px;

display:flex;

align-items:center;

justify-content:center;

padding:50px;

}


.notice-card{

background:white;

max-width:550px;

width:100%;

padding:55px;

border-radius:32px;

box-shadow:var(--shadow);

text-align:center;

}


.notice-icon{

font-size:60px;

color:var(--gold);

margin-bottom:20px;

}


.notice-card h1{

font-size:34px;

margin-bottom:20px;

}


.notice-card p{

font-size:17px;

color:var(--gray);

line-height:1.7;

}


.notice-card a{

margin-top:35px;

display:inline-flex;

height:55px;

padding:0 45px;

align-items:center;

background:var(--dark);

color:white;

border-radius:999px;

font-weight:800;

}


.notice-card a:hover{

background:var(--gold);

}/* ===============================
   LOGIN / CADASTRO ZENCHESS FINAL
================================ */

.auth-page{

min-height:750px;

display:flex;

align-items:center;

justify-content:center;

padding:100px 20px;

}



.auth-card{

width:100%;

max-width:520px;

background:#fff;

border-radius:35px;

padding:55px;

box-shadow:0 20px 60px rgba(0,0,0,.12);

text-align:center;

}



.auth-logo{

width:90px;

height:90px;

border-radius:50%;

background:#0f172a;

display:flex;

align-items:center;

justify-content:center;

font-size:45px;

color:#c9a44c;

margin:0 auto 25px;

}



.auth-card h1{

font-size:38px;

font-weight:900;

color:#0f172a;

margin-bottom:10px;

}



.auth-subtitle{

font-size:16px;

color:#64748b;

font-weight:600;

margin-bottom:35px;

}




.auth-form{

display:flex;

flex-direction:column;

gap:22px;

}



.auth-form .form-group{

text-align:left;

}



.auth-form label{

font-size:14px;

font-weight:800;

color:#0f172a;

}



.auth-form input{

width:100%;

height:58px;

border:none;

outline:none;

border-radius:18px;

background:#f8fafc;

padding:0 20px;

font-size:15px;

margin-top:8px;

transition:.25s;

}



.auth-form input:focus{

box-shadow:0 0 0 3px rgba(201,164,76,.3);

}



.auth-button{

width:100%;

height:60px;

border:none;

border-radius:18px;

margin-top:10px;

background:linear-gradient(
135deg,
#c9a44c,
#d8bb65
);

font-size:17px;

font-weight:900;

color:white;

cursor:pointer;

transition:.25s;

}



.auth-button:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(201,164,76,.35);

}



.auth-footer{

margin-top:35px;

display:flex;

justify-content:center;

align-items:center;

gap:8px;

font-size:15px;

color:#64748b;

}



.auth-footer a{

font-weight:900;

color:#c9a44c;

text-decoration:none;

}



.auth-error{

background:#fee2e2;

color:#991b1b;

border-radius:16px;

padding:15px;

font-weight:700;

margin-bottom:25px;

}/* ===============================
   INSCRIÇÃO TORNEIO
================================ */


.registration-page{

min-height:800px;

display:flex;

justify-content:center;

align-items:center;

padding:90px 20px;

}



.registration-card{

background:white;

width:100%;

max-width:650px;

padding:55px;

border-radius:35px;

box-shadow:var(--shadow);

}



.registration-header{

text-align:center;

margin-bottom:35px;

}


.registration-header h1{

font-size:38px;

}



.registration-header p{

color:var(--gray);

font-weight:700;

}



.registration-form{

display:flex;

flex-direction:column;

gap:20px;

}



.rules-box{

margin-top:15px;

background:#f8fafc;

padding:25px;

border-radius:22px;

}



.rules-box h3{

margin-bottom:15px;

}



.rules-btn{

height:50px;

padding:0 25px;

display:inline-flex;

align-items:center;

background:var(--dark);

color:white;

border-radius:15px;

font-weight:800;

text-decoration:none;

margin-bottom:20px;

}



.rules-btn:hover{

background:var(--gold);

}



.accept-rules{

display:flex;

gap:12px;

align-items:center;

font-weight:700;

color:var(--dark);

}



.accept-rules input{

width:18px;

height:18px;

}/* ===============================
   MEUS PEDIDOS ZENCHESS
================================ */

.orders-page{

padding:70px 8%;

min-height:70vh;

}



.orders-header{

text-align:center;

margin-bottom:50px;

}



.orders-header h1{

font-size:38px;

color:#071426;

}



.orders-header p{

margin-top:10px;

color:#64748b;

}






.orders-grid{

display:grid;

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

gap:28px;

}





.order-card{

background:white;

border-radius:28px;

padding:30px;

box-shadow:
0 20px 45px
rgba(15,23,42,.08);

display:flex;

flex-direction:column;

gap:28px;

transition:.3s;

}





.order-card:hover{

transform:translateY(-5px);

}






.order-top{

display:flex;

justify-content:space-between;

gap:20px;

}



.order-top h3{

font-size:20px;

}



.order-top span{

font-size:14px;

color:#64748b;

}






.order-badge{

height:max-content;

padding:8px 14px;

border-radius:50px;

font-size:13px;

font-weight:700;

}




.order-badge.pending{

background:#fff7db;

color:#a37b00;

}


.order-badge.paid{

background:#dcfce7;

color:#166534;

}



.order-badge.cancelled{

background:#fee2e2;

color:#991b1b;

}







.order-price span{

color:#64748b;

}



.order-price strong{

display:block;

margin-top:5px;

font-size:30px;

color:#071426;

}






.order-actions{

margin-top:auto;

display:flex;

gap:12px;

}



.order-actions a{

flex:1;

text-align:center;

}





@media(max-width:1100px){


.orders-grid{

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

}


}





@media(max-width:700px){


.orders-grid{

grid-template-columns:1fr;

}


}/* ===============================
 DETALHE PEDIDO
================================ */

.order-detail-page{

padding:70px 8%;

}


.order-detail-header{

text-align:center;

margin-bottom:45px;

}


.order-detail-header h1{

font-size:38px;

color:#071426;

}


.order-detail-header p{

color:#64748b;

}





.order-detail-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

}





.detail-card{

background:white;

border-radius:28px;

padding:30px;

margin-bottom:25px;


box-shadow:
0 20px 45px
rgba(15,23,42,.08);

}




.detail-top{

display:flex;

justify-content:space-between;

align-items:center;

}



.detail-card h2{

margin-bottom:20px;

}





.detail-product{

display:flex;

align-items:center;

gap:20px;

padding:18px 0;

border-bottom:1px solid #e5e7eb;

}



.detail-product img{

width:90px;

height:90px;

object-fit:cover;

border-radius:18px;

background:#f8fafc;

}




.detail-product h3{

font-size:18px;

}



.detail-product p{

color:#64748b;

margin:6px 0;

}





.pay-large{

display:block;

text-align:center;

padding:18px;

border-radius:50px;

}





@media(max-width:900px){


.order-detail-layout{

grid-template-columns:1fr;

}


}/* ==========================
   PAGAMENTO
========================== */


.payment-page{

padding:80px 20px;

display:flex;

justify-content:center;

}


.payment-box{

width:100%;

max-width:520px;

background:white;

border-radius:30px;

padding:40px;

text-align:center;

box-shadow:
0 25px 60px
rgba(15,23,42,.12);

}



.payment-box h1{

font-size:36px;

margin-bottom:30px;

}



.payment-box p{

font-size:18px;

margin:15px 0;

}



.payment-status{

background:#fff7db;

color:#9a6b00;

padding:15px;

border-radius:20px;

font-weight:700;

margin:25px 0;

}



.payment-success{

background:#dcfce7;

color:#166534;

padding:15px;

border-radius:20px;

font-weight:700;

margin-top:25px;

}


.payment-button{

display:block;

margin-top:20px;

}/* =========================
   PIX
========================= */

.pix-page{

padding:80px 20px;

display:flex;

justify-content:center;

}



.pix-card{

width:100%;

max-width:520px;

background:white;

padding:45px;

border-radius:32px;

text-align:center;

box-shadow:
0 25px 60px
rgba(15,23,42,.12);

}



.pix-icon{

font-size:45px;

color:#c9a227;

margin-bottom:15px;

}



.pix-card h1{

font-size:34px;

}



.pix-value{

font-size:30px;

font-weight:800;

margin:25px 0;

color:#071426;

}



.pix-image{

width:230px;

margin:25px auto;

display:block;

}



.pix-card textarea{

width:100%;

height:110px;

resize:none;

border:none;

background:#f8fafc;

border-radius:18px;

padding:15px;

margin:15px 0;

}



.pix-warning{

margin-top:25px;

font-size:14px;

color:#64748b;

}/*==================================================
INTERRUPTOR - ENDEREÇO PRINCIPAL
==================================================*/

.switch-container{

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

    margin:28px 0;

    padding:18px 22px;

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:16px;

}

.switch-container span{

    font-size:16px;

    font-weight:600;

    color:#1b2436;

}

.switch{

    position:relative;

    display:inline-block;

    width:58px;

    height:32px;

}

.switch input{

    display:none;

}

.slider{

    position:absolute;

    inset:0;

    background:#d8d8d8;

    border-radius:50px;

    transition:.30s;

    cursor:pointer;

}

.slider::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    left:4px;

    top:4px;

    border-radius:50%;

    background:white;

    box-shadow:0 3px 8px rgba(0,0,0,.15);

    transition:.30s;

}

.switch input:checked + .slider{

    background:#C59D3D;

}

.switch input:checked + .slider::before{

    transform:translateX(26px);

}

.switch:hover .slider{

    filter:brightness(.97);

}

@media(max-width:600px){

.switch-container{

    padding:15px 18px;

}

.switch-container span{

    font-size:15px;

}

}/* =========================================================
   PRODUTO - MELHORIAS
========================================================= */

/* ---------- Características ---------- */

.product-description{
    margin-top:35px;
}

.description-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:16px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:var(--dark);

    transition:.25s;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.description-toggle:hover{

    border-color:var(--gold);

    color:var(--gold);

}

.description-content{

    display:none;

    margin-top:14px;

    background:#fff;

    border-radius:16px;

    padding:22px;

    border:1px solid #ececec;

    line-height:1.8;

    color:#555;

    white-space:pre-line;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}

.description-content.active{

    display:block;

}



/* ---------- Produtos relacionados ---------- */

.related-products{

    max-width:1300px;

    margin:70px auto;

    padding:0 20px;

}

.related-products h2{

    text-align:center;

    margin-bottom:35px;

    font-size:34px;

    color:var(--dark);

}

.related-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

}

.related-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    text-decoration:none;

    transition:.25s;

    max-width:280px;

    width:100%;

    margin:auto;

}

.related-card:hover{

    transform:translateY(-6px);

}

.related-card img{

    width:100%;

    height:200px;

    object-fit:contain;

    padding:18px;

    background:#fff;

}

.related-info{

    padding:20px;

    text-align:center;

}

.related-info h3{

    color:var(--dark);

    font-size:18px;

    min-height:48px;

    margin-bottom:12px;

}

.related-info .product-price{

    font-size:22px;

    margin-bottom:14px;

}

.related-button{

    display:inline-block;

    padding:10px 18px;

    border-radius:12px;

    background:var(--gold);

    color:#fff;

    font-weight:700;

    transition:.25s;

}

.related-card:hover .related-button{

    background:var(--dark);

}



/* ---------- Responsivo ---------- */

@media(max-width:768px){

.related-grid{

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

gap:18px;

}

.related-card{

max-width:none;

}

.related-card img{

height:140px;

padding:12px;

}

.related-info{

padding:14px;

}

.related-info h3{

font-size:15px;

min-height:38px;

}

.related-info .product-price{

font-size:18px;

}

.description-toggle{

padding:15px;

font-size:15px;

}

}

@media(max-width:480px){

.related-grid{

grid-template-columns:1fr;

}

}