/*
Theme Name: Caverna do Ogro Caolho
Theme URI: https://cavernadoogrocaolho.com.br
Description: Tema sob medida para venda de miniaturas pintadas à mão, cenários 3D e artigos de RPG de mesa. Totalmente compatível com WooCommerce e galerias responsivas.
Version: 1.0.0
Author: Taverna Digital S/A
Author URI: https://cavernadoogrocaolho.com.br
License: GNU GPLv2 or later
Text Domain: caverna-ogro-caolho

Este arquivo define a identidade visual do Ogro Caolho.
Cores Base: Slates profundos, Madeiras escuras, Ambers brilhantes de fogueira.
*/

:root {
    --cor-caverna-fundo: #12100e;       /* Negro Caverna */
    --cor-caverna-piso: #1c1814;        /* Rocha de Fundo */
    --cor-pergaminho: #f4edd2;          /* Papel Envelhecido */
    --cor-madeira: #3d2314;             /* Madeira de Taverna */
    --cor-ogro-olho: #f59e0b;           /* Laranja Fogo (Olho do Ogro) */
    --cor-ogro-olho-hover: #d97706;     /* Laranja Queimado */
    --cor-sangue: #991b1b;              /* Vermelho Crimson */
    --fonte-fantasia: 'Space Grotesk', 'Cinzel', serif;
    --fonte-leitura: 'Inter', sans-serif;
}

body {
    background-color: var(--cor-caverna-fundo);
    color: #e5e7eb;
    font-family: var(--fonte-leitura);
    margin: 0;
    padding: 0;
}

/* Estilizações para RPG e miniaturas */
.ogro-badge-escala {
    background: var(--cor-madeira);
    color: var(--cor-ogro-olho);
    border: 1px solid var(--cor-ogro-olho-hover);
    font-family: var(--fonte-fantasia);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.75rem;
}

.ogro-card-miniatura {
    background-color: var(--cor-caverna-piso);
    border: 1px solid #2d2621;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}

.ogro-card-miniatura:hover {
    transform: translateY(-4px);
    border-color: var(--cor-ogro-olho);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
}

/* ==========================================================================
   CORREÇÃO DO CONFLITO DO TAILWIND COM A BARRA DE ADMINISTRAÇÃO DO WORDPRESS
   ========================================================================== */
#wpadminbar, #wpadminbar * {
    box-sizing: content-box !important;
}
#wpadminbar ul, #wpadminbar li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#wpadminbar .ab-sub-wrapper {
    display: none;
}
#wpadminbar li:hover > .ab-sub-wrapper, 
#wpadminbar li.hover > .ab-sub-wrapper {
    display: block !important;
}
#wpadminbar .quicklinks .ab-sub-wrapper ul {
    display: block !important;
}
#wpadminbar .quicklinks .ab-sub-wrapper ul li {
    display: block !important;
    float: none !important;
}
#wpadminbar .ab-empty-item {
    display: block !important;
}

/* ==========================================================================
   ESTILOS EXCLUSIVOS DO WOOCOMMERCE - TEMA MEDIEVAL ESCURO
   ========================================================================== */

/* Ajustes Gerais de Grid e Layout da Loja (Força alinhamento à esquerda e 4 colunas em telas grandes) */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .products, 
.woocommerce-page .products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
    justify-content: start !important;
}

@media (min-width: 640px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .products, 
    .woocommerce-page .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .products, 
    .woocommerce-page .products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .products, 
    .woocommerce-page .products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }
}

/* Força cada item de produto a agir como um card medieval individual alinhado à esquerda */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    grid-column: auto !important;
    background-color: var(--cor-caverna-piso) !important;
    border: 1px solid #2d2621 !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.woocommerce ul.products li.product:hover, 
.woocommerce-page ul.products li.product:hover {
    border-color: var(--cor-ogro-olho) !important;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15), 0 8px 10px -6px rgba(245, 158, 11, 0.15) !important;
    transform: translateY(-3px) !important;
}

/* Estilo para imagem do produto na listagem */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    border-radius: 6px !important;
    border: 1px solid #2d2621 !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    transition: border-color 0.2s !important;
}

.woocommerce ul.products li.product:hover a img,
.woocommerce-page ul.products li.product:hover a img {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Alinhamento do Título do Produto */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: var(--fonte-fantasia) !important;
    margin: 0.35rem 0 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}

/* Preço na Listagem */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    color: var(--cor-ogro-olho) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin-bottom: 1.25rem !important;
    display: block !important;
    font-family: var(--fonte-leitura) !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--cor-ogro-olho) !important;
    font-weight: 800 !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    margin-right: 0.5rem !important;
}

/* Botões do WooCommerce (Adicionar ao carrinho) */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce .button.wc-forward,
.woocommerce-page .button.wc-forward,
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    background-color: var(--cor-ogro-olho-hover) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 6px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--cor-ogro-olho) !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    margin-top: auto !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce .button.wc-forward:hover,
.woocommerce-page .button.wc-forward:hover,
.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: var(--cor-ogro-olho) !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
    box-shadow: 0 10px 15px -3px rgba(217, 119, 6, 0.3) !important;
}

/* Em promoção (On Sale Badge) */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    background-color: var(--cor-sangue) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    position: absolute !important;
    top: 1.75rem !important;
    left: 1.75rem !important;
    z-index: 10 !important;
    min-width: auto !important;
    min-height: auto !important;
    line-height: 1.5 !important;
}

/* Paginação do WooCommerce */
.woocommerce-pagination {
    display: flex !important;
    justify-content: center !important;
    margin-top: 3rem !important;
}

.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    border: none !important;
}

.woocommerce-pagination ul.page-numbers li {
    border: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    background-color: var(--cor-caverna-piso) !important;
    color: #e5e7eb !important;
    border: 1px solid #2d2621 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: block !important;
    transition: all 0.2s !important;
}

.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li a:hover {
    background-color: var(--cor-ogro-olho) !important;
    color: #12100e !important;
    border-color: var(--cor-ogro-olho) !important;
}

/* Cabeçalho da Listagem (Controles de Ordenação e Resultados) */
.woocommerce-result-count {
    color: #9ca3af !important;
    font-size: 0.875rem !important;
    float: none !important;
    margin-bottom: 1rem !important;
    display: inline-block !important;
}

.woocommerce-ordering {
    float: none !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
}

@media (min-width: 640px) {
    .woocommerce-ordering {
        float: right !important;
        margin-bottom: 0 !important;
    }
    .woocommerce-result-count {
        float: left !important;
        line-height: 2.5rem !important;
        margin-bottom: 0 !important;
    }
}

.woocommerce-ordering select {
    background-color: var(--cor-caverna-piso) !important;
    color: #ffffff !important;
    border: 1px solid #2d2621 !important;
    padding: 0.5rem 2rem 0.5rem 1rem !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%239ca3af' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
}

.woocommerce-ordering select:focus {
    border-color: var(--cor-ogro-olho) !important;
}

/* Limpeza de Floats Padrão do WooCommerce */
.woocommerce .products::after,
.woocommerce-page .products::after {
    display: none !important;
}

/* Ajustes para a página de Produto Único */
.woocommerce div.product,
.woocommerce-page div.product {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
}

@media (min-width: 768px) {
    .woocommerce div.product,
    .woocommerce-page div.product {
        flex-direction: row !important;
    }
    
    .woocommerce div.product div.images,
    .woocommerce-page div.product div.images {
        width: 45% !important;
        float: none !important;
        margin: 0 !important;
    }
    
    .woocommerce div.product div.summary,
    .woocommerce-page div.product div.summary {
        width: 50% !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* Título de produto único */
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
    color: #ffffff !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    font-family: var(--fonte-fantasia) !important;
    margin-bottom: 0.5rem !important;
}

/* Preço do produto único */
.woocommerce div.product p.price,
.woocommerce-page div.product p.price {
    color: var(--cor-ogro-olho) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
}

/* Botão de adicionar ao carrinho em produto único */
.woocommerce div.product form.cart .button,
.woocommerce-page div.product form.cart .button {
    width: auto !important;
    display: inline-block !important;
    padding: 0.875rem 2.5rem !important;
    font-size: 0.875rem !important;
}

.woocommerce div.product form.cart .quantity,
.woocommerce-page div.product form.cart .quantity {
    margin-right: 1rem !important;
    display: inline-block !important;
}

/* Força todos os campos de quantidade do WooCommerce a serem escuros com texto branco e botões de seta visíveis */
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty,
.woocommerce-cart table.cart td.product-quantity input.qty,
.woocommerce-checkout .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-page div.product form.cart .quantity input.qty {
    background-color: #12100e !important;
    color: #ffffff !important;
    border: 1px solid #2d2621 !important;
    border-radius: 6px !important;
    padding: 0.65rem 0.5rem !important;
    width: 4.5rem !important;
    height: auto !important;
    font-weight: bold !important;
    text-align: center !important;
    color-scheme: dark !important;
    display: inline-block !important;
}

/* Inputs de formulário gerais do WooCommerce (como Cupom de Desconto, CEP, Endereço no checkout, etc.) */
.woocommerce input.input-text,
.woocommerce-page input.input-text,
.woocommerce-cart table.cart input.input-text,
.woocommerce-cart .coupon input.input-text,
.woocommerce-checkout form.checkout input.input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea,
.woocommerce-account form.login input.input-text,
.woocommerce-account form.register input.input-text {
    background-color: #12100e !important;
    color: #ffffff !important;
    border: 1px solid #2d2621 !important;
    border-radius: 6px !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.875rem !important;
    height: auto !important;
    outline: none !important;
    transition: all 0.2s !important;
    color-scheme: dark !important;
}

/* Ajusta placeholder e foco para inputs gerais */
.woocommerce input.input-text::placeholder,
.woocommerce-page input.input-text::placeholder {
    color: #6b7280 !important;
}

.woocommerce input.input-text:focus,
.woocommerce-page input.input-text:focus,
.woocommerce-cart table.cart input.input-text:focus,
.woocommerce-checkout form.checkout input.input-text:focus {
    border-color: var(--cor-ogro-olho) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1) !important;
}