/* ============================================
   TEMA KRAFTI ART - Paleta extraída del DOM
   Colores exactos: artesanal, cálido, natural
   ============================================ */

/* === VARIABLES CSS GLOBALES (Krafti Art Palette) === */
:root {
    --krafti-gold: #c6a87d;
    --krafti-gold-dark: #b38f64;
    --krafti-cream: #f5f1e6;
    --krafti-cream-light: #f8f5ef;
    --krafti-beige: #ebe6d7;
    --krafti-beige-mid: #ede6d8;
    --krafti-text: #222222;
    --krafti-text-muted: #555555;
    --krafti-white: #ffffff;
    --krafti-border: #d4cfc4;
}

/* === BODY / FONDO GENERAL === */
body {
    background-color: var(--krafti-cream-light) !important;
    color: var(--krafti-text) !important;
}

/* === ANNOUNCEMENT BAR / BARRA SUPERIOR === */
.header-top-area,
.announcement-bar,
.top-header,
#top-bar,
.header__top,
[class*="announcement"],
.site-header-announcement {
    background-color: var(--krafti-gold) !important;
    color: var(--krafti-white) !important;
}

.header-top-area *,
.announcement-bar *,
.top-header * {
    color: var(--krafti-white) !important;
}

/* === NAVBAR / MENU PRINCIPAL === */
.navbar,
.main-nav,
.site-header,
.header-main,
nav.navbar,
.header-wrapper,
.navbar-area,
#site-navigation {
    background-color: var(--krafti-white) !important;
    border-bottom: 1px solid var(--krafti-border) !important;
}

/* Nav links */
.navbar-nav .nav-link,
.main-nav a,
nav a,
.menu-item a,
.nav-item a {
    color: var(--krafti-text) !important;
    font-weight: 500;
}

.navbar-nav .nav-link:hover,
.main-nav a:hover,
nav a:hover,
.menu-item a:hover,
.nav-item a:hover,
.navbar-nav .nav-link.active {
    color: var(--krafti-gold) !important;
}

/* Dropdown menus */
.dropdown-menu,
.sub-menu,
.navbar-dropdown {
    background-color: var(--krafti-white) !important;
    border: 1px solid var(--krafti-border) !important;
    box-shadow: 0 4px 20px rgba(198,168,125,0.15) !important;
}

.dropdown-item,
.sub-menu a {
    color: var(--krafti-text) !important;
}

.dropdown-item:hover,
.sub-menu a:hover {
    background-color: var(--krafti-cream) !important;
    color: var(--krafti-gold) !important;
}

/* === SECCIÓN HERO / BANNER PRINCIPAL === */
.slider-area,
.hero-section,
.banner-area,
.main-slider,
.hero-wrapper,
[class*="hero"],
[class*="slider"] {
    background-color: var(--krafti-cream) !important;
}

/* === PRODUCTOS - FONDO DE TARJETAS === */
.product-card,
.product-item,
.product-box,
.product-wrapper,
[class*="product-card"],
[class*="product-item"],
.single-product,
.card.product,
.woocommerce-product-gallery {
    background-color: var(--krafti-cream-light) !important;
    border: 1px solid var(--krafti-border) !important;
    border-radius: 8px !important;
}

.product-card:hover,
.product-item:hover,
.product-box:hover {
    box-shadow: 0 8px 30px rgba(198,168,125,0.2) !important;
    border-color: var(--krafti-gold) !important;
}

/* Nombre del producto */
.product-card .product-title,
.product-title,
.product-name,
h3.product-title,
.product-caption h4 {
    color: var(--krafti-text) !important;
}

/* Precio del producto */
.product-card .price,
.price,
.product-price,
.regular-price,
.woocommerce-Price-amount {
    color: var(--krafti-gold) !important;
    font-weight: 600;
}

/* === SECCIONES ALTERNADAS === */
.section-bg,
.bg-section,
.gray-bg,
.light-bg,
.section-padding,
.products-section,
.categories-section {
    background-color: var(--krafti-cream) !important;
}

.section-bg-2,
.newsletter-section,
.cta-section {
    background-color: var(--krafti-beige-mid) !important;
}

/* === BOTONES PRIMARIOS === */
.btn-primary,
.btn-theme,
button[type="submit"],
.add-to-cart,
.buy-now,
.checkout-btn,
input[type="submit"],
.btn-buy,
.product-btn {
    background-color: var(--krafti-text) !important;
    color: var(--krafti-white) !important;
    border: 2px solid var(--krafti-text) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-theme:hover,
button[type="submit"]:hover,
.add-to-cart:hover {
    background-color: var(--krafti-gold) !important;
    border-color: var(--krafti-gold) !important;
    color: var(--krafti-white) !important;
}

/* Botón outline/secundario */
.btn-outline,
.btn-secondary,
.btn-view {
    background-color: transparent !important;
    border: 2px solid var(--krafti-gold) !important;
    color: var(--krafti-gold) !important;
}

.btn-outline:hover,
.btn-secondary:hover {
    background-color: var(--krafti-gold) !important;
    color: var(--krafti-white) !important;
}

/* === ENCABEZADOS / TITLES === */
h1, h2, h3, h4, h5, h6 {
    color: var(--krafti-text) !important;
}

/* Subtítulos decorativos (tipo "KRAFTI ART? IT'S A CRAFT") */
.section-subtitle,
.subtitle,
.eyebrow,
.caption-title,
[class*="subtitle"],
.text-uppercase.letter-spacing {
    color: var(--krafti-gold) !important;
    font-weight: 600;
}

/* === LINKS GENERALES === */
a {
    color: var(--krafti-text);
}

a:hover {
    color: var(--krafti-gold) !important;
}

/* === BREADCRUMBS === */
.breadcrumb-item a,
.breadcrumb a {
    color: var(--krafti-gold) !important;
}

/* === PAGINACIÓN === */
.pagination .page-item .page-link:hover,
.pagination .page-item.active .page-link {
    background-color: var(--krafti-gold) !important;
    border-color: var(--krafti-gold) !important;
    color: var(--krafti-white) !important;
}

/* === FOOTER === */
footer,
.footer-area,
.site-footer,
#footer,
.footer-wrapper {
    background-color: var(--krafti-beige) !important;
    color: var(--krafti-text) !important;
    border-top: 2px solid var(--krafti-border) !important;
}

.footer-widget h4,
.footer-widget h3,
.footer-widget .widget-title,
.footer-title {
    color: var(--krafti-text) !important;
    font-weight: 700;
}

.footer-widget ul li a,
.footer-link,
footer a {
    color: var(--krafti-text-muted) !important;
    text-decoration: none;
}

.footer-widget ul li a:hover,
footer a:hover {
    color: var(--krafti-gold) !important;
}

/* Footer bottom bar */
.footer-bottom,
.copyright-area {
    background-color: var(--krafti-beige-mid) !important;
    border-top: 1px solid var(--krafti-border) !important;
    color: var(--krafti-text-muted) !important;
}

/* === FORMULARIOS / INPUTS === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select,
.form-control {
    border: 1px solid var(--krafti-border) !important;
    background-color: var(--krafti-white) !important;
    color: var(--krafti-text) !important;
    border-radius: 6px !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--krafti-gold) !important;
    box-shadow: 0 0 0 3px rgba(198,168,125,0.2) !important;
}

/* === SIDEBAR Y WIDGETS === */
.widget,
.sidebar-widget,
.widget-area {
    background-color: var(--krafti-cream-light) !important;
    border: 1px solid var(--krafti-border) !important;
    border-radius: 8px !important;
}

/* === BADGES Y ETIQUETAS === */
.badge-new,
.badge-sale,
.product-badge,
.tag-badge {
    background-color: var(--krafti-gold) !important;
    color: var(--krafti-white) !important;
}

/* === LOADING / PROGRESS === */
.progress-bar,
.loading-bar {
    background-color: var(--krafti-gold) !important;
}

/* === ESTRELLITAS DE RATING === */
.star-rating .filled,
.rating-star.active,
.stars .active {
    color: var(--krafti-gold) !important;
}

/* === CART / CARRITO === */
.cart-icon-count,
.cart-count {
    background-color: var(--krafti-gold) !important;
    color: var(--krafti-white) !important;
}

/* === MOBILE / RESPONSIVE === */
@media (max-width: 768px) {
    body {
          background-color: var(--krafti-cream-light) !important;
  }
    
    /* Mobile navbar */
    .navbar-collapse,
    .mobile-menu,
    .offcanvas,
    .mobile-nav {
          background-color: var(--krafti-white) !important;
  }
    
    .mobile-menu .nav-link,
    .mobile-nav a {
          color: var(--krafti-text) !important;
          border-bottom: 1px solid var(--krafti-border) !important;
          padding: 12px 0 !important;
  }
    
    /* Mobile product cards */
    .product-card,
    .product-item {
          background-color: var(--krafti-cream-light) !important;
          margin-bottom: 16px !important;
  }
    
    /* Mobile header */
    .site-header,
    .header-main,
    .navbar {
          background-color: var(--krafti-white) !important;
  }
}

/* === SCROLLBAR PERSONALIZADO === */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--krafti-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--krafti-gold);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--krafti-gold-dark);
}