/* =========================================================
   SELLO · WooCommerce sobre fondo oscuro (0.13.1)
   ---------------------------------------------------------
   Se carga SOLO en las páginas de WooCommerce (tienda, ficha de
   producto, carrito, pago y Mi cuenta) y siempre DESPUÉS de
   theme.css. Pinta los formularios, los avisos, los cupones y los
   totales con las superficies de la marca (Grafito y Acero, texto
   Hueso, líneas finas) en lugar de los colores claros que traen los
   bloques de WooCommerce, que sobre el fondo oscuro dejaban etiquetas
   crema encima de campos blancos (contraste de 1,2 a 1).

   Contrastes (sobre Grafito #161615, WCAG AA):
     texto Hueso #ece9e3 ..... 14,9:1   etiqueta/ayuda #9e9a91 ... 6,5:1
     borde del campo ......... 3,6:1 (mínimo AA para componentes: 3:1)
     error #ff8d8d ........... 8,1:1    correcto #8fd3a4 ......... 10,4:1
     (0.13.2) número del resumen del pago: Tinta sobre Hueso, 16:1
     (0.13.3) etiquetas «País/Región» y «Provincia» del pago: #9e9a91 sobre
              Grafito, 6,45:1 (antes el contenedor blanco que hay detrás de la
              lista las hacía medir 2,81:1)

   Los selectores empiezan por «body .wp-site-blocks» para ganar a
   las hojas de WooCommerce, que algunos bloques cargan al final de
   la página, después de esta.
   ========================================================= */

:root {
	--sello-wc-field: var(--wp--preset--color--graphite);
	--sello-wc-line: rgba(236, 233, 227, .42);
	--sello-wc-error: #ff8d8d;
	--sello-wc-ok: #8fd3a4;
}

/* ---------------------------------------------------------
   1 · Campos de los bloques de WooCommerce (pago y carrito)
   --------------------------------------------------------- */

/* Campo de texto, correo, teléfono… (la etiqueta flota dentro del campo) */
body .wp-site-blocks .wc-block-components-text-input input,
body .wp-site-blocks .wc-block-components-text-input input[type],
body .wp-site-blocks .wc-block-components-textarea,
body .wp-site-blocks .wc-block-components-combobox .components-combobox-control__suggestions-container input,
body .wp-site-blocks .wc-block-components-form .wc-block-components-text-input input[type] {
	background-color: var(--sello-wc-field);
	color: var(--wp--preset--color--fg);
	border: 1px solid var(--sello-wc-line);
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
}

/* Etiqueta flotante: la misma tinta atenuada que el texto de ayuda de la tienda */
body .wp-site-blocks .wc-block-components-text-input label,
body .wp-site-blocks .wc-block-components-form .wc-block-components-text-input label,
body .wp-site-blocks .wc-blocks-components-select__label,
body .wp-site-blocks .wc-block-components-combobox .components-form-field label {
	color: var(--wp--preset--color--fg-dim);
}

/* Lista desplegable de país y provincia */
body .wp-site-blocks .wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: var(--sello-wc-field);
	color: var(--wp--preset--color--fg);
	border: 1px solid var(--sello-wc-line);
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
}

/* 0.13.3: la etiqueta «País/Región» o «Provincia» flota dentro del contenedor de la lista, y WooCommerce pinta ese
   contenedor de blanco (queda tapado por la lista oscura, pero está detrás de la etiqueta). Quien mide el contraste de
   la etiqueta, y un navegador que dibuje un hueco entre la lista y su caja, ven letra #9e9a91 sobre blanco: 2,81:1.
   Con el contenedor del color del campo, la etiqueta es #9e9a91 sobre Grafito: 6,45:1, como las demás etiquetas. */
body .wp-site-blocks .wc-blocks-components-select .wc-blocks-components-select__container {
	background-color: var(--sello-wc-field);
}

body .wp-site-blocks .wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-blocks-components-select .wc-blocks-components-select__select option {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--fg);
}

/* Foco: línea Hueso y aro exterior, bien visibles */
body .wp-site-blocks .wc-block-components-text-input input:focus,
body .wp-site-blocks .wc-block-components-text-input.is-active input:focus,
body .wp-site-blocks .wc-block-components-textarea:focus,
body .wp-site-blocks .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--fg);
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--fg);
	outline-offset: 2px;
}

/* Autocompletado del navegador: que no ponga el fondo claro y el texto oscuro */
body .wp-site-blocks .wc-block-components-text-input input:-webkit-autofill,
body .wp-site-blocks .wc-block-components-text-input input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--preset--color--fg);
	caret-color: var(--wp--preset--color--fg);
	box-shadow: 0 0 0 100px var(--wp--preset--color--graphite) inset;
}

/* Casilla y botón de opción */
body .wp-site-blocks .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
body .wp-site-blocks .wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"] {
	background-color: var(--sello-wc-field);
	border: 1px solid var(--sello-wc-line);
	color: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
body .wp-site-blocks .wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]:checked {
	border-color: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]:checked::before {
	background: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus,
body .wp-site-blocks .wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]:focus {
	outline: 2px solid var(--wp--preset--color--fg);
	outline-offset: 2px;
	box-shadow: none;
}

/* Opciones de envío y de pago (cuando haya): el marco fino y la elegida resaltada salen de WooCommerce
   con el color del texto (Hueso), que ya se ve bien sobre fondo oscuro; aquí solo el texto. */
body .wp-site-blocks .wc-block-components-radio-control__option,
body .wp-site-blocks .wc-block-components-radio-control-accordion-option,
body .wp-site-blocks .wc-block-components-radio-control-accordion-content {
	color: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-block-components-radio-control__description,
body .wp-site-blocks .wc-block-components-radio-control__secondary-label,
body .wp-site-blocks .wc-block-components-radio-control__secondary-description {
	color: var(--wp--preset--color--fg-dim);
}

/* ---------------------------------------------------------
   2 · Errores de validación (campos en rojo claro)
   --------------------------------------------------------- */
body .wp-site-blocks .wc-block-components-text-input.has-error input,
body .wp-site-blocks .wc-block-components-text-input.has-error input:focus,
body .wp-site-blocks .wc-block-components-form .wc-block-components-text-input.has-error input[type],
body .wp-site-blocks .wc-blocks-components-select.has-error .wc-blocks-components-select__select,
body .wp-site-blocks .has-error .wc-blocks-components-select__select {
	border-color: var(--sello-wc-error);
	box-shadow: inset 0 0 0 1px var(--sello-wc-error);
}

body .wp-site-blocks .wc-block-components-text-input.has-error label,
body .wp-site-blocks .wc-block-components-form .wc-block-components-text-input.has-error label,
body .wp-site-blocks .has-error .wc-blocks-components-select__label {
	color: var(--sello-wc-error);
}

body .wp-site-blocks .wc-block-components-validation-error,
body .wp-site-blocks .wc-block-components-validation-error > p,
body .wp-site-blocks .wc-block-components-checkbox.has-error,
body .wp-site-blocks .wc-block-components-checkbox.has-error label {
	color: var(--sello-wc-error);
}

body .wp-site-blocks .wc-block-components-validation-error svg {
	fill: var(--sello-wc-error);
}

/* ---------------------------------------------------------
   3 · Avisos (bloques y WooCommerce clásico)
   --------------------------------------------------------- */
body .wp-site-blocks .wc-block-components-notice-banner,
body .wp-site-blocks .woocommerce-message,
body .wp-site-blocks .woocommerce-info,
body .wp-site-blocks .woocommerce-error {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--fg);
	border: 1px solid var(--sello-wc-line);
	border-radius: 0;
}

body .wp-site-blocks .wc-block-components-notice-banner.is-error,
body .wp-site-blocks .woocommerce-error {
	border-color: var(--sello-wc-error);
}

body .wp-site-blocks .wc-block-components-notice-banner.is-success,
body .wp-site-blocks .woocommerce-message {
	border-color: var(--sello-wc-ok);
}

body .wp-site-blocks .wc-block-components-notice-banner.is-info,
body .wp-site-blocks .wc-block-components-notice-banner.is-warning,
body .wp-site-blocks .woocommerce-info {
	border-color: var(--sello-wc-line);
}

body .wp-site-blocks .wc-block-components-notice-banner > .wc-block-components-notice-banner__content,
body .wp-site-blocks .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--fg);
}

/* Icono: un círculo de color con el signo claro, que se ve sobre Grafito */
body .wp-site-blocks .wc-block-components-notice-banner.is-error > svg {
	background-color: #c0392b;
	fill: #fff;
}

body .wp-site-blocks .wc-block-components-notice-banner.is-success > svg {
	background-color: #2f7d4a;
	fill: #fff;
}

body .wp-site-blocks .wc-block-components-notice-banner.is-info > svg,
body .wp-site-blocks .wc-block-components-notice-banner.is-warning > svg {
	background-color: var(--wp--preset--color--fg-dim);
	fill: var(--wp--preset--color--ink);
}

/* «Ver carrito» y los enlaces de dentro del aviso: Hueso y subrayados */
body .wp-site-blocks .wc-block-components-notice-banner a,
body .wp-site-blocks .wc-block-components-notice-banner .wp-element-button,
body .wp-site-blocks .woocommerce-message .button,
body .wp-site-blocks .woocommerce-info .button {
	color: var(--wp--preset--color--fg);
	background: transparent;
	box-shadow: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}

body .wp-site-blocks .wc-block-components-notice-banner .wc-block-components-button--link,
body .wp-site-blocks .wc-block-components-notice-banner button {
	color: var(--wp--preset--color--fg);
}

/* El enlace «Ver carrito» de un aviso lleva en WooCommerce «color: #2f2f2f !important» (pensado para su aviso claro):
   sobre Grafito casi no se leía. Hace falta otro «!important» para recuperarlo. */
body .wp-site-blocks .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
body .wp-site-blocks .wc-block-components-notice-banner > .wc-block-components-notice-banner__content a {
	color: var(--wp--preset--color--fg) !important;
}

/* ---------------------------------------------------------
   4 · Resumen del pedido, cupones y totales
   --------------------------------------------------------- */
body .wp-site-blocks .wc-block-components-sidebar,
body .wp-site-blocks .wc-block-components-order-summary,
body .wp-site-blocks .wc-block-components-totals-wrapper,
body .wp-site-blocks .wc-block-components-totals-item,
body .wp-site-blocks .wc-block-components-totals-footer-item,
body .wp-site-blocks .wc-block-components-totals-coupon,
body .wp-site-blocks .wc-block-components-panel__button,
body .wp-site-blocks .wc-block-components-product-metadata,
body .wp-site-blocks .wc-block-components-product-details,
body .wp-site-blocks .wc-block-components-title,
body .wp-site-blocks .wc-block-components-checkout-step__title,
body .wp-site-blocks .wc-block-components-checkout-step__description,
body .wp-site-blocks .wc-block-components-checkout-step__heading-content {
	color: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-block-components-product-details .wc-block-components-product-details__name,
body .wp-site-blocks .wc-block-components-product-metadata__description,
body .wp-site-blocks .wc-block-components-product-metadata .wc-block-components-product-details {
	color: var(--wp--preset--color--fg-dim);
}

body .wp-site-blocks .wc-block-components-totals-wrapper,
body .wp-site-blocks .wc-block-components-totals-wrapper.slot-wrapper,
body .wp-site-blocks .wc-block-components-totals-coupon,
body .wp-site-blocks .wc-block-components-panel,
body .wp-site-blocks .wc-block-checkout__terms,
body .wp-site-blocks .wc-block-components-order-summary__content,
body .wp-site-blocks .wc-block-components-order-summary-item {
	border-color: var(--wp--custom--line--dark);
}

/* 0.13.2: cantidad de cada pieza en el resumen del pago (el círculo sobre la foto). WooCommerce pinta el
   círculo con el color del texto (Hueso) y el número en blanco (--wp--preset--color--base, que el tema no
   tiene): 1,2:1. Ahora número Tinta sobre Hueso (16:1), con un aro del color de la caja para separarlo
   de la foto. */
body .wp-site-blocks .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--fg);
	box-shadow: 0 0 0 2px var(--wp--preset--color--graphite);
}

body .wp-site-blocks .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: var(--wp--preset--color--ink);
}

/* Campo del cupón y su botón «Aplicar» */
body .wp-site-blocks .wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	background-color: var(--sello-wc-field);
}

body .wp-site-blocks .wc-block-components-totals-coupon__button,
body .wp-site-blocks .wc-block-components-totals-coupon__button.wc-block-components-button {
	background: var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
	border-radius: 0;
}

/* Cantidad y papelera del carrito */
body .wp-site-blocks .wc-block-components-quantity-selector {
	background-color: var(--sello-wc-field);
	border: 1px solid var(--sello-wc-line);
	border-radius: 0;
	color: var(--wp--preset--color--fg);
}

body .wp-site-blocks .wc-block-components-quantity-selector::after {
	border: 0;
}

body .wp-site-blocks .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input,
body .wp-site-blocks .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--fg);
	box-shadow: none;
}

body .wp-site-blocks .wc-block-cart-item__remove-link,
body .wp-site-blocks .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--fg-dim);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Botones de pagar: los del tema (Hueso con letra Tinta) ya cumplen; solo el foco */
body .wp-site-blocks .wc-block-components-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--fg);
	outline-offset: 4px;
}

/* ---------------------------------------------------------
   5 · WooCommerce clásico: Mi cuenta, formularios y ficha
   --------------------------------------------------------- */
body .wp-site-blocks .woocommerce form .form-row input.input-text,
body .wp-site-blocks .woocommerce form .form-row textarea,
body .wp-site-blocks .woocommerce form .form-row select,
body .wp-site-blocks .woocommerce-page form .form-row input.input-text,
body .wp-site-blocks .woocommerce-Input,
body .wp-site-blocks .woocommerce form .password-input input,
body .wp-site-blocks .woocommerce .select2-container--default .select2-selection--single,
body .wp-site-blocks .woocommerce .quantity input.qty,
body .wp-site-blocks .woocommerce table.variations select,
body .wp-site-blocks .woocommerce #review_form textarea,
body .wp-site-blocks .woocommerce #review_form input[type="text"],
body .wp-site-blocks .woocommerce #review_form input[type="email"] {
	background-color: var(--sello-wc-field);
	color: var(--wp--preset--color--fg);
	border: 1px solid var(--sello-wc-line);
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
}

body .wp-site-blocks .woocommerce form .form-row input.input-text:focus,
body .wp-site-blocks .woocommerce form .form-row textarea:focus,
body .wp-site-blocks .woocommerce form .form-row select:focus,
body .wp-site-blocks .woocommerce .quantity input.qty:focus,
body .wp-site-blocks .woocommerce table.variations select:focus {
	border-color: var(--wp--preset--color--fg);
	outline: 2px solid var(--wp--preset--color--fg);
	outline-offset: 2px;
}

body .wp-site-blocks .woocommerce form .form-row label,
body .wp-site-blocks .woocommerce form .form-row .required {
	color: var(--wp--preset--color--fg);
}

body .wp-site-blocks .woocommerce form .form-row .required {
	color: var(--sello-wc-error);
	text-decoration: none;
}

body .wp-site-blocks .woocommerce form .form-row.woocommerce-invalid input.input-text,
body .wp-site-blocks .woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--sello-wc-error);
}

body .wp-site-blocks .woocommerce form .form-row.woocommerce-invalid label {
	color: var(--sello-wc-error);
}

/* Listas desplegables de la ficha (Acabado, Talla…) y de los formularios clásicos: WooCommerce les pone un
   interlineado de 32 px, que baja el texto hasta cortarlo, y una flecha negra que sobre fondo oscuro no se ve.
   Aquí el texto va centrado y la flecha es del color del texto. */
body .wp-site-blocks .woocommerce table.variations select,
body .wp-site-blocks .variations select,
body .wp-site-blocks .woocommerce form .form-row select {
	line-height: 1.3;
	padding-block: 12px;
	/* «!important»: la hoja de WooCommerce para la ficha fija su flecha negra con mayor prioridad. */
	background-color: var(--sello-wc-field) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ece9e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
}

/* Ojo de «mostrar contraseña»: WooCommerce lo dibuja oscuro; se invierte para que se vea sobre el campo oscuro. */
body .wp-site-blocks .woocommerce form .show-password-input {
	color: var(--wp--preset--color--fg);
	filter: invert(1);
	opacity: .75;
}

body .wp-site-blocks .woocommerce form .show-password-input:hover,
body .wp-site-blocks .woocommerce form .show-password-input:focus-visible {
	opacity: 1;
}

/* 0.13.3: «Pedido recibido» para un visitante: el botón «Confirmar correo electrónico y ver pedido» es un
   <input type="submit"> y su texto va en una sola línea (white-space: pre): con 390 px de pantalla medía 427 px, más
   que su caja (358 px), y la página se ensanchaba hasta 443 px. Ahora el texto baja de línea y el botón no pasa de su caja. */
body .wp-site-blocks .woocommerce-verify-email input[type="submit"],
body .wp-site-blocks .woocommerce-verify-email .button {
	box-sizing: border-box;
	max-width: 100%;
	white-space: normal;
	line-height: 1.35;
	text-align: center;
}

/* Cuadro del formulario de acceso y de registro */
body .wp-site-blocks .woocommerce form.woocommerce-form-login,
body .wp-site-blocks .woocommerce form.woocommerce-form-register,
body .wp-site-blocks .woocommerce form.woocommerce-ResetPassword,
body .wp-site-blocks .woocommerce form.checkout_coupon {
	border: 1px solid var(--wp--custom--line--dark);
	border-radius: 0;
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--fg);
}

/* Tablas de Mi cuenta (pedidos, descargas) */
body .wp-site-blocks .woocommerce table.shop_table,
body .wp-site-blocks .woocommerce table.shop_table th,
body .wp-site-blocks .woocommerce table.shop_table td {
	border-color: var(--wp--custom--line--dark);
	color: var(--wp--preset--color--fg);
}

/* Etiquetas «SKU / Categoría / Etiquetas» y precios de la ficha: ya heredan el color del tema */
body .wp-site-blocks .woocommerce-product-details__short-description,
body .wp-site-blocks .woocommerce-variation-description {
	color: var(--wp--preset--color--fg);
}

/* ---------------------------------------------------------
   6 · Cabecera del pago
   ---------------------------------------------------------
   En el pago, WooCommerce pone su propia cabecera (el título del sitio y el icono del carrito), no la del tema.
   Se queda como está, pero el nombre usa la letra del logotipo (Antonio, mayúsculas y espaciado). */
body.woocommerce-checkout .wp-site-blocks > header .wp-block-site-title,
body.woocommerce-checkout .wp-site-blocks > header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: .26em;
	line-height: 1;
	text-transform: uppercase;
}