/*
 * ============================================================
 * T-LOVENDO v3 — Overrides REALES sobre PRS005_01
 * Basado en HTML real de t-lovendo.com
 * ============================================================
 * SELECTORES VERIFICADOS desde el DOM real:
 *   #ttcmsheader   -> USP top bar (era rosa pálido)
 *   .button-search -> Botón Search del buscador (era morado)
 *   .header-nav    -> Nav superior con USPs
 *   #_desktop_logo / #_desktop_cart / #_desktop_user_info
 *   .blockcart, .cart-products-count
 *   .ttcountdowntimer (countdown timer azul #2453C9)
 *   .product-miniature, .js-product-miniature, .price
 *   #footer, .footer-container, #ttcmsfooter, #ttcmsfooter1
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --tl-green: #2D5F3F;
  --tl-green-dark: #1F4A2D;
  --tl-orange: #F26419;
  --tl-orange-dark: #D4520F;
  --tl-terracota: #E8A87C;
  --tl-beige: #FAF7F2;
  --tl-paper: #FAF8F4;
  --tl-carbon: #2C2C2C;
  --tl-gray: #6B6B6B;
  --tl-gray-light: #F5F5F5;
}

/* ==========================================================
   1. TIPOGRAFÍA GLOBAL — Inter + Poppins
   ========================================================== */
body, p, div, span, li, td, label, input, textarea, select, button, a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.product-title, .product-title a,
.cart-title, .ttbestseller-title, .ttnew-products-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
}

/* ==========================================================
   2. USP TOP BAR — #ttcmsheader (era rosa pálido)
   ========================================================== */
.header-nav, nav.header-nav, #header-sticky.header-nav {
  background: var(--tl-green) !important;
  border: none !important;
}
.header-nav .nav1 {
  background: var(--tl-green) !important;
  padding: 8px 0 !important;
}
#ttcmsheader,
#ttcmsheader p {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-align: center !important;
  letter-spacing: .3px !important;
}
#ttcmsheader p::first-line {
  color: var(--tl-terracota) !important;
}

/* ==========================================================
   3. NAV2 (logo + search + cart) — fondo blanco limpio
   ========================================================== */
.header-nav .nav2 {
  background: #FFFFFF !important;
  padding: 14px 0 !important;
}

/* ==========================================================
   4. BUSCADOR — botón Search NARANJA (era morado)
   ========================================================== */
#search_block_top .button-search,
.button-search,
button.button-search,
button.btn.btn-default.button-search {
  background: var(--tl-orange) !important;
  background-color: var(--tl-orange) !important;
  border-color: var(--tl-orange) !important;
  color: #FFFFFF !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 0 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  transition: all .15s ease !important;
}
#search_block_top .button-search:hover,
.button-search:hover {
  background: var(--tl-orange-dark) !important;
  background-color: var(--tl-orange-dark) !important;
  border-color: var(--tl-orange-dark) !important;
}
#search_query_top, .search_query {
  border: 2px solid #E5E5E5 !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}
#search_query_top:focus, .search_query:focus {
  border-color: var(--tl-orange) !important;
  box-shadow: none !important;
  outline: none !important;
}
#search_category {
  border: 2px solid #E5E5E5 !important;
  border-right: 1px solid #E5E5E5 !important;
  background: var(--tl-gray-light) !important;
  font-weight: 500 !important;
}

/* ==========================================================
   5. CART (cesta) y USER (cuenta) — iconos verdes
   ========================================================== */
.blockcart .header i.shopping-cart,
.shopping-cart {
  color: var(--tl-carbon) !important;
}
.blockcart {
  border: 2px solid var(--tl-orange) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
}
.cart-products-count {
  background: var(--tl-orange) !important;
  color: #FFF !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  padding: 0 6px !important;
}

/* ==========================================================
   6. COUNTDOWN TIMER — si se usa, suavizar el azul agresivo
   ========================================================== */
.ttcountdowntimer[style*="background-color:#2453C9"],
.ttcountdowntimer {
  background-color: var(--tl-carbon) !important;
}
#icon1[style*="background-color:#2453C9"] {
  background-color: var(--tl-carbon) !important;
}
.ttcountdown-inner .number {
  color: var(--tl-orange) !important;
  font-weight: 800 !important;
}

/* ==========================================================
   7. BOTONES — primary naranja, secondary verde
   ========================================================== */
.btn-primary, button.btn-primary, .btn.btn-primary,
.add-to-cart, .btn-add-to-cart,
button[type="submit"]:not(.button-search) {
  background: var(--tl-orange) !important;
  border-color: var(--tl-orange) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  transition: all .15s ease !important;
}
.btn-primary:hover, button.btn-primary:hover,
.add-to-cart:hover, .btn-add-to-cart:hover {
  background: var(--tl-orange-dark) !important;
  border-color: var(--tl-orange-dark) !important;
}
.btn-secondary, .btn.btn-secondary {
  background: var(--tl-green) !important;
  border-color: var(--tl-green) !important;
  color: #FFFFFF !important;
}
.btn-default, .btn.btn-default {
  background: var(--tl-carbon) !important;
  border-color: var(--tl-carbon) !important;
  color: #FFFFFF !important;
}

/* ==========================================================
   8. % OFERTAS (botón amarillo del menú principal)
   ========================================================== */
[class*="ofertas"], a[href*="ofertas"], a[href*="oferta"],
.btn-timer {
  background: var(--tl-orange) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ==========================================================
   9. LINKS Y ACENTOS
   ========================================================== */
a, a:link {
  color: var(--tl-green);
  transition: color .15s ease;
}
a:hover {
  color: var(--tl-orange);
}
.menu-icons a, .nav-item a {
  color: var(--tl-carbon) !important;
}
.menu-icons a:hover, .nav-item a:hover {
  color: var(--tl-orange) !important;
}

/* ==========================================================
   10. PRODUCT MINIATURE (tarjetas producto)
   ========================================================== */
.product-miniature, .js-product-miniature {
  border: 1px solid #E8E8E8 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  transition: all .2s ease !important;
}
.product-miniature:hover, .js-product-miniature:hover {
  border-color: var(--tl-green) !important;
  box-shadow: 0 8px 24px rgba(45,95,63,.10) !important;
  transform: translateY(-2px) !important;
}
.product-miniature .product-title a,
.js-product-miniature .product-title a {
  color: var(--tl-carbon) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.product-miniature .product-title a:hover,
.js-product-miniature .product-title a:hover {
  color: var(--tl-orange) !important;
}

/* ==========================================================
   11. PRECIOS (más impactantes)
   ========================================================== */
.price, .product-price, .current-price, .ttPrice {
  color: var(--tl-carbon) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -.5px !important;
}
.regular-price, .product-discount, del.regular-price {
  color: var(--tl-gray) !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  font-size: 14px !important;
}
.discount-percentage, .discount-amount, .product-flags li.discount {
  background: #D32F2F !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
}

/* ==========================================================
   12. FLAGS / BADGES de producto (Top venta, oferta, etc.)
   ========================================================== */
.product-flags { padding: 0 !important; }
.product-flags li {
  background: var(--tl-orange) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.product-flags li.online-only,
.product-flags li.new {
  background: var(--tl-green) !important;
}

/* ==========================================================
   13. ESTRELLAS DE RESEÑAS
   ========================================================== */
.star, .star_on, .stars i, .product-comments-stars i,
.product-comments-additional-info .star_content {
  color: var(--tl-orange) !important;
}

/* ==========================================================
   14. BLOCKREASSURANCE (trust badges)
   ========================================================== */
.block-reassurance {
  background: var(--tl-gray-light) !important;
  border: none !important;
}
.block-reassurance .block-reassurance-item {
  background: #FFFFFF !important;
  padding: 16px !important;
}
.block-reassurance img {
  filter: hue-rotate(20deg) saturate(2) !important;
}

/* ==========================================================
   15. FOOTER — fondo carbón (era con varios colores)
   ========================================================== */
#footer, #footer-default, .footer-container, .page-footer {
  background: var(--tl-carbon) !important;
  color: rgba(255,255,255,.75) !important;
}
#footer a, #footer-default a, .footer-container a, .page-footer a {
  color: rgba(255,255,255,.75) !important;
  transition: color .15s ease !important;
}
#footer a:hover, #footer-default a:hover,
.footer-container a:hover, .page-footer a:hover {
  color: var(--tl-orange) !important;
}
#footer h3, #footer h4, #footer h5,
.footer-container h3, .footer-container h4, .footer-container h5 {
  color: #FFFFFF !important;
}
#ttcmsfooter, #ttcmsfooter1, .ttcmsfooter, .ttcmsfooter1 {
  background: var(--tl-carbon) !important;
  color: rgba(255,255,255,.75) !important;
}
.bottom-footer {
  background: #1A1A1A !important;
  color: rgba(255,255,255,.5) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
}
#ttcmspaymentlogo {
  background: var(--tl-carbon) !important;
  padding: 16px 0 !important;
}

/* ==========================================================
   16. STICKY HEADER — sombra suave al hacer scroll
   ========================================================== */
.header_sticky_on.header-sticky {
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* ==========================================================
   17. MEGAMENU
   ========================================================== */
.tt-menu-horizontal,
.ttinnermenu,
.ttmenu-content {
  background: #FFFFFF !important;
}
.tt-menu-horizontal .menu-item > a,
.ttinnermenu .menu-item > a {
  color: var(--tl-carbon) !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}
.tt-menu-horizontal .menu-item > a:hover,
.ttinnermenu .menu-item > a:hover {
  color: var(--tl-orange) !important;
}

/* ==========================================================
   18. NEWSLETTER
   ========================================================== */
#newsletter input[type="email"], #newsletter input.email {
  border: 2px solid #E5E5E5 !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
}
#newsletter input[type="submit"], #newsletter button[type="submit"] {
  background: var(--tl-orange) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* ==========================================================
   19. RESPONSIVE FIXES
   ========================================================== */
@media (max-width: 768px) {
  #ttcmsheader p {
    font-size: 11px !important;
    padding: 0 8px !important;
  }
  .price, .product-price, .ttPrice {
    font-size: 18px !important;
  }
  .product-miniature, .js-product-miniature {
    border-radius: 6px !important;
  }
}

/* === FIN OVERRIDES v3 — basado en HTML real verificado === */

/* ==========================================================
   20. SIDEBAR DE CATEGORÍAS — #ttcategorytabs (era morado)
   ========================================================== */
#ttcategorytabs {
  background: var(--tl-paper) !important;
  padding: 40px 0 !important;
}
#ttcategorytabs .title h3.tt-title {
  color: var(--tl-carbon) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  letter-spacing: -.5px !important;
}
#ttcategorytabs .sub-title {
  color: var(--tl-gray) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Sidebar UL (.nav-tabs) */
#ttcategory-tabs.nav-tabs,
#ttcategory-tabs.nav.nav-tabs {
  background: var(--tl-green) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  border: none !important;
  display: block !important;
}
#ttcategory-tabs .nav-item.item {
  list-style: none !important;
  border: none !important;
  margin: 2px 0 !important;
  width: 100% !important;
  display: block !important;
}
#ttcategory-tabs .nav-item a.tab-title {
  color: rgba(255,255,255,.85) !important;
  background: transparent !important;
  border: none !important;
  padding: 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  display: block !important;
  border-radius: 6px !important;
  transition: all .15s ease !important;
  text-decoration: none !important;
}
#ttcategory-tabs .nav-item a.tab-title:hover {
  background: rgba(255,255,255,.12) !important;
  color: #FFFFFF !important;
}
#ttcategory-tabs .nav-item a.tab-title.active {
  background: var(--tl-orange) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Contenido de tabs */
.tab-content, .tab-pane {
  background: transparent !important;
}

/* ==========================================================
   21. COUNTDOWN TIMER — sobreescribir #2453C9 inline
   ========================================================== */
.ttcountdowntimer,
.ttcountdowntimer[style*="2453C9"] {
  background-color: var(--tl-carbon) !important;
  background: var(--tl-carbon) !important;
}
#icon1,
#icon1[style*="2453C9"] {
  background-color: var(--tl-carbon) !important;
  background: var(--tl-carbon) !important;
}

/* ==========================================================
   22. FOOTER (refuerzo) — todas las zonas oscuras
   ========================================================== */
.page-footer, .js-footer, .footer-top, .bottom-footer,
.footer-container .links {
  background: var(--tl-carbon) !important;
}
.footer-container .links a, .links .h3 {
  color: rgba(255,255,255,.75) !important;
}

/* === FIN OVERRIDES SIDEBAR + COUNTDOWN + FOOTER === */

/* ============================================================
   ITERACIÓN 3 — FOOTER UNIFORME + LEGIBILIDAD
   ============================================================ */
#footer, #footer-default,
.page-footer, .js-footer,
.footer-container,
.footer-top, .bottom-footer,
#ttcmsfooter, #ttcmsfooter1, #ttcmspaymentlogo,
.ttcmsfooter, .ttcmsfooter1,
.ttfooterstaticlink, .ttfooterstaticlink1, .ttfooterstaticlink2,
.footer-block, .footer-section,
.ps-emailsubscription-block {
  background: #2C2C2C !important;
}
.bottom-footer {
  background: #1A1A1A !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
.footer-container h1, .footer-container h2, .footer-container h3,
.footer-container h4, .footer-container h5, .footer-container h6,
.footer-container .h3, .footer-container .h4,
.footer-container .title, .footer-container .footer-title,
.ttfooterstaticlink h3, .ttfooterstaticlink1 h3, .ttfooterstaticlink2 h3,
#ttcmsfooter h3, #ttcmsfooter1 h3,
.page-footer .title, .page-footer .h3 {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
}
#footer p, #footer span, #footer li, #footer a,
.footer-container p, .footer-container span, .footer-container li,
.footer-container a, .footer-container .toggle,
.bottom-footer, .bottom-footer * {
  color: rgba(255,255,255,.75) !important;
  font-family: 'Inter', sans-serif !important;
}
#footer a:hover, .footer-container a:hover {
  color: #F26419 !important;
}
#newsletter, .newsletter, .ps-emailsubscription-block {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  margin: 16px 0 !important;
  padding: 24px !important;
}
#newsletter h1, #newsletter h2, #newsletter h3, #newsletter h4,
.newsletter h3, .ps-emailsubscription-block h3 {
  color: #2C2C2C !important;
}
.collapsed .add, .collapsed::after,
[data-toggle="collapse"]::after,
.footer-container .toggle::after,
.title-block::after {
  color: #FFFFFF !important;
}
.sticky-cart, .floating-cart, .floating-account, .float-button {
  background: #2C2C2C !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

/* ============================================================
   ITERACIÓN 4 — TÍTULOS DE ACORDEÓN DEL FOOTER
   Selectores reales del DOM: .block-contact-title, .h3.block-contact-title
   ============================================================ */
.block-contact-title,
.h3.block-contact-title,
span.h3.block-contact-title,
.block-contact .block-contact-title,
.title.clearfix .h3,
.title.clearfix span.h3,
.title.clearfix.hidden-md-up .h3,
.title.clearfix.hidden-md-up span,
[data-toggle="collapse"] .h3,
[data-toggle="collapse"] span.h3,
.footer-container .block-contact-title,
.footer-container .h3.block-contact-title,
.footer-container .title .h3,
#ttcmsfooter .h3, #ttcmsfooter1 .h3,
.ttcmsfooter .h3, .ttcmsfooter1 .h3,
.links .h3, .links h3,
.footer-container .links .h3 {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
}

/* Iconos + de los acordeones */
.title.clearfix .float-xs-right,
.title.clearfix [class*="material-icons"],
.title.clearfix::after,
[data-toggle="collapse"]::after {
  color: #FFFFFF !important;
}

/* Listas <ul> dentro del footer */
.footer-container ul, .footer-container .links ul, .links ul {
  list-style: none !important;
  padding: 0 !important;
}
.footer-container ul li, .links ul li {
  padding: 4px 0 !important;
}

/* ============================================================
   ITERACIÓN 5 — TÍTULOS T-LOVENDO / AYUDA / LEGAL (col-md-3 wrapper)
   Estructura: .col-md-3.wrapper > h3.h3 (desktop)
              .col-md-3.wrapper > .title > span.h3 (mobile)
   ============================================================ */
.col-md-3.wrapper h3,
.col-md-3.wrapper .h3,
.col-md-3.wrapper > h3,
.col-md-3.wrapper h3.hidden-sm-down,
.col-md-3.wrapper .title .h3,
.col-md-3.wrapper .title span.h3,
.col-md-3.wrapper .title.clearfix .h3,
.col-md-3.wrapper .title.clearfix span,
.wrapper h3, .wrapper .h3,
.wrapper .title .h3, .wrapper .title span,
.links.link-list h3, .links.link-list .h3,
.col-md-9.links h3, .col-md-9.links .h3,
.link-list h3, .link-list .h3,
.footer-container .col-md-3 h3,
.footer-container .col-md-3 .h3,
.footer-container .wrapper h3 {
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
}

/* Iconos + de los acordeones (navbar-toggler) */
.navbar-toggler, .collapse-icons,
.float-xs-right .collapse-icons,
.float-xs-right .navbar-toggler,
.float-xs-right [class*="material"],
.title.clearfix .float-xs-right *,
.title.clearfix .add, .title.clearfix .remove {
  color: #FFFFFF !important;
}

/* Refuerzo links del footer (li, a) */
.footer-container .col-md-3 ul li a,
.footer-container .wrapper ul li a,
.col-md-3.wrapper ul li a,
.links.link-list ul li a,
.link-list ul li a {
  color: rgba(255,255,255,.75) !important;
  font-family: 'Inter', sans-serif !important;
}
.footer-container .col-md-3 ul li a:hover,
.col-md-3.wrapper ul li a:hover {
  color: #F26419 !important;
}


/* ============================================================
   ITERACIÓN 6 — QUITAR FONDO MORADO BODY/WRAPPER
   ============================================================ */
body, body#index,
#wrapper, #main, #content-wrapper,
.js-content-wrapper, html {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Por si el morado viene de un pseudo-element ::before/::after */
body::before, body::after,
#wrapper::before, #wrapper::after,
#main::before, #main::after {
  background: transparent !important;
}

/* Algunas plantillas TT tienen patrones de fondo */
.tt-bg-pattern, .tt-bg-purple, .body-bg, .page-bg {
  background: #FFFFFF !important;
}


/* ============================================================
   ITERACIÓN 7 — VARIABLES RAÍZ DEL TEMA
   Sobrescribe las variables CSS del padre que generan morado/azul
   en todo el sitio (theme.css línea 11-12)
   ============================================================ */
:root, html, body, body#index {
  --primary-bg-color: #2D5F3F !important;          /* verde bosque (era #2453c9 azul) */
  --primary-bg-gradient-color: #1F4A2D !important; /* verde oscuro (era #6229aa MORADO) */
  --header-top-texthvr-color: #F26419 !important;  /* hover top → naranja */
  --footer-link-hvr-color: #F26419 !important;     /* hover footer → naranja */
  --primary-color: #2D5F3F !important;
  --secondary-color: #F26419 !important;
}

/* Forzar también en body para algunos casos donde no se resuelve */
body {
  --primary-bg-color: #2D5F3F;
  --primary-bg-gradient-color: #1F4A2D;
}