/*
Theme Name: Storefront Jolse Pack
Template: storefront
Version: 1.1
Description: Storefront child theme replicating a Jolse-like header, mega menu (BRAND), hero slideshow and footer.
*/
@import url("../storefront/style.css");
:root{
--sf-accent: #000;
--sf-text: #111;
--sf-muted: #6b6b6b;
--sf-border: #111;
--sf-badge: #e60023;
--sf-gray-900:#111;
--sf-gray-100:#f5f5f5;
}
/* ====== Ajustes solo para móvil ====== */
@media (max-width: 768px) {
/* 1) Reducir tamaño del título */
.single-product .product_title {
font-size: 16px !important; /* antes era muy grande */
line-height: 1.0em !important;
text-align: left;
margin-bottom: 12px;
}
/* 2) Botón "Comprar ahora" diferenciado */
.single-product .summary.entry-summary .sk-buy-now,
.single-product .summary.entry-summary button.sk-buy-now {
background-color: #f4c542 !important; /* amarillo */
color: #000 !important; /* texto negro */
font-weight: 500;
border: none;
height: 48px !important;
}
/* Aseguramos contraste con el "Añadir al carrito" */
.single-product .summary.entry-summary .single_add_to_cart_button {
background-color: #000 !important;
color: #fff !important;
font-weight: 600;
}
}
/* ===== Estilos botones en móvil ===== */
@media (max-width: 768px) {
/* Botón Agregar a favoritos */
.single-product .summary.entry-summary .wcboost-wishlist-button,
.single-product .summary.entry-summary .wcboost-wishlist-button a {
display: block;
width: 100% !important;
background: #fff !important;
color: #000 !important;
border: 2px solid #000 !important; /* puedes cambiar el color */
text-align: center;
font-weight: 600;
border-radius: 8px;
margin-bottom: 12px;
height: 48px !important;
line-height: 48px;
}
/* Botón Añadir al carrito */
.single-product .summary.entry-summary .single_add_to_cart_button {
display: block;
width: 100% !important;
background: #000 !important;
color: #fff !important;
font-weight: 600;
border: none;
border-radius: 8px;
margin-bottom: 12px;
height: 48px !important;
}
/* Botón Comprar ahora */
.single-product .summary.entry-summary .sk-buy-now,
.single-product .summary.entry-summary button.sk-buy-now {
display: block;
width: 100% !important;
background: #f4c542 !important; /* amarillo */
color: #000 !important;
font-weight: 600;
border: none;
border-radius: 8px;
height: 48px !important;
}
/* Asegurar que nada meta padding lateral extra */
.single-product .summary.entry-summary {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 768px) {
/* Botón Agregar a favoritos centrado */
.single-product .summary.entry-summary .wcboost-wishlist-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
height: 48px !important;
margin-bottom: 16px; /* espacio inferior */
}
/* Centrar la cantidad */
.single-product .summary.entry-summary form.cart .quantity {
display: flex !important;
justify-content: center !important;
margin: 0 auto 16px auto !important; /* centrado y espacio debajo */
}
/* Ajustar botones de cantidad para que queden centrados */
.single-product .summary.entry-summary form.cart .quantity .qty-btn,
.single-product .summary.entry-summary form.cart .quantity input.qty {
text-align: center;
}
/* Separación extra antes del botón "Añadir al carrito" */
.single-product .summary.entry-summary .single_add_to_cart_button {
margin-top: 16px !important;
}
}
/* ===== Cantidad en móvil: centrada y de ancho completo ===== */
@media (max-width: 768px) {
/* Contenedor de la cantidad */
.single-product .summary.entry-summary form.cart .quantity{
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
gap: 8px; /* separación entre - [qty] + */
width: 100% !important; /* ocupa todo el ancho disponible */
max-width: 100% !important;
margin: 12px 0 16px !important; /* separación respecto al resto */
}
/* Botones - y + dentro de la cantidad */
.single-product .summary.entry-summary form.cart .quantity button,
.single-product .summary.entry-summary form.cart .quantity .qty-btn {
flex: 1 1 28% !important; /* cada botón ocupa ~¼ del bloque */
width: auto !important;
min-width: 0 !important;
height: 48px !important;
}
/* Campo numérico de cantidad */
.single-product .summary.entry-summary form.cart .quantity input.qty{
flex: 1 1 44% !important; /* el input ocupa ~la mitad */
width: auto !important;
min-width: 0 !important;
height: 48px !important;
text-align: center !important;
}
}
/* ===== Móvil (≤768px): compactar el bloque entre "Agregar a favoritos" y la cantidad ===== */
@media (max-width: 768px) {
/* Baja el margen inferior de "Agregar a favoritos" */
.single-product .summary.entry-summary
.wcboost-wishlist-button,
.single-product .summary.entry-summary
.wcboost-wishlist-button-container,
.single-product .summary.entry-summary
a.wcboost-wishlist-button {
display: block !important;
width: 100% !important;
margin-bottom: 8px !important; /* antes seguro estaba mayor */
}
/* Sube el bloque de cantidad (reduce margen superior) y mantén centrado */
.single-product .summary.entry-summary form.cart .quantity,
.single-product .summary.entry-summary form.cart .quantity.has-plus-minus {
display: flex !important;
align-items: stretch !important;
justify-content: center !important; /* centrado */
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
margin: 8px auto 12px !important; /* menos arriba, parejo abajo */
}
/* Botones –, número, +: ancho fijo y centrado del valor */
.single-product .summary.entry-summary form.cart .quantity button,
.single-product .summary.entry-summary form.cart .quantity .qty {
height: 46px !important;
min-width: 64px !important; /* si lo ves grande, baja a 56px */
border-radius: 10px !important;
}
.single-product .summary.entry-summary form.cart .quantity .qty {
text-align: center !important;
width: 72px !important; /* ancho del campo numérico */
}
}
/* ===== Móvil: ajustar "Agregar a favoritos" y su caja ===== */
@media (max-width: 768px) {
.single-product .summary.entry-summary
a.wcboost-wishlist-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-bottom: 6px !important; /* menos espacio abajo */
padding: 10px !important; /* antes seguro era mayor */
line-height: 1.2 !important; /* evita que la caja quede alta */
height: auto !important; /* que la altura dependa del contenido */
}
/* bloque cantidad más arriba */
.single-product .summary.entry-summary form.cart .quantity {
margin-top: 6px !important; /* lo subimos */
margin-bottom: 12px !important; /* separación uniforme abajo */
}
}
/* ===== Móvil: espaciados iguales entre botones ===== */
@media (max-width: 768px) {
/* Botón agregar a favoritos */
.single-product .summary.entry-summary
a.wcboost-wishlist-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin-bottom: -6px !important; /* separación uniforme abajo */
padding: 10px !important;
line-height: 1.2 !important;
height: auto !important;
}
/* Bloque cantidad */
.single-product .summary.entry-summary form.cart .quantity {
margin-top: 0 !important; /* lo subimos más */
margin-bottom: -6px !important; /* separación abajo igual que los demás */
}
}
/* Estilos del precio en producto */
.single-product .summary .price {
display: flex !important;
flex-direction: column-reverse !important; /* invierte el orden */
align-items: flex-start !important; /* alineado a la izquierda */
margin-bottom: 16px;
}
/* Precio actual (con o sin descuento) */
.single-product .summary .price ins {
font-size: 1.8rem !important; /* más grande */
font-weight: 700 !important; /* negrita */
color: #000 !important; /* bien visible */
text-decoration: none !important;
margin-bottom: 6px;
}
/* Precio tachado */
.single-product .summary .price del {
font-size: 1rem !important;
color: #888 !important;
margin-top: 4px;
}
/* Contenedor de precios en una sola línea */
.single-product .summary .price {
display: flex !important;
flex-direction: row !important; /* uno al lado del otro */
align-items: baseline !important; /* alinear por la base */
gap: 10px; /* espacio entre los precios */
margin-bottom: 16px;
}
/* Precio actual */
.single-product .summary .price ins {
font-size: 1.8rem !important;
font-weight: 700 !important;
color: #000 !important;
text-decoration: none !important;
order: 1; /* va primero */
}
/* Precio tachado */
.single-product .summary .price del {
font-size: 1rem !important;
color: #888 !important;
order: 2; /* va después */
}
.wc-block-grid__product-onsale, .onsale, .woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
color: #6d6d6d;
display: none;
}
/* Empuja todo el contenido de la página de producto hacia abajo */
.single-product .site-main,
.single-product .content-area,
.single-product div.product {
margin-top: 40px; /* ajusta a gusto (px o rem) */
}
/* Si aún queda muy pegado, aumenta este valor */
@media (min-width: 1025px) {
.single-product .site-main,
.single-product .content-area,
.single-product div.product {
margin-top: 60px; /* más aire en escritorio */
}
}
@media (min-width:1025px){
.wc-block-grid__product-onsale, .onsale, .woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
color: #6d6d6d;
display:none;
}}
/* ===== Galería ajustada con sombras y esquinas redondeadas ===== */
@media (min-width:1025px){
/* Columna de la galería (menos ancha) */
.single-product div.product .woocommerce-product-gallery{
width: 45% !important; /* antes 56%, ahora más angosta */
padding: 10px;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
overflow: visible;
position: relative;
}
/* Sombrón inferior */
.single-product div.product .woocommerce-product-gallery::after{
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -15px;
height: 24px;
border-radius: 20px;
background: radial-gradient(ellipse at center,
rgba(0,0,0,.18) 0%,
rgba(0,0,0,0) 70%);
filter: blur(5px);
pointer-events: none;
}
/* Redondear imagen principal */
.single-product div.product .woocommerce-product-gallery img{
border-radius: 10px;
background: #fff;
object-fit: contain;
}
/* Miniaturas: redondeadas + sombra */
.single-product div.product .flex-control-nav.flex-control-thumbs img{
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,.08);
background: #fff;
}
/* Columna de la derecha (texto/botones) */
.single-product div.product .summary{
width: 50% !important; /* se equilibra con la galería */
}
}
/* --- Ajustar ancho de la galería en la página de producto --- */
@media (min-width:1025px){
/* La galería más ancha dentro de su grid */
.single-product div.product .woocommerce-product-gallery{
flex: 0 0 55% !important; /* antes suele ser ~45%, ahora 55% */
max-width: 55% !important;
}
/* La columna de resumen (info a la derecha) se ajusta */
.single-product div.product .summary{
flex: 0 0 45% !important;
max-width: 45% !important;
}
/* Imagen dentro de la galería */
.single-product div.product .woocommerce-product-gallery__image img{
width: 100% !important;
height: auto !important;
object-fit: contain !important; /* así no se recorta el producto */
display: block;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0,0,0,.12);
background: #fff;
}
}
/* Evitar que algún padre recorte la sombra */
.single-product div.product,
.single-product .woocommerce-product-gallery,
.single-product .images {
overflow: visible !important;
}
/* Marco de la galería: redondeo y capa para la sombra */
.single-product .woocommerce-product-gallery {
position: relative;
border-radius: 20px; /* esquinas del “card” */
}
/* Sombra homogénea alrededor (como Honey) */
.single-product .woocommerce-product-gallery::after {
content: "";
position: absolute;
inset: -10px; /* “respira” hacia afuera para que la sombra se vea por todos los lados */
border-radius: 26px; /* un poco más grande que el card */
box-shadow: 0 26px 48px rgba(16, 24, 40, 0.18); /* sombra suave */
z-index: -1; /* queda por debajo del bloque */
}
/* El contenido interno sí recorta para respetar esquinas */
.single-product .woocommerce-product-gallery__wrapper {
background: #fff; /* fondo blanco tipo card */
border-radius: 20px;
overflow: hidden; /* recorta la imagen a las esquinas redondeadas */
}
/* === Desktop: maquetar fila Qty + Añadir + Comprar === */
@media (min-width:1025px){
/* La fila del carrito pasa a rejilla: 3 columnas */
.single-product .summary.entry-summary form.cart{
display: grid !important;
grid-template-columns: 126px 1fr 1fr; /* qty | add | buy */
column-gap: 12px;
align-items: center;
margin: 0 0 14px 0 !important;
}
/* Cantidad compacta */
.single-product .summary.entry-summary form.cart .quantity{
grid-column: 1;
height: 54px !important;
border-radius: 12px !important;
overflow: hidden;
}
.single-product .summary.entry-summary form.cart .quantity .qty{
width: 46px !important;
text-align: center !important;
}
.single-product .summary.entry-summary form.cart .quantity .minus,
.single-product .summary.entry-summary form.cart .quantity .plus{
width: 48px !important;
height: 54px !important;
}
/* Botón: Añadir al carrito (columna 2) */
.single-product .summary.entry-summary form.cart
.single_add_to_cart_button{
grid-column: 2;
width: 100% !important;
height: 54px !important;
border-radius: 12px !important;
background: #111 !important;
color: #fff !important;
border: none !important;
font-weight: 700 !important;
}
/* Botón: Comprar ahora (columna 3) */
.single-product .summary.entry-summary form.cart
.sk-buy-now{
grid-column: 3;
width: 100% !important;
height: 54px !important;
border-radius: 12px !important;
background: #f4c542 !important; /* amarillo tipo demo */
color: #111 !important;
border: none !important;
font-weight: 700 !important;
}
.single-product .summary.entry-summary form.cart
.sk-buy-now:hover{
filter: brightness(.92);
}
/* Wishlist debajo como pastilla */
.single-product .summary.entry-summary > a.wcboost-wishlist-button,
.single-product .summary.entry-summary > .wcboost-wishlist-button,
.single-product .summary.entry-summary > .wcboost-wishlist-button-container{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
margin-top: 16px !important;
padding: 14px 18px !important;
background: #fff !important;
border: 1px solid #e6e6e6 !important;
border-radius: 12px !important;
color: #111 !important;
text-decoration: none !important;
}
.single-product .summary.entry-summary .wcboost-wishlist-button__icon{
width: 18px; height: 18px;
}
}
/* ===== Desktop: Carrito en 2 columnas (qty | botones) ===== */
@media (min-width:1025px){
/* 1) El contenedor del carrito pasa a GRID */
.single-product .summary.entry-summary form.cart{
display: grid !important;
grid-template-columns: auto 1fr; /* col1: cantidad | col2: botones */
grid-template-rows: auto auto; /* fila 1: Añadir | fila 2: Comprar */
column-gap: 16px;
row-gap: 14px;
align-items: stretch;
}
/* 2) La cantidad ocupa la columna 1 y abarca las dos filas */
.single-product .summary.entry-summary form.cart .quantity{
grid-column: 1;
grid-row: 1 / 3; /* ocupa fila 1 y 2 */
align-self: start;
}
/* 3) Botón "Añadir al carrito" -> columna 2, fila 1 (100% ancho) */
.single-product .summary.entry-summary form.cart .single_add_to_cart_button{
grid-column: 2;
grid-row: 1;
width: 100% !important;
height: 56px; /* mismo alto para ambos */
}
/* 4) Botón "Comprar ahora" -> columna 2, fila 2 (100% ancho) */
.single-product .summary.entry-summary form.cart .sk-buy-now,
.single-product .summary.entry-summary form.cart button.sk-buy-now{
grid-column: 2;
grid-row: 2;
width: 100% !important;
height: 56px;
}
}
/* ==== Estilo para cantidad (botones + y - con fondo blanco) ==== */
.single-product .summary.entry-summary form.cart .quantity{
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
overflow: hidden; /* redondeado limpio */
width: auto;
}
/* Input numérico */
.single-product .summary.entry-summary form.cart .quantity input.qty{
width: 50px;
height: 42px;
border: none !important;
text-align: center;
font-size: 16px;
font-weight: 600;
background: #fff !important;
box-shadow: none !important;
color: #111;
}
/* Botones + y - */
.single-product .summary.entry-summary form.cart .quantity .minus,
.single-product .summary.entry-summary form.cart .quantity .plus{
width: 42px;
height: 42px;
background: #fff !important;
border: none !important;
font-size: 20px;
font-weight: 700;
color: #111;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, color .2s ease;
}
/* Hover efecto */
.single-product .summary.entry-summary form.cart .quantity .minus:hover,
.single-product .summary.entry-summary form.cart .quantity .plus:hover{
background: #f5f5f5 !important;
color: #000;
}
/* === Cantidad: botones + y - en blanco, minimal === */
/* Contenedor */
.single-product .summary.entry-summary form.cart .quantity{
display:flex;
align-items:center;
gap:6px;
background:transparent !important;
border:0 !important;
}
/* Input numérico */
.single-product .summary.entry-summary form.cart .quantity input.qty{
width:56px !important;
height:44px !important;
text-align:center;
font-size:16px;
font-weight:600;
color:#111 !important;
background:#fff !important;
border:1px solid #dddddd !important;
border-radius:8px !important;
box-shadow:none !important;
outline:none !important;
}
/* Botones + y - (forzamos sobre estilos de "button") */
.single-product .summary.entry-summary form.cart .quantity .minus,
.single-product .summary.entry-summary form.cart .quantity .plus,
.single-product .summary.entry-summary form.cart .quantity .button {
width:44px !important;
height:44px !important;
min-width:44px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:18px !important;
font-weight:700 !important;
color:#111 !important;
background:#fff !important;
border:1px solid #dddddd !important;
border-radius:8px !important;
box-shadow:none !important;
outline:none !important;
transition:background .2s ease, border-color .2s ease, color .2s ease;
}
/* Hover */
.single-product .summary.entry-summary form.cart .quantity .minus:hover,
.single-product .summary.entry-summary form.cart .quantity .plus:hover,
.single-product .summary.entry-summary form.cart .quantity .button:hover {
background:#f5f5f5 !important;
border-color:#cfcfcf !important;
color:#000 !important;
}
/* Bloque de cantidad */
.single-product .summary.entry-summary form.cart .quantity {
display: flex !important;
align-items: center;
gap: 4px;
margin: 0 !important;
}
/* Botones + y - */
.single-product .summary.entry-summary form.cart .quantity .qty-btn {
width: 44px !important;
height: 44px !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #111 !important;
background: #fff !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.single-product .summary.entry-summary form.cart .quantity .qty-btn:hover {
background: #f5f5f5 !important;
border-color: #bbb !important;
}
/* Input numérico */
.single-product .summary.entry-summary form.cart .quantity .input-text.qty {
width: 56px !important;
height: 44px !important;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #111 !important;
background: #fff !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
box-shadow: none !important;
outline: none !important;
}
@media (min-width:1025px){
/* Reduce espacio entre imagen y miniaturas */
.single-product .woocommerce-product-gallery .flex-viewport{
margin-bottom: 6px !important; /* prueba 4–10px */
}
/* Ajusta alto de la galería */
:root{
--sp-viewport: 440px; /* baja este valor si aún se ve aire */
}
/* Miniaturas más pegadas y centradas */
.single-product .woocommerce-product-gallery .flex-control-thumbs{
gap: 6px !important; /* menos separación entre miniaturas */
margin-top: 4px !important;
justify-content: center;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li{
margin: 0 !important; /* elimina márgenes heredados */
}
}
/* 2) Título: que no esté oculto ni colapsado */
.single-product h1.product_title.entry-title{
display: block !important;
position: static !important;
float: none !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
clip: auto !important;
transform: none !important;
z-index: 6 !important;
/* estilo Honey */
font-size: clamp(32px, 4.8vw, 32px) !important;
font-weight: 600 !important;
line-height: 1.15 !important;
margin: 0 0 18px !important;
color: #111 !important;
letter-spacing: -0.0em;
}
/* ===== Botón catálogo a la izquierda del logo (solo móvil) ===== */
@media (max-width: 768px){
.sf-jolse-topbar{
display: grid;
grid-template-columns: 36px 1fr auto; /* botón | logo/buscador | iconos */
align-items: center;
gap: 10px;
padding-left: 12px;
padding-right: 12px;
}
/* === Ícono hamburguesa (3 líneas reales, centradas) === */
#sk-open-catalogo .sk-ico{
display: block;
width: 22px;
/* espacio vertical para las 3 líneas */
background:
linear-gradient(#111 0 0) top, /* arriba */
linear-gradient(#111 0 0) center,/* medio */
linear-gradient(#111 0 0) bottom;/* abajo */
background-size: 100% 2px; /* grosor de cada línea */
background-repeat: no-repeat;
border-radius: 2px;
}
.sf-jolse-logo{ justify-self: start; }
}
@media (min-width: 769px){
#sk-open-catalogo{ display:none !important; }
}
/* === Ícono hamburguesa (3 líneas con box-shadow) === */
#sk-open-catalogo .sk-ico{
position: relative;
display: block;
width: 22px;
height: 16px; /* espacio vertical para separar las rayas */
}
#sk-open-catalogo .sk-ico::before{
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
height: 0px; /* grosor de la línea */
background: #111; /* línea del medio */
border-radius: 2px;
transform: translateY(-1px); /* centra exactamente 2px */
box-shadow: 0 -6px 0 0 #111, 0 6px 0 0 #111;/* arriba y abajo */
}
.woocommerce ul.products li.product {
border-radius: 6px;
background: #fff;
/* border-radius: 12px; */
/* padding: 10px; */
box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
text-align: left;
}
/***********************
* Cards estilo YesStyle (ESCRITORIO)
* — aplica al loop clásico de WooCommerce —
***********************/
@media (min-width: 1025px){
/* grilla: 4 por fila con aire entre tarjetas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
margin: 0 !important;
}
/* tarjeta base */
.woocommerce ul.products li.product{
position: relative;
background:#fff;
border-radius: 14px;
padding: 18px 18px 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.08);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0,0,0,.10);
}
/* imagen centrada, con “marco” claro */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius: 12px;
padding: 18px;
margin: 6px 0 14px;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
object-fit:contain;
aspect-ratio: 1 / 1;
mix-blend-mode: multiply; /* logos sobre fondo claro quedan mejor */
}
/* badge de oferta (usa tu % OFF actual) */
.woocommerce ul.products li.product .onsale{
position:absolute;
top:12px; left:12px;
background:#ff4d4f;
color:#fff;
font-weight:800;
font-size: 12px;
line-height:1;
padding: 8px 10px;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(255,77,79,.25);
z-index: 2;
}
/* título compacto a 2 líneas */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin: 4px 2px 8px;
font-size: 15px;
font-weight: 700;
color:#111;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
min-height: calc(1.25em * 2);
}
/* rating y contador alineados como YesStyle */
.woocommerce ul.products li.product .star-rating{
margin: 2px 6px 0 2px;
color:#ffb400; /* dorado */
transform: scale(.95);
transform-origin: left center;
}
.woocommerce ul.products li.product .woocommerce-review-link{
font-size: 12px;
color:#7a7a7a;
margin-left: 6px;
}
.woocommerce ul.products li.product .woocommerce-review-link:hover{ color:#111; }
/* precios: actual fuerte, tachado suave a la izquierda */
.woocommerce ul.products li.product .price{
display:flex;
align-items:center;
gap:8px;
margin-top: 6px;
}
.woocommerce ul.products li.product .price ins{
order: 1;
text-decoration:none;
font-weight: 800;
color:#111;
font-size: 16px;
}
.woocommerce ul.products li.product .price del{
order: 0;
color:#9aa;
font-weight: 400;
font-size: 13px;
}
/* botón CTA full width, negro */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external{
width: 100%;
margin-top: 12px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:6px;
padding: 12px 14px;
border-radius: 12px;
background:#111;
border:1px solid #111;
color:#fff !important;
font-weight:800;
font-size:14px;
text-decoration:none !important;
box-shadow: 0 8px 18px rgba(0,0,0,.10);
transition: transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product .button:hover{
background:#000;
border-color:#000;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.woocommerce ul.products li.product .added_to_cart{
width:100%;
text-align:center;
margin-top:8px;
font-weight:600;
color:#111;
}
/* espaciar bloques inferiores para que no se “junten” */
.woocommerce ul.products li.product .price + .button{ margin-top:10px; }
}
/* ===== FIX Storefront: anular floats del loop en ESCRITORIO ===== */
@media (min-width:1025px){
/* Grilla de 4 columnas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:26px;
margin:0 !important;
}
/* Quita clearfixes que rompen la primera fila */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
content:none !important;
display:none !important;
}
/* Quita floats/anchos heredados de Storefront */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
float:none !important;
width:auto !important;
margin:0 !important;
clear:none !important;
}
/* Asegura que el contenedor de la imagen tenga cuerpo */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius:12px;
padding:18px;
margin:6px 0 14px;
min-height: 260px; /* da altura visual al “marco” */
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
aspect-ratio: 1 / 1;
object-fit:contain;
}
}
/* ===== Estilos de Cards en escritorio (WooCommerce) ===== */
.woocommerce ul.products li.product {
background: #fff;
border-radius: 14px;
padding: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
transition: transform .2s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
}
/* Imagen centrada */
.woocommerce ul.products li.product img {
max-height: 220px;
object-fit: contain;
margin: 0 auto 10px;
display: block;
}
/* Precios: reordenar actual primero y tachado después */
.woocommerce ul.products li.product .price {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
gap: 6px;
}
.woocommerce ul.products li.product .price ins {
order: 1; /* precio actual */
font-weight: 700;
color: #111;
font-size: 1.1rem;
text-decoration: none;
}
.woocommerce ul.products li.product .price del {
order: 2; /* precio tachado */
color: #999;
font-size: 0.9rem;
}
.woocommerce ul.products li.product .button:hover {
background: #333;
}
/* Ajustar márgenes entre precio y botón */
.woocommerce ul.products li.product .price + .button {
margin-top: 8px;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external,
.woocommerce ul.products li.product .added_to_cart{
display:block!important;width:100%!important;padding:12px 0!important;
background:#fff!important;border:1px solid #ddd!important;border-radius:8px!important;
color:#111!important;font-size:15px!important;font-weight:500!important;line-height:1.2!important;
text-align:center!important;text-indent:0!important;white-space:normal!important;
overflow:visible!important;box-shadow:none!important;transition:none!important;
}
.woocommerce ul.products li.product .button span{
font-size:inherit!important;line-height:inherit!important;color:inherit!important;
text-indent:0!important;display:inline!important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .product_type_simple:hover,
.woocommerce ul.products li.product .product_type_variable:hover,
.woocommerce ul.products li.product .product_type_external:hover,
.woocommerce ul.products li.product .added_to_cart:hover{
background:#fff!important;color:#111!important;border:1px solid #ddd!important;
}
/* Ajustar orden de precios en móvil */
@media (max-width: 767px) {
.woocommerce ul.products li.product .price {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 6px !important;
}
.woocommerce ul.products li.product .price ins {
order: 1 !important; /* precio negro primero */
text-decoration: none !important;
color: #111 !important;
font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del {
order: 2 !important; /* tachado después */
color: #999 !important;
font-weight: 400 !important;
}
}
/* ===== BADGE DE DESCUENTO FLAT (desktop) ===== */
@media (min-width: 769px){
.woocommerce ul.products li.product .onsale{
position: absolute;
top: 12px;
right: 12px;
left: auto !important;
transform: none !important;
background: #ff4d4f; /* Rojo sólido */
color: #fff !important;
padding: 4px 10px;
line-height: 1.2;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
border-radius: 0; /* Esquinas rectas */
box-shadow: none !important;/* Sin sombras */
border: none !important; /* Sin bordes */
}
}
/* MÓVIL: precio (y título) al inicio de la tarjeta */
@media (max-width: 768px){
/* Ajusta este valor si tu card tiene otro padding interno (10–16px normalmente) */
.woocommerce ul.products li.product{ --card-pad: 12px; }
/* Título al inicio */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Precio al inicio (mismo arranque que el título) */
.woocommerce ul.products li.product .price{
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Orden y estilo: primero el precio negro, después el tachado */
.woocommerce ul.products li.product .price ins{
order: 1; font-weight: 700; color: #111;
}
.woocommerce ul.products li.product .price del{
order: 2; color: #999;
}
}
/* (opcional) Si usas Woo Blocks: aplica lo mismo a sus selectores */
@media (max-width: 768px){
.wc-block-grid__products .wc-block-grid__product{ --card-pad: 12px; }
.wc-block-grid__product .wc-block-grid__product-title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
.wc-block-grid__product .wc-block-grid__product-price{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
}
/* Jolse menu: mostrar la barra cuando el item está activo */
.sf-jolse-menu ul > li.current-menu-item > a,
.sf-jolse-menu ul > li.current_page_item > a,
.sf-jolse-menu ul > li.current-menu-ancestor > a,
.sf-jolse-menu ul > li.current_page_parent > a,
.sf-jolse-menu ul > li.current-post-ancestor > a {
border-bottom: 2px solid #111 !important; /* igual que el hover */
}
/* ============================
Estilo destacado de PRECIOS
============================ */
/* Colores (ajústalos si quieres) */
:root{
--sale-accent: #ff6b6b; /* mismo rojo del badge */
--btn-blue: #2a72ff; /* azul del botón estilo app */
--btn-blue-10: rgba(42,114,255,.10);
--muted: #9aa3af; /* gris para el precio tachado */
}
/* Lista clásica de productos (ul.products) */
.woocommerce ul.products li.product .price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
/* precio actual cuando HAY oferta */
.woocommerce ul.products li.product .price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem; /* ≈ 28px */
font-weight:800;
text-decoration:none;
}
/* precio tachado (antes) */
.woocommerce ul.products li.product .price del{
order:1;
color:var(--muted);
font-size:.9rem; /* ≈ 14–15px */
opacity:.9;
}
/* cuando NO hay oferta, destaca igual el precio */
.woocommerce ul.products li.product .price{
color:var(--sale-accent);
font-weight:800;
font-size:1.75rem;
}
.woocommerce ul.products li.product .price del + ins,
.woocommerce ul.products li.product .price > ins + del{
/* evita heredar el grande en el tachado */
font-size:.9rem;
}
/* ==============================
Botón "Añadir al carrito" — estilo app
============================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce a.button.product_type_simple{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue);
background:#fff;
color:var(--btn-blue);
font-weight:700;
padding:14px 16px;
border-radius:16px;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
/* hover / focus */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus{
background:var(--btn-blue);
color:#fff;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* cuando el producto ya está en el carrito */
.woocommerce ul.products li.product .added_to_cart{
display:block;
text-align:center;
margin-top:.5rem;
color:var(--btn-blue);
}
/* =========================================
Compatibilidad con Bloques (Product Grid)
========================================= */
.wc-block-grid__product .wc-block-grid__product-price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
.wc-block-grid__product .wc-block-grid__product-price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem;
font-weight:800;
text-decoration:none;
}
.wc-block-grid__product .wc-block-grid__product-price del{
order:1;
color:var(--muted);
font-size:.9rem;
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue) !important;
background:#fff !important;
color:var(--btn-blue) !important;
font-weight:700;
padding:14px 16px !important;
border-radius:16px !important;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover{
background:var(--btn-blue) !important;
color:#fff !important;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* Pequeños ajustes responsive (opcional) */
@media (max-width: 480px){
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product .wc-block-grid__product-price ins{
font-size:1.6rem; /* un poquito más compacto en móvil */
}
}
/* ============================
Ajustes: color, botón y nombre
============================ */
/* Nombre del producto sin negrita */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
font-weight: 400 !important;
}
/* Botón Añadir al carrito */
:root {
--ui-blue: #00548b; /* azul corporativo */
--ui-blue-10: rgba(0, 84, 139, .04);
--ui-blue-20: rgba(0, 84, 139, .12);
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block !important;
width: 100% !important;
text-align: center !important;
border: 2px solid var(--ui-blue) !important;
background: var(--ui-blue-10) !important;
color: var(--ui-blue) !important;
font-weight: 600 !important; /* texto medio, no negrita */
font-size: 15px !important;
padding: 12px 14px !important;
border-radius: 6px !important; /* esquinas suaves */
box-shadow: 0 4px 12px var(--ui-blue-20) !important;
transition: all .2s ease !important;
}
/* Hover */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: var(--ui-blue) !important;
color: #fff !important;
border-color: var(--ui-blue) !important;
box-shadow: 0 6px 16px rgba(0, 84, 139, .25) !important;
}
/* =====================
AJUSTES PRECIO
===================== */
.woocommerce ul.products li.product .price ins {
font-size: 1.1rem !important; /* más pequeño */
font-weight: 600 !important;
color: #00548b !important; /* azul corporativo */
text-decoration: none !important;
}
.woocommerce ul.products li.product .price del {
font-size: 0.9rem !important;
color: #999 !important;
margin-left: 4px !important;
}
/* =====================
AJUSTES ESPACIADO PRODUCTOS
===================== */
.woocommerce ul.products li.product {
margin: 0 0px 30px !important; /* menos espacio lateral */
padding: 15px !important;
}
/* =====================
BOTÓN AÑADIR AL CARRITO
===================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
border: 2px solid #00548b !important;
background: transparent !important;
color: #00548b !important;
font-weight: 600 !important;
border-radius: 6px !important; /* esquinas suaves */
padding: 10px 12px !important;
transition: all .2s ease !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: #00548b !important;
color: #fff !important;
}
.woocommerce ul.products li.product .price ins {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: rgb(0, 84, 139) !important;
text-decoration: none !important;
}
/* Bloque precio: pegado a la izquierda, sin márgenes/paddings y con separación via gap */
.woocommerce ul.products li.product .price {
display: flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 6px !important; /* separación entre nuevo y tachado */
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Precio actual SIEMPRE primero (aunque el HTML venga al revés) */
.woocommerce ul.products li.product .price ins {
order: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Precio tachado DESPUÉS, sin margen manual (lo da el gap) */
.woocommerce ul.products li.product .price del {
order: 2 !important;
margin: 0 !important;
padding: 0 !important;
color: #999 !important;
font-size: 0.9rem !important;
opacity: .9;
}
/* Solo en pantallas móviles: bajar el botón del carrito respecto al precio */
@media (max-width: 768px) {
.woocommerce ul.products li.product .price {
margin-bottom: 12px !important; /* espacio bajo el precio */
}
.woocommerce ul.products li.product .button {
margin-top: 10px !important; /* separa botón del precio */
}
}
/* ====== TOP NOTICE ====== */
.sjh-notice{
background: linear-gradient(90deg,#ffb07b,#ffd3a1);
color:#111;
text-align:center;
font-size:12px;
padding:6px 10px;
}
/* ====== HEADER ====== */
.site-header{ padding:0 !important; border-bottom:0 !important; }
.sf-jolse-topbar{
display:grid;
grid-template-columns: 180px 1fr 320px;
align-items:center;
gap:24px;
height:86px;
padding:0 24px;
background:#fff;
}
.sf-jolse-logo img{ max-height:40px; width:auto; }
.sf-jolse-search{ position:relative; height:44px; display:flex; align-items:center; }
.sf-jolse-search form{ width:100%; }
.sf-jolse-search input[type="search"]{
width:100%;
border:none; outline:none;
border-bottom:3px solid var(--sf-border);
font-size:18px; padding:10px 40px 10px 8px; background:transparent;
}
.sf-jolse-search button{ position:absolute; right:0; top:50%; transform:translateY(-50%); background:transparent; border:0; cursor:pointer; padding:8px; }
.sf-jolse-actions{ display:flex; justify-content:flex-end; align-items:center; gap:28px; color:var(--sf-text); font-size:13px; }
.sf-jolse-action{ display:grid; justify-items:center; gap:6px; text-decoration:none; color:inherit; }
.sf-jolse-action svg{ width:26px; height:26px; }
.sf-jolse-cart{ position:relative; }
.sf-jolse-cart .badge{
position:absolute; right:-8px; top:-6px; min-width:18px; height:18px;
display:inline-block; line-height:18px; text-align:center; font-size:11px;
color:#fff; background:var(--sf-badge); border-radius:9px;
}
/* ====== SECOND BAR + MENU ====== */
.sf-jolse-secondary{ display:grid; grid-template-columns:64px 1fr; align-items:center; height:56px; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff; position:relative; z-index:50;}
.sf-jolse-burger{ display:grid; place-items:center; background:#000; color:#fff; height:100%; }
.sf-jolse-burger button{ background:transparent; border:0; cursor:pointer; }
.sf-jolse-burger svg{ width:24px; height:24px; }
.sf-jolse-menu{ display:flex; align-items:center; height:100%; }
.sf-jolse-menu ul{ list-style:none; margin:0; padding:0 12px; display:flex; gap:36px; font-weight:700; letter-spacing:.02em; }
.sf-jolse-menu a{ text-decoration:none; color:#111; text-transform:uppercase; font-size:14px; padding:8px 0; display:inline-block;}
.sf-jolse-menu li:hover>a{ border-bottom:2px solid #111;}
/* ====== MEGA MENU (BRAND) ====== */
.sjh-mega{ display:none; position:absolute; left:0; right:0; top:56px; background:#fff; border-top:1px solid #eee; box-shadow:0 12px 24px rgba(0,0,0,.06); padding:16px 24px 24px; }
.sjh-mega.open{ display:block; }
.sjh-mega .az{ display:flex; gap:22px; border-bottom:1px solid #eee; padding:10px 0; margin-bottom:12px; font-weight:700; text-transform:uppercase; font-size:14px;}
.sjh-mega .az a{ color:#c33; text-decoration:none; }
.sjh-mega .columns{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px 42px; }
.sjh-mega .columns ul{ list-style:none; margin:0; padding:0; }
.sjh-mega .columns a{ text-decoration:none; color:#111; line-height:1.9; }
/* ====== HERO SLIDER ====== */
.sjh-hero{ position:relative; overflow:hidden; }
.sjh-hero .slides{ display:flex; transition:transform .6s ease; }
.sjh-hero .slide{ min-width:100%; position:relative; }
.sjh-hero img{ width:100%; height:auto; display:block; }
.sjh-hero .dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; }
.sjh-hero .dot{ width:10px; height:10px; border-radius:50%; background:#ddd; cursor:pointer; }
.sjh-hero .dot.active{ background:#333; }
.sjh-hero .arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); color:#fff; border:0; width:40px; height:40px; border-radius:20px; cursor:pointer;}
.sjh-hero .prev{ left:10px; } .sjh-hero .next{ right:10px; }
/* ====== FOOTER ====== */
.site-footer{ background:#111; color:#eee; }
.sjh-footer{ padding:28px 0; }
.sjh-footer .row{ display:grid; grid-template-columns: 200px 1fr 320px; gap:24px; align-items:start; }
.sjh-footer a{ color:#ddd; text-decoration:none; }
.sjh-footer .pay{ display:flex; flex-wrap:wrap; gap:10px; opacity:.9; }
.sjh-footer .legal{ font-size:12px; color:#aaa; margin-top:10px; }
.sjh-footer .social{ display:flex; gap:12px; justify-content:flex-end; }
.sjh-footer .social a{ background:#222; padding:8px; border-radius:8px; }
/* ====== RESPONSIVE ====== */
@media (max-width:1024px){
.sf-jolse-topbar{ grid-template-columns: 150px 1fr 220px; gap:16px; height:auto; padding:12px 16px; }
}
@media (max-width:768px){
.sf-jolse-topbar{ grid-template-columns: 1fr 32px; grid-template-areas: "logo icons" "search search"; gap:12px; }
.sf-jolse-secondary{ grid-template-columns:54px 1fr; }
.sf-jolse-menu ul{ gap:18px; padding:0 8px; font-size:13px; }
.sjh-footer .row{ grid-template-columns:1fr; }
.sjh-mega{ position:static; box-shadow:none; }
.sjh-mega .columns{ grid-template-columns: 1fr 1fr; }
}
/* Footer personalizado Jolse style */
.sjh-footer {
background:#0f0f0f;
color:#d9d9d9;
padding:40px 0 24px;
font-size:14px;
line-height:1.5;
}
.sjh-footer .row {
max-width:1200px;
margin:0 auto;
padding:0 20px;
display:grid;
grid-template-columns:260px 1fr 260px;
column-gap:32px;
align-items:center;
}
.sjh-footer .logo img {
max-height:28px;
filter:brightness(0) invert(1);
}
.sjh-footer .logo strong {
font-size:30px;
font-weight:800;
color:#fff;
}
.sjh-footer .footer-menu {
list-style:none;
margin:0; padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(120px,1fr));
gap:8px 16px;
}
.sjh-footer .footer-menu a {
color:#d9d9d9;
text-decoration:none;
}
.sjh-footer .footer-menu a:hover {
color:#fff;
}
.sjh-footer .legal {
margin-top:10px;
font-size:13px;
color:#9a9a9a;
}
.sjh-footer .social {
justify-self:end;
display:flex;
gap:12px;
}
.sjh-footer .social a {
width:40px; height:40px;
display:flex; align-items:center; justify-content:center;
border-radius:10px;
background:#1b1b1b;
color:#fff;
font-weight:700;
text-decoration:none;
transition:.2s;
}
.sjh-footer .social a:hover {
background:#2a2a2a;
transform:translateY(-2px);
}
.sjh-footer .pay {
max-width:1200px;
margin:18px auto 0;
padding:0 20px;
display:flex; gap:18px;
align-items:center;
}
.sjh-footer .pay span {
opacity:.9; font-size:13px;
}
/* Responsive */
@media (max-width:1024px){
.sjh-footer .footer-menu{grid-template-columns:repeat(2,minmax(120px,1fr));}
}
@media (max-width:768px){
.sjh-footer{padding:28px 0 20px;}
.sjh-footer .row{grid-template-columns:1fr; row-gap:18px; text-align:center;}
.sjh-footer .social{justify-self:center;}
.sjh-footer .footer-menu{grid-template-columns:1fr 1fr; justify-items:center;}
.sjh-footer .pay{justify-content:center; flex-wrap:wrap;}
}
/* Kill switch temporal del footer nativo (por si queda cacheado) */
.site-info,
.storefront-footer-widgets {
display: none !important;
}
/* ===== Footer Jolse con clases únicas ===== */
.sjh-footer{
background:#0f0f0f;
color:#d9d9d9;
padding:40px 0 24px;
font-size:14px;
line-height:1.5;
}
.sjh-footer__row{
max-width:1200px;
margin:0 auto;
padding:0 20px;
display:grid;
grid-template-columns:260px 1fr 260px;
column-gap:32px;
align-items:center;
}
.sjh-footer__logo img{
max-height:28px;
filter:brightness(0) invert(1);
}
.sjh-footer__logo strong{
font-size:30px;
font-weight:800;
color:#fff;
}
.sjh-footer__menu{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(120px,1fr));
gap:8px 16px;
}
.sjh-footer__menu a{
color:#d9d9d9;
text-decoration:none;
}
.sjh-footer__menu a:hover{ color:#fff; }
.sjh-footer__legal{
margin-top:10px;
font-size:13px;
color:#9a9a9a;
}
.sjh-footer__social{
justify-self:end;
display:flex;
gap:12px;
}
.sjh-footer__social a{
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border-radius:10px;
background:#1b1b1b;
color:#fff;font-weight:700;text-decoration:none;
transition:.2s;
}
.sjh-footer__social a:hover{
background:#2a2a2a;transform:translateY(-2px);
}
.sjh-footer__pay{
max-width:1200px;
margin:18px auto 0;
padding:0 20px;
display:flex;gap:18px;align-items:center;
}
.sjh-footer__pay span{ opacity:.9;font-size:13px; }
/* Responsive */
@media (max-width:1024px){
.sjh-footer__menu{ grid-template-columns:repeat(2,minmax(120px,1fr)); }
}
@media (max-width:768px){
.sjh-footer{ padding:28px 0 20px; }
.sjh-footer__row{ grid-template-columns:1fr; row-gap:18px; text-align:center; }
.sjh-footer__social{ justify-self:center; }
.sjh-footer__menu{ grid-template-columns:1fr 1fr; justify-items:center; }
.sjh-footer__pay{ justify-content:center; flex-wrap:wrap; }
}
/* ========== Footer v2 ========== */
.sk-footer{
background:#0f0f0f;
color:#d9d9d9;
padding:40px 0 26px;
font-size:14px;
line-height:1.55;
}
/* Fila superior: brand | menu | social */
.sk-footer__inner{
max-width:1200px;
margin:0 auto;
padding:0 20px;
display:grid;
grid-template-columns:260px 1fr 260px;
column-gap:32px;
align-items:center;
}
/* Logo / nombre */
.sk-footer__brand img{ max-height:28px; width:auto; filter:brightness(0) invert(1); }
.sk-footer__site-name{ font-size:30px; font-weight:800; color:#fff; }
/* Menú */
.sk-footer__menu{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3,minmax(120px,1fr));
gap:8px 16px;
}
.sk-footer__menu a{ color:#d9d9d9; text-decoration:none; }
.sk-footer__menu a:hover{ color:#fff; }
/* Social */
.sk-footer__social{ justify-self:end; display:flex; gap:12px; }
.sk-ico{
width:40px; height:40px; display:flex; align-items:center; justify-content:center;
border-radius:10px; background:#1b1b1b;
color:#fff; text-decoration:none; position:relative; overflow:hidden;
transition:.2s;
}
/* Iconos con pseudo-elementos (puedes sustituir por SVGs si prefieres) */
.sk-ico::before{ content:''; width:18px; height:18px; display:block; background:#fff; mask-size:contain; mask-repeat:no-repeat; mask-position:center; }
.sk-ico.ig::before{ mask-image:url('data:image/svg+xml;utf8,'); }
.sk-ico.fb::before{ mask-image:url('data:image/svg+xml;utf8,'); }
.sk-ico.tt::before{ mask-image:url('data:image/svg+xml;utf8,'); }
.sk-ico:hover{ background:#2a2a2a; transform:translateY(-2px); }
/* Fila inferior: copyright | pagos */
.sk-footer__meta{
max-width:1200px;
margin:18px auto 0;
padding:0 20px;
display:flex; align-items:center; gap:24px; justify-content:space-between;
border-top:1px solid rgba(255,255,255,.06);
padding-top:16px;
}
.sk-copy{ color:#9a9a9a; font-size:13px; }
/* Métodos de pago (texto o sprite) */
.sk-pay{ list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center; }
.sk-pay li{ opacity:.9; width:auto; font-size:13px; }
/* Responsive */
@media (max-width:1024px){
.sk-footer__inner{ grid-template-columns:220px 1fr 220px; }
.sk-footer__menu{ grid-template-columns:repeat(2,minmax(120px,1fr)); }
}
@media (max-width:768px){
.sk-footer{ padding:28px 0 22px; }
.sk-footer__inner{ grid-template-columns:1fr; row-gap:16px; text-align:center; }
.sk-footer__social{ justify-self:center; }
.sk-footer__menu{ grid-template-columns:1fr 1fr; justify-items:center; }
.sk-footer__meta{ flex-direction:column; gap:10px; }
}
/* ==== Footer textos más legibles ==== */
.sk-footer__menu a {
color: #fff !important; /* enlaces blancos */
font-weight: 500; /* un poco más marcados */
}
.sk-footer__menu a:hover {
color: #ccc !important; /* gris claro al pasar el mouse */
}
.sk-copy {
color: #ccc !important; /* copyright más claro */
}
/* ===== Footer móvil centrado (sk-footer v2) ===== */
@media (max-width: 768px){
/* Fila superior: 1 columna, centrado total */
.sk-footer__inner{
grid-template-columns: 1fr;
row-gap: 14px;
text-align: center;
justify-items: center; /* centra los hijos en la grid */
}
/* Logo / nombre centrado */
.sk-footer__brand,
.sk-footer__site-name,
.sk-footer__brand img{
margin: 0 auto;
}
/* Menú en 2 columnas, centrado */
.sk-footer__menu{
grid-template-columns: repeat(2, auto); /* 2×2 como el ejemplo */
justify-content: center;
justify-items: center;
gap: 8px 24px;
}
/* Redes centradas */
.sk-footer__social{
justify-self: center;
gap: 10px;
}
.sk-ico{ width: 36px; height: 36px; } /* tamaño cómodo en touch */
/* Fila inferior: todo al centro en columna */
.sk-footer__meta{
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.sk-pay{ justify-content: center; }
}
/* ===== Footer móvil: menú en una sola línea alineado a la izquierda ===== */
@media (max-width: 768px){
.sk-footer__menu{
display: flex; /* en fila */
flex-wrap: wrap; /* que salte si no cabe */
justify-content: flex-start; /* alineado a la izquierda */
gap: 12px 20px; /* separación entre items */
margin-top: 8px;
}
.sk-footer__menu li{
list-style: none;
}
.sk-footer__menu a{
font-size: 14px;
color: #fff; /* texto blanco */
text-decoration: none;
}
.sk-footer__menu a:hover{
color: #ccc;
}
}
/* ===== Footer móvil: ocultar logo y subir redes sociales ===== */
@media (max-width: 768px){
/* Ocultar logo */
.sk-footer__brand,
.sjh-footer .logo {
display: none !important;
}
/* Redes sociales arriba */
.sk-footer__social,
.sjh-footer .social {
order: -1; /* sube arriba en la jerarquía flex/grid */
justify-content: flex-start; /* alineadas a la izquierda */
margin-bottom: 12px; /* separa del menú */
}
/* Menú sigue en una línea alineado a la izquierda */
.sk-footer__menu,
.sjh-footer .footer-menu{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 12px 18px;
margin-top: 0;
}
}
/* Quita el H1 "Tienda" en el archivo de productos */
.woocommerce .woocommerce-products-header__title.page-title{
display:none !important;
}
/* === 2 columnas en móvil (Storefront / plantillas clásicas) === */
@media (max-width: 768px){
/* Lista -> grid de 2 columnas */
.site-main ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
margin: 0 !important;
}
/* Muy importante: anula clearfix que rompe la 1ª fila */
.site-main ul.products::before,
.site-main ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after{
content: none !important;
display: none !important;
}
/* Los dejan de flotar y ocupan su celda */
.site-main ul.products li.product,
.woocommerce ul.products li.product{
float: none !important;
width: auto !important;
margin: 0 !important;
clear: none !important;
}
/* Neutraliza limpiezas por nth-child */
.woocommerce ul.products li.product:nth-child(2n+1){
clear: none !important;
}
/* —— retoques visuales opcionales —— */
.woocommerce ul.products li.product a img{
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background: #fafafa;
display: block;
}
.woocommerce ul.products li.product .price{ display:block; margin-top:.25rem; }
.woocommerce ul.products li.product .button{ width:100%; text-align:center; }
}
/* === Bloques de WooCommerce (si usas el bloque “Productos”) === */
.wc-block-grid__products{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
.wc-block-grid__products .wc-block-grid__product{
margin: 0 !important;
}
/******************************
* HEADER / AVISO SUPERIOR
******************************/
/* Espacio blanco entre el aviso naranja y el header */
.sjh-notice {
margin-bottom: 12px; /* súbelo a 16px si quieres más espacio */
}
/* No empujes el header hacia abajo */
.sf-jolse-topbar {
margin-top: 0 !important;
}
/* Header blanco y sin separación inferior */
.site-header {
background: #fff;
margin-bottom: 0 !important;
}
/* Nuestra barra secundaria (negra) pegada al contenido */
.sf-jolse-secondary {
margin-bottom: 0 !important;
border-bottom: 0 !important;
}
/******************************
* BUSCADOR MINIMALISTA
******************************/
/* Limpia el form contenedor del buscador */
.sf-jolse-search form,
.sf-jolse-search .woocommerce-product-search {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Input sin caja: sólo línea inferior */
.sf-jolse-search .search-field,
.sf-jolse-search input[type="search"] {
border: none !important;
border-bottom: 2px solid #000 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
padding: 6px 40px 6px 0 !important; /* espacio para la lupa */
font-size: 15px;
-webkit-appearance: none;
}
/* Lupa a la derecha, alineada verticalmente */
.sf-jolse-search { position: relative; }
.sf-jolse-search button {
position: absolute;
right: 8px; /* mueve la lupa horizontalmente */
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
}
.sf-jolse-search button svg {
width: 18px;
height: 18px;
color: #000;
}
/******************************
* ELEMENTOR / CONTENEDORES
******************************/
/* Quita el contenedor de Storefront cuando usas Elementor */
body.elementor-page .col-full { max-width: 100%; padding: 0; }
body.elementor-page .site-main { padding: 0; }
body.elementor-page .hentry { padding: 0; }
/* Asegura el estirado completo de secciones de Elementor */
.elementor-section.elementor-section-stretched {
left: 0 !important;
width: 100% !important;
}
/* Oculta título y breadcrumb en Home si estorban */
body.home .entry-title,
body.home .woocommerce-breadcrumb { display: none; }
/* Contenedores superiores: sin padding/margen arriba */
.site-content, .content-area, .site-main, .col-full, #content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Primer wrapper/Sección de Elementor: sin margen/padding arriba */
body.elementor-page .elementor,
body.elementor-page .elementor-location-content,
body.elementor-page .elementor-top-section:first-of-type,
body.elementor-page .elementor-section:first-of-type {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Por si hay algún breadcrumb/título residual */
.storefront-breadcrumb, .woocommerce-breadcrumb,
.entry-header, .entry-title {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Evita recortes si el banner está pegado al top */
.hentry, .site-main { overflow: visible !important; }
/* === Footer a pantalla completa (fondo full-bleed) === */
.site-footer .col-full {
max-width: 100% !important; /* quita el ancho fijo de Storefront */
padding: 0 !important; /* sin relleno lateral del contenedor */
}
/* Fondo del pie (ya lo tienes negro), sin límites */
.site-footer {
background: #111; /* o el color que uses */
}
/* Contenido interno centrado y limitado (como Jolse) */
.sjh-footer {
padding: 28px 0; /* espacio vertical del pie */
}
.sjh-footer .row {
max-width: 1200px; /* ancho máximo del contenido */
margin: 0 auto; /* centrado */
padding: 0 20px; /* respiración lateral */
display: grid; /* preserva el layout en grid */
grid-template-columns: 200px 1fr 320px;
gap: 24px;
}
/* Línea de pagos/redes alineadas correctamente */
.sjh-footer .pay {
max-width: 1200px;
margin: 10px auto 0;
padding: 0 20px;
}
/* Oculta el texto del botón "Buscar" y deja solo la lupa */
.sf-jolse-search button {
font-size: 0 !important; /* oculta el texto sin romper accesibilidad */
color: transparent !important;
}
/* Asegura que la lupa se vea centrada */
.sf-jolse-search button svg {
width: 20px;
height: 20px;
color: #111; /* mismo color que Jolse */
}
/* Centra el buscador dentro del header */
.sf-jolse-search {
flex: 1;
display: flex;
justify-content: center; /* lo centra en el espacio */
align-items: center;
max-width: 600px; /* igual que Jolse, ancho máximo */
margin: 0 auto; /* lo centra respecto al logo e iconos */
}
/* Ajusta el input para que no se vea encajonado */
.sf-jolse-search input[type="search"] {
width: 100%;
max-width: 480px; /* ancho fijo similar al de Jolse */
border: none;
border-bottom: 2px solid #111; /* línea inferior igual que Jolse */
font-size: 15px;
color: #111;
padding: 8px 40px 8px 0; /* espacio derecho para el ícono */
background: transparent;
outline: none;
}
/* Placeholder estilo sutil */
.sf-jolse-search input::placeholder {
color: #999;
font-weight: 400;
}
/* Ícono de lupa alineado a la derecha dentro del input */
.sf-jolse-search button {
position: absolute;
right: 0;
background: none;
border: none;
cursor: pointer;
}
.sf-jolse-search button svg {
width: 20px;
height: 20px;
color: #111;
}
/* Contenedor del buscador */
.sf-jolse-search {
flex: 1; /* ocupa todo el espacio disponible */
display: flex;
justify-content: center;
align-items: center;
margin: 0 40px; /* espacio a los lados, ajusta si lo quieres más junto al logo/íconos */
}
/* Input grande y centrado */
.sf-jolse-search input[type="search"] {
width: 100%;
max-width: 720px; /* más ancho, parecido al de Jolse */
border: none;
border-bottom: 2px solid #111;
font-size: 15px;
color: #111;
padding: 10px 40px 10px 0;
background: transparent;
outline: none;
}
/* Placeholder estilo Jolse */
.sf-jolse-search input::placeholder {
color: #999;
font-weight: 400;
}
/* Ícono lupa alineado dentro */
.sf-jolse-search button {
position: absolute;
right: 10px;
background: none;
border: none;
cursor: pointer;
}
.sf-jolse-search button svg {
width: 20px;
height: 20px;
color: #111;
}
/******** HEADER: 3 columnas tipo Jolse ********/
/* Contenedor interior centrado y con ancho máximo */
.sf-jolse-topbar{
/* ancho del “carril” como Jolse */
max-width: 1200px;
margin: 0 auto;
padding: 12px 20px;
/* 3 columnas: logo | buscador | iconos */
display: grid;
grid-template-columns: 180px 1fr 280px; /* ajusta 180/280 si tu logo/iconos ocupan más/menos */
align-items: center;
column-gap: 32px;
}
/* Logo a la izquierda (sin crecer) */
.sf-jolse-logo{ justify-self: start; }
/* Iconos a la derecha, alineados y con separación */
.sf-jolse-actions{
justify-self: end;
display: flex;
align-items: center;
gap: 22px; /* espacio entre Sign In / Sign Up / Cart */
}
/* ===== BUSCADOR CENTRADO COMO JOLSE ===== */
.sf-jolse-search{
position: relative;
justify-self: center; /* clave: centra la columna del medio */
width: 100%;
}
/* el input se centra y no se encoge demasiado ni se estira de más */
.sf-jolse-search .search-field,
.sf-jolse-search input[type="search"]{
width: 100%;
max-width: 720px; /* ancho visual del buscador; sube a 800 si quieres más largo */
margin: 0 auto; /* centra dentro de su propia columna */
border: none !important;
border-bottom: 2px solid #111 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
font-size: 15px;
padding: 10px 40px 10px 0 !important; /* espacio para la lupa a la derecha */
}
.sf-jolse-search input::placeholder{ color:#999; }
/* Lupa dentro del input, a la derecha */
.sf-jolse-search button{
position: absolute;
right: calc((100% - min(720px, 100%))/2 - 4px);
/* ^ coloca la lupa justo al borde del input centrado */
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 0; /* oculta cualquier texto del botón */
}
.sf-jolse-search button svg{ width:20px; height:20px; color:#111; }
/* Separación entre el aviso naranja y el header (como Jolse) */
.sjh-notice{ margin-bottom: 12px; }
/* RESPONSIVE: en pantallas pequeñas el carril se estrecha y el input no desborda */
@media (max-width: 1024px){
.sf-jolse-topbar{
grid-template-columns: 150px 1fr 220px;
column-gap: 20px;
}
.sf-jolse-search .search-field{ max-width: 600px; }
.sf-jolse-search button{ right: calc((100% - min(600px, 100%))/2 - 4px); }
}
@media (max-width: 768px){
/* en móvil: logo | iconos arriba; buscador a toda fila debajo */
.sf-jolse-topbar{
grid-template-columns: 1fr 140px;
grid-template-areas:
"logo icons"
"search search";
row-gap: 10px;
}
.sf-jolse-logo{ grid-area: logo; }
.sf-jolse-actions{ grid-area: icons; justify-self: end; gap: 14px; }
.sf-jolse-search{ grid-area: search; }
.sf-jolse-search .search-field{ max-width: 100%; }
.sf-jolse-search button{ right: 8px; }
}
.sf-jolse-topbar {
max-width: 1200px;
margin: 0 auto;
padding: 12px 20px;
display: grid;
grid-template-columns: 160px 1fr 320px; /* reducimos logo, ampliamos iconos */
align-items: center;
column-gap: 32px;
}
/***** Header 3 columnas fluido (logo | buscador | iconos) *****/
.sf-jolse-topbar{
max-width: 1200px;
margin: 0 auto;
padding: 12px 20px;
display: grid;
grid-template-columns: max-content 1fr max-content; /* columnas a contenido */
align-items: center;
column-gap: 36px;
}
/* Logo e iconos sin forzar anchuras, solo a su contenido */
.sf-jolse-logo{ justify-self: start; }
.sf-jolse-actions{
justify-self: end;
display: flex; align-items: center; gap: 22px;
}
/***** Buscador centrado REAL como Jolse *****/
.sf-jolse-search{
position: relative;
justify-self: center;
width: clamp(520px, 52vw, 780px); /* ancho fluido: mínimo 520, ideal 52% viewport, máx 780 */
margin: 0 auto; /* centrado en la columna central */
}
.sf-jolse-search .search-field,
.sf-jolse-search input[type="search"]{
width: 100%;
border: none !important;
border-bottom: 2px solid #111 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
font-size: 15px;
padding: 10px 40px 10px 0 !important; /* espacio para la lupa */
}
.sf-jolse-search input::placeholder{ color:#999; }
/* La lupa se alinea al borde derecho del input centrado */
.sf-jolse-search button{
position: absolute; right: 0; top: 50%;
transform: translateY(-50%);
background: none; border: 0; cursor: pointer; font-size:0;
}
.sf-jolse-search button svg{ width:20px; height:20px; color:#111; }
/* Responsive: ajusta límites para tablets/móviles */
@media (max-width: 1024px){
.sf-jolse-topbar{ column-gap: 24px; }
.sf-jolse-search{ width: clamp(420px, 56vw, 640px); }
}
@media (max-width: 768px){
.sf-jolse-topbar{
grid-template-columns: 1fr max-content;
grid-template-areas:
"logo icons"
"search search";
row-gap: 10px;
}
.sf-jolse-logo{ grid-area: logo; }
.sf-jolse-actions{ grid-area: icons; }
.sf-jolse-search{ grid-area: search; width: 100%; }
}
/* Botón del buscador: área clicable */
.sf-jolse-search button{
position:absolute; right:0; top:50%;
transform:translateY(-50%);
background:none; border:0; cursor:pointer;
width:32px; height:32px; padding:0; font-size:0; line-height:0;
}
/* Lupa estilo Jolse (SVG ENCODADO, UNA SOLA LÍNEA) */
.sf-jolse-search button::before{
content:"";
display:block; width:26px; height:26px; margin:auto;
background-repeat:no-repeat; background-position:center; background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cline x1='20.5' y1='20.5' x2='16.2' y2='16.2'/%3E%3C/svg%3E");
}
/* Hover: negro más intenso (también UNA LÍNEA) */
.sf-jolse-search button:hover::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cline x1='20.5' y1='20.5' x2='16.2' y2='16.2'/%3E%3C/svg%3E");
}
/* Oculta cualquier ícono SVG que venga por defecto en el buscador */
.sf-jolse-search button svg {
display: none !important;
}
/* Si antes usaste content:"🔍", lo anulamos también */
.sf-jolse-search button::after {
content: none !important;
}
.sf-jolse-search .search-field, .sf-jolse-search input[type="search"] {
width: 100%;
border: none !important;
border-bottom: 2px solid #111 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
font-size: 22px;
padding: 10px 40px 10px 0 !important;
}
/* Línea del buscador más gruesa */
.sf-jolse-search input[type="search"] {
border-bottom: 3px solid #111 !important; /* antes estaba en 2px */
padding: 12px 44px 12px 0 !important; /* ajustamos altura */
font-size: 24px;
}
/* Quitar el texto del placeholder */
.sf-jolse-search input::placeholder {
color: transparent !important; /* lo oculta */
}
/* ====== MOBILE HEADER ESTILO JOLSE ====== */
@media (max-width: 768px) {
/* Topbar grid */
.sf-jolse-topbar {
display: grid !important;
grid-template-columns: 48px 1fr 100px; /* menú | logo | acciones */
grid-template-areas:
"menu logo icons"
"search search search";
align-items: center;
row-gap: 8px;
padding: 10px 12px;
}
/* Menu hamburguesa */
.sf-jolse-topbar .menu-toggle {
grid-area: menu;
display: block !important;
justify-self: start;
}
/* Logo centrado */
.sf-jolse-topbar .sf-jolse-logo,
.sf-jolse-topbar .site-branding {
grid-area: logo;
justify-self: center;
}
/* Acciones (solo cuenta y carrito) */
.sf-jolse-actions {
grid-area: icons;
justify-self: end;
display: flex;
align-items: center;
gap: 18px;
}
/* Ocultar Sign In / Sign Up */
.sf-jolse-actions a[href*="signin"],
.sf-jolse-actions a[href*="sign-up"],
.sf-jolse-actions a:nth-child(1),
.sf-jolse-actions a:nth-child(2) {
display: none !important;
}
/* Iconos más grandes */
.sf-jolse-actions a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px; /* más grandes */
font-size: 0 !important;
color: transparent !important;
}
.sf-jolse-actions a::before {
content: "";
display: block;
width: 28px; height: 28px; /* tamaño ícono */
background: center / contain no-repeat;
}
/* Cuenta */
.sf-jolse-actions a[href*="account"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
/* Carrito */
.sf-jolse-actions a[href*="cart"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.8'/%3E%3Ccircle cx='18' cy='21' r='1.8'/%3E%3Cpath d='M2 3h2l2.4 12a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E");
}
/* Buscador en segunda fila */
.sf-jolse-search {
grid-area: search;
width: 100% !important;
margin: 0;
padding: 0 8px;
position: relative;
}
.sf-jolse-search input[type="search"] {
width: 100% !important;
border: none !important;
border-bottom: 3px solid #111 !important;
padding: 10px 42px 10px 0 !important;
font-size: 15px;
}
.sf-jolse-search input::placeholder { color: transparent !important; }
.sf-jolse-search button {
position: absolute; right: 12px; top: 50%;
transform: translateY(-50%);
background: none; border: 0; width: 32px; height: 32px;
}
.sf-jolse-search button svg { display: none !important; }
.sf-jolse-search button::before {
content: "";
display: block; width: 26px; height: 26px;
background: center / contain no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cline x1='20.5' y1='20.5' x2='16.2' y2='16.2'/%3E%3C/svg%3E");
}
}
/* ===== MOBILE: SOLO CUENTA Y CARRITO, ÍCONOS GRANDES ===== */
@media (max-width: 768px) {
/* Asegura que el contenedor de acciones exista y sea visible */
.sf-jolse-actions {
display: flex !important;
align-items: center;
gap: 18px;
justify-self: end;
}
/* Oculta login / registro por URL (independiente del orden) */
.sf-jolse-actions a[href*="signin"],
.sf-jolse-actions a[href*="sign-in"],
.sf-jolse-actions a[href*="signup"],
.sf-jolse-actions a[href*="sign-up"],
.sf-jolse-actions a[href*="register"],
.sf-jolse-actions a[href*="login"] {
display: none !important;
}
/* ——— FORZAR VISIBILIDAD DE CUENTA Y CARRITO ——— */
/* Selecciones amplias por si el tema cambia clases o paths */
.sf-jolse-actions a[href*="my-account"],
.sf-jolse-actions a[href*="/account"],
.sf-jolse-actions a[href*="/mi-cuenta"],
.sf-jolse-actions a[class*="account"],
.sf-jolse-actions a[href*="/cart"],
.sf-jolse-actions a[class*="cart"],
.sf-jolse-actions .cart-contents {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
position: relative;
font-size: 0 !important; /* oculta texto */
color: transparent !important;
}
/* Oculta cualquier icono interno para reemplazar por el nuestro */
.sf-jolse-actions a svg,
.sf-jolse-actions a img {
display: none !important;
}
/* ——— ÍCONO CUENTA ——— */
.sf-jolse-actions a[href*="my-account"]::before,
.sf-jolse-actions a[href*="/account"]::before,
.sf-jolse-actions a[href*="/mi-cuenta"]::before,
.sf-jolse-actions a[class*="account"]::before {
content: "";
display: block;
width: 28px;
height: 28px;
background: center / contain no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
/* ——— ÍCONO CARRITO ——— */
.sf-jolse-actions a[href*="/cart"]::before,
.sf-jolse-actions a[class*="cart"]::before,
.sf-jolse-actions .cart-contents::before {
content: "";
display: block;
width: 28px;
height: 28px;
background: center / contain no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.8'/%3E%3Ccircle cx='18' cy='21' r='1.8'/%3E%3Cpath d='M2 3h2l2.4 12a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E");
}
/* ——— BADGE / CONTADOR DEL CARRITO ——— */
/* Soporta varias implementaciones: .count, .badge, etc. */
.sf-jolse-actions a[href*="/cart"] .count,
.sf-jolse-actions a[class*="cart"] .count,
.sf-jolse-actions .cart-contents .count,
.sf-jolse-actions a[href*="/cart"] .badge,
.sf-jolse-actions a[class*="cart"] .badge,
.sf-jolse-actions .cart-contents .badge {
position: absolute;
top: -4px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 10px;
background: #e60023;
color: #fff;
font-size: 11px;
line-height: 16px;
text-align: center;
display: inline-block;
}
/* ——— FILA DEL BUSCADOR (ya la tienes, refuerzo) ——— */
.sf-jolse-topbar{
grid-template-columns: 48px 1fr 100px;
grid-template-areas:
"menu logo icons"
"search search search";
row-gap: 8px;
padding: 10px 12px;
}
.sf-jolse-search {
grid-area: search;
width: 100% !important;
padding: 0 8px;
position: relative;
}
.sf-jolse-search input[type="search"] {
width: 100% !important;
border: none !important;
border-bottom: 3px solid #111 !important;
padding: 10px 42px 10px 0 !important;
font-size: 24px;
}
.sf-jolse-search input::placeholder { color: transparent !important; }
}
/* === Quitar marco del carrusel en móvil === */
@media (max-width: 768px){
/* Elimina los límites de Storefront */
.sf-carousel-full,
.sf-carousel-full .elementor-container,
.sf-carousel-full .elementor-widget-wrap,
.sf-carousel-full .elementor-widget,
.sf-carousel-full .swiper,
.sf-carousel-full .swiper-wrapper {
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
}
/* Rompe el centrado que mete .col-full */
.sf-carousel-full {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
}
/* Imagenes del slider full ancho */
.sf-carousel-full img {
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
display: block !important;
}
}
@media (max-width: 768px){
#site-navigation.toggled .handheld-navigation,
.main-navigation.toggled .handheld-navigation {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
pointer-events: auto !important;
}
}
/* ===== MENÚ MÓVIL SIEMPRE VISIBLE (estilo tira como Jolse) ===== */
@media (max-width: 768px){
/* Ocultamos cualquier botón hamburguesa para que no vuelva a togglear */
.menu-toggle,
.sjh-burger { display: none !important; }
/* Asegura que la franja del menú esté SIEMPRE visible */
.sf-jolse-secondary,
.sf-jolse-secondary nav,
.sf-jolse-secondary .handheld-navigation,
.sf-jolse-secondary .storefront-primary-navigation {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
transform: none !important;
pointer-events: auto !important;
}
/* ===== Flecha + comportamiento del menú móvil ===== */
@media (max-width: 768px){
/* Contenedor de la barra de categorías */
.sf-jolse-secondary{
position: relative;
background:#fff;
/* estado colapsado */
overflow: hidden;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
/* Contenedor interno que abriga el UL */
.sf-jolse-secondary .sf-row{
padding: 8px 44px 10px 12px; /* dejamos sitio a la flecha a la derecha */
}
/* COLAPSADO: una fila con scroll horizontal (como Jolse) */
.sf-jolse-secondary:not(.is-open) .sf-row > ul{
display: flex;
gap: 20px;
overflow-x: auto; /* si no entra, se puede deslizar */
white-space: nowrap; /* evita salto de línea */
scrollbar-width: none;
}
.sf-jolse-secondary:not(.is-open) .sf-row > ul::-webkit-scrollbar{ display:none; }
/* ABIERTO: envuelve en múltiples columnas */
.sf-jolse-secondary.is-open .sf-row > ul{
display: grid;
grid-template-columns: repeat(3, auto); /* 3 columnas; sube a 4 si te cabe */
row-gap: 10px;
column-gap: 18px;
overflow: visible;
white-space: normal;
}
/* Enlaces del menú */
.sf-jolse-secondary .sf-row > ul > li > a{
font-size: 15px;
color:#111;
text-transform: uppercase;
letter-spacing: .02em;
}
/* Botón flecha */
.sf-jolse-secondary .sf-toggle{
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 34px; height: 34px;
border: 0; background: #fff; cursor: pointer;
}
.sf-jolse-secondary .sf-toggle .chev{
display:inline-block; width: 12px; height:12px;
border-right:2px solid #111; border-bottom:2px solid #111;
transform: rotate(45deg); transition: transform .2s ease;
}
.sf-jolse-secondary.is-open .sf-toggle .chev{ transform: rotate(-135deg); }
/* Un poco de realce cuando está desplegado */
.sf-jolse-secondary.is-open{
box-shadow: 0 10px 18px rgba(0,0,0,.05);
}
}
/* Desktop: sin cambios, ocultamos el botón y dejamos el layout normal */
@media (min-width: 769px){
.sf-jolse-secondary .sf-toggle{ display: none !important; }
.sf-jolse-secondary .sf-row > ul{
display: flex;
gap: 28px;
}
}
/* Alinear la flecha exactamente al centro de la barra del menú */
@media (max-width: 768px){
/* Altura “óptica” de la barra; toca si la ves más alta/baja */
.sf-jolse-secondary{ --sec-h: 40px; }
/* La fila del menú: misma altura y centrado vertical */
.sf-jolse-secondary .sf-row{
min-height: var(--sec-h);
padding: 6px 44px 6px 12px; /* deja sitio a la flecha */
display: flex;
align-items: center; /* centra UL verticalmente */
}
/* El UL se alinea en la misma línea */
.sf-jolse-secondary .sf-row > ul{
align-items: center;
}
/* Flecha: céntrala respecto a la barra */
.sf-jolse-secondary .sf-toggle{
top: 50%;
transform: translateY(-50%); /* clava al centro */
}
/* Si notas los textos un pelín desalineados, fija su altura de línea */
.sf-jolse-secondary .sf-row > ul > li > a{
line-height: 1; /* o 1.2 si te gusta con más aire */
}
}
.sf-jolse-secondary .sf-toggle{ top: 50%; transform: translateY(-71%); } /* prueba -52% o -48% */
/* === ESCRITORIO: limpiar lo que es solo móvil === */
@media (min-width: 1025px) {
/* Oculta cualquier variación del botón hamburguesa en desktop */
.sjh-burger,
.sf-jolse-burger,
.menu-toggle {
display: none !important;
}
/* Asegura que la barra de navegación esté visible y normal */
.sf-jolse-secondary,
.sf-jolse-nav,
#site-navigation,
.main-navigation {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
position: static !important;
transform: none !important;
}
/* Evita estilos móviles que empujan la barra */
.sf-jolse-secondary *[style*="position: fixed"],
.sf-jolse-secondary *[style*="translate"] {
position: static !important;
transform: none !important;
}
}
/* La flecha del “Más” SOLO debe moverse en móvil */
@media (max-width: 540px) {
.sf-jolse-more-toggle {
transform: translateY(-71px); /* lo que te funcionó */
}
}
/* Oculta cualquier burger en escritorio */
@media (min-width: 769px){
.sjh-burger,
.sf-jolse-burger,
.menu-toggle {
display: none !important;
}
}
/* Escritorio: sin flecha ni colapso */
@media (min-width: 769px){
.sf-toggle{ display:none !important; }
.sf-jolse-secondary .sf-row{
max-height:none !important;
overflow:visible !important;
}
.sf-jolse-secondary{ position: static !important; }
}
/* Móvil: estilo del acordeón */
@media (max-width: 768px){
.sf-jolse-secondary{ position: relative; }
.sf-jolse-secondary .sf-row{
max-height: 44px; /* altura de una línea de tabs */
overflow: hidden;
transition:max-height .25s ease;
}
.sf-jolse-secondary.is-open .sf-row{
max-height: 260px; /* se adapta al contenido */
}
.sf-toggle{
position:absolute;
right:8px;
top:50%;
transform: translateY(-50%);
width:32px;height:32px;
border:0;background:transparent;cursor:pointer;
}
.sf-toggle .chev{
display:block;width:14px;height:14px;margin:auto;
border-right:2px solid #111;border-bottom:2px solid #111;
transform: rotate(45deg);
transition: transform .2s ease;
}
.sf-jolse-secondary.is-open .sf-toggle .chev{
transform: rotate(-135deg); /* apunta hacia arriba cuando está abierto */
}
}
/* 2 columnas reales en móvil para el loop clásico */
@media (max-width: 768px){
.site-main ul.products{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
column-gap:12px !important;
row-gap:18px !important;
}
.site-main ul.products li.product{
float:none !important;
width:auto !important;
margin:0 !important;
clear:none !important;
}
}
/* 2 columnas para WooCommerce Blocks en móvil */
@media (max-width: 768px){
.wc-block-grid__products{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:12px !important;
}
.wc-block-grid__product{
width:auto !important;
margin:0 !important;
}
}
/* === Tienda en 2 columnas en móvil (catálogo clásico) === */
@media (max-width: 768px){
.site-main ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
margin: 0 !important;
}
.site-main ul.products::before,
.site-main ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after{
content: none !important;
display: none !important;
}
.site-main ul.products li.product,
.woocommerce ul.products li.product{
float: none !important;
width: auto !important;
margin: 0 !important;
clear: none !important;
}
.woocommerce ul.products li.product:nth-child(2n+1){
clear: none !important;
}
}
/* ===== GRID 2 columnas en móvil ===== */
@media (max-width: 768px){
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap:14px !important;
margin:0 !important;
}
/* Tarjeta */
.woocommerce ul.products li.product{
background:#fff;
border-radius:12px;
padding:10px;
box-shadow:0 6px 16px rgba(0,0,0,.06);
text-align:left;
}
/* El enlace ocupa un cuadrado (no tapa título/precio) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
position:relative;
display:block;
background:#fafafa;
border-radius:10px;
overflow:hidden; /* solo para redondear */
padding-top:100%; /* mantiene 1:1 */
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:contain;
background:transparent;
}
/* Título SIEMPRE visible (2 líneas) */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
display:-webkit-box !important;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
min-height: calc(1.25em * 2);
margin:10px 2px 4px;
font-size:14px;
font-weight:600;
line-height:1.25;
color:#111;
position:static !important;
opacity:1 !important;
}
/* Precio SIEMPRE visible */
.woocommerce ul.products li.product .price{
display:block !important;
margin:4px 2px 0;
font-weight:700;
color:#111;
position:static !important;
opacity:1 !important;
}
.woocommerce ul.products li.product .price del{
color:#9aa; margin-right:6px; font-weight:400;
}
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
/* Botones ocultos en listado (opcional) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
display:none !important;
}
}
/* ===== Estrellas + contador ===== */
@media (max-width: 768px){
.woocommerce ul.products li.product .star-rating{
display:inline-block;
font-size:13px;
color:#f5a623; /* dorado */
margin:6px 2px 0 2px;
vertical-align:middle;
transform:scale(.95);
transform-origin:left center;
}
.woocommerce ul.products li.product .woocommerce-review-link{
display:inline-block;
margin-left:6px;
font-size:12px;
color:#777;
vertical-align:middle;
}
.woocommerce ul.products li.product .woocommerce-review-link:hover{
color:#111;
text-decoration:underline;
}
}
/* ===== FIX: mostrar SIEMPRE el nombre bajo la miniatura ===== */
@media (max-width: 768px){
/* El link crea el cuadrado solo para la imagen, pero NO recorta el texto */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
position: relative;
display: block;
padding-top: 100%; /* conserva el cuadrado para la miniatura */
border-radius: 10px;
background: #fafafa;
overflow: visible !important; /* <— clave: NO recortar el título */
}
/* La imagen ocupa ese cuadrado */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
background: transparent;
}
/* Título visible, 2 líneas, por encima de cualquier overlay */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__title{
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-height: calc(1.25em * 2);
margin: 10px 2px 4px;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
color: #111 !important;
position: relative;
z-index: 2;
visibility: visible !important;
}
}
@media (max-width:768px){
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
position:static !important;
padding-top:0 !important;
overflow:visible !important;
display:block !important;
background:transparent !important;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce ul.products li.product a.woocommerce-loop-product__link img{
position:static !important;
display:block !important;
width:100% !important;
height:auto !important;
aspect-ratio:1/1 !important;
object-fit:contain !important;
background:#fafafa !important;
border-radius:10px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
display:-webkit-box !important;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
min-height:2.5em;
margin:10px 2px 4px !important;
font-size:14px !important;
font-weight:600 !important;
line-height:1.25 !important;
color:#111 !important;
opacity:1 !important;
visibility:visible !important;
position:static !important;
text-indent:0 !important;
clip:auto !important;
}
}
/* === Badge de Oferta pequeño arriba a la derecha === */
@media (max-width: 768px){
.woocommerce ul.products li.product .onsale {
position: absolute;
top: 8px; /* espacio desde arriba */
right: 8px; /* lo manda a la derecha */
left: auto; /* anula el left que pusimos antes */
background: #e63946; /* rojo intenso flat */
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 6px; /* más compacto */
border-radius: 3px; /* esquinas redondeadas */
text-transform: uppercase;
line-height: 1.2;
box-shadow: none; /* sin sombra */
border: none; /* sin bordes */
z-index: 5;
}
}
/* === Precios ordenados: actual a la izquierda, tachado a la derecha === */
@media (max-width: 768px){
.woocommerce ul.products li.product .price {
display: flex; /* alineación en fila */
justify-content: flex-start; /* alinear contenido */
align-items: center;
gap: 6px; /* espacio entre precios */
font-size: 14px;
font-weight: 700;
color: #111; /* precio actual */
}
/* Precio rebajado */
.woocommerce ul.products li.product .price ins {
order: 1; /* primero en la fila */
text-decoration: none;
color: #111;
font-weight: 700;
}
/* Precio tachado */
.woocommerce ul.products li.product .price del {
order: 2; /* segundo en la fila */
margin-left: auto; /* lo empuja a la derecha */
font-size: 13px;
color: #999;
font-weight: 400;
}
}
/* ===== Botón "Añadir al carrito" minimalista ===== */
@media (max-width: 768px){
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external {
width: 100%;
justify-content: center;
align-items: center;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #ddd;
background: transparent;
color: #111;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
transition: all .2s ease;
}
/* Hover */
.woocommerce ul.products li.product .button:hover{
border-color: #aaa;
background: #f9f9f9;
}
/* Cuando ya se añadió al carrito */
.woocommerce ul.products li.product .added_to_cart{
border-color: #e63946;
color: #e63946;
background: transparent;
font-weight: 600;
}
}
/* ===== Botón "Añadir al carrito" bonito en cards (móvil) ===== */
@media (max-width: 768px){
/* Asegúrate de que el botón NO esté oculto */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
display: inline-flex !important;
}
/* Contenedor del precio: un poco de aire antes del botón */
.woocommerce ul.products li.product .price{
margin-bottom: 8px;
}
/* Estilo base del botón */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external {
width: 100%;
justify-content: center;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #111;
background: #111;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(0,0,0,.06);
transition: transform .08s ease, background .15s ease, color .15s ease;
}
/* Hover/active */
.woocommerce ul.products li.product .button:hover{
background: #000;
border-color: #000;
transform: translateY(-1px);
}
.woocommerce ul.products li.product .button:active{
transform: translateY(0);
}
/* Cuando ya se añadió al carrito, que cambie el estilo */
.woocommerce ul.products li.product .added_to_cart{
background: #f4f4f5;
border-color: #e6e6e8;
color: #111;
font-weight: 600;
}
/* Botón "Ver opciones" (productos variables/external) con mismo look */
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external{
background: #fafafa;
color: #111;
border-color: #e6e6e8;
}
.woocommerce ul.products li.product .product_type_variable:hover,
.woocommerce ul.products li.product .product_type_external:hover{
background: #f0f0f2;
}
/* Espaciado inferior para que no se pegue a la sombra de la card */
.woocommerce ul.products li.product{
padding-bottom: 12px;
}
}
/* ===== Botón "Añadir al carrito" minimalista ===== */
@media (max-width: 768px){
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external {
width: 100%;
justify-content: center;
align-items: center;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #ddd;
background: transparent;
color: #111;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
transition: all .2s ease;
}
/* Hover */
.woocommerce ul.products li.product .button:hover{
border-color: #aaa;
background: #f9f9f9;
}
/* Cuando ya se añadió al carrito */
.woocommerce ul.products li.product .added_to_cart{
border-color: #e63946;
color: #e63946;
background: transparent;
font-weight: 600;
}
}
/* Ocultar carrito flotante de WooCommerce */
.woocommerce-cart-floating,
.woofc,
.floating_cart,
.woo-floating-cart,
.xoo-wsc-cart-trigger {
display: none !important;
}
.taiowc .taiowc-wrap {
line-height: inherit;
display: none;
}
/* ===== Quitar espacios extra en versión móvil ===== */
@media screen and (max-width: 768px) {
/* Quita el espacio superior antes de los íconos sociales */
.site-footer .footer-widgets,
.site-footer .widget,
.site-footer .social-icons,
.site-footer .sk-social {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Quita espacio entre íconos sociales y el menú inferior */
.site-footer,
.site-info,
footer {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Ajustar alineación del bloque negro del footer */
.site-footer {
padding: 10px 0 !important; /* puedes reducir a 0 si quieres pegado */
}
}
/* ===== Footer sin espacio extra arriba (solo móvil) ===== */
@media screen and (max-width: 768px) {
/* Bloque social sin margen ni padding */
.site-footer .social-icons,
.site-footer .sk-social,
.site-footer .widget {
margin-top: 1px !important;
padding-top: 0 !important;
}
/* Contenedor del footer */
.site-footer {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* Estilo del texto extra en el footer */
.footer-extra{
display:block;
text-align:center;
margin:8px 0 0; /* espacio arriba */
padding:0 10px; /* respiro lateral */
font-size:12px;
line-height:1.3;
color:#cfcfcf; /* gris suave */
letter-spacing:.1px;
}
/* Opcional: mismo estilo para enlaces dentro del texto extra */
.footer-extra a{
color:#e6e6e6;
text-decoration:none;
}
.footer-extra a:hover{
text-decoration:underline;
}
/* Ajuste fino en móvil: un poco menos de margen para que no choque con la barra inferior */
@media (max-width:768px){
.footer-extra{ margin-top:6px; }
}
/* Texto extra en footer — visible SOLO en móvil */
.footer-extra{
display:block;
text-align:center;
margin:8px 0 0;
padding:0 10px;
font-size:12px;
line-height:1.3;
color:#cfcfcf;
}
/* Ocultar en pantallas grandes (escritorio) */
@media (min-width: 769px){
.footer-extra{
display:none !important;
}
}
/* Mostrar SOLO en móvil */
@media (max-width: 767.98px){
.site-footer .footer-extra{
display:block;
text-align:center;
margin:8px 0 0;
padding:0 10px;
font-size:12px;
line-height:1.3;
color:#cfcfcf;
}
}
/* Ocultar en escritorio y tablet horizontal */
@media (min-width: 768px){
.site-footer .footer-extra{
display:none !important;
}
}
/* === OFF-CANVAS Catálogo (móvil) === */
@media (max-width: 768px){
.sk-no-scroll { overflow: hidden !important; }
.sk-offcanvas__overlay{
position: fixed; inset: 0;
background: rgba(0,0,0,.0);
color:black;
z-index: 9998;
}
.sk-offcanvas{
position: fixed; top: 0; right: -100%;
width: 86vw; max-width: 420px; height: 100dvh;
background: #fff; z-index: 9999;
box-shadow: -8px 0 24px rgba(0,0,0,.18);
display: flex; flex-direction: column;
transition: right .28s ease;
overflow:auto; padding: 16px 16px 24px;
}
.sk-offcanvas.is-open{ right: 0; }
.sk-offcanvas__close{
border: 0; background: 0; font-size: 28px; line-height: 1;
position: absolute; top: 8px; right: 12px; cursor: pointer;
}
.sk-offcanvas__header{ margin: 8px 4px 12px; }
.sk-user{ font-weight: 600; }
.sk-links{ list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.sk-links a{ padding: 8px 12px; border: 1px solid #eee; border-radius: 10px; font-weight: 600; display: inline-block; }
.sk-title{ font-size: 15px; margin: 10px 2px; font-weight: 700; }
.sk-cats{ list-style: none; padding: 0; margin: 0; }
.sk-cats > li{ border-bottom: 1px solid #f2f2f2; }
.sk-cats > li > a{ display: block; padding: 12px 4px; font-weight: 600; }
.sk-cats .children a{ padding: 10px 4px 10px 16px; font-weight: 500; }
}
@media (min-width: 1025px){
#sk-cat-drawer, #sk-cat-overlay { display: none !important; }
}
.sk-offcanvas__overlay{
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 100000;
}
.sk-offcanvas__overlay[hidden]{ display:none; }
.sk-offcanvas{
position: fixed; right: 0; top: 0;
width: 86vw; max-width: 360px; height: 100vh;
background: #fff;
box-shadow: -12px 0 28px rgba(0,0,0,.18);
transform: translateX(100%);
transition: transform .28s ease;
z-index: 100001; overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.sk-offcanvas.is-open{ transform: translateX(0); }
.sk-offcanvas__close{
position: absolute; left: 8px; top: 8px;
width: 36px; height: 36px; border: 0; border-radius: 8px;
background:transparent; color:black; font-size:20px; line-height:1;
}
.sk-offcanvas__header{ padding:14px 16px 8px; border-bottom:1px solid #eee; }
.sk-offcanvas__nav{ padding:12px 16px 24px; }
.sk-links{ display:grid; grid-row-gap:8px; margin:0 0 16px; padding:0; list-style:none; }
.sk-links a{ text-decoration:none; color:#111; font-weight:600; }
.sk-title{ margin:10px 0 8px; font-size:14px; letter-spacing:.02em; color:#666; text-transform:uppercase; }
.sk-cats{ margin:0; padding-left:18px; }
.sk-cats li{ margin:4px 0; }
.sk-no-scroll{ overflow: hidden !important; }
/* Ocúltalo en escritorio por si acaso */
@media (min-width: 769px){
#sk-cat-overlay, #sk-cat-drawer { display:none !important; }
}
/* ===== Marcas dentro del off-canvas ===== */
.skcat-title{ margin:14px 4px 8px; font-size:14px; font-weight:700; color:#666; letter-spacing:.02em; }
.skcat-brands{
list-style:none; margin: 0; padding: 0;
display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
gap:10px 12px;
}
.skcat-brands li a{
display:flex; align-items:center; gap:10px;
padding:10px 8px;
border:1px solid #f1f1f1; border-radius:10px;
text-decoration:none; color:#111;
background:#fff;
}
.skcat-brands img{
width:28px; height:28px; object-fit:contain; flex:0 0 28px;
}
.sk-brands{display:grid;gap:16px;align-items:center}
.sk-cols-2{grid-template-columns:repeat(2,1fr)}
.sk-cols-3{grid-template-columns:repeat(3,1fr)}
.sk-cols-4{grid-template-columns:repeat(4,1fr)}
.sk-cols-5{grid-template-columns:repeat(5,1fr)}
.sk-brand{display:grid;place-items:center;padding:10px 12px;background:#fff;border:1px solid #eee;border-radius:10px}
.sk-brand img{max-height:48px;width:auto;object-fit:contain}
@media(max-width:768px){.sk-brands{grid-template-columns:repeat(3,1fr)}}
/* ===== Grid de marcas estilo YesStyle ===== */
.sk-brands{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr)); /* 6 por fila en desktop */
gap:12px;
align-items:center;
}
.sk-brand{
display:flex;
align-items:center;
justify-content:center;
height:70px; /* alto consistente de las tarjetas */
padding:10px 12px;
background:#fff;
border:1px solid #eee;
border-radius:8px;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sk-brand img{
max-height:26px; /* logos finos como YesStyle */
width:auto;
object-fit:contain;
filter:grayscale(100%) contrast(1.05);
opacity:.75;
transition:filter .2s ease, opacity .2s ease;
}
/* Hover “limpio” */
.sk-brand:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.06);
border-color:#e5e5e5;
}
.sk-brand:hover img{
filter:none;
opacity:1;
}
/* Responsivo */
@media (max-width:1200px){
.sk-brands{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:992px){
.sk-brands{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:680px){
.sk-brands{ grid-template-columns:repeat(3,1fr); }
.sk-brand{ height:60px; }
.sk-brand img{ max-height:22px; }
}
/***********************
* Cards estilo YesStyle (ESCRITORIO)
* — aplica al loop clásico de WooCommerce —
***********************/
@media (min-width: 1025px){
/* grilla: 4 por fila con aire entre tarjetas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
margin: 0 !important;
}
/* tarjeta base */
.woocommerce ul.products li.product{
position: relative;
background:#fff;
border-radius: 14px;
padding: 18px 18px 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.08);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0,0,0,.10);
}
/* imagen centrada, con “marco” claro */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius: 12px;
padding: 18px;
margin: 6px 0 14px;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
object-fit:contain;
aspect-ratio: 1 / 1;
mix-blend-mode: multiply; /* logos sobre fondo claro quedan mejor */
}
/* badge de oferta (usa tu % OFF actual) */
.woocommerce ul.products li.product .onsale{
position:absolute;
top:12px; left:12px;
background:#ff4d4f;
color:#fff;
font-weight:800;
font-size: 12px;
line-height:1;
padding: 8px 10px;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(255,77,79,.25);
z-index: 2;
}
/* título compacto a 2 líneas */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin: 4px 2px 8px;
font-size: 15px;
font-weight: 700;
color:#111;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
min-height: calc(1.25em * 2);
}
/* rating y contador alineados como YesStyle */
.woocommerce ul.products li.product .star-rating{
margin: 2px 6px 0 2px;
color:#ffb400; /* dorado */
transform: scale(.95);
transform-origin: left center;
}
.woocommerce ul.products li.product .woocommerce-review-link{
font-size: 12px;
color:#7a7a7a;
margin-left: 6px;
}
.woocommerce ul.products li.product .woocommerce-review-link:hover{ color:#111; }
/* precios: actual fuerte, tachado suave a la izquierda */
.woocommerce ul.products li.product .price{
display:flex;
align-items:center;
gap:8px;
margin-top: 6px;
}
.woocommerce ul.products li.product .price ins{
order: 1;
text-decoration:none;
font-weight: 800;
color:#111;
font-size: 16px;
}
.woocommerce ul.products li.product .price del{
order: 0;
color:#9aa;
font-weight: 400;
font-size: 13px;
}
/* botón CTA full width, negro */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external{
width: 100%;
margin-top: 12px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:6px;
padding: 12px 14px;
border-radius: 12px;
background:#111;
border:1px solid #111;
color:#fff !important;
font-weight:800;
font-size:14px;
text-decoration:none !important;
box-shadow: 0 8px 18px rgba(0,0,0,.10);
transition: transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product .button:hover{
background:#000;
border-color:#000;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.woocommerce ul.products li.product .added_to_cart{
width:100%;
text-align:center;
margin-top:8px;
font-weight:600;
color:#111;
}
/* espaciar bloques inferiores para que no se “junten” */
.woocommerce ul.products li.product .price + .button{ margin-top:10px; }
}
/* ===== FIX Storefront: anular floats del loop en ESCRITORIO ===== */
@media (min-width:1025px){
/* Grilla de 4 columnas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:26px;
margin:0 !important;
}
/* Quita clearfixes que rompen la primera fila */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
content:none !important;
display:none !important;
}
/* Quita floats/anchos heredados de Storefront */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
float:none !important;
width:auto !important;
margin:0 !important;
clear:none !important;
}
/* Asegura que el contenedor de la imagen tenga cuerpo */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius:12px;
padding:18px;
margin:6px 0 14px;
min-height: 260px; /* da altura visual al “marco” */
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
aspect-ratio: 1 / 1;
object-fit:contain;
}
}
/* ===== Estilos de Cards en escritorio (WooCommerce) ===== */
.woocommerce ul.products li.product {
background: #fff;
border-radius: 14px;
padding: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
transition: transform .2s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
}
/* Imagen centrada */
.woocommerce ul.products li.product img {
max-height: 220px;
object-fit: contain;
margin: 0 auto 10px;
display: block;
}
/* Precios: reordenar actual primero y tachado después */
.woocommerce ul.products li.product .price {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
gap: 6px;
}
.woocommerce ul.products li.product .price ins {
order: 1; /* precio actual */
font-weight: 700;
color: #111;
font-size: 1.1rem;
text-decoration: none;
}
.woocommerce ul.products li.product .price del {
order: 2; /* precio tachado */
color: #999;
font-size: 0.9rem;
}
.woocommerce ul.products li.product .button:hover {
background: #333;
}
/* Ajustar márgenes entre precio y botón */
.woocommerce ul.products li.product .price + .button {
margin-top: 8px;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external,
.woocommerce ul.products li.product .added_to_cart{
display:block!important;width:100%!important;padding:12px 0!important;
background:#fff!important;border:1px solid #ddd!important;border-radius:8px!important;
color:#111!important;font-size:15px!important;font-weight:500!important;line-height:1.2!important;
text-align:center!important;text-indent:0!important;white-space:normal!important;
overflow:visible!important;box-shadow:none!important;transition:none!important;
}
.woocommerce ul.products li.product .button span{
font-size:inherit!important;line-height:inherit!important;color:inherit!important;
text-indent:0!important;display:inline!important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .product_type_simple:hover,
.woocommerce ul.products li.product .product_type_variable:hover,
.woocommerce ul.products li.product .product_type_external:hover,
.woocommerce ul.products li.product .added_to_cart:hover{
background:#fff!important;color:#111!important;border:1px solid #ddd!important;
}
/* Ajustar orden de precios en móvil */
@media (max-width: 767px) {
.woocommerce ul.products li.product .price {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 6px !important;
}
.woocommerce ul.products li.product .price ins {
order: 1 !important; /* precio negro primero */
text-decoration: none !important;
color: #111 !important;
font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del {
order: 2 !important; /* tachado después */
color: #999 !important;
font-weight: 400 !important;
}
}
/* ===== BADGE DE DESCUENTO FLAT (desktop) ===== */
@media (min-width: 769px){
.woocommerce ul.products li.product .onsale{
position: absolute;
top: 12px;
right: 12px;
left: auto !important;
transform: none !important;
background: #ff4d4f; /* Rojo sólido */
color: #fff !important;
padding: 4px 10px;
line-height: 1.2;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
border-radius: 0; /* Esquinas rectas */
box-shadow: none !important;/* Sin sombras */
border: none !important; /* Sin bordes */
}
}
/* MÓVIL: precio (y título) al inicio de la tarjeta */
@media (max-width: 768px){
/* Ajusta este valor si tu card tiene otro padding interno (10–16px normalmente) */
.woocommerce ul.products li.product{ --card-pad: 12px; }
/* Título al inicio */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Precio al inicio (mismo arranque que el título) */
.woocommerce ul.products li.product .price{
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Orden y estilo: primero el precio negro, después el tachado */
.woocommerce ul.products li.product .price ins{
order: 1; font-weight: 700; color: #111;
}
.woocommerce ul.products li.product .price del{
order: 2; color: #999;
}
}
/* (opcional) Si usas Woo Blocks: aplica lo mismo a sus selectores */
@media (max-width: 768px){
.wc-block-grid__products .wc-block-grid__product{ --card-pad: 12px; }
.wc-block-grid__product .wc-block-grid__product-title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
.wc-block-grid__product .wc-block-grid__product-price{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
}
/* Jolse menu: mostrar la barra cuando el item está activo */
.sf-jolse-menu ul > li.current-menu-item > a,
.sf-jolse-menu ul > li.current_page_item > a,
.sf-jolse-menu ul > li.current-menu-ancestor > a,
.sf-jolse-menu ul > li.current_page_parent > a,
.sf-jolse-menu ul > li.current-post-ancestor > a {
border-bottom: 2px solid #111 !important; /* igual que el hover */
}
/* ============================
Estilo destacado de PRECIOS
============================ */
/* Colores (ajústalos si quieres) */
:root{
--sale-accent: #ff6b6b; /* mismo rojo del badge */
--btn-blue: #2a72ff; /* azul del botón estilo app */
--btn-blue-10: rgba(42,114,255,.10);
--muted: #9aa3af; /* gris para el precio tachado */
}
/* Lista clásica de productos (ul.products) */
.woocommerce ul.products li.product .price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
/* precio actual cuando HAY oferta */
.woocommerce ul.products li.product .price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem; /* ≈ 28px */
font-weight:800;
text-decoration:none;
}
/* precio tachado (antes) */
.woocommerce ul.products li.product .price del{
order:1;
color:var(--muted);
font-size:.9rem; /* ≈ 14–15px */
opacity:.9;
}
/* cuando NO hay oferta, destaca igual el precio */
.woocommerce ul.products li.product .price{
color:var(--sale-accent);
font-weight:800;
font-size:1.75rem;
}
.woocommerce ul.products li.product .price del + ins,
.woocommerce ul.products li.product .price > ins + del{
/* evita heredar el grande en el tachado */
font-size:.9rem;
}
/* ==============================
Botón "Añadir al carrito" — estilo app
============================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce a.button.product_type_simple{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue);
background:#fff;
color:var(--btn-blue);
font-weight:700;
padding:14px 16px;
border-radius:16px;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
/* hover / focus */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus{
background:var(--btn-blue);
color:#fff;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* cuando el producto ya está en el carrito */
.woocommerce ul.products li.product .added_to_cart{
display:block;
text-align:center;
margin-top:.5rem;
color:var(--btn-blue);
}
/* =========================================
Compatibilidad con Bloques (Product Grid)
========================================= */
.wc-block-grid__product .wc-block-grid__product-price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
.wc-block-grid__product .wc-block-grid__product-price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem;
font-weight:800;
text-decoration:none;
}
.wc-block-grid__product .wc-block-grid__product-price del{
order:1;
color:var(--muted);
font-size:.9rem;
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue) !important;
background:#fff !important;
color:var(--btn-blue) !important;
font-weight:700;
padding:14px 16px !important;
border-radius:16px !important;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover{
background:var(--btn-blue) !important;
color:#fff !important;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* Pequeños ajustes responsive (opcional) */
@media (max-width: 480px){
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product .wc-block-grid__product-price ins{
font-size:1.6rem; /* un poquito más compacto en móvil */
}
}
/* ============================
Ajustes: color, botón y nombre
============================ */
/* Nombre del producto sin negrita */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
font-weight: 400 !important;
}
/* Botón Añadir al carrito */
:root {
--ui-blue: #00548b; /* azul corporativo */
--ui-blue-10: rgba(0, 84, 139, .04);
--ui-blue-20: rgba(0, 84, 139, .12);
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block !important;
width: 100% !important;
text-align: center !important;
border: 2px solid var(--ui-blue) !important;
background: var(--ui-blue-10) !important;
color: var(--ui-blue) !important;
font-weight: 600 !important; /* texto medio, no negrita */
font-size: 15px !important;
padding: 12px 14px !important;
border-radius: 6px !important; /* esquinas suaves */
box-shadow: 0 4px 12px var(--ui-blue-20) !important;
transition: all .2s ease !important;
}
/* Hover */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: var(--ui-blue) !important;
color: #fff !important;
border-color: var(--ui-blue) !important;
box-shadow: 0 6px 16px rgba(0, 84, 139, .25) !important;
}
/* =====================
AJUSTES PRECIO
===================== */
.woocommerce ul.products li.product .price ins {
font-size: 1.1rem !important; /* más pequeño */
font-weight: 600 !important;
color: #00548b !important; /* azul corporativo */
text-decoration: none !important;
}
.woocommerce ul.products li.product .price del {
font-size: 0.9rem !important;
color: #999 !important;
margin-left: 4px !important;
}
/* =====================
AJUSTES ESPACIADO PRODUCTOS
===================== */
.woocommerce ul.products li.product {
margin: 0 0px 30px !important; /* menos espacio lateral */
padding: 15px !important;
}
/* =====================
BOTÓN AÑADIR AL CARRITO
===================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
border: 2px solid #00548b !important;
background: transparent !important;
color: #00548b !important;
font-weight: 600 !important;
border-radius: 6px !important; /* esquinas suaves */
padding: 10px 12px !important;
transition: all .2s ease !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: #00548b !important;
color: #fff !important;
}
.woocommerce ul.products li.product .price ins {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: rgb(0, 84, 139) !important;
text-decoration: none !important;
}
/* Bloque precio: pegado a la izquierda, sin márgenes/paddings y con separación via gap */
.woocommerce ul.products li.product .price {
display: flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 6px !important; /* separación entre nuevo y tachado */
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Precio actual SIEMPRE primero (aunque el HTML venga al revés) */
.woocommerce ul.products li.product .price ins {
order: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Precio tachado DESPUÉS, sin margen manual (lo da el gap) */
.woocommerce ul.products li.product .price del {
order: 2 !important;
margin: 0 !important;
padding: 0 !important;
color: #999 !important;
font-size: 0.9rem !important;
opacity: .9;
}
/* Solo en pantallas móviles: bajar el botón del carrito respecto al precio */
@media (max-width: 768px) {
.woocommerce ul.products li.product .price {
margin-bottom: 12px !important; /* espacio bajo el precio */
}
.woocommerce ul.products li.product .button {
margin-top: 10px !important; /* separa botón del precio */
}
}
/***********************
* Cards estilo YesStyle (ESCRITORIO)
* — aplica al loop clásico de WooCommerce —
***********************/
@media (min-width: 1025px){
/* grilla: 4 por fila con aire entre tarjetas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
margin: 0 !important;
}
/* tarjeta base */
.woocommerce ul.products li.product{
position: relative;
background:#fff;
border-radius: 14px;
padding: 18px 18px 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.08);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0,0,0,.10);
}
/* imagen centrada, con “marco” claro */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius: 12px;
padding: 18px;
margin: 6px 0 14px;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
object-fit:contain;
aspect-ratio: 1 / 1;
mix-blend-mode: multiply; /* logos sobre fondo claro quedan mejor */
}
/* badge de oferta (usa tu % OFF actual) */
.woocommerce ul.products li.product .onsale{
position:absolute;
top:12px; left:12px;
background:#ff4d4f;
color:#fff;
font-weight:800;
font-size: 12px;
line-height:1;
padding: 8px 10px;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(255,77,79,.25);
z-index: 2;
}
/* título compacto a 2 líneas */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin: 4px 2px 8px;
font-size: 15px;
font-weight: 700;
color:#111;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
min-height: calc(1.25em * 2);
}
/* rating y contador alineados como YesStyle */
.woocommerce ul.products li.product .star-rating{
margin: 2px 6px 0 2px;
color:#ffb400; /* dorado */
transform: scale(.95);
transform-origin: left center;
}
.woocommerce ul.products li.product .woocommerce-review-link{
font-size: 12px;
color:#7a7a7a;
margin-left: 6px;
}
.woocommerce ul.products li.product .woocommerce-review-link:hover{ color:#111; }
/* precios: actual fuerte, tachado suave a la izquierda */
.woocommerce ul.products li.product .price{
display:flex;
align-items:center;
gap:8px;
margin-top: 6px;
}
.woocommerce ul.products li.product .price ins{
order: 1;
text-decoration:none;
font-weight: 800;
color:#111;
font-size: 16px;
}
.woocommerce ul.products li.product .price del{
order: 0;
color:#9aa;
font-weight: 400;
font-size: 13px;
}
/* botón CTA full width, negro */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external{
width: 100%;
margin-top: 12px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:6px;
padding: 12px 14px;
border-radius: 12px;
background:#111;
border:1px solid #111;
color:#fff !important;
font-weight:800;
font-size:14px;
text-decoration:none !important;
box-shadow: 0 8px 18px rgba(0,0,0,.10);
transition: transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product .button:hover{
background:#000;
border-color:#000;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.woocommerce ul.products li.product .added_to_cart{
width:100%;
text-align:center;
margin-top:8px;
font-weight:600;
color:#111;
}
/* espaciar bloques inferiores para que no se “junten” */
.woocommerce ul.products li.product .price + .button{ margin-top:10px; }
}
/* ===== FIX Storefront: anular floats del loop en ESCRITORIO ===== */
@media (min-width:1025px){
/* Grilla de 4 columnas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:26px;
margin:0 !important;
}
/* Quita clearfixes que rompen la primera fila */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
content:none !important;
display:none !important;
}
/* Quita floats/anchos heredados de Storefront */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
float:none !important;
width:auto !important;
margin:0 !important;
clear:none !important;
}
/* Asegura que el contenedor de la imagen tenga cuerpo */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius:12px;
padding:18px;
margin:6px 0 14px;
min-height: 260px; /* da altura visual al “marco” */
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
aspect-ratio: 1 / 1;
object-fit:contain;
}
}
/* ===== Estilos de Cards en escritorio (WooCommerce) ===== */
.woocommerce ul.products li.product {
background: #fff;
border-radius: 14px;
padding: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
transition: transform .2s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
}
/* Imagen centrada */
.woocommerce ul.products li.product img {
max-height: 220px;
object-fit: contain;
margin: 0 auto 10px;
display: block;
}
/* Precios: reordenar actual primero y tachado después */
.woocommerce ul.products li.product .price {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
gap: 6px;
}
.woocommerce ul.products li.product .price ins {
order: 1; /* precio actual */
font-weight: 700;
color: #111;
font-size: 1.1rem;
text-decoration: none;
}
.woocommerce ul.products li.product .price del {
order: 2; /* precio tachado */
color: #999;
font-size: 0.9rem;
}
.woocommerce ul.products li.product .button:hover {
background: #333;
}
/* Ajustar márgenes entre precio y botón */
.woocommerce ul.products li.product .price + .button {
margin-top: 8px;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external,
.woocommerce ul.products li.product .added_to_cart{
display:block!important;width:100%!important;padding:12px 0!important;
background:#fff!important;border:1px solid #ddd!important;border-radius:8px!important;
color:#111!important;font-size:15px!important;font-weight:500!important;line-height:1.2!important;
text-align:center!important;text-indent:0!important;white-space:normal!important;
overflow:visible!important;box-shadow:none!important;transition:none!important;
}
.woocommerce ul.products li.product .button span{
font-size:inherit!important;line-height:inherit!important;color:inherit!important;
text-indent:0!important;display:inline!important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .product_type_simple:hover,
.woocommerce ul.products li.product .product_type_variable:hover,
.woocommerce ul.products li.product .product_type_external:hover,
.woocommerce ul.products li.product .added_to_cart:hover{
background:#fff!important;color:#111!important;border:1px solid #ddd!important;
}
/* Ajustar orden de precios en móvil */
@media (max-width: 767px) {
.woocommerce ul.products li.product .price {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 6px !important;
}
.woocommerce ul.products li.product .price ins {
order: 1 !important; /* precio negro primero */
text-decoration: none !important;
color: #111 !important;
font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del {
order: 2 !important; /* tachado después */
color: #999 !important;
font-weight: 400 !important;
}
}
/* ===== BADGE DE DESCUENTO FLAT (desktop) ===== */
@media (min-width: 769px){
.woocommerce ul.products li.product .onsale{
position: absolute;
top: 12px;
right: 12px;
left: auto !important;
transform: none !important;
background: #ff4d4f; /* Rojo sólido */
color: #fff !important;
padding: 4px 10px;
line-height: 1.2;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
border-radius: 0; /* Esquinas rectas */
box-shadow: none !important;/* Sin sombras */
border: none !important; /* Sin bordes */
}
}
/* MÓVIL: precio (y título) al inicio de la tarjeta */
@media (max-width: 768px){
/* Ajusta este valor si tu card tiene otro padding interno (10–16px normalmente) */
.woocommerce ul.products li.product{ --card-pad: 12px; }
/* Título al inicio */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Precio al inicio (mismo arranque que el título) */
.woocommerce ul.products li.product .price{
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Orden y estilo: primero el precio negro, después el tachado */
.woocommerce ul.products li.product .price ins{
order: 1; font-weight: 700; color: #111;
}
.woocommerce ul.products li.product .price del{
order: 2; color: #999;
}
}
/* (opcional) Si usas Woo Blocks: aplica lo mismo a sus selectores */
@media (max-width: 768px){
.wc-block-grid__products .wc-block-grid__product{ --card-pad: 12px; }
.wc-block-grid__product .wc-block-grid__product-title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
.wc-block-grid__product .wc-block-grid__product-price{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
}
/* Jolse menu: mostrar la barra cuando el item está activo */
.sf-jolse-menu ul > li.current-menu-item > a,
.sf-jolse-menu ul > li.current_page_item > a,
.sf-jolse-menu ul > li.current-menu-ancestor > a,
.sf-jolse-menu ul > li.current_page_parent > a,
.sf-jolse-menu ul > li.current-post-ancestor > a {
border-bottom: 2px solid #111 !important; /* igual que el hover */
}
/* ============================
Estilo destacado de PRECIOS
============================ */
/* Colores (ajústalos si quieres) */
:root{
--sale-accent: #ff6b6b; /* mismo rojo del badge */
--btn-blue: #2a72ff; /* azul del botón estilo app */
--btn-blue-10: rgba(42,114,255,.10);
--muted: #9aa3af; /* gris para el precio tachado */
}
/* Lista clásica de productos (ul.products) */
.woocommerce ul.products li.product .price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
/* precio actual cuando HAY oferta */
.woocommerce ul.products li.product .price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem; /* ≈ 28px */
font-weight:800;
text-decoration:none;
}
/* precio tachado (antes) */
.woocommerce ul.products li.product .price del{
order:1;
color:var(--muted);
font-size:.9rem; /* ≈ 14–15px */
opacity:.9;
}
/* cuando NO hay oferta, destaca igual el precio */
.woocommerce ul.products li.product .price{
color:var(--sale-accent);
font-weight:800;
font-size:1.75rem;
}
.woocommerce ul.products li.product .price del + ins,
.woocommerce ul.products li.product .price > ins + del{
/* evita heredar el grande en el tachado */
font-size:.9rem;
}
/* ==============================
Botón "Añadir al carrito" — estilo app
============================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce a.button.product_type_simple{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue);
background:#fff;
color:var(--btn-blue);
font-weight:700;
padding:14px 16px;
border-radius:16px;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
/* hover / focus */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus{
background:var(--btn-blue);
color:#fff;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* cuando el producto ya está en el carrito */
.woocommerce ul.products li.product .added_to_cart{
display:block;
text-align:center;
margin-top:.5rem;
color:var(--btn-blue);
}
/* =========================================
Compatibilidad con Bloques (Product Grid)
========================================= */
.wc-block-grid__product .wc-block-grid__product-price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
.wc-block-grid__product .wc-block-grid__product-price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem;
font-weight:800;
text-decoration:none;
}
.wc-block-grid__product .wc-block-grid__product-price del{
order:1;
color:var(--muted);
font-size:.9rem;
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue) !important;
background:#fff !important;
color:var(--btn-blue) !important;
font-weight:700;
padding:14px 16px !important;
border-radius:16px !important;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover{
background:var(--btn-blue) !important;
color:#fff !important;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* Pequeños ajustes responsive (opcional) */
@media (max-width: 480px){
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product .wc-block-grid__product-price ins{
font-size:1.6rem; /* un poquito más compacto en móvil */
}
}
/* ============================
Ajustes: color, botón y nombre
============================ */
/* Nombre del producto sin negrita */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
font-weight: 400 !important;
}
/* Botón Añadir al carrito */
:root {
--ui-blue: #00548b; /* azul corporativo */
--ui-blue-10: rgba(0, 84, 139, .04);
--ui-blue-20: rgba(0, 84, 139, .12);
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block !important;
width: 100% !important;
text-align: center !important;
border: 2px solid var(--ui-blue) !important;
background: var(--ui-blue-10) !important;
color: var(--ui-blue) !important;
font-weight: 600 !important; /* texto medio, no negrita */
font-size: 15px !important;
padding: 12px 14px !important;
border-radius: 6px !important; /* esquinas suaves */
box-shadow: 0 4px 12px var(--ui-blue-20) !important;
transition: all .2s ease !important;
}
/* Hover */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: var(--ui-blue) !important;
color: #fff !important;
border-color: var(--ui-blue) !important;
box-shadow: 0 6px 16px rgba(0, 84, 139, .25) !important;
}
/* =====================
AJUSTES PRECIO
===================== */
.woocommerce ul.products li.product .price ins {
font-size: 1.1rem !important; /* más pequeño */
font-weight: 600 !important;
color: #00548b !important; /* azul corporativo */
text-decoration: none !important;
}
.woocommerce ul.products li.product .price del {
font-size: 0.9rem !important;
color: #999 !important;
margin-left: 4px !important;
}
/* =====================
AJUSTES ESPACIADO PRODUCTOS
===================== */
.woocommerce ul.products li.product {
margin: 0 0px 30px !important; /* menos espacio lateral */
padding: 15px !important;
}
/* =====================
BOTÓN AÑADIR AL CARRITO
===================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
border: 2px solid #00548b !important;
background: transparent !important;
color: #00548b !important;
font-weight: 600 !important;
border-radius: 6px !important; /* esquinas suaves */
padding: 10px 12px !important;
transition: all .2s ease !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: #00548b !important;
color: #fff !important;
}
.woocommerce ul.products li.product .price ins {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: rgb(0, 84, 139) !important;
text-decoration: none !important;
}
/* Bloque precio: pegado a la izquierda, sin márgenes/paddings y con separación via gap */
.woocommerce ul.products li.product .price {
display: flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 6px !important; /* separación entre nuevo y tachado */
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Precio actual SIEMPRE primero (aunque el HTML venga al revés) */
.woocommerce ul.products li.product .price ins {
order: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Precio tachado DESPUÉS, sin margen manual (lo da el gap) */
.woocommerce ul.products li.product .price del {
order: 2 !important;
margin: 0 !important;
padding: 0 !important;
color: #999 !important;
font-size: 0.9rem !important;
opacity: .9;
}
/* Solo en pantallas móviles: bajar el botón del carrito respecto al precio */
@media (max-width: 768px) {
.woocommerce ul.products li.product .price {
margin-bottom: 12px !important; /* espacio bajo el precio */
}
.woocommerce ul.products li.product .button {
margin-top: 10px !important; /* separa botón del precio */
}
}
/***********************
* Cards estilo YesStyle (ESCRITORIO)
* — aplica al loop clásico de WooCommerce —
***********************/
@media (min-width: 1025px){
/* grilla: 4 por fila con aire entre tarjetas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
margin: 0 !important;
}
/* tarjeta base */
.woocommerce ul.products li.product{
position: relative;
background:#fff;
border-radius: 14px;
padding: 18px 18px 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.08);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0,0,0,.10);
}
/* imagen centrada, con “marco” claro */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius: 12px;
padding: 18px;
margin: 6px 0 14px;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
object-fit:contain;
aspect-ratio: 1 / 1;
mix-blend-mode: multiply; /* logos sobre fondo claro quedan mejor */
}
/* badge de oferta (usa tu % OFF actual) */
.woocommerce ul.products li.product .onsale{
position:absolute;
top:12px; left:12px;
background:#ff4d4f;
color:#fff;
font-weight:800;
font-size: 12px;
line-height:1;
padding: 8px 10px;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(255,77,79,.25);
z-index: 2;
}
/* título compacto a 2 líneas */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin: 4px 2px 8px;
font-size: 15px;
font-weight: 700;
color:#111;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
min-height: calc(1.25em * 2);
}
/* rating y contador alineados como YesStyle */
.woocommerce ul.products li.product .star-rating{
margin: 2px 6px 0 2px;
color:#ffb400; /* dorado */
transform: scale(.95);
transform-origin: left center;
}
.woocommerce ul.products li.product .woocommerce-review-link{
font-size: 12px;
color:#7a7a7a;
margin-left: 6px;
}
.woocommerce ul.products li.product .woocommerce-review-link:hover{ color:#111; }
/* precios: actual fuerte, tachado suave a la izquierda */
.woocommerce ul.products li.product .price{
display:flex;
align-items:center;
gap:8px;
margin-top: 6px;
}
.woocommerce ul.products li.product .price ins{
order: 1;
text-decoration:none;
font-weight: 800;
color:#111;
font-size: 16px;
}
.woocommerce ul.products li.product .price del{
order: 0;
color:#9aa;
font-weight: 400;
font-size: 13px;
}
/* botón CTA full width, negro */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external{
width: 100%;
margin-top: 12px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:6px;
padding: 12px 14px;
border-radius: 12px;
background:#111;
border:1px solid #111;
color:#fff !important;
font-weight:800;
font-size:14px;
text-decoration:none !important;
box-shadow: 0 8px 18px rgba(0,0,0,.10);
transition: transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product .button:hover{
background:#000;
border-color:#000;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.woocommerce ul.products li.product .added_to_cart{
width:100%;
text-align:center;
margin-top:8px;
font-weight:600;
color:#111;
}
/* espaciar bloques inferiores para que no se “junten” */
.woocommerce ul.products li.product .price + .button{ margin-top:10px; }
}
/* ===== FIX Storefront: anular floats del loop en ESCRITORIO ===== */
@media (min-width:1025px){
/* Grilla de 4 columnas */
.woocommerce ul.products,
.woocommerce-page ul.products{
display:grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:26px;
margin:0 !important;
}
/* Quita clearfixes que rompen la primera fila */
.woocommerce ul.products::before,
.woocommerce ul.products::after{
content:none !important;
display:none !important;
}
/* Quita floats/anchos heredados de Storefront */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
float:none !important;
width:auto !important;
margin:0 !important;
clear:none !important;
}
/* Asegura que el contenedor de la imagen tenga cuerpo */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
display:block;
background:#fafafa;
border-radius:12px;
padding:18px;
margin:6px 0 14px;
min-height: 260px; /* da altura visual al “marco” */
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
width:100%;
height:auto;
aspect-ratio: 1 / 1;
object-fit:contain;
}
}
/* ===== Estilos de Cards en escritorio (WooCommerce) ===== */
.woocommerce ul.products li.product {
background: #fff;
border-radius: 14px;
padding: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
transition: transform .2s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
}
/* Imagen centrada */
.woocommerce ul.products li.product img {
max-height: 220px;
object-fit: contain;
margin: 0 auto 10px;
display: block;
}
/* Precios: reordenar actual primero y tachado después */
.woocommerce ul.products li.product .price {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
gap: 6px;
}
.woocommerce ul.products li.product .price ins {
order: 1; /* precio actual */
font-weight: 700;
color: #111;
font-size: 1.1rem;
text-decoration: none;
}
.woocommerce ul.products li.product .price del {
order: 2; /* precio tachado */
color: #999;
font-size: 0.9rem;
}
.woocommerce ul.products li.product .button:hover {
background: #333;
}
/* Ajustar márgenes entre precio y botón */
.woocommerce ul.products li.product .price + .button {
margin-top: 8px;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products li.product .product_type_external,
.woocommerce ul.products li.product .added_to_cart{
display:block!important;width:100%!important;padding:12px 0!important;
background:#fff!important;border:1px solid #ddd!important;border-radius:8px!important;
color:#111!important;font-size:15px!important;font-weight:500!important;line-height:1.2!important;
text-align:center!important;text-indent:0!important;white-space:normal!important;
overflow:visible!important;box-shadow:none!important;transition:none!important;
}
.woocommerce ul.products li.product .button span{
font-size:inherit!important;line-height:inherit!important;color:inherit!important;
text-indent:0!important;display:inline!important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce ul.products li.product .product_type_simple:hover,
.woocommerce ul.products li.product .product_type_variable:hover,
.woocommerce ul.products li.product .product_type_external:hover,
.woocommerce ul.products li.product .added_to_cart:hover{
background:#fff!important;color:#111!important;border:1px solid #ddd!important;
}
/* Ajustar orden de precios en móvil */
@media (max-width: 767px) {
.woocommerce ul.products li.product .price {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 6px !important;
}
.woocommerce ul.products li.product .price ins {
order: 1 !important; /* precio negro primero */
text-decoration: none !important;
color: #111 !important;
font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del {
order: 2 !important; /* tachado después */
color: #999 !important;
font-weight: 400 !important;
}
}
/* ===== BADGE DE DESCUENTO FLAT (desktop) ===== */
@media (min-width: 769px){
.woocommerce ul.products li.product .onsale{
position: absolute;
top: 12px;
right: 12px;
left: auto !important;
transform: none !important;
background: #ff4d4f; /* Rojo sólido */
color: #fff !important;
padding: 4px 10px;
line-height: 1.2;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
border-radius: 0; /* Esquinas rectas */
box-shadow: none !important;/* Sin sombras */
border: none !important; /* Sin bordes */
}
}
/* MÓVIL: precio (y título) al inicio de la tarjeta */
@media (max-width: 768px){
/* Ajusta este valor si tu card tiene otro padding interno (10–16px normalmente) */
.woocommerce ul.products li.product{ --card-pad: 12px; }
/* Título al inicio */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Precio al inicio (mismo arranque que el título) */
.woocommerce ul.products li.product .price{
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
text-align: left !important;
}
/* Orden y estilo: primero el precio negro, después el tachado */
.woocommerce ul.products li.product .price ins{
order: 1; font-weight: 700; color: #111;
}
.woocommerce ul.products li.product .price del{
order: 2; color: #999;
}
}
/* (opcional) Si usas Woo Blocks: aplica lo mismo a sus selectores */
@media (max-width: 768px){
.wc-block-grid__products .wc-block-grid__product{ --card-pad: 12px; }
.wc-block-grid__product .wc-block-grid__product-title{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
.wc-block-grid__product .wc-block-grid__product-price{
margin-left: calc(-1 * var(--card-pad)) !important;
padding-left: var(--card-pad) !important;
}
}
/* Jolse menu: mostrar la barra cuando el item está activo */
.sf-jolse-menu ul > li.current-menu-item > a,
.sf-jolse-menu ul > li.current_page_item > a,
.sf-jolse-menu ul > li.current-menu-ancestor > a,
.sf-jolse-menu ul > li.current_page_parent > a,
.sf-jolse-menu ul > li.current-post-ancestor > a {
border-bottom: 2px solid #111 !important; /* igual que el hover */
}
/* ============================
Estilo destacado de PRECIOS
============================ */
/* Colores (ajústalos si quieres) */
:root{
--sale-accent: #ff6b6b; /* mismo rojo del badge */
--btn-blue: #2a72ff; /* azul del botón estilo app */
--btn-blue-10: rgba(42,114,255,.10);
--muted: #9aa3af; /* gris para el precio tachado */
}
/* Lista clásica de productos (ul.products) */
.woocommerce ul.products li.product .price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
/* precio actual cuando HAY oferta */
.woocommerce ul.products li.product .price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem; /* ≈ 28px */
font-weight:800;
text-decoration:none;
}
/* precio tachado (antes) */
.woocommerce ul.products li.product .price del{
order:1;
color:var(--muted);
font-size:.9rem; /* ≈ 14–15px */
opacity:.9;
}
/* cuando NO hay oferta, destaca igual el precio */
.woocommerce ul.products li.product .price{
color:var(--sale-accent);
font-weight:800;
font-size:1.75rem;
}
.woocommerce ul.products li.product .price del + ins,
.woocommerce ul.products li.product .price > ins + del{
/* evita heredar el grande en el tachado */
font-size:.9rem;
}
/* ==============================
Botón "Añadir al carrito" — estilo app
============================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce a.button.product_type_simple{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue);
background:#fff;
color:var(--btn-blue);
font-weight:700;
padding:14px 16px;
border-radius:16px;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
/* hover / focus */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus{
background:var(--btn-blue);
color:#fff;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* cuando el producto ya está en el carrito */
.woocommerce ul.products li.product .added_to_cart{
display:block;
text-align:center;
margin-top:.5rem;
color:var(--btn-blue);
}
/* =========================================
Compatibilidad con Bloques (Product Grid)
========================================= */
.wc-block-grid__product .wc-block-grid__product-price{
display:flex;
align-items:baseline;
gap:.5rem;
margin:.35rem 0 .65rem;
line-height:1;
}
.wc-block-grid__product .wc-block-grid__product-price ins{
order:0;
color:var(--sale-accent);
font-size:1.75rem;
font-weight:800;
text-decoration:none;
}
.wc-block-grid__product .wc-block-grid__product-price del{
order:1;
color:var(--muted);
font-size:.9rem;
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button{
display:block;
width:100%;
text-align:center;
border:2px solid var(--btn-blue) !important;
background:#fff !important;
color:var(--btn-blue) !important;
font-weight:700;
padding:14px 16px !important;
border-radius:16px !important;
box-shadow:0 10px 24px var(--btn-blue-10);
transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover{
background:var(--btn-blue) !important;
color:#fff !important;
transform:translateY(-1px);
box-shadow:0 14px 28px var(--btn-blue-10);
}
/* Pequeños ajustes responsive (opcional) */
@media (max-width: 480px){
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product .wc-block-grid__product-price ins{
font-size:1.6rem; /* un poquito más compacto en móvil */
}
}
/* ============================
Ajustes: color, botón y nombre
============================ */
/* Nombre del producto sin negrita */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
font-weight: 400 !important;
}
/* Botón Añadir al carrito */
:root {
--ui-blue: #00548b; /* azul corporativo */
--ui-blue-10: rgba(0, 84, 139, .04);
--ui-blue-20: rgba(0, 84, 139, .12);
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block !important;
width: 100% !important;
text-align: center !important;
border: 2px solid var(--ui-blue) !important;
background: var(--ui-blue-10) !important;
color: var(--ui-blue) !important;
font-weight: 600 !important; /* texto medio, no negrita */
font-size: 15px !important;
padding: 12px 14px !important;
border-radius: 6px !important; /* esquinas suaves */
box-shadow: 0 4px 12px var(--ui-blue-20) !important;
transition: all .2s ease !important;
}
/* Hover */
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: var(--ui-blue) !important;
color: #fff !important;
border-color: var(--ui-blue) !important;
box-shadow: 0 6px 16px rgba(0, 84, 139, .25) !important;
}
/* =====================
AJUSTES PRECIO
===================== */
.woocommerce ul.products li.product .price ins {
font-size: 1.1rem !important; /* más pequeño */
font-weight: 600 !important;
color: #00548b !important; /* azul corporativo */
text-decoration: none !important;
}
.woocommerce ul.products li.product .price del {
font-size: 0.9rem !important;
color: #999 !important;
margin-left: 4px !important;
}
/* =====================
AJUSTES ESPACIADO PRODUCTOS
===================== */
.woocommerce ul.products li.product {
margin: 0 0px 30px !important; /* menos espacio lateral */
padding: 15px !important;
}
/* =====================
BOTÓN AÑADIR AL CARRITO
===================== */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
border: 2px solid #00548b !important;
background: transparent !important;
color: #00548b !important;
font-weight: 600 !important;
border-radius: 6px !important; /* esquinas suaves */
padding: 10px 12px !important;
transition: all .2s ease !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: #00548b !important;
color: #fff !important;
}
.woocommerce ul.products li.product .price ins {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: rgb(0, 84, 139) !important;
text-decoration: none !important;
}
/* Bloque precio: pegado a la izquierda, sin márgenes/paddings y con separación via gap */
.woocommerce ul.products li.product .price {
display: flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 6px !important; /* separación entre nuevo y tachado */
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
/* Precio actual SIEMPRE primero (aunque el HTML venga al revés) */
.woocommerce ul.products li.product .price ins {
order: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Precio tachado DESPUÉS, sin margen manual (lo da el gap) */
.woocommerce ul.products li.product .price del {
order: 2 !important;
margin: 0 !important;
padding: 0 !important;
color: #999 !important;
font-size: 0.9rem !important;
opacity: .9;
}
/* Solo en pantallas móviles: bajar el botón del carrito respecto al precio */
@media (max-width: 768px) {
.woocommerce ul.products li.product .price {
margin-bottom: 12px !important; /* espacio bajo el precio */
}
.woocommerce ul.products li.product .button {
margin-top: 10px !important; /* separa botón del precio */
}
}
/* =========================================================
PRODUCT CARD – estilos base (móvil y escritorio)
========================================================= */
/* Tarjeta */
.woocommerce ul.products li.product {
background:#fff;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
padding:18px 16px 16px;
transition:transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover {
transform:translateY(-2px);
box-shadow:0 14px 36px rgba(0,0,0,.09);
}
/* Título más limpio (sin negrita fuerte) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
font-weight:500;
line-height:1.35;
margin:12px 0 10px;
}
/* Bloque de precios: nuevo a la izquierda, tachado a la derecha */
.woocommerce ul.products li.product .price {
display:flex;
align-items:baseline;
gap:8px;
margin:0 !important;
padding:0 !important;
}
.woocommerce ul.products li.product .price ins {
order:1;
color:#00548b; /* azul pedido */
font-weight:800;
text-decoration:none;
}
.woocommerce ul.products li.product .price del {
order:2;
color:#999;
opacity:.9;
}
/* Botón Añadir al carrito: borde azul, fondo blanco, ancho 100% */
.woocommerce ul.products li.product .button {
width:100%;
background:#fff;
color:#00548b;
border:2px solid #00548b;
border-radius:14px;
padding:11px 14px;
font-weight:600;
box-shadow:0 3px 0 rgba(0,84,139,.08);
transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .08s ease;
margin-top:12px;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus {
background:#00548b;
color:#fff;
box-shadow:0 6px 16px rgba(0,84,139,.22);
}
.woocommerce ul.products li.product .button:active {
transform:translateY(1px);
}
/* Evitar que el precio “salte” a la derecha: alinear a la izquierda */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price * {
text-align:left !important;
}
/* =========================================================
TAMAÑOS tipográficos y espaciados por viewport
========================================================= */
/* — Base móvil (≤768px) */
@media (max-width:768px){
/* precio grande en móvil */
.woocommerce ul.products li.product .price ins {
font-size:1.8rem !important;
}
.woocommerce ul.products li.product .price del {
font-size:1rem !important;
}
/* botón separado del precio en móvil */
.woocommerce ul.products li.product .button {
margin-top:14px;
}
/* compactar grid en móvil (cuando el tema use grid moderno) */
.woocommerce ul.products {
row-gap:22px;
column-gap:18px;
}
}
/* — Escritorio (≥1025px) */
@media (min-width:1025px){
/* que se noten también en desktop */
.woocommerce ul.products li.product .price ins {
font-size:1.4rem !important;
}
.woocommerce ul.products li.product .price del {
font-size:.95rem !important;
}
/* un poco menos redondeado en desktop (pediste poco redondeo) */
.woocommerce ul.products li.product .button {
border-radius:10px;
margin-top:10px;
}
/* acercar productos entre sí (Storefront usa márgenes grandes) */
.woocommerce ul.products li.product {
margin-bottom:2.2rem; /* menos separación vertical */
}
.woocommerce ul.products {
gap:28px 26px; /* si el contenedor soporta gap */
}
}
/* =========================================================
DETALLES que suelen “ganar” especificidad en Storefront
========================================================= */
/* Quitar decoraciones impuestas por el tema en precios */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
text-decoration:none !important;
}
/* Asegurar que el nuevo precio siempre va primero */
.woocommerce ul.products li.product .price ins { order:1 !important; }
.woocommerce ul.products li.product .price del { order:2 !important; }
/* Quitar márgenes “fantasma” arriba del precio (algunos temas los ponen) */
.woocommerce ul.products li.product .price { margin-top:0 !important; }
/* ============================
Badge de oferta – SOLO ESCRITORIO
============================ */
@media (min-width: 1025px) {
/* Asegurar posicionamiento relativo de la card */
.woocommerce ul.products li.product {
position: relative;
}
/* Eliminar pseudo-elementos que dibujan rayitas/triángulos (solo desktop) */
.woocommerce ul.products li.product .onsale::before,
.woocommerce ul.products li.product .onsale::after {
content: none !important;
display: none !important;
}
/* Badge estilo “rectángulo rojo” arriba-derecha (desktop) */
.woocommerce ul.products li.product .onsale {
position: absolute;
top: 12px;
right: 14px;
left: auto !important; /* por si en móvil lo pones a la izquierda */
background: #e63946; /* rojo plano */
color: #fff;
padding: 6px 10px; /* tamaño compacto */
border-radius: 3px; /* leve redondeo, no píldora completa */
font-weight: 800;
font-size: .78rem;
line-height: 1;
text-transform: uppercase;
border: 0;
box-shadow: 0 6px 16px rgba(255, 90, 90, .12); /* sombra suave */
z-index: 5;
}
}
/* ============================
Ajustar precio SOLO en móvil
============================ */
@media (max-width: 767px) {
.woocommerce ul.products li.product .price ins {
font-size: 1.4rem !important; /* precio actual más pequeño */
font-weight: 700 !important;
}
.woocommerce ul.products li.product .price del {
font-size: 0.8rem !important; /* precio tachado más pequeño */
}
}
/* Igualar altura de los nombres de productos */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
min-height: 48px; /* Ajusta este valor según el número de líneas promedio */
line-height: 1.3em;
display: -webkit-box;
-webkit-line-clamp: 2; /* máximo 2 líneas visibles */
-webkit-box-orient: vertical;
overflow: hidden;
}