/* Colores de marca, tomados del logo de cada tienda.
   Cada tienda sobreescribe estas dos variables en su propio CSS. */
:root{--hw-marca:#3a1818;--hw-marca2:#6a2f2f}

/* HW · Estilo premium: hero, tarjetas y carruseles */

/* ---------- HERO ---------- */
/* Hero a todo el ancho de la ventana, aunque el contenido este limitado a 1300 px */
.hw-hero2{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-bottom:52px;overflow:hidden;min-height:460px;display:flex;align-items:center;
  background:#12151c center/cover no-repeat}
.hw-hero2-txt-in{max-width:var(--hw-ancho,1300px);margin:0 auto;width:100%;padding:0 20px}
.hw-hero2::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,10,15,.88) 0%,rgba(8,10,15,.66) 42%,rgba(8,10,15,.12) 78%,rgba(8,10,15,0) 100%)}
.hw-hero2-txt{position:relative;z-index:2;padding:56px 0;max-width:620px;color:#fff;
  animation:hwSube .9s cubic-bezier(.2,.7,.3,1) both}
.hw-hero2-eyebrow{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#e9c972;margin:0 0 16px;font-weight:700}
.hw-hero2 h1{font-size:clamp(28px,3.6vw,46px);line-height:1.12;margin:0 0 16px;color:#fff !important;
  font-weight:800;letter-spacing:-.02em}
.hw-hero2 p{font-size:17px;line-height:1.6;color:#d3d7e0 !important;margin:0 0 28px;max-width:480px}
.hw-hero2-btn{display:inline-flex;align-items:center;gap:10px;background:#e9c972;color:#12151c;
  font-weight:700;padding:14px 30px;border-radius:30px;text-decoration:none;font-size:15px;
  transition:transform .22s,box-shadow .22s}
.hw-hero2-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(233,201,114,.34);color:#12151c}
@keyframes hwSube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(max-width:780px){
  .hw-hero2{min-height:360px}
  .hw-hero2-txt{padding:34px 0}
  .hw-hero2::after{background:linear-gradient(180deg,rgba(8,10,15,.5) 0%,rgba(8,10,15,.9) 100%)}
}

/* ---------- TARJETAS PREMIUM ---------- */
ul.products li.product{background:#fff;border:1px solid #eceef1;border-radius:14px;
  padding:18px 18px 22px;transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s,border-color .26s;
  position:relative;overflow:hidden}
ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(16,20,30,.13);
  border-color:#dfe3e9}
/* Aire alrededor de la foto: se veian pegadas unas a otras */
ul.products li.product a img{border-radius:10px;background:#fafbfc;padding:18px;
  box-sizing:border-box;margin-bottom:14px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
ul.products li.product:hover a img{transform:scale(1.055)}
ul.products li.product .price{color:#12151c}
ul.products li.product .button{background:#12151c;color:#fff;border-radius:24px;padding:9px 20px;
  transition:background .22s,transform .22s}
ul.products li.product .button:hover{background:#2a3040;transform:translateY(-1px);color:#fff}

/* Entrada escalonada al hacer scroll */
.hw-anim{opacity:0;transform:translateY(22px)}
.hw-anim.hw-visible{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}

/* ---------- CARRUSEL DE UNA FILA ---------- */
.hw-slider{position:relative}
/* El scroll horizontal vive en este envoltorio (creado por JS), no en el
   propio ul.products: si el overflow-x va en el ul, Safari calcula su
   scrollHeight unos pixeles mayor que el clientHeight (por el padding-bottom
   del propio ul) y "traga" el gesto de rueda vertical en vez de dejarlo
   pasar a la pagina, aunque no haya nada que desplazar dentro. */
.hw-slider-track{overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.hw-slider-track::-webkit-scrollbar{display:none}
.hw-slider ul.products{display:flex !important;grid-template-columns:none !important;
  overflow:visible !important;gap:20px;padding:6px 2px 16px !important}
.hw-slider ul.products li.product{flex:0 0 clamp(190px,23%,290px);scroll-snap-align:start}
.hw-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;padding:0 !important;border-radius:50%;border:1px solid #e2e5ea;background:#fff !important;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(16,20,30,.12);transition:background .2s,transform .2s}
.hw-nav:hover{background:#12151c !important;transform:translateY(-50%) scale(1.06)}
.hw-nav:hover svg{stroke:#fff}
.hw-nav svg{width:19px;height:19px;stroke:#12151c;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.hw-nav.prev{left:-14px}
.hw-nav.next{right:-14px}
@media(max-width:780px){.hw-nav{display:none}}

/* Cabeceras de seccion */
.hw-sec-head h2{font-weight:800;letter-spacing:-.01em}

/* Mas separacion entre tarjetas y foto sobre fondo neutro */
ul.products{gap:30px 26px !important}
.hw-slider ul.products{gap:26px !important}
ul.products li.product .hw-foto{background:#f7f8fa;border-radius:10px;padding:10px;margin-bottom:12px}

/* ---------- Titulos, precios y boton unificados ---------- */

/* Titulos de producto siempre en negro (el tema los ponia del color de marca) */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product a{color:#12151c !important}
ul.products li.product .button{color:#fff !important}

/* Precios mas destacados en todas partes */
ul.products li.product .price,
ul.products li.product .price .amount,
ul.products li.product .price bdi{font-size:19px !important;font-weight:800 !important;
  color:#12151c !important}
.hw-franja ul.products li.product .price bdi{color:#12151c !important}

/* Ficha de producto: precio grande y boton igual que en la rejilla */
.single-product p.price,
.single-product p.price .amount,
.single-product p.price bdi{font-size:30px !important;font-weight:800 !important;
  color:#12151c !important;margin-bottom:18px}
.single-product .product_title{color:#12151c !important}

.single-product .single_add_to_cart_button,
.single-product a.button.product_type_external{
  background:#12151c !important;color:#fff !important;border-radius:24px !important;
  padding:13px 30px !important;font-size:15px !important;font-weight:700 !important;
  text-transform:none !important;letter-spacing:normal !important;
  border:0 !important;transition:background .22s,transform .22s}
.single-product .single_add_to_cart_button:hover,
.single-product a.button.product_type_external:hover{
  background:#2a3040 !important;transform:translateY(-1px);color:#fff !important}

/* ---------- Ancho 1300 px en TODAS las paginas ---------- */
/* Home, tienda, categorias, ficha de producto, busqueda y paginas sueltas */
body .site-main,
body .site-main > .page-content,
body.woocommerce .site-main,
body.woocommerce-page .site-main,
body.archive .site-main,
body.single-product .site-main,
body.search .site-main,
body.page .site-main{max-width:var(--hw-ancho,1300px) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:20px;padding-right:20px;box-sizing:border-box}

/* El hero y la franja siguen a todo el ancho: se excluyen del limite */
.hw-hero2,.hw-franja{max-width:none !important;padding-left:0;padding-right:0}
.hw-franja{padding:44px 20px 30px}

/* Contenedores de Elementor dentro del mismo ancho */
body .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:var(--hw-ancho,1300px) !important}

/* ---------- Slider azul de productos (el original) ---------- */
.hw-hero{position:relative;margin:0 0 42px;border-radius:14px;overflow:hidden;background:#111}
.hw-hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.hw-hero-track::-webkit-scrollbar{display:none}
.hw-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:340px;display:flex;
 align-items:center;gap:32px;padding:38px 46px;background:linear-gradient(115deg,var(--hw-marca) 0%,var(--hw-marca2) 100%);color:#fff}
.hw-slide img{width:240px;height:240px;object-fit:contain;background:#fff;border-radius:12px;padding:12px;flex:0 0 auto}
.hw-slide-txt{flex:1;min-width:0}
.hw-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin:0 0 10px}
.hw-slide h2{font-size:26px;line-height:1.25;margin:0 0 14px;color:#fff}
.hw-price{font-size:23px;font-weight:700;margin:0 0 18px}
.hw-btn{display:inline-block;background:#ff9900;color:#111;font-weight:700;padding:12px 26px;
 border-radius:7px;text-decoration:none}
.hw-btn:hover{background:#ffad33;color:#111}

/* Va justo debajo del hero, dentro del ancho de 1300 px */
.hw-hero{max-width:var(--hw-ancho,1300px);margin:0 auto 46px}

/* ---------- Enlaces sin subrayado en toda la web ---------- */
a,
a:hover,
a:focus,
ul.products li.product a,
.hw-panel nav a,
.hw-pie-col a,
.hw-pie-bajo nav a,
.hw-sec-head a,
.woocommerce-breadcrumb a,
.hw-hero2-btn,
.hw-btn{text-decoration:none !important}

/* ---------- Color de marca en pie, banner y botones ---------- */
.hw-pie{background:linear-gradient(160deg,var(--hw-marca) 0%,var(--hw-marca2) 100%)}
.hw-pie-col p,
.hw-pie-col a,
.hw-pie-bajo small,
.hw-pie-bajo nav a{color:#fff !important}
.hw-pie-col a:hover,
.hw-pie-bajo nav a:hover{color:#fff !important;opacity:.75}
.hw-hero{background:var(--hw-marca)}
.hw-slide{background:linear-gradient(115deg,var(--hw-marca) 0%,var(--hw-marca2) 100%) !important}
.hw-btn{background:#fff;color:var(--hw-marca) !important;font-weight:700}
.hw-btn:hover{background:#f3f4f6;color:var(--hw-marca) !important}

/* Botones de producto con el color de la marca */
ul.products li.product .button,
.single-product .single_add_to_cart_button,
.single-product a.button.product_type_external{background:var(--hw-marca) !important}
ul.products li.product .button:hover,
.single-product .single_add_to_cart_button:hover,
.single-product a.button.product_type_external:hover{background:var(--hw-marca2) !important}

/* Boton del hero y detalles */
.hw-hero2-btn{background:var(--hw-marca2);color:#fff !important}
.hw-hero2-btn:hover{background:var(--hw-marca);color:#fff !important;box-shadow:0 12px 26px rgba(0,0,0,.3)}
.hw-hero2-eyebrow{color:#fff;opacity:.85}
.hw-search input[type=search]:focus{border-color:var(--hw-marca2)}
.hw-burger span{background:#000 !important}
.hw-panel-head strong{color:var(--hw-marca)}

/* El boton hamburguesa heredaba fondo oscuro del kit global de Elementor
   (aplica a todos los <button>): se anula para que quede transparente. */
.hw-burger{background:transparent !important;border:0 !important;padding:8px !important;width:44px !important}

/* ---------- Menu deslizable con el color de la marca ---------- */
.hw-panel{background:linear-gradient(165deg,var(--hw-marca) 0%,var(--hw-marca2) 100%) !important}
.hw-panel-head{border-bottom-color:rgba(255,255,255,.18) !important}
.hw-panel-head strong{color:#fff !important}
.hw-panel-close{color:rgba(255,255,255,.85) !important;background:transparent !important;
  border:0 !important;padding:0 !important;font-size:26px !important}
.hw-panel-close:hover{color:#fff !important;background:transparent !important}
.hw-panel nav a{color:rgba(255,255,255,.92) !important;
  border-bottom-color:rgba(255,255,255,.12) !important}
.hw-panel nav a:hover{background:rgba(255,255,255,.12) !important;color:#fff !important;
  padding-left:26px}
.hw-panel nav a{transition:background .2s,padding-left .2s}

/* ---------- Contenido de la tarjeta centrado ---------- */
ul.products li.product{text-align:center}
ul.products li.product .woocommerce-loop-product__title{text-align:center}
ul.products li.product .price{text-align:center;display:block}
ul.products li.product .button{align-self:center !important;margin-left:auto;margin-right:auto;
  display:inline-block}
ul.products li.product a img{margin-left:auto;margin-right:auto}
/* La estrella de valoracion, si aparece, tambien centrada */
ul.products li.product .star-rating{margin-left:auto;margin-right:auto}

/* Aire debajo del boton de Amazon, que quedaba pegado al borde */
ul.products li.product .button{margin-bottom:8px !important}
ul.products li.product{padding-bottom:26px !important}

/* Boton "Ver en Amazon" de la FICHA, mas separado del precio y la info */
.single-product .single_add_to_cart_button,
.single-product a.button.product_type_external{
  margin-top:22px !important;margin-bottom:22px !important;display:inline-block}
.single-product form.cart,
.single-product .cart{margin:22px 0 !important}

/* Descripcion del producto en el slider azul destacado */
.hw-slide-desc{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.55;
  margin:0 0 16px;max-width:440px}
@media(max-width:780px){.hw-slide-desc{display:none}}

/* Anti-parpadeo de la poza aleatoria: hasta que el JS mezcle y muestre 12,
   se ocultan los items a partir del 12 (grid) y del 4 (slider). El JS pone
   display en linea, que gana a estas reglas. */
.hw-shuffle ul.products > li.product:nth-child(n+13){display:none}
.hw-shuffle.hw-hero .hw-slide:nth-child(n+5){display:none}

/* Banner azul: forzar imagen-izquierda / texto-derecha. Algun CSS del tema
   apilaba imagen y texto en vertical; se refuerza con especificidad + !important
   y flex-direction:row explicito. */
.hw-hero .hw-hero-track .hw-slide{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:32px !important;
  text-align:left !important;
}
.hw-hero .hw-hero-track .hw-slide > img{
  order:0 !important;
  width:240px !important;height:240px !important;
  flex:0 0 240px !important;max-width:240px !important;
  object-fit:contain !important;background:#fff !important;
  border-radius:12px !important;padding:12px !important;margin:0 !important;
}
.hw-hero .hw-hero-track .hw-slide > .hw-slide-txt{
  order:1 !important;flex:1 1 auto !important;min-width:0 !important;text-align:left !important;
}
@media(max-width:780px){
  .hw-hero .hw-hero-track .hw-slide{flex-direction:column !important;text-align:center !important}
  .hw-hero .hw-hero-track .hw-slide > .hw-slide-txt{text-align:center !important}
}

/* Texto del banner azul (Seleccion destacada) siempre blanco: el h2 y el
   eyebrow heredaban un color oscuro del tema y quedaban casi ilegibles
   sobre el degradado de marca. */
.hw-hero .hw-slide-txt h2{color:#fff !important}
.hw-hero .hw-slide-txt .hw-eyebrow{color:#fff !important;opacity:.85 !important}

/* Puntos de navegacion del banner (Seleccion destacada): mas aire abajo
   para que no tapen el boton, y los puntos superpuestos en ese hueco. */
.hw-hero .hw-slide{padding-bottom:56px !important}
.hw-dots{position:absolute;bottom:14px;left:0;right:0;z-index:3;text-align:center}
.hw-dots button{appearance:none;border:0 !important;padding:0 !important;cursor:pointer;display:inline-block;
  width:9px !important;height:9px !important;min-width:0;border-radius:50% !important;
  background:rgba(255,255,255,.45) !important;margin:0 4px;
  transition:background .2s,transform .2s}
.hw-dots button:hover{background:rgba(255,255,255,.75) !important}
.hw-dots button.hw-dot-activo{background:#fff !important;transform:scale(1.15)}

/* hw-migas-bajar: separar el breadcrumb de la cabecera en la ficha de producto */
body.single-product .woocommerce-breadcrumb{margin-top:28px}

/* hw-migas-cat: sin breadcrumb en las paginas de categoria */
body.tax-product_cat .woocommerce-breadcrumb{display:none}

/* hw-cookies-compacto: banner de cookies mas discreto y botones con el color acento */
#cookies-eu-banner{padding:10px 16px !important;font-size:.85rem !important;min-height:0 !important;line-height:1.45;box-shadow:0 -4px 18px rgba(0,0,0,.12)}
#cookies-eu-accept,#cookies-eu-reject,#cookies-eu-settings,.cookies-eu-accept,.cookies-eu-reject,.cookies-eu-settings{background:var(--hw-marca2) !important;color:#fff !important;border:0 !important;border-radius:999px !important;padding:8px 18px !important;margin:4px !important;text-transform:none !important;font-size:.85rem !important;letter-spacing:0 !important}
#cookies-eu-accept:hover,#cookies-eu-reject:hover,#cookies-eu-settings:hover,.cookies-eu-accept:hover,.cookies-eu-reject:hover{filter:brightness(1.12)}
#cookies-eu-more{color:var(--hw-marca2) !important;font-weight:700}

/* hw-btn-hero-blanco: letras blancas en el boton Ver la tienda del hero */
.hw-hero2-btn,.hw-hero2-btn:hover{color:#fff !important}

/* hw-cookies-tarjeta: banner de cookies en tarjeta (abajo-derecha, estrecho) */
#cookies-eu-banner{width:auto !important;max-width:370px !important;left:auto !important;right:16px !important;bottom:16px !important;border-radius:14px !important;text-align:left !important;border:1px solid #e5e7eb}
@media(max-width:600px){#cookies-eu-banner{right:10px;left:10px !important;max-width:none !important}}

/* hw-slide-full: la descripcion de la Seleccion destacada a todo el ancho; enlace en la imagen */
.hw-slide-desc{max-width:none !important}
.hw-slide .hw-slide-imglink{flex:0 0 auto;display:block}

/* hw-slide-foto-grande: foto de la Seleccion destacada mas grande y con menos padding */
.hw-slide img{width:300px !important;height:300px !important;padding:4px !important}
@media(max-width:900px){.hw-slide img{width:220px !important;height:220px !important}}

/* hw-cat-cabecera: titulo de categoria/tienda centrado sobre banda degradada de la marca */
.woocommerce-products-header{background:linear-gradient(115deg,var(--hw-marca) 0%,var(--hw-marca2) 100%);border-radius:18px;padding:38px 24px;margin:6px 0 30px;text-align:center;box-shadow:0 10px 28px rgba(0,0,0,.10)}
.woocommerce-products-header h1.page-title{color:#fff !important;margin:0;font-size:clamp(26px,3.4vw,38px);letter-spacing:.02em}
.woocommerce-products-header .term-description,.woocommerce-products-header p{color:rgba(255,255,255,.88)}

/* hw-paginacion: paginacion premium en tienda y categorias */
.woocommerce-pagination{margin:34px auto 50px;text-align:center}
.woocommerce-pagination ul.page-numbers{display:inline-flex;gap:8px;border:0;margin:0;padding:0}
.woocommerce-pagination ul.page-numbers li{border:0;margin:0}
.woocommerce-pagination .page-numbers li .page-numbers{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid #e2e5ea;color:#1f2430;font-weight:600;font-size:14.5px;text-decoration:none;box-shadow:0 2px 10px rgba(16,20,30,.05);transition:box-shadow .15s,transform .15s}
.woocommerce-pagination .page-numbers li a.page-numbers:hover{box-shadow:0 6px 18px rgba(16,20,30,.14);transform:translateY(-1px)}
.woocommerce-pagination .page-numbers li span.page-numbers.current{background:var(--hw-marca2) !important;border-color:var(--hw-marca2) !important;color:#fff !important;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.woocommerce-pagination .page-numbers li .page-numbers.dots{border:0;background:transparent;box-shadow:none}

/* hw-ajustes-cat-pag: cabecera de categoria a ancho completo, paginacion sin bordes y mas aire, breadcrumb fuera tambien en /tienda/ */
.woocommerce-products-header{width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;border-radius:0 !important}
body.post-type-archive-product .woocommerce-breadcrumb{display:none}
.woocommerce-pagination .page-numbers li .page-numbers{border:0 !important}
.woocommerce-pagination ul.page-numbers{gap:16px !important;border:0 !important}
.woocommerce-pagination ul.page-numbers li{border:0 !important}

/* hw-tabs-premium: pestañas de la ficha de producto en pildoras con acento */
.woocommerce-tabs ul.tabs{display:flex !important;flex-wrap:wrap;gap:16px !important;border:0 !important;margin:0 0 26px !important;padding:0 !important;overflow:visible !important}
.woocommerce-tabs ul.tabs::before,.woocommerce-tabs ul.tabs::after{display:none !important}
.woocommerce-tabs ul.tabs li{border:0 !important;background:#f3f4f6 !important;border-radius:999px !important;margin:0 !important;padding:0 !important;box-shadow:none !important}
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{display:none !important}
.woocommerce-tabs ul.tabs li a{display:inline-block;padding:11px 26px !important;font-weight:600 !important;font-size:14.5px !important;color:#4b5160 !important;text-decoration:none !important}
.woocommerce-tabs ul.tabs li:hover{background:#e8eaef !important}
.woocommerce-tabs ul.tabs li.active{background:var(--hw-marca2) !important;box-shadow:0 6px 18px rgba(0,0,0,.15) !important}
.woocommerce-tabs ul.tabs li.active a{color:#fff !important}
.woocommerce-tabs .panel{background:#fff;border:1px solid #eceef2;border-radius:16px;padding:26px 30px;box-shadow:0 3px 14px rgba(16,20,30,.05)}