/*
Theme Name: AFICA Store
Theme URI: https://afica.com.ve
Author: Elite Core Solutions, C.A.
Author URI: https://afica.com.ve
Description: Tema personalizado para AFICA Ferretería — Compatible con WooCommerce. Diseño moderno blanco con acento naranja papaya y antracita.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 9.5
License: GNU General Public License v2 or later
Text Domain: afica-store
*/

/* ─────────────────────────────────────────
   TOKENS DE DISEÑO
   El grueso del layout lo maneja Tailwind CDN.
   Aquí sólo los CSS vars y ajustes WC.
───────────────────────────────────────── */
:root {
    --papaya:        #FF6B35;
    --papaya-dark:   #E55520;
    --papaya-light:  #FF8C5A;
    --papaya-pale:   #FFF3EE;
    --anthracite:    #3A3A3A;
    --coal:          #1A1A1A;
    --white:         #FFFFFF;
    --gray-soft:     #F8F8F8;
    --border:        #EBEBEB;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background: #fff;
    transition: background-color .3s ease;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--papaya); border-radius: 2px; }
.dark ::-webkit-scrollbar-thumb { background: #FF8C5A; }

/* ── Ajustes WooCommerce ── */
.woocommerce-notices-wrapper { margin-top: 5rem; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { float: none; width: auto; margin: 0; }

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    border: 1px solid var(--border);
    border-radius: .375rem;
    padding: .4rem .75rem;
    font-size: .875rem;
    color: var(--anthracite);
    background: #fff;
}

/* Precios */
.woocommerce span.price, .woocommerce ins { color: var(--papaya); }
.woocommerce del { color: #aaa; font-size: .8em; }

/* Botón primario WooCommerce */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--papaya) !important;
    color: #fff !important;
    border-radius: .375rem !important;
    font-size: .8125rem !important;
    font-weight: 700 !important;
    padding: .55rem 1.1rem !important;
    transition: background .2s !important;
    border: none !important;
    letter-spacing: .01em !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--papaya-dark) !important;
    color: #fff !important;
}

/* Botón secundario */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--coal) !important;
    color: #fff !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--anthracite) !important;
}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    color: var(--anthracite);
    border-color: var(--border);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--papaya);
    color: #fff;
    border-color: var(--papaya);
}

/* Estrellas */
.woocommerce .star-rating span::before { color: var(--papaya); }

/* ── Animaciones ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .5s ease forwards; }

/* ── Mini-carrito lateral ── */
#cart-panel { transition: transform .35s cubic-bezier(.4,0,.2,1); }

/* ── Highlight de texto en color papaya ── */
::selection { background: #FF6B3522; color: var(--coal); }

/* ── Borde inferior animado en tarjetas ── */
.card-hover-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px; width: 0;
    background: var(--papaya);
    transition: width .3s ease;
}
.group:hover .card-hover-bar { width: 100%; }