/* CSS Document */ 
/*
.print-prod-nomecliente{display:block}
.print-prod-telcliente,
.print-prod-emailcliente,
.print-prod-doccliente,
.print-prod-endcliente{display:none !important}
*/
/*
.col-unit{color:#fff !important;}
*/
/* ===============================
IMPORTAÇÃO
=============================== */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

.fa {
    font-family: FontAwesome !important;
}

/* Importa Bootstrap Icons (Glyphicons) */
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css");

/* Força fonte dos glyphicons */
.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
}


/* ===============================
VARIÁVEIS GLOBAIS
=============================== */
:root {
    --font-principal: 'Roboto', Arial, sans-serif;
}



/* ===============================
RESET DE FONTE GLOBAL
=============================== */
* {
    font-family: var(--font-principal) !important;
}

/* ===============================
CORPO
=============================== */
body {
    font-family: var(--font-principal) !important;
}

/* ===============================
TÍTULOS
=============================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-principal) !important;
    font-weight: 700 !important;
}

/* ===============================
MENU / NAVEGAÇÃO
=============================== */
nav,
nav a,
.menu,
.menu a,
.header a,
.topo a {
    font-family: var(--font-principal) !important;
    font-weight: 600 !important;
}

/* ===============================
PRODUTOS
=============================== */
.produto,
.produto *,
.product,
.product *,
.product-name,
.price,
.preco {
    font-family: var(--font-principal) !important;
}

/* ===============================
FORMULÁRIOS
=============================== */
input,
select,
textarea,
button {
    font-family: var(--font-principal) !important;
}

/* ===============================
FOOTER
=============================== */
footer,
footer * {
    font-family: var(--font-principal) !important;
}

/* ===============================
REMOVER ARCHIVO NARROW
=============================== */
.archivo,
.archivo-narrow {
    font-family: var(--font-principal) !important;
}

[style*="Archivo"] {
    font-family: var(--font-principal) !important;
}

/* =============================
FONTE DO CARRINHO
============================= */

.line2-top > .col-cart .desc-cart {
    height: 10px;
    margin: -10px 0 5px 0;
    font-size: 0.7em !important;
}

/* =============================
FONTE DO CATEGORIA
============================= */
.title-categories {
    font-weight:700 !important;
}
.ln-area {
    font-size: 17px;
    font-weight: 700 !important;
    color:#07a1bc;
}

.ln-categ a, .ln-categ-pai > span, .ln-categ-sub a {
    font-size: 1em !important;
    font-weight: 400 !important;
}

/* =============================
GRID - 960px / 3 CARDS
============================= */
.row-products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 960px;
    margin: 0 auto;
}

/* =============================
CARD
============================= */
.col-product {
    background: #fff !important;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: .3s;
    display: flex;
    flex-direction: column;
}

.col-product:hover {
    transform: translateY(-4px);
}

/* =============================
BOX PRODUCT (ALTURA AUTO)
============================= */
.col-product > .box-product {
    height: auto !important;
    padding: 5px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* =============================
IMAGEM FIXA 275x275
============================= */
.col-product .img-product {
    width: 275px !important;
    height: 275px !important;
    margin: 0 auto 12px auto;
    border-radius: 12px;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* =============================
TÍTULO
============================= */
.col-product .name-product {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin: 8px 0;
    line-height: 1.3;
}

/* =============================
AVALIAÇÃO
============================= */
.stars {
    color: #facc15;
    font-size: 13px;
    margin-bottom: 6px;
}

/* =============================
PREÇO
============================= */
.col-product .valor {
    font-size: 20px;
    font-weight: 700;
    color: #0284c7;
    margin-top: auto;
}

.col-product .valor span {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

/* =============================
BOTÃO - 100% LARGURA
============================= */
.col-product > .box-product > .bot-actions > a {
    margin: 0 auto;
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    background-color:#07a1bc;
}

.tagProduto > .sm-oferta {
    background: red;
    font-size: 15pt;
    font-weight: 900;
    border-radius: 30px;
}

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

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

    .col-product .img-product {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

}