/* ============================================================================
   TIFOSO MASTER CSS  —  fuente única consolidada (root fix)
   Editar AQUÍ y desplegar con deploy_master.py -> snippet 2520 -> uploads/tifoso/tifoso-master.css
   LiteSpeed lo combina limpio (no lo trocea como al inline). NO tocar LiteSpeed.
   ============================================================================ */

/* ========== [GLOBAL] Header: alinear hamburguesa + buscador + carrito (de 2307) ========== */
.tifoso-header-actions{display:flex !important;align-items:center !important;flex-wrap:nowrap !important;}
.tifoso-header-actions>*{align-self:center !important;margin-top:0 !important;margin-bottom:0 !important;}
.tifoso-search-shell{display:flex !important;align-items:center !important;}
.tifoso-search-form{display:flex !important;align-items:center !important;margin:0 !important;}
.tifoso-menu-toggle{display:inline-flex !important;align-items:center !important;justify-content:center !important;}

/* ========== [GLOBAL] Footer: logo sin recorte (de 2259) ========== */
a.tifoso-ft-brand{overflow:visible !important;display:inline-block !important;max-width:240px !important;}
body a.tifoso-ft-brand img.tifoso-ai-premium-logo-img,body .tifoso-ft-brand img.tifoso-ai-premium-logo-img{width:100% !important;height:auto !important;max-width:240px !important;min-width:0 !important;object-fit:contain !important;}

/* ========== [GLOBAL] Fix distorsiones: imágenes contain + X redondas + flechas slider (de 2287) ========== */
td.product-thumbnail img, .cart_item img, .mini_cart_item img,
.woocommerce-cart-form img, .woocommerce-checkout-review-order-table img,
.tifoso-cart-drawer img, .tifoso-cart-drawer__item img, .cart-collaterals img,
.widget_shopping_cart img { object-fit: contain !important; }
.tifoso-cart-drawer__close, .tifoso-mobile-menu__close {
  width:38px !important;height:38px !important;min-width:38px !important;max-width:38px !important;
  padding:0 !important;border-radius:50% !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;
}
.tifoso-cart-drawer__remove {
  width:30px !important;height:30px !important;min-width:30px !important;max-width:30px !important;
  padding:0 !important;border-radius:50% !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;
}
.tifoso-slider-nav.nav-prev, .tifoso-slider-nav.nav-next, .tifoso-slider-nav {
  width:44px !important;height:44px !important;min-width:44px !important;max-width:44px !important;
  border-radius:50% !important;padding:0 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
}

/* ========== [GLOBAL] Quitar popup de salida del tema (decisión usuario, audit #4) ==========
   Código en conflicto (TIFOSO10 vs TIFOSO5) + cuenta regresiva FALSA (riesgo Omnibus) + reaparece al scrollear.
   Se refuerza por JS en el loader (el tema lo re-inyecta). */
.tfi-exit-overlay, .tfi-exit-popup, .tfi-exit-modal,
#tifoso-exit-popup, #tifoso-exit-backdrop{ display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* ========== [MÓVIL ≤782] Header compacto profesional: UNA fila [☰][logo][cuenta][carrito] + buscador ==========
   Bug raíz: las reglas flex de #tf-mobile-bar (snippet 2440) solo cubrían 481-782px → en teléfonos (≤480)
   la barra quedaba display:block y todo se apilaba con espacios negros. Aquí se cubre TODO ≤782. */
@media (max-width:782px){
  .site-header{ overflow-x:clip !important; }
  .site-header .tifoso-header-inner{ padding:6px 12px 10px !important; width:auto !important; max-width:100% !important; box-sizing:border-box !important;
    display:block !important; }   /* mata el grid del tema en móvil: era lo que inflaba la fila a 436px */
  #tf-search-row .tifoso-search-input, input.tifoso-search-input{ min-width:0 !important; max-width:100% !important; flex:1 1 auto !important; }
  #tf-mobile-bar, #tf-search-row, #tf-search-row form, .tifoso-search-form{
    max-width:100% !important; box-sizing:border-box !important;
  }
  #tf-mobile-bar{ display:flex !important; align-items:center !important; gap:10px !important; width:100% !important; }
  #tf-mobile-bar .tifoso-menu-toggle{
    flex:0 0 44px !important; width:44px !important; height:44px !important; margin:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    color:#F0CE6D !important; background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(240,206,109,.35) !important; border-radius:10px !important;
  }
  #tf-mobile-bar .site-branding{ flex:1 !important; display:flex !important; justify-content:flex-start !important; margin:0 !important; padding:0 !important; }
  #tf-mobile-bar img.tifoso-logo-lockup{ max-height:38px !important; width:auto !important; margin:0 !important; }
  #tf-mobile-bar .tifoso-cart-contents{
    flex:0 0 44px !important; width:44px !important; height:44px !important; margin:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  #tf-mobile-bar .tf-acc-inbar{
    flex:0 0 44px !important; width:44px !important; height:44px !important; margin:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    color:#F0CE6D !important; border:1px solid rgba(240,206,109,.35) !important; border-radius:50% !important;
  }
  /* la fila-grid vieja de acciones (donde flotaba la cuenta sola) desaparece en móvil */
  .tifoso-header-inner > .tifoso-header-actions{ display:none !important; }
  #tf-search-row{ display:block !important; width:100% !important; margin-top:8px !important; }
}

/* ========== [GLOBAL] Menú desktop: puente anti-cierre (gap 6px mataba el hover) ==========
   Entre el item del menú y su dropdown hay 6px muertos: al cruzarlos el hover se rompía y el menú
   se cerraba antes de poder elegir. El ::before es un puente invisible que pertenece al dropdown
   (hovering el puente = hovering el li) → el menú ya no se cierra en el trayecto. */
@media (min-width:783px){
  header .sub-menu, nav .sub-menu{ overflow:visible !important; }
  header li > .sub-menu::before, nav li > .sub-menu::before{
    content:""; position:absolute; left:0; right:0; top:-12px; height:14px; background:transparent;
  }
  /* flyout lateral (Serie A → equipos): puente horizontal */
  header .sub-menu .sub-menu::before, nav .sub-menu .sub-menu::before{
    left:-14px; right:auto; top:0; width:16px; height:100%;
  }
}

/* ========== [GLOBAL] FIX line-clamp títulos de tarjetas (audit #2 crítico) ==========
   Bug: el TEMA pone display:flow-root inline -> el -webkit-line-clamp no oculta la línea 3,
   y se cuela un trozo que sangra sobre el precio.
   Fix ROBUSTO (no depende de ganar la pelea de 'display'): recortar por ALTURA exacta = 2 líneas.
   line-height fija + max-height = 2×line-height + overflow:hidden -> corta limpio, sin sliver. */
html body .woocommerce-loop-product__title,
html body .tf-lc__name,
html body ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box !important;              /* si gana, da puntos suspensivos */
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  line-height:1.25 !important;
  max-height:2.5em !important;                 /* 2 × 1.25 = exactamente 2 líneas */
  overflow:hidden !important;
  padding-top:0 !important; padding-bottom:0 !important;
}

/* ========== [PDP] Título más legible (audit #11: peso 300 -> 600) ========== */
body.single-product h1.product_title,
body.single-product .product_title{ font-weight:600 !important; }

/* ========== [PDP] DEDUP confianza (audit #1 crítico): ocultar bloques trust DUPLICADOS ==========
   Se mantiene: tifoso-guarantee-bar (arriba) + tifoso-availability + botón WhatsApp (tfi-reassure__wa).
   Se ocultan los que repiten lo mismo e inflan la página / entierran el botón comprar. */
body.single-product .tfi-buy-confidence-panel{ display:none !important; }   /* 403px, duplica guarantee-bar, empuja tallas abajo */
body.single-product .tifoso-trust-bar{ display:none !important; }            /* 183px, duplica (2274 desactivado) */
body.single-product .tfi-first-order-inline{ display:none !important; }      /* 3er TIFOSO5 redundante */
body.single-product .tifoso-mobile-pdp-quick-summary__trust{ display:none !important; } /* línea trust duplicada del quick-summary */
/* [PDP móvil] La FOTO en primer plano: el quick-summary (título+precio duplicados) empujaba la galería abajo */
body.single-product .tifoso-mobile-pdp-quick-summary{ display:none !important; }
/* [PDP móvil] co-cita GEO + FAQ + fit-advice NO deben tapar la foto en móvil (regla de 2440 que LiteSpeed botaba).
   En PC siguen visibles más abajo; el contenido sigue en el DOM (SEO intacto). */
@media (max-width:782px){
  html body.single-product .tf-cocita,
  html body.single-product .tf-pdp-faq,
  html body.single-product .tf-fit-advice{ display:none !important; }
}

/* ========== [PDP] Botón Aggiungi al carrello SIEMPRE oro, nunca rojo (audit #5) ==========
   El tema pinta .single_add_to_cart_button en rojo #D62828 por defecto; en PC salía rojo, en móvil oro.
   Unificamos a oro de marca. Deshabilitado = oro apagado (señal clara), consistente en todos los viewports. */
html body.single-product .single_add_to_cart_button.button,
html body.single-product .single_add_to_cart_button.button.alt{
  background-image:linear-gradient(135deg,#f8dd78 0%,#e0b64d 100%) !important;
  background-color:#e0b64d !important;
  color:#1a1a1a !important; border:none !important; text-shadow:none !important;
}
html body.single-product .single_add_to_cart_button.button.disabled,
html body.single-product .single_add_to_cart_button.button.alt.disabled,
html body.single-product .single_add_to_cart_button.button.wc-variation-selection-needed{
  background-image:linear-gradient(135deg,#c7a54e 0%,#9e7e34 100%) !important;  /* oro apagado SÓLIDO (no fantasma) */
  background-color:#9e7e34 !important;
  color:#241f0e !important; box-shadow:none !important; cursor:not-allowed !important;
}

/* ========== [PDP] Dedup confianza también en DESKTOP (audit re-review #2) ==========
   En móvil quedaban 2 bloques; en PC se apilaban 5. Ocultar los duplicados en ambos. */
body.single-product .tifoso-trust-row,
body.single-product .tifoso-pay-assurance,
body.single-product .tifoso-garanzia{ display:none !important; }

/* ========== [PDP] Una sola barra sticky de compra (audit #3) ==========
   Había 3 encimadas. Se mantiene la FUNCIONAL .tfi-mobile-buybar (muta "Scegli taglia"->"Aggiungi
   al carrello" y SÍ agrega). Se ocultan: la roja "ACQUISTA ORA" y la oro redundante .tifoso-sticky-atc
   ("Scegli le opzioni", que NO agrega). La buybar se pone oro por JS runtime (ver loader). */
.tfi-mobile-sticky-buy{ display:none !important; }
body.single-product .tifoso-sticky-atc{ display:none !important; }

/* ========== [PDP] Tiles de parches fuera del blanco chillón (audit #12) ==========
   Integrarlos al tema oscuro sin perder visibilidad del escudo. */
.tifoso-addon-patch-media{ background:#171922 !important; border:1px solid rgba(240,206,109,.22) !important; }

/* ========== [PDP] UNA sola guía de tallas (tarea #37, imagen equivocada Inter Miami) ==========
   Matar la modal crema (#tifoso-size-guide-modal-v2, imagen guida-taglie-uomo-v2.webp = club equivocado).
   Se mantiene la pestaña oscura del tema "GUIDA ALLE TAGLIE — MAGLIE" (PETTO/LUNGHEZZA). El trigger
   "Guida taglie" se redirige a esa pestaña por JS (ver loader). */
#tifoso-size-guide-modal-v2{ display:none !important; }

/* [PDP] Galería: miniaturas consistentes con la imagen principal (mismo fondo/ajuste) */
.flex-control-thumbs img{ object-fit:contain !important; background:#0B0D10 !important; }

/* [PDP] La galeria debe dejar visibles las miniaturas situadas bajo el visor.
   El recorte de slides y zoom pertenece a .flex-viewport y a cada imagen. */
.woocommerce-product-gallery{ overflow:visible !important; }
.woocommerce-product-gallery__image{ overflow:hidden !important; position:relative !important; }
.woocommerce-product-gallery .zoomImg{ z-index:2 !important; }
/* [PDP] El visor del slider DEBE recortar los slides laterales (sin esto, el 2º slide asoma
   como panel blanco al costado — visto en PC a cualquier ancho) */
.woocommerce-product-gallery .flex-viewport{ overflow:hidden !important; position:relative !important; }
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image > a{
  background:#fff !important;
}
/* Antes de que el slider inicialice (wrapper aún hijo directo de la galería), solo se ve la 1ª foto.
   Al inicializar, flexslider mueve el wrapper dentro de .flex-viewport → el selector deja de aplicar
   y TODAS las fotos/miniaturas quedan visibles. Detección de estado estructural, sin clases mágicas. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-of-type){
  display:none;
}

/* [PDP móvil] Visor blanco de borde a borde y sin lupa flotante.
   El zoom se conserva en desktop; en teléfono ya está deshabilitado por seguridad táctil. */
@media (max-width:782px){
  html body.single-product .tifoso-hslide__viewport,
  html body.single-product .tifoso-hslide__slide,
  html body.single-product .tifoso-hslide__slide a,
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .flex-viewport,
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .woocommerce-product-gallery__image,
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .woocommerce-product-gallery__image a{
    background:#fff !important;
  }
  html body.single-product .tifoso-hslide__viewport,
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .flex-viewport{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
    overflow:hidden !important;
  }
  html body.single-product .tifoso-hslide__slide,
  html body.single-product .tifoso-hslide__slide a,
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .woocommerce-product-gallery__wrapper,
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .woocommerce-product-gallery__image,
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .woocommerce-product-gallery__image a{
    height:100% !important;
    max-height:none !important;
  }
  html body.single-product .tifoso-hslide__slide{ padding:0 !important; }
  html body.single-product .tifoso-hslide__slide img:not(.zoomImg),
  html body.single-product .woocommerce-product-gallery:not(.tifoso-hslide) .woocommerce-product-gallery__image img:not(.zoomImg){
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#fff !important;
  }
  html body.single-product .woocommerce-product-gallery__trigger{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* [PDP tablet 783-980] La galeria y el resumen se apilan, pero FlexSlider deja
   las miniaturas fuera de la altura declarada de .woocommerce-product-gallery.
   Reservar exactamente una fila de thumbs + separacion evita que invadan el H1. */
@media (min-width:783px) and (max-width:980px){
  html body.single-product div.product{
    display:block !important;
  }
  html body.single-product div.product .woocommerce-product-gallery,
  html body.single-product div.product div.images{
    float:none !important;
    width:min(100%, 520px) !important;
    max-width:520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:calc(min(100vw - 28px, 520px) / 4 + 34px) !important;
  }
  html body.single-product div.product .summary{
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* Final gallery surface owner: consistent catalog-white canvas at every width. */
html body.single-product div.product .woocommerce-product-gallery .flex-viewport,
html body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image,
html body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image > a{
  background-color:#fff !important;
  background-image:none !important;
}

/* Final gallery controls owner: the native zoom badge clashes with the custom
   product viewer. Keep every product thumbnail on the same clean white canvas. */
html body.single-product .woocommerce-product-gallery__trigger{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html body.single-product .woocommerce-product-gallery .zoomImg{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img,
html body.single-product div.product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs img{
  background:#fff !important;
  background-image:none !important;
  object-fit:contain !important;
}
html body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
html body.single-product div.product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs img.flex-active{
  background:#fff !important;
  border-color:rgba(229,184,66,.85) !important;
}

/* [HOME] Hover con vida en las tarjetas de las filas por liga */
.tf-lc{ transition:transform .18s ease, box-shadow .18s ease !important; }
.tf-lc:hover{ transform:translateY(-4px) !important; box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(240,206,109,.25) !important; }