`). Los avisos nativos de * WooCommerce no llevan ese atributo, así que su maquetación no cambia. * * `grid-column` no tiene efecto fuera de un contenedor grid, de modo que la * regla es inocua donde el aviso ya ocupa el ancho completo: en la página del * carrito es hijo directo de `.cart-template` (display block) y en el reintento * de pago (`order-pay`) cuelga de `

`, sin * `.checkout-template` ni grid en la página (comprobado en el DOM real). Si el * padre llegara a maquetar cualquiera de las dos con este grid, la regla ya * estaría puesta. * * Sin `!important`: no hay otra regla que declare `grid-column` sobre este * elemento (las únicas del sitio son las utilidades `col-span-*` del padre, que * el aviso no lleva). */ .checkout-template .woocommerce-info[role="status"] { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- * 8. Formularios (inputs, selects y textareas) * * El ámbito son los contenedores de contenido y los formularios de WooCommerce * (incluido el de acceso del popup de cuenta). Así no se altera el buscador de * la cabecera, que no es un formulario de WooCommerce. * ------------------------------------------------------------------------ */ .woocommerce :is( .product-summary, .rbb-product-catalog, .cart-template, .checkout-template, .woocommerce-cart-form, .woocommerce-checkout, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register ) :is( input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="url"], textarea, select, .input-text ) { min-height: 48px; padding: 0.75rem 1rem; border: 1px solid var(--as-border-input); border-radius: 0.5rem; background-color: var(--as-field); color: var(--as-text); font-size: 1rem; line-height: 1.4; box-shadow: none; } .woocommerce :is( .product-summary, .rbb-product-catalog, .cart-template, .checkout-template, .woocommerce-cart-form, .woocommerce-checkout, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register ) textarea { min-height: 8rem; resize: vertical; } .woocommerce :is( .product-summary, .rbb-product-catalog, .cart-template, .checkout-template, .woocommerce-cart-form, .woocommerce-checkout, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register ) :is( input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], textarea, .input-text )::placeholder { color: var(--as-placeholder); opacity: 1; } .woocommerce :is( .product-summary, .rbb-product-catalog, .cart-template, .checkout-template, .woocommerce-cart-form, .woocommerce-checkout, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register ) :is( input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="url"], textarea, select, .input-text ):focus { border-color: var(--as-gold); outline: 2px solid transparent; outline-offset: 0; box-shadow: var(--as-focus-glow); } /* Autocompletado del navegador: sin el amarillo nativo (paleta-oscura R-9). */ .woocommerce :is( .product-summary, .rbb-product-catalog, .cart-template, .checkout-template, .woocommerce-cart-form, .woocommerce-checkout, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register ) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], textarea, .input-text):autofill { box-shadow: inset 0 0 0 100px var(--as-blue-soft); -webkit-text-fill-color: var(--as-text); } /* Estados de validación de WooCommerce (no se usa :invalid para no pintar * de rojo campos obligatorios vacíos antes de enviar el formulario). El error * en línea usa `--as-danger-text` (6.91:1 sobre tarjeta); `--as-danger` como * borde de 2 px también cumple 3:1 como componente. */ .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce .woocommerce-invalid .input-text { border-color: var(--as-danger-text); box-shadow: 0 0 0 1px var(--as-danger-text); } .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select, .woocommerce .woocommerce-validated .input-text { border-color: var(--as-success-text); } /* -------------------------------------------------------------------------- * 8.1 Indicador de selección de envío, dirección distinta y «Crear una cuenta» * -------------------------------------------------------------------------- * El padre oculta el `` (`display:none; opacity:0; visibility:hidden`) y * dibuja el indicador con un ``: * * .rbb__input-radio .presentation { background-color:#fff; border:1px solid * #dfdfdf; border-radius:100%; height:17px; width:17px; … } * .rbb__input-radio input:checked + .presentation, * .rbb__input-radio input[type="hidden"] + .presentation { * background-color:var(--rbb-general-secondary-color); * box-shadow:inset 0 0 0 3px #fff } * * Con `--rbb-general-secondary-color` = #8CC9F0, el estado vacío era un aro * blanco y el seleccionado un círculo azul claro con anillo blanco interior: * ambos se distinguen mal sobre el navy del checkout y el conjunto no usaba el * acento de marca. Aquí el aro vacío pasa a ser el borde de control del sistema * (`--as-border-input`, ≥3:1 sobre las superficies navy) y el seleccionado un * relleno naranja sólido (`--as-orange-dark`: #F8B018 en oscuro —7.56:1 sobre * `--as-card`, la superficie real del bloque de envío, y hasta 9.75:1 sobre el * lienzo— y #A85A0D en claro), sin anillo blanco interior. * * Sin `!important`: los selectores son idénticos a los del padre (misma * especificidad) y `tienda.css` se imprime después de `woocommerce.css`. El * orden lo da la prioridad de `wp_enqueue_scripts`, no la cadena de * dependencias: `rising-bamboo-woocommerce-style` lo encola el padre a la * prioridad por defecto (10) y `autosandoval-tienda` se encola en la 20 (ver * `inc/assets.php`). Tampoco se toca la geometría: 17×17, círculo y separación * respecto al texto siguen siendo los del padre; solo cambian color y grosor del * borde. El * `box-sizing` se declara como salvaguarda —el preflight del padre ya aplica * `border-box` a todo— para que el aro de 2 px no agrande el indicador si esa * regla desapareciera algún día. * * No hay regla de `:focus-visible` porque el `display:none` del padre deja estos * `` fuera del orden de tabulación: mientras se mantenga, no existe foco * de teclado que pintar. Recuperarlo exige cambiar la técnica de ocultamiento * (recorte de 1 px en lugar de `display:none`) y queda fuera de este cambio. * * La regla no se acota a `.checkout-template` a propósito: el mismo marcado * (`label.rbb__input-radio > input + span.presentation`) cubre los tres * controles del flujo de compra —métodos de envío, «¿Enviar a una dirección * diferente?» y «Crear una cuenta»— y también el selector de métodos de envío * del carrito, que se resuelve antes de llegar al checkout. */ .rbb__input-radio .presentation { box-sizing: border-box; background-color: transparent; border: 2px solid var(--as-border-input); box-shadow: none; } .rbb__input-radio input:checked + .presentation, .rbb__input-radio input[type="hidden"] + .presentation { background-color: var(--as-orange-dark); border-color: var(--as-orange-dark); box-shadow: none; } /* -------------------------------------------------------------------------- * 9. Paginación y migas de pan * ------------------------------------------------------------------------ */ .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 0; padding: 0; border: 0; list-style: none; } .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; } .woocommerce-pagination ul.page-numbers .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--as-header-border); border-radius: 0.5rem; background-color: var(--as-card); color: var(--as-link); font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .woocommerce-pagination ul.page-numbers .page-numbers:hover { border-color: var(--as-action); background-color: var(--as-action); color: var(--as-text); } .woocommerce-pagination ul.page-numbers .page-numbers.current, .woocommerce-pagination ul.page-numbers .page-numbers[aria-current="page"] { border-color: var(--as-action); background-color: var(--as-action); color: var(--as-text); } .woocommerce-pagination ul.page-numbers .page-numbers:focus-visible { outline: var(--as-focus-ring); outline-offset: var(--as-focus-offset); } .woocommerce .woocommerce-breadcrumb { margin: 0 0 1.5rem; color: var(--as-placeholder); font-size: 0.875rem; line-height: 1.5; } .woocommerce .woocommerce-breadcrumb a { color: var(--as-link); text-decoration: underline; text-underline-offset: 2px; } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--as-link-hover); } /* -------------------------------------------------------------------------- * 10. Mini-carrito lateral * ------------------------------------------------------------------------ */ .rbb-mini-cart-canvas .cart-right { border-left: 1px solid var(--as-header-border); background-color: var(--as-elevated); box-shadow: var(--shadow-xl); } .rbb-mini-cart-canvas .title-cart { border-bottom: 1px solid var(--as-header-border); } .rbb-mini-cart-canvas .cart-count, .rbb-mini-cart-canvas .title-cart .cart-count { background-color: var(--as-cta-bg); color: var(--as-cta-text); font-weight: 700; } .rbb-mini-cart-canvas .woocommerce-mini-cart-item { border-bottom: 1px solid var(--as-header-border); } .rbb-mini-cart-canvas .woocommerce-mini-cart-item a:not(.remove) { color: var(--as-header-text); text-decoration: none; } .rbb-mini-cart-canvas .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--as-link); } .rbb-mini-cart-canvas .woocommerce-mini-cart-item .remove { color: var(--as-danger-text); } .rbb-mini-cart-canvas .woocommerce-mini-cart__total { border-top: 1px solid var(--as-header-border); color: var(--as-price); } .rbb-mini-cart-canvas .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 0.75rem; } .rbb-mini-cart-canvas .woocommerce-mini-cart__buttons a.button { width: 100%; } /* -------------------------------------------------------------------------- * 11. CSS adicional migrado del tema padre (post 11313) * Se conserva tal cual para no perder los ajustes de la home 11297. * ------------------------------------------------------------------------ */ /* D-15: las fotos de los image-box "policy-icon" deben llenar el círculo de 80px (el tema automize las limita a max-width:33px, tamaño pensado para iconos SVG). */ .elementor-11297 .policy-icon .elementor-image-box-wrapper .elementor-image-box-img img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; } /* D-16: ocultar el banner de título de página + migas SOLO en 11297. No se tocan las opciones globales del tema (rbb_layout_title / rbb_layout_breadcrumb); la tienda y las categorías conservan su banner. */ .page-id-11297 #rbb-page-title { display: none !important; } /* -------------------------------------------------------------------------- * 11-bis. Categorías de las tarjetas de producto de la home (D-10) * * El widget `rbb_woo_products` de Elementor usa un fragmento del padre que * elige la primera hija de la categoría raíz y muestra una categoría que no * corresponde al producto. La tienda ya lo corrige con `woocommerce/content-product.php`; * en la home se ocultan las etiquetas para no publicar información errónea. * Se acota a `body.home`: `.rbb_woo_products` también lo usan los resultados de * búsqueda, relacionados y upsells, donde la categoría sí es correcta y útil. * ------------------------------------------------------------------------ */ body.home .rbb_woo_products .title-category { display: none; } /* -------------------------------------------------------------------------- * 12. Móvil * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .rbb-default-header #rbb-branding a img.logo { max-width: 100px; } .rbb-default-header #rbb-branding a img.sticky-logo { max-width: 100px; } :is(body.woocommerce, body.woocommerce-page) .single_add_to_cart_button, :is(body.woocommerce, body.woocommerce-page) .add_to_cart_button, :is(body.woocommerce, body.woocommerce-page) .checkout-button, :is(body.woocommerce, body.woocommerce-page) #place_order, :is(body.woocommerce, body.woocommerce-page) .wc-block-components-button:not(.is-secondary), .as-btn-primary { width: 100%; } .woocommerce-pagination ul.page-numbers { justify-content: center; } } /* -------------------------------------------------------------------------- * 13. Etiquetas es_CO más largas: evitar desbordes en botones del flujo * * «Añadir al carrito», «Finalizar compra», «Seguir comprando» o * «Añadir a la lista de deseos» no caben en los anchos pensados para el inglés. * No se rediseña nada: los botones conservan su min-height de 48 px, pero * pueden ocupar dos líneas en lugar de recortar el texto. * ------------------------------------------------------------------------ */ .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, :is(body.woocommerce, body.woocommerce-page) .button, :is(body.woocommerce, body.woocommerce-page) button.button, :is(body.woocommerce, body.woocommerce-page) a.button, :is(body.woocommerce, body.woocommerce-page) input.button { height: auto; white-space: normal; overflow-wrap: anywhere; } /* Botones de los plugins de lista de deseos y comparación (tienen altura fija * en su CSS y el texto español se recortaba). */ .woosw-btn, .woosc-btn, .woosw-popup .button, .woosc-popup .button, .woosc-bar .button, .woosw-menu-item { height: auto; min-height: 44px; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; } /* Los campos de la tabla de comparación y las listas de filtros también * muestran etiquetas largas en español. */ .woosc-table td, .woosc-table th, .woosc-settings-field-li .move, .widget.woocommerce .woocommerce-widget-layered-nav-list__item a { overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- * 14. Resultados de búsqueda del catálogo (search.php) * * La plantilla usa clases utilitarias del padre (`text-[1.375rem]`, * `md:text-[1.875rem]`), pero esas utilidades solo existen en el CSS compilado si * el tema padre las generó: la clase no está en su plantilla, así que el `h1` se * quedaba con el tamaño heredado y el encabezado casi no se distinguía del * texto. Se declaran aquí con los mismos valores y se acotan a * `.as-search-results` para no tocar el resto del sitio (hallazgo S-2). * ------------------------------------------------------------------------ */ .as-search-results__header h1 { margin: 0 0 0.5rem; color: var(--as-header-text); font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; } @media (min-width: 768px) { .as-search-results__header h1 { font-size: 1.875rem; } } /* Estado vacío: el bloque no debe estirarse a todo el ancho en escritorio. */ .as-search-results__empty { max-width: 42rem; margin-inline: auto; text-align: center; } .as-search-results__empty p { margin: 0 0 1.5rem; color: var(--as-header-text); font-size: 1rem; line-height: 1.6; } @media (min-width: 1024px) { .as-search-results__empty p { font-size: 1.125rem; } } /* -------------------------------------------------------------------------- * 15. Movimiento reducido * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .rbb-default-header *, .rbb-default-header *::before, .rbb-default-header *::after, .rbb-mini-cart-canvas *, :is(body.woocommerce, body.woocommerce-page) .button, .as-btn-primary, .woocommerce-pagination ul.page-numbers .page-numbers { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }