.elementor-236 .elementor-element.elementor-element-25ca234{--display:flex;}.elementor-236 .elementor-element.elementor-element-a9f011e{--display:flex;}.elementor-236 .elementor-element.elementor-element-ab3a941{--display:flex;}.elementor-236 .elementor-element.elementor-element-2849704{--update-cart-automatically-display:none;}.elementor-236 .elementor-element.elementor-element-8f33a42{--display:flex;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-236 .elementor-element.elementor-element-cfbaa1f.elementor-wc-products ul.products li.product{text-align:center;}.elementor-236 .elementor-element.elementor-element-cfbaa1f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-236 .elementor-element.elementor-element-cfbaa1f.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-236 .elementor-element.elementor-element-cfbaa1f.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-size:35px;}.elementor-236 .elementor-element.elementor-element-cfbaa1f.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-236 .elementor-element.elementor-element-cfbaa1f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-236 .elementor-element.elementor-element-cfbaa1f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-cart, class: .elementor-element-2849704 *//* ================================================================
SENSIA EXPERIENCIA — Widget "Cart" de Elementor (Pro)
----------------------------------------------------------------
Pegar en: este mismo widget "Cart" > Avanzado > Custom CSS
Usa la palabra ".elementor-236 .elementor-element.elementor-element-2849704" — NO body.woocommerce-cart — porque
este es el panel por-widget, solo afecta a este elemento.
⚠️ A propósito NO se toca aquí el layout de columnas (ancho,
float, grid) — eso ya lo gestiona el propio widget de Elementor
de forma nativa y se ve correcto en tu captura. Solo se aplican
colores, tipografía y formas (botón, inputs, etc).
================================================================ */
/* ──────────────────────────────────────────────────────────────
1. TIPOGRAFÍA BASE
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 {
font-family: 'Noto Sans', sans-serif !important;
color: #18140F !important;
}
/* ──────────────────────────────────────────────────────────────
2. TABLA DE PRODUCTOS
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 table.shop_table {
border: none !important;
border-collapse: collapse !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 table.shop_table thead th {
font-family: 'Noto Sans', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: #9A8F82 !important;
border: none !important;
border-bottom: 1px solid rgba(26,21,16,.12) !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 table.shop_table tbody tr.cart_item {
border-bottom: 1px solid rgba(26,21,16,.08) !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 table.shop_table td {
border: none !important;
vertical-align: middle !important;
}
/* ──────────────────────────────────────────────────────────────
3. MINIATURA
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 td.product-thumbnail img {
width: 64px !important;
height: 64px !important;
object-fit: cover !important;
display: block !important;
background: #F2EDE3 !important;
}
/* ──────────────────────────────────────────────────────────────
4. NOMBRE DEL PRODUCTO + VARIACIÓN
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 td.product-name a {
font-family: 'Noto Sans Mende Kikakui', 'Noto Serif', Georgia, serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #18140F !important;
text-decoration: none !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 td.product-name dl.variation dt,
.elementor-236 .elementor-element.elementor-element-2849704 td.product-name dl.variation dd {
display: inline !important;
font-size: 12px !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 td.product-name dl.variation dt {
font-weight: 600 !important;
color: #9A8F82 !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 td.product-name dl.variation dd {
color: #5C5449 !important;
font-style: italic !important;
margin: 0 0 0 4px !important;
}
/* ──────────────────────────────────────────────────────────────
5. PRECIO / SUBTOTAL
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 td.product-price,
.elementor-236 .elementor-element.elementor-element-2849704 td.product-subtotal {
font-family: 'Noto Sans', sans-serif !important;
font-size: 13.5px !important;
font-weight: 700 !important;
color: #18140F !important;
}
/* ──────────────────────────────────────────────────────────────
6. CANTIDAD — píldora redondeada
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 .quantity {
display: inline-flex !important;
align-items: center !important;
border: 1.5px solid rgba(26,21,16,.18) !important;
border-radius: 40px !important;
overflow: hidden !important;
height: 38px !important;
background: #fff !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .quantity .qty {
width: 46px !important;
height: 100% !important;
border: none !important;
background: transparent !important;
text-align: center !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #18140F !important;
}
/* ──────────────────────────────────────────────────────────────
7. ELIMINAR (×)
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 td.product-remove a.remove {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: transparent !important;
color: #9A8F82 !important;
font-size: 15px !important;
text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
.elementor-236 .elementor-element.elementor-element-2849704 td.product-remove a.remove:hover {
background: #FBEAEA !important;
color: #C0392B !important;
}
}
/* ──────────────────────────────────────────────────────────────
8. CUPÓN + ACTUALIZAR
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 #coupon_code {
border: 1px solid rgba(26,21,16,.15) !important;
background: #F2EDE3 !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 13px !important;
color: #18140F !important;
height: 42px !important;
border-radius: 0 !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 #coupon_code:focus {
border-color: #C9A56A !important;
outline: none !important;
background: #fff !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 button[name="apply_coupon"] {
border: 1px solid #18140F !important;
background: transparent !important;
color: #18140F !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
height: 42px !important;
border-radius: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
.elementor-236 .elementor-element.elementor-element-2849704 button[name="apply_coupon"]:hover {
background: #18140F !important;
color: #F2ECE0 !important;
}
}
.elementor-236 .elementor-element.elementor-element-2849704 button[name="update_cart"] {
border: none !important;
background: transparent !important;
color: #5C5449 !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: underline !important;
}
/* ──────────────────────────────────────────────────────────────
9. CAJA DE TOTALES — "PEDIDO TOTAL"
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals h2 {
font-family: 'Noto Sans Mende Kikakui', 'Noto Serif', Georgia, serif !important;
font-size: 17px !important;
font-weight: 600 !important;
color: #18140F !important;
text-transform: none !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table {
border: none !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table tr {
border-bottom: 1px solid rgba(26,21,16,.08) !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table tr:last-child {
border-bottom: none !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table th,
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table td {
border: none !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 13px !important;
color: #5C5449 !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table td {
color: #18140F !important;
font-weight: 600 !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table tr.order-total th,
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table tr.order-total td {
font-size: 16px !important;
font-weight: 700 !important;
}
.elementor-236 .elementor-element.elementor-element-2849704 .cart_totals table tr.order-total td {
color: #C9A56A !important;
}
/* ──────────────────────────────────────────────────────────────
10. BOTÓN "PROCEDER AL PAGO" — la pieza que se veía mal
(turquesa, cuadrada) — la fuerzo a píldora negra de marca
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-2849704 .wc-proceed-to-checkout a.checkout-button,
.elementor-236 .elementor-element.elementor-element-2849704 a.checkout-button,
.elementor-236 .elementor-element.elementor-element-2849704 .checkout-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 52px !important;
background: #18140F !important;
background-color: #18140F !important;
color: #F2ECE0 !important;
border: none !important;
border-radius: 40px !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
.elementor-236 .elementor-element.elementor-element-2849704 .checkout-button:hover {
background: #2C241A !important;
background-color: #2C241A !important;
}
}
/* ──────────────────────────────────────────────────────────────
11. RESPONSIVE — solo tipografía, NO toca el layout de columnas
(eso ya lo gestiona el propio widget de Elementor)
────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.elementor-236 .elementor-element.elementor-element-2849704 table.shop_table thead { display: none !important; }
.elementor-236 .elementor-element.elementor-element-2849704 td.product-name a { font-size: 13px !important; }
.elementor-236 .elementor-element.elementor-element-2849704 .checkout-button { font-size: 10px !important; }
}
/* ──────────────────────────────────────────────────────────────
NOTAS
──────────────────────────────────────────────────────────────
1. Si el botón "Proceder al pago" sigue en turquesa después de
pegar esto, ese color viene del KIT GLOBAL de Elementor (el
color de "Botón" del tema) con más especificidad que esta
regla. En ese caso, revisa el propio widget Cart > Estilo >
pestaña del botón "Checkout" y cambia el color ahí
directamente (más fiable que pelear con CSS contra el kit).
2. No se toca aquí ningún display/float/width de
.woocommerce-cart-form o .cart-collaterals — el layout de
dos columnas que se ve en tu captura ya es correcto y lo
controla el propio widget de Elementor, así que tocarlo de
nuevo por CSS podría volver a romperlo.
================================================================ *//* End custom CSS */
/* Start custom CSS for woocommerce-product-related, class: .elementor-element-cfbaa1f *//* ================================================================
SENSIA EXPERIENCIA — Estilo para "Productos Relacionados"
----------------------------------------------------------------
Widget: Elementor "Product Related"
Pegar en: este mismo widget > Avanzado > Custom CSS
(usa la palabra ".elementor-236 .elementor-element.elementor-element-cfbaa1f" — NO un ID — porque estás en el
panel por-widget de Elementor, igual que en Add To Cart)
Mismo lenguaje visual que el grid de Regala/Selección:
tarjetas blancas, imagen cuadrada, título sin mayúsculas
forzadas, precio en negrita, botón outline → relleno en hover.
================================================================ */
/* ──────────────────────────────────────────────────────────────
1. CONTENEDOR DEL GRID
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px 28px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products::before,
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products::after {
content: none !important;
}
/* ──────────────────────────────────────────────────────────────
2. CARD INDIVIDUAL — el reset aquí es clave: evita que se vean
imágenes "apiladas" o desbordadas si el tema no recorta bien
el contenido de cada
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product {
background: #ffffff !important;
border: 1px solid rgba(26, 21, 16, 0.08) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product:hover {
box-shadow: 0 18px 40px rgba(26, 21, 16, 0.10) !important;
transform: translateY(-3px);
}
}
/* ──────────────────────────────────────────────────────────────
3. IMAGEN — fuerza UNA sola imagen visible, tamaño fijo,
recorte limpio. Esto resuelve el efecto "iconos apilados" que
se ve sin estilos: cada solo debe mostrar su primera
imagen, a tamaño y posición controlados.
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product a.woocommerce-LoopProduct-link {
display: block !important;
text-decoration: none !important;
position: relative !important;
}
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
display: block !important;
background: #F2EDE3 !important;
transition: transform .6s ease;
}
/* Si hay más de una imagen renderizada dentro del mismo enlace
(galería completa en vez de solo la destacada), oculta todas
menos la primera — evita el apilado visual */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product a.woocommerce-LoopProduct-link img:not(:first-of-type) {
display: none !important;
}
@media (hover: hover) and (pointer: fine) {
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product:hover img {
transform: scale(1.04);
}
}
/* Productos tipo icono (fondo transparente, como las cajas de
regalo) → fondo oscuro y más aire, igual que en Regala */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product.product-type-variable img,
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product img[src*="tarjeta"] {
object-fit: contain !important;
padding: 36px !important;
background: #18140F !important;
}
/* ──────────────────────────────────────────────────────────────
4. TÍTULO
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product h2.woocommerce-loop-product__title,
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product h3.woocommerce-loop-product__title {
font-family: 'Noto Sans Mende Kikakui', 'Noto Serif', Georgia, serif !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
color: #18140F !important;
text-transform: none !important;
line-height: 1.4 !important;
margin: 22px 22px 6px !important;
}
/* ──────────────────────────────────────────────────────────────
5. PRECIO
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product .price {
font-family: 'Noto Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #18140F !important;
margin: 0 22px 18px !important;
display: block !important;
}
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product .price del {
color: #9A8F82 !important;
font-weight: 400 !important;
opacity: .7 !important;
margin-right: 6px !important;
}
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product .price ins {
text-decoration: none !important;
color: #C9A56A !important;
}
/* ──────────────────────────────────────────────────────────────
6. BOTÓN — "Añadir al carrito" / "Seleccionar opciones"
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product a.button,
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product a.add_to_cart_button {
display: block !important;
background: transparent !important;
color: #18140F !important;
border: 1px solid #18140F !important;
border-radius: 0 !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
padding: 13px 18px !important;
margin: 0 22px 22px !important;
width: calc(100% - 44px) !important;
text-align: center !important;
transition: background .2s, color .2s;
}
@media (hover: hover) and (pointer: fine) {
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product a.button:hover,
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product a.add_to_cart_button:hover {
background: #18140F !important;
color: #F2ECE0 !important;
}
}
/* "Seleccionar opciones" (productos variables) — mismo estilo outline */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product a.product_type_variable {
background: transparent !important;
border: 1px solid #18140F !important;
color: #18140F !important;
}
/* ──────────────────────────────────────────────────────────────
7. ETIQUETA "OFERTA" (si se usa)
────────────────────────────────────────────────────────────── */
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product .onsale {
position: absolute !important;
top: 14px !important;
left: 14px !important;
right: auto !important;
background: #C9A56A !important;
color: #18140F !important;
font-family: 'Noto Sans', sans-serif !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 5px 10px !important;
border-radius: 0 !important;
min-height: 0 !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
}
/* ──────────────────────────────────────────────────────────────
8. RESPONSIVE
────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product h2.woocommerce-loop-product__title,
.elementor-236 .elementor-element.elementor-element-cfbaa1f ul.products li.product h3.woocommerce-loop-product__title {
font-size: 14px !important;
}
}
/* ──────────────────────────────────────────────────────────────
NOTAS
──────────────────────────────────────────────────────────────
1. El efecto "iconos apilados" que se ve sin estilos suele
desaparecer en cuanto se fuerza aspect-ratio + object-fit
en la imagen (punto 3). Si tras pegar esto sigue viéndose
más de un icono superpuesto en algún producto concreto, ese
producto en WooCommerce probablemente tiene varias imágenes
en la galería en vez de solo una imagen destacada — revisa
Editar producto > Galería de productos y deja solo una.
2. Mismo criterio que en el resto del sitio: animaciones
(hover, zoom) solo en dispositivos con puntero real
(@media hover:hover and pointer:fine), para no romperse en
móvil/táctil.
3. Si "Productos Relacionados" muestra siempre 3 ítems pero tu
catálogo de Selección mensual solo tiene 4 productos en
total, WooCommerce coge los otros 3 automáticamente por
categoría — no hace falta configurarlo a mano.
================================================================ *//* End custom CSS */