/* ============================================================
   vestir-tienda.css · F8 (26/09/2026, Claude Code en la nube) · TIENDA (WooCommerce 11.1.2 dentro de Woodmart 8.6.1)
   Producto (11249 Verificada · 14496 Destacada), carrito (9), pago (10), pedido recibido (11341), pago fallido (11342), lista de
   deseos (267) y Mi cuenta (11: SOLO CSS; sus plantillas myaccount/ las lleva otro módulo).
   Woodmart ya quita el CSS de fábrica de WooCommerce y pone el suyo (wd-woocommerce-base y sus «parts», que cargan DESPUÉS del
   tema hijo): se gana con un selector más (body.vl-vestir …), nunca a gritos. Carrito y pago ya van por camino B
   (inc/plantilla-tienda.php + plantilla-tienda.css): aquí solo el halo, los avisos con icono y los botones que faltaban.
   Sin !important · tokens · móvil primero.
   ============================================================ */

/* ---------- 1 · Avisos de WooCommerce: icono + palabra, nunca solo color ---------- */
body.vl-vestir .woocommerce-message,
body.vl-vestir .woocommerce-info,
body.vl-vestir .woocommerce-error,
body.vl-vestir .wc-block-components-notice-banner,
body.vl-vestir .woocommerce-notices-wrapper .woocommerce-message { display: flex; gap: var(--vl-space-md); align-items: flex-start; margin: 0 0 var(--vl-space-lg); padding: var(--vl-space-md) var(--vl-space-lg); border: 1px solid transparent; border-radius: var(--vl-radius-lg); background: var(--vl-info-bg); color: var(--vl-info); font-size: var(--vl-font-body); line-height: var(--vl-lh-body); }
body.vl-vestir .woocommerce-message::before,
body.vl-vestir .woocommerce-info::before,
body.vl-vestir .woocommerce-error::before,
body.vl-vestir .woocommerce-error li::before { content: ""; flex: 0 0 auto; width: 24px; height: 24px; margin: 2px 0 0; position: static; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23035377' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/svg%3E") no-repeat center / 24px; font-family: inherit; }
body.vl-vestir .woocommerce-message { background: var(--vl-success-bg); color: var(--vl-success); }
body.vl-vestir .woocommerce-message::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
body.vl-vestir .woocommerce-error { background: var(--vl-danger-bg); color: var(--vl-danger); list-style: none; }
body.vl-vestir .woocommerce-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E"); }
body.vl-vestir .woocommerce-error li { margin: 0; padding: 0; font-weight: 500; }
body.vl-vestir .woocommerce-error li::before { display: none; }
body.vl-vestir .woocommerce-message .button,
body.vl-vestir .woocommerce-info .button { order: 2; margin-left: auto; min-height: 40px; padding: 8px var(--vl-space-md); border-radius: var(--vl-radius-pill); background: var(--vl-secondary); color: var(--vl-on-color); font-weight: 600; }

/* ---------- 2 · Botones: azul píldora 48 px; los secundarios con aro ---------- */
body.vl-vestir .woocommerce .button,
body.vl-vestir .woocommerce button.button,
body.vl-vestir .woocommerce a.button,
body.vl-vestir .woocommerce input.button,
body.vl-vestir .woocommerce #respond input#submit,
body.vl-vestir .single_add_to_cart_button,
body.vl-vestir .checkout-button,
body.vl-vestir #place_order,
body.vl-vestir .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--vl-touch); padding: 12px var(--vl-space-lg); border-radius: var(--vl-radius-pill); border: 2px solid var(--vl-secondary); background: var(--vl-secondary); color: var(--vl-on-color); font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; box-shadow: none; transition: background var(--vl-transition-fast), border-color var(--vl-transition-fast); }
body.vl-vestir .woocommerce .button:hover,
body.vl-vestir .single_add_to_cart_button:hover,
body.vl-vestir #place_order:hover { background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); }
body.vl-vestir .woocommerce .button:focus-visible,
body.vl-vestir #place_order:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 3px; }
body.vl-vestir .woocommerce .button.alt.disabled,
body.vl-vestir .woocommerce .button:disabled { opacity: .5; cursor: not-allowed; }
body.vl-vestir .woocommerce .button.vl-btn--secondary,
body.vl-vestir .woocommerce .coupon .button,
body.vl-vestir .woocommerce .wc-forward:not(.checkout-button),
body.vl-vestir .woocommerce .order-again .button,
body.vl-vestir .woocommerce .wc-backward { background: var(--vl-bg); border-color: transparent; border-radius: var(--vl-radius-aro); color: var(--vl-primary-dark); box-shadow: var(--vl-aro); }
body.vl-vestir .woocommerce .coupon .button:hover,
body.vl-vestir .woocommerce .wc-backward:hover { background: var(--vl-neon-suave); border-color: transparent; color: var(--vl-primary-dark); box-shadow: var(--vl-aro-fuerte); }

/* ---------- 3 · Campos del pago (y de la cuenta): 48 px, borde 3:1, foco ---------- */
body.vl-vestir .woocommerce form .form-row label,
body.vl-vestir .woocommerce-form-login label,
body.vl-vestir .woocommerce-EditAccountForm label { display: block; margin: 0 0 var(--vl-space-sm); font-size: var(--vl-font-small); font-weight: 600; color: var(--vl-text); }
body.vl-vestir .woocommerce form .form-row .required { color: var(--vl-danger); text-decoration: none; }
body.vl-vestir .woocommerce form .form-row input.input-text,
body.vl-vestir .woocommerce form .form-row textarea,
body.vl-vestir .woocommerce form .form-row select,
body.vl-vestir .woocommerce form .form-row .select2-container .select2-selection--single,
body.vl-vestir .woocommerce-input-wrapper .input-text { min-height: var(--vl-touch); padding: 11px var(--vl-space-md); border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); background: var(--vl-bg); font-size: var(--vl-font-body); color: var(--vl-text); box-shadow: none; }
body.vl-vestir .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--vl-text); }
body.vl-vestir .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }
body.vl-vestir .woocommerce form .form-row input.input-text:focus,
body.vl-vestir .woocommerce form .form-row textarea:focus,
body.vl-vestir .woocommerce form .form-row select:focus { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; border-color: var(--vl-secondary); }
body.vl-vestir .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.vl-vestir .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--vl-danger); }
body.vl-vestir .woocommerce form .form-row.woocommerce-invalid label { color: var(--vl-danger); }
body.vl-vestir .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--vl-success); }
body.vl-vestir .woocommerce form .form-row .woocommerce-input-wrapper .description { font-size: var(--vl-font-small); color: var(--vl-text-muted); }

/* ---------- 4 · El producto (plan): tarjeta con halo, precio grande y «IVA incluido · 1 año» ---------- */
body.vl-vestir.single-product .product .summary,
body.vl-vestir.single-product .entry-summary,
body.vl-vestir .vl-producto-resumen { padding: var(--vl-space-lg); border-radius: var(--vl-radius-xl); background: var(--vl-bg-card); box-shadow: var(--vl-halo); }
body.vl-vestir.single-product .product .price,
body.vl-vestir.single-product .summary .price { font-family: var(--font-titulos); font-size: var(--vl-font-precio); font-weight: 800; color: var(--vl-secondary-dark); }
body.vl-vestir.single-product .product .price del { font-size: var(--vl-font-body); color: var(--vl-text-light); font-weight: 400; }
body.vl-vestir.single-product .product .price .woocommerce-Price-currencySymbol { font-size: .6em; vertical-align: super; }
body.vl-vestir.single-product .product_title { font-family: var(--font-titulos); font-size: var(--vl-font-h1); line-height: var(--vl-lh-h1); color: var(--vl-text); }
body.vl-vestir.single-product .woocommerce-product-details__short-description { font-size: var(--vl-font-body); color: var(--vl-text-muted); }
body.vl-vestir.single-product .wd-product-brands,
body.vl-vestir.single-product .product_meta .sku_wrapper { display: none; } /* referencia interna, no le dice nada a una óptica */
body.vl-vestir.single-product .product_meta,
body.vl-vestir.single-product .product_meta a { font-size: var(--vl-font-small); color: var(--vl-text-muted); }
body.vl-vestir.single-product .urcr-restrict-msg { display: block; padding: var(--vl-space-md) var(--vl-space-lg); border-radius: var(--vl-radius-lg); background: var(--vl-info-bg); color: var(--vl-info); font-size: var(--vl-font-body); }
/* El pequeño listado de la tienda (/profesionales/ hace 301; por si vuelve): tarjetas con halo */
body.vl-vestir .products .product.wd-product,
body.vl-vestir .wd-products .wd-product { border-radius: var(--vl-radius-xl); box-shadow: var(--vl-halo); padding: var(--vl-space-md); transition: box-shadow var(--vl-transition-neon), transform var(--vl-transition-neon); }
body.vl-vestir .wd-products .wd-product:hover { box-shadow: var(--vl-halo-fuerte); transform: translateY(var(--vl-lift)); }

/* ---------- 5 · Carrito y pago (camino B): el halo de la tarjeta del total y del resumen ---------- */
body.vl-vestir .cart-collaterals .cart_totals,
body.vl-vestir .vl-carrito__total,
body.vl-vestir #order_review,
body.vl-vestir .vl-pago__resumen { border-radius: var(--vl-radius-xl); box-shadow: var(--vl-halo); background: var(--vl-bg-card); }
body.vl-vestir .cart_totals .order-total .amount,
body.vl-vestir #order_review .order-total .amount { font-family: var(--font-titulos); font-size: var(--vl-font-h3); font-weight: 800; color: var(--vl-secondary-dark); }
body.vl-vestir .woocommerce-cart table.shop_table td.product-remove a.remove,
body.vl-vestir .woocommerce-cart .remove { width: var(--vl-touch); height: var(--vl-touch); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--vl-danger); font-size: 26px; line-height: 1; }
body.vl-vestir .woocommerce-cart .remove:hover { background: var(--vl-danger-bg); color: var(--vl-danger); }
body.vl-vestir .wc_payment_methods .wc_payment_method { padding: var(--vl-space-md); border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); margin-bottom: var(--vl-space-sm); }
body.vl-vestir .wc_payment_methods .wc_payment_method:has(input:checked) { border-color: var(--vl-secondary); background: var(--vl-secondary-light); }
body.vl-vestir .wc_payment_methods .wc_payment_method label { display: flex; gap: var(--vl-space-md); align-items: center; min-height: var(--vl-touch); margin: 0; font-size: var(--vl-font-body); font-weight: 600; color: var(--vl-text); cursor: pointer; }
body.vl-vestir .wc_payment_methods .wc_payment_method input[type="radio"] { width: 22px; height: 22px; accent-color: var(--vl-secondary); margin: 0; }
body.vl-vestir .wc_payment_methods .payment_box { margin: var(--vl-space-sm) 0 0; padding: var(--vl-space-md); border-radius: var(--vl-radius-md); background: var(--vl-bg-gray); font-size: var(--vl-font-small); color: var(--vl-text-muted); }
body.vl-vestir .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { display: flex; gap: var(--vl-space-md); align-items: flex-start; min-height: var(--vl-touch); font-size: var(--vl-font-body); }
body.vl-vestir .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--vl-secondary); flex: 0 0 auto; margin-top: 2px; }
body.vl-vestir #place_order { width: 100%; }

/* ---------- 6 · Pedido recibido (11341) y pago fallido (11342): la tarjeta con halo, los datos en filas ---------- */
body.vl-vestir .woocommerce-order .woocommerce-thankyou-order-received,
body.vl-vestir .woocommerce-order > p:first-child { margin: 0 0 var(--vl-space-lg); padding: var(--vl-space-md) var(--vl-space-lg); border-radius: var(--vl-radius-lg); background: var(--vl-success-bg); color: var(--vl-success); font-family: var(--font-titulos); font-size: var(--vl-font-h3); font-weight: 700; }
body.vl-vestir .woocommerce-order .woocommerce-thankyou-order-failed { background: var(--vl-danger-bg); color: var(--vl-danger); }
body.vl-vestir .woocommerce-order .woocommerce-order-overview,
body.vl-vestir .woocommerce-thankyou-order-details { display: grid; gap: 0; margin: 0 0 var(--vl-space-lg); padding: var(--vl-space-md) var(--vl-space-lg); list-style: none; border-radius: var(--vl-radius-xl); background: var(--vl-bg-card); box-shadow: var(--vl-halo); }
body.vl-vestir .woocommerce-order-overview li { display: flex; justify-content: space-between; gap: var(--vl-space-md); margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--vl-border); font-size: var(--vl-font-small); color: var(--vl-text-muted); float: none; width: auto; }
body.vl-vestir .woocommerce-order-overview li:last-child { border-bottom: 0; }
body.vl-vestir .woocommerce-order-overview li strong { font-size: var(--vl-font-body); color: var(--vl-text); text-align: right; }
body.vl-vestir .woocommerce-order h2,
body.vl-vestir .woocommerce-order .woocommerce-order-details__title,
body.vl-vestir .woocommerce-order .woocommerce-column__title { font-family: var(--font-titulos); font-size: var(--vl-font-h3); color: var(--vl-text); }
body.vl-vestir .woocommerce-order .woocommerce-bacs-bank-details { padding: var(--vl-space-md) var(--vl-space-lg); border-radius: var(--vl-radius-lg); background: var(--vl-bg-hero); }
body.vl-vestir .woocommerce-order .woocommerce-bacs-bank-details .wc-bacs-bank-details-heading { font-family: var(--font-titulos); font-size: var(--vl-font-h4); }
body.vl-vestir table.woocommerce-table--order-details,
body.vl-vestir table.shop_table { border: 0; border-radius: var(--vl-radius-lg); overflow: hidden; }
body.vl-vestir table.woocommerce-table--order-details th,
body.vl-vestir table.woocommerce-table--order-details td { padding: 12px var(--vl-space-md); border-color: var(--vl-border); font-size: var(--vl-font-body); }
body.vl-vestir table.woocommerce-table--order-details tfoot .order-total td,
body.vl-vestir table.woocommerce-table--order-details tfoot .order-total th { font-weight: 800; color: var(--vl-secondary-dark); font-size: var(--vl-font-h4); }
body.vl-vestir .woocommerce-customer-details address { padding: var(--vl-space-md) var(--vl-space-lg); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg); font-style: normal; line-height: var(--vl-lh-body); }

/* ---------- 7 · Mi cuenta (11): solo CSS sobre las clases de WooCommerce (el HTML es de plantilla-cuenta.php) ---------- */
body.vl-vestir .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-space-xs); }
body.vl-vestir .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; gap: 10px; min-height: var(--vl-touch); padding: 8px var(--vl-space-md); border-radius: var(--vl-radius-md); color: var(--vl-text); font-weight: 500; text-decoration: none; }
body.vl-vestir .woocommerce-MyAccount-navigation ul li.is-active a,
body.vl-vestir .woocommerce-MyAccount-navigation ul li a:hover { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
body.vl-vestir .woocommerce-MyAccount-navigation ul li a:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; }
body.vl-vestir .woocommerce-MyAccount-content { padding: var(--vl-space-lg); border-radius: var(--vl-radius-xl); background: var(--vl-bg-card); box-shadow: var(--vl-halo); }
body.vl-vestir .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { min-height: 40px; padding: 8px var(--vl-space-md); }
body.vl-vestir .woocommerce-orders-table .woocommerce-orders-table__cell-order-status { font-weight: 600; }
body.vl-vestir .woocommerce-account .woocommerce-Address { padding: var(--vl-space-md) var(--vl-space-lg); border: 1px solid var(--vl-border); border-radius: var(--vl-radius-lg); }
body.vl-vestir .woocommerce-account .woocommerce-Address-title h2 { font-family: var(--font-titulos); font-size: var(--vl-font-h4); }
body.vl-vestir .woocommerce-account .woocommerce-Address-title .edit { display: inline-flex; align-items: center; min-height: var(--vl-touch); font-weight: 600; color: var(--vl-secondary); }

/* ---------- 8 · Lista de deseos (267): tarjeta y botones como el resto ---------- */
body.vl-vestir .wd-wishlist-content .wd-product,
body.vl-vestir .wishlist-content .product { border-radius: var(--vl-radius-xl); box-shadow: var(--vl-halo); }
body.vl-vestir .wd-wishlist-empty,
body.vl-vestir .wishlist-empty { padding: var(--vl-space-xl); text-align: center; border-radius: var(--vl-radius-xl); background: var(--vl-bg-soft); color: var(--vl-text-muted); }
