/* =============================================
   DECORACIONES ISLEÑAS - Custom CSS v2.0
   Diseño profesional - Abril 2026
   ============================================= */

/* === VARIABLES === */
:root {
  --di-primary: #e8630a;
  --di-primary-dark: #c0520a;
  --di-dark: #1a1a2e;
  --di-dark2: #16213e;
  --di-green: #2d6a22;
  --di-text: #333333;
  --di-text-light: #666666;
  --di-border: #e8e8e8;
  --di-bg-light: #f8f8f6;
  --di-white: #ffffff;
  --di-shadow: 0 4px 20px rgba(0,0,0,0.08);
  --di-shadow-hover: 0 8px 30px rgba(0,0,0,0.15);
  --di-radius: 4px;
  --di-transition: all 0.25s ease;
}

/* === BODY & GLOBAL === */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--di-text);
  background: #ffffff;
}

/* === HEADER === */
#header {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  border-bottom: 3px solid var(--di-primary) !important;
}

.header-top, .header-nav {
  background: #ffffff !important;
}

/* Logo */
#header .logo img {
  max-height: 65px !important;
  width: auto !important;
}

/* === NAVIGATION === */
nav#header-nav .btm-mega-menu,
.btm-mega-menu > ul > li > a {
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: var(--di-dark) !important;
  transition: var(--di-transition) !important;
}

.btm-mega-menu > ul > li > a:hover,
.btm-mega-menu > ul > li.active > a {
  color: var(--di-primary) !important;
}

.btm-mega-menu > ul > li:hover > a {
  background: transparent !important;
  color: var(--di-primary) !important;
}

/* Dropdown menus */
.btm-mega-menu .dropdown-menu,
.btm-mega-menu .mega-inner {
  border-top: 3px solid var(--di-primary) !important;
  border-radius: 0 0 var(--di-radius) var(--di-radius) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

/* === HERO 3 COLUMNS === */
.di-hero-wrap {
  min-height: 520px !important;
}

.elementor-column.di-hero-col,
.di-hero-col {
  position: relative !important;
  overflow: hidden !important;
  transition: filter 0.3s ease !important;
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.di-hero-col::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, transparent 100%) !important;
  z-index: 1 !important;
  transition: var(--di-transition) !important;
}

.di-hero-col:hover::before {
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 60%, transparent 100%) !important;
}

.di-col-pinturas {
  background: linear-gradient(135deg, #1c2333 0%, #2c3e60 50%, #1a2a4a 100%) !important;
}

.di-col-graco {
  background: linear-gradient(135deg, #c0390c 0%, #e8530a 50%, #b83008 100%) !important;
}

.di-col-herramientas {
  background: linear-gradient(135deg, #1e3d16 0%, #2d6a22 50%, #1a3512 100%) !important;
}

.di-hero-col .elementor-widget-container {
  position: relative !important;
  z-index: 2 !important;
}

.di-hero-col .elementor-heading-title h6,
.di-hero-col h6.elementor-heading-title {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* === HERO: fondo con imagen via CSS (se añaden imágenes después) === */
.di-col-pinturas {
  background-image: url('/themes/vt_decor/assets/img/hero-pinturas.jpg');
  background-size: cover !important;
  background-position: center !important;
}
.di-col-graco {
  background-image: url('/themes/vt_decor/assets/img/hero-graco.jpg');
  background-size: cover !important;
  background-position: center !important;
}
.di-col-herramientas {
  background-image: url('/themes/vt_decor/assets/img/hero-herramientas.jpg');
  background-size: cover !important;
  background-position: center !important;
}

/* === SEARCH BAR === */
#search_widget input,
.ui-autocomplete-input {
  border: 2px solid var(--di-border) !important;
  border-radius: var(--di-radius) !important;
  padding: 10px 50px 10px 18px !important;
  font-size: 14px !important;
  transition: var(--di-transition) !important;
}

#search_widget input:focus,
.ui-autocomplete-input:focus {
  border-color: var(--di-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232,99,10,0.15) !important;
}

#search_widget button[type="submit"],
.search-widget button {
  background: var(--di-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 var(--di-radius) var(--di-radius) 0 !important;
  transition: var(--di-transition) !important;
}

#search_widget button:hover {
  background: var(--di-primary-dark) !important;
}

/* === PRODUCT CARDS === */
.product-miniature,
article.product-miniature {
  border-radius: var(--di-radius) !important;
  box-shadow: none !important;
  border: 1px solid var(--di-border) !important;
  overflow: hidden !important;
  transition: var(--di-transition) !important;
  background: #ffffff !important;
}

.product-miniature:hover {
  box-shadow: var(--di-shadow-hover) !important;
  transform: translateY(-3px) !important;
  border-color: #d0d0d0 !important;
}

.product-miniature .product-thumbnail {
  overflow: hidden !important;
}

.product-miniature .product-thumbnail img {
  transition: transform 0.35s ease !important;
}

.product-miniature:hover .product-thumbnail img {
  transform: scale(1.05) !important;
}

.product-miniature .product-title a {
  color: var(--di-dark) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: var(--di-transition) !important;
}

.product-miniature .product-title a:hover {
  color: var(--di-primary) !important;
}

.product-miniature .price {
  color: var(--di-primary) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* === BUTTONS === */
.btn-primary,
.add-to-cart,
button.btn-primary {
  background: var(--di-primary) !important;
  border-color: var(--di-primary) !important;
  border-radius: var(--di-radius) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: var(--di-transition) !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  padding: 10px 24px !important;
}

.btn-primary:hover,
.add-to-cart:hover {
  background: var(--di-primary-dark) !important;
  border-color: var(--di-primary-dark) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary,
.btn-outline-secondary {
  border-color: var(--di-dark) !important;
  color: var(--di-dark) !important;
  border-radius: var(--di-radius) !important;
  font-weight: 600 !important;
  transition: var(--di-transition) !important;
}

.btn-secondary:hover {
  background: var(--di-dark) !important;
  color: white !important;
}

/* === PRODUCT TABS (homepage) === */
.di-products-tabs .tab-title,
.leo-element-tab-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--di-text-light) !important;
  border-bottom: 3px solid transparent !important;
  padding-bottom: 10px !important;
  transition: var(--di-transition) !important;
}

.di-products-tabs .tab-title.active,
.leo-element-tab-title.active {
  color: var(--di-primary) !important;
  border-bottom-color: var(--di-primary) !important;
}

/* === CATEGORY TILES === */
.category-miniature,
.di-cat-tile {
  border-radius: var(--di-radius) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: var(--di-transition) !important;
}

.category-miniature:hover {
  box-shadow: var(--di-shadow-hover) !important;
  transform: translateY(-3px) !important;
}

.category-miniature .category-name {
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* === SECTION HEADINGS === */
.leo-element-heading h2,
.leo-section-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--di-dark) !important;
  position: relative !important;
  padding-bottom: 16px !important;
  margin-bottom: 30px !important;
}

.leo-element-heading h2::after,
.leo-section-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 3px !important;
  background: var(--di-primary) !important;
  border-radius: 2px !important;
}

/* === BREADCRUMB === */
.breadcrumb {
  background: var(--di-bg-light) !important;
  border-radius: var(--di-radius) !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
}

.breadcrumb-item a {
  color: var(--di-primary) !important;
}

/* === CART ICON === */
.shopping-cart .cart-products-count {
  background: var(--di-primary) !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* === FOOTER PREFOOTER === */
.footer-top,
.footer-before {
  background: var(--di-dark2) !important;
  padding: 60px 0 !important;
}

.footer-top .block-title,
.footer-before h3 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.footer-top a,
.footer-before a {
  color: #aaaaaa !important;
  font-size: 14px !important;
  transition: var(--di-transition) !important;
  display: block !important;
  padding: 4px 0 !important;
}

.footer-top a:hover,
.footer-before a:hover {
  color: var(--di-primary) !important;
  padding-left: 6px !important;
}

/* Newsletter */
.block_newsletter input[type="email"] {
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.05) !important;
  color: white !important;
  border-radius: var(--di-radius) 0 0 var(--di-radius) !important;
  padding: 10px 16px !important;
}

.block_newsletter .btn {
  background: var(--di-primary) !important;
  border: none !important;
  border-radius: 0 var(--di-radius) var(--di-radius) 0 !important;
  padding: 10px 20px !important;
  color: white !important;
  font-weight: 600 !important;
  transition: var(--di-transition) !important;
}

.block_newsletter .btn:hover {
  background: var(--di-primary-dark) !important;
}

/* === FOOTER BOTTOM === */
.footer-center {
  background: #111111 !important;
}

/* === BADGES === */
.product-flag,
.label-product {
  border-radius: 2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
}

.product-flag.new,
.label-new {
  background: var(--di-green) !important;
}

.product-flag.discount,
.label-discount {
  background: var(--di-primary) !important;
}

/* === PAGINATION === */
.pagination .page-item.active .page-link {
  background: var(--di-primary) !important;
  border-color: var(--di-primary) !important;
}

.pagination .page-link {
  color: var(--di-primary) !important;
  border-radius: var(--di-radius) !important;
}

.pagination .page-link:hover {
  background: rgba(232,99,10,0.1) !important;
}

/* === FILTERS (side column) === */
.facet-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--di-dark) !important;
}

.facet-label .custom-checkbox span.checkbox {
  border-color: var(--di-border) !important;
  border-radius: 2px !important;
  transition: var(--di-transition) !important;
}

.facet-label input[type="checkbox"]:checked + span.ps-shown-by-js + .custom-checkbox span.checkbox {
  background: var(--di-primary) !important;
  border-color: var(--di-primary) !important;
}

/* === PRODUCT PAGE === */
.product-add-to-cart .add-to-cart {
  font-size: 15px !important;
  padding: 14px 32px !important;
  letter-spacing: 1px !important;
}

.product-name h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--di-dark) !important;
}

.current-price {
  color: var(--di-primary) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
  .di-hero-wrap .elementor-column {
    min-height: 300px !important;
  }
  
  #header .logo img {
    max-height: 50px !important;
  }
}

@media (max-width: 767px) {
  .di-hero-wrap .elementor-column {
    min-height: 250px !important;
  }
  
  .di-hero-col .elementor-heading-title {
    font-size: 24px !important;
  }

  .di-hero-col::before {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%) !important;
  }
}

/* === TRUST BADGES BAR === */
.di-trust-bar {
  background: var(--di-bg-light);
  border-bottom: 1px solid var(--di-border);
  padding: 12px 0;
  font-size: 13px;
  color: var(--di-text-light);
}

.di-trust-bar .di-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.di-trust-bar .di-trust-icon {
  color: var(--di-primary);
  font-size: 18px;
}

/* === BRAND BANNERS === */
.di-brand-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--di-radius);
  transition: var(--di-transition);
}

.di-brand-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--di-shadow-hover);
}

.di-brand-banner .di-brand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 30%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

/* === HIDE OLD SLIDER COMPLETELY IF EMPTY === */
.box_slide:empty,
.leo-slide-wrapper:empty {
  display: none !important;
}

/* === PREFOOTER IMPROVEMENTS === */
.displayFooterBefore .leo-element-section {
  background: #16213e !important;
}

.displayFooterBefore .leo-element-section .elementor-widget-text-editor p {
  color: #aaaaaa !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* === MISC FIXES === */
.back-to-top {
  background: var(--di-primary) !important;
  border-radius: 50% !important;
}

#js-product-list .no-result {
  text-align: center !important;
  padding: 60px 30px !important;
  color: var(--di-text-light) !important;
}

/* Inline quick-add button */
.product-miniature .quick-view,
.product-miniature .add-to-cart-btn {
  background: var(--di-primary) !important;
  color: white !important;
  border-radius: var(--di-radius) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* === END CUSTOM CSS === */

/* ===== ADDITIONAL STYLES v2.1 ===== */

/* Category grid responsive */
@media (max-width: 992px) {
  .di-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 576px) {
  .di-cat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* Brand logos bar */
.di-brand-bar {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.di-brand-item {
  flex: 1;
  min-width: 150px;
  padding: 28px 15px;
  text-align: center;
  border-right: 1px solid #e5e5e5;
  transition: background 0.2s;
}
.di-brand-item:last-child { border-right: none; }
.di-brand-item:hover { background: #f8f4f0; }

/* FAQ details */
details summary::-webkit-details-marker { color: #e8630a; }
details[open] summary { color: #e8630a; }
details summary:hover { color: #e8630a; }

/* Process steps */
.di-process-step {
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  text-align: center;
  padding: 30px 20px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.di-process-step:hover {
  box-shadow: 0 8px 24px rgba(232,99,10,0.12);
  transform: translateY(-3px);
}

/* TKRON stats grid */
.di-tkron-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
@media (max-width: 768px) {
  .di-tkron-grid { grid-template-columns: 1fr; }
}

/* Newsletter bar */
.di-newsletter-bar {
  background: var(--di-primary);
  padding: 25px 30px;
}
.di-newsletter-bar h3 { color: #fff; font-size: 22px; margin: 0; }

/* Product tabs styling */
.leo-product-tab .nav-tabs .nav-link.active {
  color: var(--di-primary) !important;
  border-bottom-color: var(--di-primary) !important;
}
.leo-product-tab .nav-tabs .nav-link:hover {
  color: var(--di-primary) !important;
}

/* Footer bottom bar */
.di-footer-bottom {
  background: #1a1a1a;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.di-footer-bottom p { color: #aaa; font-size: 13px; margin: 0; }
.di-footer-bottom a { color: var(--di-primary); text-decoration: none; }
.di-footer-bottom a:hover { text-decoration: underline; }

/* Contact info card */
.di-contact-card {
  background: #1c2b3a;
  border-radius: 8px;
  padding: 40px;
  color: #fff;
  height: 100%;
}
.di-contact-card .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--di-primary);
  margin-bottom: 12px;
}
.di-contact-card .phone {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.di-contact-card .phone:hover { color: var(--di-primary); }

/* Section heading center utility */
.di-section-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.di-section-subtitle {
  text-align: center;
  color: #666;
  font-size: 15px;
  max-width: 650px;
  margin: 0 auto 35px;
}

/* Hover effects on category cards */
[style*="border-radius:8px"][style*="grid"] a > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  transition: all 0.25s;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .di-hero-wrap { flex-direction: column; min-height: auto; }
  .di-hero-col { min-height: 300px; }
  .di-col-pinturas { flex: none; width: 100%; }
  .di-col-graco, .di-col-herramientas { flex: none; width: 50%; }
}
@media (max-width: 480px) {
  .di-col-graco, .di-col-herramientas { width: 100%; }
}