/* Theme Name: Bridge Child Theme URI: http://demo.qodeinteractive.com/bridge/ Description: A child theme of Bridge Theme Author: Qode Interactive Author URI: http://www.qodethemes.com/ Version: 1.0.0 Template: bridge */ @import url("../bridge/style.css"); /* ============================================================ Favoritos · BLINDAJE anti grid-blowout (global, vive en style.css) ------------------------------------------------------------ El fix correcto está en favorites.css, pero ese archivo no se está refrescando en el navegador (sí lo hacen style.css/functions.php). Como style.css SÍ se sirve fresco y en TODAS las páginas, replicamos aquí lo imprescindible con !important para que la card de favoritos no reviente aunque favorites.css llegue viejo: - minmax(0,1fr): la columna puede encoger por debajo del contenido. - min-width:0 en la card: la imagen no fuerza el ancho de la pista. ============================================================ */ ul.yg-fav__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 1024px) { ul.yg-fav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 700px) { ul.yg-fav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } .yg-fav__grid > .yg-fav-card { min-width: 0 !important; } /* Red extra por si favorites.css no llegara a cargar: que la imagen nunca desborde su card. */ .yg-fav-card__media { overflow: hidden; } .yg-fav-card__media img, .yg-fav-card__imglink img { max-width: 100% !important; height: auto; } /* Carrusel de cross-sells de favoritos (también vive en favorites.css, que no se refresca → lo replicamos aquí): - scroll-snap-type:none → NO salta de card en card (así puedes descansar sobre una card a medias). - margin-right negativo → el carrusel sangra hasta el borde de pantalla, así la siguiente card asoma CORTADA en el borde derecho (peek), como el carrito. El borde izquierdo queda alineado con el contenido (margin-left:0). */ .yg-fav-xsell__grid { scroll-snap-type: none !important; width: auto !important; margin-right: calc(50% - 50vw) !important; } /* Carrito · "Bolsa … N piezas": empujar "N piezas" a la derecha. La regla vive en cart.css pero ese archivo no se refresca; aquí (style.css, sí se refresca) con !important para que el eyebrow sea flex y el count quede a la derecha. */ .yagaro-cart-head__eyebrow { display: flex !important; align-items: baseline; justify-content: space-between !important; width: 100% !important; } .yagaro-cart-head__count { margin-left: auto !important; } /* Header móvil: logo dentro del botón de menú (sustituye a la hamburguesa). El lo inyecta yagaro_mobile_menu_logo_inject() clonando el logo del header. El botón conserva su handler → al tocar el logo se abre el menú. En móvil este logo es el ÚNICO de la cabecera (el central se oculta más abajo) y se muestra completo, alineado a la izquierda. */ .mobile_menu_button > span .yagaro-mmb-logo { display: block; width: auto; /* Sin esto, el `img { max-width:100% }` global lo recorta al ancho del contenedor (~19px) y el logo sale diminuto. */ max-width: none !important; height: 52px; } .mobile_menu_button > span { line-height: 0; font-size: 0; } /* Móvil: el logo va a la IZQUIERDA (es el botón del menú). Ocultamos el logo central duplicado para que solo quede el de la izquierda. Solo en móvil: en desktop el logo sigue centrado. */ @media only screen and (max-width: 1000px) { header .logo_wrapper { display: none !important; } .mobile_menu_button { float: left; } } /* Language switcher */ .side_menu_button_wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } /* Centrar verticalmente el icono de búsqueda (la lupa quedaba alta) */ .side_menu_button_wrapper .side_menu_button { display: flex; align-items: center; justify-content: center; } /* Quitar el padding-left de 8px del botón de búsqueda (descentraba la lupa) */ .side_menu_button_wrapper .search_button { padding-left: 0 !important; } .yagaro-lang-pill { display: inline-flex; align-items: center; align-self: center; background: none; border: none; padding: 0; margin-left: 14px; text-decoration: none; line-height: 1; white-space: nowrap; } .yagaro-lang-pill:hover { opacity: 0.6; text-decoration: none; } /* ============================================================ Header — icono ♡ Favoritos (entre carrito y switch idioma) ============================================================ */ .yagaro-header-wishlist { position: relative; display: inline-flex !important; align-items: center; justify-content: center; align-self: center; margin-left: 14px; padding: 0; line-height: 1; color: #1a1a1a; text-decoration: none; transition: opacity .2s ease; } .yagaro-header-wishlist:hover { opacity: 0.6; color: #1a1a1a; text-decoration: none; } .yagaro-header-wishlist svg { width: 18px !important; height: 18px !important; stroke: currentColor; fill: none; display: block; } .yagaro-header-wishlist__count { position: absolute; top: -6px; right: -8px; background: #1a1a1a; color: #fff; font-size: 9px; font-weight: 700; min-width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; letter-spacing: 0; } /* Wrap del header (marcado por el JS) — todos los iconos en una sola línea centrados verticalmente: search · heart · cart · EN */ .yagaro-header-icons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 14px; } .yagaro-header-icons > * { margin-left: 0 !important; margin-right: 0 !important; align-self: center !important; /* Cada elemento se ajusta a su icono: sin ancho/padding extra, para que la separación la marque SOLO el `gap` y los huecos queden parejos. (Antes el buscador y el carrito arrastraban padding propio y dejaban huecos enormes e irregulares entre iconos). */ flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; } /* Botón de búsqueda: sin padding interno (descentraba y ensanchaba la celda) */ .yagaro-header-icons .search_button, .yagaro-header-icons .search_icon, .yagaro-header-icons .qode-search-opener, .yagaro-header-icons a.search_icon { padding: 0 !important; margin: 0 !important; width: auto !important; min-width: 0 !important; line-height: 1 !important; } /* El carrito queda alineado con el resto de iconos: su desplegable no debe sumar altura (eso empujaba el icono de la bolsa hacia arriba en la fila). */ .yagaro-header-icons .shopping_cart_outer, .yagaro-header-icons .shopping_cart_inner, .yagaro-header-icons .shopping_cart_holder, .yagaro-header-icons .shopping_cart_header { position: relative !important; display: inline-flex !important; align-items: center !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; top: 0 !important; line-height: 1 !important; /* Bridge fija al carrito width:43px, float:left y la celda interna height:100px. Eso ensanchaba el icono y estiraba el header a 100px. Lo neutralizamos para que ocupe solo lo que mide el icono. */ width: auto !important; min-width: 0 !important; float: none !important; } /* El panel desplegable fuera del flujo para que no estire la caja del carrito */ .yagaro-header-icons .shopping_cart_dropdown { position: absolute !important; } /* Burbuja del contador del carrito: más pequeña, igual que el contador ♥ */ .shopping_cart_header .header_cart_span { top: -6px !important; right: -8px !important; left: auto !important; min-width: 15px !important; width: auto !important; height: 15px !important; padding: 0 3px !important; line-height: 15px !important; font-size: 9px !important; font-weight: 700 !important; border-radius: 50% !important; box-sizing: border-box !important; } .yagaro-lang-arrow { display: none; } .yagaro-lang-code { color: #1a1a1a; font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } /* ---------- Header en móvil: iconos con más aire ---------- En el header responsive de Bridge los iconos (buscar · ♡ · carrito · EN) quedaban amontonados. Aumentamos la separación y los pegamos al borde derecho para que respiren y no choquen con el logo central. */ @media (max-width: 768px) { .yagaro-header-icons { gap: 20px !important; margin-left: auto !important; } /* Iconos un punto más grandes para que sean cómodos de tocar */ .yagaro-header-wishlist svg { width: 20px !important; height: 20px !important; } .yagaro-header-icons .search_icon, .yagaro-header-icons .search_button, .yagaro-header-icons .qode-search-opener { font-size: 19px !important; } /* La pastilla de idioma, separada del carrito */ .yagaro-header-icons .yagaro-lang-pill { margin-left: 0 !important; } .yagaro-lang-code { font-size: 14px; } } @media (max-width: 420px) { /* En pantallas muy estrechas reducimos un punto el gap para que el conjunto logo + iconos no fuerce overflow horizontal. */ .yagaro-header-icons { gap: 16px !important; } } @media (max-width: 374px) { /* A 320px la fila búsqueda·favoritos·carrito·EN no cabía junto al logo y se salía por la derecha (provocaba scroll horizontal y franjas blancas). Apretamos el gap y la pastilla de idioma para que entre todo. */ .yagaro-header-icons { gap: 10px !important; } .yagaro-lang-code { font-size: 13px; } } /* ========================================================= CART & CHECKOUT — Yagaro custom styles ========================================================= */ /* ---------- Tipografía base ---------- */ .woocommerce-cart, .woocommerce-checkout { color: #1a1a1a; } .woocommerce-cart h1, .woocommerce-cart h2, .woocommerce-cart h3, .woocommerce-checkout h1, .woocommerce-checkout h2, .woocommerce-checkout h3 { font-weight: 600; letter-spacing: 0.5px; } /* ========================================================= CARRITO ========================================================= */ /* Layout 2 columnas (solo cuando hay productos en el carrito) */ .woocommerce-cart .woocommerce { display: grid; /* Ambas pistas con minmax(0, …): sin el `min:0` un item de grid hereda `min-width:auto` y, si su contenido (precios, dirección, botón) es más ancho que la pista, se DESBORDA hacia la derecha saliéndose de .woocommerce. Con minmax(0,400px) la columna del resumen nunca crece por encima de 400px y su contenido se ciñe (ver overflow-wrap más abajo). Resumen a 400px (antes 360) + gap 40px (antes 48): estrecha la columna de productos —que quedaba ancha y con mucho hueco entre la cantidad y el precio— y da algo más de aire al resumen. */ grid-template-columns: minmax(0, 1fr) minmax(0, 400px); /* Decouple: 40px de separación ENTRE columnas (productos | resumen), pero solo 16px de row-gap. La cabecera ocupa toda la fila 1 (grid-column 1/-1) y los productos van en la fila 2; con gap:40px el row-gap dejaba un hueco grande bajo "Tu selección / envío gratis". (≤900px ya se reduce aparte.) */ column-gap: 40px; row-gap: 16px; align-items: start; } /* Refuerzo de contención: los dos items del grid (form de productos y resumen) deben poder encoger y su texto envolver, para no empujar nada fuera de la columna en el rango tablet (~901–1200px), donde el espacio es más justo. */ .woocommerce-cart .woocommerce > form.woocommerce-cart-form, .woocommerce-cart .woocommerce > .cart-collaterals { min-width: 0; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td, .woocommerce-cart .cart_totals .woocommerce-Price-amount, .woocommerce-cart .product-subtotal, .woocommerce-cart .product-subtotal .woocommerce-Price-amount { min-width: 0; overflow-wrap: anywhere; } /* Carrito vacío: desactivamos el grid y centramos a página completa */ body.cart-is-empty .woocommerce-cart .woocommerce, body.cart-is-empty .woocommerce-cart .cart-collaterals, body.cart-is-empty .woocommerce { display: block !important; grid-template-columns: none !important; grid-column: 1 / -1 !important; gap: 0 !important; max-width: none !important; width: 100% !important; float: none !important; position: static !important; } body.cart-is-empty .yagaro-cart-empty { max-width: 1100px; margin: 0 auto !important; padding: 30px 24px 60px; box-sizing: border-box; } /* En tablets y móvil: más padding lateral para que respire */ @media (max-width: 900px) { body.cart-is-empty .yagaro-cart-empty { padding: 24px 20px 50px; } .yagaro-cart-empty__more-head { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { body.cart-is-empty .yagaro-cart-empty { padding: 20px 16px 40px; } .yagaro-cart-empty__ctas { display: flex !important; flex-direction: column; width: 100%; max-width: 320px; } .yagaro-cart-empty__ctas a { width: 100%; text-align: center; } } /* ============================================================ Top bar de Bridge (announcement "ENVÍOS GRATUITOS…") En móvil su fuente/padding por defecto rompen el layout. ============================================================ */ @media (max-width: 768px) { .qode-top-bar, .top_bar, .qode-bar, .top_header, body .top_bar_inner, body .qode_top_header { padding-top: 8px !important; padding-bottom: 8px !important; } .qode-top-bar *, .top_bar *, .qode-bar *, .top_header *, .qode_top_header * { font-size: 11px !important; line-height: 1.3 !important; letter-spacing: 0.04em !important; } } /* ------------------------------------------------------------ Header sticky en móvil (sticky_mobile): al hacer scroll hacia arriba Bridge revela el header fijo y le inyecta inline padding-top = alto de la barra de admin de WP (default.js, qodeMobileHeaderBehavior). Cuando navegas logueada eso deja un hueco sobre el banner "ENVÍOS GRATUITOS". Lo anulamos para que el header quede pegado al borde superior. ------------------------------------------------------------ */ @media (max-width: 1000px) { header.page_header.qode-animate-mobile-header, header.page_header.mobile-header-appear { top: 0 !important; margin-top: 0 !important; } header.page_header.sticky_mobile .header_inner { padding-top: 0 !important; } } /* ------------------------------------------------------------ Contenedor de contenido a ANCHO COMPLETO en móvil. Bridge fija .container_inner { width: 950px / % } con margin:0 auto, lo que en móvil deja un gutter lateral grande (≈80% de ancho → ~10% de margen a cada lado). Eso metía un "margin" enorme a la izquierda de los cross-sells (ficha) y de la sección de favoritos (wishlist). Forzamos el contenedor de PÁGINA a 100% (solo .page_container_inner → NO afecta al header) para que el contenido use todo el ancho; el gutter real lo da el padding de .content_inner (~24px). ------------------------------------------------------------ */ @media (max-width: 768px) { .page_container_inner { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* La cabecera del carrito (BOLSA / TU SELECCIÓN + barra de envío gratis) se engancha en woocommerce_before_cart, así que es el PRIMER hijo del grid. Sin esto se auto-coloca en la columna 1 y deja la columna 2 (la del resumen) VACÍA a su lado → un hueco enorme arriba a la derecha. Forzándola a ancho completo, productos | resumen arrancan alineados justo debajo de la cabecera. */ .woocommerce-cart .woocommerce > .yagaro-cart-head { grid-column: 1 / -1; } .woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; } /* Cross-sells al pie: ocupan ancho completo (si no, caen en la col 1 del grid y dejan hueco en la columna de 360px del resumen). */ .woocommerce-cart .woocommerce > .yagaro-cross-sells { grid-column: 1 / -1; } .woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky; top: 120px; margin: 0; width: 100% !important; float: none !important; } .woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; } /* Por debajo de 900px apilamos a una columna. Antes era 1200px (la tabla ancha del tema no cabía junto al resumen), pero ahora los productos usan tarjetas compactas (ver cart.css ≤1200px), así que las 2 columnas caben hasta ~900px y el carrito mantiene productos | resumen también en tablet/1024. */ @media (max-width: 900px) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr; /* Al apilar, el row-gap de 40px (pensado para el column-gap de 2 columnas) deja un hueco enorme entre la cabecera y los productos. Lo reducimos. */ gap: 20px; } .woocommerce-cart .cart-collaterals { position: static; grid-column: 1; grid-row: auto; max-width: 480px; } } /* Tabla del carrito */ .woocommerce-cart table.shop_table { border: 1px solid #ececec !important; border-radius: 0 !important; border-collapse: collapse !important; background: #fff; } .woocommerce-cart table.shop_table thead th { background: #fafafa; color: #888; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 18px 16px; border-bottom: 1px solid #ececec; } .woocommerce-cart table.shop_table td { padding: 24px 16px !important; border-top: 1px solid #f0f0f0 !important; vertical-align: middle; } .woocommerce-cart table.shop_table tbody tr:first-child td { border-top: 0 !important; } /* Thumbnail del producto */ .woocommerce-cart table.shop_table td.product-thumbnail img { width: 90px !important; max-width: 90px !important; height: auto; border-radius: 4px; } /* Nombre del producto */ .woocommerce-cart table.shop_table td.product-name a { color: #1a1a1a; font-weight: 600; font-size: 15px; text-decoration: none; } .woocommerce-cart table.shop_table td.product-name a:hover { text-decoration: underline; } /* Precio y subtotal */ .woocommerce-cart table.shop_table td.product-price, .woocommerce-cart table.shop_table td.product-subtotal { color: #1a1a1a; font-weight: 500; font-size: 15px; } /* Botón eliminar (X) */ .woocommerce-cart table.shop_table td.product-remove a.remove { color: #999 !important; font-size: 22px; font-weight: 300 !important; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: transparent !important; transition: all 0.2s ease; } .woocommerce-cart table.shop_table td.product-remove a.remove:hover { color: #c00 !important; background: #f5f5f5 !important; } /* Centrar la × de eliminar dentro de su celda */ .woocommerce-cart table.shop_table td.product-remove { text-align: center; vertical-align: middle; } /* Centrar la columna CANTIDAD (cabecera + celda) */ .woocommerce-cart table.shop_table thead th.product-quantity, .woocommerce-cart table.shop_table td.product-quantity { text-align: center; } /* Selector de cantidad */ .woocommerce-cart .quantity { display: inline-flex; align-items: center; gap: 0; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; } .woocommerce-cart .quantity button, .woocommerce-cart .quantity .minus, .woocommerce-cart .quantity .plus { width: 36px; height: 36px; background: #fafafa !important; border: 0 !important; color: #1a1a1a !important; font-size: 16px; cursor: pointer; transition: background 0.2s; } .woocommerce-cart .quantity button:hover, .woocommerce-cart .quantity .minus:hover, .woocommerce-cart .quantity .plus:hover { background: #f0f0f0 !important; } .woocommerce-cart .quantity input.qty { width: 50px !important; height: 36px; border: 0 !important; border-left: 1px solid #e0e0e0 !important; border-right: 1px solid #e0e0e0 !important; text-align: center; font-weight: 600; background: #fff !important; padding: 0 !important; box-shadow: none !important; } /* Cupón y botón de actualizar */ .woocommerce-cart .actions { padding: 20px 16px !important; background: #fafafa; border-top: 1px solid #ececec !important; } .woocommerce-cart .actions .coupon { display: flex; gap: 8px; align-items: center; } .woocommerce-cart .actions .coupon input.input-text { height: 44px; padding: 0 14px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fff; font-size: 14px; min-width: 220px; } .woocommerce-cart .actions .coupon input.input-text:focus { outline: none; border-color: #1a1a1a; } .woocommerce-cart .actions .button { height: 44px; padding: 0 22px; font-size: 13px; font-weight: 600; letter-spacing: 1px; background: #1a1a1a !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } .woocommerce-cart .actions .button:hover { background: #333 !important; } /* Botones del carrito (Aplicar cupón + Finalizar compra) con el mismo tamaño. Selectores de alta especificidad para ganar a las reglas de Bridge. */ .woocommerce-cart table.cart td.actions > .checkout-button.button, .woocommerce-cart table.cart td.actions .coupon input.button { height: 48px !important; line-height: 48px !important; padding: 0 24px !important; font-weight: 600 !important; letter-spacing: 1px !important; } .woocommerce-cart table.cart td.actions > .checkout-button.button { margin-left: 14px; } /* Card de totales (derecha) */ .woocommerce-cart .cart-collaterals div.cart_totals, .woocommerce-cart .cart_totals { background: #fafafa; border: 1px solid #ececec; border-radius: 6px; padding: 28px; box-sizing: border-box !important; max-width: 100% !important; } .woocommerce-cart .cart_totals h2 { margin: 0 0 20px !important; font-size: 11px !important; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #888; } .woocommerce-cart .cart_totals table { width: 100% !important; border: 0 !important; background: transparent !important; margin: 0 !important; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { background: transparent !important; border: 0 !important; border-bottom: 1px solid #ececec !important; padding: 14px 0 !important; font-size: 14px; vertical-align: top; } /* Etiquetas a la izquierda, precios pegados a la derecha del contenedor */ .woocommerce-cart .cart_totals table th { text-align: left !important; } .woocommerce-cart .cart_totals table td { text-align: right !important; } /* La fila de Envío incluye el calculador inline (form): ese bloque va a la izquierda */ .woocommerce-cart .cart_totals .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; } .woocommerce-cart .cart_totals .woocommerce-shipping-calculator, .woocommerce-cart .cart_totals .woocommerce-shipping-destination { text-align: left !important; } .woocommerce-cart .cart_totals table tr.order-total th, .woocommerce-cart .cart_totals table tr.order-total td { border-bottom: 0 !important; padding-top: 18px !important; font-size: 18px !important; font-weight: 700 !important; color: #1a1a1a !important; } /* El toggle del calculador de envío ("Añadir dirección") se estiliza ahora en assets/css/cart.css con la clase .yagaro-calc-toggle (la clase antigua .shipping-calculator-button quedó en desuso al separarlo del JS de Woo). */ /* Botón "Finalizar compra" */ .woocommerce-cart .wc-proceed-to-checkout { padding: 20px 0 0 !important; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: block !important; width: 100%; height: 54px; line-height: 54px; padding: 0 !important; background: #1a1a1a !important; color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; border-radius: 4px !important; border: 0 !important; transition: background 0.2s; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: #333 !important; } /* Bridge/Qode estiliza los `.button` con un círculo de relleno animado en ::before/::after posicionado de forma absoluta; en el botón de checkout ese círculo asomaba (un punto negro) por la derecha, saliéndose del resumen. Lo anulamos y forzamos box-sizing + overflow para que el botón nunca exceda el ancho de su columna (360px). */ .woocommerce-cart .wc-proceed-to-checkout .checkout-button { box-sizing: border-box !important; max-width: 100% !important; overflow: hidden !important; position: relative; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button::before, .woocommerce-cart .wc-proceed-to-checkout .checkout-button::after { display: none !important; content: none !important; } /* ========================================================= CHECKOUT ========================================================= */ /* Layout en una sola columna (todo apilado, en orden) */ .woocommerce-checkout form.checkout { display: block; } /* Datos de facturación / envío a ancho completo, uno debajo de otro */ .woocommerce-checkout form.checkout #customer_details, .woocommerce-checkout form.checkout .col2-set, .woocommerce-checkout form.checkout .col2-set .col-1, .woocommerce-checkout form.checkout .col2-set .col-2 { width: 100% !important; max-width: none; float: none !important; margin-left: 0; margin-right: 0; } .woocommerce-checkout form.checkout .col2-set .col-2 { margin-top: 24px; } /* Bloque "Tu pedido" a ancho completo, debajo de los datos (sin sticky) — SOLO checkout ANTIGUO. En el nuevo (.yagaro-checkout) lo controla checkout.css; lo excluimos con :not(.yagaro-checkout) para que estas reglas no le pinten una segunda card a #order_review. */ .woocommerce-checkout form.checkout:not(.yagaro-checkout) h3#order_review_heading, .woocommerce-checkout form.checkout:not(.yagaro-checkout) #order_review { width: 100% !important; float: none !important; clear: both; } .woocommerce-checkout form.checkout:not(.yagaro-checkout) h3#order_review_heading { margin-top: 40px; } .woocommerce-checkout form.checkout:not(.yagaro-checkout) #order_review { position: static; background: #fafafa; border: 1px solid #ececec; border-radius: 6px; padding: 28px; } /* Cupón colapsable arriba */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: #fafafa !important; color: #1a1a1a !important; border: 1px dashed #ddd !important; border-radius: 4px; padding: 14px 18px !important; font-size: 14px; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: #1a1a1a; font-weight: 600; text-decoration: underline; } /* Botones de pago alternativos (Apple Pay, Link) */ .woocommerce-checkout .wc-stripe-payment-request-wrapper, .woocommerce-checkout .wc-stripe-payment-request-button-separator { margin-bottom: 24px !important; } /* Títulos del formulario */ .woocommerce-checkout #customer_details h3, .woocommerce-checkout #order_review_heading { font-size: 16px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1a1a1a; margin: 0 0 20px !important; padding-bottom: 12px; border-bottom: 1px solid #ececec; } /* Campos del formulario */ .woocommerce-checkout .form-row label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #555; letter-spacing: 0.3px; } .woocommerce-checkout .form-row .required { color: #c00; text-decoration: none; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container .select2-selection { width: 100%; height: 48px !important; padding: 0 14px !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; background: #fff !important; font-size: 14px; color: #1a1a1a; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: none !important; } .woocommerce-checkout .form-row textarea { height: 100px !important; padding: 12px 14px !important; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus, .woocommerce-checkout .form-row select:focus { outline: none; border-color: #1a1a1a !important; box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08) !important; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px !important; padding: 0 14px !important; color: #1a1a1a; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; } /* Resumen del pedido (derecha) */ .woocommerce-checkout #order_review table.shop_table { border: 0 !important; background: transparent !important; margin: 0 !important; } .woocommerce-checkout #order_review table.shop_table thead th { background: transparent; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #888; border-bottom: 1px solid #ececec !important; padding: 0 0 12px !important; } .woocommerce-checkout #order_review table.shop_table tbody tr td { padding: 14px 0 !important; border-bottom: 1px solid #ececec !important; background: transparent !important; font-size: 14px; color: #1a1a1a; } .woocommerce-checkout #order_review table.shop_table tfoot th, .woocommerce-checkout #order_review table.shop_table tfoot td { padding: 12px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #ececec !important; font-size: 14px; } .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th, .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td { border-bottom: 0 !important; padding-top: 18px !important; font-size: 18px !important; font-weight: 700 !important; } /* Métodos de pago */ .woocommerce-checkout #payment { background: transparent !important; border-radius: 0 !important; margin-top: 24px; } .woocommerce-checkout #payment ul.payment_methods { background: #fff; border: 1px solid #ececec !important; border-radius: 6px; padding: 12px !important; margin: 0 0 20px !important; } .woocommerce-checkout #payment ul.payment_methods li { padding: 14px 12px !important; border-bottom: 1px solid #f0f0f0; list-style: none; /* Fila en flex: radio + etiqueta + iconos centrados verticalmente. Con los logos a altura uniforme (ver regla img), nada cuelga. */ display: flex !important; flex-wrap: wrap !important; align-items: center !important; } /* El formulario de tarjeta / caja de pago ocupa toda la fila y cae debajo */ .woocommerce-checkout #payment ul.payment_methods li > .payment_box, .woocommerce-checkout #payment ul.payment_methods li > div.payment_box { flex: 0 0 100% !important; } .woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; } /* Radio + etiqueta del método de pago en la MISMA línea (Bridge fuerza label en bloque, lo que tiraba el texto debajo del radio). */ .woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] { display: inline-block !important; float: none !important; width: auto !important; margin: 0 8px 0 0 !important; vertical-align: middle !important; } .woocommerce-checkout #payment ul.payment_methods li label { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; font-weight: 600; color: #1a1a1a; cursor: pointer; margin: 0 !important; padding: 0 !important; /* quita el alto extra de la etiqueta de tarjeta */ line-height: 1.2 !important; } /* TODOS los logos de método de pago (tarjeta SVG, PayPal, Trustly…) a una altura uniforme y centrados con el texto. !important + selector fuerte para ganar a los estilos inline/propios de cada pasarela. */ .woocommerce-checkout #payment ul.payment_methods li label img, .woocommerce-checkout #payment ul.payment_methods li img.stripe-cards-icon, .woocommerce-checkout #payment ul.payment_methods li img.stripe-icon { display: inline-block !important; height: 20px !important; width: auto !important; max-height: 20px !important; margin: 0 0 0 8px !important; vertical-align: middle !important; align-self: center !important; } .woocommerce-checkout #payment div.payment_box { background: #fafafa !important; border-radius: 4px; padding: 14px !important; margin-top: 12px !important; font-size: 13px; color: #555; } .woocommerce-checkout #payment div.payment_box::before { display: none !important; } /* Términos y condiciones */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 16px 0; padding: 14px; background: #fafafa; border-radius: 4px; font-size: 13px; } /* Botón "Realizar pedido" */ .woocommerce-checkout #place_order { display: block !important; width: 100%; height: 56px; padding: 0 !important; background: #1a1a1a !important; color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; border-radius: 4px !important; border: 0 !important; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 8px; } .woocommerce-checkout #place_order:hover { background: #333 !important; } .woocommerce-checkout #place_order:active { transform: scale(0.99); } /* Contener el checkout en una columna legible y centrada (en una sola columna a ancho completo los campos quedan demasiado largos) */ .woocommerce-checkout .woocommerce { max-width: 760px; margin-left: auto; margin-right: auto; } /* Zona de pago exprés (Apple Pay / Google Pay) y separador "— O —" */ .woocommerce-checkout .wc-stripe-payment-request-wrapper { margin: 0 auto 8px !important; } .woocommerce-checkout .wc-stripe-payment-request-button-separator { display: flex; align-items: center; text-align: center; gap: 14px; margin: 20px 0 !important; color: #aaa; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .woocommerce-checkout .wc-stripe-payment-request-button-separator::before, .woocommerce-checkout .wc-stripe-payment-request-button-separator::after { content: ""; flex: 1; height: 1px; background: #ececec; } /* Enlace "¿Tienes un cupón?" — un poco más de aire bajo la caja */ .woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 22px; } /* Formulario de login en checkout: mismo aspecto sobrio que el resto */ .woocommerce-checkout form.woocommerce-form-login { border: 1px solid #ececec; border-radius: 6px; padding: 24px; margin-bottom: 22px; } /* ============================================================ Avisos WooCommerce — estilo pill Yagaro (success, error, info: mismo shape, distinto color) ============================================================ */ .woocommerce-notices-wrapper { text-align: center; margin: 0 0 16px; } .woocommerce-message, .woocommerce-error, .woocommerce-info { display: inline-flex !important; align-items: center; gap: 10px; margin: 14px auto !important; padding: 10px 12px 10px 18px !important; background: #1a1a1a !important; color: #fff !important; border: 0 !important; border-left: 0 !important; border-radius: 999px !important; font-size: 13px !important; line-height: 1.4 !important; list-style: none !important; box-shadow: 0 6px 24px rgba(0,0,0,0.10); text-align: left; max-width: 100%; } .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { content: "" !important; display: inline-block !important; width: 18px !important; height: 18px !important; background-color: #fff !important; color: transparent !important; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / 16px 16px; mask: url('data:image/svg+xml;utf8,') no-repeat center / 16px 16px; position: static !important; border: 0 !important; padding: 0 !important; flex: 0 0 auto; } .woocommerce-error::before { -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / 16px 16px; mask: url('data:image/svg+xml;utf8,') no-repeat center / 16px 16px; } .woocommerce-error { background: #c1372f !important; } .woocommerce-info { background: #2c2c2c !important; } /* Enlaces dentro del aviso (Deshacer, etc.) como pill blanco */ .woocommerce-message a.button, .woocommerce-message a.restore-item, .woocommerce-message a:not(.button):not(.restore-item), .woocommerce-error a, .woocommerce-info a { color: #1a1a1a !important; background: #fff !important; text-decoration: none !important; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; padding: 6px 14px !important; border-radius: 999px !important; margin-left: 8px !important; font-size: 11px !important; border: 0 !important; line-height: 1.4 !important; transition: opacity .2s ease; display: inline-block !important; } .woocommerce-message a:hover, .woocommerce-error a:hover, .woocommerce-info a:hover { opacity: .85; color: #1a1a1a !important; } /* ============================================================ Mi cuenta — login / registro (pulido) ============================================================ */ .woocommerce-account .woocommerce { max-width: 1080px; margin: 40px auto; padding: 0 20px; } .woocommerce-account form.woocommerce-form-login, .woocommerce-account form.woocommerce-form-register { border: 1px solid #ececec; border-radius: 12px; padding: 32px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.02); } .woocommerce-account h2 { font-size: 18px !important; font-weight: 700; margin: 0 0 22px !important; text-transform: uppercase; letter-spacing: 0.06em; color: #1a1a1a; } .woocommerce-account .form-row, .woocommerce-account .woocommerce-form-row { margin-bottom: 18px; } .woocommerce-account label:not(.woocommerce-form__label-for-checkbox) { display: block; margin-bottom: 8px; font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* Inputs (todos los tipos) + selects + textareas: pill suave consistente. Selectores muy específicos para ganarle a las reglas de Bridge. */ .woocommerce-account .form-row input, .woocommerce-account .form-row select, .woocommerce-account .form-row textarea, .woocommerce-account .woocommerce-input-wrapper input, .woocommerce-account .woocommerce-input-wrapper select, .woocommerce-account .woocommerce-input-wrapper textarea, .woocommerce-account input.input-text, .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .woocommerce-account input[type="tel"], .woocommerce-account input[type="number"], .woocommerce-account input[type="url"], .woocommerce-account input[type="search"], .woocommerce-account select { width: 100% !important; height: 48px !important; padding: 0 16px !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; background: #fff !important; font-size: 14px !important; color: #1a1a1a !important; box-shadow: none !important; transition: border-color .2s ease; -webkit-appearance: none; appearance: none; } .woocommerce-account textarea, .woocommerce-account .form-row textarea { height: auto !important; min-height: 100px !important; padding: 12px 16px !important; } /* Select2 (provincia/país pueden estar gestionados por Select2) */ .woocommerce-account .select2-container .select2-selection, .woocommerce-account .select2-container--default .select2-selection--single { height: 48px !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; background: #fff !important; } .woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px !important; padding: 0 16px !important; color: #1a1a1a !important; } .woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; right: 8px; } .woocommerce-account input:focus, .woocommerce-account select:focus, .woocommerce-account textarea:focus { outline: none; border-color: #1a1a1a !important; } /* Botones Acceder / Registrarse: pill negro centrado, sin estirarse alto */ .woocommerce-account input[name="login"], .woocommerce-account button[name="login"], .woocommerce-account input[name="register"], .woocommerce-account button[name="register"] { display: block !important; width: 100% !important; max-width: 360px; margin: 14px auto 0 !important; height: auto !important; line-height: 1 !important; padding: 14px 28px !important; background: #1a1a1a !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; text-align: center !important; text-transform: uppercase; font-weight: 700; font-size: 12px !important; letter-spacing: 0.08em; cursor: pointer; transition: opacity .2s ease; } .woocommerce-account input[name="login"]:hover, .woocommerce-account button[name="login"]:hover, .woocommerce-account input[name="register"]:hover, .woocommerce-account button[name="register"]:hover { opacity: .85; background: #1a1a1a !important; color: #fff !important; } /* ============================================================ Ver pedido (view-order) — pulido completo ============================================================ */ /* Headings de secciones (DIRECCIÓN DE FACTURACIÓN, etc.) → eyebrow Yagaro */ .woocommerce-view-order h2, .woocommerce-view-order h3, .woocommerce-order-details h2, .woocommerce-order-details h3, .woocommerce-customer-details h2, .woocommerce-customer-details h3, .woocommerce-column__title { font-size: 13px !important; font-weight: 700 !important; color: #1a1a1a !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; font-family: inherit !important; } /* Frase del estado "El pedido #808 …" como texto normal sin highlight */ .woocommerce-order-details__title, .woocommerce-thankyou-order-received { font-size: 14px; color: #555; margin-bottom: 20px; } /* ====== TODOS los botones en Mi Cuenta / view-order como pill outline ====== Selectores muy abiertos para ganarle a Bridge. Excepción: .order-again → pill PRIMARY (negro relleno). */ body .woocommerce-MyAccount-content .button, body .woocommerce-MyAccount-content a.button, body .woocommerce-MyAccount-content input.button, body .woocommerce-view-order .button, body .woocommerce-view-order a.button, body .woocommerce-view-order input.button, body .woocommerce-orders-table__cell-order-actions .button, body .woocommerce-MyAccount-orders .button { background: transparent !important; color: #1a1a1a !important; border: 1px solid #1a1a1a !important; border-radius: 999px !important; padding: 9px 18px !important; margin: 2px 4px 2px 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; display: inline-block !important; height: auto !important; min-height: 0 !important; line-height: 1.2 !important; box-shadow: none !important; width: auto !important; text-align: center; transition: background .2s ease, color .2s ease; } body .woocommerce-MyAccount-content .button:hover, body .woocommerce-view-order .button:hover, body .woocommerce-MyAccount-orders .button:hover { background: #1a1a1a !important; color: #fff !important; opacity: 1 !important; } /* "Volver a pedirlo" / order-again → pill PRIMARY negro relleno */ body .woocommerce-MyAccount-content .order-again .button, body .woocommerce-view-order .order-again .button, body .woocommerce-MyAccount-content a.button[href*="order_again"], body a.button.wc-forward[href*="order_again"] { background: #1a1a1a !important; color: #fff !important; border: 0 !important; padding: 14px 28px !important; font-size: 12px !important; margin-top: 8px !important; } body .woocommerce-MyAccount-content .order-again .button:hover, body .woocommerce-view-order .order-again .button:hover { background: #1a1a1a !important; color: #fff !important; opacity: .85 !important; } /* Tabla de productos del pedido (order-details) */ .woocommerce-order-details table.shop_table, .woocommerce-view-order table.shop_table { border: 1px solid #ececec !important; border-radius: 12px !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; background: #fff !important; margin-bottom: 24px !important; } .woocommerce-order-details table.shop_table thead th { background: #fafafa !important; color: #888 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 14px !important; border-bottom: 1px solid #ececec !important; } .woocommerce-order-details table.shop_table tbody td, .woocommerce-order-details table.shop_table tfoot th, .woocommerce-order-details table.shop_table tfoot td { padding: 14px !important; border-bottom: 1px solid #f3f3f3 !important; background: transparent !important; color: #1a1a1a !important; font-size: 14px; } .woocommerce-order-details table.shop_table tfoot tr:last-child th, .woocommerce-order-details table.shop_table tfoot tr:last-child td { border-bottom: 0 !important; border-top: 2px solid #1a1a1a !important; font-size: 16px !important; font-weight: 700 !important; padding-top: 16px !important; } /* Direcciones de facturación / envío en 2 columnas. Bridge aplica float + clearfix al .col2-set y col-1/col-2 que rompe el grid. Resetamos float + clear ANTES de poner grid. */ body .woocommerce-customer-details .col2-set, body .woocommerce-customer-details section.col2-set, body .woocommerce-customer-details .col2-set.addresses, body .woocommerce-customer-details .woocommerce-columns, body .woocommerce-customer-details .woocommerce-columns--addresses, body .woocommerce-customer-details .woocommerce-columns--2, body .woocommerce-MyAccount-content .col2-set.addresses { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 22px !important; margin: 16px 0 !important; width: 100% !important; float: none !important; overflow: visible !important; } body .woocommerce-customer-details .col2-set::before, body .woocommerce-customer-details .col2-set::after, body .woocommerce-customer-details .woocommerce-columns::before, body .woocommerce-customer-details .woocommerce-columns::after { /* matamos el clearfix de Bridge que rompe el grid */ content: none !important; display: none !important; } body .woocommerce-customer-details .col-1, body .woocommerce-customer-details .col-2, body .woocommerce-customer-details .woocommerce-column, body .woocommerce-customer-details .woocommerce-column--1, body .woocommerce-customer-details .woocommerce-column--2, body .woocommerce-customer-details .woocommerce-column--billing-address, body .woocommerce-customer-details .woocommerce-column--shipping-address, body .col2-set.addresses > .col-1, body .col2-set.addresses > .col-2 { width: auto !important; max-width: 100% !important; float: none !important; clear: none !important; margin: 0 !important; padding: 22px !important; border: 1px solid #ececec !important; border-radius: 12px !important; background: #fff !important; box-sizing: border-box !important; display: block !important; } body .woocommerce-customer-details address { font-style: normal !important; color: #1a1a1a !important; line-height: 1.6; font-size: 14px; margin: 0; padding: 0; } @media (max-width: 600px) { body .woocommerce-customer-details .col2-set, body .woocommerce-customer-details .woocommerce-columns, body .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr !important; } } /* Quitar el fondo amarillo nativo de en pedidos / mi cuenta. WC envuelve nº de pedido, fecha y estado en y el navegador por defecto los pinta de amarillo. Lo dejamos solo en bold. */ .woocommerce-account mark, .woocommerce-order-details mark, .woocommerce-view-order mark, .woocommerce mark, mark.order-number, mark.order-date, mark.order-status { background: transparent !important; color: #1a1a1a !important; font-weight: 700 !important; padding: 0 !important; } /* Ocultar el botón nativo de WP "show-password-input" (rectángulo gris feo) */ .woocommerce-account .show-password-input, .woocommerce-form-login .show-password-input, .woocommerce-form-register .show-password-input, .woocommerce-EditAccountForm .show-password-input { display: none !important; } /* "Recuérdame" y "¿Perdiste tu contraseña?" */ .woocommerce-account .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #1a1a1a; margin: 12px 0; text-transform: none; letter-spacing: 0; font-weight: 400; } .woocommerce-account .lost_password, .woocommerce-account .woo-lost_password2 { display: inline-block; margin-top: 12px; font-size: 13px; color: #1a1a1a; text-decoration: underline; } .woocommerce-account .lost_password:hover, .woocommerce-account .woo-lost_password2:hover { opacity: .7; } /* Bloque de aviso de privacidad bajo el registro */ .woocommerce-account .woocommerce-privacy-policy-text { font-size: 12px; color: #888; line-height: 1.5; margin: 16px 0; } /* ============================================================ Mi cuenta — Layout dashboard (logueado): sidebar + main ============================================================ */ /* Cuando el usuario está logueado WooCommerce renderiza: .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content */ body.logged-in.woocommerce-account .woocommerce { max-width: 1200px; margin: 40px auto; padding: 0 20px; display: block; } body.logged-in.woocommerce-account .woocommerce::after { content: ""; display: block; clear: both; } .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 240px; } .woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 280px); border: 0; box-shadow: none; padding: 0; background: transparent; } /* Bloque de usuario en sidebar (avatar + nombre + "Miembro desde") */ .yagaro-account-user { display: flex; align-items: center; gap: 12px; padding: 6px 12px 20px; border-bottom: 1px solid #ececec; margin-bottom: 10px; } .yagaro-account-avatar { width: 42px; height: 42px; border-radius: 50%; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: 0 0 42px; } .yagaro-account-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .yagaro-account-name { font-weight: 700; font-size: 14px; color: #1a1a1a; line-height: 1.2; } .yagaro-account-since { font-size: 11px; color: #888; } /* Menú lateral */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a, .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { display: flex !important; align-items: center; gap: 10px; padding: 11px 14px !important; min-height: 42px; box-sizing: border-box; color: #555; font-size: 14px; line-height: 1.2 !important; text-decoration: none; border-radius: 6px; border-left: 3px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #f7f7f7; color: #1a1a1a; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #f5f5f5; color: #1a1a1a; font-weight: 700; border-left-color: #1a1a1a; } /* Separador antes de "Cerrar sesión" */ .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ececec; } /* Iconos del menú lateral (uno por endpoint, vía mask SVG) */ .woocommerce-account .woocommerce-MyAccount-navigation li a::before { content: ""; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .woocommerce-MyAccount-navigation-link--dashboard a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--downloads a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--payment-methods a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--wishlist a::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* ============================================================ TI WooCommerce Wishlist — estilos Yagaro ============================================================ */ /* Botón "Añadir a wishlist" en producto / shop loop. :not(.yagaro-sp-fav-btn) → NO tocar nuestros corazones propios (galería de ficha y resumen), que son círculos 44px con SVG centrado. Sin esta exclusión, el padding:8px 16px + border-radius:999px de aquí aplastaba el SVG y lo convertía en una píldora. */ .tinvwl_add_to_wishlist_button:not(.yagaro-sp-fav-btn), .tinv-wraper.woocommerce.tinv-wishlist .tinv-modal .tinvwl-buttons-group button, .tinvwl_add_to_wishlist-text { background: transparent !important; color: #1a1a1a !important; border: 1px solid #1a1a1a !important; border-radius: 999px !important; padding: 8px 16px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; transition: background .2s ease, color .2s ease !important; box-shadow: none !important; } .tinvwl_add_to_wishlist_button:hover, .tinvwl_add_to_wishlist-text:hover, .tinvwl_add_to_wishlist_button.tinvwl-product-in-list { background: #1a1a1a !important; color: #fff !important; } .tinvwl_add_to_wishlist_button .tinvwl-icon-heart, .tinvwl-icon-heart-plus, .tinvwl-icon-heart-mark { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; } /* Tabla / listado de wishlist en página /wishlist/ */ .tinv-wishlist .tinvwl-table-manage-list, .tinv-wishlist table.tinvwl-table-manage-list { border: 1px solid #ececec !important; border-radius: 12px !important; overflow: hidden; border-collapse: separate !important; border-spacing: 0; } .tinv-wishlist table.tinvwl-table-manage-list th { background: #fafafa !important; color: #888 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 14px !important; border-bottom: 1px solid #ececec !important; } .tinv-wishlist table.tinvwl-table-manage-list td { padding: 16px !important; border-bottom: 1px solid #f3f3f3 !important; color: #1a1a1a !important; } .tinv-wishlist .product-thumbnail img { border-radius: 8px !important; max-width: 70px !important; } .tinv-wishlist .product-name a { color: #1a1a1a !important; font-weight: 600 !important; text-decoration: none !important; } .tinv-wishlist .product-price { color: #1a1a1a !important; font-weight: 600 !important; } /* Botón "Añadir al carrito" dentro del listado de wishlist */ .tinv-wishlist .button, .tinv-wishlist .product-action .button { background: #1a1a1a !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 10px 20px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .tinv-wishlist .button:hover { opacity: .85; } /* ============================================================ Página /wishlist/ — diseño editorial Yagaro ============================================================ */ /* Contenedor central */ .tinv-wishlist { max-width: 900px !important; margin: 40px auto !important; padding: 0 24px !important; } /* Título "Default wishlist" → eyebrow Yagaro pequeño centrado. Cubrimos cualquier nivel del DOM donde TI Wishlist meta el h2. */ body .tinv-wishlist h2, body .tinv-wraper .tinv-wishlist h2, body .tinv-wraper.woocommerce.tinv-wishlist h2, body .tinv-wishlist > h2, body .tinv-wishlist h2.tinvwl-default-wishlist-name { font-size: 11px !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: 0.18em !important; font-weight: 600 !important; margin: 0 0 26px !important; padding: 0 !important; border: 0 !important; font-family: inherit !important; text-align: center !important; line-height: 1.2 !important; width: 100% !important; float: none !important; } /* Forzar single column + centro — SOLO en la página de favoritos. Excluimos los wrappers del botón en producto/tienda (llevan una clase de posición tinvwl-*), que comparten la clase .tinv-wishlist pero no deben heredar este layout de página. */ body .tinv-wraper.tinv-wishlist:not([class*="tinvwl-after"]):not([class*="tinvwl-before"]):not([class*="tinvwl-position"]):not([class*="tinvwl-loop"]):not([class*="tinvwl-shortcode"]):not([class*="tinvwl-woocommerce"]) { text-align: center !important; max-width: 700px !important; margin: 40px auto !important; padding: 40px 24px !important; float: none !important; display: block !important; width: 100% !important; } /* Wrapper del botón "Añadir a favoritos" en la página de producto / tienda: sin la caja gigante de la página de favoritos, pegado bajo el carrito. */ body .tinv-wraper.tinv-wishlist[class*="tinvwl-after"], body .tinv-wraper.tinv-wishlist[class*="tinvwl-before"], body .tinv-wraper.tinv-wishlist[class*="tinvwl-position"], body .tinv-wraper.tinv-wishlist[class*="tinvwl-loop"], body .tinv-wraper.tinv-wishlist[class*="tinvwl-shortcode"], body .tinv-wraper.tinv-wishlist[class*="tinvwl-woocommerce"] { max-width: none !important; width: auto !important; margin: 14px 0 0 !important; padding: 0 !important; text-align: left !important; float: none !important; display: block !important; } /* ============================================================ LIMPIEZA wishlist en grid de tienda y ficha de producto. El plugin auto-inyecta botones (texto "Añadir a favoritos" + corazón) que se ven duplicados/superpuestos ("cosas raras"). Los ocultamos en el LOOP de tienda: el acceso a favoritos vive en el header, y en la ficha de producto Yagaro coloca su propio corazón limpio. No tocamos .yagaro-header-wishlist (otra clase) ni la página /wishlist/. ============================================================ */ /* KILL GLOBAL: los wrappers que el plugin inyecta junto al add-to-cart (loop y ficha) llevan SIEMPRE estas clases. La página /wishlist/ NO las usa (usa .tinv-wishlist con tabla), así que es seguro ocultarlas en todo el sitio. El acceso a favoritos queda en el header (.yagaro-header-wishlist). */ .tinv-wraper.tinvwl-after-add-to-cart, .tinv-wraper.tinvwl-before-add-to-cart, .tinvwl-after-add-to-cart, .tinvwl-before-add-to-cart, .tinv-wraper[class*="tinvwl-loop"], .tinvwl_add_to_wishlist_button:not(.yagaro-sp-fav-btn) { display: none !important; } /* Tienda / loop / relacionados */ ul.products li.product .tinv-wraper, ul.products li.product .tinvwl-after-add-to-cart, ul.products li.product .tinvwl_add_to_wishlist_button, .products .product .tinv-wraper, .products .product .tinvwl_add_to_wishlist_button, .related.products .product .tinv-wraper, .up-sells .product .tinv-wraper, /* Ficha de producto: fuera el botón/caja del plugin (el acceso a favoritos vive en el header). NO afecta a la página /wishlist/ ni al header .yagaro-header-wishlist (otra clase). */ .single-product .summary .tinv-wraper, .single-product .summary .tinvwl_add_to_wishlist_button:not(.yagaro-sp-fav-btn), .single-product div.product .tinv-wraper, .single-product div.product .tinvwl-shortcode-add-to-cart, .single-product div.product .tinvwl-after-add-to-cart, .single-product div.product .woocommerce-product-gallery .tinv-wraper, .single-product div.product > .tinv-wraper { display: none !important; } /* Empty state: el .woocommerce-info que mete TI dentro lo "desactivamos" y lo convertimos en heading editorial centrado, sin pill negro */ body .tinv-wishlist .woocommerce-info, body .tinv-wishlist .cart-empty, body .tinv-wishlist .wishlist-empty, body .tinv-wishlist-empty { display: block !important; background: transparent !important; color: #1a1a1a !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 14px !important; text-align: center !important; font-size: 18px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; line-height: 1.3 !important; } body .tinv-wishlist .woocommerce-info::before, body .tinv-wishlist .cart-empty::before { display: none !important; content: none !important; background: transparent !important; mask: none !important; -webkit-mask: none !important; } /* Quitar los styles de mark/link dentro del aviso */ body .tinv-wishlist .woocommerce-info a { display: inline !important; background: transparent !important; color: #1a1a1a !important; padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: inherit !important; text-transform: none !important; font-weight: inherit !important; text-decoration: underline; } /* Wrapper del empty state: icono ♡ + heading + sub + botón centrados */ .tinv-wishlist > .tinv-wraper, .tinv-wishlist .tinvwl-empty-wrap, .tinv-wishlist.tinvwl-empty { text-align: center !important; padding: 30px 20px 40px !important; } .tinv-wishlist::before { content: ""; display: block; width: 46px; height: 46px; margin: 30px auto 22px; background-color: #1a1a1a; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* Si la wishlist NO está vacía, no queremos el icono gigante arriba */ .tinv-wishlist:has(.tinvwl-table-manage-list)::before, .tinv-wishlist:has(table.tinvwl-table-manage-list)::before { display: none; } /* Botón "Volver a la tienda" → pill primary centrado */ body .tinv-wishlist .return-to-shop, body .tinv-wishlist p.return-to-shop { text-align: center !important; margin: 26px 0 0 !important; } body .tinv-wishlist .return-to-shop a, body .tinv-wishlist .return-to-shop a.button, body .tinv-wishlist a.button.wc-backward { display: inline-block !important; padding: 14px 28px !important; background: #1a1a1a !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; line-height: 1.2 !important; height: auto !important; box-shadow: none !important; transition: opacity .2s ease; } body .tinv-wishlist .return-to-shop a:hover { opacity: .85; background: #1a1a1a !important; color: #fff !important; } /* ============================================================ Dashboard (Escritorio) — heading editorial + KPIs + último pedido ============================================================ */ .yagaro-dashboard { padding: 0; } .yagaro-dash-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #888; margin: 0 0 14px; font-weight: 600; } .yagaro-dash-title { font-size: 38px !important; font-weight: 400 !important; margin: 0 0 8px !important; color: #1a1a1a; line-height: 1.1; text-transform: none !important; letter-spacing: 0 !important; } .yagaro-dash-title em { font-style: italic; font-weight: 400; } .yagaro-dash-sub { color: #555; font-size: 14px; margin: 0 0 28px; } /* KPI grid (3 columnas) */ .yagaro-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; } .yagaro-kpi { display: block; padding: 24px; background: #fff; border: 1px solid #ececec; border-radius: 12px; color: #1a1a1a; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } a.yagaro-kpi:hover { border-color: #1a1a1a; box-shadow: 0 4px 14px rgba(0,0,0,0.05); color: #1a1a1a; transform: translateY(-1px); } .yagaro-kpi-icon { display: inline-flex; margin-bottom: 18px; color: #1a1a1a; } .yagaro-kpi-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; } .yagaro-kpi-num { display: block; font-size: 38px; font-weight: 300; line-height: 1; margin-bottom: 8px; color: #1a1a1a; } .yagaro-kpi-lbl { display: block; font-size: 13px; color: #555; margin-bottom: 14px; } .yagaro-kpi-link { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #1a1a1a; text-transform: uppercase; } .yagaro-kpi-link--muted { color: #bbb; } /* Último pedido */ .yagaro-dash-lastorder { margin-top: 8px; } .yagaro-dash-lastorder-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .yagaro-dash-lastorder-head h3 { margin: 0; font-size: 18px !important; font-weight: 700; color: #1a1a1a; text-transform: none; letter-spacing: 0; } .yagaro-dash-link { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #1a1a1a; text-transform: uppercase; text-decoration: none; } .yagaro-dash-link:hover { opacity: .7; color: #1a1a1a; } .yagaro-order-card { background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 22px; } .yagaro-order-meta { display: flex; align-items: center; gap: 36px; margin-bottom: 16px; flex-wrap: wrap; } .yagaro-order-meta > div { display: flex; flex-direction: column; gap: 4px; } .yagaro-order-lbl { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .yagaro-order-val { font-size: 14px; color: #1a1a1a; font-weight: 600; } .yagaro-order-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #1a1a1a; } .yagaro-order-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #888; } .yagaro-status-completed::before { background: #1f9d55; } .yagaro-status-processing::before { background: #f0b400; } .yagaro-status-on-hold::before, .yagaro-status-pending::before { background: #888; } .yagaro-status-cancelled::before, .yagaro-status-failed::before { background: #c1372f; } .yagaro-order-body { display: flex; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid #ececec; flex-wrap: wrap; } .yagaro-order-thumbs { display: flex; flex: 0 0 auto; } .yagaro-order-thumb { display: inline-block; width: 54px; height: 54px; border-radius: 8px; overflow: hidden; background: #f0f0f0; border: 2px solid #fafafa; } .yagaro-order-thumb + .yagaro-order-thumb { margin-left: -14px; } .yagaro-order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .yagaro-order-summary { flex: 1 1 auto; font-size: 13px; color: #555; } .yagaro-order-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Botón outline pill — reutilizable en toda la cuenta */ .yagaro-btn-outline { display: inline-block; padding: 10px 18px; border: 1px solid #1a1a1a; border-radius: 999px; color: #1a1a1a !important; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; background: transparent; cursor: pointer; transition: background .2s ease, color .2s ease; } .yagaro-btn-outline:hover { background: #1a1a1a; color: #fff !important; } .yagaro-btn-sm { padding: 7px 14px; font-size: 10px; letter-spacing: 0.1em; } /* ============================================================ Mi cuenta — páginas internas (heading editorial común) ============================================================ */ /* Selectores muy específicos para ganar a .woocommerce-account h2 */ .woocommerce-account .yagaro-page .yagaro-page-title, .woocommerce-account h2.yagaro-page-title, .yagaro-page-title { font-size: 38px !important; font-weight: 400 !important; margin: 0 0 8px !important; color: #1a1a1a !important; line-height: 1.1 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; border: 0 !important; } .yagaro-page-title em { font-style: italic; font-weight: 400; } .yagaro-page-sub { color: #555; font-size: 14px; margin: 0 0 28px; max-width: 640px; } /* ============================================================ DEFENSIVO: el tema padre revienta SVGs en contexto cuenta sin width/height explícitos. Forzamos tamaños via !important. ============================================================ */ .yagaro-page svg, .yagaro-dashboard svg { max-width: 100% !important; flex-shrink: 0; } .yagaro-page .yagaro-account-card__icon, .yagaro-page .yagaro-addr-icon, .yagaro-page .yagaro-kpi-icon, .yagaro-page .yagaro-empty-illustration, .yagaro-dashboard .yagaro-kpi-icon { flex-shrink: 0; } /* Tamaños explícitos por componente */ .yagaro-page .yagaro-account-card__icon svg, .yagaro-account-card__icon svg { width: 20px !important; height: 20px !important; } .yagaro-page .yagaro-pwd-toggle svg, .yagaro-pwd-toggle svg { width: 16px !important; height: 16px !important; } .yagaro-page .yagaro-account-fineprint svg, .yagaro-account-fineprint svg { width: 13px !important; height: 13px !important; } .yagaro-page .yagaro-empty-illustration svg, .yagaro-empty-illustration svg { width: 24px !important; height: 24px !important; } .yagaro-page .yagaro-empty-fineprint svg, .yagaro-empty-fineprint svg { width: 13px !important; height: 13px !important; } .yagaro-dashboard .yagaro-kpi-icon svg, .yagaro-kpi-icon svg { width: 22px !important; height: 22px !important; } .yagaro-page .yagaro-addr-icon svg, .yagaro-addr-icon svg { width: 22px !important; height: 22px !important; } /* ============================================================ CARRITO VACÍO — fail-safe (por si cart.css no se carga) ============================================================ */ .yagaro-cart-empty svg { max-width: 100% !important; } .yagaro-cart-empty .yagaro-cart-empty__icon svg { width: 46px !important; height: 46px !important; } .yagaro-cart-empty .yagaro-cart-empty__badge svg { width: 18px !important; height: 18px !important; } .yagaro-cart-empty .yagaro-cart-empty__badge { display: inline-flex !important; align-items: center; gap: 8px; } /* Heading editorial gana al h2 del tema padre */ .woocommerce-cart .yagaro-cart-empty__title, h2.yagaro-cart-empty__title, .yagaro-cart-empty__title { margin: 0 0 18px !important; font-size: 46px !important; line-height: 1.05 !important; font-weight: 400 !important; color: #1a1a1a !important; text-transform: none !important; letter-spacing: 0 !important; font-family: inherit !important; font-style: normal !important; } .yagaro-cart-empty__title em { font-style: italic !important; font-weight: 400 !important; } /* Eyebrow uppercase (estaba saliendo "Tu bolsa" en mixed case) */ .yagaro-cart-empty__eyebrow, .yagaro-cart-empty .yagaro-cart-empty__eyebrow { text-transform: uppercase !important; font-size: 11px !important; color: #888 !important; letter-spacing: 0.18em !important; font-weight: 600 !important; margin: 0 0 14px !important; } @media (max-width: 600px) { .woocommerce-cart .yagaro-cart-empty__title, .yagaro-cart-empty__title { font-size: 32px !important; } } /* ============================================================ Direcciones — 2 cards (facturación + envío) ============================================================ */ .yagaro-addr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 26px; } .yagaro-addr-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 22px; transition: border-color .2s ease, box-shadow .2s ease; } .yagaro-addr-card:hover { border-color: #d0d0d0; } .yagaro-addr-card.is-empty { background: #fafafa; border-style: dashed; } .yagaro-addr-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #ececec; } .yagaro-addr-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: #1a1a1a; flex: 0 0 36px; } .yagaro-addr-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; } .yagaro-addr-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .yagaro-addr-titles h3 { margin: 0 !important; font-size: 15px !important; font-weight: 700; color: #1a1a1a; text-transform: none; letter-spacing: 0; line-height: 1.3; } .yagaro-addr-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; font-weight: 600; } .yagaro-addr-body { color: #1a1a1a; font-size: 14px; line-height: 1.6; } .yagaro-addr-body address { font-style: normal; margin: 0; } .yagaro-addr-body address > br:first-child { display: none; } .yagaro-addr-phone { color: #555; } .yagaro-addr-empty { color: #888; font-size: 13px; margin: 0; } @media (max-width: 768px) { .yagaro-addr-grid { grid-template-columns: 1fr; } } /* ============================================================ Botón primario (pill negro relleno) — para empty states y CTAs ============================================================ */ .yagaro-btn-primary { display: inline-block; padding: 14px 26px; border: 0; border-radius: 999px; background: #1a1a1a; color: #fff !important; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: opacity .2s ease; } .yagaro-btn-primary:hover { opacity: .85; color: #fff !important; background: #1a1a1a; } /* ============================================================ Empty state genérico (métodos de pago, descargas, etc.) Contenedor centrado con ilustración + título + sub + CTA + fineprint ============================================================ */ .yagaro-empty-state { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 60px 30px 50px; text-align: center; max-width: 100%; } /* Heading del empty state — gana al h3 grande del tema padre */ .woocommerce-account .yagaro-empty-state .yagaro-empty-title, .yagaro-empty-state h3.yagaro-empty-title, h3.yagaro-empty-title, .yagaro-empty-title { margin: 0 0 8px !important; font-size: 17px !important; font-weight: 700 !important; color: #1a1a1a !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.3 !important; font-family: inherit !important; font-style: normal !important; } .woocommerce-account .yagaro-empty-state .yagaro-empty-sub, .yagaro-empty-state .yagaro-empty-sub, .yagaro-empty-sub { margin: 0 0 26px !important; font-size: 13px !important; color: #888 !important; line-height: 1.5 !important; font-family: inherit !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; } .yagaro-empty-fineprint { margin: 18px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #888; letter-spacing: 0.04em; } .yagaro-empty-fineprint svg { width: 13px; height: 13px; stroke: currentColor; fill: none; } /* ============================================================ Ilustración de tarjeta (mockup CSS para empty state pagos) ============================================================ */ .yagaro-card-mockup { position: relative; width: 280px; height: 168px; margin: 0 auto 30px; background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); border-radius: 14px; padding: 18px 20px; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); overflow: hidden; } .yagaro-card-mockup::after { /* círculos sutiles del logo a la derecha */ content: ""; position: absolute; right: -40px; top: 50%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%); transform: translateY(-50%); } .yagaro-card-mockup__brand { width: 26px; height: 26px; background: #fff; color: #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; margin-bottom: 14px; position: relative; z-index: 1; } .yagaro-card-mockup__chip { position: absolute; top: 18px; right: 20px; width: 36px; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #555 0%, #333 100%); opacity: .85; } .yagaro-card-mockup__number { display: flex; align-items: center; gap: 6px; margin: 18px 0 22px; flex-wrap: wrap; } .yagaro-card-mockup__number span { width: 7px; height: 7px; background: rgba(255,255,255,0.85); border-radius: 50%; } .yagaro-card-mockup__number span:nth-child(4n) { margin-right: 6px; /* separador entre bloques */ } .yagaro-card-mockup__footer { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.12em; color: rgba(255,255,255,0.7); text-transform: uppercase; } /* ============================================================ Lista de métodos de pago guardados (cuando hay tarjetas) ============================================================ */ .yagaro-paymethods-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; } .yagaro-paymethod-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .yagaro-paymethod-card.is-default { border-color: #1a1a1a; } .yagaro-paymethod-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #1a1a1a; font-size: 14px; } .yagaro-paymethod-brand { font-weight: 600; } .yagaro-paymethod-exp { color: #888; font-size: 13px; } .yagaro-paymethod-actions { display: flex; gap: 8px; flex-wrap: wrap; } .yagaro-paymethods-foot { margin: 0; } /* Ilustración para empty states (descargas, etc.) */ .yagaro-empty-illustration { width: 56px; height: 56px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f5f5f5; color: #1a1a1a; } .yagaro-empty-illustration svg { width: 24px; height: 24px; stroke: currentColor; fill: none; } /* ============================================================ Detalles de la cuenta — Cards con inputs flotantes ============================================================ */ .yagaro-account-form { margin: 0; } .yagaro-account-card { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 26px 28px; margin-bottom: 20px; } .yagaro-account-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .yagaro-account-card__icon { display: inline-flex; color: #1a1a1a; } .yagaro-account-card__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; } .yagaro-account-card h3 { margin: 0 !important; font-size: 16px !important; font-weight: 700; color: #1a1a1a; text-transform: none; letter-spacing: 0; } .yagaro-account-card__body { display: flex; flex-direction: column; gap: 14px; } /* Input group con etiqueta flotante */ .yagaro-input-group { position: relative; border: 1px solid #e0e0e0; border-radius: 12px; padding: 12px 16px 10px; background: #fff; transition: border-color .2s ease; } .yagaro-input-group:focus-within { border-color: #1a1a1a; } .yagaro-input-group > label { display: block; font-size: 11px; color: #888; text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0 0 2px; line-height: 1.2; } /* Quitar los estilos del bloque anterior cuando estamos dentro de un input-group */ .woocommerce-account .yagaro-input-group input, .yagaro-input-group input { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; height: auto !important; min-height: 22px !important; border-radius: 0 !important; width: 100% !important; font-size: 14px !important; color: #1a1a1a !important; line-height: 1.3 !important; } .yagaro-input-group input:focus { box-shadow: none !important; border: 0 !important; } /* Fila con dos inputs lado a lado (Nombre / Apellidos) */ .yagaro-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .yagaro-input-row { grid-template-columns: 1fr; } } /* Texto de ayuda bajo un input */ .yagaro-input-hint { margin: 0; padding: 0 4px; font-size: 12px; color: #888; line-height: 1.4; } .yagaro-input-hint--top { margin: 0 0 16px; } /* Variante password: input + toggle "Mostrar" a la derecha */ .yagaro-input-group--pwd { display: flex; align-items: center; gap: 14px; } .yagaro-input-group--pwd .yagaro-input-main { flex: 1 1 auto; min-width: 0; } .yagaro-pwd-toggle { flex: 0 0 auto; border: 0; background: transparent; color: #555; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; transition: color .2s ease; } .yagaro-pwd-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; } .yagaro-pwd-toggle:hover { color: #1a1a1a; } .yagaro-pwd-toggle.is-on { color: #1a1a1a; } /* Barra de acciones inferior (Guardar / Cancelar / fineprint) */ .yagaro-account-actions { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .yagaro-account-fineprint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #888; } .yagaro-account-fineprint svg { width: 13px; height: 13px; stroke: currentColor; fill: none; } /* El botón "Guardar cambios" llama a .yagaro-btn-primary; aseguramos que no herede los estilos enormes de los botones de login */ .yagaro-account-form .yagaro-btn-primary, .yagaro-account-form .yagaro-btn-outline { width: auto !important; max-width: none !important; margin: 0 !important; display: inline-block !important; } /* ============================================================ Mi cuenta — empty states (descargas, payment methods) El contenido del centro queda en una tarjeta con icono + texto ============================================================ */ .woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info, .woocommerce-account .woocommerce-MyAccount-content > .woocommerce-message { /* Heredan el pill negro de avisos globales */ } /* ============================================================ Responsive ============================================================ */ @media (max-width: 900px) { .yagaro-kpi-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } .woocommerce-account .woocommerce-MyAccount-content { margin-top: 24px; } .yagaro-dash-title { font-size: 30px !important; } .yagaro-order-meta { gap: 18px; } .yagaro-order-status { margin-left: 0; } } /* ========================================================= MENSAJES DE WOOCOMMERCE (carrito, checkout, cuenta) Aviso "Producto eliminado / ¿Deshacer?", errores e info ========================================================= */ body .woocommerce-message, body .woocommerce-error, body .woocommerce-info, body ul.woocommerce-error, body ul.woocommerce-info, body ul.woocommerce-message { display: flex !important; align-items: flex-start; justify-content: flex-start; gap: 12px; width: 100%; max-width: 100%; margin: 16px 0 24px !important; padding: 16px 20px !important; background: #fbeceb !important; color: #8a201a !important; border: 1px solid #f0c9c5 !important; border-left: 4px solid #c1372f !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; list-style: none !important; box-shadow: none !important; } /* Icono de aviso a la izquierda (✕ rojo en círculo via ::before reactivado) */ body .woocommerce-message::before, body .woocommerce-error::before { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0 !important; border-radius: 50%; background: #c1372f !important; color: #fff !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 20px !important; text-align: center !important; } body .woocommerce-error::before { content: "!" !important; } body .woocommerce-message::before { content: "\2713" !important; /* check */ background: #1f7a44 !important; } body .woocommerce-notices-wrapper { text-align: left; } /* Tipos: error (rojo), success (verde), info (neutro) */ body .woocommerce-error { background: #fbeceb !important; color: #8a201a !important; border-color: #f0c9c5 !important; border-left-color: #c1372f !important; } body .woocommerce-message { background: #eaf5ee !important; color: #1f5c39 !important; border-color: #c8e6d3 !important; border-left-color: #1f7a44 !important; } body .woocommerce-info { background: #f3f4f6 !important; color: #2c2c2c !important; border-color: #e2e4e8 !important; border-left-color: #1a1a1a !important; } body .woocommerce-info::before { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0 !important; border-radius: 50%; background: #1a1a1a !important; color: #fff !important; content: "i" !important; font-size: 12px !important; font-style: italic; font-weight: 700 !important; line-height: 20px !important; text-align: center !important; } /* Enlace "¿Deshacer?" / "Continuar" / etc. dentro del aviso */ body .woocommerce-message a, body .woocommerce-error a, body .woocommerce-info a, body .woocommerce-message a.button, body .woocommerce-message a.restore-item { color: inherit !important; background: transparent !important; border: 0 !important; padding: 0 0 0 4px !important; margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; text-transform: none; letter-spacing: 0; text-decoration: underline; line-height: 1.5 !important; min-height: 0 !important; height: auto !important; } body .woocommerce-message a:hover, body .woocommerce-error a:hover, body .woocommerce-info a:hover { color: inherit !important; opacity: 0.7; } /* En móvil */ @media (max-width: 600px) { body .woocommerce-message, body .woocommerce-error, body .woocommerce-info { max-width: 100% !important; border-radius: 10px !important; padding: 14px 16px !important; } } /* ============================================================ Contenedor global — gutters laterales consistentes en TODAS las páginas. Un único sitio gestiona el espaciado lateral según el ancho de pantalla. .content_inner es el contenedor interno del tema Bridge presente en todas las plantillas. (Las secciones full-bleed —p. ej. .yagaro-home— rompen el contenedor con 100vw y gestionan su propio padding interno, así que no se ven afectadas.) ============================================================ */ .content .content_inner { box-sizing: border-box; } @media (max-width: 1024px) { .content .content_inner { padding-left: 24px; padding-right: 24px; } } @media (max-width: 600px) { .content .content_inner { padding-left: 16px; padding-right: 16px; } } @media (max-width: 380px) { .content .content_inner { padding-left: 14px; padding-right: 14px; } } /* ============================================================ YAGARO · Tarjeta de producto (global: tienda, relacionados, búsqueda) El layout del grid de tienda vive en assets/css/shop.css. ============================================================ */ .yg-card { list-style: none; text-align: left; background: transparent; -webkit-font-smoothing: antialiased; } .yg-card__media { position: relative; border-radius: 16px; background: #f1ece4; aspect-ratio: 3 / 4; } .yg-card__media--ph { background: linear-gradient(155deg, #f3ccb0 0%, #db8c66 48%, #b8502e 100%); } /* El recorte (overflow) va solo en la imagen para no cortar el botón ni los badges */ .yg-card__imglink { display: block; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; } .yg-card__imglink img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .yg-card:hover .yg-card__imglink img { transform: scale(1.04); } /* Badges (NUEVO / -XX%) */ .yg-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 13px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; } .yg-badge--new { background: rgba(255, 255, 255, 0.92); color: #1a1a1a; } .yg-badge--sale { background: #1a1a1a; color: #fff; } /* Corazón wishlist */ .yg-card__wish { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #1a1a1a; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; } .yg-card__wish svg { width: 18px; height: 18px; fill: none; } .yg-card__wish:hover { transform: scale(1.08); } .yg-card__wish.is-active { color: #b8502e; } .yg-card__wish.is-active svg { fill: currentColor; } /* Botón REAL de wishlist (plugin TI WooCommerce Wishlist), estilado como nuestro corazón flotante. Best-effort sobre el markup del plugin. */ .yg-card__wishti { position: absolute; top: 14px; right: 14px; z-index: 3; } .yg-card__wishti .tinv-wishlist, .yg-card__wishti .tinv-wraplist, .yg-card__wishti .tinvwl_add_to_wishlist-after, .yg-card__wishti ul, .yg-card__wishti li { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; list-style: none !important; } .yg-card__wishti .tinvwl_add_to_wishlist_text, .yg-card__wishti .tinvwl-txt { display: none !important; /* solo el corazón, sin texto */ } .yg-card__wishti a.tinvwl_add_to_wishlist_button, .yg-card__wishti .tinvwl_add_to_wishlist_button { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.92) !important; color: #1a1a1a !important; box-shadow: none !important; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; } .yg-card__wishti a.tinvwl_add_to_wishlist_button:hover { transform: scale(1.08); background: #fff !important; } .yg-card__wishti .tinvwl_add_to_wishlist_icon, .yg-card__wishti [class*="tinvwl-icon"] { margin: 0 !important; font-size: 18px; line-height: 1; } /* Estado "ya en favoritos" → corazón relleno rojo */ .yg-card__wishti .tinvwl-product-already-in a.tinvwl_add_to_wishlist_button, .yg-card__wishti a.tinvwl_add_to_wishlist_button.tinvwl-product-already-in, .yg-card__wishti .tinvwl-products-in a.tinvwl_add_to_wishlist_button { color: #b8502e !important; } /* Botón "Añadir rápido" sobre la imagen. El contexto de posicionamiento es .yg-card__media (position:relative). Forzamos con !important y mayor especificidad (.yg-card .yg-card__…) porque Bridge estiliza li.product y sus .button/.add_to_cart_button (posición, márgenes y tamaño), y eso descolocaba el botón fuera de la card. */ .yg-card .yg-card__media { position: relative !important; } .yg-card .yg-card__action { position: absolute !important; left: 16px !important; right: 16px !important; bottom: 16px !important; top: auto !important; width: auto !important; margin: 0 !important; z-index: 2; } .yg-card .yg-card__add, .yg-card a.yg-card__add { position: static !important; /* anula cualquier position:absolute de Bridge */ display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; max-width: none !important; margin: 0 !important; float: none !important; box-sizing: border-box; padding: 16px 14px; min-height: 0 !important; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: #1a1a1a !important; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease; } .yg-card__add:hover { background: #1a1a1a; color: #fff !important; } .yg-card__add.loading { opacity: .6; pointer-events: none; } .yg-card__add.added, .yg-card__add.is-added { background: #1a1a1a; color: #fff !important; } /* WC añade un enlace "Ver carrito" tras el botón ajax; lo ocultamos en el card */ .yg-card__action .added_to_cart { display: none !important; } /* El atributo [hidden] debe ganar a .yg-card__add { display:flex } */ .yg-card .yg-card__add[hidden], .yg-card .yg-card__sizes[hidden] { display: none !important; } /* Popover de tallas (ocupa el mismo sitio que el botón, en el borde inferior) */ .yg-card .yg-card__sizes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 9px 10px; border-radius: 26px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .yg-card__size { flex: 0 0 auto; min-width: 36px; height: 36px; padding: 0 9px; border: 1px solid #e2ddd4; border-radius: 999px; background: #fff; color: #1a1a1a; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease; } .yg-card__size:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } .yg-card__size.is-loading { opacity: .5; pointer-events: none; } .yg-card__size.is-error { border-color: #b8502e; color: #b8502e; } /* Info bajo la imagen */ .yg-card__info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; text-decoration: none; color: #1a1a1a; } .yg-card__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .yg-card__eyebrow { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; font-weight: 600; } .yg-card__title { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.25; } .yg-card:hover .yg-card__title { text-decoration: underline; text-underline-offset: 3px; } /* Mini-rating de la tarjeta: estrellas con relleno por porcentaje (--yg-star-pct). */ .yg-card__rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; line-height: 1; color: #8a8a8a; } .yg-stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; } .yg-stars__base { color: #d9d2c7; } .yg-stars__fill { position: absolute; inset: 0; width: var(--yg-star-pct, 0%); overflow: hidden; white-space: nowrap; color: #1a1a1a; } .yg-card__rnum { font-weight: 600; color: #1a1a1a; } .yg-card__price { display: flex; flex-direction: column-reverse; align-items: flex-end; flex-shrink: 0; font-size: 16px; font-weight: 700; color: #1a1a1a; } .yg-card__price .amount { white-space: nowrap; } .yg-card__price del { font-size: 12px; font-weight: 400; color: #b0a99e; opacity: 1; } .yg-card__price ins { text-decoration: none; }