/* Los Diaz · woocommerce.css — WooCommerce con la misma piel que los Presets de botón.
   Los botones de WooCommerce (plantillas clásicas y bloques de carrito/checkout) no
   son módulos de Divi, así que no heredan Presets: se igualan aquí con los mismos
   tokens. Si cambia un Preset de botón, revisar este archivo.

   Especificidad: Divi estiliza WooCommerce con selectores como
   ".woocommerce button.button.alt" (0,3,1). Todo se ancla a #page-container (el
   contenedor de Divi en todas las páginas) para ganar sin !important.
   El interlineado 1.7em lo impone Divi con !important a los botones de WooCommerce;
   los botones de Divi usan el mismo, así que ambos miden igual. */

/* ---- Botón primario: acción principal (agregar al carrito, pagar, finalizar) ---- */
#page-container .button,
#page-container .single_add_to_cart_button,
#page-container #respond input#submit,
#page-container .wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 14px 28px;
	border: var(--gvid-cc-borde) solid var(--cc-texto);
	border-radius: var(--gvid-cc-radio-boton);
	background-color: var(--cc-texto);
	color: var(--cc-superficie);
	font-family: var(--et_global_body_font);
	font-size: var(--gvid-cc-texto-boton);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition:
		background-color var(--cc-duracion) var(--cc-curva),
		border-color var(--cc-duracion) var(--cc-curva),
		color var(--cc-duracion) var(--cc-curva),
		transform var(--cc-duracion) var(--cc-curva);
}

/* Divi agrega una flecha (::after) y ensancha el padding al pasar el mouse; el diseño
   no usa flecha, así que el padding del hover se fija igual al de reposo. */
#page-container .button::after,
#page-container .single_add_to_cart_button::after {
	display: none;
}

#page-container .button:hover,
#page-container .single_add_to_cart_button:hover,
#page-container #respond input#submit:hover,
#page-container .wc-block-components-button:not(.is-link):hover {
	padding: 14px 28px;
	border: var(--gvid-cc-borde) solid var(--cc-acento);
	background-color: var(--cc-acento);
	color: var(--cc-texto);
}

#page-container .button:active,
#page-container .single_add_to_cart_button:active,
#page-container .wc-block-components-button:not(.is-link):active {
	transform: translateY(1px);
}

/* ---- Botón secundario: acciones de apoyo (ver carrito, cupón, actualizar) ---- */
#page-container .button.wc-forward,
#page-container button[name="apply_coupon"],
#page-container button[name="update_cart"],
#page-container .wc-block-components-button.outlined {
	background-color: transparent;
	color: var(--cc-texto);
}

#page-container .button.wc-forward:hover,
#page-container button[name="apply_coupon"]:hover,
#page-container button[name="update_cart"]:hover,
#page-container .wc-block-components-button.outlined:hover {
	border-color: var(--cc-texto);
	background-color: var(--cc-texto);
	color: var(--cc-superficie);
}

/* Deshabilitado: legible pero claramente inactivo. */
#page-container .button:disabled,
#page-container .button.disabled,
#page-container .wc-block-components-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* ---- Precios: serif en color de texto (el mostaza no cumple contraste para texto) ---- */
#page-container .price,
#page-container .wc-block-components-product-price,
#page-container .wc-block-formatted-money-amount {
	font-family: var(--et_global_heading_font);
	color: var(--cc-texto);
}

#page-container .price del,
#page-container .wc-block-components-product-price del {
	color: var(--cc-texto-suave);
	font-size: 0.8125em;
}

#page-container .price ins {
	text-decoration: none;
}

/* ---- Oferta ----
   Excepción documentada al "sin !important": Divi 5.13 fija la insignia en su CSS
   estático con !important (style-static.min.css: fondo #ef8f61, radio 3px, padding,
   peso, top/left 10px). No hay opción global que lo cambie; solo se gana así.
   Verificar al actualizar Divi: grep -o 'span.onsale{[^}]*}' Divi/style-static.min.css */
#page-container span.onsale {
	top: 14px !important;
	left: 14px !important;
	min-width: auto !important;
	min-height: auto !important;
	margin: 0 !important;
	padding: 6px 11px !important;
	border-radius: var(--gvid-cc-radio-boton) !important;
	background: var(--cc-oferta) !important;
	color: var(--cc-superficie);
	font-size: var(--gvid-cc-texto-etiqueta);
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	line-height: 1.2 !important;
}

/* ---- Campos de formulario (checkout, cuenta, cupón, cantidad) ---- */
#page-container .form-row input.input-text,
#page-container .form-row textarea,
#page-container .form-row select,
#page-container .quantity input.qty,
#page-container .wc-block-components-text-input input,
#page-container .wc-block-components-combobox .components-combobox-control__input {
	border: var(--gvid-cc-borde) solid var(--cc-borde);
	border-radius: var(--gvid-cc-radio);
	background-color: var(--cc-superficie);
	color: var(--cc-texto);
	transition: border-color var(--cc-duracion) var(--cc-curva);
}

#page-container .form-row input.input-text:hover,
#page-container .form-row textarea:hover,
#page-container .quantity input.qty:hover,
#page-container .wc-block-components-text-input input:hover {
	border-color: var(--cc-taupe);
}

#page-container .form-row input.input-text:focus,
#page-container .form-row textarea:focus,
#page-container .quantity input.qty:focus,
#page-container .wc-block-components-text-input input:focus {
	border-color: var(--cc-texto);
}

@media (prefers-reduced-motion: reduce) {
	#page-container .button,
	#page-container .single_add_to_cart_button,
	#page-container .wc-block-components-button {
		transition: none;
	}

	#page-container .button:active,
	#page-container .single_add_to_cart_button:active {
		transform: none;
	}
}

/* ---- Avisos (agregado al carrito, errores) ----
   Divi fija color blanco, padding y tamaño con !important: se conserva su fondo
   oscuro (color Texto, buen contraste) y solo se ordena el ancho y el botón. */
#page-container .woocommerce-notices-wrapper:not(:empty) {
	width: min(100% - 2 * var(--gvid-cc-margen-lateral), var(--gvid-cc-ancho-contenido));
	margin: 24px auto 0;
}

#page-container .woocommerce-message,
#page-container .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0;
	border-radius: var(--gvid-cc-radio);
	background-color: var(--cc-texto);
}

#page-container .woocommerce-message .button.wc-forward,
#page-container .woocommerce-info .button.wc-forward {
	order: 2;
	padding: 10px 20px;
	border-color: var(--cc-superficie);
	background-color: var(--cc-superficie);
	color: var(--cc-texto);
}

#page-container .woocommerce-message .button.wc-forward:hover,
#page-container .woocommerce-info .button.wc-forward:hover {
	padding: 10px 20px;
	border-color: var(--cc-acento);
	background-color: var(--cc-acento);
	color: var(--cc-texto);
}