/************ VARIABLES DE COLOR ************/
:root{
  --azul: #1a4d80;      /* azul más suave */
  --naranja: #f28c28;   /* color de precio/acentos */
  --gris: #666;
  --gris-tachado: #888;
}

/************ TIPOGRAFÍA GLOBAL ************/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
body{ font-family:'Montserrat',sans-serif !important; font-weight:400; line-height:1.5; }
h1,h2,h3,h4,h5,h6{ font-family:'Montserrat',sans-serif !important; font-weight:600; line-height:1.3; }

/************ TÍTULOS Y ENLACES (AZUL) ************/
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title{ color:var(--azul) !important; font-weight:700; }
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover{ color:var(--naranja) !important; }
/* Estilo normal del botón */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit {
    background-color: #f28c28; /* Naranja */
    color: #ffffff; /* Texto blanco */
    border: none;
    padding: 12px 20px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Hover: blanco con borde naranja y texto azul */
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover, 
.woocommerce #respond input#submit:hover {
    background-color: #ffffff; /* Fondo blanco */
    color: #003366; /* Azul del texto */
    border: 2px solid #f28c28; /* Borde naranja */
}
/* Estado normal: naranja con texto blanco */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: #ff6600 !important;
  color: #ffffff !important;
  border: 2px solid #ff6600 !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Desktop hover: blanco con borde naranja y texto azul */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: #ffffff !important;
  color: #003366 !important;
  border-color: #ff6600!important;
}

/* Móvil (no hay hover): aplicar el mismo efecto en focus/active */
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:focus,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
  background-color: #ffffff !important;
  color: #003366 !important;
  border-color: #ff6600 !important;
  box-shadow: 0 0 0 3px rgba(242,140,40,.15) !important; /* feedback suave de toque */
  outline: none !important;
}
/* Categorías siempre en azul */
/* Forzar categorías a azul */
.woocommerce .widget_product_categories ul li a,
.woocommerce .widget_product_categories ul li a:visited,
.woocommerce .widget_product_categories ul li a:hover,
.woocommerce .widget_product_categories ul li a:active {
  color: #003366 !important;
  text-decoration: none !important;
}
.woocommerce .widget_product_categories ul li a,
.woocommerce .widget_layered_nav ul li a,
.woocommerce .widget_layered_nav_filters ul li a,
.woocommerce .widget_layered_nav ul li.chosen a {
  color: #003366 !important;
}

.woocommerce .widget_product_categories ul li a:hover,
.woocommerce .widget_layered_nav ul li a:hover {
  color: #003366 !important;
  text-decoration: underline; /* opcional si querés destacar al pasar el mouse */
}
/* === CATEGORÍAS SIEMPRE AZULES (producto y widgets) === */

/* En la ficha de producto, debajo de SKU (meta) */
body.woocommerce div.product .product_meta .posted_in a,
body.woocommerce div.product .product_meta .posted_in a:link,
body.woocommerce div.product .product_meta .posted_in a:visited,
body.woocommerce div.product .product_meta .posted_in a:hover,
body.woocommerce div.product .product_meta .posted_in a:active,
body.woocommerce div.product .product_meta .posted_in a:focus {
  color: #1a4d80 !important;   /* azul suave */
  text-decoration: none !important;
}

/* En listados/sidebars: widget de categorías de producto */
body.woocommerce .widget_product_categories ul li a,
body.woocommerce .widget_product_categories ul li a:link,
body.woocommerce .widget_product_categories ul li a:visited,
body.woocommerce .widget_product_categories ul li a:hover,
body.woocommerce .widget_product_categories ul li a:active,
body.woocommerce .widget_product_categories ul li a:focus {
  color: #1a4d80 !important;
  text-decoration: none !important;
}

/* En migas de pan (breadcrumbs), por si también salen fucsia */
body.woocommerce .woocommerce-breadcrumb a,
body.woocommerce .woocommerce-breadcrumb a:link,
body.woocommerce .woocommerce-breadcrumb a:visited,
body.woocommerce .woocommerce-breadcrumb a:hover,
body.woocommerce .woocommerce-breadcrumb a:active,
body.woocommerce .woocommerce-breadcrumb a:focus {
  color: #1a4d80 !important;
  text-decoration: none !important;
}
/* Fuerza el color primario de tema/Elementor al azul suave */
:root, body {
  --primary: #1a4d80 !important;
  --primary-color: #1a4d80 !important;
  --color-primary: #1a4d80 !important;
  --e-global-color-primary: #1a4d80 !important;   /* Elementor */
  --e-global-color-text: #1a4d80 !important;      /* a veces usado en enlaces */
}
/* Categorías en la FICHA de producto (debajo del SKU) */
body.woocommerce.single-product div.product .product_meta .posted_in a,
body.woocommerce.single-product div.product .product_meta .posted_in a:link,
body.woocommerce.single-product div.product .product_meta .posted_in a:visited,
body.woocommerce.single-product div.product .product_meta .posted_in a:hover,
body.woocommerce.single-product div.product .product_meta .posted_in a:active,
body.woocommerce.single-product div.product .product_meta .posted_in a:focus {
  color: #1a4d80 !important;
  text-decoration: none !important;
}
/* Forzar color azul en categorías y etiquetas de productos */
.product_meta .posted_in a,
.product_meta .tagged_as a {
  color: #1a4d80 !important; /* azul sobrio */
}
/* --- Precios en naranja --- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
    color: #f28c28 !important;
    font-weight: bold;
}

/* --- Botones hover en blanco con borde naranja --- */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #content input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page #respond input#submit:hover,
.woocommerce-page #content input.button:hover,
.woocommerce .button:hover {
    background-color: #ffffff !important;
    color: #003366 !important;
    border: 2px solid #f28c28 !important;
}

/* --- Categorías y etiquetas en azul --- */
.product_meta a {
    color: #003366 !important;
    font-weight: 500;
}
.product_meta a:hover {
    color: #f28c28 !important;
}

/* --- Aire en productos relacionados --- */
.woocommerce .related.products {
    margin-top: 50px;
    margin-bottom: 40px;
}
.woocommerce .related.products h2 {
    margin-bottom: 25px;
}

/* --- Ajustes en móviles --- */
@media (max-width: 768px) {
    /* Precios un poco más chicos */
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 1.1em !important;
    }

    /* Título del producto más proporcionado */
    .woocommerce div.product .product_title {
        font-size: 1.4em !important;
        line-height: 1.2em;
    }

    /* Más aire en productos relacionados, pero moderado */
    .woocommerce .related.products {
        margin-top: 30px;
        margin-bottom: 25px;
    }

    .woocommerce .related.products h2 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }
sale {
  background: #f28c28 !important; /* naranja de marca */
  color: #ffffff !important;      /* texto en blanco */
  font-weight: 600 !important;    /* un poco más fuerte */
  text-transform: uppercase;      /* todo en mayúsculas */
  border-radius: 6px !important;  /* bordes suaves */
  padding: 0.35em 0.7em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; /* sombra cajita */
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  left: auto !important;
  font-size: 0.9rem !important;   /* tamaño adaptable */
}
	/* Ocultar cartel en grillas/listados */
.woocommerce ul.products li.product .onsale {
  display: none !important;
}

/* Estilo del cartel solo en ficha de producto */
.single-product .onsale {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;   /* ubicado a la izquierda */
  right: auto !important;
  z-index: 5 !important;

  background: #f28c28 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 0.35em 0.7em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
  text-transform: uppercase;
  font-size: 0.9rem !important;
}
	/* === FORZAR badge de Oferta unificado en WooCommerce === */

/* Aseguramos que el contenedor permita posicionar el badge */
.woocommerce ul.products li.product,
.woocommerce div.product div.images,
.woocommerce div.product {
  position: relative !important;
}

/* Franja compacta beneficios – versión estética final */
.pd-beneficios--prod{
  background:#fff8f2 !important;          /* fondo suave */
  border:1px solid #ffd9bf !important;     /* bordecito cálido */
  border-radius:10px !important;
  padding:12px 16px !important;
  margin:14px 0 !important;
  font-size:15px !important;
  color:#333 !important;
}

.pd-beneficios__wrap{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:center !important;
}

.pd-beneficios__item{
  font-weight:600 !important;
  color:#333 !important;
  white-space:nowrap !important;
}
.pd-beneficios__item strong{
  color:#ff6a00 !important;                /* naranja marca */
}

.pd-beneficios__sep{
  opacity:.4 !important;
  font-weight:700 !important;
  color:#e3a366 !important;
}

/* Móvil */
@media (max-width:480px){
  .pd-beneficios__wrap{ gap:6px !important; }
  .pd-beneficios__item{ white-space:normal !important; }
  .pd-beneficios__sep{ display:none !important; }
}
/* Franja compacta con sombra y borde más marcado */
.pd-beneficios--prod {
  background: #fff8f2 !important;
  border: 1px solid #f5c89c !important; /* borde un poquito más fuerte */
  border-radius: 10px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.08) !important; /* sombra más visible */
}R
/* Ajuste de contraste para que se note más en pantallas claras */
.pd-beneficios--prod {
  border: 1px solid #f2b97d !important; /* borde un poco más oscuro */
  box-shadow: 0 3px 14px rgba(0,0,0,.12) !important; /* sombra más marcada */
}
/* Corregir ancho del botón Añadir al carrito */
.single-product .single_add_to_cart_button {
  display: inline-block !important;
  width: auto !important;
  min-width: 180px; /* ancho mínimo, ajustable */
}
/* Fix: el botón no debe ocupar todo el ancho en escritorio */
html body.single-product div.product form.cart .button,
html body.single-product div.product form.cart .single_add_to_cart_button,
html body.single-product div.product form.cart button.single_add_to_cart_button {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;
}

/* Por si el tema fuerza la fila a estirar los hijos */
html body.single-product div.product form.cart {
  align-items: center !important;
}

/* Opcional: en móvil que sí ocupe todo para mejor toque */
@media (max-width: 480px){
  html body.single-product div.product form.cart .button,
  html body.single-product div.product form.cart .single_add_to_cart_button,
  html body.single-product div.product form.cart button.single_add_to_cart_button {
    width: 100% !important;
    display: block !important;
  }
}
@media (max-width:480px){
  html body.single-product div.product form.cart .single_add_to_cart_button{
    width:100% !important;
    display:block !important;
  }
}
.single-product form.cart .variations{ margin-bottom:10px !important; }
.single-product .pd-beneficios--prod{ margin:12px 0 !important; }
.single-product form.cart .single_add_to_cart_button{ margin-top:10px !important; }
/* Quitar sombra gris y aplicar borde naranja al foco */
.variations_form select {
    box-shadow: none !important;
    border: 1px solid #ccc; /* borde normal gris claro */
    border-radius: 4px;
    transition: border-color 0.2s ease-in-out;
}

.variations_form select:focus {
    outline: none !important;
    border-color: #f36f21 !important; /* naranja Porras Deportes */
    box-shadow: none !important;
}
/* Quitar sombra gris y aplicar borde naranja al foco */
.variations_form select {
    box-shadow: none !important;
	
    -webkit-box-shadow: none !important;
    border: 1px solid #ccc !important; /* borde normal gris claro */
    border-radius: 4px;
    background-color: #fff !important;
    transition: border-color 0.2s ease-in-out;
}

.variations_form select:focus {
    outline: none !important;
    border-color: #f36f21 !important; /* naranja Porras Deportes */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
/* Estilo premium para todos los selectores */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 36px 8px 12px; /* espacio para la flecha */
    font-size: 15px;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ff6600' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/* Efecto al enfocar */
select:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 3px rgba(255,102,0,0.15);
    outline: none;
}

/* Mejora para móviles */
@media (max-width: 768px) {
    select {
        padding-right: 42px; /* más espacio para la flecha */
        background-size: 20px 20px; /* flecha más grande */
        font-size: 16px; /* texto más grande */
    }
}
.single-product form.cart .quantity { display: none !important; }
/* 1) Apaga TODAS las sombras posibles */
.variations select,
.woocommerce div.product form.cart .variations select,
.woocommerce .form-row select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--single .select2-selection__rendered {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* 2) Estilo premium coherente con tu marca */
.variations select,
.woocommerce .form-row select,
.select2-container .select2-selection--single {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 36px 8px 12px;
    font-size: 15px;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* sombra sutil y limpia */
    transition: all 0.2s ease-in-out;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23ff6600' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/* Focus con el naranja de marca */
.variations select:focus,
.woocommerce .form-row select:focus,
.select2-container--default .select2-selection--single:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 0 3px rgba(255,102,0,0.15) !important;
    outline: none !important;
}

/* Móvil: flecha y área táctil más grande */
@media (max-width: 768px) {
    .variations select,
    .woocommerce .form-row select,
    .select2-container .select2-selection--single {
        padding-right: 42px;
        background-size: 20px 20px;
        font-size: 16px;
    }
}
/* Estilo general del bloque de beneficios */
.pd-box {
  background: #fff;
  border: 2px solid #ff6600; /* Naranja marca */
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  max-width: 100%;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.pd-off {
  color: #ff6600;
  font-size: 16px;
}
.pd-cuotas {
  color: #0066cc;
}
.pd-envio {
  color: #cc0000;
}
.pd-online {
  color: #777;
  font-size: 12px;
  margin: 5px 0;
}

/* Mostrar por defecto el bloque 15%, ocultar el 20% */
.pd-benef-15 {
  display: block;
}
.pd-benef-20 {
  display: none;
}/* Mostrar 20% si el producto tiene la etiqueta 20off-online */
.single-product.product_tag-20off-online .pd-benef-15 { display: none !important; }
.single-product.product_tag-20off-online .pd-benef-20 { display: block !important; }

/* Compatibilidad con la clase alternativa */
.single-product.tag-20off-online .pd-benef-15 { display: none !important; }
.single-product.tag-20off-online .pd-benef-20 { display: block !important; }
/* Mostrar 20% si el producto tiene la etiqueta 20off-online */
.single-product.product_tag-20off-online .pd-benef-15 { display: none !important; }
.single-product.product_tag-20off-online .pd-benef-20 { display: block !important; }
/* 15% por defecto */
.pd-benef-15{display:block}
.pd-benef-20{display:none}
/* Ocultar SOLO la franja global del 15% en productos de hockey césped */
body.single-product.product_cat-hockey-cesped .franja15-global {
  display: none !important;
}
/* Ocultar SOLO la franja global del 15% en productos de hockey césped */
body.single-product.product_cat-hockey-cesped .franja15-global {
  display: none !important;
}
document.addEventListener('DOMContentLoaded', function () {
  var body = document.body;
  if (!body.classList.contains('single-product')) return;

  // Zona donde suele estar la descripción corta / beneficios
  var scope = document.querySelector('.product .summary, .product .entry-summary') || document;

  // Normalizador simple (minúsculas + sin tildes + trim)
  function norm(s){return (s||'').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').replace(/\s+/g,' ').trim();}

  // ¿El nodo parece ser el bloque de 20%?
  function isTwenty(txt){
    var t = norm(txt);
    var has20 = /(^|[^0-9])20\s*%([^0-9]|$)/.test(t);
    var mentions = /(off|transferencia|efectivo)/.test(t);
    return has20 && mentions;
  }

  // Envuelve un nodo en .franja20-hockey sin duplicar
  function wrapAsTwenty(node){
    if (!node || node.closest('.franja20-hockey')) return;
    var wrap = document.createElement('div');
    wrap.className = 'franja20-hockey';
    node.parentNode.insertBefore(wrap, node);
    wrap.appendChild(node);
  }

  // Buscar candidatos y envolver automáticamente
  var candidates = scope.querySelectorAll('p, div, section, article, span, li');
  candidates.forEach(function(el){
    try {
      if (isTwenty(el.textContent)) {
        // Busco el contenedor "chico" razonable
        var block = el.closest('.elementor-widget, .elementor-widget-container, p, div, section, article') || el;
        wrapAsTwenty(block);
      }
    } catch(e){}
  });

  // Por si Elementor inyecta tarde, observo cambios rápidos y reaplico una vez
  var once = false;
  var mo = new MutationObserver(function(){
    if (once) return; once = true;
    setTimeout(function(){
      var nodes = scope.querySelectorAll('p, div, section, article, span, li');
      nodes.forEach(function(el){
        try { if (isTwenty(el.textContent)) wrapAsTwenty(el.closest('p, div, section, article')||el); } catch(e){}
      });
    }, 200);
  });
  mo.observe(scope, { childList: true, subtree: true });
});
/* Default: mostrar 15% y ocultar 20% */
.pd-benef-15 { display: block; }
.pd-benef-20 { display: none !important; }

/* Hockey césped: solo 20% */
body.single-product.product_cat-hockey-cesped .pd-benef-15 { display: none !important; }
body.single-product.product_cat-hockey-cesped .pd-benef-20 { display: block !important; }
/* —— Beneficios: regla definitiva —— */

/* Por defecto: mostrar 15% y ocultar 20% */
.pd-benef-15 { display: block; }
.pd-benef-20 { display: none !important; }

/* Hockey césped: solo 20% (con redundancias por si cambia la clase del <body>) */
body.single-product.product_cat-hockey-cesped .pd-benef-15,
body.single-product[class*="product_cat-hockey-cesped"] .pd-benef-15,
body.single-product[class*="hockey-cesped"] .pd-benef-15 {
  display: none !important;
}

body.single-product.product_cat-hockey-cesped .pd-benef-20,
body.single-product[class*="product_cat-hockey-cesped"] .pd-benef-20,
body.single-product[class*="hockey-cesped"] .pd-benef-20 {
  display: block !important;
}