/*!
Theme Name: peonia
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: peonia
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

peonia is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
:root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --color-yellow-400: #facc15;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-800: #262626;
    --color-gray-900: #171717;

    --color-black: #000000;
    --color-white: #ffffff;

    --spacing: 0.25rem;

    --container-xs: 20rem;
    --container-md: 28rem;
    --container-2xl: 42rem;

    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);

    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);

    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);

    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);

    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);

    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);

    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);

    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);

    --text-5xl: 3rem;
    --text-5xl--line-height: 1;

    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;

    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --tracking-tighter: -0.05em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    --leading-relaxed: 1.625;

    --blur-sm: 8px;

    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
}

*, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}
html {
    font-family: "Readex Pro", sans-serif;
}
user agent stylesheet
body {
    display: block;
    margin: 8px;
}

/* Layout geral do header */
header {
    font-family: var(--default-font-family);
}

/* Utilitários básicos */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    color: rgba(0, 0, 0, 0.8)!important;
    line-height: 1;
    border-width: 1px!important;
    border-style: solid!important;
    border-image: initial!important;
    border-color: transparent!important;
    border-radius: 3px;
    background: transparent!important;
    padding: 0.6em 1em 0.4em;
}
header .container {
    width: 100% !important;
    max-width: -webkit-fill-available !important;
    padding: 0 4%;
}





/* RESET BÁSICO */
/* Reset e Container Card */
.kiko-card {
    list-style: none;
    text-align: center;
    background: #fff;
    padding: 25px 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    border: none !important;
}

/* Imagem */
.kiko-image-wrap {
    margin-bottom: 25px;
    display: block;
}
.kiko-image-wrap img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Badge Arredondada Estilo Kiko */
.kiko-badge-promo {
    display: inline-block;
    background: linear-gradient(90deg, #fbe9ef 0%, #eef0f8 100%);
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 18px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Subtítulo (Categoria) */
.kiko-subtitle {
    display: block;
    color: #757575;
    font-size: 13px;
    margin-bottom: 10px;
}

/* Título do Produto */
.kiko-title {
    font-size: 17px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    line-height: 1.2;
}
.kiko-title a {
    text-decoration: none;
    color: inherit;
}

/* Rating (Estrelas pretas) */
.kiko-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}
.kiko-stars-black {
    color: #262b30;
    font-size: 14px;
    letter-spacing: 2px;
}
.kiko-count {
    font-size: 13px;
    color: #1a1a1a;
}

/* Preços */
.kiko-price-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}
.kiko-perc {
    color: #d81b60;
    font-weight: 700;
    font-size: 15px;
}
.kiko-price-now {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}
.kiko-price-now .woocommerce-Price-currencySymbol {
    margin-left: 2px;
}
.kiko-price-old {
    color: #999;
    text-decoration: line-through;
    font-size: 14px;
}

/* --- BOTÕES (O QUE FALTAVA) --- */
.kiko-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 5px;
}

/* Botão Adicionar ao Carrinho */
.kiko-btn-add {
    flex-grow: 1;
    background-color: #000000 !important; /* Cor exata da imagem */
    color: #ffffff !important;
    padding: 16px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    display: block;
    transition: background 0.2s ease;
    border: none;
}

.kiko-btn-add:hover {
    background-color: #000 !important;
}

/* Botão de Wishlist (Coração) */
.kiko-btn-wish {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra suave idêntica */
    color: #000;
    transition: transform 0.2s ease;
}

.kiko-btn-wish:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

/* Responsivo */
@media (max-width: 480px) {
    .kiko-actions {
        flex-direction: column;
    }
    .kiko-btn-wish {
        width: 100%;
    }
}









.logo-footer img {
    width: 125px;
    height: auto;
    margin-left: -5px;
    margin-bottom: 15px;
}
.woocommerce ul.products li.product .button {
    margin-top: 1em;
    border: 1px solid #000000;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #000000 !important;
    border-radius: 0 !important;
}
.woocommerce ul.products li.product .button:hover {
    margin-top: 1em;
    border: 1px solid #000000;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #00000066 !important;
    border-radius: 0 !important;
    font-weight: bold !important;
}
.product-card-actions .tinv-wraper.tinv-wishlist {
    display: flex;
    width: 100%;
    margin: 8px 0;
    color: #000000;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
}
.bg-white {
    background-color: var(--color-white);
}

.border-gray-100 {
    border-color: var(--color-gray-100);
}

.border-b {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.z-50 {
    z-index: 50;
}
/* --- Banner de Vídeo Hero --- */

.hero-banner {
    position: relative;
    width: 100%;
    height: 80vh; /* Altura: 80% da tela visível (Desktop) */
    min-height: 500px; /* Garante que não fique pequeno demais */
    overflow: hidden;
    display: flex;
    align-items: center;     /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
}

/* O Vídeo de Fundo */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* O segredo: corta o excesso para preencher sem deformar */
    object-position: center;
    z-index: 0;
}

/* Camada Escura (Overlay) para o texto aparecer bem */
/* Usei um degradê sutil em vez de cor chapada para mais luxo */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    z-index: 1;
}
.wc-notices-wrapper {
    display: none;
    opacity: 0;
}
/* O Conteúdo (Texto e Botão) */
.hero-content {
    position: relative;
    z-index: 2; /* Fica acima do vídeo e do overlay */
    text-align: center;
    color: #ffffff;
    padding: 0 20px;
    max-width: 800px;
    animation: fadeInUp 1s ease-out; /* Pequena animação de entrada */
}

/* Título Principal */
.hero-title {
    font-family: 'Playfair Display', serif; /* Fonte serifada passa elegância */
    font-size: 3.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Subtítulo */
.hero-subtitle {
    font-family: 'Montserrat', sans-serif; /* Fonte limpa para leitura */
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Botão Transparente (Ghost Button) */
.hero-btn {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
}

.hero-btn:hover {
    background: #ffffff;
    color: #000000;
    transform: translateY(-2px); /* Efeito de elevação leve */
}


.hero-btn-product {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid #000000;
    color: #000000;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
}
.hero-btn-product:hover {
    background: #000000;
    color: #ffffff;
    transform: translateY(-2px); /* Efeito de elevação leve */
}
/* --- Ajustes para Mobile --- */
@media (max-width: 768px) {
    .hero-banner {
        height: 60vh; /* No celular pode ser um pouco menor */
        min-height: 400px;
    }

    .hero-title {
        font-size: 2.2rem; /* Fonte menor no mobile */
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .hero-btn {
        padding: 12px 30px;
    }
}

/* Animação suave de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Container centralizado */

.container {
    width: 100%;
    max-width: 80rem; /* ajuste se quiser mais estreito/largo */
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Espaçamentos */

.px-4 {
    padding-inline: calc(var(--spacing) * 4);
}

.p-2 {
    padding: calc(var(--spacing) * 2);
}

.h-20 {
    height: calc(var(--spacing) * 20); /* 5rem */
}

/* Flexbox */

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* Espaçamento horizontal entre itens */

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: calc(var(--spacing) * 4);
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    margin-left: calc(var(--spacing) * 8);
}

/* Tipografia */

.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.uppercase {
    text-transform: uppercase;
}

.tracking-tighter {
    letter-spacing: var(--tracking-tighter);
}

.tracking-wide {
    letter-spacing: var(--tracking-wide);
}

/* Cores de texto */

.hover\:text-gray-600:hover {
    color: var(--color-gray-600);
}

.text-white {
    color: var(--color-white);
}

/* Transições */

.transition-colors {
    transition-property:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: var(--default-transition-duration);
}

/* Visibilidade */

.hidden {
    display: none;
}

/* Posições */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.right-0 {
    right: 0;
}

/* Badge do carrinho */

.text-\[10px\] {
    font-size: 10px;
    line-height: 1;
}

.w-4 {
    width: calc(var(--spacing) * 4); /* 1rem */
}

.h-4 {
    height: calc(var(--spacing) * 4); /* 1rem */
}

.rounded-full {
    border-radius: 9999px;
}

/* Reset de mídia para ficar alinhado como no exemplo */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

/* Breakpoints */

/* lg = 64rem (1024px) */
@media (min-width: 64rem) {
    .lg\:hidden {
        display: none;
    }

    .lg\:flex {
        display: flex;
    }
}

/* sm = 40rem (640px) */
@media (min-width: 40rem) {
    .sm\:block {
        display: block;
    }
}
/* --- FOOTER STYLES --- */

.site-footer {
    background-color: #ffffff;
    border-top: 1px solid #f3f4f6; /* Cinza muito claro */
    padding-top: 4rem;
    padding-bottom: 2rem;
    color: #4b5563; /* Cinza médio elegante */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Ou sua fonte preferida */
    font-size: 0.9rem;
}

/* Container Centralizado */
.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- GRID SYSTEM --- */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 3rem;
    margin-bottom: 4rem;
}

/* Tablet (2 colunas) */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop (4 colunas) */
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- COLUNA 1: MARCA --- */
.footer-logo {
    display: block;
    font-size: 1.5rem;
    font-weight: 700; /* Bold */
    color: #111827;   /* Quase preto */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-family: serif; /* Toque de luxo */
}

.footer-desc {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #f9fafb;
    border-radius: 50%;
    color: #4b5563;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background-color: #111827;
    color: #ffffff;
}

/* --- LINKS E TÍTULOS --- */
.footer-heading {
    color: #111827;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Espaçamento entre letras estilo luxo */
    margin-bottom: 1.5rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #4b5563;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #111827; /* Fica preto ao passar o mouse */
}

/* --- NEWSLETTER --- */
.footer-text-sm {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    color: #6b7280;
}

.footer-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-form input[type="email"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: #111827;
    outline: none;
    transition: border-color 0.2s;
}

.footer-form input[type="email"]:focus {
    border-color: #111827;
    background-color: #ffffff;
}

.footer-form button {
    width: 100%;
    padding: 0.75rem;
    background-color: #111827;
    color: #ffffff;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.footer-form button:hover {
    background-color: #374151;
}

/* --- BOTTOM BAR (COPYRIGHT) --- */
.footer-bottom {
    border-top: 1px solid #f3f4f6;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* No desktop, ficam lado a lado */
@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.copyright {
    font-size: 0.75rem;
    color: #9ca3af;
}

.payment-icons {
    display: flex;
    gap: 0.75rem;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.3s;
}

.payment-icons:hover {
    filter: grayscale(0%);
    opacity: 1;
}