, así que el texto caía en una
columna estrechísima y se salía de la pantalla (411 px con 390 de ancho).
Ya estaba resuelto en Condiciones, pero solo para esa página. */
.bb-legal-texto ol.bb-pasos{ display:block; gap:0; margin:.4rem 0 1.7rem; padding:0; }
.bb-legal-texto ol.bb-pasos > li{
display:block !important;
grid-template-columns:none !important;
background:linear-gradient(135deg,#FFF5FA 0%,#F8F2FF 100%);
border:1px solid rgba(247,168,196,.5);
border-radius:16px;
padding:.9rem 1.15rem .9rem 3.4rem;
margin:0 0 .6rem;
transform:none;
}
.bb-legal-texto ol.bb-pasos > li:last-child{ margin-bottom:0; }
.bb-legal-texto ol.bb-pasos > li:hover{
background:linear-gradient(135deg,#FFEFF7 0%,#F3EBFF 100%); transform:none;
}
.bb-legal-texto ol.bb-pasos > li::before{ left:1.05rem; top:.92rem; }
.bb-legal-texto ol.bb-pasos > li > strong:first-child{ color:var(--bb-rosa-hondo,#C42A6B); }
/* y que una dirección larga o un correo no rompan la caja */
.bb-legal-texto ol.bb-pasos > li a,
.bb-legal-texto ol.bb-pasos > li strong{ overflow-wrap:anywhere; }
/* --- 2. La casilla de «acepto las condiciones» de la caja -----------------
Medía 4 × 27 px y se veía como una rayita: el navegador la pintaba como
texto en línea porque el tema le quita la apariencia propia sin darle
tamaño. Sin poder marcarla, no se puede terminar la compra. */
.woocommerce-checkout #terms,
.woocommerce-checkout .woocommerce-form__input-checkbox,
.woocommerce form .form-row input[type="checkbox"]{
appearance:none; -webkit-appearance:none;
display:inline-block !important;
width:26px !important; height:26px !important; min-width:26px;
margin:0 10px 0 0; padding:0;
vertical-align:-6px;
border:2px solid var(--bb-rosa-suave,#F7A8C4); border-radius:8px;
background:#fff; cursor:pointer; position:relative; flex:0 0 26px;
}
.woocommerce-checkout #terms:checked,
.woocommerce-checkout .woocommerce-form__input-checkbox:checked,
.woocommerce form .form-row input[type="checkbox"]:checked{
background-image:var(--bb-degradado,linear-gradient(120deg,#FF5FA2,#7C3AED));
border-color:transparent;
}
.woocommerce-checkout #terms:checked::after,
.woocommerce-checkout .woocommerce-form__input-checkbox:checked::after,
.woocommerce form .form-row input[type="checkbox"]:checked::after{
content:""; position:absolute; left:8px; top:3px;
width:6px; height:12px; border:solid #fff; border-width:0 3px 3px 0;
transform:rotate(45deg);
}
.woocommerce-checkout #terms:focus-visible,
.woocommerce form .form-row input[type="checkbox"]:focus-visible{
outline:3px solid rgba(255,95,162,.45); outline-offset:2px;
}
/* la fila entera, cómoda para el dedo */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox{
display:flex; align-items:flex-start; gap:0; min-height:44px;
padding:8px 0; cursor:pointer; line-height:1.45;
}
/* --- 3. El botón de la rejilla de producto --------------------------------
El rótulo quedaba 11 px más arriba de la cuenta (10 px de aire arriba y 21
abajo): el renglón era tan justo como la letra y las tildes lo empujaban. */
ul.products li.product .button,
ul.products li.product a.add_to_cart_button{
display:flex !important; align-items:center; justify-content:center;
line-height:1.25 !important; text-align:center;
}
/* --- 4. El panel lateral del carrito --------------------------------------
«Finalizar compra» salía cortado (145 px de texto en 140 de botón), el
precio era gris clarísimo sobre blanco (contraste 1,43:1, mínimo 4,5) y el
aspa de cerrar y la de quitar no llegaban ni a 26 px. */
.elementor-menu-cart__footer-buttons{ grid-template-columns:1fr 1.25fr !important; gap:10px; }
.elementor-menu-cart__footer-buttons .elementor-button{
font-size:.86rem !important; padding:.72em .5em !important;
white-space:normal !important; line-height:1.2; text-align:center;
display:flex !important; align-items:center; justify-content:center;
}
.elementor-menu-cart__product-price,
.elementor-menu-cart__product-price .amount,
.elementor-menu-cart__product-price .quantity{
color:var(--bb-texto,#4B3A63) !important; font-weight:600;
}
.elementor-menu-cart__close-button{
width:44px !important; height:44px !important;
background-size:17px 17px !important; background-position:center !important;
border-radius:999px;
}
.elementor-menu-cart__close-button:hover{ background-color:rgba(255,95,162,.12); }
.elementor-menu-cart__product-remove{
width:34px !important; height:34px !important; border-radius:999px;
}
/* el subtotal y los botones, abajo del cajón: quedaban 600 px de vacío debajo */
.elementor-menu-cart__main{ justify-content:flex-start; }
.elementor-menu-cart__products{ flex:1 1 auto; }
.elementor-menu-cart__footer-buttons{ margin-top:auto !important; }
/* --- 5. Los puntos del carrusel de la portada -----------------------------
Medían 10 × 10 px: imposibles de acertar con el dedo. Se agranda la zona
sensible sin engordar el dibujo. */
.bb-hero-slides .swiper-pagination-bullet{
width:12px; height:12px;
padding:16px 8px; background-clip:content-box; box-sizing:content-box;
margin:0 !important;
}
.bb-hero-slides .swiper-pagination-bullet-active{ width:30px; }
/* --- 6. Contrastes por debajo del mínimo ---------------------------------- */
/* La disponibilidad de la ficha: 2,13:1 sobre su fondo verde claro */
.bb-ficha-stock .stock.in-stock,
.woocommerce div.product .bb-ficha-stock .stock,
.woocommerce div.product .bb-ficha-stock p.ast-stock-detail .stock{
color:#08463B !important;
}
/* El pie de la franja morada. El texto ya era blanco puro; el velo que se probó
sobre el fondo se veía como un rectángulo más oscuro dentro de la banda, así
que se queda una sombra fina bajo la letra, que es lo que de verdad la separa
del degradado sin ensuciar el diseño. */
.bb-franja .bb-franja-pie,
.bb-ficha-franja .bb-franja-pie,
p.bb-franja-pie{
color:#FFFFFF !important; font-weight:500;
text-shadow:0 1px 3px rgba(36,19,68,.55);
}
/* --- 7. El pie en el móvil -----------------------------------------------
Los cuatro distintivos y el aviso de copyright iban pegados, sin respiro. */
@media (max-width:767px){
.bb-pie-fondo .bb-pie-copy{ margin-top:16px !important; }
.bb-pie-fondo > .elementor-container > .elementor-column:first-child{ padding-top:4px; }
}
/* --- 8. La cabecera de la tienda y de las categorías ----------------------
El aire de arriba y el de abajo no eran iguales: 12 px sobre las migas
frente a 34 bajo el texto en móvil, y 16 frente a 48 en escritorio. */
.elementor-element-a1e0001{ padding-top:48px !important; }
@media (max-width:767px){
.elementor-element-a1e0001{ padding-top:34px !important; }
}
/* --- 9. Los productos relacionados de la ficha ----------------------------
Salían con la letra del sistema, en rosa y alineados a la izquierda, en vez
de con la tipografía de la casa: la familia estaba escrita como
"'Fredoka', sans-serif" (entre comillas toda la cadena), así que el
navegador buscaba una fuente con ese nombre, no la encontraba y se iba a la
genérica. Aquí se le devuelve la que le toca. */
.bb-ficha-related ul.products li.product .woocommerce-loop-product__title,
.bb-ficha-related ul.products li.product h2,
.related ul.products li.product .woocommerce-loop-product__title{
font-family:"Fredoka", sans-serif !important;
color:var(--bb-noche,#241344) !important;
text-align:center !important;
}
/* --- 10. La ficha en móvil y tableta --------------------------------------
Al apilarse las columnas, el sello «Hecho a mano en España» quedaba pegado
a la tira de miniaturas de la galería, sin nada de aire. */
@media (max-width:1024px){
.bb-ficha-pin-widget{ margin-top:26px !important; }
}
@media (max-width:767px){
.bb-ficha-pin-widget{ margin-top:22px !important; }
}
/* --- 11. La ficha: dos rayas seguidas ------------------------------------
Encima de «Referencia» había una raya discontinua (la del diseño) y justo
debajo el borde continuo que WooCommerce le pone a los datos del producto:
dos líneas pegadas donde solo hace falta una. */
.woocommerce div.product .product_meta,
.bb-ficha .product_meta{
border-top:0 !important;
padding-top:0 !important;
}
/* El campo para escribir la palabra de la pulsera a medida */
.bb-personaliza{
margin:0 0 1.1rem; padding:1rem 1.15rem 1.05rem;
background:#FFF5FA; border:1.5px dashed rgba(255,95,162,.55); border-radius:18px;
}
.bb-personaliza__etiqueta{
display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
font-family:"Fredoka",inherit; font-weight:600; font-size:1rem;
color:var(--bb-noche,#241344); margin:0 0 .55rem;
}
.bb-personaliza__obl{
font-family:"Nunito",inherit; font-size:.72rem; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:#fff; background:var(--bb-rosa-chicle,#FF5FA2);
padding:.18em .6em; border-radius:999px;
}
.bb-personaliza__campo{
width:100%; box-sizing:border-box;
padding:.78rem 1rem; border-radius:999px; border:2px solid rgba(255,95,162,.45);
background:#fff; color:var(--bb-noche,#241344);
font-family:"Fredoka",inherit; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase;
min-height:48px;
}
.bb-personaliza__campo::placeholder{ color:#C9AEC0; letter-spacing:.06em; }
.bb-personaliza__campo:focus{
outline:none; border-color:var(--bb-rosa-chicle,#FF5FA2);
box-shadow:0 0 0 4px rgba(255,95,162,.22);
}
.bb-personaliza__ayuda{
margin:.5rem 0 0; font-size:.88rem; color:var(--bb-texto,#4B3A63);
}
.bb-personaliza__aviso{
margin:.7rem 0 0; font-size:.83rem; line-height:1.5; color:#6B5A7D;
padding-top:.65rem; border-top:1px solid rgba(255,95,162,.28);
}
.bb-personaliza__aviso strong{ color:var(--bb-rosa-hondo,#C42A6B); }
/* En una pieza a medida, el sello de «cambios en 14 días» no es cierto:
se sustituye por el que corresponde. */
.bb-producto-personalizado .bb-ficha-garantias li:nth-child(3) .bb-gar-ico{
font-size:0;
}
.bb-producto-personalizado .bb-ficha-garantias li:nth-child(3) .bb-gar-ico::after{
content:"✨"; font-size:1.35rem;
}
.bb-producto-personalizado .bb-ficha-garantias li:nth-child(3) .bb-gar-txt b{ font-size:0; }
.bb-producto-personalizado .bb-ficha-garantias li:nth-child(3) .bb-gar-txt b::after{
content:"Hecha solo para ti"; font-size:.94rem;
}
.bb-producto-personalizado .bb-ficha-garantias li:nth-child(3) .bb-gar-txt{ font-size:0; }
.bb-producto-personalizado .bb-ficha-garantias li:nth-child(3) .bb-gar-txt::after{
content:"Con la palabra que elijas"; font-size:.82rem; display:block;
}
/* El botón «Personalizar» del listado de la tienda */
.bb-boton-personalizar::after{ content:" ✨"; }
@media (max-width:600px){
.bb-personaliza{ padding:.9rem 1rem; }
.bb-personaliza__campo{ font-size:1rem; }
}
/* El formulario de compra es una fila sin saltos: al meter el campo de la
palabra, la cantidad y el botón se quedaban sin sitio y «Añadir al carrito»
salía convertido en un círculo con el texto partido en tres. El campo pasa a
ocupar su propia fila y el botón recupera su tamaño. */
.bb-producto-personalizado form.cart{
flex-wrap:wrap !important;
align-items:center;
}
.bb-producto-personalizado form.cart .bb-personaliza{
flex:1 1 100%; width:100%; order:-1;
}
.bb-producto-personalizado form.cart .quantity{
flex:0 0 auto;
}
.bb-producto-personalizado form.cart .single_add_to_cart_button{
flex:1 1 auto; min-width:190px; height:auto; white-space:nowrap;
}
@media (max-width:420px){
.bb-producto-personalizado form.cart .single_add_to_cart_button{ min-width:0; }
}
/* ==========================================================================
Remates de la revisión por dispositivos
========================================================================== */
/* El título de «Mi cuenta» iba a la izquierda y el resto centrado */
.woocommerce-account .entry-header .entry-title{ text-align:center; }
/* Astra pone un botón de carrito pequeño sobre la foto que repite el botón
grande de abajo y no llega al tamaño mínimo para el dedo: sobra. */
.ast-on-card-button,
.ast-shop-hover-card .ast-on-card-button{ display:none !important; }
/* El botón de «subir» se plantaba encima del último producto */
#ast-scroll-top{ z-index:95; }
@media (max-width:1024px){
#ast-scroll-top{
width:42px; height:42px; line-height:42px; font-size:16px;
right:14px; bottom:14px; opacity:.88;
}
#ast-scroll-top:hover, #ast-scroll-top:focus{ opacity:1; }
.woocommerce ul.products,
.elementor-widget-woocommerce-products ul.products{ padding-bottom:64px; }
}
/* Enlaces del pie: en el móvil no llegaban al tamaño cómodo para el dedo */
@media (max-width:768px){
.elementor-location-footer .elementor-icon-list-item{ margin-bottom:2px; }
.elementor-location-footer .elementor-icon-list-item > a{
display:flex; align-items:center; min-height:44px;
}
/* y las listas quedaban en dos columnas desiguales: Elementor las pone
en línea, así que hay que imponerse para dejar un enlace por fila */
.elementor-location-footer .elementor-icon-list-items,
.elementor-location-footer .elementor-icon-list-items.elementor-inline-items{
display:block !important;
}
.elementor-location-footer .elementor-icon-list-items .elementor-icon-list-item{
display:flex !important; width:100%; margin-right:0 !important;
}
}
/* ---------- Mi cuenta ---------- */
/* Astra pinta los bordes en turquesa neón por defecto; se pasa a un rosa suave
que sí está en la paleta de la marca. Afecta a formularios de todo el sitio. */
:root{ --ast-border-color:#F3D7E4; }
.woocommerce-account .woocommerce{ max-width:560px; margin:0 auto; }
/* El formulario de acceso, como una ficha */
.woocommerce-account .woocommerce-form-login{
margin:0; padding:30px 32px; border:0;
background:#fff; border-radius:var(--bb-radio,22px);
box-shadow:var(--bb-sombra,0 10px 30px rgba(124,58,237,.13));
}
.woocommerce-account .woocommerce > h2{
font-family:"Fredoka",inherit; font-size:1.45rem; margin:0 0 8px;
color:var(--bb-noche,#241344); text-align:center;
}
.bb-cuenta__intro{
max-width:560px; margin:0 auto 22px; text-align:center;
color:var(--bb-texto,#4B3A63); line-height:1.55;
}
.bb-cuenta__salida{
margin:20px 0 0; text-align:center; font-weight:600;
}
.bb-cuenta__salida a{ color:var(--bb-rosa-hondo,#C42A6B); }
.woocommerce-account .woocommerce-form-login label{
display:block; margin-bottom:6px; font-weight:600; color:var(--bb-noche,#241344);
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme{
display:flex; align-items:center; gap:.5em; margin:4px 0 18px; font-weight:500;
}
.woocommerce-account .woocommerce-form-login button[type="submit"]{
width:100%; justify-content:center;
}
.woocommerce-account .woocommerce-LostPassword{
margin:14px 0 0; text-align:center;
}
/* ---------- El panel de quien ya ha entrado ---------- */
/* Dos columnas de verdad: el menú a la izquierda y el contenido a la derecha.
Astra los saca flotados y con anchos raros, así que se rehace con grid. */
.woocommerce-account.logged-in .woocommerce{
max-width:980px;
display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; align-items:start;
}
/* Cada pieza a su columna por nombre, no por el orden en que vengan:
Astra pinta antes el contenido que el menú. */
.woocommerce-account .woocommerce-MyAccount-navigation{
grid-column:1; grid-row:1;
}
.woocommerce-account .woocommerce-MyAccount-content{
grid-column:2; grid-row:1;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
width:auto !important; float:none !important; margin:0 !important;
}
/* El menú: una pastilla por fila, sin la caja que Astra dibuja detrás */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
margin:0; padding:0; border:0 !important; background:none !important; box-shadow:none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li::before,
.woocommerce-account .woocommerce-MyAccount-navigation li::after{ content:none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
display:block; padding:12px 18px; border-radius:999px; border:0;
background:var(--bb-degradado-suave,#FFE3F0); color:var(--bb-rosa-hondo,#C42A6B);
font-weight:600; text-decoration:none; line-height:1.2;
transition:transform .15s ease, box-shadow .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible{
transform:translateY(-1px); box-shadow:0 6px 16px rgba(196,42,107,.18);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
background:var(--bb-degradado,linear-gradient(120deg,#FF5FA2,#7C3AED)); color:#fff;
}
/* Salir se separa del resto: no es una sección más */
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout{
margin-top:10px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a{
background:none; border:2px solid var(--bb-rosa-suave,#F7A8C4);
color:var(--bb-texto,#4B3A63); padding:10px 18px;
}
.woocommerce-account .woocommerce-MyAccount-content{
background:#fff; border-radius:var(--bb-radio,22px); padding:26px 28px;
box-shadow:var(--bb-sombra,0 10px 30px rgba(124,58,237,.13));
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{ margin-top:0; }
/* ---------- Los avisos de dentro del panel ---------- */
/* WooCommerce flota el botón a la derecha y el texto se parte en trocitos
a su alrededor. Aquí el aviso pasa a ser una tarjeta con el texto entero
y el botón debajo, y el icono deja de ser el cuadrado de una fuente que no carga. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error{
display:flex; flex-direction:column; align-items:flex-start;
padding:18px 20px 18px 52px; margin:0 0 18px;
border:0; border-radius:16px; background:#FFF5FA;
color:var(--bb-texto,#4B3A63); line-height:1.55; position:relative;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before{
/* el carácter va tal cual: WordPress borra las barras invertidas al guardar
el snippet, así que un escape CSS del tipo 2726 llegaría roto */
content:"✦"; font-family:inherit; font-size:1.05rem; line-height:1;
position:absolute; left:20px; top:20px;
color:var(--bb-rosa-chicle,#FF5FA2); background:none; border:0; padding:0; margin:0;
width:auto; height:auto; transform:none;
}
/* El botón deja de flotar y baja debajo del texto, aunque en el HTML vaya delante */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info > .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message > .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error > .button{
float:none !important; display:inline-flex; margin:14px 0 0; order:2;
}
.woocommerce-account .woocommerce-MyAccount-content .bb-aviso__texto{ order:1; display:block; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:last-child,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message:last-child{
margin-bottom:0;
}
/* Las tablas de pedidos y direcciones */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table{
width:100%; border-collapse:collapse;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table td{
padding:12px 10px; border-bottom:1px solid #F3D7E4; text-align:left;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table th{
font-family:"Fredoka",inherit; color:var(--bb-noche,#241344);
}
/* ---------- Móvil y tableta ---------- */
@media (max-width:900px){
.woocommerce-account.logged-in .woocommerce{ grid-template-columns:1fr; gap:18px; }
/* en una sola columna, el menú arriba y el contenido debajo */
.woocommerce-account .woocommerce-MyAccount-navigation{ grid-column:1; grid-row:1; }
.woocommerce-account .woocommerce-MyAccount-content{ grid-column:1; grid-row:2; }
.woocommerce-account .woocommerce-MyAccount-navigation ul{
flex-direction:row; flex-wrap:wrap; justify-content:center;
}
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout{ margin-top:0 !important; }
}
@media (max-width:600px){
.woocommerce-account .woocommerce-form-login{ padding:22px 20px; }
.woocommerce-account .woocommerce-MyAccount-content{ padding:20px 18px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ padding:11px 16px; font-size:.95rem; }
}
/* Direcciones: los rótulos salían con tamaño de titular de página y el enlace
de añadir se quedaba descolgado debajo. */
.woocommerce-account .woocommerce-Addresses{
display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;
}
.woocommerce-account .woocommerce-Address{ float:none !important; width:auto !important; }
.woocommerce-account .woocommerce-Address-title{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
border-bottom:1px solid #F3D7E4; padding-bottom:8px; margin-bottom:10px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
font-size:1.08rem !important; margin:0 !important; line-height:1.3;
color:var(--bb-noche,#241344);
}
.woocommerce-account .woocommerce-Address-title .edit{
font-size:.9rem; font-weight:600; color:var(--bb-rosa-hondo,#C42A6B); white-space:nowrap;
}
.woocommerce-account .woocommerce-Address address{ font-style:normal; margin:0; }
/* ---------- Resultados de búsqueda ---------- */
/* Ni firma ni fecha: en una tienda no aportan nada. */
.search-results .entry-meta,
.search-results .ast-blog-meta-container,
.search-results .posted-by,
.search-results .posted-on,
.search-results .ast-blog-single-element.ast-blog-meta-container{
display:none !important;
}
/* Las fotos de producto son cuadradas: se respetan sin estirarlas. */
.search-results .post-thumb img,
.search-results .ast-blog-featured-section img,
.search-results article img{
display:block; width:100%; height:auto;
aspect-ratio:1 / 1; object-fit:cover; object-position:center;
border-radius:18px;
}
/* Tarjeta de resultado con el aire de la tienda */
.search-results .ast-article-post,
.search-results .ast-article-single{
border-radius:22px; overflow:hidden;
box-shadow:var(--bb-sombra,0 10px 30px rgba(124,58,237,.13));
background:#fff; border:0;
}
.search-results .entry-title{ font-size:1.15rem; line-height:1.25; }
.search-results .entry-title a{ color:var(--bb-rosa-hondo,#C42A6B); }
/* Los iconos de las fichas quedaban pegados arriba y a la izquierda del círculo:
el relleno era simétrico pero la caja crecía de más por el espacio en línea.
Se convierte el círculo en una caja cuadrada que centra su contenido. */
.elementor-icon-box-icon .elementor-icon{
display:inline-flex; align-items:center; justify-content:center;
width:2.52em; height:2.52em; padding:0; line-height:1; text-align:center;
}
.elementor-icon-box-icon .elementor-icon > svg,
.elementor-icon-box-icon .elementor-icon > i{
display:block; width:1em; height:1em; line-height:1;
}
.elementor-icon-box-icon .elementor-icon > i::before{
display:block; line-height:1;
}
/* --- Los signos + y − de los acordeones -----------------------------------
Elementor mete el SVG dentro de un intermedio. Ese span es texto en
línea, así que arrastra el hueco del renglón y empuja el dibujo hacia abajo
y hacia un lado dentro del círculo. Anulando el renglón del span y sacando
el SVG de la línea, el círculo vuelve a centrarlo de verdad.
No se toca el «display» del span: es el que Elementor alterna para cambiar
de + a − al abrir. */
.elementor-accordion .elementor-tab-title .elementor-accordion-icon > span,
.elementor-toggle .elementor-tab-title .elementor-toggle-icon > span{
line-height:0;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon svg,
.elementor-toggle .elementor-tab-title .elementor-toggle-icon svg{
display:block; margin:0; vertical-align:middle;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon i,
.elementor-toggle .elementor-tab-title .elementor-toggle-icon i{
display:block; line-height:1;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon i::before,
.elementor-toggle .elementor-tab-title .elementor-toggle-icon i::before{
display:block; line-height:1;
}
/* El círculo abierto llevaba dentro un degradado morado que parecía un pegote
pegado encima. Se queda el mismo círculo claro de siempre, solo que con el
borde y el signo en rosa profundo para que se note cuál está abierto. */
.bb-con-acordeon .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{
background-image:none !important;
background-color:#fff !important;
box-shadow:inset 0 0 0 1.8px rgba(196,42,107,.55) !important;
}
.bb-con-acordeon .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg{
fill:#C42A6B !important;
}
.bb-con-acordeon .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon i{
color:#C42A6B !important;
}
/* ---------- Página de gracias tras comprar ---------- */
.woocommerce-order{ max-width:900px; margin:0 auto; }
/* Saludo */
.woocommerce-thankyou-order-received{
display:block; margin:0 0 26px; padding:24px 28px; border:0;
background:var(--bb-degradado-suave,#FFE3F0);
border-radius:var(--bb-radio,22px); box-shadow:var(--bb-sombra,0 10px 30px rgba(124,58,237,.13));
color:var(--bb-texto,#4B3A63);
}
.bb-gracias__titular{
display:block; font-family:"Fredoka",inherit; font-weight:700;
font-size:clamp(1.35rem,3vw,1.8rem); color:var(--bb-rosa-hondo,#C42A6B); margin-bottom:.25em;
}
.bb-gracias__texto{ display:block; font-size:1.02rem; line-height:1.55; }
/* Resumen del pedido en fichas.
WooCommerce marca estos elementos con float y bordes; hay que ganarle en peso. */
.woocommerce ul.woocommerce-order-overview.order_details{
display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;
margin:0 0 28px; padding:0; list-style:none; border:0;
}
.woocommerce ul.woocommerce-order-overview.order_details li{
float:none; width:auto; margin:0; padding:16px 20px; border:0; text-align:left;
background:#fff; border-radius:16px; box-shadow:var(--bb-sombra,0 10px 30px rgba(124,58,237,.13));
font-size:.72rem; letter-spacing:.07em; line-height:1.3; text-transform:uppercase; color:#8B7BA8;
}
.woocommerce ul.woocommerce-order-overview.order_details li strong{
display:block; margin-top:6px; font-family:"Fredoka",inherit; font-weight:600;
font-size:1.05rem; letter-spacing:0; line-height:1.25; text-transform:none; color:var(--bb-noche,#241344);
}
/* Datos para la transferencia */
.woocommerce-bacs-bank-details{
margin:0 0 28px; padding:22px 26px;
background:rgba(45,212,191,.10); border:2px dashed var(--bb-turquesa,#2DD4BF);
border-radius:var(--bb-radio,22px);
}
.woocommerce-bacs-bank-details h2.wc-bacs-bank-details-heading{
border:0; padding-top:0; margin:0 0 10px;
font-family:"Fredoka",inherit; font-size:1.3rem; color:var(--bb-noche,#241344);
}
.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name{
border:0; padding-top:0; margin:0 0 14px;
font-family:"Fredoka",inherit; font-size:1.02rem; color:var(--bb-rosa-hondo,#C42A6B);
}
.woocommerce .woocommerce-bacs-bank-details ul.wc-bacs-bank-details.order_details{
display:flex; flex-wrap:wrap; gap:12px 40px; margin:0; padding:0; list-style:none; border:0;
}
.woocommerce .woocommerce-bacs-bank-details ul.wc-bacs-bank-details.order_details li{
float:none; width:auto; margin:0; padding:0; border:0;
font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:#0F766E;
}
.woocommerce .woocommerce-bacs-bank-details ul.wc-bacs-bank-details.order_details li strong{
display:block; margin-top:3px; font-size:1.08rem; letter-spacing:.02em; text-transform:none;
font-weight:700; color:var(--bb-noche,#241344); user-select:all;
}
/* Títulos y tablas del detalle */
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title{
font-family:"Fredoka",inherit; color:var(--bb-noche,#241344);
}
.woocommerce-order table.woocommerce-table--order-details{
border-radius:18px; overflow:hidden; border:1px solid rgba(196,42,107,.14);
}
.woocommerce-order table.woocommerce-table--order-details th{
background:var(--bb-crema,#FFF5FA); color:var(--bb-noche,#241344); font-family:"Fredoka",inherit;
}
.woocommerce-order .woocommerce-customer-details address{
border-radius:18px; border:1px solid rgba(196,42,107,.14); background:#fff;
}
@media (max-width:600px){
.woocommerce-thankyou-order-received{ padding:18px 20px; }
.woocommerce-bacs-bank-details{ padding:18px 20px; }
.woocommerce ul.woocommerce-order-overview.order_details{ grid-template-columns:1fr 1fr; }
}
/* Aviso de envío gratis en el carrito y en la caja */
.bb-envio-aviso{
display:flex; align-items:center; gap:.7em;
margin:0 0 22px; padding:14px 20px;
background:var(--bb-degradado-suave,#FFE3F0);
border:2px dashed var(--bb-rosa-suave,#F7A8C4);
border-radius:var(--bb-radio,22px);
color:var(--bb-texto,#4B3A63); font-weight:600; line-height:1.4;
}
.bb-envio-aviso strong{ color:var(--bb-rosa-hondo,#C42A6B); }
.bb-envio-aviso .amount{ color:var(--bb-rosa-hondo,#C42A6B); }
.bb-envio-aviso__icono{ font-size:1.35em; line-height:1; flex:0 0 auto; }
.bb-envio-aviso--listo{
background:rgba(45,212,191,.14);
border-color:var(--bb-turquesa,#2DD4BF);
}
.bb-envio-aviso--listo strong,
.bb-envio-aviso--listo .amount{ color:#0F766E; }
@media (max-width:600px){
.bb-envio-aviso{ padding:12px 15px; font-size:.95em; }
}
/* ==========================================================================
LA TIENDA BRILLI BRILLI — Carrito y Finalizar compra (repaso responsive)
Snippet propio de la revisión del carrito. No toca ningún otro snippet.
Ámbito: body.woocommerce-cart y body.woocommerce-checkout
========================================================================== */
.woocommerce-cart,
.woocommerce-checkout{
--bb-linea:rgba(247,168,196,.55);
--bb-linea-fuerte:rgba(247,168,196,.85);
}
/* --------------------------------------------------------------------------
1. Las líneas del carrito salían en turquesa (--ast-border-color es #2DD4BF
en todo el sitio) y daban aire de hoja de cálculo de neón. Redefinimos la
variable sólo dentro de estas dos páginas: así cambian de golpe los
bordes de tablas, celdas y titulares sin tocar el resto de la web.
-------------------------------------------------------------------------- */
.woocommerce-cart #content,
.woocommerce-checkout #content{
--ast-border-color:rgba(247,168,196,.55);
}
.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-cart .woocommerce table.shop_table td,
.woocommerce-cart .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table td,
.woocommerce-checkout .woocommerce table.shop_table th{
border-color:var(--bb-linea) !important;
}
/* --------------------------------------------------------------------------
2. Caja de cantidad: los números salían CORTADOS por arriba y por abajo
(alto 40 px con 13,6 px de relleno heredado del estilo global de inputs;
en escritorio sólo se veía una rayita).
-------------------------------------------------------------------------- */
.woocommerce-cart .quantity input.qty,
.woocommerce-checkout .quantity input.qty{
width:86px !important;
min-width:86px !important;
max-width:100% !important;
height:48px !important;
min-height:48px !important;
padding:0 6px 0 10px !important;
font-family:'Fredoka',sans-serif !important;
font-size:1.05rem !important;
font-weight:600 !important;
line-height:1.2 !important;
text-align:center !important;
color:var(--bb-noche,#241344) !important;
background:#fff !important;
border:2px solid var(--bb-linea-fuerte) !important;
border-radius:14px !important;
}
.woocommerce-cart .quantity input.qty:focus{
border-color:var(--bb-rosa,#FF5FA2) !important;
box-shadow:0 0 0 4px rgba(255,95,162,.16) !important;
}
/* --------------------------------------------------------------------------
3. Botón de quitar (×): era de 20×20 px con opacidad 0,5 — imposible de
acertar con el dedo y casi invisible.
-------------------------------------------------------------------------- */
.woocommerce-cart td.product-remove a.remove,
.woocommerce-cart .woocommerce a.remove{
display:flex !important;
align-items:center;
justify-content:center;
width:42px !important;
height:42px !important;
padding:0 !important;
font-size:1.4rem !important;
font-weight:700 !important;
line-height:1 !important;
opacity:1 !important;
color:var(--bb-rosa-hondo,#C42A6B) !important;
background:#fff !important;
border:2px solid var(--bb-linea-fuerte) !important;
border-radius:50% !important;
text-decoration:none !important;
transition:background .18s ease, color .18s ease, transform .18s ease;
}
.woocommerce-cart td.product-remove a.remove:hover,
.woocommerce-cart td.product-remove a.remove:focus-visible{
background:var(--bb-rosa,#FF5FA2) !important;
border-color:transparent !important;
color:#fff !important;
transform:rotate(90deg);
}
/* Miniatura del producto */
.woocommerce-cart td.product-thumbnail img{
border-radius:16px;
background:var(--bb-crema,#FFF5FA);
width:100%;
height:auto;
}
/* Nombre del producto: era rosa fino y con interlineado de párrafo (los nombres
de dos líneas quedaban desparramados). */
.woocommerce-cart .woocommerce table.cart td.product-name{
line-height:1.3 !important;
}
.woocommerce-cart .woocommerce table.cart td.product-name a{
font-family:'Fredoka',sans-serif;
font-weight:600;
font-size:1.05rem;
line-height:1.3 !important;
color:var(--bb-noche,#241344) !important;
text-decoration:none;
}
.woocommerce-cart .woocommerce table.cart td.product-name a:hover{
color:var(--bb-rosa-hondo,#C42A6B) !important;
}
.woocommerce-cart td.product-subtotal{
font-family:'Fredoka',sans-serif;
font-weight:600;
color:var(--bb-rosa-hondo,#C42A6B) !important;
}
/* --------------------------------------------------------------------------
4. Fila de acciones (cupón + actualizar)
-------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce table.cart td.actions{
padding:18px !important;
background:var(--bb-crema,#FFF5FA);
border-top:2px solid var(--bb-linea) !important;
}
.woocommerce-cart .woocommerce table.cart td.actions .coupon{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.woocommerce-cart .woocommerce table.cart td.actions #coupon_code{
flex:1 1 180px;
min-width:0;
height:48px !important;
padding:0 16px !important;
border-radius:14px !important;
}
.woocommerce-cart .woocommerce table.cart td.actions .coupon .button{
flex:0 0 auto;
min-height:48px;
}
.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"]{
min-height:48px;
}
/* «Actualizar carrito» nace deshabilitado: que se lea como secundario, no como roto */
.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"]:disabled,
.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"][disabled]{
background-image:none !important;
background-color:#fff !important;
color:var(--bb-rosa-hondo,#C42A6B) !important;
border:2px solid var(--bb-linea-fuerte) !important;
box-shadow:none !important;
opacity:1 !important;
cursor:default;
}
/* En escritorio la celda sigue siendo celda de tabla: cupón a la izquierda y
actualizar a la derecha con flotados (antes se partían en dos filas). */
@media only screen and (min-width:922px){
.woocommerce-cart .woocommerce table.cart td.actions{ overflow:hidden; }
.woocommerce-cart .woocommerce table.cart td.actions .coupon{
float:left;
width:auto;
max-width:64%;
}
.woocommerce-cart .woocommerce table.cart td.actions #coupon_code{
flex:0 1 280px;
width:280px !important;
}
.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"]{
float:right;
}
}
/* --------------------------------------------------------------------------
5. Totales del carrito: tarjeta limpia, importes a la derecha
-------------------------------------------------------------------------- */
.woocommerce-cart .cart_totals{
background:#fff;
border:2px solid var(--bb-linea) !important;
border-radius:24px !important;
padding:6px 24px 24px !important;
box-shadow:var(--bb-sombra,0 10px 30px rgba(124,58,237,.13));
}
.woocommerce-cart .cart_totals h2{
background:transparent !important;
border:0 !important;
padding:20px 2px 10px !important;
margin:0 !important;
font-size:clamp(1.35rem,2.6vw,1.8rem) !important;
line-height:1.2 !important;
color:var(--bb-noche,#241344) !important;
}
.woocommerce-cart .cart_totals table.shop_table{
border:0 !important;
border-radius:0 !important;
background:transparent !important;
margin:0 !important;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td{
background:transparent !important;
border-left:0 !important;
border-right:0 !important;
padding:14px 2px !important;
vertical-align:top;
}
.woocommerce-cart .cart_totals table.shop_table th{
width:44%;
font-family:'Fredoka',sans-serif;
font-weight:500;
color:var(--bb-noche,#241344) !important;
}
.woocommerce-cart .cart_totals table.shop_table td{
text-align:right !important;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td{
font-size:1.15rem;
font-weight:700;
}
.woocommerce-cart .cart_totals .order-total td{
color:var(--bb-rosa-hondo,#C42A6B) !important;
}
.woocommerce-cart .cart_totals .includes_tax,
.woocommerce-checkout .includes_tax{
display:block;
font-size:.8rem;
font-weight:400;
color:var(--bb-texto,#4B3A63);
opacity:.85;
}
.woocommerce-cart .wc-proceed-to-checkout{ padding:14px 0 4px !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
min-height:56px;
display:flex !important;
align-items:center;
justify-content:center;
}
.woocommerce-cart .shipping-calculator-button{
font-weight:700;
color:var(--bb-rosa-hondo,#C42A6B) !important;
}
/* --------------------------------------------------------------------------
6. Reparto de «Antes de pagar» + totales
(el bloque de ayuda lo pone el snippet «Carrito extras»)
-------------------------------------------------------------------------- */
.woocommerce-cart .cart-collaterals{
width:100% !important;
display:flex;
gap:26px;
align-items:flex-start;
}
.woocommerce-cart .cart-collaterals .cart_totals{
width:auto !important;
float:none !important;
flex:0 1 480px;
margin:0 !important;
}
.woocommerce-cart .cart-collaterals .bb-carro-ayuda{ flex:1 1 0; min-width:0; }
.bb-carro-ayuda{
background:#fff;
border:2px solid var(--bb-linea);
border-radius:24px;
padding:6px 26px 24px;
}
.bb-carro-ayuda__titulo{
font-size:clamp(1.2rem,2.2vw,1.45rem) !important;
line-height:1.2 !important;
margin:0 !important;
padding:20px 0 10px !important;
background:transparent !important;
border:0 !important;
color:var(--bb-noche,#241344) !important;
}
.bb-carro-ayuda__lista{
list-style:none !important;
margin:0 0 18px !important;
padding:0 !important;
display:grid;
gap:14px;
}
.bb-carro-ayuda__lista li{
display:grid;
grid-template-columns:26px minmax(0,1fr);
gap:10px;
margin:0 !important;
font-size:1rem;
line-height:1.5;
}
.bb-carro-ayuda__ico{ font-size:1.15rem; line-height:1.4; }
.bb-carro-ayuda__txt{ min-width:0; }
.bb-carro-ayuda__txt strong{ color:var(--bb-noche,#241344); }
.bb-carro-ayuda__lista a{ color:var(--bb-rosa-hondo,#C42A6B); font-weight:700; }
.bb-carro-ayuda__seguir{
display:inline-flex;
align-items:center;
min-height:46px;
font-family:'Fredoka',sans-serif;
font-weight:500;
color:var(--bb-rosa-hondo,#C42A6B) !important;
text-decoration:none;
}
.bb-carro-ayuda__seguir::before{ content:"←"; margin-right:8px; }
.bb-carro-ayuda__seguir:hover{ text-decoration:underline; }
/* --------------------------------------------------------------------------
7. Carrito vacío
(el bloque con voz de marca lo pone el snippet «Carrito extras»;
aquí sólo lo vestimos y escondemos el enlace repetido de serie)
-------------------------------------------------------------------------- */
.bb-carro-vacio{
max-width:660px;
margin:0 auto;
padding:26px 16px 10px;
text-align:center;
}
.bb-carro-vacio__icono{
font-size:3.2rem;
line-height:1;
margin-bottom:12px;
}
.bb-carro-vacio__titulo{
font-family:'Fredoka',sans-serif;
font-size:clamp(1.5rem,5vw,2.2rem) !important;
line-height:1.15 !important;
margin:0 0 .5em !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
color:var(--bb-noche,#241344) !important;
}
.bb-carro-vacio__titulo span{
color:var(--bb-rosa-hondo,#C42A6B);
white-space:nowrap;
}
.bb-carro-vacio__texto{
max-width:32em;
margin:0 auto 1.5em !important;
font-size:1.05rem;
line-height:1.7;
}
.bb-carro-vacio__botones{ margin:0 0 1.4em !important; }
.bb-carro-vacio__cta{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-height:56px;
padding:0 34px !important;
font-size:1.1rem;
}
.bb-carro-vacio__familias{
list-style:none !important;
margin:0 !important;
padding:0 !important;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}
.bb-carro-vacio__familias li{ margin:0 !important; }
.bb-carro-vacio__familias a{
display:inline-flex;
align-items:center;
min-height:46px;
padding:0 18px;
border-radius:999px;
border:2px solid var(--bb-linea-fuerte);
background:#fff;
font-family:'Fredoka',sans-serif;
font-weight:500;
color:var(--bb-rosa-hondo,#C42A6B) !important;
text-decoration:none;
transition:background .18s ease, color .18s ease;
}
.bb-carro-vacio__familias a:hover,
.bb-carro-vacio__familias a:focus-visible{
background:var(--bb-rosa,#FF5FA2);
border-color:transparent;
color:#fff !important;
}
/* el «Volver a la tienda» de serie repetiría el botón del bloque */
.woocommerce-cart .bb-carro-vacio ~ .return-to-shop{ display:none !important; }
/* Por si el snippet PHP se desactivara: que el aviso de serie no quede
como una línea gris diminuta. */
.woocommerce-cart .cart-empty.woocommerce-info{
display:block;
margin:0 auto !important;
padding:34px 28px 10px !important;
max-width:620px;
background:transparent !important;
border:0 !important;
text-align:center;
font-family:'Fredoka',sans-serif;
font-size:clamp(1.35rem,4.4vw,1.85rem) !important;
font-weight:600;
line-height:1.25;
color:var(--bb-noche,#241344) !important;
}
.woocommerce-cart .cart-empty.woocommerce-info::before{
content:"🛒" !important;
font-family:inherit !important;
display:block;
font-size:2.6rem;
line-height:1;
margin:0 0 14px !important;
position:static !important;
color:inherit !important;
}
.woocommerce-cart .return-to-shop{
text-align:center;
margin:18px 0 8px !important;
}
.woocommerce-cart .return-to-shop a.button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:0 34px !important;
font-size:1.05rem;
}
/* --------------------------------------------------------------------------
8. Móvil y tableta: cada línea del carrito es una FICHA, no seis filas
sueltas de «etiqueta: valor».
-------------------------------------------------------------------------- */
@media only screen and (max-width:921px){
.woocommerce-cart .cart-collaterals{
flex-direction:column;
gap:20px;
}
.woocommerce-cart .cart-collaterals .cart_totals{
order:1;
flex:1 1 auto;
width:100% !important;
}
.woocommerce-cart .cart-collaterals .bb-carro-ayuda{ order:2; width:100%; }
.woocommerce-cart .woocommerce table.shop_table_responsive,
.woocommerce-cart .woocommerce-page table.shop_table_responsive{
border:0 !important;
background:transparent !important;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item{
display:grid !important;
grid-template-columns:84px minmax(0,1fr) 46px;
grid-template-areas:
"foto nombre quitar"
"foto precio quitar"
"cant subtot subtot";
column-gap:14px;
row-gap:8px;
align-items:center;
margin:0 0 14px;
padding:16px;
background:#fff;
border:2px solid var(--bb-linea) !important;
border-radius:22px;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td{
display:block !important;
width:auto !important;
min-height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
text-align:left !important;
background:transparent !important;
}
/* las etiquetas «Producto:», «Precio:»… sobran cuando hay maquetación */
.woocommerce-cart table.shop_table_responsive tr.cart_item td::before{
content:none !important;
display:none !important;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove{
grid-area:quitar;
align-self:start;
justify-self:end;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail{
grid-area:foto;
align-self:start;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail img{
width:84px !important;
height:84px !important;
object-fit:cover;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name{
grid-area:nombre;
align-self:end;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price{
grid-area:precio;
align-self:start;
font-size:.95rem;
line-height:1.4 !important;
color:var(--bb-texto,#4B3A63) !important;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-quantity{
grid-area:cant;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal{
grid-area:subtot;
text-align:right !important;
font-size:1.2rem;
}
/* la fila de acciones ya no es una celda de tabla */
.woocommerce-cart table.shop_table_responsive tr:not(.cart_item){
display:block !important;
}
.woocommerce-cart .woocommerce table.cart td.actions{
display:block !important;
border:2px solid var(--bb-linea) !important;
border-radius:22px;
text-align:left !important;
}
.woocommerce-cart .woocommerce table.cart td.actions::before{
content:none !important;
display:none !important;
}
}
@media only screen and (max-width:600px){
.woocommerce-cart .woocommerce table.cart td.actions .coupon{
float:none;
max-width:none;
}
.woocommerce-cart .woocommerce table.cart td.actions #coupon_code{
flex:1 1 100%;
width:100% !important;
}
.woocommerce-cart .woocommerce table.cart td.actions .coupon .button,
.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"]{
flex:1 1 100%;
width:100% !important;
float:none !important;
}
.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"]{
margin-top:10px !important;
}
.woocommerce-cart td.product-remove a.remove{
width:44px !important;
height:44px !important;
}
}
/* Entre 601 y 921 px hay sitio para poner la ficha en horizontal */
@media only screen and (min-width:601px) and (max-width:921px){
.woocommerce-cart .woocommerce table.cart td.actions{
display:flex !important;
flex-wrap:wrap;
gap:12px;
align-items:center;
justify-content:space-between;
}
.woocommerce-cart .woocommerce table.cart td.actions .coupon{
flex:1 1 340px;
min-width:0;
margin:0;
}
.woocommerce-cart .woocommerce table.cart td.actions #coupon_code{
flex:1 1 150px;
width:auto !important;
}
.woocommerce-cart .woocommerce table.cart td.actions .button[name="update_cart"]{
flex:0 0 auto;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item{
grid-template-columns:110px minmax(0,1fr) 110px 130px 46px;
grid-template-areas:
"foto nombre cant subtot quitar"
"foto precio cant subtot quitar";
align-items:center;
column-gap:18px;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail img{
width:110px !important;
height:110px !important;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove{
align-self:center;
}
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name{ align-self:end; }
.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price{ align-self:start; }
}
/* --------------------------------------------------------------------------
9. Finalizar compra
-------------------------------------------------------------------------- */
.woocommerce-checkout #order_review_heading{
font-size:clamp(1.35rem,2.6vw,1.8rem) !important;
border:0 !important;
}
/* WooCommerce mete 2em de relleno lateral en #order_review: el titular «Tu pedido»
quedaba 34 px a la izquierda de su propia tabla, y en el móvil el resumen se
estrujaba a 278 px (los nombres partían en tres líneas). */
.woocommerce-checkout #order_review{ padding:0 !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th{
width:36%;
}
/* El aviso de impuestos se parte en dos líneas; lo acortamos a «IVA incluido»
desde el snippet PHP y aquí lo dejamos en una sola línea. */
.woocommerce-cart .includes_tax,
.woocommerce-checkout .includes_tax{
white-space:nowrap;
font-size:.8rem;
}
/* Las líneas de separación salían partidas y a distinta altura dentro de la
misma fila (las celdas no miden lo mismo y la tabla separa los bordes).
Con border-collapse cada fila dibuja UNA sola línea continua. */
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-cart .woocommerce table.cart{
border-collapse:collapse !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{
border-top:1px solid var(--bb-linea) !important;
}
/* El aviso «¿Tienes un cupón?» sólo tenía borde superior y fondo crema: sobre
el crema de la página se veía una raya suelta en vez de un panel. */
.woocommerce-cart .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
background:#fff !important;
border:2px solid var(--bb-linea) !important;
border-radius:18px !important;
}
/* que la tabla del pedido y la caja de pago no queden pegadas */
.woocommerce-checkout #payment{ margin-top:18px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{
font-size:1rem;
padding:14px 12px !important;
background:transparent !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{
line-height:1.4;
text-align:left !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{
text-align:right !important;
white-space:normal;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{
font-size:1.1rem;
font-weight:700;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{
color:var(--bb-rosa-hondo,#C42A6B) !important;
}
.woocommerce-checkout #place_order{
min-height:56px;
font-size:1.1rem;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
font-size:.95rem;
line-height:1.6;
}
/* --- Remates de la caja --------------------------------------------------- */
/* La tabla del pedido llevaba el borde puesto en la tabla, y al juntarse las
celdas no se veía: la raya de arriba de «Producto / Subtotal» no existía. */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{
border-top:2px solid rgba(247,168,196,.55);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:first-child{
border-top-left-radius:14px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child{
border-top-right-radius:14px;
}
/* El bloque de pago iba pegado a los bordes de su caja: el texto de la
transferencia, el aviso de privacidad, la casilla y el botón necesitan aire. */
.woocommerce-checkout #payment{
padding:20px 22px 24px !important;
border-radius:18px;
}
.woocommerce-checkout #payment ul.payment_methods{
padding:0 !important; margin:0 0 4px !important;
}
.woocommerce-checkout #payment div.payment_box{
margin:12px 0 4px !important;
}
.woocommerce-checkout #payment .place-order{
padding:6px 0 0 !important;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text{
margin:14px 0 6px;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{
margin-bottom:14px;
}
@media (max-width:600px){
.woocommerce-checkout #payment{ padding:16px 16px 20px !important; }
}
/* Con tarifa unica de envio, «Enviar a Castellon» (la direccion de la tienda)
no aporta nada y confunde: el precio es el mismo para toda la peninsula. */
.woocommerce-cart .woocommerce-shipping-destination{ display:none !important; }
/* La raya de arriba de la tabla del pedido no se veia: con las celdas juntas
(border-collapse) manda el borde de la celda, no el de la tabla. */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{
border-top:2px solid rgba(247,168,196,.55) !important;
}
/* La raya bajo cada artículo del pedido solo llegaba hasta la mitad: el borde
estaba en la celda del nombre y no en la del importe. Se pasa a la fila. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item th{
border-bottom:1px solid rgba(247,168,196,.55) !important;
}
/* =============================================================================
Brilli Brilli — Portada · revisión responsive (móvil / tableta / escritorio)
Autor: revisión de calidad web. NO toca #63, #133 ni #163: sólo los corrige
desde fuera con más especificidad.
1. Hero: las flechas del carrusel caían encima del párrafo en móvil.
2. Hero: el texto del slide sólo usaba 236 px de 358 en móvil.
3. Ventajas: 4 columnas apretadas en tableta / 4 tarjetas altísimas en móvil.
4. Tarjetas de producto: título, precio y botón pegados al borde.
5. Categoría del producto: gris demasiado claro sobre blanco.
6. «Hecho a mano»: hueco vacío enorme en la columna del collage.
7. FAQ: columna del titular demasiado estrecha en tableta.
============================================================================= */
/* --- 1. Hero · flechas fuera del texto (móvil) ------------------------------
«Arreglos visuales» (#163) las vuelve a mostrar centradas verticalmente y
caen justo encima de «Tu color, tu muñeca, tu pulsera secreta…».
Las bajamos a la esquina inferior derecha y les damos 44 px de dedo. */
@media (max-width:767px){
.bb-hero .bb-hero-slides .elementor-swiper-button,
.bb-hero .elementor-widget-slides .elementor-swiper-button{
top:auto !important;
bottom:6px !important;
transform:none !important;
width:44px !important;
height:44px !important;
background:rgba(36,19,68,.34) !important;
border:2px solid rgba(255,255,255,.6) !important;
}
.bb-hero .bb-hero-slides .elementor-swiper-button:hover,
.bb-hero .elementor-widget-slides .elementor-swiper-button:hover{
transform:none !important;
background:rgba(36,19,68,.55) !important;
}
.bb-hero .bb-hero-slides .elementor-swiper-button-prev{ left:auto !important; right:58px !important; }
.bb-hero .bb-hero-slides .elementor-swiper-button-next{ left:auto !important; right:6px !important; }
/* los puntos se quedan abajo a la izquierda, sin pisar las flechas */
.bb-hero .bb-hero-slides .swiper-pagination,
.bb-hero .bb-hero-slides .swiper-pagination-bullets{
left:0 !important;
right:116px !important;
width:auto !important;
text-align:left !important;
bottom:22px !important;
}
/* los puntos sólo medían 10 px de alto: área de dedo de 42 px sin cambiar
su aspecto */
.bb-hero .bb-hero-slides .swiper-pagination-bullet{ position:relative; }
.bb-hero .bb-hero-slides .swiper-pagination-bullet::after{
content:"";
position:absolute;
inset:-16px -7px;
}
/* 2. el texto del slide, a todo el ancho: menos líneas huérfanas */
.bb-hero .bb-hero-slides .swiper-slide-contents{
width:100% !important;
max-width:100% !important;
}
.bb-hero .bb-hero-slides .elementor-slide-description{ margin-bottom:1.15rem; }
}
/* --- 3. Barra de ventajas ---------------------------------------------------
Tableta: 4 columnas de ~195 px partían los títulos («Envío a / península
por 7 / €»). Pasamos a 2 × 2. */
@media (min-width:768px) and (max-width:1024px){
.bb-seccion-ventajas > .elementor-container{ flex-wrap:wrap !important; }
.bb-seccion-ventajas > .elementor-container > .elementor-column{
width:50% !important;
margin-bottom:18px;
}
}
/* Móvil: tarjeta horizontal (icono a la izquierda). Ahorra ~380 px de scroll
y deja de haber cuatro bloques idénticos de 215 px de alto. */
@media (max-width:767px){
.bb-seccion-ventajas .bb-ventaja-card{ padding:16px 18px !important; }
.bb-seccion-ventajas .bb-ventaja-card .elementor-icon-box-wrapper{
display:flex !important;
flex-direction:row !important;
align-items:center;
gap:15px;
text-align:left;
}
.bb-seccion-ventajas .bb-ventaja-card .elementor-icon-box-icon{
margin:0 !important;
flex:0 0 auto;
}
.bb-seccion-ventajas .bb-ventaja-card .elementor-icon{
width:52px !important; height:52px !important;
line-height:52px !important; font-size:21px !important;
}
.bb-seccion-ventajas .bb-ventaja-card .elementor-icon-box-content{
text-align:left !important;
flex:1 1 auto;
}
.bb-seccion-ventajas .bb-ventaja-card .elementor-icon-box-title{
margin:0 0 .18em !important;
font-size:1.02rem !important;
line-height:1.2 !important;
}
.bb-seccion-ventajas .bb-ventaja-card .elementor-icon-box-description{
font-size:.9rem !important;
line-height:1.4 !important;
}
.bb-seccion-ventajas > .elementor-container > .elementor-column
> .elementor-widget-wrap{ padding-top:6px !important; padding-bottom:6px !important; }
}
/* --- 4. Tarjetas de producto · aire interior --------------------------------
El título, la categoría, el precio y el botón iban de borde a borde:
«Escuadrón Sushi Kawaii» ocupaba 162 de los 163 px útiles. */
.bb-seccion-productos .bb-grid-productos ul.products li.product .ast-woo-product-category,
.bb-seccion-productos .bb-grid-productos ul.products li.product .woocommerce-loop-product__title,
.bb-seccion-productos .bb-grid-productos ul.products li.product .price{
padding-left:14px !important;
padding-right:14px !important;
}
.bb-seccion-productos .bb-grid-productos ul.products li.product .button,
.bb-seccion-productos .bb-grid-productos ul.products li.product a.button{
width:calc(100% - 28px) !important;
margin-left:14px !important;
margin-right:14px !important;
}
/* 5. La categoría era #4B3A63 al 60 % de opacidad sobre blanco (~3,2:1) */
.bb-seccion-productos .bb-grid-productos ul.products li.product .ast-woo-product-category{
opacity:1 !important;
color:#6B5B85 !important;
}
@media (max-width:767px){
.bb-seccion-productos .bb-grid-productos ul.products li.product .ast-woo-product-category,
.bb-seccion-productos .bb-grid-productos ul.products li.product .woocommerce-loop-product__title,
.bb-seccion-productos .bb-grid-productos ul.products li.product .price{
padding-left:11px !important;
padding-right:11px !important;
}
.bb-seccion-productos .bb-grid-productos ul.products li.product .woocommerce-loop-product__title{
font-size:.93rem !important;
line-height:1.3 !important;
}
.bb-seccion-productos .bb-grid-productos ul.products li.product .price{
font-size:1.04rem !important;
}
/* el botón perdía ancho con el nuevo margen y «Añadir al carrito» se partía
en dos líneas: menos padding, menos cuerpo y una sola línea siempre */
.bb-seccion-productos .bb-grid-productos ul.products li.product .button,
.bb-seccion-productos .bb-grid-productos ul.products li.product a.button{
width:calc(100% - 18px) !important;
margin-left:9px !important;
margin-right:9px !important;
padding-left:8px !important;
padding-right:8px !important;
font-size:.81rem !important;
white-space:nowrap;
}
}
/* --- 6. Franja «hecho a mano» ----------------------------------------------
Tableta: la columna del collage medía ~1.200 px de alto con un collage de
315 px dentro. Apilamos y el hueco desaparece. */
@media (min-width:768px) and (max-width:1024px){
.bb-seccion-mano > .elementor-container{ flex-wrap:wrap !important; }
.bb-seccion-mano > .elementor-container > .elementor-column{ width:100% !important; }
.bb-seccion-mano .bb-collage{ max-width:400px !important; margin:0 auto 30px !important; }
/* con la columna a todo el ancho, la línea de texto se iba a 100 caracteres */
.bb-seccion-mano > .elementor-container > .elementor-column:last-child
> .elementor-widget-wrap{ max-width:700px; margin-inline:auto; }
}
/* Escritorio: el collage se hace tan ancho como su columna y la sección
respira menos por arriba y por abajo. Un halo suave evita que el morado
vacío parezca un fallo. */
@media (min-width:1025px){
.bb-seccion-mano{ padding-top:68px !important; padding-bottom:68px !important; }
.bb-seccion-mano .bb-col-collage{ position:relative; }
.bb-seccion-mano .bb-col-collage > .elementor-widget-wrap::before{
content:"";
position:absolute;
left:50%; top:50%;
width:780px; height:780px;
transform:translate(-50%,-50%);
background:radial-gradient(circle,
rgba(196,75,224,.30) 0%,
rgba(124,58,237,.16) 42%,
rgba(36,19,68,0) 70%);
pointer-events:none;
z-index:0;
}
.bb-seccion-mano .bb-collage{
max-width:min(100%, 540px) !important;
position:relative;
z-index:1;
}
}
/* --- 7. FAQ en tableta -----------------------------------------------------
A 820 px el titular «Lo que nos preguntáis siempre» caía en tres líneas en
una columna de 330 px. Apilado se lee mucho mejor. */
@media (min-width:768px) and (max-width:1024px){
.bb-seccion-faq > .elementor-container{ flex-wrap:wrap !important; }
.bb-seccion-faq > .elementor-container > .elementor-column{ width:100% !important; }
.bb-seccion-faq > .elementor-container > .elementor-column:first-child
> .elementor-widget-wrap{ padding-bottom:10px !important; }
}
/* ==========================================================================
LA TIENDA BRILLI BRILLI — Repaso de la categoría «Escuadrón Foamy»
Arreglos de la plantilla de archivo de tienda (/tienda/ y las tres
categorías). Todo va acotado a body.ast-woo-shop-archive para no tocar
el resto del sitio.
Snippets que NO se tocan aquí: #63 Estilos de marca, #133 Detalles finos,
#163 Arreglos visuales, #188 Archivo tienda.
========================================================================== */
/* ==========================================================================
1. Que Nunito y Fredoka se apliquen de verdad
--------------------------------------------------------------------------
El kit global de Elementor (post 18) guarda las tipografías entrecomilladas:
.elementor-kit-18{ font-family:"'Nunito', sans-serif", Sans-serif; }
El navegador busca entonces un tipo que se llame literalmente
«'Nunito', sans-serif», no existe, y cae al sans-serif del sistema.
Comprobado midiendo: el texto ocupaba exactamente lo mismo que en Arial
(253,23 px) y no lo que ocupa en Nunito (258,34 px).
Resultado: ni la descripción de la categoría, ni las migas, ni la etiqueta
de cada tarjeta, ni los botones salían con la tipografía de la marca.
La cura de raíz está en el kit de Elementor; esto lo tapa en esta plantilla.
========================================================================== */
/* El mismo error está en las cuatro variables globales de tipografía del kit,
que es de donde beben los widgets de Elementor uno a uno:
--e-global-typography-text-font-family:"'Nunito', sans-serif";
Como las variables se heredan, basta con redefinirlas una vez en el body
para que se arreglen todos los widgets de golpe, sin pelear por
especificidad con cada regla .elementor-element-xxxx. */
body.ast-woo-shop-archive{
--e-global-typography-primary-font-family: 'Fredoka', sans-serif;
--e-global-typography-secondary-font-family: 'Fredoka', sans-serif;
--e-global-typography-accent-font-family: 'Fredoka', sans-serif;
--e-global-typography-text-font-family: 'Nunito', sans-serif;
/* Y el texto corrido hereda Nunito desde aquí: no pisa a nadie, porque
cualquier regla que declare su propia fuente gana siempre a la herencia. */
font-family: 'Nunito', sans-serif;
}
/* Los botones sí llevan declaración propia en el kit (querían Fredoka).
Se la devolvemos con la misma lista de selectores, un pelín más específica.
De paso encogen ~3 px, que buena falta hacía: el «Añadir al carrito» de
escritorio sólo tenía 2,9 px de holgura dentro de su píldora. */
body.ast-woo-shop-archive button,
body.ast-woo-shop-archive input[type="button"],
body.ast-woo-shop-archive input[type="submit"],
body.ast-woo-shop-archive .elementor-button{
font-family: 'Fredoka', sans-serif;
}
/* ==========================================================================
2. La descripción de la categoría
--------------------------------------------------------------------------
Medía 720 px de ancho => ~88 caracteres por línea en tableta y escritorio.
Para un público de 11-15 años, y encima centrada, eso es un ladrillo.
La dejamos en una medida de lectura cómoda (~70 caracteres).
========================================================================== */
@media (min-width: 768px){
body.ast-woo-shop-archive .bb-arch-desc .term-description > p{
max-width: 38rem;
}
}
/* Y que no quede una palabra suelta colgando en la última línea
(en móvil la última línea medía 60 px: un huérfano de libro). */
body.ast-woo-shop-archive .bb-arch-desc .term-description > p,
body.ast-woo-shop-archive .bb-arch-titulo h1{
text-wrap: pretty;
}
/* ==========================================================================
3. Contraste de la etiqueta de familia de cada tarjeta
--------------------------------------------------------------------------
Estaba en rgba(75,58,99,.62) sobre blanco = 3,49:1 a 14,45 px.
La AA pide 4,5:1. Con #6B5B85 (gris morado ya usado en la marca) sube a
5,9:1 y sigue leyéndose como texto secundario.
Ojo con la especificidad: quien pone el color es
«.elementor-element-a1e0030 ul.products li.product .ast-woo-product-category»
(0,4,2), así que hay que repetir esa cadena y añadir la clase del body.
========================================================================== */
body.ast-woo-shop-archive .elementor-element-a1e0030 ul.products li.product .ast-woo-product-category{
color: #6B5B85;
}
/* El mismo problema, y encima más pequeño, en la segunda línea de los atajos
a las familias: rgba(75,58,99,.68) sobre blanco = 4,07:1 a 13,4 px.
Mismo gris morado y lo subimos a 14 px, que es el mínimo que se lee cómodo
a los 11 años. */
body.ast-woo-shop-archive .bb-arch-cat__sub{
color: #6B5B85;
font-size: .85rem;
}
/* ==========================================================================
4. Los atajos a las familias, en una sola línea
--------------------------------------------------------------------------
Con 4 columnas iguales, «Mini Mundos de Arcilla» no cabía y partía
«Arcilla» a una segunda línea (huérfana) en TODO el escritorio: medido a
1280, 1366 y 1440. Entre 1025 y 1240 se partían dos de los cuatro.
Solución en dos tramos:
· De 1025 a 1279 px los cuatro atajos no caben en una fila ni apretándolos
(harían falta ~1.240 px de caja y hay ~1.140). Se quedan en dos columnas,
que es justo lo que ya hacen por debajo de 1025 y se ve estupendo.
· De 1280 px en adelante van los cuatro en fila, pero repartiendo el ancho
según lo que cada uno necesita en vez de a partes iguales. Con flex-shrink
a 0 ninguno puede encogerse por debajo de su texto, así que o caben
enteros o no se activa este tramo.
========================================================================== */
@media (min-width: 1025px) and (max-width: 1279px){
body.ast-woo-shop-archive .bb-arch-cats{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1280px){
body.ast-woo-shop-archive .bb-arch-cats{
display: flex;
/* wrap, no nowrap: si algún día el texto crece, prefiero que un atajo
baje de línea a que aparezca scroll lateral en toda la página. */
flex-wrap: wrap;
align-items: stretch;
}
body.ast-woo-shop-archive .bb-arch-cat{
flex: 1 0 auto;
padding: .95rem;
gap: .65rem;
}
body.ast-woo-shop-archive .bb-arch-cat__icono{
width: 46px;
height: 46px;
font-size: 1.5rem;
}
body.ast-woo-shop-archive .bb-arch-cat__titulo{
white-space: nowrap;
}
body.ast-woo-shop-archive .bb-arch-cat__flecha{
margin-left: .55rem;
}
}
/* ==========================================================================
5. El selector de orden en móvil
--------------------------------------------------------------------------
Quedaba flotando a la derecha (de 75 a 372 px) mientras la píldora de
resultados arrancaba en 18: dos elementos apilados sin alinearse con nada.
A todo el ancho queda cuadrado con la rejilla y es más fácil de acertar
con el dedo.
========================================================================== */
@media (max-width: 600px){
body.ast-woo-shop-archive .woocommerce-ordering{
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
body.ast-woo-shop-archive .woocommerce-ordering select.orderby{
width: 100%;
}
}
/* ==========================================================================
LA TIENDA BRILLI BRILLI — Repaso de la rejilla de producto
Página revisada: /tienda/ (la plantilla es la misma en las tres categorías).
Sólo toca la cuadrícula de tarjetas. Los atajos de categoría, el contraste
de la etiqueta de familia y el desplegable de orden en móvil los arregla
«Brilli Brilli — Foamy categoria» (#391); aquí no se repiten para no
pelearse con él.
No se tocan: #63 Estilos de marca, #133 Detalles finos,
#163 Arreglos visuales, #188 Archivo tienda, #274 Tienda cabecera.
Acotado a body.ast-woo-shop-archive (tienda + archivos de categoría).
========================================================================== */
/* ==========================================================================
1. Que las tarjetas de una misma fila casen entre sí
--------------------------------------------------------------------------
El
es flex en columna con justify-content:space-between y dos hijos:
la foto y el bloque de texto. Cuando en una fila un título ocupaba dos
líneas y el de al lado una, la rejilla estiraba las dos tarjetas a la misma
altura y el hueco sobrante se colaba ENTRE la foto y el texto de la corta.
Medido a 390 px antes del arreglo:
Escuadrón Sushi Kawaii → categoría a 171 px del borde de la tarjeta
Estrella Dormilona → categoría a 192 px
21 px de desfase en cada fila con títulos de distinto largo. Ahora el texto
se pega a la foto y el botón se baja solo al fondo con margin-top:auto.
========================================================================== */
body.ast-woo-shop-archive .woocommerce ul.products li.product{
justify-content: flex-start;
}
body.ast-woo-shop-archive .woocommerce ul.products li.product .astra-shop-summary-wrap{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* El botón, siempre pegado abajo; el margen automático nunca baja del
margen inferior del precio, así que no llega a tocarlo.
De paso, la caja del botón se pasa a flex: el botón es un inline-block y
su línea arrastraba ~10 px de hueco muerto por debajo (79 px de caja para
un botón de 48). Con eso y su margen inferior se recuperan 17 px por
tarjeta, justo lo que cuesta la línea reservada de la etiqueta. */
body.ast-woo-shop-archive .woocommerce ul.products li.product .woocommerce-loop-product__buttons{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-top: auto;
margin-bottom: 0;
padding-bottom: 0;
}
body.ast-woo-shop-archive .woocommerce ul.products li.product .woocommerce-loop-product__buttons > .button{
margin-bottom: 0;
}
/* ==========================================================================
2. Móvil: hueco reservado para la segunda línea del título
--------------------------------------------------------------------------
A 390 px se parten 3 de los 12 títulos de la página; a 360 px, 7 de 12.
Reservando las dos líneas, la categoría, el precio y el botón quedan a la
misma altura en toda la fila y la tarjeta no cambia de alto según el
nombre del producto (antes: 365 px unas, 386 px otras).
========================================================================== */
@media (max-width: 600px){
body.ast-woo-shop-archive .woocommerce ul.products li.product .woocommerce-loop-product__title{
box-sizing: border-box;
min-height: calc(2.6em + .75rem); /* dos líneas + su padding propio */
}
/* El texto del botón se quedaba en 13,9 px. Sube a ~14,6 px recortando el
padding lateral, que de ancho iba sobrado (148 px de tarjeta). */
body.ast-woo-shop-archive .elementor-element-a1e0030 ul.products li.product .button{
font-size: .86rem !important;
padding: .82em .55em !important;
}
}
/* Que el título parta por donde menos fea queda la segunda línea */
body.ast-woo-shop-archive .woocommerce ul.products li.product .woocommerce-loop-product__title{
text-wrap: balance;
}
/* La etiqueta más larga, «Mini Mundos de Arcilla», necesita ~150 px y la caja
mide (ancho/2 − 45): 133 px a 360, 148 a 390, 168 a 430. O sea que se parte
en dos líneas en media gama de móviles y en la otra media no, y basta que
cambie la tipografía para que cambie el reparto (de hecho pasó: al arreglar
Nunito el texto creció ~2 % y empezó a partirse también a 390).
Así que en móvil se le reserva siempre la segunda línea: la fila queda a
escuadra en cualquier ancho y da igual lo que mida el texto. A partir de
480 px la caja pasa de 195 px y ya no se puede partir. */
@media (max-width: 480px){
body.ast-woo-shop-archive .woocommerce ul.products li.product .ast-woo-product-category{
box-sizing: border-box;
min-height: 2.6em;
}
}
/* ==========================================================================
3. Contraste del precio anterior
--------------------------------------------------------------------------
#9C8FB0 sobre blanco = 3,1:1 a 15 px. Es un precio, no un adorno: tiene que
leerse. #7A6B92 sube a 4,8:1 y se sigue viendo secundario frente al rosa.
(La etiqueta de familia la corrige el #391.)
========================================================================== */
body.ast-woo-shop-archive .woocommerce ul.products li.product .price del{
color: #7A6B92 !important; /* el original de #63 lleva !important */
}
/* ==========================================================================
LA TIENDA BRILLI BRILLI — Repaso responsive de la página 404
Complementa a «Brilli Brilli — Pagina 404» (#158); no lo sustituye.
Todo va colgado de body.error404 para no tocar ninguna otra plantilla.
========================================================================== */
/* --------------------------------------------------------------------------
1. EL LIENZO
En móvil (≤544 px) Astra le mete 9,18 px de relleno a .ast-container, así
que el fondo noche del hero, la onda y la franja crema se quedaban a 9 px
de los bordes: se veían dos tiras de crema de arriba abajo y la costura de
la onda quedaba partida. En portada y en el archivo de tienda ese relleno
ya está anulado; aquí faltaba. Las secciones traen su propio margen
interior de 16 px, o sea que el texto no se pega al borde.
-------------------------------------------------------------------------- */
body.error404 #content > .ast-container{
max-width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.error404 #content #primary{ margin: 0; padding: 0; }
/* --------------------------------------------------------------------------
2. HERO: los dos botones se tocaban
Las dos columnas de la botonera no dejan hueco (medido: 0,0 px), así que
«Ir a la tienda» y «Volver a la portada» quedaban pegados como una sola
pastilla rara. Se lo damos desde el propio botón para no depender del
ajuste de columnas de Elementor.
-------------------------------------------------------------------------- */
body.error404 .bb-404-botonera .bb-404-boton .elementor-button{
margin-left: 9px;
margin-right: 9px;
}
/* Apilados en móvil quedaban con anchos distintos (168 px y 220 px) y la
escalerilla se notaba mucho. Los igualamos. */
@media (max-width: 767px){
body.error404 .bb-404-botonera .bb-404-boton .elementor-button{
min-width: 220px;
justify-content: center;
}
}
/* Viudas: en móvil el párrafo terminaba con «clics.» sola en la quinta
línea. text-wrap:pretty reparte las últimas líneas. */
body.error404 .bb-404-texto p{ text-wrap: pretty; }
/* La chapa se quedaba en 13,3 px en pantallas estrechas. */
@media (max-width: 479px){
body.error404 .bb-404-chapa{ font-size: .84rem; }
}
/* --------------------------------------------------------------------------
3. BUSCADOR DEL HERO
El botón «Buscar» medía 43 px de alto: se queda a un pelo del objetivo
táctil de 44 px.
-------------------------------------------------------------------------- */
body.error404 .bb-404-buscador button[type="submit"]{
min-height: 46px;
}
/* --------------------------------------------------------------------------
4. TARJETAS DE PRODUCTO
Elementor pisa el relleno de la tarjeta de marca:
.elementor-products-grid ul.products.elementor-grid li.product{padding:0}
se carga el `padding:14px 14px 22px` de «Estilos de marca». Resultado: foto,
categoría, título, precio y botón pegados al borde redondeado de la tarjeta
y la sombra del botón derramándose por fuera. Aquí se devuelve el relleno
de marca y se centra el contenido, igual que en el archivo de tienda.
-------------------------------------------------------------------------- */
body.error404 .bb-404-rejilla ul.products.elementor-grid li.product{
padding: 14px 14px 20px;
text-align: center;
display: flex;
flex-direction: column;
min-width: 0;
}
/* Con el título a dos líneas (p. ej. «Pulsera Estrella Fugaz») el precio y el
botón bajaban y la fila quedaba desalineada. El resumen se estira y el
botón se pega al fondo, así todos los botones de la fila van a la misma
altura. */
body.error404 .bb-404-rejilla ul.products li.product .astra-shop-summary-wrap{
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
}
body.error404 .bb-404-rejilla ul.products li.product .astra-shop-summary-wrap > .price{
margin-bottom: 12px;
}
body.error404 .bb-404-rejilla ul.products li.product .button{
margin: auto auto 0 !important; /* auto arriba = pegado al fondo de la tarjeta */
width: auto;
max-width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px; /* objetivo táctil */
text-align: center;
}
/* Mientras la tarjeta es estrecha la pastilla ocupa todo el ancho útil, que
es la única forma de que «Añadir al carrito» quepa en una línea. Sólo por
encima de 1200 px (tarjeta de 275 px o más) se queda ceñida al texto, como
en el archivo de tienda. El corte tiene que ir aquí y no en 1024: entre
1025 y 1160 la tarjeta mide 231 px y el botón a 17 px con 36 px de relleno
partía en dos líneas. */
@media (max-width: 1199px){
body.error404 .bb-404-rejilla ul.products li.product .button{
width: 100%;
margin: auto 0 0 !important;
}
}
/* La etiqueta ¡Oferta! se queda dentro de la foto, no sobre el relleno. */
body.error404 .bb-404-rejilla ul.products li.product span.onsale{
top: 22px !important;
left: 22px !important;
right: auto !important;
}
/* El título del producto es un enlace y el color de enlace del kit de
Elementor se lo llevaba al rosa chicle: #FF5FA2 sobre blanco da 2,9:1 de
contraste, ilegible para texto de 16 px. Se pone el morado noche de la
marca y el rosa hondo al pasar por encima, igual que en el archivo de
tienda. */
body.error404 .bb-404-rejilla ul.products li.product .woocommerce-loop-product__title,
body.error404 .bb-404-rejilla ul.products li.product a.ast-loop-product__link,
body.error404 .bb-404-rejilla ul.products li.product a.woocommerce-loop-product__link{
color: #241344;
}
body.error404 .bb-404-rejilla ul.products li.product a:hover .woocommerce-loop-product__title{
color: #C42A6B;
}
/* La categoría en gris claro sobre blanco se leía justita. */
body.error404 .bb-404-rejilla ul.products li.product .ast-woo-product-category{
color: rgba(75, 58, 99, .78);
}
/* Tableta y portátil pequeño (rejilla de 4): con 180 px de tarjeta,
«Añadir al carrito» a 16-17 px partía en dos líneas dentro de la pastilla. */
@media (min-width: 601px) and (max-width: 1199px){
body.error404 .bb-404-rejilla ul.products li.product .button{
font-size: 15px !important;
padding: .82em .5em !important;
letter-spacing: -.01em;
}
}
/* Móvil (rejilla de 2): se estrecha el hueco entre columnas para ganar ancho
de tarjeta, se acorta el hueco entre filas (eran 40 px) y el botón cabe en
una línea con el texto a 14 px en vez de a 13,9. */
@media (max-width: 600px){
body.error404 .bb-404-rejilla ul.products.elementor-grid{
column-gap: 12px !important;
row-gap: 26px !important;
}
body.error404 .bb-404-rejilla ul.products.elementor-grid li.product{
padding: 9px 9px 14px;
}
/* Con la tarjeta a 173 px, «Cupcake Cósmico» partía en dos líneas.
Y el min-height de dos renglones que lleva el título en móvil dejaba un
agujero de 20 px bajo los títulos de una línea; ya no hace falta, porque
ahora es el flex de la tarjeta el que alinea los botones de la fila. */
body.error404 .bb-404-rejilla ul.products li.product .woocommerce-loop-product__title{
font-size: .92rem !important;
min-height: 0;
}
body.error404 .bb-404-rejilla ul.products li.product .button{
font-size: 14px !important;
padding: .8em .35em !important;
letter-spacing: -.012em;
}
body.error404 .bb-404-rejilla ul.products li.product span.onsale{
top: 18px !important;
left: 18px !important;
}
}
/* --------------------------------------------------------------------------
5. ENLACES DE AYUDA
Las tres pastillas medían 40 px de alto: por debajo del objetivo táctil.
-------------------------------------------------------------------------- */
body.error404 .bb-404-ayuda a{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: .55em 1.2em;
}
/* --------------------------------------------------------------------------
6. AIRE DE LA SECCIÓN CREMA EN MÓVIL
El titular «Pero no te vayas de vacío» nacía a 18 px del valle de la onda.
-------------------------------------------------------------------------- */
@media (max-width: 767px){
body.error404 .bb-404-productos{ padding-top: 30px !important; }
}
/* =========================================================
Brilli Brilli — Condiciones de venta (pagina 43)
Revision de lectura larga: medida de linea comoda,
jerarquia de titulos, indice navegable y tactil,
y arreglo de los pasos numerados.
Todo va acotado a .elementor-43 para no pisar el resto
de paginas legales.
========================================================= */
/* ---------------------------------------------------------
1. PASOS NUMERADOS (seccion 6 "Proceso de compra")
portada.css define .bb-pasos li como grid "n t / n d"
para el marcado de la portada (.bb-paso__n / __t / __d).
Aqui el marcado es
Titulo. texto
,
asi que el caia en la columna "auto" y el resto
del texto en una columna estrechisima y desalineada.
Devolvemos el flujo normal y lo vestimos de tarjeta.
--------------------------------------------------------- */
.elementor-43 .bb-legal-texto ol.bb-pasos{
display:block;
gap:0;
margin:.4rem 0 1.7rem;
padding:0;
}
.elementor-43 .bb-legal-texto ol.bb-pasos li{
display:block;
background:linear-gradient(135deg,#FFF5FA 0%,#F8F2FF 100%);
border:1px solid rgba(247,168,196,.5);
border-radius:16px;
padding:.9rem 1.15rem .9rem 3.4rem;
margin:0 0 .6rem;
transform:none;
}
.elementor-43 .bb-legal-texto ol.bb-pasos li:last-child{ margin-bottom:0; }
.elementor-43 .bb-legal-texto ol.bb-pasos li:hover{
background:linear-gradient(135deg,#FFEFF7 0%,#F3EBFF 100%);
transform:none;
}
.elementor-43 .bb-legal-texto ol.bb-pasos li::before{
left:1.05rem;
top:.92rem;
}
.elementor-43 .bb-legal-texto ol.bb-pasos li > strong:first-child{
color:var(--bb-rosa-hondo);
}
/* ---------------------------------------------------------
2. INDICE "En esta pagina"
Antes: enlaces de 18 px de alto en filas de 28 px, muy por
debajo del minimo tactil. Ahora cada entrada es una fila
completa pulsable de 44 px con su numero dentro.
--------------------------------------------------------- */
.elementor-43 .bb-legal-texto .bb-indice ol{
columns:1;
padding-left:0;
margin:0;
list-style:none;
counter-reset:bbidx;
font-size:1rem;
}
.elementor-43 .bb-legal-texto .bb-indice li{
counter-increment:bbidx;
margin:0;
padding:0;
break-inside:avoid;
border-bottom:1px solid rgba(124,58,237,.10);
}
@media (max-width:699px){
.elementor-43 .bb-legal-texto .bb-indice li:last-child{ border-bottom:0; }
}
.elementor-43 .bb-legal-texto .bb-indice a{
display:flex;
align-items:center;
gap:.55rem;
min-height:44px;
padding:.5rem .55rem;
line-height:1.32;
border-radius:11px;
border-bottom:0;
transition:background .2s ease, color .2s ease;
}
.elementor-43 .bb-legal-texto .bb-indice a::before{
content:counter(bbidx) ".";
flex:0 0 1.7rem;
text-align:right;
font-family:'Fredoka',sans-serif;
font-weight:600;
font-size:.9em;
color:var(--bb-rosa-hondo);
}
.elementor-43 .bb-legal-texto .bb-indice a:hover,
.elementor-43 .bb-legal-texto .bb-indice a:focus-visible{
background:rgba(255,255,255,.8);
color:var(--bb-rosa-hondo) !important;
border-bottom:0;
}
/* A partir de tableta caben dos columnas de sobra (antes 880 px) */
@media (min-width:700px){
.elementor-43 .bb-legal-texto .bb-indice ol{
columns:2;
column-gap:1.9rem;
}
}
/* ---------------------------------------------------------
3. MEDIDA DE LECTURA
En escritorio el texto media 802 px (~95 caracteres por
linea) y en tableta 710 px (~92): demasiado para texto
legal denso. Estrechamos la tarjeta y subimos el cuerpo
hasta dejarlo en unos 80 caracteres por linea.
--------------------------------------------------------- */
@media (min-width:700px) and (max-width:1024px){
.elementor-43 .bb-legal-cuerpo > .elementor-container > .bb-legal-tarjeta,
.elementor-43 .bb-legal-pie > .elementor-container > .bb-legal-caja{
max-width:720px;
margin-inline:auto;
}
.elementor-43 .bb-legal-texto{
font-size:1.05rem;
line-height:1.78;
}
}
@media (min-width:1025px){
.elementor-43 .bb-legal-cuerpo > .elementor-container > .bb-legal-tarjeta,
.elementor-43 .bb-legal-pie > .elementor-container > .bb-legal-caja{
max-width:756px;
margin-inline:auto;
}
.elementor-43 .bb-legal-texto{
font-size:1.09rem;
line-height:1.8;
}
}
/* ---------------------------------------------------------
4. JERARQUIA DE TITULOS
h3 (18,4 px) quedaba casi igual que el cuerpo (17,2 px) y
la pagina tiene 17 apartados con muchos subapartados.
--------------------------------------------------------- */
.elementor-43 .bb-legal-texto h2{
font-size:1.58rem;
line-height:1.25;
margin-top:3rem;
scroll-margin-top:86px;
}
.elementor-43 .bb-legal-texto h2:first-child{ margin-top:0; }
.elementor-43 .bb-legal-texto h3{
font-size:1.22rem;
line-height:1.35;
margin:2.2rem 0 .6rem;
scroll-margin-top:86px;
}
/* ---------------------------------------------------------
5. MARCADORES PENDIENTES (.bb-pendiente)
Se partian a mitad ("[CODIGO / POSTAL]") dibujando dos
chips rotos con su borde discontinuo. Que no se corten.
El unico marcador muy largo ocupa un parrafo entero, asi
que ese si puede fluir, convertido en aviso de bloque.
NOTA: los datos fiscales ya se han rellenado y ahora mismo
no queda ningun .bb-pendiente en la pagina; se deja la
regla por si vuelve a aparecer alguno.
--------------------------------------------------------- */
.elementor-43 .bb-pendiente{ white-space:nowrap; }
.elementor-43 .bb-legal-texto p > .bb-pendiente:only-child{
display:block;
white-space:normal;
text-align:center;
padding:.65rem .95rem;
border-radius:14px;
line-height:1.55;
}
/* ---------------------------------------------------------
6. VIUDAS Y HUERFANAS
--------------------------------------------------------- */
.elementor-43 .bb-legal-titulo .elementor-heading-title,
.elementor-43 .bb-legal-entradilla p,
.elementor-43 .bb-legal-fecha p:first-of-type,
.elementor-43 .bb-legal-aviso .elementor-alert-title,
.elementor-43 .bb-legal-texto h2,
.elementor-43 .bb-legal-texto h3{ text-wrap:balance; }
.elementor-43 .bb-legal-texto p,
.elementor-43 .bb-legal-texto li,
.elementor-43 .bb-legal-fecha p + p{ text-wrap:pretty; }
/* ---------------------------------------------------------
7. CAJAS DESTACADAS: aire equilibrado
Tenian 1,15rem arriba y 0,4rem abajo.
--------------------------------------------------------- */
.elementor-43 .bb-legal-destacado,
.elementor-43 .bb-legal-formulario{ padding-bottom:1.2rem; }
.elementor-43 .bb-legal-destacado > *:last-child,
.elementor-43 .bb-legal-formulario > *:last-child{ margin-bottom:0; }
/* ---------------------------------------------------------
8. PIE LEGAL: mas superficie tactil en los enlaces.
Se abre la interlinea para que las areas pulsables no
se toquen entre lineas.
--------------------------------------------------------- */
.elementor-43 .bb-legal-fecha p + p{
line-height:1.95;
max-width:30em;
margin-inline:auto;
}
/* Solo relleno vertical: con relleno lateral aparecian huecos
antes de las comas y del punto final. */
.elementor-43 .bb-legal-fecha a{
padding-block:.26rem;
padding-inline:0;
}
/* ---------------------------------------------------------
9. MOVIL
--------------------------------------------------------- */
@media (max-width:699px){
.elementor-43 .bb-legal-texto{ font-size:.97rem; line-height:1.78; }
.elementor-43 .bb-legal-texto h2{
font-size:1.3rem;
margin-top:2.5rem;
scroll-margin-top:72px;
}
.elementor-43 .bb-legal-texto h3{
font-size:1.1rem;
margin-top:1.9rem;
scroll-margin-top:72px;
}
.elementor-43 .bb-legal-texto ol.bb-pasos li{
padding:.8rem .95rem .8rem 3rem;
}
.elementor-43 .bb-legal-texto ol.bb-pasos li::before{
left:.8rem;
top:.82rem;
}
.elementor-43 .bb-indice{ padding:1rem .85rem .55rem; }
/* Columna del numero mas estrecha y cuerpo algo menor: asi casi
todas las entradas caben en una linea y el indice no se come
dos pantallas y media. */
.elementor-43 .bb-legal-texto .bb-indice ol{ font-size:.95rem; }
.elementor-43 .bb-legal-texto .bb-indice a{ padding:.45rem .4rem; gap:.45rem; }
.elementor-43 .bb-legal-texto .bb-indice a::before{ flex:0 0 1.45rem; }
}
/* ==========================================================================
LA TIENDA BRILLI BRILLI — Contacto (#42) · revisión responsive
Snippet del revisor de calidad. SOLO correcciones; no sustituye a
«Brilli Brilli — Contacto» (#173) ni toca los snippets de marca.
Todo va acotado a .page-id-42 para no salpicar a otras páginas.
========================================================================== */
/* --- 1. Desplegable «Asunto»: una sola caja, con flecha y a la misma altura -
«Detalles finos» (#133) pinta como campo todo lo que lleve .elementor-field.
El envoltorio del