/*
Theme Name: Dom Vittorio
Theme URI: http://domvittorio.com
Author: Anonimo
Author URI: http://google.com/
Description: Tema criado para o site Dom Vittorio
Version: 1.0
*/

/* MENU */
@import url('./css/header.css');

/* WOOCOMMERCE */
@import url('./css/woocommerce.css');
@import url('./css/pagbank.css');
@import url('./css/page-404.css');
@import url('./css/termos-legais.css');
@import url('./css/entrega.css');

/* CARD */
@import url('./css/card-produtos.css');

/* PRODUTO */
@import url('./css/pg-produto.css');

/* INDEX */
@import url('./css/pg-index-carrossel.css');
@import url('./css/pg-index-catalogo.css');

/* CATALOGO */
@import url('./css/pg-catalogo.css');

/* PLANOS DE ASSINATURA */
@import url('./css/pg-assinatura.css');

/* REVISTA DIGITAL */
@import url('./css/pg-revista.css');
@import url('./css/pg-revista-revista.css');

/* CARRINHO */
@import url('./css/pg-carrinho.css');
@import url('./css/pg-carrinho-produtos.css');
@import url('./css/pg-carrinho-resumo.css');
@import url('./css/finalizar-compra.css');


/* FOOTER */
@import url('./css/footer.css');

:root {
    /* Fontes */
    --fonte-serif: "Playfair Display", Georgia, serif;
    --fonte-sans: "Inter", -apple-system, sans-serif;

    /* Cores Base */
    --fundo: hsl(36, 33%, 97%);
    --fundo-2: hsl(0, 0%, 97%);
    --fundo-suave: rgba(250, 248, 245, 0.8);
    --fundo-suave-2: rgba(250, 248, 245, 0.4);
    --fundo-suave-3: rgba(250, 248, 245, 0.3);
    --texto: hsl(0 0% 16%);
    --texto-suave: rgba(41, 41, 41, 0.6);
    --texto-suave-deco: rgba(41, 41, 41, 0.4);
    --texto-suave-bg: rgba(41, 41, 41, 0);
    --texto-suave-bg-2: rgba(61, 48, 48, 0.1);
    --texto-suave-bg-3: rgba(41, 41, 41, 0.85);
    --texto-branco: #ffffffb3;

    /* Cards */
    --cartao: hsl(0, 0%, 100%);
    --barra-resumo: rgba(241, 235, 228, 0.7);
    --cartao-texto: hsl(0 0% 16%);
    --carrossel-blur-1: rgb(41, 41, 41);
    --carrossel-blur-2: rgba(41, 41, 41, 0);

    /* Popup e Modais */
    --janela-flutuante: hsl(0 0% 100%);
    --janela-flutuante-texto: hsl(0 0% 16%);

    /* Cores de Destaque e Ação */
    --primaria: hsl(28 37% 53%);
    --primaria-hexa: #b3845b;
    --primaria-light: hsl(28, 53%, 64%);
    --primaria-05: rgba(179, 132, 91, 0.05);
    --primaria-10: rgba(179, 132, 91, 0.1);
    --primaria-20: rgba(179, 132, 91, 0.2);
    --primaria-30: rgba(179, 132, 91, 0.3);
    --primaria-40: rgba(179, 132, 91, 0.4);
    --primaria-60: rgba(179, 132, 91, 0.6);
    --primaria-80: rgba(179, 132, 91, 0.8);
    --primaria-suave: rgba(180, 126, 90, 0.8);
    --primaria-hover: hsl(28, 35%, 46%);
    --primaria-texto: hsl(36 33% 97%);
    --secundaria: hsl(30 30% 92%);
    --secundaria-suave: rgba(241, 237, 233, 0.5);
    --secundaria-texto: hsl(0 0% 16%);

    /* Elementos Desativados */
    --suave: hsl(30 20% 94%);
    --bg-suave: hsla(27, 15%, 88%, 0.25);
    --suave-texto: hsl(15 5% 40%);
    --suave-texto-2: hsl(17, 3%, 46%);

    /* Ênfase e Alertas */
    --destaque: hsl(28 37% 53%);
    --destaque-texto: hsl(36 33% 97%);
    --destaque-texto-2: rgba(249, 248, 246, 0.5);
    --destaque-texto-3: rgba(249, 248, 246, 0.4);
    --destaque-texto-4: rgba(249, 248, 246, 0.6);
    --destaque-texto-5: rgba(249, 248, 246, 0.1);
    --destaque-texto-6: rgba(249, 248, 246, 0.3);
    --destrutiva: hsl(0 84.2% 60.2%);
    --destrutiva-texto: hsl(0 84.2% 60.2%);
    --destrutiva-texto-bg: hsl(0, 64%, 92%);
    --destrutiva-texto-2: hsl(0 0% 98%);
    --infor-texto: hsl(128, 73%, 28%);
    --infor-texto-bg: hsl(128, 71%, 92%);

    /* Formulários e Bordas */
    --borda: hsl(30 15% 88%);
    --borda-hover: rgb(179 132 91 / 30%);
    --borda-btn: #ffffff4d;
    --entrada: hsl(30 15% 88%);
    --foco-anel: hsl(28 37% 53% / 0.5);

    /* Gráficos */
    --grafico-1: hsl(28 37% 53%);
    --grafico-2: hsl(173 58% 39%);
    --grafico-3: hsl(197 37% 24%);
    --grafico-4: hsl(43 74% 66%);
    --grafico-5: hsl(27 87% 67%);

    /* Barra Lateral (Sidebar) */
    --barra-lateral-fundo: hsl(36 33% 97%);
    --barra-lateral-texto: hsl(0 0% 16%);
    --barra-lateral-primaria: hsl(28 37% 53%);
    --barra-lateral-primaria-texto: hsl(36 33% 97%);
    --barra-lateral-destaque: hsl(30 30% 92%);
    --barra-lateral-destaque-texto: hsl(0 0% 16%);
    --barra-lateral-borda: hsl(30 15% 88%);
    --barra-lateral-foco: hsl(28 37% 53%);

    /* Bordas e Cantos */
    --raio-canto: 0.25rem;

    /* Transição */
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
}

/* Reset */

*,
:before,
:after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    border-color: var(--borda);
    outline-color: var(--foco-anel);
}

html {
    line-height: 1.5;
    tab-size: 4;
    font-family: var(--fonte-sans);
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background-color: var(--fundo);
    color: var(--texto);
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

button,
select {
    text-transform: none;
}

button {
    cursor: pointer;
}

:disabled {
    cursor: default;
}

textarea {
    resize: vertical;
}

img,
svg,
object {
    display: block;
    max-width: 100%;
    height: auto;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

.content {
    display: flex;
    flex-direction: column;

    min-height: 100vh;
    font-family: var(--font-sans);
}

.flex-content {
    flex: 1 1 0%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

/* PAGE TOAST */
.page-toast-externo {
    display: flex;
    flex-direction: column-reverse;

    position: fixed;
    top: 0;

    max-height: 100vh;
    width: 100%;
    top: 1rem;
    max-width: 420px;

    z-index: 100;
}

.page-toast-interno {
    display: flex;
    flex-direction: column-reverse;

    position: fixed;
    top: 0;

    max-height: 100vh;
    width: 100%;
    top: 1rem;
    max-width: 420px;

    z-index: 100;
}

/* SCROLL ANIMADO */
.animar-scroll {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s ease-out;
    animation-fill-mode: backwards;
    animation: active-end 2s forwards, active-transition 1.5s forwards;
}

@keyframes active-end {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes active-transition {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

@media(min-width: 640px) {
    .page-toast-externo {
        bottom: 0;
        right: 0;
        top: auto;
        flex-direction: column;
    }

    .page-toast-interno {
        bottom: 0;
        right: 0;
        top: auto;
        flex-direction: column;
    }
}