/*
Theme Name: Limpaxis
Theme URI: https://limpaxis.com
Description: Tema filho de Hello Elementor para Limpaxis — loja portuguesa de decoração, jóias e bem-estar. Identidade visual própria com paleta terrosa (terracota, verde salva, creme, dourado antigo) e tipografia editorial (Cormorant Garamond + Karla + DM Sans).
Author: Limpaxis
Template: hello-elementor
Version: 1.0.0
Text Domain: limpaxis
*/

/* ============================================================
   1. DESIGN TOKENS — Paleta e tipografia da marca
   ============================================================ */
:root {
    /* Fundos */
    --lpx-bg-primary:    #FAF6F0;   /* creme quente */
    --lpx-bg-secondary:  #F0E6DC;   /* bege rosado suave */
    --lpx-bg-card:       #FFFFFF;

    /* Texto */
    --lpx-text:          #2C1810;   /* castanho escuro, nunca preto puro */
    --lpx-text-muted:    #5C4838;
    --lpx-text-on-dark:  #FAF6F0;

    /* Accents */
    --lpx-terracota:     #B85C38;   /* primário — terra, calor */
    --lpx-terracota-dk:  #9C4A2C;
    --lpx-salva:         #7A8B6F;   /* secundário — natureza, equilíbrio */
    --lpx-salva-dk:      #5F6F56;
    --lpx-dourado:       #C4A265;   /* destaque, com parcimónia */

    /* Tipografia */
    --lpx-font-display:  'Cormorant Garamond', Georgia, serif;
    --lpx-font-body:     'Karla', system-ui, sans-serif;
    --lpx-font-mono:     'DM Sans', system-ui, sans-serif;

    /* Espaçamento e raio */
    --lpx-radius-sm:     4px;
    --lpx-radius-md:     8px;
    --lpx-shadow-soft:   0 8px 24px rgba(44, 24, 16, 0.08);
    --lpx-shadow-hover:  0 12px 32px rgba(44, 24, 16, 0.14);

    /* Transições */
    --lpx-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   2. BASE — Tipografia global
   ============================================================ */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: var(--lpx-font-body);
    color: var(--lpx-text);
    background-color: var(--lpx-bg-primary);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--lpx-font-display);
    color: var(--lpx-text);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.lpx-price,
.woocommerce-Price-amount,
.price {
    font-family: var(--lpx-font-mono);
    font-weight: 500;
    color: var(--lpx-terracota);
}

a {
    color: var(--lpx-terracota);
    text-decoration: none;
    transition: color 0.25s var(--lpx-ease);
}
a:hover { color: var(--lpx-terracota-dk); }

/* ============================================================
   3. BOTÕES — Estilo da marca
   ============================================================ */
.elementor-button,
.lpx-btn,
.woocommerce a.button,
.woocommerce button.button {
    font-family: var(--lpx-font-mono);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 14px 32px;
    border-radius: var(--lpx-radius-sm);
    background-color: var(--lpx-terracota);
    color: var(--lpx-text-on-dark) !important;
    border: none;
    transition: all 0.3s var(--lpx-ease);
}
.elementor-button:hover,
.lpx-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--lpx-terracota-dk);
    transform: translateY(-1px);
    box-shadow: var(--lpx-shadow-soft);
}

.lpx-btn--ghost {
    background: transparent;
    color: var(--lpx-text) !important;
    border: 1px solid var(--lpx-text);
}
.lpx-btn--ghost:hover {
    background: var(--lpx-text);
    color: var(--lpx-text-on-dark) !important;
}

/* ============================================================
   4. CARDS DE CATEGORIA — Hover suave
   ============================================================ */
.lpx-category-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--lpx-radius-md);
    aspect-ratio: 3 / 4;
    cursor: pointer;
}
.lpx-category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--lpx-ease);
}
.lpx-category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(44, 24, 16, 0.7) 0%, rgba(44, 24, 16, 0.15) 60%, transparent 100%);
    transition: opacity 0.4s var(--lpx-ease);
}
.lpx-category-card:hover img { transform: scale(1.06); }
.lpx-category-card:hover::after { opacity: 0.75; }

/* ============================================================
   5. WOOCOMMERCE — Cartões de produto
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--lpx-bg-card);
    border-radius: var(--lpx-radius-md);
    padding: 16px;
    transition: box-shadow 0.3s var(--lpx-ease), transform 0.3s var(--lpx-ease);
}
.woocommerce ul.products li.product:hover {
    box-shadow: var(--lpx-shadow-hover);
    transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--lpx-font-display);
    font-size: 1.25rem;
    color: var(--lpx-text);
}

/* ============================================================
   6. UTILITÁRIOS de fundo (para usar em Sections do Elementor)
   ============================================================ */
.lpx-bg-creme    { background-color: var(--lpx-bg-primary); }
.lpx-bg-bege     { background-color: var(--lpx-bg-secondary); }
.lpx-bg-terra    { background-color: var(--lpx-terracota); color: var(--lpx-text-on-dark); }
.lpx-bg-salva    { background-color: var(--lpx-salva); color: var(--lpx-text-on-dark); }

/* ============================================================
   7. RESPONSIVO
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 16px; }
    .elementor-button { padding: 12px 24px; }
}